feat(solid): move examples to readme file

docs/SOLID/dependency_inversion_principle/README.md

@@ -11,4 +11,82 @@ ___
 ## Why?
 
 - We need to create specific interfaces instead a generic interface
-- With specific interfaces, the classes do not require useless information
+- With specific interfaces, the classes do not require useless information
+
+## Examples (JS)
+
+### Bad example
+
+```js
+class InventoryRequester {
+  constructor() {
+    this.REQ_METHODS = ["HTTP"];
+  }
+
+  requestItem(item) {
+    // ...
+  }
+}
+
+class InventoryTracker {
+  constructor(items) {
+    this.items = items;
+
+    // We have created a dependency on a specific request implementation.
+    this.requester = new InventoryRequester();
+  }
+
+  requestItems() {
+    this.items.forEach(item => {
+      this.requester.requestItem(item);
+    });
+  }
+}
+
+const inventoryTracker = new InventoryTracker(["apples", "bananas"]);
+inventoryTracker.requestItems();
+```
+
+### Good example
+
+```js
+class InventoryTracker {
+  constructor(items, requester) {
+    this.items = items;
+    this.requester = requester;
+  }
+
+  requestItems() {
+    this.items.forEach(item => {
+      this.requester.requestItem(item);
+    });
+  }
+}
+
+class InventoryRequesterV1 {
+  constructor() {
+    this.REQ_METHODS = ["HTTP"];
+  }
+
+  requestItem(item) {
+    // ...
+  }
+}
+
+class InventoryRequesterV2 {
+  constructor() {
+    this.REQ_METHODS = ["WS"];
+  }
+
+  requestItem(item) {
+    // ...
+  }
+}
+
+/* Constructing our dependencies externally and injecting them, we can easily substitute our request module for another */
+const inventoryTracker = new InventoryTracker(
+  ["apples", "bananas"],
+  new InventoryRequesterV2()
+);
+inventoryTracker.requestItems();
+```

docs/SOLID/interface_segregation_principle/README.md

@@ -11,4 +11,85 @@ ___
 ## Why?
 
 - We need to create specific interfaces instead a generic interface
-- With specific interfaces, the classes do not require useless information
+- With specific interfaces, the classes do not require useless information
+
+## Examples (Java)
+
+### Bad example
+
+```js
+interface Birds {
+    public function setLocale($longitude, $latitude);
+
+    public function setAltitude($altitude);
+
+    public function render();
+}
+
+class Parrot implements Birds {
+    public function setLocale($longitude, $latitude) {
+        // bla bla bla
+    }
+
+    public function setAltitude($altitude) {
+        // bla bla bla   
+    }
+
+    public function render() {
+        // bla bla bla
+    }
+}
+
+/* Here the "setAltitude" is required to penguim, but penguins doesnt fly! */
+class Penguim implements Birds {
+    public function setLocale($longitude, $latitude) {
+        // bla bla bla
+    }
+
+    public function setAltitude($altitude) {
+        // ! bla bla bla   
+    }
+
+    public function render() {
+        // bla bla bla
+    }
+}
+```
+
+### Good example
+
+```js
+interface Birds {
+    public function setLocale($longitude, $latitude);
+    public function render();
+}
+
+/* Here we're implementing a specific class to be used by birds who fly */
+interface BirdsFly extends Birds {
+    public function setAltitude($altitude);
+}
+
+class Parrot implements BirdsFly {
+    public function setLocale($longitude, $latitude) {
+        // bla bla bla
+    }
+
+    public function setAltitude($altitude) {
+        // bla bla bla   
+    }
+
+    public function render() {
+        // bla bla bla
+    }
+}
+
+class Penguim implements Birds {
+    public function setLocale($longitude, $latitude) {
+        // bla bla bla
+    }
+
+    public function render() {
+        // bla bla bla
+    }
+}
+```

docs/SOLID/open_closed_principle/README.md

@@ -10,4 +10,74 @@ ___
 
 ## Why?
 
-- With that, we extends the behavior using heritage, interfaces and compositions, with more abstraction and less coupling
+- With that, we extends the behavior using heritage, interfaces and compositions, with more abstraction and less coupling
+
+
+## Examples (React)
+
+### Bad example
+
+```jsx
+const Header = () => {
+  const { pathname } = useRouter()
+
+  return (
+    <header>
+      <Logo />
+      <Actions>
+        {/* Here we are letting the component take the responsability from the 
+        consumer. If we need to define a new route, f.e., we need to change this 
+        file and insert a new code line. So,  we have a bad coupling */}
+        {pathname === '/dashboard' && <Link to="/events/new">Create event</Link>}
+        {pathname === '/' && <Link to="/dashboard">Go to dashboard</Link>}
+      </Actions>
+    </header>
+  )
+}
+
+const HomePage = () => (
+  <>
+    <Header />
+    <OtherHomeStuff />
+  </>
+)
+
+const DashboardPage = () => (
+  <>
+    <Header />
+    <OtherDashboardStuff />
+  </>
+)
+```
+
+### Good example
+
+```jsx
+const Header = ({ children }) => (
+  <header>
+    <Logo />
+    <Actions>
+      {/* Now we use composition to modify by outside the content of this component, instead changing direct in this component */}
+      {children}
+    </Actions>
+  </header>
+)
+
+const HomePage = () => (
+  <>
+    <Header>
+      <Link to="/dashboard">Go to dashboard</Link>
+    </Header>
+    <OtherHomeStuff />
+  </>
+)
+
+const DashboardPage = () => (
+  <>
+    <Header>
+      <Link to="/events/new">Create event</Link>
+    </Header>
+    <OtherDashboardStuff />
+  </>
+)
+```