@clearstory/drywall-react 7.0.1 → 7.1.0

package/dist/eslint-config/index.js

@@ -1,7 +1,9 @@
 import e from "./no-system-props.js";
+import l from "./prefer-vars-palette.js";
 const r = {
   rules: {
-    "no-system-props": e
+    "no-system-props": e,
+    "prefer-vars-palette": l
   },
   configs: {}
 };
@@ -11,19 +13,21 @@ r.configs.recommended = {
     "@clearstory/drywall-react": r
   },
   rules: {
-    "@clearstory/drywall-react/no-system-props": "error"
+    "@clearstory/drywall-react/no-system-props": "error",
+    "@clearstory/drywall-react/prefer-vars-palette": "error"
   }
 };
-const s = {
+const t = {
   name: "@clearstory/drywall-react",
   plugins: {
     "@clearstory/drywall-react": r
   },
   rules: {
-    "@clearstory/drywall-react/no-system-props": "error"
+    "@clearstory/drywall-react/no-system-props": "error",
+    "@clearstory/drywall-react/prefer-vars-palette": "error"
   }
 };
 export {
-  s as default,
+  t as default,
   r as plugin
 };

package/dist/eslint-config/prefer-vars-palette.d.ts

@@ -0,0 +1,3 @@
+import { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/eslint-config/prefer-vars-palette.js

@@ -0,0 +1,190 @@
+const b = /* @__PURE__ */ new Set([
+  "color",
+  "backgroundColor",
+  "bgcolor",
+  "background",
+  "borderColor",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "outlineColor",
+  "fill",
+  "stroke",
+  "caretColor",
+  "textDecorationColor",
+  "columnRuleColor"
+]), p = /* @__PURE__ */ new Set([
+  "inherit",
+  "transparent",
+  "currentColor",
+  "currentcolor",
+  "initial",
+  "unset",
+  "none"
+]), C = {
+  meta: {
+    type: "suggestion",
+    docs: {
+      description: "Enforce using vars.palette for color properties in sx props instead of string literals or theme.palette",
+      category: "Best Practices",
+      recommended: !0
+    },
+    messages: {
+      stringColor: 'Avoid string literal "{{value}}" for "{{property}}" in sx. Use vars.palette for type-safe, dark mode-friendly colors.',
+      useVarsPalette: "Use vars.palette instead of {{access}} for CSS variable-based dark mode support."
+    },
+    schema: []
+  },
+  create(t) {
+    return {
+      JSXOpeningElement(e) {
+        const r = e.attributes.find(
+          (s) => s.type === "JSXAttribute" && s.name?.name === "sx"
+        );
+        if (!r) return;
+        const o = r.value;
+        if (o && o.type === "JSXExpressionContainer") {
+          const s = o.expression;
+          y(t, s);
+        }
+      }
+    };
+  }
+};
+function y(t, e) {
+  if (e)
+    switch (e.type) {
+      case "ObjectExpression":
+        u(t, e);
+        break;
+      case "ArrowFunctionExpression":
+      case "FunctionExpression": {
+        d(t, e);
+        const n = g(e);
+        n && u(t, n);
+        break;
+      }
+      case "ArrayExpression": {
+        e.elements.forEach((r) => {
+          r && y(t, r);
+        });
+        break;
+      }
+    }
+}
+function u(t, e) {
+  e.properties.forEach((r) => {
+    if (r.type !== "Property") return;
+    const o = r, s = m(o.key, o.computed);
+    if (!s) return;
+    const i = o.value;
+    if (i.type === "ObjectExpression") {
+      u(t, i);
+      return;
+    }
+    if (b.has(s)) {
+      if (i.type === "ArrowFunctionExpression" || i.type === "FunctionExpression") {
+        d(t, i);
+        return;
+      }
+      if (i.type === "Literal") {
+        const a = i.value;
+        typeof a == "string" && !p.has(a) && t.report({
+          node: i,
+          messageId: "stringColor",
+          data: { value: a, property: s }
+        });
+        return;
+      }
+      if (i.type === "TemplateLiteral") {
+        const a = i;
+        if (a.expressions.length === 0) {
+          const c = a.quasis[0]?.value.raw;
+          c && !p.has(c) && t.report({
+            node: i,
+            messageId: "stringColor",
+            data: { value: c, property: s }
+          });
+        }
+        return;
+      }
+      if (i.type === "ConditionalExpression") {
+        const a = i;
+        l(t, a.consequent, s), l(t, a.alternate, s);
+      }
+    }
+  });
+}
+function l(t, e, n) {
+  if (e.type === "Literal") {
+    const r = e.value;
+    typeof r == "string" && !p.has(r) && t.report({
+      node: e,
+      messageId: "stringColor",
+      data: { value: r, property: n }
+    });
+  } else if (e.type === "ConditionalExpression") {
+    const r = e;
+    l(t, r.consequent, n), l(t, r.alternate, n);
+  }
+}
+function d(t, e) {
+  const n = e.params;
+  if (!n || n.length === 0) return;
+  const r = n[0];
+  if (r.type === "Identifier") {
+    const o = r.name, s = e.body;
+    f(t, s, o);
+  } else r.type === "ObjectPattern" && r.properties.forEach((s) => {
+    if (s.type !== "Property") return;
+    s.key.name === "palette" && t.report({
+      node: s,
+      messageId: "useVarsPalette",
+      data: { access: "destructured palette" }
+    });
+  });
+}
+function f(t, e, n) {
+  if (!(!e || typeof e != "object")) {
+    if (e.type === "MemberExpression") {
+      const r = e.object, o = e.property;
+      if (r.type === "Identifier" && r.name === n && o.name === "palette") {
+        t.report({
+          node: e,
+          messageId: "useVarsPalette",
+          data: { access: `${n}.palette` }
+        });
+        return;
+      }
+    }
+    for (const r of Object.keys(e)) {
+      if (r === "parent") continue;
+      const o = e[r];
+      o && typeof o == "object" && (Array.isArray(o) ? o.forEach((s) => {
+        s && typeof s == "object" && "type" in s && f(t, s, n);
+      }) : "type" in o && f(t, o, n));
+    }
+  }
+}
+function g(t) {
+  const e = t.body;
+  if (e.type === "ObjectExpression")
+    return e;
+  if (e.type === "BlockStatement") {
+    const n = e.body;
+    for (const r of n)
+      if (r.type === "ReturnStatement") {
+        const o = r.argument;
+        if (o?.type === "ObjectExpression")
+          return o;
+      }
+  }
+  return null;
+}
+function m(t, e) {
+  return t.type === "Identifier" && !e ? t.name || null : t.type === "Literal" && typeof t.value == "string" ? t.value : null;
+}
+export {
+  C as default
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clearstory/drywall-react",
-  "version": "7.0.1",
+  "version": "7.1.0",
   "license": "UNLICENSED",
   "description": "a Clearstory software design system",
   "type": "module",
@@ -37,12 +37,12 @@
     "@mui/material": "7.3.7",
     "@mui/system": "7.3.7",
     "@mui/utils": "7.3.7",
-    "@mui/x-date-pickers": "8.25.0",
+    "@mui/x-date-pickers": "8.27.0",
     "react-hot-toast": "2.6.0",
     "react-number-format": "^5.4.4"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.1",
+    "@chromatic-com/storybook": "^5.0.1",
     "@eslint/js": "^9.29.0",
     "@storybook/addon-a11y": "^10.0.5",
     "@storybook/addon-docs": "^10.0.5",