@nadicodeai/ui 0.20.0 → 0.22.0

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 } });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-raw-logo-import.js

@@ -0,0 +1,41 @@
+import { createSrcImportRule } from "./src-import-boundary.js";
+
+const BANNED_PATTERNS = [
+  "@nadicodeai/design-system/assets/logo-mark",
+  "@nadicodeai/design-system/assets/logo-wordmark",
+  "@nadicodeai/design-system/assets/logo-geometry",
+  "logo-mark.svg",
+  "logo-wordmark.svg",
+];
+
+// Only the single brand adapter in @nadicodeai/ui may import the raw logo
+// assets. A bare "/components/brand.tsx" suffix would also whitelist a future
+// website/portal `components/brand.tsx`, letting an app bypass BrandMark —
+// pin the full package-relative path instead.
+const ALLOWED_SUFFIXES = ["@nadicodeai/ui/src/components/brand.tsx"];
+
+function isAllowedFile(filename) {
+  const normalized = filename.replaceAll("\\", "/");
+  return ALLOWED_SUFFIXES.some((suffix) => normalized.endsWith(suffix));
+}
+
+function matchesBanned(value) {
+  return typeof value === "string" && BANNED_PATTERNS.some((pattern) => value.includes(pattern));
+}
+
+const rawLogoImportRule = createSrcImportRule({
+  description: "Disallow direct logo asset imports outside the BrandMark/BrandWordmark adapter",
+  bannedMessage:
+    "Import logo assets only through BrandMark/BrandWordmark from @nadicodeai/ui/components/brand (found {{value}}).",
+  isBanned: matchesBanned,
+});
+
+export const noRawLogoImport = {
+  ...rawLogoImportRule,
+  create(context) {
+    if (isAllowedFile(context.filename)) {
+      return {};
+    }
+    return rawLogoImportRule.create(context);
+  },
+};

package/dist/eslint/rules/no-shadcn-appearance-override.js

@@ -0,0 +1,191 @@
+import {
+  classUtilities,
+  isPackageOwnedPrimitive,
+  openingElementClassUtilities,
+} from "./jsx-class-utility.js";
+
+function withoutVariants(utility) {
+  return utility.slice(utility.lastIndexOf(":") + 1);
+}
+
+function isTypographySize(utility) {
+  return /^text-(?:xs|sm|base|lg|xl|[2-9]xl|\[[\d.]+(?:px|rem|em|%|lh)\])$/.test(utility);
+}
+
+function isTextLayoutUtility(utility) {
+  return /^text-(?:left|center|right|justify|start|end|balance|pretty|clip|ellipsis)$/.test(
+    utility,
+  );
+}
+
+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",
+  "background",
+  "foreground",
+  "card",
+  "popover",
+  "primary",
+  "secondary",
+  "muted",
+  "accent",
+  "destructive",
+  "border",
+  "input",
+  "ring",
+  "focus",
+]);
+
+function hasColorValue(utility, prefix) {
+  if (!utility.startsWith(prefix)) {
+    return false;
+  }
+  const value = utility.slice(prefix.length).split("/")[0];
+  return value.startsWith("[") || COLOR_NAMES.has(value.split("-")[0]);
+}
+
+function isBorderMechanic(utility) {
+  return /^(?:border(?:-(?:[xy]|[trblse]{1,2}|[0-9]+|px|dashed|dotted|double|hidden|none))?)$/.test(
+    utility,
+  );
+}
+
+function isBorderRemoval(utility) {
+  return /^border(?:-[xytrblse]{1,2})?-(?:0|none|\[(?:length:)?0(?:px|rem|em|%)?\])$/.test(utility);
+}
+
+function isRingOrOutlineMechanic(utility) {
+  return /^(?:ring(?:-(?:[0-9]+|inset|offset(?:-[0-9]+)?))?|outline(?:-(?:none|[0-9]+|offset-[0-9]+))?)$/.test(
+    utility,
+  );
+}
+
+function isAppearanceUtility(utility) {
+  const base = withoutVariants(utility);
+  return (
+    /^appearance-/.test(base) ||
+    /^bg-/.test(base) ||
+    isBorderRemoval(base) ||
+    (base.startsWith("border") && !isBorderMechanic(base) && hasColorValue(base, "border-")) ||
+    /^shadow(?:-|$)/.test(base) ||
+    /^rounded(?:-|$)/.test(base) ||
+    ((base.startsWith("ring") || base.startsWith("outline")) &&
+      !isRingOrOutlineMechanic(base) &&
+      (hasColorValue(base, "ring-") || hasColorValue(base, "outline-"))) ||
+    /^opacity-/.test(base) ||
+    (/^text-/.test(base) && !isTypographySize(base) && !isTextLayoutUtility(base))
+  );
+}
+
+function isProhibitedAppearanceUtility(utility, { cardRoot = false } = {}) {
+  const base = withoutVariants(utility);
+  return isAppearanceUtility(utility) && (!isBorderRemoval(base) || cardRoot);
+}
+
+function targetsSharedSlot(utility) {
+  return utility.includes("data-slot") || utility.includes("data-[slot");
+}
+
+function targetsCardSlot(utility) {
+  return (
+    /data-slot=(?:card|["']card["'])(?=\])/.test(utility) ||
+    /data-\[slot=(?:card|["']card["'])\]/.test(utility)
+  );
+}
+
+export const noShadcnAppearanceOverride = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow app callers repainting imported shadcn primitives; compose their structural layout only",
+    },
+    schema: [],
+    messages: {
+      appearanceOverride:
+        "Do not repaint an imported @nadicodeai/ui primitive with {{utility}}; use its semantic variant or package primitive.",
+    },
+  },
+  create(context) {
+    if (isPackageOwnedPrimitive(context.filename)) {
+      return {};
+    }
+
+    const sharedPrimitiveNames = new Set();
+    const sharedCardRootNames = new Set();
+    const isSharedPrimitive = (node) =>
+      node?.type === "JSXOpeningElement" &&
+      node.name.type === "JSXIdentifier" &&
+      sharedPrimitiveNames.has(node.name.name);
+    const isSharedCardRoot = (node) =>
+      node?.type === "JSXOpeningElement" &&
+      node.name.type === "JSXIdentifier" &&
+      sharedCardRootNames.has(node.name.name);
+    return {
+      ImportDeclaration(node) {
+        if (
+          typeof node.source.value !== "string" ||
+          !node.source.value.startsWith("@nadicodeai/ui/components/")
+        ) {
+          return;
+        }
+        for (const specifier of node.specifiers) {
+          sharedPrimitiveNames.add(specifier.local.name);
+          if (
+            node.source.value === "@nadicodeai/ui/components/card" &&
+            specifier.type === "ImportSpecifier" &&
+            specifier.imported.name === "Card"
+          ) {
+            sharedCardRootNames.add(specifier.local.name);
+          }
+        }
+      },
+      JSXOpeningElement(node) {
+        if (!isSharedPrimitive(node)) return;
+        for (const utility of openingElementClassUtilities(node, context)) {
+          if (
+            utility &&
+            isProhibitedAppearanceUtility(utility, { cardRoot: isSharedCardRoot(node) })
+          ) {
+            context.report({ node, messageId: "appearanceOverride", data: { utility } });
+          }
+        }
+      },
+      JSXAttribute(node) {
+        if (isSharedPrimitive(node.parent)) return;
+        for (const utility of classUtilities(node, context)) {
+          if (
+            !targetsSharedSlot(utility) ||
+            !isProhibitedAppearanceUtility(utility, { cardRoot: targetsCardSlot(utility) })
+          ) {
+            continue;
+          }
+          context.report({ node, messageId: "appearanceOverride", data: { utility } });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-token-category-bypass.js

@@ -0,0 +1,53 @@
+import { createRequire } from "node:module";
+
+import { tokenUtilityVisitors } from "./jsx-class-utility.js";
+
+const require = createRequire(import.meta.url);
+const borderRadius = require("@nadicodeai/design-system/tailwind").theme.extend.borderRadius;
+const radiusNameByValue = new Map(
+  Object.entries(borderRadius).map(([name, value]) => [value, name]),
+);
+const ARBITRARY_RADIUS = /^(rounded(?:-(?:t|r|b|l|s|e|ss|se|ee|es|tl|tr|br|bl))?)-\[(.+)\]$/;
+const CANONICAL_RADIUS_VARIABLE = /^var\(--(?:nc-rounded|radius)-([a-z0-9-]+)\)$/;
+
+function canonicalRadiusReplacement(utility) {
+  const variantBoundary = utility.lastIndexOf(":") + 1;
+  const variants = utility.slice(0, variantBoundary);
+  const unqualified = utility.slice(variantBoundary);
+  const match = ARBITRARY_RADIUS.exec(unqualified);
+  if (!match) return undefined;
+
+  const [, prefix, rawValue] = match;
+  const value = rawValue.trim();
+  const variable = CANONICAL_RADIUS_VARIABLE.exec(value);
+  const token = variable?.[1] ?? radiusNameByValue.get(value);
+  if (!token || !(token in borderRadius)) return undefined;
+
+  return `${variants}${prefix}-${token}`;
+}
+
+export const noTokenCategoryBypass = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow arbitrary radius values when the generated design system provides an exact utility",
+    },
+    schema: [],
+    messages: {
+      canonicalTokenUtility:
+        "Replace {{utility}} with the generated design-system utility {{replacement}}.",
+    },
+  },
+  create(context) {
+    return tokenUtilityVisitors(context, (node, utility) => {
+      const replacement = canonicalRadiusReplacement(utility);
+      if (!replacement) return;
+      context.report({
+        node,
+        messageId: "canonicalTokenUtility",
+        data: { replacement, utility },
+      });
+    });
+  },
+};

package/dist/eslint/rules/no-ui-src-import.js

@@ -0,0 +1,10 @@
+import { bannedSourceRootMatcher, createSrcImportRule } from "./src-import-boundary.js";
+
+/** @type {import('eslint').Rule.RuleModule} */
+export const noUiSrcImport = createSrcImportRule({
+  description: "Disallow deep imports from @nadicodeai/ui/src/* in consumer apps",
+  bannedMessage: "Import @nadicodeai/ui through package exports only, not {{value}}.",
+  // The package sits at a repo-root dir literally named `@nadicodeai/ui/`, so
+  // relative paths carry the full `@nadicodeai/ui/src` marker too.
+  isBanned: bannedSourceRootMatcher("@nadicodeai/ui/src"),
+});

package/dist/eslint/rules/no-unpinned-vercel-functions-import.js

@@ -0,0 +1,100 @@
+const PACKAGE_NAME = "@vercel/functions";
+
+// Third-party helpers stay behind owned, single-purpose capability seams. Pin
+// the full workspace-relative suffix so a same-named file in another workspace
+// cannot acquire a platform dependency by shadowing an allowed module.
+const ALLOWED_IMPORTS = new Map([
+  ["portal/src/lib/server/db.ts", new Set(["attachDatabasePool"])],
+  ["portal/src/lib/server/deferred-work.ts", new Set(["waitUntil"])],
+]);
+
+function matchesPackage(value) {
+  return (
+    typeof value === "string" && (value === PACKAGE_NAME || value.startsWith(`${PACKAGE_NAME}/`))
+  );
+}
+
+function allowedSymbolsFor(filename) {
+  const normalized = filename.replaceAll("\\", "/");
+  for (const [suffix, symbols] of ALLOWED_IMPORTS) {
+    if (normalized.endsWith(suffix)) {
+      return symbols;
+    }
+  }
+  return undefined;
+}
+
+function importedName(specifier) {
+  if (specifier.type !== "ImportSpecifier") {
+    return undefined;
+  }
+  return specifier.imported.type === "Identifier"
+    ? specifier.imported.name
+    : specifier.imported.value;
+}
+
+/** @type {import('eslint').Rule.RuleModule} */
+export const noUnpinnedVercelFunctionsImport = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Confine @vercel/functions imports to pinned edge modules and symbols",
+    },
+    messages: {
+      banned:
+        "@vercel/functions duck-types its inputs and ipAddress() crashed production once (docs/solutions/portal-device-authorize-vercel-headers-crash.md). Its use is pinned per module and per symbol; amend the allowlist deliberately or keep the dependency out (found {{value}}).",
+    },
+    schema: [],
+  },
+  create(context) {
+    const allowedSymbols = allowedSymbolsFor(context.filename);
+
+    function report(node, value) {
+      context.report({
+        node,
+        messageId: "banned",
+        data: { value },
+      });
+    }
+
+    return {
+      ImportDeclaration(node) {
+        if (!matchesPackage(node.source.value)) {
+          return;
+        }
+
+        const importsOnlyPinnedSymbols =
+          allowedSymbols &&
+          node.specifiers.length > 0 &&
+          node.specifiers.every((specifier) => {
+            const name = importedName(specifier);
+            return name !== undefined && allowedSymbols.has(name);
+          });
+
+        if (!importsOnlyPinnedSymbols) {
+          report(node, node.source.value);
+        }
+      },
+      // Everything except a static import is judged by the quoted reference
+      // itself, whatever expression carries it: dynamic import(), require in
+      // any callee shape (bare, module.require, createRequire), export ...
+      // from, or a bare string that smuggles the specifier to a loader. Only
+      // static named imports can prove which symbols they bind, so only they
+      // get the allowlist path above.
+      Literal(node) {
+        if (!matchesPackage(node.value)) {
+          return;
+        }
+        if (node.parent.type === "ImportDeclaration") {
+          return;
+        }
+        report(node, node.value);
+      },
+      TemplateLiteral(node) {
+        if (node.expressions.length === 0 && matchesPackage(node.quasis[0]?.value.cooked)) {
+          report(node, node.quasis[0].value.cooked);
+        }
+      },
+    };
+  },
+};