Document lint rules (#169)

packages/documentation/docs/documentation/meta/eslint.mdx

@@ -3,6 +3,8 @@ sidebar_position: 1
 title: "ESLint plugin"
 ---
 
+The `eslint-plugin-obsidian` package provides ESLint rules for Obsidian. These rules help you catch common mistakes and enforce best practices when using Obsidian.
+
 ## Installation
 #### Step 1: Install the plugin
 ```bash
@@ -13,7 +15,9 @@ yarn add -D eslint-plugin-obsidian
 {
   "plugins": ["obsidian"],
   "rules": {
-    "obsidian/unresolved-provider-dependencies": "error"
+    "obsidian/unresolved-provider-dependencies": "error",
+    "obsidian/no-circular-dependencies": "error",
+    "obsidian/strongly-typed-inject-component": "error"
   }
 }
 ```
@@ -33,4 +37,115 @@ class SomeGraph extends ObjectGraph {
     return new SomeService(someDependency);
   }
 }
-```
+```
+
+### no-circular-dependencies
+Prevent circular dependencies between providers.
+
+When two providers depend on each other, this rule will trigger a lint error.
+
+```ts
+@Graph()
+class SomeGraph extends ObjectGraph {
+  @Provides()
+  foo(bar: Bar) {
+    return new Foo(bar);
+  }
+
+  @Provides()
+  bar(foo: Foo) {
+    // ^ Since Foo depends on Bar, this will trigger a lint error.
+    return new Bar(foo);
+  }
+}
+```
+
+### strongly-typed-inject-component
+Ensure injected components are strongly typed.
+
+When a component is injected using `injectComponent`, its props are typed with a combination of its `Own` props and the `Injected` props provided by the graph; `Own`, `Injected`, or `Own & Injected`. By default, `injectComponent` returns a component who's props are optional. This is correct if a component only depends on injected props. If a component also has its own props, then `Own` props should be required. This rule ensures that the `injectComponent` call is typed correctly.
+
+
+```ts
+@Graph()
+class SomeGraph extends ObjectGraph {
+  @Provides()
+  foo(bar: Bar) {
+    return new Foo(bar);
+  }
+
+  @Provides()
+  bar(foo: Foo) {
+    // ^ Since Foo depends on Bar, this will trigger a lint error.
+    return new Bar(foo);
+  }
+}
+```
+
+### strongly-typed-inject-component
+Ensure injected components are strongly typed.
+
+When a component is injected using `injectComponent`, its props are typed with a combination of its `Own` props and the `Injected` props provided by the graph; `Own`, `Injected`, or `Own & Injected`. By default, `injectComponent` returns a component who's props are optional. This is correct if a component only depends on injected props. If a component also has its own props, then `Own` props should be required. This rule ensures that the `injectComponent` call is typed correctly.
+
+<table>
+<tr>
+<td> <center><b>Incorrect</b></center> </td> <td> <center><b>Correct</b></center> </td>
+</tr>
+<tr>
+<td>
+
+```ts
+import {
+  injectComponent
+} from 'react-obsidian';
+
+type Own = {
+  name: string;
+};
+
+type Injected = {
+  bar: Bar;
+};
+
+const Foo = (props: Own & Injected) => {
+  return null;
+};
+
+// The call is marked as incorrect because
+// both Own and Injected props are missing
+export default injectComponent(Foo, Graph);
+```
+
+</td>
+<td>
+
+```ts
+import {
+  injectComponent
+} from 'react-obsidian';
+
+type Own = {
+  name: string;
+};
+
+type Injected = {
+  bar: Bar;
+};
+
+const Foo = (props: Own & Injected) => {
+  return null;
+};
+
+// The rule enforces the correct types
+// are passed to the injectComponent HOC
+export default injectComponent<Own, Injected>(Foo, Graph);
+```
+
+</td>
+</tr>
+</table>
+
+
+
+
+