@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/eslint/rules/no-hand-built-tile.js

@@ -0,0 +1,41 @@
+import { findBelow, renderedImports, walk } from "./rendered-import.js";
+
+const FIELD_LABEL = "FieldLabel";
+const FIELD = "Field";
+const CONTROLS = new Set(["RadioGroupItem", "Checkbox"]);
+
+export const noHandBuiltTile = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A bordered selectable tile is a ChoiceboxGroup, never a FieldLabel around a Field with a radio or a checkbox.",
+    },
+    schema: [],
+    messages: {
+      "hand-built-tile":
+        "A bordered selectable tile is a ChoiceboxGroup with ChoiceboxGroupItem. Options without a description are a plain RadioGroup with a Label for each.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const { visitorKeys } = context.sourceCode;
+    const isRendered = (name) => (node) =>
+      node.type === "JSXElement" && name(importOf(node.openingElement.name)?.name);
+    const isField = isRendered((name) => name === FIELD);
+    const isControl = isRendered((name) => CONTROLS.has(name));
+
+    return {
+      JSXElement(node) {
+        if (importOf(node.openingElement.name)?.name !== FIELD_LABEL) return;
+        let handBuilt = false;
+        walk(node, visitorKeys, (child) => {
+          if (!isField(child) || !findBelow(child, visitorKeys, isControl)) return true;
+          handBuilt = true;
+          return "stop";
+        });
+        if (handBuilt) context.report({ node: node.openingElement, messageId: "hand-built-tile" });
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-hand-formatted-date.js

@@ -0,0 +1,87 @@
+/*
+ * Standard tool checked first: `no-restricted-syntax` can match a member named
+ * `toLocaleDateString` or `new Intl.DateTimeFormat`, but `toLocaleString` is
+ * also how a number is written, so it is a date only when its options object
+ * names a date or time part, which a selector cannot read. It reports only a
+ * date written into markup (inside a JSX expression of the same function): a
+ * helper that returns a chart label, a period name or an email's text has no
+ * element to put a RecordTime in.
+ */
+const ALWAYS_DATES = new Set(["toLocaleDateString", "toLocaleTimeString"]);
+const DATE_PARTS = new Set([
+  "dateStyle",
+  "timeStyle",
+  "weekday",
+  "era",
+  "year",
+  "month",
+  "day",
+  "dayPeriod",
+  "hour",
+  "minute",
+  "second",
+  "fractionalSecondDigits",
+  "timeZoneName",
+  "hour12",
+  "hourCycle",
+]);
+
+const isIntlDateTimeFormat = (callee) =>
+  callee.type === "MemberExpression" &&
+  !callee.computed &&
+  callee.object.type === "Identifier" &&
+  callee.object.name === "Intl" &&
+  callee.property.name === "DateTimeFormat";
+
+const namesADatePart = (options) =>
+  options?.type === "ObjectExpression" &&
+  options.properties.some(
+    (property) =>
+      property.type === "Property" &&
+      !property.computed &&
+      property.key.type === "Identifier" &&
+      DATE_PARTS.has(property.key.name),
+  );
+
+const FUNCTIONS = new Set(["FunctionDeclaration", "FunctionExpression", "ArrowFunctionExpression"]);
+
+function writtenIntoMarkup(node) {
+  for (let current = node.parent; current; current = current.parent) {
+    if (current.type === "JSXExpressionContainer") return true;
+    if (FUNCTIONS.has(current.type)) return false;
+  }
+  return false;
+}
+
+export const noHandFormattedDate = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "An app shows a moment through RecordTime, never a hand-formatted date.",
+    },
+    schema: [],
+    messages: {
+      "hand-formatted-date":
+        "Show a moment with RecordTime from @nadicodeai/ui/components/record-time: it reads relative within a week, then the date, in the viewer's zone and language, with the exact time in a card. A date formatted by hand drifts from the other screens and shows the server's zone.",
+    },
+  },
+  create(context) {
+    function check(node) {
+      if (!writtenIntoMarkup(node)) return;
+      const { callee } = node;
+      if (isIntlDateTimeFormat(callee)) {
+        context.report({ node, messageId: "hand-formatted-date" });
+        return;
+      }
+      if (callee.type !== "MemberExpression" || callee.computed) return;
+      const name = callee.property.name;
+      if (
+        ALWAYS_DATES.has(name) ||
+        (name === "toLocaleString" && namesADatePart(node.arguments[1]))
+      ) {
+        context.report({ node, messageId: "hand-formatted-date" });
+      }
+    }
+    return { CallExpression: check, NewExpression: check };
+  },
+};

package/dist/eslint/rules/no-hand-stacked-avatars.js

@@ -0,0 +1,67 @@
+import { openingElementClassUtilities } from "./jsx-class-utility.js";
+import { renderedImports } from "./rendered-import.js";
+
+const AVATAR = "Avatar";
+const OVERLAP = /^-(?:space-x-|ml-|ms-|mx-)/;
+
+const hasOverlapClass = (node, context) =>
+  openingElementClassUtilities(node, context).some((utility) =>
+    OVERLAP.test(utility.slice(utility.lastIndexOf(":") + 1).replace(/^!|!$/g, "")),
+  );
+
+function returnedElement(callback) {
+  if (callback?.type !== "ArrowFunctionExpression" && callback?.type !== "FunctionExpression") {
+    return null;
+  }
+  if (callback.body.type !== "BlockStatement") return callback.body;
+  return callback.body.body.find((statement) => statement.type === "ReturnStatement")?.argument;
+}
+
+export const noHandStackedAvatars = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Stacked avatars are one AvatarGroup, never sibling Avatars or an overlap written on a parent or an Avatar.",
+    },
+    schema: [],
+    messages: {
+      "hand-stacked-avatars":
+        "Stacked avatars are one <AvatarGroup members={...} label={...} />, which owns the overlap, the order, the +N count and the group's label.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const reported = new WeakSet();
+    const isAvatar = (node) =>
+      node?.type === "JSXElement" && importOf(node.openingElement.name)?.name === AVATAR;
+
+    function report(avatar) {
+      if (reported.has(avatar)) return;
+      reported.add(avatar);
+      context.report({ node: avatar.openingElement, messageId: "hand-stacked-avatars" });
+    }
+
+    return {
+      JSXElement(node) {
+        if (isAvatar(node) && hasOverlapClass(node.openingElement, context)) report(node);
+        const avatars = node.children.filter(isAvatar);
+        if (avatars.length >= 2) report(avatars[1]);
+      },
+      JSXFragment(node) {
+        const avatars = node.children.filter(isAvatar);
+        if (avatars.length >= 2) report(avatars[1]);
+      },
+      CallExpression(node) {
+        const { callee, parent } = node;
+        const isMap =
+          callee.type === "MemberExpression" && !callee.computed && callee.property.name === "map";
+        if (!isMap) return;
+        if (parent.type !== "JSXExpressionContainer" || parent.parent.type !== "JSXElement") return;
+        if (!hasOverlapClass(parent.parent.openingElement, context)) return;
+        const returned = returnedElement(node.arguments[0]);
+        if (isAvatar(returned)) report(returned);
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-nested-collapse.js

@@ -0,0 +1,60 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` descendant selector
+ * matches by element name, so it cannot tell the package's Accordion from a
+ * local component of the same name, a renamed import, or a Disclosure's
+ * `label` (which is not its content) from its children.
+ */
+import { packageModules, partOf, renderedImports } from "./rendered-import.js";
+
+const PARTS = [
+  ["accordion", "Accordion"],
+  ["accordion", "AccordionContent"],
+  ["collapsible", "Collapsible"],
+  ["collapsible", "CollapsibleContent"],
+  ["disclosure", "Disclosure"],
+];
+
+const PART_EXPORTERS = new Map(
+  PARTS.map(([module, part]) => [
+    part,
+    [...packageModules(module), `@/components/${module}`].map((from) => ({ from, part })),
+  ]),
+);
+
+const COLLAPSES = new Set(["Accordion", "Collapsible", "Disclosure"]);
+const COLLAPSED_CONTENT = new Set(["AccordionContent", "CollapsibleContent", "Disclosure"]);
+
+export const noNestedCollapse = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "An Accordion, Collapsible or Disclosure never sits in another's content.",
+    },
+    schema: [],
+    messages: {
+      "nested-collapse":
+        "A collapse never sits in another: two levels hide too much and break the keyboard path. Make the inner one a section of the page, or flatten the outer.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const partRendered = (element) =>
+      partOf(importOf(element.openingElement.name), PART_EXPORTERS, context.filename);
+
+    return {
+      JSXElement(node) {
+        if (!COLLAPSES.has(partRendered(node))) return;
+        let child = node;
+        for (let ancestor = node.parent; ancestor; ancestor = ancestor.parent) {
+          const holdsAsContent =
+            ancestor.type === "JSXElement" && ancestor.children.includes(child);
+          if (holdsAsContent && COLLAPSED_CONTENT.has(partRendered(ancestor))) {
+            context.report({ node, messageId: "nested-collapse" });
+            return;
+          }
+          child = ancestor;
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-search-in-form.js

@@ -0,0 +1,47 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` descendant selector
+ * (`JSXElement[openingElement.name.name=/Form$/] JSXOpeningElement`) matches by
+ * element name, so it cannot tell the package's CollectionSearch from a local
+ * component of the same name, nor a renamed import.
+ */
+import { packageModules, partOf, renderedImports, writtenName } from "./rendered-import.js";
+
+const COLLECTION_SEARCH = new Map([
+  [
+    "CollectionSearch",
+    packageModules("collection-search").map((from) => ({ from, part: "CollectionSearch" })),
+  ],
+]);
+
+const isForm = (element) => {
+  const name = writtenName(element.openingElement.name);
+  return name === "form" || name?.endsWith("Form") === true;
+};
+
+export const noSearchInForm = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "A collection's search sits in its toolbar, never inside a form that saves.",
+    },
+    schema: [],
+    messages: {
+      "search-in-form":
+        "A search box does not belong in a form that saves something; a collection's search sits in its toolbar.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    return {
+      JSXOpeningElement(node) {
+        if (partOf(importOf(node.name), COLLECTION_SEARCH, context.filename) === null) return;
+        for (let ancestor = node.parent.parent; ancestor; ancestor = ancestor.parent) {
+          if (ancestor.type === "JSXElement" && isForm(ancestor)) {
+            context.report({ node, messageId: "search-in-form" });
+            return;
+          }
+        }
+      },
+    };
+  },
+};

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

@@ -21,9 +21,8 @@ import {
   skipsPackageOwnedPrimitive,
 } from "./jsx-class-utility.js";
 
-// These exact Portal adapters forward props to package primitives. Card
-// chooses its typed surface default; Table owns only structural geometry.
-// Their other exports are direct reexports.
+// This exact Portal adapter forwards props to package primitives. Card
+// chooses its typed surface default. Its other exports are direct reexports.
 const portalCardExports = new Set([
   "Card",
   "CardHeader",
@@ -32,16 +31,6 @@ const portalCardExports = new Set([
   "CardAction",
   "CardContent",
 ]);
-const portalTableExports = new Set([
-  "Table",
-  "TableHead",
-  "TableCell",
-  "TableBody",
-  "TableCaption",
-  "TableFooter",
-  "TableHeader",
-  "TableRow",
-]);
 
 function primitiveModule(source, filename) {
   if (source.startsWith("@nadicodeai/ui/components/")) {
@@ -57,9 +46,6 @@ function primitiveModule(source, filename) {
   if (source === "@/components/kit/card" || resolved === `${portalSource}/components/kit/card`) {
     return { card: true, exports: portalCardExports };
   }
-  if (source === "@/components/kit/table" || resolved === `${portalSource}/components/kit/table`) {
-    return { card: false, exports: portalTableExports };
-  }
   return undefined;
 }
 

package/dist/eslint/rules/no-shell-prompt-in-snippet.js

@@ -0,0 +1,74 @@
+/*
+ * A Snippet draws its own prompt and copies only the command, so a `$ ` or `> `
+ * typed into `text` shows twice and is on the clipboard.
+ *
+ * Standard tool checked first: `no-restricted-syntax` can match a string
+ * starting with `$ `, but not whether it is the `text` of the package's Snippet
+ * (an import binding, so a renamed or local `Snippet` is judged correctly),
+ * and it cannot read the items of an array or exempt `prompt={false}`.
+ */
+import { partOf, renderedImports, staticAttribute } from "./rendered-import.js";
+
+const SNIPPET = new Map([
+  [
+    "Snippet",
+    [
+      { from: "@nadicodeai/ui/components/snippet", part: "Snippet" },
+      { from: "@nadicodeai/ui", part: "Snippet" },
+    ],
+  ],
+]);
+const OWNER_FILE = "packages/ui/src/components/snippet.tsx";
+
+const startsWithPrompt = (text) => text === "$" || text.startsWith("$ ") || text.startsWith("> ");
+
+function writtenText(node) {
+  // oxlint-disable-next-line anti-slop/no-runtime-typeof -- ESTree types Literal.value as string | number | boolean | RegExp | bigint | null; only typeof picks the string.
+  if (node.type === "Literal") return typeof node.value === "string" ? node.value : null;
+  if (node.type === "TemplateLiteral" && node.expressions.length === 0) {
+    return node.quasis[0].value.cooked;
+  }
+  return null;
+}
+
+function promptedItems(value) {
+  if (!value) return [];
+  const written = value.type === "JSXExpressionContainer" ? value.expression : value;
+  const items = written.type === "ArrayExpression" ? written.elements : [written];
+  return items.filter((item) => {
+    if (!item || item.type === "SpreadElement") return false;
+    const text = writtenText(item);
+    return text !== null && startsWithPrompt(text);
+  });
+}
+
+export const noShellPromptInSnippet = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "A Snippet's text never starts with the prompt the Snippet draws.",
+    },
+    schema: [],
+    messages: {
+      "typed-prompt":
+        'The Snippet draws the prompt. Remove the leading "$ " from text, or pass prompt={false} when the value is not a shell command.',
+    },
+  },
+  create(context) {
+    if (context.filename.replaceAll("\\", "/").endsWith(`/${OWNER_FILE}`)) return {};
+    const importOf = renderedImports(context);
+
+    return {
+      JSXOpeningElement(node) {
+        if (partOf(importOf(node.name), SNIPPET, context.filename) !== "Snippet") return;
+        if (staticAttribute(node, "prompt") === false) return;
+        const text = node.attributes.find(
+          (attribute) => attribute.type === "JSXAttribute" && attribute.name.name === "text",
+        );
+        for (const item of promptedItems(text?.value)) {
+          context.report({ node: item, messageId: "typed-prompt" });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-stock-error-words.js

@@ -0,0 +1,56 @@
+/*
+ * Standard tool checked first: `no-restricted-syntax` matches a string by one
+ * regular expression per selector and would need one entry per phrase and per
+ * node kind (a literal, a template's text, JSX text); one rule lists the
+ * phrases once and reads them in the catalogue files only, by path.
+ */
+import { literalText } from "./literal-text.js";
+
+const PHRASES = [
+  ["Something went wrong", /\bsomething went wrong\b/i],
+  ["Unable to", /\bunable to\b/i],
+  ["Heads up", /\bheads[ -]up\b/i],
+  ["please", /\bplease\b/i],
+  ["successfully", /\bsuccessfully\b/i],
+];
+
+const CATALOGUE_FILE = /(?:^|\/)(?:copy|i18n)\/|(?:^|\/)(?:words|messages)\.[jt]s$/;
+const TEST_FILE = /\.test\.[jt]sx?$/;
+
+export const noStockErrorWords = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        'A catalogue message never says "Something went wrong", "Unable to", "Heads up", "please" or "successfully".',
+    },
+    schema: [],
+    messages: {
+      "stock-phrase":
+        'A catalogue message does not say "{{phrase}}": name what happened to which record and what the person can do, in the active voice ("Couldn\'t pause Discord. The Gateway didn\'t answer."), with no please and no "successfully".',
+    },
+  },
+  create(context) {
+    const filename = context.filename.replaceAll("\\", "/");
+    if (!CATALOGUE_FILE.test(filename) || TEST_FILE.test(filename)) return {};
+
+    function check(node, text) {
+      if (text === null) return;
+      for (const [phrase, pattern] of PHRASES) {
+        if (pattern.test(text))
+          context.report({ node, messageId: "stock-phrase", data: { phrase } });
+      }
+    }
+
+    return {
+      Literal(node) {
+        if (node.parent.type === "ImportDeclaration" || node.parent.type === "ExportAllDeclaration")
+          return;
+        check(node, literalText(node));
+      },
+      TemplateElement(node) {
+        check(node, node.value.cooked);
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-tooltip-around-labelled-field.js

@@ -0,0 +1,72 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match a
+ * `Field` descendant of a `Tooltip` by element name, but not that both are
+ * imports from the design system, nor reach a field named in the `render`
+ * element of a trigger, so it would also refuse a product's own `Input`.
+ */
+import { renderedImports, walk } from "./rendered-import.js";
+
+const WRAPPERS = new Set(["Tooltip", "TooltipTrigger", "HoverCard", "HoverCardTrigger"]);
+const POPUPS = new Set(["TooltipContent", "HoverCardContent"]);
+const FIELDS = new Set([
+  "Input",
+  "Textarea",
+  "ClearableInput",
+  "CollectionSearch",
+  "Select",
+  "SelectTrigger",
+  "NativeSelect",
+  "Combobox",
+  "ComboboxInput",
+  "Checkbox",
+  "Switch",
+  "Label",
+  "FieldLabel",
+  "SettingsField",
+]);
+
+const FROM_DESIGN_SYSTEM = /^(@nadicodeai\/ui(\/|$)|@\/|\.)/;
+
+export const noTooltipAroundLabelledField = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A Tooltip or HoverCard never wraps a field: put the help on an icon button beside it.",
+    },
+    schema: [],
+    messages: {
+      "field-tooltip":
+        "Do not put a Tooltip or HoverCard on a field: its text becomes a second, hidden label. Put the help on an icon button beside the field.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const exportOf = (elementName) => {
+      const imported = importOf(elementName);
+      return imported && FROM_DESIGN_SYSTEM.test(imported.source) ? imported.name : null;
+    };
+
+    function wrapsAField(element) {
+      let found = false;
+      walk(element, context.sourceCode.visitorKeys, (child) => {
+        if (child.type !== "JSXElement") return true;
+        const name = exportOf(child.openingElement.name);
+        if (POPUPS.has(name)) return false;
+        if (!FIELDS.has(name)) return true;
+        found = true;
+        return "stop";
+      });
+      return found;
+    }
+
+    return {
+      JSXElement(node) {
+        if (!WRAPPERS.has(exportOf(node.openingElement.name))) return;
+        if (wrapsAField(node)) {
+          context.report({ node: node.openingElement, messageId: "field-tooltip" });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/no-weight-class-on-strong-in-type-role.js

@@ -0,0 +1,57 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match a
+ * `strong` whose own className holds a weight class, but cannot ask whether some
+ * element above it carries a type role, so it would refuse every weighted
+ * `<strong>` or none. This rule reads both classNames, ancestors included, in
+ * one file.
+ */
+import { openingElementClassUtilities } from "./jsx-class-utility.js";
+
+const STRONG_TAGS = new Set(["strong", "b"]);
+const WEIGHT_CLASS = /^font-(medium|semibold|bold)$/;
+const TYPE_ROLE_CLASS = /^(nc-type-|text-(display-|heading-|body-|label|caption))/;
+
+const baseUtility = (utility) => utility.slice(utility.lastIndexOf(":") + 1).replace(/^!/, "");
+
+const hasUtility = (element, context, pattern) =>
+  openingElementClassUtilities(element, context).some((utility) =>
+    pattern.test(baseUtility(utility)),
+  );
+
+function hasTypeRoleAncestor(element, context) {
+  for (let ancestor = element.parent?.parent; ancestor; ancestor = ancestor.parent) {
+    if (
+      ancestor.type === "JSXElement" &&
+      hasUtility(ancestor.openingElement, context, TYPE_ROLE_CLASS)
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+export const noWeightClassOnStrongInTypeRole = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A type role sets the weight of a nested <strong>; the element carries no weight class.",
+    },
+    schema: [],
+    messages: {
+      "weight-on-strong":
+        "The type role sets the weight of a nested <strong>: 550 in copy, 500 in labels and headings. Remove the font-weight class from the <strong>.",
+    },
+  },
+  create(context) {
+    return {
+      JSXOpeningElement(node) {
+        if (node.name.type !== "JSXIdentifier" || !STRONG_TAGS.has(node.name.name)) return;
+        if (!hasUtility(node, context, WEIGHT_CLASS)) return;
+        if (hasTypeRoleAncestor(node, context)) {
+          context.report({ node, messageId: "weight-on-strong" });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/one-submenu-level.js

@@ -0,0 +1,43 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` descendant selector
+ * matches by element name, so it cannot tell the package's
+ * `DropdownMenuSub` from a local component of the same name or follow a
+ * renamed import.
+ */
+import { renderedImports } from "./rendered-import.js";
+
+const SUBMENUS = new Set(["DropdownMenuSub", "ContextMenuSub", "MenubarSub"]);
+const FROM_DESIGN_SYSTEM = /^(@nadicodeai\/ui(\/|$)|@\/|\.)/;
+
+export const oneSubmenuLevel = {
+  meta: {
+    type: "problem",
+    docs: { description: "A menu has one level of submenu, never a submenu inside a submenu." },
+    schema: [],
+    messages: {
+      "nested-submenu":
+        "A menu opens one submenu deep. A third level hides commands behind a pointer path that is easy to lose: flatten the inner submenu into a group of the first, or move it to its own menu.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const isSubmenu = (element) => {
+      const imported = importOf(element.openingElement.name);
+      return (
+        imported !== null && SUBMENUS.has(imported.name) && FROM_DESIGN_SYSTEM.test(imported.source)
+      );
+    };
+
+    return {
+      JSXElement(node) {
+        if (!isSubmenu(node)) return;
+        for (let ancestor = node.parent; ancestor; ancestor = ancestor.parent) {
+          if (ancestor.type === "JSXElement" && isSubmenu(ancestor)) {
+            context.report({ node: node.openingElement, messageId: "nested-submenu" });
+            return;
+          }
+        }
+      },
+    };
+  },
+};