@vadimcomanescu/nadicode-design-system 2.0.0

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

@@ -0,0 +1,273 @@
+import {
+  getClassTokensFromAttribute,
+  getFilename,
+  isTestFile,
+} from "../utils.js";
+
+const HEADING_TAGS = new Set(["h1", "h2", "h3", "h4", "h5", "h6"]);
+const TEXT_SIZE_ORDER = new Map([
+  ["text-xs", 0],
+  ["text-sm", 1],
+  ["text-base", 2],
+  ["text-lg", 3],
+  ["text-xl", 4],
+  ["text-2xl", 5],
+  ["text-3xl", 6],
+  ["text-4xl", 7],
+  ["text-5xl", 8],
+  ["text-6xl", 9],
+  ["text-7xl", 10],
+  ["text-8xl", 11],
+  ["text-9xl", 12],
+]);
+const FONT_WEIGHT_ORDER = new Map([
+  ["font-medium", 1],
+  ["font-semibold", 2],
+  ["font-bold", 3],
+  ["font-extrabold", 4],
+  ["font-black", 5],
+]);
+const HEADING_SIZES = [
+  { size: "display", sizes: ["text-4xl", "text-5xl"], weights: ["font-extrabold", "font-black"] },
+  { size: "section", sizes: ["text-3xl"], weights: ["font-semibold", "font-bold"] },
+  { size: "subsection", sizes: ["text-2xl"], weights: ["font-semibold", "font-bold"] },
+  { size: "title", sizes: ["text-xl"], weights: ["font-semibold", "font-bold"] },
+  { size: "label", sizes: ["text-base", "text-lg"], weights: ["font-medium", "font-semibold"] },
+  { size: "eyebrow", sizes: ["text-sm"], weights: ["font-medium", "font-semibold"] },
+];
+const LEGACY_TYPOGRAPHY_VARIANT_TO_LEVEL = {
+  h1: 1,
+  h2: 2,
+  h3: 3,
+  h4: 4,
+};
+const LEGACY_TYPOGRAPHY_VARIANT_TO_SIZE = {
+  h1: "display",
+  h2: "section",
+  h3: "subsection",
+  h4: "title",
+  small: "eyebrow",
+};
+const TYPOGRAPHY_IMPORT_SOURCES = new Set([
+  "@/components/ui/Typography",
+  "@vadimcomanescu/nadicode-design-system/typography",
+]);
+
+const EXEMPT_DIRS = [
+  "/components/ui/",
+  "/components/animate-ui/",
+  "/components/layout/",
+];
+
+const EXEMPT_FILES = [
+  "Typography.tsx",
+  "Heading.tsx",
+];
+
+function isExempt(filename) {
+  if (EXEMPT_FILES.some((file) => filename.endsWith(`/${file}`))) return true;
+  return EXEMPT_DIRS.some((dir) => filename.includes(dir));
+}
+
+function getAttribute(node, name) {
+  return node.attributes.find(
+    (attr) =>
+      attr.type === "JSXAttribute" &&
+      attr.name.type === "JSXIdentifier" &&
+      attr.name.name === name,
+  );
+}
+
+function getStringAttributeValue(attr) {
+  if (!attr?.value) return null;
+
+  if (attr.value.type === "Literal" && typeof attr.value.value === "string") {
+    return attr.value.value;
+  }
+
+  if (
+    attr.value.type === "JSXExpressionContainer" &&
+    attr.value.expression.type === "Literal" &&
+    typeof attr.value.expression.value === "string"
+  ) {
+    return attr.value.expression.value;
+  }
+
+  return null;
+}
+
+function normalizeUtilityToken(token) {
+  const withoutImportant = token.replace(/^!/, "");
+  const segments = withoutImportant.split(":");
+  return segments[segments.length - 1];
+}
+
+function extractUtilityMatches(tokens, registry) {
+  const matches = [];
+
+  for (const tokenGroup of tokens) {
+    for (const token of tokenGroup.split(/\s+/)) {
+      const normalized = normalizeUtilityToken(token.trim());
+      if (registry.has(normalized)) {
+        matches.push(normalized);
+      }
+    }
+  }
+
+  return matches;
+}
+
+function getHeadingStyleSignal(tokens) {
+  const sizes = extractUtilityMatches(tokens, TEXT_SIZE_ORDER);
+  const weights = extractUtilityMatches(tokens, FONT_WEIGHT_ORDER);
+
+  return {
+    sizes,
+    weights,
+    hasHeadingSignal: sizes.length > 0 && weights.length > 0,
+  };
+}
+
+function getClosestHeadingSize(tokens) {
+  const { sizes, weights, hasHeadingSignal } = getHeadingStyleSignal(tokens);
+  if (!hasHeadingSignal) return null;
+
+  const primarySize = sizes[0];
+  const primaryWeight = weights[0];
+  let bestSize = null;
+  let bestScore = Number.POSITIVE_INFINITY;
+
+  for (const candidate of HEADING_SIZES) {
+    const sizeDistance = Math.min(
+      ...candidate.sizes.map((candidateSize) =>
+        Math.abs(TEXT_SIZE_ORDER.get(primarySize) - TEXT_SIZE_ORDER.get(candidateSize)),
+      ),
+    );
+    const weightDistance = Math.min(
+      ...candidate.weights.map((candidateWeight) =>
+        Math.abs(FONT_WEIGHT_ORDER.get(primaryWeight) - FONT_WEIGHT_ORDER.get(candidateWeight)),
+      ),
+    );
+    const score = sizeDistance * 10 + weightDistance;
+
+    if (score < bestScore) {
+      bestScore = score;
+      bestSize = candidate.size;
+    }
+  }
+
+  return bestSize;
+}
+
+function buildHeadingSuggestion(level, size) {
+  const defaultSize =
+    level === 1
+      ? "display"
+      : level === 2
+        ? "section"
+        : level === 3
+          ? "subsection"
+          : level === 4
+            ? "title"
+            : level === 5
+              ? "label"
+              : "eyebrow";
+
+  if (!size || size === defaultSize) {
+    return `<Heading level={${level}}>`;
+  }
+
+  return `<Heading level={${level}} size="${size}">`;
+}
+
+function isTypographyImportSource(source) {
+  return typeof source === "string" && TYPOGRAPHY_IMPORT_SOURCES.has(source);
+}
+
+function getHeadingLevelFromTag(tagName) {
+  if (!HEADING_TAGS.has(tagName)) return null;
+  return Number.parseInt(tagName.slice(1), 10);
+}
+
+const rule = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description:
+        "Disallow hand-coded heading styling and heading semantics through Typography. Use the dedicated Heading primitive instead.",
+    },
+    schema: [],
+  },
+  create(context) {
+    const filename = getFilename(context);
+    if (isExempt(filename) || isTestFile(filename)) return {};
+
+    const typographyLocalNames = new Set();
+
+    return {
+      ImportDeclaration(node) {
+        if (!isTypographyImportSource(node.source.value)) return;
+
+        for (const specifier of node.specifiers) {
+          if (
+            specifier.type === "ImportSpecifier" &&
+            specifier.imported.type === "Identifier" &&
+            specifier.imported.name === "Typography"
+          ) {
+            typographyLocalNames.add(specifier.local.name);
+          }
+        }
+      },
+      JSXOpeningElement(node) {
+        if (node.name.type !== "JSXIdentifier") return;
+
+        const tagName = node.name.name;
+        const classAttr = getAttribute(node, "className");
+        const classTokens = classAttr ? getClassTokensFromAttribute(classAttr) : [];
+
+        if (HEADING_TAGS.has(tagName)) {
+          const suggestedSize = getClosestHeadingSize(classTokens);
+          if (!suggestedSize) return;
+
+          const level = getHeadingLevelFromTag(tagName);
+          context.report({
+            node,
+            message:
+              "Hand-coded <{{tag}}> with text-size and font-weight classes. Use {{suggestion}} instead.",
+            data: {
+              tag: tagName,
+              suggestion: buildHeadingSuggestion(level, suggestedSize),
+            },
+          });
+          return;
+        }
+
+        if (!typographyLocalNames.has(tagName)) return;
+
+        const variant = getStringAttributeValue(getAttribute(node, "variant"));
+        const asTag = getStringAttributeValue(getAttribute(node, "as"));
+        const semanticLevel = getHeadingLevelFromTag(asTag);
+
+        if (!semanticLevel && !LEGACY_TYPOGRAPHY_VARIANT_TO_LEVEL[variant]) return;
+
+        const level = semanticLevel ?? LEGACY_TYPOGRAPHY_VARIANT_TO_LEVEL[variant];
+        const sizeFromClasses = getClosestHeadingSize(classTokens);
+        const size =
+          sizeFromClasses ??
+          LEGACY_TYPOGRAPHY_VARIANT_TO_SIZE[variant] ??
+          null;
+
+        context.report({
+          node,
+          message:
+            "Heading semantics and heading styling must use Heading, not Typography. Use {{suggestion}} instead.",
+          data: {
+            suggestion: buildHeadingSuggestion(level, size),
+          },
+        });
+      },
+    };
+  },
+};
+
+export default rule;

package/eslint-rules/nadicode/rules/no-hardcoded-inline-color.js

@@ -0,0 +1,233 @@
+import { getStaticStyleValue, getStyleObjectProperties } from "../utils.js";
+
+const COLOR_PROPERTIES = new Set([
+  "color",
+  "background",
+  "backgroundColor",
+  "borderColor",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "outlineColor",
+  "textDecorationColor",
+  "fill",
+  "stroke",
+  "caretColor",
+  "columnRuleColor",
+  "accentColor",
+  "boxShadow",
+  "textShadow",
+  "filter",
+  "backdropFilter",
+]);
+
+const NAMED_COLORS = new Set([
+  "aliceblue",
+  "antiquewhite",
+  "aqua",
+  "aquamarine",
+  "azure",
+  "beige",
+  "bisque",
+  "black",
+  "blanchedalmond",
+  "blue",
+  "blueviolet",
+  "brown",
+  "burlywood",
+  "cadetblue",
+  "chartreuse",
+  "chocolate",
+  "coral",
+  "cornflowerblue",
+  "cornsilk",
+  "crimson",
+  "cyan",
+  "darkblue",
+  "darkcyan",
+  "darkgoldenrod",
+  "darkgray",
+  "darkgreen",
+  "darkgrey",
+  "darkkhaki",
+  "darkmagenta",
+  "darkolivegreen",
+  "darkorange",
+  "darkorchid",
+  "darkred",
+  "darksalmon",
+  "darkseagreen",
+  "darkslateblue",
+  "darkslategray",
+  "darkslategrey",
+  "darkturquoise",
+  "darkviolet",
+  "deeppink",
+  "deepskyblue",
+  "dimgray",
+  "dimgrey",
+  "dodgerblue",
+  "firebrick",
+  "floralwhite",
+  "forestgreen",
+  "fuchsia",
+  "gainsboro",
+  "ghostwhite",
+  "gold",
+  "goldenrod",
+  "gray",
+  "green",
+  "greenyellow",
+  "grey",
+  "honeydew",
+  "hotpink",
+  "indianred",
+  "indigo",
+  "ivory",
+  "khaki",
+  "lavender",
+  "lavenderblush",
+  "lawngreen",
+  "lemonchiffon",
+  "lightblue",
+  "lightcoral",
+  "lightcyan",
+  "lightgoldenrodyellow",
+  "lightgray",
+  "lightgreen",
+  "lightgrey",
+  "lightpink",
+  "lightsalmon",
+  "lightseagreen",
+  "lightskyblue",
+  "lightslategray",
+  "lightslategrey",
+  "lightsteelblue",
+  "lightyellow",
+  "lime",
+  "limegreen",
+  "linen",
+  "magenta",
+  "maroon",
+  "mediumaquamarine",
+  "mediumblue",
+  "mediumorchid",
+  "mediumpurple",
+  "mediumseagreen",
+  "mediumslateblue",
+  "mediumspringgreen",
+  "mediumturquoise",
+  "mediumvioletred",
+  "midnightblue",
+  "mintcream",
+  "mistyrose",
+  "moccasin",
+  "navajowhite",
+  "navy",
+  "oldlace",
+  "olive",
+  "olivedrab",
+  "orange",
+  "orangered",
+  "orchid",
+  "palegoldenrod",
+  "palegreen",
+  "paleturquoise",
+  "palevioletred",
+  "papayawhip",
+  "peachpuff",
+  "peru",
+  "pink",
+  "plum",
+  "powderblue",
+  "purple",
+  "rebeccapurple",
+  "red",
+  "rosybrown",
+  "royalblue",
+  "saddlebrown",
+  "salmon",
+  "sandybrown",
+  "seagreen",
+  "seashell",
+  "sienna",
+  "silver",
+  "skyblue",
+  "slateblue",
+  "slategray",
+  "slategrey",
+  "snow",
+  "springgreen",
+  "steelblue",
+  "tan",
+  "teal",
+  "thistle",
+  "tomato",
+  "turquoise",
+  "violet",
+  "wheat",
+  "white",
+  "whitesmoke",
+  "yellow",
+  "yellowgreen",
+]);
+
+const HEX_PATTERN = /#[0-9a-fA-F]{3,8}\b/;
+const RGB_PATTERN = /rgba?\s*\(/i;
+const HSL_PATTERN = /hsla?\s*\(/i;
+
+function isHardcodedColor(value) {
+  if (typeof value !== "string") return false;
+
+  const normalized = value.trim().toLowerCase();
+  if (normalized.length === 0) return false;
+
+  if (HEX_PATTERN.test(normalized)) return true;
+  if (RGB_PATTERN.test(normalized)) return true;
+  if (HSL_PATTERN.test(normalized)) return true;
+
+  // Handle full value color names and fragments inside shadow/filter strings.
+  if (NAMED_COLORS.has(normalized)) return true;
+  return normalized
+    .split(/[^a-z]+/)
+    .filter(Boolean)
+    .some((segment) => NAMED_COLORS.has(segment));
+}
+
+function usesSemanticVariable(value) {
+  return value.includes("var(--") || value.includes("hsl(var(--");
+}
+
+const rule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow hardcoded color values in inline style objects. Use semantic tokens or CSS variables.",
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        for (const { propertyName, valueNode, reportNode } of getStyleObjectProperties(node)) {
+          if (!COLOR_PROPERTIES.has(propertyName)) continue;
+
+          const staticValue = getStaticStyleValue(valueNode);
+          if (!staticValue) continue;
+          if (usesSemanticVariable(staticValue)) continue;
+          if (!isHardcodedColor(staticValue)) continue;
+
+          context.report({
+            node: reportNode,
+            message:
+              "Avoid hardcoded inline colors. Use semantic tokens or CSS custom properties.",
+          });
+        }
+      },
+    };
+  },
+};
+
+export default rule;

package/eslint-rules/nadicode/rules/no-hardcoded-inline-duration.js

@@ -0,0 +1,98 @@
+import {
+  getStaticStyleValue,
+  getStyleObjectProperties,
+  isPositiveNumericLiteral,
+} from "../utils.js";
+
+const DURATION_PROPERTIES = new Set([
+  "transitionDuration",
+  "transitionDelay",
+  "animationDuration",
+  "animationDelay",
+]);
+
+const SHORTHAND_PROPERTIES = new Set(["animation", "transition"]);
+
+const DURATION_PATTERN = /^(-?\d+(?:\.\d+)?)(ms|s)$/i;
+const INLINE_DURATION_TOKEN = /\b(\d+(?:\.\d+)?)(ms|s)\b/i;
+
+function isPositiveDurationValue(value) {
+  const match = DURATION_PATTERN.exec(value.trim());
+  if (!match) return false;
+
+  const amount = Number(match[1]);
+  if (!Number.isFinite(amount)) return false;
+
+  const unit = match[2].toLowerCase();
+  const milliseconds = unit === "s" ? amount * 1000 : amount;
+  return milliseconds > 0;
+}
+
+function shorthandHasHardcodedDuration(value) {
+  const segments = value.split(",");
+  for (const segment of segments) {
+    const trimmed = segment.trim();
+    if (!trimmed) continue;
+    // Skip segments that are entirely var()-based
+    if (/^var\(/.test(trimmed)) continue;
+    // Check each segment for a hardcoded duration token
+    const match = INLINE_DURATION_TOKEN.exec(trimmed);
+    if (match) {
+      const amount = Number(match[1]);
+      const unit = match[2].toLowerCase();
+      const ms = unit === "s" ? amount * 1000 : amount;
+      if (ms > 0) return true;
+    }
+  }
+  return false;
+}
+
+const MESSAGE =
+  "Avoid hardcoded inline duration values. Use motion tokens/classes.";
+
+const rule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow hardcoded inline transition/animation duration values. Use motion tokens/classes.",
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        for (const { propertyName, valueNode, reportNode } of getStyleObjectProperties(node)) {
+          // Longhand duration properties
+          if (DURATION_PROPERTIES.has(propertyName)) {
+            if (isPositiveNumericLiteral(valueNode)) {
+              context.report({ node: reportNode, message: MESSAGE });
+              continue;
+            }
+
+            const staticValue = getStaticStyleValue(valueNode);
+            if (!staticValue) continue;
+            if (staticValue.includes("var(")) continue;
+
+            if (isPositiveDurationValue(staticValue)) {
+              context.report({ node: reportNode, message: MESSAGE });
+            }
+            continue;
+          }
+
+          // Shorthand properties (animation, transition)
+          if (SHORTHAND_PROPERTIES.has(propertyName)) {
+            const staticValue = getStaticStyleValue(valueNode);
+            if (!staticValue) continue;
+
+            if (shorthandHasHardcodedDuration(staticValue)) {
+              context.report({ node: reportNode, message: MESSAGE });
+            }
+          }
+        }
+      },
+    };
+  },
+};
+
+export default rule;

package/eslint-rules/nadicode/rules/no-hardcoded-inline-spacing.js

@@ -0,0 +1,84 @@
+import { getStaticStyleValue, getStyleObjectProperties } from "../utils.js";
+
+const SPACING_PROPERTIES = new Set([
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "marginInline",
+  "marginInlineStart",
+  "marginInlineEnd",
+  "marginBlock",
+  "marginBlockStart",
+  "marginBlockEnd",
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingInline",
+  "paddingInlineStart",
+  "paddingInlineEnd",
+  "paddingBlock",
+  "paddingBlockStart",
+  "paddingBlockEnd",
+  "gap",
+  "rowGap",
+  "columnGap",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  "width",
+  "height",
+  "borderRadius",
+]);
+
+const SPACING_VALUE_PATTERN = /^-?\d+(?:\.\d+)?(?:px|rem)$/i;
+
+function isNumericLiteral(node) {
+  return node?.type === "Literal" && typeof node.value === "number";
+}
+
+const rule = {
+  meta: {
+    type: "problem",
+    docs: {
+      description:
+        "Disallow hardcoded spacing values in inline styles. Use spacing tokens or utility classes.",
+    },
+    schema: [],
+  },
+  create(context) {
+    return {
+      JSXAttribute(node) {
+        for (const { propertyName, valueNode, reportNode } of getStyleObjectProperties(node)) {
+          if (!SPACING_PROPERTIES.has(propertyName)) continue;
+
+          if (isNumericLiteral(valueNode)) {
+            context.report({
+              node: reportNode,
+              message:
+                "Avoid hardcoded inline spacing. Use design-system spacing tokens/classes.",
+            });
+            continue;
+          }
+
+          const staticValue = getStaticStyleValue(valueNode);
+          if (!staticValue) continue;
+
+          if (SPACING_VALUE_PATTERN.test(staticValue.trim())) {
+            context.report({
+              node: reportNode,
+              message:
+                "Avoid hardcoded inline spacing. Use design-system spacing tokens/classes.",
+            });
+          }
+        }
+      },
+    };
+  },
+};
+
+export default rule;