@clearstory/drywall-react 4.1.4 → 4.2.1

package/README.md

@@ -35,3 +35,13 @@ function App() {
 
 export default App;
 ```
+
+## ESLint Rules
+
+This library includes custom ESLint rules to help enforce best practices. Add to your `eslint.config.js`:
+
+```js
+import drywallReact from "@clearstory/drywall-react/eslint-config";
+
+export default [drywallReact];
+```

package/dist/eslint-config/index.d.ts

@@ -0,0 +1,5 @@
+import { ESLint, Linter } from 'eslint';
+declare const drywallPlugin: ESLint.Plugin;
+declare const config: Linter.Config;
+export default config;
+export { drywallPlugin as plugin };

package/dist/eslint-config/index.js

@@ -0,0 +1,29 @@
+import e from "./no-system-props.js";
+const r = {
+  rules: {
+    "no-system-props": e
+  },
+  configs: {}
+};
+r.configs.recommended = {
+  name: "@clearstory/drywall-react/recommended",
+  plugins: {
+    "@clearstory/drywall-react": r
+  },
+  rules: {
+    "@clearstory/drywall-react/no-system-props": "error"
+  }
+};
+const s = {
+  name: "@clearstory/drywall-react",
+  plugins: {
+    "@clearstory/drywall-react": r
+  },
+  rules: {
+    "@clearstory/drywall-react/no-system-props": "error"
+  }
+};
+export {
+  s as default,
+  r as plugin
+};

package/dist/eslint-config/no-system-props.d.ts

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

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

@@ -0,0 +1,284 @@
+const b = [
+  // borders
+  "border",
+  "borderTop",
+  "borderRight",
+  "borderBottom",
+  "borderLeft",
+  "borderColor",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "outline",
+  "outlineColor",
+  "borderRadius",
+  // colors
+  "color",
+  "bgcolor",
+  "backgroundColor",
+  // spacing
+  "p",
+  "pt",
+  "pr",
+  "pb",
+  "pl",
+  "px",
+  "py",
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingX",
+  "paddingY",
+  "paddingInline",
+  "paddingInlineStart",
+  "paddingInlineEnd",
+  "paddingBlock",
+  "paddingBlockStart",
+  "paddingBlockEnd",
+  "m",
+  "mt",
+  "mr",
+  "mb",
+  "ml",
+  "mx",
+  "my",
+  "margin",
+  "marginTop",
+  "marginRight",
+  "marginBottom",
+  "marginLeft",
+  "marginX",
+  "marginY",
+  "marginInline",
+  "marginInlineStart",
+  "marginInlineEnd",
+  "marginBlock",
+  "marginBlockStart",
+  "marginBlockEnd",
+  // display
+  "displayPrint",
+  "display",
+  "overflow",
+  "textOverflow",
+  "visibility",
+  "whiteSpace",
+  // flexbox
+  "flexBasis",
+  "flexDirection",
+  "flexWrap",
+  "justifyContent",
+  "alignItems",
+  "alignContent",
+  "order",
+  "flex",
+  "flexGrow",
+  "flexShrink",
+  "alignSelf",
+  "justifyItems",
+  "justifySelf",
+  "gap",
+  "rowGap",
+  "columnGap",
+  // grid
+  "gridColumn",
+  "gridRow",
+  "gridAutoFlow",
+  "gridAutoColumns",
+  "gridAutoRows",
+  "gridTemplateColumns",
+  "gridTemplateRows",
+  "gridTemplateAreas",
+  "gridArea",
+  // positions
+  "position",
+  "zIndex",
+  "top",
+  "right",
+  "bottom",
+  "left",
+  // shadows
+  "boxShadow",
+  // sizing
+  "width",
+  "maxWidth",
+  "minWidth",
+  "height",
+  "maxHeight",
+  "minHeight",
+  "boxSizing",
+  // typography
+  "font",
+  "fontFamily",
+  "fontSize",
+  "fontStyle",
+  "fontWeight",
+  "letterSpacing",
+  "textTransform",
+  "lineHeight",
+  "textAlign",
+  "typography",
+  // other common system props
+  "spacing"
+], S = ["Box", "Stack", "Typography", "Link"], w = {
+  Typography: ["color"],
+  // semantic colors only
+  Link: ["color"]
+}, T = {
+  meta: {
+    type: "problem",
+    docs: {
+      description: "Disallow system props on @clearstory/drywall-react components",
+      category: "Best Practices",
+      recommended: !0
+    },
+    fixable: "code",
+    messages: {
+      systemProp: 'System prop "{{prop}}" should be moved to the sx prop on {{component}} component'
+    },
+    schema: []
+  },
+  create(s) {
+    const o = /* @__PURE__ */ new Set(), u = /* @__PURE__ */ new Set(), g = s.getSourceCode();
+    return {
+      ImportDeclaration(l) {
+        const e = l;
+        e.source.value === "@clearstory/drywall-react" && e.specifiers.forEach((r) => {
+          r.type === "ImportSpecifier" && r.imported && S.includes(r.imported.name) ? o.add(r.local.name) : r.type === "ImportNamespaceSpecifier" && u.add(r.local.name);
+        });
+      },
+      JSXOpeningElement(l) {
+        const e = l;
+        let r;
+        if ("name" in e.name) {
+          if (r = e.name.name, !o.has(r))
+            return;
+        } else if (e.name.type === "JSXMemberExpression") {
+          const a = e.name.object.name;
+          if (r = e.name.property.name, !u.has(a) || !S.includes(r))
+            return;
+        } else
+          return;
+        const p = [];
+        let x = null;
+        e.attributes.forEach((a) => {
+          const t = a;
+          if (t.type !== "JSXAttribute" || !t.name)
+            return;
+          const d = t.name.name;
+          if (d === "sx") {
+            x = t;
+            return;
+          }
+          if (!b.includes(d))
+            return;
+          const y = w[r];
+          if (y && y.includes(d))
+            if (d === "color" && t.value) {
+              const h = $(t.value);
+              if (C(h))
+                return;
+            } else
+              return;
+          p.push(
+            t
+          );
+        }), p.forEach((a) => {
+          s.report({
+            node: a,
+            messageId: "systemProp",
+            data: {
+              prop: a.name.name,
+              component: r
+            },
+            fix(t) {
+              return I(
+                t,
+                l,
+                p,
+                x,
+                g
+              );
+            }
+          });
+        });
+      }
+    };
+  }
+};
+function $(s) {
+  if (!s) return null;
+  const o = s;
+  if (o.type === "Literal")
+    return String(o.value);
+  if (o.type === "JSXExpressionContainer" && o.expression) {
+    if (o.expression.type === "Literal")
+      return String(o.expression.value);
+    if (o.expression.type === "Identifier")
+      return o.expression.name || null;
+  }
+  return null;
+}
+function C(s) {
+  return [
+    "inherit",
+    "primary",
+    "secondary",
+    "error",
+    "warning",
+    "info",
+    "success"
+  ].includes(s || "");
+}
+function I(s, o, u, g, l) {
+  const e = o, r = "name" in e.name ? e.name.name : e.name.type === "JSXMemberExpression" ? `${e.name.object.name}.${e.name.property.name}` : "UnknownComponent", p = u.map((i) => {
+    const n = i.name.name, m = i.value;
+    if (!m)
+      return `${n}: true`;
+    const c = m;
+    if (c.type === "Literal")
+      return `${n}: ${JSON.stringify(c.value)}`;
+    if (c.type === "JSXExpressionContainer" && c.expression) {
+      const f = l.getText(c.expression);
+      return `${n}: ${f}`;
+    }
+    return `${n}: true`;
+  }), x = new Set(
+    u.map((i) => i.name.name)
+  ), a = [];
+  e.attributes.forEach((i) => {
+    const n = i;
+    if (n.type !== "JSXAttribute" || !n.name) {
+      a.push(l.getText(i));
+      return;
+    }
+    const m = n.name.name;
+    x.has(m) || m === "sx" && g || a.push(l.getText(i));
+  });
+  let t;
+  if (g) {
+    const i = l.getText(g.value);
+    if (i.startsWith("{") && i.endsWith("}")) {
+      const n = i.slice(1, -1).trim();
+      if (n.startsWith("{") && n.endsWith("}"))
+        t = `sx={{ ${p.join(", ")}, ...${n} }}`;
+      else if (n.startsWith("[") && n.endsWith("]"))
+        t = `sx={[{ ${p.join(", ")} }, ...${n}]}`;
+      else {
+        const m = n.trimStart(), f = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(
+          m
+        ) ? m : n;
+        t = `sx={[{ ${p.join(", ")} }, ...(Array.isArray(${f}) ? ${f} : [${f}])]}`;
+      }
+    } else
+      t = `sx={{ ${p.join(", ")} }}`;
+  } else
+    t = `sx={{ ${p.join(", ")} }}`;
+  const d = [...a, t], y = d.length > 0 ? " " + d.join(" ") : "", h = `<${r}${y}${e.selfClosing ? " />" : ">"}`;
+  return [s.replaceText(o, h)];
+}
+export {
+  T as default
+};

package/dist/eslint-config/no-system-props.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,11 +1,19 @@
 {
   "name": "@clearstory/drywall-react",
-  "version": "4.1.4",
+  "version": "4.2.1",
   "license": "UNLICENSED",
   "description": "a Clearstory software design system",
   "type": "module",
-  "main": "dist/main.js",
-  "types": "dist/main.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/main.js"
+    },
+    "./eslint-config": {
+      "types": "./dist/eslint-config/index.d.ts",
+      "import": "./dist/eslint-config/index.js"
+    }
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -78,6 +86,6 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test": "vitest --project=storybook"
+    "test": "vitest"
   }
 }