@clearstory/drywall-react 7.0.1 → 7.2.0

package/dist/eslint-config/index.js

@@ -1,7 +1,13 @@
-import e from "./no-system-props.js";
+import e from "./no-shorthand-spacing.js";
+import l from "./no-system-props.js";
+import a from "./prefer-logical-properties.js";
+import o from "./prefer-vars-palette.js";
 const r = {
   rules: {
-    "no-system-props": e
+    "no-shorthand-spacing": e,
+    "no-system-props": l,
+    "prefer-logical-properties": a,
+    "prefer-vars-palette": o
   },
   configs: {}
 };
@@ -11,19 +17,25 @@ r.configs.recommended = {
     "@clearstory/drywall-react": r
   },
   rules: {
-    "@clearstory/drywall-react/no-system-props": "error"
+    "@clearstory/drywall-react/no-shorthand-spacing": "error",
+    "@clearstory/drywall-react/no-system-props": "error",
+    "@clearstory/drywall-react/prefer-logical-properties": "error",
+    "@clearstory/drywall-react/prefer-vars-palette": "error"
   }
 };
-const s = {
+const y = {
   name: "@clearstory/drywall-react",
   plugins: {
     "@clearstory/drywall-react": r
   },
   rules: {
-    "@clearstory/drywall-react/no-system-props": "error"
+    "@clearstory/drywall-react/no-shorthand-spacing": "error",
+    "@clearstory/drywall-react/no-system-props": "error",
+    "@clearstory/drywall-react/prefer-logical-properties": "error",
+    "@clearstory/drywall-react/prefer-vars-palette": "error"
   }
 };
 export {
-  s as default,
+  y as default,
   r as plugin
 };

package/dist/eslint-config/no-shorthand-spacing.d.ts

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

package/dist/eslint-config/no-shorthand-spacing.js

@@ -0,0 +1,57 @@
+import { createSxVisitor as i } from "./sx-utils.js";
+const s = {
+  p: "padding",
+  pt: "paddingTop",
+  pr: "paddingRight",
+  pb: "paddingBottom",
+  pl: "paddingLeft",
+  px: "paddingX",
+  py: "paddingY",
+  m: "margin",
+  mt: "marginTop",
+  mr: "marginRight",
+  mb: "marginBottom",
+  ml: "marginLeft",
+  mx: "marginX",
+  my: "marginY"
+}, g = {
+  meta: {
+    type: "suggestion",
+    fixable: "code",
+    docs: {
+      description: "Disallow MUI spacing shorthands (p, pt, m, mx, etc.) in sx props",
+      category: "Best Practices",
+      recommended: !0
+    },
+    messages: {
+      shorthandSpacing: 'Use "{{replacement}}" instead of shorthand "{{property}}" in sx for readability.'
+    },
+    schema: []
+  },
+  create(a) {
+    return i({
+      onProperty(n, e) {
+        const t = s[n];
+        t && a.report({
+          node: e,
+          messageId: "shorthandSpacing",
+          data: { property: n, replacement: t },
+          fix(p) {
+            const r = e;
+            if (e.type === "Literal") {
+              const o = a.sourceCode.getText(r)[0];
+              return p.replaceText(
+                r,
+                `${o}${t}${o}`
+              );
+            }
+            return p.replaceText(r, t);
+          }
+        });
+      }
+    });
+  }
+};
+export {
+  g as default
+};

package/dist/eslint-config/no-system-props.js

@@ -122,10 +122,28 @@ const g = [
   "typography",
   // other common system props
   "spacing"
-], d = ["Box", "Stack", "Typography", "Link"], u = {
+], u = {
+  // color: semantic theme colors (primary, secondary, error, etc.)
   Typography: ["color"],
-  // semantic colors only
-  Link: ["color"]
+  Link: ["color"],
+  Button: ["color"],
+  ButtonGroup: ["color"],
+  IconButton: ["color"],
+  Chip: ["color"],
+  Badge: ["color"],
+  Alert: ["color"],
+  CircularProgress: ["color"],
+  LinearProgress: ["color"],
+  Radio: ["color"],
+  Checkbox: ["color"],
+  Switch: ["color"],
+  SvgIcon: ["color"],
+  FormLabel: ["color"],
+  FormControl: ["color"],
+  ToggleButton: ["color"],
+  ToggleButtonGroup: ["color"],
+  // Container: maxWidth accepts breakpoint values (xs, sm, md, lg, xl), not CSS values
+  Container: ["maxWidth"]
 }, h = {
   meta: {
     type: "problem",
@@ -139,52 +157,55 @@ const g = [
     },
     schema: []
   },
-  create(n) {
-    const o = /* @__PURE__ */ new Set(), s = /* @__PURE__ */ new Set();
+  create(t) {
+    const o = /* @__PURE__ */ new Map(), p = /* @__PURE__ */ new Set();
     return {
       ImportDeclaration(l) {
         const r = l;
         r.source.value === "@clearstory/drywall-react" && r.specifiers.forEach((e) => {
-          e.type === "ImportSpecifier" && e.imported && d.includes(e.imported.name) ? o.add(e.local.name) : e.type === "ImportNamespaceSpecifier" && s.add(e.local.name);
+          e.type === "ImportSpecifier" && e.imported ? o.set(e.local.name, e.imported.name) : e.type === "ImportNamespaceSpecifier" && p.add(e.local.name);
         });
       },
       JSXOpeningElement(l) {
         const r = l;
-        let e;
+        let e, s;
         if ("name" in r.name) {
           if (e = r.name.name, !o.has(e))
             return;
+          s = o.get(e);
         } else if (r.name.type === "JSXMemberExpression") {
-          const t = r.name.object.name;
-          if (e = r.name.property.name, !s.has(t) || !d.includes(e))
+          const n = r.name.object.name;
+          if (e = r.name.property.name, s = e, !p.has(n))
             return;
         } else
           return;
-        const p = [];
-        r.attributes.forEach((t) => {
-          const i = t;
+        const m = [];
+        r.attributes.forEach((n) => {
+          const i = n;
           if (i.type !== "JSXAttribute" || !i.name)
             return;
           const a = i.name.name;
           if (a === "sx" || !g.includes(a))
             return;
-          const m = u[e];
-          if (m && m.includes(a))
-            if (a === "color" && i.value) {
-              const c = f(i.value);
-              if (y(c))
-                return;
+          const d = u[s];
+          if (d && d.includes(a))
+            if (a === "color") {
+              if (i.value) {
+                const c = f(i.value);
+                if (y(c))
+                  return;
+              }
             } else
               return;
-          p.push(
+          m.push(
             i
           );
-        }), p.forEach((t) => {
-          n.report({
-            node: t,
+        }), m.forEach((n) => {
+          t.report({
+            node: n,
             messageId: "systemProp",
             data: {
-              prop: t.name.name,
+              prop: n.name.name,
               component: e
             }
           });
@@ -193,9 +214,9 @@ const g = [
     };
   }
 };
-function f(n) {
-  if (!n) return null;
-  const o = n;
+function f(t) {
+  if (!t) return null;
+  const o = t;
   if (o.type === "Literal")
     return String(o.value);
   if (o.type === "JSXExpressionContainer" && o.expression) {
@@ -206,7 +227,7 @@ function f(n) {
   }
   return null;
 }
-function y(n) {
+function y(t) {
   return [
     "inherit",
     "primary",
@@ -214,8 +235,16 @@ function y(n) {
     "error",
     "warning",
     "info",
-    "success"
-  ].includes(n || "");
+    "success",
+    "default",
+    // Badge, Radio, Checkbox, Switch
+    "action",
+    // SvgIcon
+    "disabled",
+    // SvgIcon
+    "standard"
+    // ToggleButton, ToggleButtonGroup
+  ].includes(t || "");
 }
 export {
   h as default

package/dist/eslint-config/prefer-logical-properties.d.ts

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

package/dist/eslint-config/prefer-logical-properties.js

@@ -0,0 +1,72 @@
+import { createSxVisitor as d } from "./sx-utils.js";
+const l = {
+  // Positioning (inset)
+  top: "insetBlockStart",
+  bottom: "insetBlockEnd",
+  left: "insetInlineStart",
+  right: "insetInlineEnd",
+  // Padding
+  paddingTop: "paddingBlockStart",
+  paddingBottom: "paddingBlockEnd",
+  paddingLeft: "paddingInlineStart",
+  paddingRight: "paddingInlineEnd",
+  paddingX: "paddingInline",
+  paddingY: "paddingBlock",
+  // Margin
+  marginTop: "marginBlockStart",
+  marginBottom: "marginBlockEnd",
+  marginLeft: "marginInlineStart",
+  marginRight: "marginInlineEnd",
+  marginX: "marginInline",
+  marginY: "marginBlock",
+  // Border
+  borderTop: "borderBlockStart",
+  borderBottom: "borderBlockEnd",
+  borderLeft: "borderInlineStart",
+  borderRight: "borderInlineEnd",
+  // Border color
+  borderTopColor: "borderBlockStartColor",
+  borderBottomColor: "borderBlockEndColor",
+  borderLeftColor: "borderInlineStartColor",
+  borderRightColor: "borderInlineEndColor"
+}, g = {
+  meta: {
+    type: "suggestion",
+    fixable: "code",
+    docs: {
+      description: "Enforce CSS logical properties instead of physical direction properties in sx props",
+      category: "Best Practices",
+      recommended: !0
+    },
+    messages: {
+      physicalProperty: 'Use logical property "{{replacement}}" instead of "{{property}}" in sx for RTL support.'
+    },
+    schema: []
+  },
+  create(t) {
+    return d({
+      onProperty(n, o) {
+        const r = l[n];
+        r && t.report({
+          node: o,
+          messageId: "physicalProperty",
+          data: { property: n, replacement: r },
+          fix(i) {
+            const e = o;
+            if (o.type === "Literal") {
+              const a = t.sourceCode.getText(e)[0];
+              return i.replaceText(
+                e,
+                `${a}${r}${a}`
+              );
+            }
+            return i.replaceText(e, r);
+          }
+        });
+      }
+    });
+  }
+};
+export {
+  g as default
+};

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,130 @@
+import { createSxVisitor as l } from "./sx-utils.js";
+const f = /* @__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"
+]), d = {
+  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(s) {
+    return l({
+      onProperty(t, r, e) {
+        f.has(t) && i(s, t, e);
+      },
+      onCallback(t) {
+        c(s, t);
+      }
+    });
+  }
+};
+function i(s, t, r) {
+  if (r.type === "ObjectExpression") {
+    const e = r.properties;
+    for (const o of e) {
+      if (o.type === "SpreadElement" || o.type !== "Property") continue;
+      i(s, t, o.value);
+    }
+    return;
+  }
+  if (r.type === "ArrowFunctionExpression" || r.type === "FunctionExpression") {
+    c(s, r);
+    return;
+  }
+  if (r.type === "Literal") {
+    const e = r.value;
+    typeof e == "string" && !p.has(e) && s.report({
+      node: r,
+      messageId: "stringColor",
+      data: { value: e, property: t }
+    });
+    return;
+  }
+  if (r.type === "TemplateLiteral") {
+    const e = r;
+    if (e.expressions.length === 0) {
+      const o = e.quasis[0]?.value.raw;
+      o && !p.has(o) && s.report({
+        node: r,
+        messageId: "stringColor",
+        data: { value: o, property: t }
+      });
+    }
+    return;
+  }
+  if (r.type === "ConditionalExpression") {
+    const e = r;
+    i(s, t, e.consequent), i(s, t, e.alternate);
+  }
+}
+function c(s, t) {
+  const r = t.params;
+  if (!r || r.length === 0) return;
+  const e = r[0];
+  if (e.type === "Identifier") {
+    const o = e.name, n = t.body;
+    a(s, n, o);
+  } else e.type === "ObjectPattern" && e.properties.forEach((n) => {
+    if (n.type !== "Property") return;
+    n.key.name === "palette" && s.report({
+      node: n,
+      messageId: "useVarsPalette",
+      data: { access: "destructured palette" }
+    });
+  });
+}
+function a(s, t, r) {
+  if (!(!t || typeof t != "object")) {
+    if (t.type === "MemberExpression") {
+      const e = t.object, o = t.property;
+      if (e.type === "Identifier" && e.name === r && o.name === "palette") {
+        s.report({
+          node: t,
+          messageId: "useVarsPalette",
+          data: { access: `${r}.palette` }
+        });
+        return;
+      }
+    }
+    for (const e of Object.keys(t)) {
+      if (e === "parent") continue;
+      const o = t[e];
+      o && typeof o == "object" && (Array.isArray(o) ? o.forEach((n) => {
+        n && typeof n == "object" && "type" in n && a(s, n, r);
+      }) : "type" in o && a(s, o, r));
+    }
+  }
+}
+export {
+  d as default
+};

package/dist/eslint-config/sx-utils.d.ts

@@ -0,0 +1,53 @@
+import { Rule } from 'eslint';
+/**
+ * Shared AST traversal utilities for ESLint rules that inspect MUI `sx` props.
+ *
+ * Provides a visitor pattern that:
+ * 1. Finds the `sx` attribute on JSXOpeningElement nodes
+ * 2. Traverses the expression (object, callback, or array)
+ * 3. Recurses into nested objects (pseudo-selectors like "&:hover")
+ * 4. Calls rule-specific callbacks for each property encountered
+ */
+/**
+ * Minimal AST node type for traversal within ESLint rules.
+ */
+export type ASTNode = Record<string, unknown> & {
+    type: string;
+};
+export interface SxVisitorCallbacks {
+    /**
+     * Called for each property in an sx object expression, including properties
+     * inside nested objects (pseudo-selectors like "&:hover").
+     * Recursion into nested objects is handled automatically by the visitor.
+     */
+    onProperty: (keyName: string, keyNode: ASTNode, valueNode: ASTNode) => void;
+    /**
+     * Called when the sx value (or an array element) is a callback function
+     * (ArrowFunctionExpression or FunctionExpression). Fires before the
+     * returned object's properties are visited via onProperty.
+     */
+    onCallback?: (func: ASTNode) => void;
+}
+/**
+ * Creates a JSXOpeningElement visitor that locates the `sx` attribute
+ * and walks its value, invoking the provided callbacks for each property.
+ */
+export declare function createSxVisitor(callbacks: SxVisitorCallbacks): Rule.RuleListener;
+/**
+ * Walk an sx value expression (object, callback, or array) and invoke
+ * the provided callbacks for each property encountered.
+ */
+export declare function visitSxValue(node: ASTNode, callbacks: SxVisitorCallbacks): void;
+/**
+ * Extract the returned ObjectExpression from a function/arrow function body.
+ */
+export declare function getReturnedObjectExpression(func: ASTNode): ASTNode | null;
+/**
+ * Get the string name of a property key.
+ * Returns null for computed keys or non-string keys.
+ */
+export declare function getKeyName(key: {
+    type: string;
+    name?: string;
+    value?: string;
+}, computed: boolean): string | null;

package/dist/eslint-config/sx-utils.js

@@ -0,0 +1,67 @@
+function f(e) {
+  return {
+    JSXOpeningElement(t) {
+      const n = t.attributes.find(
+        (i) => i.type === "JSXAttribute" && i.name?.name === "sx"
+      );
+      if (!n) return;
+      const r = n.value;
+      if (r && r.type === "JSXExpressionContainer") {
+        const i = r.expression;
+        u(i, e);
+      }
+    }
+  };
+}
+function u(e, t) {
+  if (e)
+    switch (e.type) {
+      case "ObjectExpression":
+        o(e, t);
+        break;
+      case "ArrowFunctionExpression":
+      case "FunctionExpression": {
+        t.onCallback?.(e);
+        const s = p(e);
+        s && o(s, t);
+        break;
+      }
+      case "ArrayExpression": {
+        e.elements.forEach((n) => {
+          n && u(n, t);
+        });
+        break;
+      }
+    }
+}
+function o(e, t) {
+  e.properties.forEach((n) => {
+    if (n.type !== "Property") return;
+    const r = n, i = c(r.key, r.computed);
+    i && (r.value.type === "ObjectExpression" && o(r.value, t), t.onProperty(i, r.key, r.value));
+  });
+}
+function p(e) {
+  const t = e.body;
+  if (t.type === "ObjectExpression")
+    return t;
+  if (t.type === "BlockStatement") {
+    const s = t.body;
+    for (const n of s)
+      if (n.type === "ReturnStatement") {
+        const r = n.argument;
+        if (r?.type === "ObjectExpression")
+          return r;
+      }
+  }
+  return null;
+}
+function c(e, t) {
+  return e.type === "Identifier" && !t ? e.name || null : e.type === "Literal" && typeof e.value == "string" ? e.value : null;
+}
+export {
+  f as createSxVisitor,
+  c as getKeyName,
+  p as getReturnedObjectExpression,
+  u as visitSxValue
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clearstory/drywall-react",
-  "version": "7.0.1",
+  "version": "7.2.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",