@nadicodeai/ui 0.19.2 → 0.21.0

package/dist/eslint/rules/jsx-class-utility.js

@@ -0,0 +1,231 @@
+const PACKAGE_PRIMITIVE_PATH = "@nadicodeai/ui/src/";
+
+export function isPackageOwnedPrimitive(filename) {
+  return filename.replaceAll("\\", "/").includes(PACKAGE_PRIMITIVE_PATH);
+}
+
+function variableInitializer(node, context) {
+  let scope = context.sourceCode.getScope(node);
+  while (scope) {
+    const variable = scope.set.get(node.name);
+    const definition = variable?.defs.find(
+      (candidate) => candidate.type === "Variable" && candidate.node?.type === "VariableDeclarator",
+    );
+    if (definition?.node.init) return definition.node.init;
+    scope = scope.upper;
+  }
+  return undefined;
+}
+
+function collectStaticClassFragments(
+  node,
+  fragments,
+  context,
+  seen = new Set(),
+  includeObjectKeys = true,
+) {
+  if (!node) return;
+
+  if (seen.has(node)) return;
+  seen.add(node);
+
+  if (node.type === "Literal" && typeof node.value === "string") {
+    fragments.push(node.value);
+    return;
+  }
+  if (node.type === "JSXExpressionContainer" || node.type === "ChainExpression") {
+    collectStaticClassFragments(node.expression, fragments, context, seen, includeObjectKeys);
+    return;
+  }
+  if (node.type === "TemplateLiteral") {
+    for (const quasi of node.quasis) fragments.push(quasi.value.cooked ?? quasi.value.raw);
+    for (const expression of node.expressions) {
+      collectStaticClassFragments(expression, fragments, context, seen, includeObjectKeys);
+    }
+    return;
+  }
+  if (node.type === "TaggedTemplateExpression") {
+    collectStaticClassFragments(node.quasi, fragments, context, seen, includeObjectKeys);
+    return;
+  }
+  if (node.type === "ConditionalExpression") {
+    collectStaticClassFragments(node.consequent, fragments, context, seen, includeObjectKeys);
+    collectStaticClassFragments(node.alternate, fragments, context, seen, includeObjectKeys);
+    return;
+  }
+  if (node.type === "LogicalExpression" || node.type === "BinaryExpression") {
+    collectStaticClassFragments(node.left, fragments, context, seen, includeObjectKeys);
+    collectStaticClassFragments(node.right, fragments, context, seen, includeObjectKeys);
+    return;
+  }
+  if (node.type === "CallExpression" || node.type === "NewExpression") {
+    for (const argument of node.arguments) {
+      collectStaticClassFragments(
+        argument.type === "SpreadElement" ? argument.argument : argument,
+        fragments,
+        context,
+        seen,
+        includeObjectKeys,
+      );
+    }
+    return;
+  }
+  if (node.type === "ArrayExpression" || node.type === "SequenceExpression") {
+    for (const element of node.elements ?? node.expressions) {
+      collectStaticClassFragments(
+        element?.type === "SpreadElement" ? element.argument : element,
+        fragments,
+        context,
+        seen,
+        includeObjectKeys,
+      );
+    }
+    return;
+  }
+  if (node.type === "ObjectExpression") {
+    for (const property of node.properties) {
+      if (property.type === "SpreadElement") {
+        collectStaticClassFragments(property.argument, fragments, context, seen, includeObjectKeys);
+        continue;
+      }
+      if (includeObjectKeys && !property.computed) {
+        collectStaticClassFragments(property.key, fragments, context, seen, includeObjectKeys);
+      }
+      collectStaticClassFragments(property.value, fragments, context, seen, includeObjectKeys);
+    }
+    return;
+  }
+  if (node.type === "Identifier") {
+    collectStaticClassFragments(
+      variableInitializer(node, context),
+      fragments,
+      context,
+      seen,
+      includeObjectKeys,
+    );
+    return;
+  }
+  if (node.type === "MemberExpression") {
+    // A dynamic lookup can select any value in a local class table. Resolve the
+    // entire object so no palette entry can hide behind `classes[current]`.
+    collectStaticClassFragments(node.object, fragments, context, seen, includeObjectKeys);
+    return;
+  }
+  if (
+    node.type === "TSAsExpression" ||
+    node.type === "TSSatisfiesExpression" ||
+    node.type === "TSNonNullExpression" ||
+    node.type === "TypeCastExpression"
+  ) {
+    collectStaticClassFragments(node.expression, fragments, context, seen, includeObjectKeys);
+  }
+}
+
+function staticPropertyName(property) {
+  if (property.key.type === "Identifier" && !property.computed) return property.key.name;
+  if (property.key.type === "Literal" && typeof property.key.value === "string") {
+    return property.key.value;
+  }
+  return undefined;
+}
+
+function collectStaticSpreadClassFragments(node, fragments, context, seen = new Set()) {
+  if (!node || seen.has(node)) return;
+  seen.add(node);
+
+  if (node.type === "Identifier") {
+    collectStaticSpreadClassFragments(variableInitializer(node, context), fragments, context, seen);
+    return;
+  }
+  if (node.type === "ObjectExpression") {
+    for (const property of node.properties) {
+      if (property.type === "SpreadElement") {
+        collectStaticSpreadClassFragments(property.argument, fragments, context, seen);
+        continue;
+      }
+      if (staticPropertyName(property) === "className") {
+        collectStaticClassFragments(property.value, fragments, context, seen);
+      }
+    }
+    return;
+  }
+  if (node.type === "ConditionalExpression") {
+    collectStaticSpreadClassFragments(node.consequent, fragments, context, seen);
+    collectStaticSpreadClassFragments(node.alternate, fragments, context, seen);
+    return;
+  }
+  if (node.type === "LogicalExpression") {
+    collectStaticSpreadClassFragments(node.left, fragments, context, seen);
+    collectStaticSpreadClassFragments(node.right, fragments, context, seen);
+    return;
+  }
+  if (
+    node.type === "TSAsExpression" ||
+    node.type === "TSSatisfiesExpression" ||
+    node.type === "TSNonNullExpression" ||
+    node.type === "TypeCastExpression"
+  ) {
+    collectStaticSpreadClassFragments(node.expression, fragments, context, seen);
+  }
+}
+
+export function classUtilities(attribute, context) {
+  if (attribute?.type !== "JSXAttribute" || attribute.name.name !== "className") return [];
+  return staticClassUtilities(attribute.value, context);
+}
+
+export function staticStringFragments(node, context) {
+  const fragments = [];
+  collectStaticClassFragments(node, fragments, context);
+  return fragments;
+}
+
+function staticClassUtilities(node, context) {
+  return staticStringFragments(node, context).flatMap((fragment) =>
+    fragment.split(/\s+/).filter(Boolean),
+  );
+}
+
+function staticValueClassUtilities(node, context) {
+  const fragments = [];
+  collectStaticClassFragments(node, fragments, context, new Set(), false);
+  return fragments.flatMap((fragment) => fragment.split(/\s+/).filter(Boolean));
+}
+
+export function tokenUtilityVisitors(context, onUtility) {
+  const cvaNames = new Set();
+
+  function visitUtilities(node, utilities) {
+    for (const utility of utilities) onUtility(node, utility);
+  }
+
+  return {
+    ImportDeclaration(node) {
+      if (node.source.value !== "class-variance-authority") return;
+      for (const specifier of node.specifiers) {
+        if (specifier.type === "ImportSpecifier" && specifier.imported.name === "cva") {
+          cvaNames.add(specifier.local.name);
+        }
+      }
+    },
+    JSXAttribute(node) {
+      visitUtilities(node, classUtilities(node, context));
+    },
+    CallExpression(node) {
+      if (node.callee.type !== "Identifier" || !cvaNames.has(node.callee.name)) return;
+      visitUtilities(node, staticValueClassUtilities(node, context));
+    },
+  };
+}
+
+export function openingElementClassUtilities(node, context) {
+  const fragments = [];
+  for (const attribute of node.attributes) {
+    if (attribute.type === "JSXAttribute" && attribute.name.name === "className") {
+      fragments.push(...staticStringFragments(attribute.value, context));
+    } else if (attribute.type === "JSXSpreadAttribute") {
+      collectStaticSpreadClassFragments(attribute.argument, fragments, context);
+    }
+  }
+  return fragments.flatMap((fragment) => fragment.split(/\s+/).filter(Boolean));
+}

package/dist/eslint/rules/no-deprecated-zod-api.js

@@ -0,0 +1,156 @@
+const LEGACY_FACTORIES = new Map([
+  ["nativeEnum", "z.enum()"],
+  ["promise", "await the value before parsing it"],
+]);
+
+const LEGACY_METHODS = {
+  number: new Map([
+    ["finite", "remove it; z.number() already rejects infinite values"],
+    ["safe", ".int()"],
+    ["step", ".multipleOf()"],
+  ]),
+  object: new Map([
+    ["merge", ".extend(other.shape)"],
+    ["passthrough", "z.looseObject()"],
+    ["strict", "z.strictObject()"],
+    ["strip", "z.object(), which strips unknown keys by default"],
+  ]),
+  string: new Map(
+    [
+      "base64",
+      "base64url",
+      "cuid",
+      "cuid2",
+      "e164",
+      "email",
+      "emoji",
+      "guid",
+      "ipv4",
+      "ipv6",
+      "jwt",
+      "ksuid",
+      "nanoid",
+      "ulid",
+      "url",
+      "uuid",
+      "uuidv4",
+      "uuidv6",
+      "uuidv7",
+      "xid",
+    ].map((name) => [name, `z.${name.startsWith("uuidv") ? "uuid" : name}()`]),
+  ),
+};
+
+for (const name of ["date", "datetime", "duration", "time"]) {
+  LEGACY_METHODS.string.set(name, `z.iso.${name}()`);
+}
+for (const name of ["cidrv4", "cidrv6"]) {
+  LEGACY_METHODS.string.set(name, `z.${name}()`);
+}
+
+function memberName(node) {
+  if (!node.computed && node.property.type === "Identifier") {
+    return node.property.name;
+  }
+  if (node.computed && node.property.type === "Literal") {
+    return typeof node.property.value === "string" ? node.property.value : undefined;
+  }
+  return undefined;
+}
+
+export const noDeprecatedZodApi = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow deprecated and legacy Zod APIs when a Zod 4 replacement exists",
+    },
+    schema: [],
+    messages: {
+      legacyFactory: "{{api}} is deprecated in Zod 4; use {{replacement}}.",
+      legacyMethod: "{{api}} is deprecated or legacy in Zod 4; use {{replacement}}.",
+    },
+  },
+
+  create(context) {
+    const sourceCode = context.sourceCode;
+    const zodBindings = new Set();
+
+    function isZodBinding(identifier) {
+      for (let scope = sourceCode.getScope(identifier); scope; scope = scope.upper) {
+        const variable = scope.set.get(identifier.name);
+        if (variable) {
+          return zodBindings.has(variable);
+        }
+      }
+      return false;
+    }
+
+    function rootFactory(call) {
+      if (call.type !== "CallExpression" || call.callee.type !== "MemberExpression") {
+        return undefined;
+      }
+      const factory = memberName(call.callee);
+      if (!factory) {
+        return undefined;
+      }
+      if (call.callee.object.type === "Identifier" && isZodBinding(call.callee.object)) {
+        return factory;
+      }
+      return rootFactory(call.callee.object);
+    }
+
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value !== "zod") {
+          return;
+        }
+        for (const specifier of node.specifiers) {
+          const importsNamespace = specifier.type === "ImportNamespaceSpecifier";
+          const importsZ =
+            specifier.type === "ImportSpecifier" &&
+            ((specifier.imported.type === "Identifier" && specifier.imported.name === "z") ||
+              (specifier.imported.type === "Literal" && specifier.imported.value === "z"));
+          if (!importsNamespace && !importsZ) {
+            continue;
+          }
+          for (const variable of sourceCode.getDeclaredVariables(specifier)) {
+            zodBindings.add(variable);
+          }
+        }
+      },
+
+      CallExpression(node) {
+        if (node.callee.type !== "MemberExpression") {
+          return;
+        }
+        const method = memberName(node.callee);
+        if (!method) {
+          return;
+        }
+
+        if (node.callee.object.type === "Identifier" && isZodBinding(node.callee.object)) {
+          const replacement = LEGACY_FACTORIES.get(method);
+          if (replacement) {
+            context.report({
+              node: node.callee.property,
+              messageId: "legacyFactory",
+              data: { api: `z.${method}()`, replacement },
+            });
+          }
+          return;
+        }
+
+        const factory = rootFactory(node.callee.object);
+        const family = factory === "strictObject" || factory === "looseObject" ? "object" : factory;
+        const replacement = LEGACY_METHODS[family]?.get(method);
+        if (replacement) {
+          context.report({
+            node: node.callee.property,
+            messageId: "legacyMethod",
+            data: { api: `z.${factory}().${method}()`, replacement },
+          });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-design-system-src-import.js

@@ -0,0 +1,11 @@
+import { bannedSourceRootMatcher, createSrcImportRule } from "./src-import-boundary.js";
+
+/** @type {import('eslint').Rule.RuleModule} */
+export const noDesignSystemSrcImport = createSrcImportRule({
+  description:
+    "Disallow deep imports from @nadicodeai/design-system source paths in apps and UI consumers",
+  bannedMessage: "Import @nadicodeai/design-system through published exports only, not {{value}}.",
+  // The package dir is `design-system/`, so relative paths carry the shorter
+  // `design-system/src` marker rather than the scoped specifier.
+  isBanned: bannedSourceRootMatcher("design-system/src"),
+});

package/dist/eslint/rules/no-invalid-token-utility.js

@@ -0,0 +1,46 @@
+import { createRequire } from "node:module";
+
+import { tokenUtilityVisitors } from "./jsx-class-utility.js";
+
+const require = createRequire(import.meta.url);
+const generatedTheme = require("@nadicodeai/design-system/tailwind").theme.extend;
+const typographyUtilities = new Set(
+  Object.keys(generatedTheme.fontSize).map((name) => `nc-type-${name}`),
+);
+const colorTokens = new Set(Object.keys(generatedTheme.colors));
+const COLOR_UTILITY =
+  /^(?:bg|text|border|outline|ring|fill|stroke|decoration|accent|caret|divide|from|via|to|shadow)-nc-([^/]+)(?:\/.*)?$/;
+
+function withoutVariants(utility) {
+  return utility.slice(utility.lastIndexOf(":") + 1);
+}
+
+function isInvalidGeneratedUtility(utility) {
+  const unqualified = withoutVariants(utility);
+  if (unqualified.startsWith("nc-type-")) {
+    return !typographyUtilities.has(unqualified);
+  }
+
+  const color = COLOR_UTILITY.exec(unqualified);
+  return color ? !colorTokens.has(color[1]) : false;
+}
+
+export const noInvalidTokenUtility = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow token utilities that are absent from generated design-system output",
+    },
+    schema: [],
+    messages: {
+      invalidTokenUtility:
+        "{{utility}} is not generated by the installed NadicodeAI design system. Use a utility from @nadicodeai/design-system/tailwind.",
+    },
+  },
+  create(context) {
+    return tokenUtilityVisitors(context, (node, utility) => {
+      if (!isInvalidGeneratedUtility(utility)) return;
+      context.report({ node, messageId: "invalidTokenUtility", data: { utility } });
+    });
+  },
+};

package/dist/eslint/rules/no-native-visible-control.js

@@ -0,0 +1,86 @@
+import { isPackageOwnedPrimitive } from "./jsx-class-utility.js";
+
+const NATIVE_CONTROLS = new Set(["button", "input", "select", "textarea"]);
+
+function staticValue(node) {
+  if (node?.type === "Literal") {
+    return node.value;
+  }
+  if (node?.type === "JSXExpressionContainer") {
+    return staticValue(node.expression);
+  }
+  if (node?.type === "TemplateLiteral" && node.expressions.length === 0) {
+    return node.quasis[0]?.value.cooked;
+  }
+  return undefined;
+}
+
+function hiddenInput(node) {
+  const typeAttribute = node.attributes.find(
+    (attribute) => attribute.type === "JSXAttribute" && attribute.name.name === "type",
+  );
+  return staticValue(typeAttribute?.value) === "hidden";
+}
+
+function isPrimitiveRenderElement(node, packagePrimitiveNames) {
+  const expression = node.parent;
+  const attribute = expression?.parent;
+  const openingElement = attribute?.parent;
+  return (
+    expression?.type === "JSXExpressionContainer" &&
+    attribute?.type === "JSXAttribute" &&
+    attribute.name.name === "render" &&
+    openingElement?.type === "JSXOpeningElement" &&
+    openingElement.name.type === "JSXIdentifier" &&
+    packagePrimitiveNames.has(openingElement.name.name)
+  );
+}
+
+export const noNativeVisibleControl = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow visible native controls in app source; use @nadicodeai/ui primitives",
+    },
+    schema: [],
+    messages: {
+      nativeVisibleControl:
+        "Use the @nadicodeai/ui primitive instead of native visible <{{element}}>.",
+    },
+  },
+  create(context) {
+    if (isPackageOwnedPrimitive(context.filename)) {
+      return {};
+    }
+    const packagePrimitiveNames = new Set();
+    return {
+      ImportDeclaration(node) {
+        if (
+          typeof node.source.value !== "string" ||
+          !node.source.value.startsWith("@nadicodeai/ui")
+        ) {
+          return;
+        }
+        for (const specifier of node.specifiers) {
+          packagePrimitiveNames.add(specifier.local.name);
+        }
+      },
+      JSXOpeningElement(node) {
+        if (node.name.type !== "JSXIdentifier" || !NATIVE_CONTROLS.has(node.name.name)) {
+          return;
+        }
+        if (node.name.name === "input" && hiddenInput(node)) {
+          return;
+        }
+        if (isPrimitiveRenderElement(node.parent, packagePrimitiveNames)) {
+          return;
+        }
+        context.report({
+          node: node.name,
+          messageId: "nativeVisibleControl",
+          data: { element: node.name.name },
+        });
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-raw-color-utility.js

@@ -0,0 +1,109 @@
+import {
+  classUtilities,
+  isPackageOwnedPrimitive,
+  staticStringFragments,
+} from "./jsx-class-utility.js";
+
+const COLOR_NAMES = new Set([
+  "black",
+  "white",
+  "slate",
+  "gray",
+  "zinc",
+  "neutral",
+  "stone",
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose",
+  "nc",
+]);
+const COLOR_UTILITY =
+  /^(?:bg|text|border|outline|ring|fill|stroke|decoration|accent|caret|divide|from|via|to|shadow)-(\[.+\]|[^/]+)(?:\/.*)?$/;
+const COLOR_VALUE_PROPERTIES = new Set([
+  "accentColor",
+  "background",
+  "backgroundColor",
+  "borderColor",
+  "caretColor",
+  "color",
+  "fill",
+  "outlineColor",
+  "stopColor",
+  "stroke",
+  "textDecorationColor",
+]);
+
+function withoutVariants(utility) {
+  return utility.slice(utility.lastIndexOf(":") + 1);
+}
+
+function isRawColorUtility(utility) {
+  const match = COLOR_UTILITY.exec(withoutVariants(utility));
+  if (!match) {
+    return false;
+  }
+  const color = match[1];
+  if (color.startsWith("[")) {
+    return (
+      /var\(--nc-/i.test(color) ||
+      /^\[(?:#|(?:rgba?|hsla?|oklch|oklab|hwb|color-mix)\(|(?:red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose|black|white)\])/i.test(
+        color,
+      )
+    );
+  }
+  return COLOR_NAMES.has(color.split("-")[0]);
+}
+
+function propertyName(node) {
+  if (!node || node.computed) return undefined;
+  if (node.key.type === "Identifier") return node.key.name;
+  if (node.key.type === "Literal" && typeof node.key.value === "string") return node.key.value;
+  return undefined;
+}
+
+export const noRawColorUtility = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow raw Tailwind colors and canonical color values in app source; use semantic design tokens",
+    },
+    schema: [],
+    messages: {
+      rawColorUtility: "Use a semantic color role instead of raw color value {{utility}}.",
+    },
+  },
+  create(context) {
+    if (isPackageOwnedPrimitive(context.filename)) return {};
+
+    return {
+      JSXAttribute(node) {
+        for (const utility of classUtilities(node, context)) {
+          if (!isRawColorUtility(utility)) continue;
+          context.report({ node, messageId: "rawColorUtility", data: { utility } });
+        }
+      },
+      Property(node) {
+        if (!COLOR_VALUE_PROPERTIES.has(propertyName(node))) return;
+        for (const value of staticStringFragments(node.value, context)) {
+          if (!/var\(--nc-/i.test(value)) continue;
+          context.report({ node, messageId: "rawColorUtility", data: { utility: value } });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-raw-focus-ring-width.js

@@ -0,0 +1,30 @@
+import { classUtilities } from "./jsx-class-utility.js";
+
+function isRawFocusRingWidth(utility) {
+  const base = utility.slice(utility.lastIndexOf(":") + 1);
+  return utility.includes("focus") && /^ring-(?:[1-9]\d*|px)$/.test(base);
+}
+
+export const noRawFocusRingWidth = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Require the design-system focus-ring width on every focus surface",
+    },
+    schema: [],
+    messages: {
+      rawFocusRingWidth:
+        "Use ring-[length:var(--ring-width-focus)] instead of raw focus-ring width {{utility}}.",
+    },
+  },
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        for (const utility of classUtilities(node, context)) {
+          if (!isRawFocusRingWidth(utility)) continue;
+          context.report({ node, messageId: "rawFocusRingWidth", data: { utility } });
+        }
+      },
+    };
+  },
+};