@nadicodeai/ui 12.1.101 → 12.1.103

package/dist/eslint/rules/button-icon-slot.js

@@ -0,0 +1,102 @@
+/*
+ * Standard tool checked first: the `repo/shadcn-composition` selector in the
+ * root config (`Button JSXOpeningElement[name.name=/Icon$/]` without
+ * `data-icon`) matches by element name under any `Button`, so it cannot tell a
+ * text Button from an icon-only one (the size decides where an icon goes), nor
+ * a `Button` imported from `@nadicodeai/ui` from a local one, nor an icon bound
+ * to an icon module from a component that only ends in `Icon`.
+ */
+import {
+  PACKAGE_BARREL,
+  partOf,
+  renderedImports,
+  sourceMatches,
+  staticAttribute,
+  writtenName,
+} from "./rendered-import.js";
+
+const BUTTONS = new Map(
+  ["Button", "ButtonLink"].map((name) => [
+    name,
+    ["@nadicodeai/ui/components/button", PACKAGE_BARREL].map((from) => ({ from, part: name })),
+  ]),
+);
+
+const TEXT_SIZES = new Set(["default", "xs", "sm", "lg"]);
+
+const isAttribute = (attribute, name) =>
+  attribute.type === "JSXAttribute" && attribute.name.name === name;
+
+export const buttonIconSlot = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A text Button takes its icon as prefix or suffix; an icon-only Button takes the icon as its child with no data-icon.",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          iconModules: { type: "array", items: { type: "string" }, uniqueItems: true },
+        },
+        additionalProperties: false,
+      },
+    ],
+    defaultOptions: [{ iconModules: ["lucide-react", "@nadicodeai/ui/components/house-icons"] }],
+    messages: {
+      "icon-slot":
+        'Pass an icon in a text Button as prefix={<Icon />} or suffix={<Icon />}; an icon-only Button (size="icon") takes the icon as its child.',
+    },
+  },
+  create(context) {
+    const [{ iconModules }] = context.options;
+    const importOf = renderedImports(context);
+    const isButton = (openingElement) =>
+      partOf(importOf(openingElement.name), BUTTONS, context.filename) !== null;
+
+    const isIcon = (openingElement) => {
+      const imported = importOf(openingElement.name);
+      if (
+        imported &&
+        iconModules.some((module) => sourceMatches(imported.source, module, context.filename))
+      ) {
+        return true;
+      }
+      return /Icon$/.test(writtenName(openingElement.name) ?? "");
+    };
+
+    function enclosingButton(node) {
+      for (let current = node.parent.parent; current; current = current.parent) {
+        if (current.type === "JSXAttribute") return null;
+        if (current.type === "JSXElement" && isButton(current.openingElement)) {
+          return current.openingElement;
+        }
+      }
+      return null;
+    }
+
+    function takesTextSize(button) {
+      if (button.attributes.some((attribute) => attribute.type === "JSXSpreadAttribute")) {
+        return false;
+      }
+      if (!button.attributes.some((attribute) => isAttribute(attribute, "size"))) return true;
+      return TEXT_SIZES.has(staticAttribute(button, "size"));
+    }
+
+    return {
+      JSXOpeningElement(node) {
+        if (node.parent.type !== "JSXElement") return;
+        const carriesDataIcon = node.attributes.some((attribute) =>
+          isAttribute(attribute, "data-icon"),
+        );
+        if (!carriesDataIcon && !isIcon(node)) return;
+        const button = enclosingButton(node);
+        if (!button) return;
+        if (carriesDataIcon || takesTextSize(button)) {
+          context.report({ node, messageId: "icon-slot" });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/button-link-for-navigation.js

@@ -0,0 +1,146 @@
+/*
+ * Standard tool checked first: `no-restricted-imports` can hold `buttonVariants`
+ * back, but not tell the Buzz tree's own `buttonVariants` from the package's, and
+ * a `no-restricted-syntax` selector cannot follow a renamed `Button` import to
+ * the `onClick` and `render` it reads.
+ */
+import { PACKAGE_BARREL, partOf, renderedImports, writtenName } from "./rendered-import.js";
+
+const BUTTON_MODULES = ["@nadicodeai/ui/components/button", PACKAGE_BARREL];
+
+const BUTTON = new Map([["Button", BUTTON_MODULES.map((from) => ({ from, part: "Button" }))]]);
+
+const LINK_ELEMENTS = new Set(["a", "Link", "NextLink"]);
+const ROUTER_METHODS = new Set(["push", "replace"]);
+const FUNCTIONS = new Set(["FunctionExpression", "ArrowFunctionExpression"]);
+
+function variantsBindings(context) {
+  const names = new Set();
+  const namespaces = new Set();
+  for (const statement of context.sourceCode.ast.body) {
+    if (statement.type !== "ImportDeclaration" || statement.importKind === "type") continue;
+    if (!BUTTON_MODULES.includes(statement.source.value)) continue;
+    for (const specifier of statement.specifiers) {
+      if (specifier.importKind === "type") continue;
+      if (specifier.type === "ImportNamespaceSpecifier") namespaces.add(specifier.local.name);
+      else if (
+        specifier.type === "ImportSpecifier" &&
+        (specifier.imported.name ?? specifier.imported.value) === "buttonVariants"
+      ) {
+        names.add(specifier.local.name);
+      }
+    }
+  }
+  return (callee) => {
+    if (callee.type === "Identifier") return names.has(callee.name);
+    return (
+      callee.type === "MemberExpression" &&
+      !callee.computed &&
+      callee.object.type === "Identifier" &&
+      namespaces.has(callee.object.name) &&
+      callee.property.name === "buttonVariants"
+    );
+  };
+}
+
+const unwrap = (node) => {
+  if (node.type === "AwaitExpression") return unwrap(node.argument);
+  if (node.type === "UnaryExpression" && node.operator === "void") return unwrap(node.argument);
+  if (node.type === "ChainExpression") return unwrap(node.expression);
+  return node;
+};
+
+const isLocationTarget = (node) => {
+  if (node.type !== "MemberExpression" || node.computed) return false;
+  const { object, property } = node;
+  if (object.type === "Identifier") {
+    if (object.name === "window") return property.name === "location";
+    return object.name === "location" && property.name === "href";
+  }
+  return (
+    isLocationTarget(object) && object.property.name === "location" && property.name === "href"
+  );
+};
+
+function goesToAnAddress(expression) {
+  const node = unwrap(expression);
+  if (node.type === "AssignmentExpression") return isLocationTarget(node.left);
+  if (node.type !== "CallExpression") return false;
+  const { callee } = node;
+  if (callee.type === "Identifier") return callee.name === "navigate";
+  return (
+    callee.type === "MemberExpression" &&
+    !callee.computed &&
+    callee.object.type === "Identifier" &&
+    callee.object.name === "router" &&
+    ROUTER_METHODS.has(callee.property.name)
+  );
+}
+
+function onlyGoesToAnAddress(fn) {
+  if (fn.body.type !== "BlockStatement") return goesToAnAddress(fn.body);
+  const { body } = fn.body;
+  return (
+    body.length > 0 &&
+    body.every(
+      (statement) =>
+        statement.type === "ExpressionStatement" && goesToAnAddress(statement.expression),
+    )
+  );
+}
+
+const attributeValue = (openingElement, attributeName) => {
+  const attribute = openingElement.attributes.find(
+    (candidate) => candidate.type === "JSXAttribute" && candidate.name.name === attributeName,
+  );
+  return attribute?.value?.type === "JSXExpressionContainer" ? attribute.value.expression : null;
+};
+
+const isLinkElement = (node) =>
+  node?.type === "JSXElement" && LINK_ELEMENTS.has(writtenName(node.openingElement.name) ?? "");
+
+function enclosingAttribute(node) {
+  for (let current = node.parent; current; current = current.parent) {
+    if (current.type === "JSXAttribute") return current;
+  }
+  return null;
+}
+
+export const buttonLinkForNavigation = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "A control that goes to an address is a ButtonLink; a Button runs a command.",
+    },
+    schema: [],
+    messages: {
+      "navigating-button":
+        "A control that goes to an address is a ButtonLink; a Button runs a command.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const isButtonVariants = variantsBindings(context);
+    return {
+      CallExpression(node) {
+        if (!isButtonVariants(node.callee)) return;
+        const attribute = enclosingAttribute(node);
+        if (attribute?.name.name !== "className") return;
+        if (isLinkElement(attribute.parent.parent)) {
+          context.report({ node, messageId: "navigating-button" });
+        }
+      },
+      JSXOpeningElement(node) {
+        if (partOf(importOf(node.name), BUTTON, context.filename) !== "Button") return;
+        const onClick = attributeValue(node, "onClick");
+        if (onClick && FUNCTIONS.has(onClick.type) && onlyGoesToAnAddress(onClick)) {
+          context.report({ node, messageId: "navigating-button" });
+          return;
+        }
+        if (isLinkElement(attributeValue(node, "render"))) {
+          context.report({ node, messageId: "navigating-button" });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/button-no-aria-label-with-text.js

@@ -0,0 +1,75 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match
+ * `JSXElement[openingElement.name.name='Button']:has(JSXAttribute[name.name='aria-label'])`,
+ * but not that the element is the package's Button rather than a local one with
+ * the same name, nor that a child is text rather than an icon, nor the `size`
+ * that makes a non-literal child an icon-only label. Those need the import
+ * binding and the children read together.
+ */
+import { PACKAGE_BARREL, partOf, renderedImports, staticAttribute } from "./rendered-import.js";
+
+const BUTTONS = new Map(
+  ["Button", "ButtonLink"].map((name) => [
+    name,
+    ["@nadicodeai/ui/components/button", PACKAGE_BARREL].map((from) => ({ from, part: name })),
+  ]),
+);
+
+const NAMING_ATTRIBUTES = new Set(["aria-label", "aria-labelledby"]);
+
+const namesItself = (openingElement) =>
+  openingElement.attributes.some(
+    (attribute) => attribute.type === "JSXAttribute" && NAMING_ATTRIBUTES.has(attribute.name.name),
+  );
+
+const isIconSize = (openingElement) =>
+  String(staticAttribute(openingElement, "size") ?? "").startsWith("icon");
+
+function staticText(expression) {
+  if (expression.type === "Literal") {
+    // 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.
+    return typeof expression.value === "string" ? expression.value : null;
+  }
+  if (expression.type === "TemplateLiteral" && expression.expressions.length === 0) {
+    return expression.quasis[0].value.cooked;
+  }
+  return null;
+}
+
+function childText(child) {
+  if (child.type === "JSXText") return child.value.trim() === "" ? "none" : "visible";
+  if (child.type !== "JSXExpressionContainer") return "none";
+  const { expression } = child;
+  if (expression.type === "JSXEmptyExpression") return "none";
+  const text = staticText(expression);
+  if (text !== null) return text.trim() === "" ? "none" : "visible";
+  return expression.type === "Literal" ? "none" : "computed";
+}
+
+export const buttonNoAriaLabelWithText = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "A Button with visible text is named by its text, never by an aria-label.",
+    },
+    schema: [],
+    messages: {
+      "named-by-its-text":
+        "A Button with visible text is named by its text; remove aria-label. When the text alone does not name the target, use `accessibleName` on a PageCommand.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    return {
+      JSXElement(node) {
+        const { openingElement } = node;
+        if (!partOf(importOf(openingElement.name), BUTTONS, context.filename)) return;
+        if (!namesItself(openingElement)) return;
+        const kinds = node.children.map(childText);
+        const showsText =
+          kinds.includes("visible") || (kinds.includes("computed") && !isIconSize(openingElement));
+        if (showsText) context.report({ node: openingElement, messageId: "named-by-its-text" });
+      },
+    };
+  },
+};

package/dist/eslint/rules/button-type-roles-only-in-buttons.js

@@ -0,0 +1,83 @@
+/*
+ * Standard tool checked first: `no-restricted-syntax` can match a class token
+ * in a `className` literal (strict-design-system.js does), but not which file
+ * the token is in, so it cannot allow the files that render a button and refuse
+ * the rest, nor tell the small role's two files from the other four.
+ */
+
+const BUTTON_ROLE = /(?:^|:)!?(text-button(?:-lg|-xs)?|nc-type-button(?:-[a-z0-9]+)*)!?$/;
+const SMALL_ROLE = /-xs$/;
+const CLASS_FUNCTIONS = new Set(["cva", "cn"]);
+
+const inFiles = (filename, files) => {
+  const path = filename.replaceAll("\\", "/");
+  return files.some((file) => path === file || path.endsWith(`/${file}`));
+};
+
+const classSite = (node) => {
+  for (let current = node.parent; current; current = current.parent) {
+    if (current.type === "JSXAttribute") return current.name.name === "className";
+    if (
+      current.type === "CallExpression" &&
+      current.callee.type === "Identifier" &&
+      CLASS_FUNCTIONS.has(current.callee.name)
+    ) {
+      return true;
+    }
+  }
+  return false;
+};
+
+const isVariantKey = (node) => node.parent.type === "Property" && node.parent.key === node;
+
+export const buttonTypeRolesOnlyInButtons = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "The button type roles label a component that renders a button, in the files that render one.",
+    },
+    schema: [
+      {
+        type: "object",
+        properties: {
+          allow: { type: "array", items: { type: "string" }, uniqueItems: true },
+          allowSmall: { type: "array", items: { type: "string" }, uniqueItems: true },
+        },
+        additionalProperties: false,
+      },
+    ],
+    defaultOptions: [{ allow: [], allowSmall: [] }],
+    messages: {
+      "button-role":
+        "Button type roles label a component that renders a button. Use a body-* or label-* role for other text; text-button-xs is only for the small button inside a field.",
+    },
+  },
+  create(context) {
+    const [{ allow, allowSmall }] = context.options;
+    const inAllowed = inFiles(context.filename, allow);
+    const inSmallAllowed = inFiles(context.filename, allowSmall);
+
+    const refused = (value) =>
+      value
+        .split(/\s+/)
+        .map((utility) => BUTTON_ROLE.exec(utility)?.[1])
+        .filter(Boolean)
+        .some((role) => (SMALL_ROLE.test(role) ? !inSmallAllowed : !inAllowed));
+
+    function check(node, value) {
+      if (isVariantKey(node) || !classSite(node)) return;
+      if (refused(value)) context.report({ node, messageId: "button-role" });
+    }
+
+    return {
+      Literal(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 (typeof node.value === "string") check(node, node.value);
+      },
+      TemplateElement(node) {
+        check(node, node.value.cooked ?? node.value.raw);
+      },
+    };
+  },
+};

package/dist/eslint/rules/choice-control-has-a-name.js

@@ -0,0 +1,98 @@
+/*
+ * Standard tool checked first: `jsx-a11y/label-has-associated-control` checks a
+ * Label for a control, not a control for a name, and a `no-restricted-syntax`
+ * selector cannot tell that the package's Checkbox is meant rather than a local
+ * one, that a Label elsewhere in the file points at its id through `htmlFor`,
+ * or that a labelling ancestor wraps it. Those need the import bindings, the
+ * ancestors and the file's labels read together.
+ */
+import { packageModules, partOf, renderedImports, staticAttribute } from "./rendered-import.js";
+
+const partsIn = (module, names) =>
+  names.map((name) => [
+    name,
+    [...packageModules(module), `@/components/${module}`].map((from) => ({ from, part: name })),
+  ]);
+
+const CONTROLS = new Map([
+  ...partsIn("checkbox", ["Checkbox"]),
+  ...partsIn("switch", ["Switch"]),
+  ...partsIn("radio-group", ["RadioGroupItem"]),
+]);
+
+const LABELS = new Map([...partsIn("label", ["Label"]), ...partsIn("field", ["FieldLabel"])]);
+
+const NAMING_ANCESTORS = new Map([...LABELS, ...partsIn("settings-section", ["SettingsField"])]);
+
+const NAMING_ATTRIBUTES = new Set(["aria-label", "aria-labelledby"]);
+
+const findAttribute = (openingElement, name) =>
+  openingElement.attributes.find(
+    (attribute) => attribute.type === "JSXAttribute" && attribute.name.name === name,
+  );
+
+const hasSpread = (openingElement) =>
+  openingElement.attributes.some((attribute) => attribute.type === "JSXSpreadAttribute");
+
+export const choiceControlHasAName = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "A Checkbox, Switch or RadioGroupItem is named by an aria-label, an aria-labelledby, a Label with htmlFor, or a labelling ancestor.",
+    },
+    schema: [],
+    messages: {
+      unnamed:
+        "Name this control: give it an aria-label (a row's checkbox: Select <row name>), an aria-labelledby, or a Label with htmlFor.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const isPart = (parts) => (openingElement) =>
+      Boolean(partOf(importOf(openingElement.name), parts, context.filename));
+    const isControl = isPart(CONTROLS);
+    const isLabel = isPart(LABELS);
+    const isNamingAncestor = isPart(NAMING_ANCESTORS);
+
+    const reference = (openingElement, attributeName) => {
+      const attribute = findAttribute(openingElement, attributeName);
+      if (!attribute) return null;
+      const stated = staticAttribute(openingElement, attributeName);
+      if (stated !== undefined) return String(stated);
+      return attribute.value ? context.sourceCode.getText(attribute.value) : null;
+    };
+
+    const controls = [];
+    const pointedAt = new Set();
+
+    const hasNamingAncestor = (element) => {
+      for (let current = element.parent; current; current = current.parent) {
+        if (current.type === "JSXElement" && isNamingAncestor(current.openingElement)) return true;
+      }
+      return false;
+    };
+
+    return {
+      JSXElement(node) {
+        const { openingElement } = node;
+        if (isLabel(openingElement)) {
+          const target = reference(openingElement, "htmlFor");
+          if (target !== null) pointedAt.add(target);
+          return;
+        }
+        if (!isControl(openingElement)) return;
+        if (hasSpread(openingElement)) return;
+        if (openingElement.attributes.some((a) => NAMING_ATTRIBUTES.has(a.name?.name))) return;
+        if (hasNamingAncestor(node)) return;
+        controls.push({ node: openingElement, id: reference(openingElement, "id") });
+      },
+      "Program:exit"() {
+        for (const { node, id } of controls) {
+          if (id !== null && pointedAt.has(id)) continue;
+          context.report({ node, messageId: "unnamed" });
+        }
+      },
+    };
+  },
+};

package/dist/eslint/rules/choice-group-in-fieldset.js

@@ -0,0 +1,86 @@
+/*
+ * Standard tool checked first: a `no-restricted-syntax` selector can match a
+ * `RadioGroup` without a `FieldSet` ancestor, but not that the `FieldSet`
+ * holds a `FieldLegend`, nor that two `Checkbox` elements share a parent once
+ * each sits in its own `Field`, so it would miss the checkbox group.
+ */
+import { findBelow, renderedImports } from "./rendered-import.js";
+
+const FROM_DESIGN_SYSTEM = /^(@nadicodeai\/ui(\/|$)|@\/|\.)/;
+const ROW_WRAPPERS = new Set(["Field", "FieldContent", "FieldLabel", "Label"]);
+
+const isRepeater = (node) =>
+  (node.type === "ArrowFunctionExpression" || node.type === "FunctionExpression") &&
+  node.parent.type === "CallExpression" &&
+  node.parent.callee.type === "MemberExpression" &&
+  node.parent.callee.property.name === "map";
+
+export const choiceGroupInFieldset = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "A group of radios or checkboxes sits in a FieldSet with a FieldLegend.",
+    },
+    schema: [],
+    messages: {
+      "choice-group":
+        "A group of radios or checkboxes sits in a FieldSet with a FieldLegend, so the group is announced by its legend.",
+    },
+  },
+  create(context) {
+    const importOf = renderedImports(context);
+    const exportOf = (element) => {
+      const imported = importOf(element.openingElement.name);
+      return imported && FROM_DESIGN_SYSTEM.test(imported.source) ? imported.name : null;
+    };
+    const checkboxGroups = new Map();
+
+    function hasLegendedFieldSet(node) {
+      for (let ancestor = node.parent; ancestor; ancestor = ancestor.parent) {
+        if (ancestor.type !== "JSXElement" || exportOf(ancestor) !== "FieldSet") continue;
+        const legend = findBelow(
+          ancestor,
+          context.sourceCode.visitorKeys,
+          (child) => child.type === "JSXElement" && exportOf(child) === "FieldLegend",
+        );
+        if (legend) return true;
+      }
+      return false;
+    }
+
+    function reportUnlessGrouped(element) {
+      if (!hasLegendedFieldSet(element)) {
+        context.report({ node: element.openingElement, messageId: "choice-group" });
+      }
+    }
+
+    function recordCheckbox(element) {
+      let repeated = false;
+      let parent = element.parent;
+      while (parent) {
+        if (isRepeater(parent)) repeated = true;
+        const isRow = parent.type === "JSXElement" && ROW_WRAPPERS.has(exportOf(parent));
+        const isGroup = (parent.type === "JSXElement" || parent.type === "JSXFragment") && !isRow;
+        if (isGroup) break;
+        parent = parent.parent;
+      }
+      if (!parent) return;
+      const group = checkboxGroups.get(parent) ?? { first: element, count: 0 };
+      group.count += repeated ? 2 : 1;
+      checkboxGroups.set(parent, group);
+    }
+
+    return {
+      JSXElement(node) {
+        const name = exportOf(node);
+        if (name === "RadioGroup") reportUnlessGrouped(node);
+        else if (name === "Checkbox") recordCheckbox(node);
+      },
+      "Program:exit"() {
+        for (const { first, count } of checkboxGroups.values()) {
+          if (count >= 2) reportUnlessGrouped(first);
+        }
+      },
+    };
+  },
+};