@vadimcomanescu/nadicode-design-system 2.0.0

package/eslint-rules/nadicode/rules/no-forbidden-tokens.js

@@ -0,0 +1,153 @@
+/**
+ * @fileoverview Disallow forbidden token classes and auto-fix to canonical replacements.
+ */
+
+const FORBIDDEN_MAP = {
+  "text-foreground": {
+    fix: "text-text-primary",
+    message:
+      "Use text-text-primary or text-text-secondary instead of 'text-foreground'.",
+  },
+  "text-muted-foreground": {
+    fix: "text-text-secondary",
+    message:
+      "Use text-text-secondary or text-text-tertiary instead of 'text-muted-foreground'.",
+  },
+  "border-error": {
+    fix: "border-destructive",
+    message: "Use border-destructive instead of 'border-error'.",
+  },
+  "bg-black/80": {
+    fix: "bg-overlay/80",
+    message: "Use bg-overlay/80 instead of 'bg-black/80'.",
+  },
+  "bg-card": {
+    fix: "bg-surface",
+    message:
+      "Use bg-surface instead of 'bg-card'. Seed has no --color-card CSS variable.",
+  },
+  "text-card-foreground": {
+    fix: "text-text-primary",
+    message:
+      "Use text-text-primary instead of 'text-card-foreground'. Seed has no --color-card-foreground CSS variable.",
+  },
+  "bg-popover": {
+    fix: "bg-surface",
+    message:
+      "Use bg-surface instead of 'bg-popover'. Seed has no --color-popover CSS variable.",
+  },
+  "text-popover-foreground": {
+    fix: "text-text-primary",
+    message:
+      "Use text-text-primary instead of 'text-popover-foreground'. Seed has no --color-popover-foreground CSS variable.",
+  },
+  "ring-ring": {
+    fix: "ring-focus-ring",
+    message:
+      "Use ring-focus-ring instead of 'ring-ring'. Seed uses --color-focus-ring, not --color-ring.",
+  },
+  "ring-offset-background": {
+    fix: "",
+    message:
+      "Remove 'ring-offset-background'. This is a Shadcn artifact with no CSS variable backing in Seed.",
+  },
+};
+
+const FORBIDDEN_KEYS = Object.keys(FORBIDDEN_MAP);
+const CLASS_HELPERS = new Set(["cn", "clsx", "cva"]);
+
+function findForbiddenInString(value) {
+  const found = [];
+
+  for (const key of FORBIDDEN_KEYS) {
+    let index = 0;
+    while ((index = value.indexOf(key, index)) !== -1) {
+      const before = index === 0 ? " " : value[index - 1];
+      const after =
+        index + key.length >= value.length ? " " : value[index + key.length];
+
+      if ((/[\s"'`}]/.test(before) || index === 0) && /[\s"'`}]/.test(after)) {
+        found.push({ key, offset: index });
+      }
+
+      index += key.length;
+    }
+  }
+
+  return found;
+}
+
+function reportHits(context, node, text, textStartOffset) {
+  const hits = findForbiddenInString(text);
+  for (const { key, offset } of hits) {
+    const entry = FORBIDDEN_MAP[key];
+    context.report({
+      node,
+      message: entry.message,
+      fix(fixer) {
+        const start = textStartOffset + offset;
+        const end = start + key.length;
+        return fixer.replaceTextRange([start, end], entry.fix);
+      },
+    });
+  }
+}
+
+function checkLiteralNode(context, node) {
+  if (node.type !== "Literal" || typeof node.value !== "string") return;
+  const start = node.range ? node.range[0] + 1 : node.start + 1;
+  reportHits(context, node, node.value, start);
+}
+
+function checkTemplateLiteralNode(context, node) {
+  if (node.type !== "TemplateLiteral") return;
+
+  for (const quasi of node.quasis) {
+    const raw = quasi.value.raw;
+    const start = quasi.range ? quasi.range[0] + 1 : quasi.start + 1;
+    reportHits(context, quasi, raw, start);
+  }
+}
+
+const rule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow forbidden design token class names and auto-fix to the canonical token",
+    },
+    fixable: "code",
+    schema: [],
+  },
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        if (node.name.type !== "JSXIdentifier") return;
+        const attrName = node.name.name;
+        if (attrName !== "className" && attrName !== "class") return;
+
+        const { value } = node;
+        if (!value) return;
+
+        checkLiteralNode(context, value);
+
+        if (value.type === "JSXExpressionContainer") {
+          checkTemplateLiteralNode(context, value.expression);
+        }
+      },
+
+      CallExpression(node) {
+        if (node.callee.type !== "Identifier") return;
+        if (!CLASS_HELPERS.has(node.callee.name)) return;
+
+        for (const arg of node.arguments) {
+          if (arg.type === "SpreadElement") continue;
+          checkLiteralNode(context, arg);
+          checkTemplateLiteralNode(context, arg);
+        }
+      },
+    };
+  },
+};
+
+export default rule;

package/eslint-rules/nadicode/rules/no-forward-ref.js

@@ -0,0 +1,44 @@
+import { getFilename, isTestFile } from "../utils.js";
+
+const rule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow React.forwardRef (use ref-as-prop in React 19)",
+    },
+    schema: [],
+  },
+  create(context) {
+    const filename = getFilename(context);
+    if (isTestFile(filename)) return {};
+
+    return {
+      CallExpression(node) {
+        const callee = node.callee;
+        if (callee.type === "Identifier" && callee.name === "forwardRef") {
+          context.report({
+            node,
+            message:
+              "Use ref-as-prop instead of forwardRef. Declare `ref` in the component's props type.",
+          });
+          return;
+        }
+        if (
+          callee.type === "MemberExpression" &&
+          callee.object.type === "Identifier" &&
+          callee.object.name === "React" &&
+          callee.property.type === "Identifier" &&
+          callee.property.name === "forwardRef"
+        ) {
+          context.report({
+            node,
+            message:
+              "Use ref-as-prop instead of forwardRef. Declare `ref` in the component's props type.",
+          });
+        }
+      },
+    };
+  },
+};
+
+export default rule;

package/eslint-rules/nadicode/rules/no-framer-motion-import.js

@@ -0,0 +1,36 @@
+/**
+ * @fileoverview Disallow importing from 'framer-motion' (use 'motion/react' instead).
+ *
+ * The framer-motion package was renamed to motion. Importing from the old name
+ * pulls in the legacy bundle. Auto-fixable.
+ */
+
+const rule = {
+  meta: {
+    type: "problem",
+    fixable: "code",
+    docs: {
+      description:
+        "Disallow imports from 'framer-motion'. Use 'motion/react' instead.",
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== "framer-motion") return;
+
+        context.report({
+          node: node.source,
+          message:
+            "Import from 'motion/react' instead of 'framer-motion'. The package was renamed.",
+          fix(fixer) {
+            return fixer.replaceText(node.source, "'motion/react'");
+          },
+        });
+      },
+    };
+  },
+};
+
+export default rule;

package/eslint-rules/nadicode/rules/no-handcoded-badge.js

@@ -0,0 +1,132 @@
+import {
+  getClassTokensFromAttribute,
+  getClassTokensFromHelperCall,
+  getFilename,
+  isClassHelperCall,
+  isTestFile,
+} from "../utils.js";
+
+/**
+ * Detect hand-coded badge-like patterns that should use the <Badge> component.
+ *
+ * A "badge pattern" is a <span> or <div> (not <button>, <a>, or <Badge>) whose
+ * className contains BOTH mandatory signals:
+ *   1. font weight (font-medium, font-semibold, font-bold)
+ *   2. small text size (text-xs, text-sm, or text-[Npx])
+ *
+ * Plus at least 2 of these 3 optional signals:
+ *   3. rounded (any variant: rounded, rounded-full, rounded-md, rounded-lg)
+ *   4. horizontal padding (px-*)
+ *   5. vertical padding (py-*)
+ *
+ * The DS provides <Badge> with 5 variants (primary, secondary, destructive,
+ * outline, accent) that handle all of this automatically.
+ */
+
+// Both font-weight AND small text-size are mandatory for badge detection.
+const REQUIRED_SIGNALS = [
+  /\bfont-(?:medium|semibold|bold)\b/,
+  /\btext-(?:xs|sm|\[\d+px\])/,
+];
+
+const OPTIONAL_SIGNALS = [
+  { name: "rounded", pattern: /\brounded(?:-full|-md|-lg|-sm|-xl|-2xl)?\b/ },
+  { name: "px", pattern: /\bpx-\S+/ },
+  { name: "py", pattern: /\bpy-\S+/ },
+];
+
+const MIN_OPTIONAL = 2; // Must match at least 2 of 3 optional signals
+
+// Files that ARE badge/tag primitives (they define the pattern, not misuse it)
+const EXEMPT_FILES = [
+  "Badge.tsx",
+  "TagInput.tsx",
+  "Combobox.tsx",
+  "InputOTP.tsx",
+];
+
+// Directories where this rule does not apply
+const EXEMPT_DIRS = [
+  "/components/ui/",
+  "/components/animate-ui/",
+];
+
+function isExempt(filename) {
+  if (EXEMPT_FILES.some((f) => filename.endsWith("/" + f))) return true;
+  if (EXEMPT_DIRS.some((d) => filename.includes(d))) return true;
+  return false;
+}
+
+function isBadgeLikeClass(classString) {
+  for (const req of REQUIRED_SIGNALS) {
+    if (!req.test(classString)) return false;
+  }
+  let matches = 0;
+  for (const signal of OPTIONAL_SIGNALS) {
+    if (signal.pattern.test(classString)) matches++;
+  }
+  return matches >= MIN_OPTIONAL;
+}
+
+const rule = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description:
+        "Disallow hand-coded badge/tag patterns in blocks and pages. Use the <Badge> component from @/components/ui/Badge instead.",
+    },
+    schema: [],
+  },
+  create(context) {
+    const filename = getFilename(context);
+    if (isExempt(filename) || isTestFile(filename)) return {};
+
+    function checkTokens(node, tokens) {
+      const combined = tokens.join(" ");
+      if (isBadgeLikeClass(combined)) {
+        context.report({
+          node,
+          message:
+            "Hand-coded badge pattern detected. Use <Badge> from @/components/ui/Badge instead of styling raw <span>/<div> with rounded + padding + text-size + font-weight.",
+        });
+      }
+    }
+
+    // Elements that legitimately carry badge-like styling but are not badges:
+    // - Badge: already using the DS component
+    // - button/a: interactive elements (toggle pills, link pills)
+    const SKIP_ELEMENTS = new Set(["Badge", "button", "a"]);
+
+    function isOnSkippedElement(node) {
+      const opening =
+        node.type === "JSXAttribute" ? node.parent : undefined;
+      if (!opening || opening.type !== "JSXOpeningElement") return false;
+      const name = opening.name;
+      return (
+        name && name.type === "JSXIdentifier" && SKIP_ELEMENTS.has(name.name)
+      );
+    }
+
+    return {
+      JSXAttribute(node) {
+        if (isOnSkippedElement(node)) return;
+        const tokens = getClassTokensFromAttribute(node);
+        if (tokens.length > 0) checkTokens(node, tokens);
+      },
+      CallExpression(node) {
+        if (!isClassHelperCall(node)) return;
+        // Skip cn() calls inside Badge JSX attributes
+        let ancestor = node.parent;
+        while (ancestor) {
+          if (ancestor.type === "JSXAttribute" && isOnSkippedElement(ancestor))
+            return;
+          ancestor = ancestor.parent;
+        }
+        const tokens = getClassTokensFromHelperCall(node);
+        if (tokens.length > 0) checkTokens(node, tokens);
+      },
+    };
+  },
+};
+
+export default rule;

package/eslint-rules/nadicode/rules/no-handcoded-empty-state.js

@@ -0,0 +1,82 @@
+import {
+  getClassTokensFromAttribute,
+  getClassTokensFromHelperCall,
+  getFilename,
+  isClassHelperCall,
+  isTestFile,
+} from "../utils.js";
+
+/**
+ * Detect hand-coded empty state containers that should use <Empty>.
+ *
+ * An "empty state pattern" is a <div> with className containing ALL of:
+ *   1. border-dashed
+ *   2. centering (items-center or justify-center)
+ *   3. NOT inside a ContextMenu/trigger area (heuristic: no data-slot nearby)
+ *
+ * The DS provides <Empty>, <EmptyIcon>, <EmptyTitle>, <EmptyDescription>.
+ */
+
+const REQUIRED_SIGNALS = [
+  /\bborder-dashed\b/,
+  /\bitems-center\b/,
+  /\bjustify-center\b/,
+];
+
+// Files that define the Empty primitive
+const EXEMPT_FILES = ["Empty.tsx"];
+
+const EXEMPT_DIRS = [
+  "/components/ui/",
+  "/components/animate-ui/",
+];
+
+function isExempt(filename) {
+  if (EXEMPT_FILES.some((f) => filename.endsWith("/" + f))) return true;
+  if (EXEMPT_DIRS.some((d) => filename.includes(d))) return true;
+  return false;
+}
+
+function isEmptyStateLike(classString) {
+  return REQUIRED_SIGNALS.every((re) => re.test(classString));
+}
+
+const rule = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description:
+        "Disallow hand-coded empty state containers with border-dashed + centering. Use <Empty> from @/components/ui/Empty instead.",
+    },
+    schema: [],
+  },
+  create(context) {
+    const filename = getFilename(context);
+    if (isExempt(filename) || isTestFile(filename)) return {};
+
+    function checkTokens(node, tokens) {
+      const combined = tokens.join(" ");
+      if (isEmptyStateLike(combined)) {
+        context.report({
+          node,
+          message:
+            "Hand-coded empty state pattern (border-dashed + centered). Use <Empty> from @/components/ui/Empty instead.",
+        });
+      }
+    }
+
+    return {
+      JSXAttribute(node) {
+        const tokens = getClassTokensFromAttribute(node);
+        if (tokens.length > 0) checkTokens(node, tokens);
+      },
+      CallExpression(node) {
+        if (!isClassHelperCall(node)) return;
+        const tokens = getClassTokensFromHelperCall(node);
+        if (tokens.length > 0) checkTokens(node, tokens);
+      },
+    };
+  },
+};
+
+export default rule;