docs: rule table extract + instructions

Author: kireevmp

docs/.vitepress/theme/components/RuleTable.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+type Rule = { key: string; description: string }
+
+defineProps<{ rules: Rule[] }>()
+</script>
+
+<template>
+  <table>
+    <colgroup>
+      <col style="width: 40%" />
+      <col style="width: 60%" />
+    </colgroup>
+
+    <thead>
+      <tr>
+        <th>Rule</th>
+        <th>Description</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr v-for="rule in rules" :key="rule.key">
+        <td>
+          <a :href="`/rules/${rule.key}`">{{ rule.key }}</a>
+        </td>
+        <td>{{ rule.description }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style scoped>
+table {
+  width: 100%;
+  display: table;
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -1,5 +1,13 @@
+import type { EnhanceAppContext } from "vitepress"
 import theme from "vitepress/theme"
 
+import RuleTable from "./components/RuleTable.vue"
+
 import "./style.css"
 
-export default theme
+export default {
+  extends: theme,
+  enhanceApp: ({ app }: EnhanceAppContext) => {
+    app.component("RuleTable", RuleTable)
+  },
+}

docs/rules/index.md

@@ -5,28 +5,79 @@ aside: false
 <script setup>
 import { data } from "./index.data"
 
-const categories = { recommended: "Recommended", react: "React", scope: "Scope" }
-
 const rulesByCategory = (category) => data.filter((rule) => rule.category === category)
 </script>
 
 # Rules
 
-<template v-for="(title, category) in categories" :key="category">
-  <h2 :id="category">{{ title }}</h2>
-
-  <table>
-    <thead>
-      <tr>
-        <th>Rule</th>
-        <th>Description</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="rule in rulesByCategory(category)" :key="rule.key">
-        <td><a :href="`/rules/${rule.key}`">{{rule.key}}</a></td>
-        <td>{{rule.description}}</td>
-      </tr>
-    </tbody>
-  </table>
-</template>
+## `recommended`
+
+This preset is recommended for most projects, so we suggest enabling it by default.
+
+::: code-group
+
+```ts [eslint.config.mjs]
+import effector from "eslint-plugin-effector" // [!code focus]
+
+const config = [
+  effector.configs.recommended, // [!code focus]
+]
+```
+
+:::
+
+<RuleTable :rules='rulesByCategory("recommended")' />
+
+## `patronum`
+
+This preset is recommended for projects that use [`patronum`](https://patronum.effector.dev/).
+
+::: code-group
+
+```ts [eslint.config.mjs]
+import effector from "eslint-plugin-effector" // [!code focus]
+
+const config = [
+  effector.configs.patronum, // [!code focus]
+]
+```
+
+:::
+
+<RuleTable :rules='rulesByCategory("patronum")' />
+
+## `react`
+
+This preset is recommended for projects that use React with Effector.
+
+::: code-group
+
+```ts [eslint.config.mjs]
+import effector from "eslint-plugin-effector" // [!code focus]
+
+const config = [
+  effector.configs.react, // [!code focus]
+]
+```
+
+:::
+
+<RuleTable :rules='rulesByCategory("react")' />
+
+## `scope`
+
+This preset is recommended for projects that use [Fork API](https://effector.dev/docs/api/effector/scope).
+
+::: code-group
+
+```ts [eslint.config.mjs]
+import effector from "eslint-plugin-effector" // [!code focus]
+
+const config = [
+  effector.configs.scope, // [!code focus]
+]
+```
+
+:::
+
+<RuleTable :rules='rulesByCategory("scope")' />

src/ruleset.ts

@@ -9,13 +9,16 @@ const recommended = {
   "effector/no-forward": "error",
   "effector/no-getState": "error",
   "effector/no-guard": "error",
-  "effector/no-patronum-debug": "warn",
   "effector/no-unnecessary-combination": "warn",
   "effector/no-unnecessary-duplication": "warn",
   "effector/no-useless-methods": "error",
   "effector/no-watch": "warn",
 } satisfies TSESLint.Linter.RulesRecord
 
+const patronum = {
+  "effector/no-patronum-debug": "warn",
+} satisfies TSESLint.Linter.RulesRecord
+
 const scope = {
   "effector/require-pickup-in-persist": "error",
   "effector/strict-effect-handlers": "error",
@@ -29,4 +32,4 @@ const react = {
 
 const future = {} satisfies TSESLint.Linter.RulesRecord
 
-export const ruleset = { recommended, scope, react, future }
+export const ruleset = { recommended, patronum, scope, react, future }