@vadimcomanescu/nadicode-design-system 2.0.0

package/eslint-rules/nadicode/rules/__tests__/no-handcoded-heading.test.js

@@ -0,0 +1,107 @@
+import { RuleTester } from "eslint";
+import { describe } from "vitest";
+
+import rule from "../no-handcoded-heading.js";
+
+const tester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    parserOptions: {
+      ecmaFeatures: { jsx: true },
+    },
+  },
+});
+
+describe("no-handcoded-heading", () => {
+  tester.run("no-handcoded-heading", rule, {
+    valid: [
+      {
+        code: "const x = <h1 className='text-2xl'>Title</h1>;",
+        filename: "/repo/src/app/page.tsx",
+      },
+      {
+        code: [
+          "import { Heading } from '@vadimcomanescu/nadicode-design-system/heading';",
+          "const x = <Heading level={1} size='subsection'>Title</Heading>;",
+        ].join("\n"),
+        filename: "/repo/src/app/page.tsx",
+      },
+      {
+        code: [
+          "import { Typography } from '@vadimcomanescu/nadicode-design-system/typography';",
+          "const x = <Typography variant='small'>Meta</Typography>;",
+        ].join("\n"),
+        filename: "/repo/src/app/page.tsx",
+      },
+      {
+        code: [
+          "import { Typography } from '@/components/ui/Typography';",
+          "const x = <Typography as='span' variant='muted'>Meta</Typography>;",
+        ].join("\n"),
+        filename: "/repo/src/app/page.tsx",
+      },
+    ],
+    invalid: [
+      {
+        code: "const x = <h1 className='text-2xl font-bold'>Title</h1>;",
+        filename: "/repo/src/app/page.tsx",
+        errors: [
+          {
+            message:
+              'Hand-coded <h1> with text-size and font-weight classes. Use <Heading level={1} size="subsection"> instead.',
+            },
+          ],
+      },
+      {
+        code: "const x = <h2 className='text-3xl font-semibold'>Title</h2>;",
+        filename: "/repo/src/app/page.tsx",
+        errors: [
+          {
+            message:
+              'Hand-coded <h2> with text-size and font-weight classes. Use <Heading level={2}> instead.',
+            },
+          ],
+      },
+      {
+        code: [
+          "import { Typography } from '@vadimcomanescu/nadicode-design-system/typography';",
+          "const x = <Typography variant='h1'>Title</Typography>;",
+        ].join("\n"),
+        filename: "/repo/src/app/page.tsx",
+        errors: [
+          {
+            message:
+              'Heading semantics and heading styling must use Heading, not Typography. Use <Heading level={1}> instead.',
+            },
+          ],
+      },
+      {
+        code: [
+          "import { Typography } from '@/components/ui/Typography';",
+          "const x = <Typography as='h1' variant='h3'>Title</Typography>;",
+        ].join("\n"),
+        filename: "/repo/src/app/page.tsx",
+        errors: [
+          {
+            message:
+              'Heading semantics and heading styling must use Heading, not Typography. Use <Heading level={1} size="subsection"> instead.',
+            },
+          ],
+      },
+      {
+        code: [
+          "import { Typography } from '@vadimcomanescu/nadicode-design-system/typography';",
+          "const x = <Typography as='h2' variant='small'>Label</Typography>;",
+        ].join("\n"),
+        filename: "/repo/src/app/page.tsx",
+        errors: [
+          {
+            message:
+              'Heading semantics and heading styling must use Heading, not Typography. Use <Heading level={2} size="eyebrow"> instead.',
+            },
+          ],
+      },
+    ],
+  });
+});

package/eslint-rules/nadicode/rules/__tests__/no-hardcoded-motion-transition.test.js

@@ -0,0 +1,149 @@
+import { RuleTester } from "eslint";
+import { describe } from "vitest";
+import rule from "../no-hardcoded-motion-transition.js";
+
+const tester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    parserOptions: {
+      ecmaFeatures: { jsx: true },
+    },
+  },
+});
+
+describe("no-hardcoded-motion-transition", () => {
+  tester.run("no-hardcoded-motion-transition", rule, {
+    valid: [
+      // Using a preset variable
+      {
+        code: "<m.div transition={motionSpring.snappy} />",
+      },
+      // Using a member expression
+      {
+        code: "<m.div transition={{ ...motionSpring.gentle }} />",
+      },
+      // Non-motion element (plain div)
+      {
+        code: '<div transition={{ duration: 0.3 }} />',
+      },
+      // Preset file is exempt
+      {
+        code: "<m.div transition={{ duration: 0.3 }} />",
+        filename: "src/lib/motion.ts",
+      },
+      // Animation tokens file is exempt
+      {
+        code: "<m.div transition={{ stiffness: 300 }} />",
+        filename: "src/lib/animation.tokens.ts",
+      },
+      // Icon files are exempt
+      {
+        code: "<motion.path transition={{ duration: 0.2 }} />",
+        filename: "src/components/ui/icons/check.tsx",
+      },
+      // Test files are exempt
+      {
+        code: "<m.div transition={{ duration: 0.5 }} />",
+        filename: "src/components/__tests__/Foo.test.tsx",
+      },
+      // Identifier values are fine (referencing a variable)
+      {
+        code: "<m.div transition={{ duration: myDuration }} />",
+      },
+      // MemberExpression values are fine
+      {
+        code: "<m.div transition={{ duration: config.duration }} />",
+      },
+      // No transition prop
+      {
+        code: '<m.div animate={{ opacity: 1 }} />',
+      },
+    ],
+    invalid: [
+      // Hardcoded duration
+      {
+        code: "<m.div transition={{ duration: 0.3 }} />",
+        filename: "src/components/ui/Card.tsx",
+        errors: [
+          {
+            message:
+              "Use a motion preset (e.g. `motionSpring.snappy`) instead of hardcoded `duration: 0.3`. Inline transition values can't be tuned system-wide.",
+          },
+        ],
+      },
+      // Hardcoded stiffness
+      {
+        code: "<m.section transition={{ stiffness: 300 }} />",
+        filename: "src/components/blocks/HeroBlock.tsx",
+        errors: [
+          {
+            message:
+              "Use a motion preset (e.g. `motionSpring.snappy`) instead of hardcoded `stiffness: 300`. Inline transition values can't be tuned system-wide.",
+          },
+        ],
+      },
+      // Hardcoded damping
+      {
+        code: "<m.div transition={{ damping: 20 }} />",
+        filename: "src/components/ui/Button.tsx",
+        errors: [
+          {
+            message:
+              "Use a motion preset (e.g. `motionSpring.snappy`) instead of hardcoded `damping: 20`. Inline transition values can't be tuned system-wide.",
+          },
+        ],
+      },
+      // Hardcoded mass
+      {
+        code: "<m.div transition={{ mass: 1 }} />",
+        filename: "src/components/ui/Button.tsx",
+        errors: [
+          {
+            message:
+              "Use a motion preset (e.g. `motionSpring.snappy`) instead of hardcoded `mass: 1`. Inline transition values can't be tuned system-wide.",
+          },
+        ],
+      },
+      // Hardcoded ease string
+      {
+        code: '<m.div transition={{ ease: "easeInOut" }} />',
+        filename: "src/components/ui/Button.tsx",
+        errors: [
+          {
+            message:
+              "Use a motion preset instead of hardcoded `ease` values. Inline easing can't be tuned system-wide.",
+          },
+        ],
+      },
+      // Hardcoded ease array (cubic bezier)
+      {
+        code: "<m.div transition={{ ease: [0.4, 0, 0.2, 1] }} />",
+        filename: "src/components/ui/Button.tsx",
+        errors: [
+          {
+            message:
+              "Use a motion preset instead of hardcoded `ease` values. Inline easing can't be tuned system-wide.",
+          },
+        ],
+      },
+      // motion.div also caught
+      {
+        code: "<motion.div transition={{ duration: 0.5 }} />",
+        filename: "src/components/ui/Card.tsx",
+        errors: [
+          {
+            message:
+              "Use a motion preset (e.g. `motionSpring.snappy`) instead of hardcoded `duration: 0.5`. Inline transition values can't be tuned system-wide.",
+          },
+        ],
+      },
+      // Multiple violations
+      {
+        code: "<m.div transition={{ duration: 0.3, stiffness: 200 }} />",
+        filename: "src/components/ui/Card.tsx",
+        errors: 2,
+      },
+    ],
+  });
+});

package/eslint-rules/nadicode/rules/__tests__/require-aria-hidden-on-decorative-icon.test.js

@@ -0,0 +1,73 @@
+import { RuleTester } from "eslint";
+import { describe } from "vitest";
+import rule from "../require-aria-hidden-on-decorative-icon.js";
+
+const tester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    parserOptions: {
+      ecmaFeatures: { jsx: true },
+    },
+  },
+});
+
+describe("require-aria-hidden-on-decorative-icon", () => {
+  tester.run("require-aria-hidden-on-decorative-icon", rule, {
+    valid: [
+      {
+        code: '<DropdownMenuTrigger><ChevronDownIcon aria-hidden="true" /></DropdownMenuTrigger>',
+      },
+      {
+        code: "<DropdownMenuTrigger><ChevronDownIcon aria-hidden={true} /></DropdownMenuTrigger>",
+      },
+      {
+        code: "<div><ChevronDownIcon /></div>",
+      },
+      {
+        code: '<SelectTrigger><SearchIcon aria-hidden="true" /></SelectTrigger>',
+      },
+      {
+        code: "<DropdownMenuTrigger><span>Text</span></DropdownMenuTrigger>",
+      },
+    ],
+    invalid: [
+      {
+        code: "<DropdownMenuTrigger><ChevronDownIcon /></DropdownMenuTrigger>",
+        errors: [
+          {
+            message:
+              'Decorative icons inside trigger components must have aria-hidden="true" to prevent screen reader noise.',
+          },
+        ],
+      },
+      {
+        code: '<SelectTrigger><ChevronDownIcon className="h-4 w-4" /></SelectTrigger>',
+        errors: [
+          {
+            message:
+              'Decorative icons inside trigger components must have aria-hidden="true" to prevent screen reader noise.',
+          },
+        ],
+      },
+      {
+        code: "<AccordionTrigger><ChevronRightIcon /></AccordionTrigger>",
+        errors: [
+          {
+            message:
+              'Decorative icons inside trigger components must have aria-hidden="true" to prevent screen reader noise.',
+          },
+        ],
+      },
+      {
+        code: "<MenubarTrigger><SearchIcon /></MenubarTrigger>",
+        errors: [
+          {
+            message:
+              'Decorative icons inside trigger components must have aria-hidden="true" to prevent screen reader noise.',
+          },
+        ],
+      },
+    ],
+  });
+});

package/eslint-rules/nadicode/rules/__tests__/require-focus-ring-with-outline-none.test.js

@@ -0,0 +1,65 @@
+import { RuleTester } from "eslint";
+import { describe } from "vitest";
+import rule from "../require-focus-ring-with-outline-none.js";
+
+const tester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    parserOptions: {
+      ecmaFeatures: { jsx: true },
+    },
+  },
+});
+
+describe("require-focus-ring-with-outline-none", () => {
+  tester.run("require-focus-ring-with-outline-none", rule, {
+    valid: [
+      {
+        code: '<button className="outline-none focus-visible:ring-2 focus-visible:ring-accent" />',
+      },
+      {
+        code: '<button className="outline-none focus:ring-2" />',
+      },
+      {
+        code: '<button className="outline-none focus-visible:outline-2" />',
+      },
+      {
+        code: '<button className="outline-none focus-visible:ring-offset-2" />',
+      },
+      {
+        code: '<span className="outline-none sr-only" />',
+      },
+      {
+        code: '<div className="outline-none pointer-events-none" />',
+      },
+      {
+        code: '<div className="text-sm p-2" />',
+      },
+      // cn() calls with spread args are not statically analyzable
+      {
+        code: "const x = <div className={cn(styles)} />;",
+      },
+    ],
+    invalid: [
+      {
+        code: '<button className="outline-none" />',
+        errors: [
+          {
+            message:
+              "outline-none removes the default focus indicator. Add focus-visible:ring-* or focus-visible:outline-* to maintain keyboard accessibility.",
+          },
+        ],
+      },
+      {
+        code: '<button className="outline-none bg-surface" />',
+        errors: [
+          {
+            message:
+              "outline-none removes the default focus indicator. Add focus-visible:ring-* or focus-visible:outline-* to maintain keyboard accessibility.",
+          },
+        ],
+      },
+    ],
+  });
+});

package/eslint-rules/nadicode/rules/__tests__/require-focus-visible-with-group-hover.test.js

@@ -0,0 +1,60 @@
+import { RuleTester } from "eslint";
+import { describe } from "vitest";
+import rule from "../require-focus-visible-with-group-hover.js";
+
+const tester = new RuleTester({
+  languageOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    parserOptions: {
+      ecmaFeatures: { jsx: true },
+    },
+  },
+});
+
+describe("require-focus-visible-with-group-hover", () => {
+  tester.run("require-focus-visible-with-group-hover", rule, {
+    valid: [
+      {
+        code: '<div className="group-hover:opacity-100 group-focus-visible:opacity-100" />',
+      },
+      {
+        code: '<div className="group-hover:opacity-100 group-focus-within:opacity-100" />',
+      },
+      {
+        code: '<div className="opacity-50 text-sm" />',
+      },
+      {
+        code: '<div className="group-hover:opacity-50 group-focus-visible:opacity-50 text-sm" />',
+      },
+      // pointer-events-none elements are exempt (decorative)
+      {
+        code: '<div className="group-hover:opacity-100 pointer-events-none" />',
+      },
+      // cn() calls with spread args are not statically analyzable
+      {
+        code: "const x = <div className={cn(styles)} />;",
+      },
+    ],
+    invalid: [
+      {
+        code: '<div className="group-hover:opacity-100" />',
+        errors: [
+          {
+            message:
+              "group-hover:opacity-* must be paired with group-focus-visible:opacity-* or group-focus-within:opacity-* for keyboard accessibility.",
+          },
+        ],
+      },
+      {
+        code: '<div className="group-hover:opacity-50 text-sm" />',
+        errors: [
+          {
+            message:
+              "group-hover:opacity-* must be paired with group-focus-visible:opacity-* or group-focus-within:opacity-* for keyboard accessibility.",
+          },
+        ],
+      },
+    ],
+  });
+});

package/eslint-rules/nadicode/rules/no-admin-arbitrary-text-size.js

@@ -0,0 +1,53 @@
+import {
+  getClassTokensFromAttribute,
+  getClassTokensFromHelperCall,
+  getFilename,
+  isAdminUiFile,
+  isClassHelperCall,
+  isTestFile,
+} from "../utils.js";
+
+const ARBITRARY_TEXT_SIZE_PATTERN = /\btext-\[(?:\d+(?:\.\d+)?)(?:px|rem|em|%)\]/g;
+
+const rule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow arbitrary text-[...] sizing in admin UI. Use Typography variants or standard semantic scales.",
+    },
+    schema: [],
+  },
+  create(context) {
+    const filename = getFilename(context);
+    if (!isAdminUiFile(filename) || isTestFile(filename)) {
+      return {};
+    }
+
+    function report(node, tokens) {
+      for (const tokenValue of tokens) {
+        const matches = tokenValue.match(ARBITRARY_TEXT_SIZE_PATTERN) ?? [];
+        for (const match of matches) {
+          context.report({
+            node,
+            message:
+              "{{match}} is not allowed in admin UI. Use Typography variants or standard text-* scale.",
+            data: { match },
+          });
+        }
+      }
+    }
+
+    return {
+      JSXAttribute(node) {
+        report(node, getClassTokensFromAttribute(node));
+      },
+      CallExpression(node) {
+        if (!isClassHelperCall(node)) return;
+        report(node, getClassTokensFromHelperCall(node));
+      },
+    };
+  },
+};
+
+export default rule;

package/eslint-rules/nadicode/rules/no-admin-manual-chart-bars.js

@@ -0,0 +1,46 @@
+import {
+  getFilename,
+  isAdminDashboardFile,
+  isTestFile,
+} from "../utils.js";
+
+const CHART_COLOR_ARBITRARY_CLASS_PATTERN = /bg-\[rgb\(var\(--chart-\d+\)\)\]/;
+const INLINE_PERCENT_WIDTH_STYLE_PATTERN =
+  /style=\{\{\s*width:\s*`?\$\{[^}]+\}%`?\s*\}\}/;
+const CHART_PRIMITIVE_IMPORT_PATTERN =
+  /from\s+["'][^"']*\/components\/ui\/(?:charts\/[^"']+|Chart)["']/;
+
+const rule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow manual proportional bars in admin analytics views; require Nadicode chart primitives.",
+    },
+    schema: [],
+  },
+  create(context) {
+    const filename = getFilename(context);
+    if (!isAdminDashboardFile(filename) || isTestFile(filename)) {
+      return {};
+    }
+
+    return {
+      Program(node) {
+        const source = context.sourceCode.getText(node);
+
+        if (!CHART_COLOR_ARBITRARY_CLASS_PATTERN.test(source)) return;
+        if (!INLINE_PERCENT_WIDTH_STYLE_PATTERN.test(source)) return;
+        if (CHART_PRIMITIVE_IMPORT_PATTERN.test(source)) return;
+
+        context.report({
+          node,
+          message:
+            "Manual proportional bars with inline width are not allowed in admin analytics views. Use Nadicode chart primitives (AreaChart/BarChart/LineChart/PieChart + ChartContainer).",
+        });
+      },
+    };
+  },
+};
+
+export default rule;

package/eslint-rules/nadicode/rules/no-app-primitive-composition.js

@@ -0,0 +1,58 @@
+import { getFilename, isTestFile } from "../utils.js";
+
+const MAX_UI_MODULE_IMPORTS = 3;
+
+const rule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow composing 4+ UI primitives in app/ files. Extract to a block in @/components/blocks/.",
+    },
+    schema: [],
+  },
+  create(context) {
+    const filename = getFilename(context);
+
+    if (isTestFile(filename)) return {};
+    if (!filename.includes("/src/app/")) return {};
+    if (filename.includes("/src/app/api/")) return {};
+
+    const uiModules = new Set();
+    const importNodes = [];
+
+    return {
+      ImportDeclaration(node) {
+        const source = node.source.value;
+        if (typeof source !== "string") return;
+
+        const match = source.match(
+          /^@\/components\/ui\/([^/]+)/
+        );
+        if (!match) return;
+
+        const moduleName = match[1];
+
+        if (moduleName === "icons" || source.includes("/icons/")) return;
+
+        uiModules.add(moduleName);
+        importNodes.push(node);
+      },
+
+      "Program:exit"() {
+        if (uiModules.size < MAX_UI_MODULE_IMPORTS + 1) return;
+
+        const moduleList = Array.from(uiModules).sort().join(", ");
+
+        for (const node of importNodes) {
+          context.report({
+            node,
+            message: `App files should not compose ${uiModules.size} UI primitives (${moduleList}). Extract to a block in @/components/blocks/.`,
+          });
+        }
+      },
+    };
+  },
+};
+
+export default rule;

package/eslint-rules/nadicode/rules/no-arbitrary-chart-color.js

@@ -0,0 +1,65 @@
+const HARDCODED_COLOR_PATTERN =
+  /^#[0-9a-fA-F]{3,8}$|^rgb\((?!var\(--|var\()|\bhsl\(|^(red|blue|green|yellow|orange|purple|pink|white|black|gray|grey|cyan|magenta|brown|lime|navy|teal|maroon|olive|aqua|fuchsia|silver)$/i;
+
+const ALLOWED_VAR_PATTERN = /var\(--(?:color-)?chart-/;
+
+function isChartRelatedFile(context) {
+  const source = context.sourceCode.getText();
+  return (
+    /from\s+["'][^"']*\/charts\//.test(source) ||
+    /from\s+["'][^"']*\/Chart["']/.test(source) ||
+    /from\s+["']recharts["']/.test(source)
+  );
+}
+
+function isHardcodedColor(value) {
+  if (typeof value !== "string") return false;
+  if (ALLOWED_VAR_PATTERN.test(value)) return false;
+  return HARDCODED_COLOR_PATTERN.test(value.trim());
+}
+
+const rule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow hardcoded color values in chart configuration objects",
+    },
+    schema: [],
+  },
+  create(context) {
+    let chartRelated = false;
+
+    return {
+      ImportDeclaration() {
+        if (!chartRelated) {
+          chartRelated = isChartRelatedFile(context);
+        }
+      },
+
+      Property(node) {
+        if (!chartRelated) return;
+
+        const key = node.key;
+        const isColorKey =
+          (key.type === "Identifier" && key.name === "color") ||
+          (key.type === "Literal" && key.value === "color");
+
+        if (!isColorKey) return;
+
+        const value = node.value;
+        if (value.type === "Literal" && typeof value.value === "string") {
+          if (isHardcodedColor(value.value)) {
+            context.report({
+              node,
+              message:
+                "Chart colors must use semantic tokens (e.g. 'rgb(var(--chart-1))'). Hardcoded colors break theme switching.",
+            });
+          }
+        }
+      },
+    };
+  },
+};
+
+export default rule;