feat(plugin-eslint): create groups from rules' meta.docs.category (per plugin)

Author: matejchalk

packages/plugin-eslint/src/lib/__snapshots__/eslint-plugin.spec.ts.snap

@@ -1166,6 +1166,102 @@ exports[`eslintPlugin > should initialize ESLint plugin for React application 1`
       "slug": "formatting",
       "title": "Formatting",
     },
+    {
+      "refs": [
+        {
+          "slug": "react-prop-types",
+          "weight": 1,
+        },
+        {
+          "slug": "react-display-name",
+          "weight": 1,
+        },
+        {
+          "slug": "react-jsx-no-target-blank",
+          "weight": 1,
+        },
+        {
+          "slug": "react-jsx-uses-react",
+          "weight": 1,
+        },
+        {
+          "slug": "react-jsx-uses-vars",
+          "weight": 1,
+        },
+        {
+          "slug": "react-no-children-prop",
+          "weight": 1,
+        },
+        {
+          "slug": "react-no-deprecated",
+          "weight": 1,
+        },
+        {
+          "slug": "react-no-find-dom-node",
+          "weight": 1,
+        },
+        {
+          "slug": "react-no-is-mounted",
+          "weight": 1,
+        },
+        {
+          "slug": "react-no-render-return-value",
+          "weight": 1,
+        },
+        {
+          "slug": "react-no-string-refs",
+          "weight": 1,
+        },
+      ],
+      "slug": "react-best-practices",
+      "title": "Best Practices (react)",
+    },
+    {
+      "refs": [
+        {
+          "slug": "react-jsx-key",
+          "weight": 1,
+        },
+        {
+          "slug": "react-react-in-jsx-scope",
+          "weight": 1,
+        },
+        {
+          "slug": "react-jsx-no-comment-textnodes",
+          "weight": 1,
+        },
+        {
+          "slug": "react-jsx-no-duplicate-props",
+          "weight": 1,
+        },
+        {
+          "slug": "react-jsx-no-undef",
+          "weight": 1,
+        },
+        {
+          "slug": "react-no-danger-with-children",
+          "weight": 1,
+        },
+        {
+          "slug": "react-no-direct-mutation-state",
+          "weight": 1,
+        },
+        {
+          "slug": "react-no-unescaped-entities",
+          "weight": 1,
+        },
+        {
+          "slug": "react-no-unknown-property",
+          "weight": 1,
+        },
+        {
+          "slug": "react-require-render-return",
+          "weight": 1,
+        },
+      ],
+      "slug": "react-possible-errors",
+      "title": "Possible Errors (react)",
+    },
   ],
   "icon": "eslint",
   "packageName": "@code-pushup/eslint-plugin",

packages/plugin-eslint/src/lib/meta/groups.ts

@@ -1,8 +1,8 @@
 import type { Rule } from 'eslint';
 import type { AuditGroup, AuditGroupRef } from '@code-pushup/models';
-import { objectToKeys } from '@code-pushup/utils';
+import { objectToKeys, slugify } from '@code-pushup/utils';
 import { ruleIdToSlug } from './hash';
-import type { RuleData } from './rules';
+import { type RuleData, parseRuleId } from './rules';
 
 type RuleType = NonNullable<Rule.RuleMetaData['type']>;
 
@@ -50,3 +50,38 @@ export function groupsFromRuleTypes(rules: RuleData[]): AuditGroup[] {
       ) ?? [],
   }));
 }
+
+export function groupsFromRuleCategories(rules: RuleData[]): AuditGroup[] {
+  const categoriesMap = rules.reduce<Record<string, Record<string, string[]>>>(
+    (acc, { meta: { docs }, ruleId, options }) => {
+      const category = docs?.category;
+      if (!category) {
+        return acc;
+      }
+      const { plugin = '' } = parseRuleId(ruleId);
+      return {
+        ...acc,
+        [plugin]: {
+          ...acc[plugin],
+          [category]: [
+            ...(acc[plugin]?.[category] ?? []),
+            ruleIdToSlug(ruleId, options),
+          ],
+        },
+      };
+    },
+    {},
+  );
+
+  return Object.entries(categoriesMap)
+    .flatMap(([plugin, categories]) =>
+      Object.entries(categories).map(
+        ([category, slugs]): AuditGroup => ({
+          slug: `${slugify(plugin)}-${slugify(category)}`,
+          title: `${category} (${plugin})`,
+          refs: slugs.map(slug => ({ slug, weight: 1 })),
+        }),
+      ),
+    )
+    .sort((a, b) => a.slug.localeCompare(b.slug));
+}

packages/plugin-eslint/src/lib/meta/index.ts

@@ -1,6 +1,6 @@
 import type { ESLint } from 'eslint';
 import type { Audit, AuditGroup } from '@code-pushup/models';
-import { groupsFromRuleTypes } from './groups';
+import { groupsFromRuleCategories, groupsFromRuleTypes } from './groups';
 import { listRules } from './rules';
 import { ruleToAudit } from './transform';
 
@@ -12,7 +12,10 @@ export async function listAuditsAndGroups(
 
   const audits = rules.map(ruleToAudit);
 
-  const groups = groupsFromRuleTypes(rules);
+  const groups = [
+    ...groupsFromRuleTypes(rules),
+    ...groupsFromRuleCategories(rules),
+  ];
 
   return { audits, groups };
 }