@clearstory/drywall-react 7.0.0 → 7.1.0

package/dist/components/DialogClose/DialogClose.js

@@ -13,7 +13,7 @@ const u = ({ sx: o, ...t }) => /* @__PURE__ */ r(
       {
         position: "absolute",
         right: 12,
-        top: 12
+        top: 8
       },
       ...Array.isArray(o) ? o : [o]
     ],

package/dist/components/DialogTitle/DialogTitle.theme.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from '@mui/material';
+export declare const MuiDialogTitle: Partial<Components<Theme>["MuiDialogTitle"]>;

package/dist/components/DialogTitle/DialogTitle.theme.js

@@ -0,0 +1,11 @@
+const e = {
+  styleOverrides: {
+    root: () => ({
+      lineHeight: "28px",
+      padding: "10px 24px"
+    })
+  }
+};
+export {
+  e as MuiDialogTitle
+};

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/dist/theme/components.js

@@ -6,25 +6,26 @@ import { MuiButtonGroup as t } from "../components/ButtonGroup/ButtonGroup.theme
 import { MuiCard as u } from "../components/Card/Card.theme.js";
 import { MuiCheckbox as p } from "../components/Checkbox/Checkbox.theme.js";
 import { MuiChip as M } from "../components/Chip/Chip.theme.js";
-import { MuiFormControl as f } from "../components/FormControl/FormControl.theme.js";
-import { MuiFormControlLabel as e } from "../components/FormControlLabel/FormControlLabel.theme.js";
-import { MuiFormHelperText as n } from "../components/FormHelperText/FormHelper.theme.js";
+import { MuiDialogTitle as f } from "../components/DialogTitle/DialogTitle.theme.js";
+import { MuiFormControl as e } from "../components/FormControl/FormControl.theme.js";
+import { MuiFormControlLabel as n } from "../components/FormControlLabel/FormControlLabel.theme.js";
+import { MuiFormHelperText as l } from "../components/FormHelperText/FormHelper.theme.js";
 import { MuiFormLabel as a } from "../components/FormLabel/FormLabel.theme.js";
 import { MuiIconButton as c } from "../components/IconButton/IconButton.theme.js";
-import { MuiInputAdornment as l } from "../components/InputAdornment/InputAdornment.theme.js";
-import { MuiInputBase as B } from "../components/Input/Input.theme.js";
-import { MuiLink as s } from "../components/Link/Link.theme.js";
+import { MuiInputAdornment as B } from "../components/InputAdornment/InputAdornment.theme.js";
+import { MuiInputBase as s } from "../components/Input/Input.theme.js";
+import { MuiLink as g } from "../components/Link/Link.theme.js";
 import { MuiList as C } from "../components/List/List.theme.js";
 import { MuiListItemButton as I } from "../components/ListItemButton/ListItemButton.theme.js";
 import { MuiMenuItem as L } from "../components/MenuItem/MenuItem.theme.js";
-import { MuiPaper as b } from "../components/Paper/Paper.theme.js";
-import { MuiRadio as d } from "../components/Radio/Radio.theme.js";
-import { MuiSelect as g } from "../components/Select/Select.theme.js";
+import { MuiPaper as T } from "../components/Paper/Paper.theme.js";
+import { MuiRadio as b } from "../components/Radio/Radio.theme.js";
+import { MuiSelect as d } from "../components/Select/Select.theme.js";
 import { MuiSwitch as F } from "../components/Switch/Switch.theme.js";
-import { MuiTab as T } from "../components/Tab/Tab.theme.js";
-import { MuiToggleButton as h } from "../components/ToggleButton/ToggleButton.theme.js";
-import { MuiToggleButtonGroup as x } from "../components/ToggleButtonGroup/ToggleButtonGroup.theme.js";
-const _ = {
+import { MuiTab as h } from "../components/Tab/Tab.theme.js";
+import { MuiToggleButton as x } from "../components/ToggleButton/ToggleButton.theme.js";
+import { MuiToggleButtonGroup as A } from "../components/ToggleButtonGroup/ToggleButtonGroup.theme.js";
+const oo = {
   MuiAccordionSummary: o,
   MuiAutocomplete: r,
   MuiButton: m,
@@ -33,25 +34,26 @@ const _ = {
   MuiCard: u,
   MuiCheckbox: p,
   MuiChip: M,
-  MuiFormControl: f,
-  MuiFormControlLabel: e,
-  MuiFormHelperText: n,
+  MuiDialogTitle: f,
+  MuiFormControl: e,
+  MuiFormControlLabel: n,
+  MuiFormHelperText: l,
   MuiIconButton: c,
-  MuiInputAdornment: l,
-  MuiInputBase: B,
-  MuiLink: s,
+  MuiInputAdornment: B,
+  MuiInputBase: s,
+  MuiLink: g,
   MuiList: C,
   MuiListItemButton: I,
   MuiMenuItem: L,
   MuiFormLabel: a,
-  MuiPaper: b,
-  MuiRadio: d,
-  MuiSelect: g,
+  MuiPaper: T,
+  MuiRadio: b,
+  MuiSelect: d,
   MuiSwitch: F,
-  MuiTab: T,
-  MuiToggleButton: h,
-  MuiToggleButtonGroup: x
+  MuiTab: h,
+  MuiToggleButton: x,
+  MuiToggleButtonGroup: A
 };
 export {
-  _ as components
+  oo as components
 };

package/package.json

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