@multiplatform.one/config 7.6.0 → 7.6.1

package/oxlint.mjs

@@ -14,12 +14,19 @@
  *     Tamagui*-prefixed typography escape hatches (TamaguiText, TamaguiHeading,
  *     TamaguiH1…, TamaguiParagraph, TamaguiSizableText, TamaguiAnchor) outside
  *     public/. House Text/Heading shadows are the bare names (MPO-20).
- *
- * MPO-17 (no-chrome-props / no-raw-geometry) will add rules to this same
- * plugin. The chrome/layout vocabularies below are the export surface those
- * rules will use; they are not enforced yet.
+ *   mpo-conventions/no-chrome-props — ban chrome (background, radius, type,
+ *     shadow, elevation) as props on imported @multiplatform.one/* components,
+ *     even at a valid token. Layout props (flex, alignSelf, sibling margins)
+ *     stay legal. Exceptions come from the spec DRAWING table's CHROME-ALLOW
+ *     row, not from the code (MPO-17).
+ *   mpo-conventions/no-raw-geometry — ban numeric height/width/padding/fontSize
+ *     on those same imports. Silent behind sizeRecipeEscape() and inside a
+ *     file listed as DRAWING. An undeclared `// mpo-drawing` pragma is a
+ *     lint.mjs failure, not a skip here.
  */
 
+import { isDrawingFile, readDrawingRegistry } from "./drawing-registry.mjs";
+
 /** Hex + functional CSS colour literals. AST-visited only (not a text scan). */
 export const COLOR_LITERAL =
   /#(?:[0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})\b|(?:rgba?|hsla?)\([^)]*\)/i;
@@ -29,11 +36,12 @@ export const PALETTE_FILE =
   /(?:^|\/)themes\/(base|accent)\.(tsx?|jsx?)$|(?:^|\/)[^/]*palette[^/]*\.(tsx?|jsx?)$/i;
 
 const RAW_TYPOGRAPHY_HATCH = /^Tamagui(?:Text|SizableText|Paragraph|Heading|H[1-6]|Anchor)$/;
+const HOUSE_PACKAGE = /^@multiplatform\.one\//;
 
 /**
- * Chrome props MPO-17 `no-chrome-props` will ban on imported
- * `@multiplatform.one/*` components (including Tamagui shorthands).
- * Layout composition through `{...props}` stays legal.
+ * Chrome props banned on imported `@multiplatform.one/*` components
+ * (including Tamagui shorthands). Layout composition through `{...props}`
+ * stays legal.
  */
 export const CHROME_PROPS = Object.freeze([
   "backgroundColor",
@@ -79,6 +87,206 @@ export const LAYOUT_PROPS = Object.freeze([
   "marginVertical",
 ]);
 
+/**
+ * Numeric geometry no-raw-geometry flags on imported house components.
+ * Token strings (`"$4"`) and identifiers do not match; only a numeric
+ * literal (or one wrapped in sizeRecipeEscape) is in scope.
+ */
+export const GEOMETRY_PROPS = Object.freeze([
+  "height",
+  "minHeight",
+  "maxHeight",
+  "width",
+  "minWidth",
+  "maxWidth",
+  "paddingHorizontal",
+  "paddingVertical",
+  "padding",
+  "fontSize",
+]);
+
+const CHROME_PROP_SET = new Set(CHROME_PROPS);
+const GEOMETRY_PROP_SET = new Set(GEOMETRY_PROPS);
+
+const RULE_OPTIONS_SCHEMA = [
+  {
+    type: "object",
+    additionalProperties: false,
+    properties: {
+      drawings: { type: "array", items: { type: "string" } },
+      chromeAllow: { type: "array", items: { type: "string" } },
+    },
+  },
+];
+
+/**
+ * @param {unknown} context
+ * @returns {{ drawings: string[], chromeAllow: Set<string> }}
+ */
+function resolveAllowlists(context) {
+  const opt = context?.options?.[0] ?? {};
+  if (Array.isArray(opt.drawings) || Array.isArray(opt.chromeAllow)) {
+    return {
+      drawings: Array.isArray(opt.drawings) ? opt.drawings : [],
+      chromeAllow: new Set(Array.isArray(opt.chromeAllow) ? opt.chromeAllow : []),
+    };
+  }
+  try {
+    const registry = readDrawingRegistry();
+    return { drawings: registry.files, chromeAllow: new Set(registry.chromeAllow) };
+  } catch {
+    return { drawings: [], chromeAllow: new Set() };
+  }
+}
+
+/** @param {string | undefined} source */
+function isHousePackage(source) {
+  return typeof source === "string" && HOUSE_PACKAGE.test(source);
+}
+
+/** @param {{ type?: string, imported?: { name?: string, value?: string }, local?: { name?: string } }} specifier */
+function specifierLocalName(specifier) {
+  return specifier.local?.name ?? specifier.imported?.name ?? specifier.imported?.value;
+}
+
+/**
+ * Walk a JSX name node into "Card" or "Menu.Content".
+ * @param {unknown} name
+ * @returns {string}
+ */
+function jsxName(name) {
+  if (!name || typeof name !== "object") return "";
+  const node =
+    /** @type {{ type?: string, name?: string, object?: unknown, property?: { name?: string } }} */ (
+      name
+    );
+  if (node.type === "JSXIdentifier") return node.name ?? "";
+  if (node.type === "JSXMemberExpression") {
+    const object = jsxName(node.object);
+    const property = node.property?.name ?? "";
+    return object && property ? `${object}.${property}` : object || property;
+  }
+  return "";
+}
+
+/** @param {unknown} attr */
+function jsxAttrName(attr) {
+  if (!attr || typeof attr !== "object") return "";
+  const node = /** @type {{ type?: string, name?: { type?: string, name?: string } }} */ (attr);
+  if (node.type !== "JSXAttribute") return "";
+  return node.name?.name ?? "";
+}
+
+/**
+ * @param {unknown} value
+ * @returns {unknown}
+ */
+function unwrapJsxValue(value) {
+  if (!value || typeof value !== "object") return value;
+  const node = /** @type {{ type?: string, expression?: unknown }} */ (value);
+  if (node.type === "JSXExpressionContainer") return unwrapJsxValue(node.expression);
+  return value;
+}
+
+/** @param {unknown} value */
+function isNumericLiteral(value) {
+  const node = unwrapJsxValue(value);
+  if (!node || typeof node !== "object") return false;
+  const expr =
+    /** @type {{ type?: string, value?: unknown, operator?: string, argument?: unknown }} */ (node);
+  if (expr.type === "Literal" && typeof expr.value === "number") return true;
+  if (expr.type === "UnaryExpression" && expr.operator === "-" && isNumericLiteral(expr.argument)) {
+    return true;
+  }
+  return false;
+}
+
+/** @param {unknown} value */
+function isSizeRecipeEscape(value) {
+  const node = unwrapJsxValue(value);
+  if (!node || typeof node !== "object") return false;
+  const expr =
+    /** @type {{ type?: string, callee?: { type?: string, name?: string, property?: { name?: string } } }} */ (
+      node
+    );
+  if (expr.type !== "CallExpression") return false;
+  const callee = expr.callee;
+  if (!callee) return false;
+  if (callee.type === "Identifier" && callee.name === "sizeRecipeEscape") return true;
+  if (callee.type === "MemberExpression" && callee.property?.name === "sizeRecipeEscape") {
+    return true;
+  }
+  return false;
+}
+
+/**
+ * @param {unknown} importNode
+ * @param {Set<string>} locals
+ * @param {Set<string>} namespaces
+ */
+function collectHouseLocals(importNode, locals, namespaces) {
+  const node = /** @type {{ source?: { value?: string }, specifiers?: unknown[] }} */ (importNode);
+  if (!isHousePackage(node.source?.value)) return;
+  for (const specifier of node.specifiers ?? []) {
+    const spec = /** @type {{ type?: string, local?: { name?: string } }} */ (specifier);
+    if (spec.type === "ImportNamespaceSpecifier" && spec.local?.name) {
+      namespaces.add(spec.local.name);
+      continue;
+    }
+    const local = specifierLocalName(spec);
+    if (typeof local === "string" && local) locals.add(local);
+  }
+}
+
+/**
+ * @param {string} name
+ * @param {Set<string>} locals
+ * @param {Set<string>} namespaces
+ */
+function isHouseElement(name, locals, namespaces) {
+  if (!name) return false;
+  if (locals.has(name)) return true;
+  const dot = name.indexOf(".");
+  if (dot === -1) return false;
+  return namespaces.has(name.slice(0, dot));
+}
+
+/**
+ * Bare component name for CHROME-ALLOW matching (`Menu.Item` → `Item` and `Menu.Item`).
+ * @param {string} name
+ */
+function elementAllowKeys(name) {
+  const keys = [name];
+  const dot = name.lastIndexOf(".");
+  if (dot !== -1) keys.push(name.slice(dot + 1));
+  return keys;
+}
+
+/**
+ * @param {unknown} context
+ */
+function houseJsxVisitors(context, onHouseElement) {
+  const filename = context.filename ?? context.getFilename?.() ?? "";
+  const { drawings, chromeAllow } = resolveAllowlists(context);
+  const locals = new Set();
+  const namespaces = new Set();
+  return {
+    drawings,
+    chromeAllow,
+    filename,
+    visitors: {
+      ImportDeclaration(node) {
+        collectHouseLocals(node, locals, namespaces);
+      },
+      JSXOpeningElement(node) {
+        const name = jsxName(node.name);
+        if (!isHouseElement(name, locals, namespaces)) return;
+        onHouseElement({ node, name, filename, drawings, chromeAllow });
+      },
+    },
+  };
+}
+
 /**
  * @param {string | undefined} filename
  * @returns {boolean}
@@ -177,6 +385,66 @@ export const plugin = {
         };
       },
     },
+    "no-chrome-props": {
+      meta: {
+        type: "problem",
+        docs: {
+          description:
+            "Ban chrome props (background, radius, type, shadow, elevation) on imported @multiplatform.one/* components. Layout props stay legal.",
+        },
+        schema: RULE_OPTIONS_SCHEMA,
+        messages: {
+          chrome:
+            "{{prop}} is chrome, not layout — it belongs to the system, not the caller. Pass layout (flex, alignSelf, sibling margin) or a named knob; do not restyle {{name}}.",
+        },
+      },
+      create(context) {
+        const { visitors } = houseJsxVisitors(context, ({ node, name, chromeAllow }) => {
+          if (elementAllowKeys(name).some((key) => chromeAllow.has(key))) return;
+          for (const attr of node.attributes ?? []) {
+            const prop = jsxAttrName(attr);
+            if (!CHROME_PROP_SET.has(prop)) continue;
+            context.report({
+              node: attr,
+              messageId: "chrome",
+              data: { prop, name },
+            });
+          }
+        });
+        return visitors;
+      },
+    },
+    "no-raw-geometry": {
+      meta: {
+        type: "problem",
+        docs: {
+          description:
+            "Ban numeric geometry on imported @multiplatform.one/* components unless wrapped in sizeRecipeEscape or the file is a declared drawing.",
+        },
+        schema: RULE_OPTIONS_SCHEMA,
+        messages: {
+          geometry:
+            "Numeric {{prop}} on {{name}} bypasses the size recipe. Wrap with sizeRecipeEscape() or move the drawing into a file listed under DRAWING in the spec.",
+        },
+      },
+      create(context) {
+        const { visitors } = houseJsxVisitors(context, ({ node, name, filename, drawings }) => {
+          if (isDrawingFile(filename, drawings)) return;
+          for (const attr of node.attributes ?? []) {
+            const prop = jsxAttrName(attr);
+            if (!GEOMETRY_PROP_SET.has(prop)) continue;
+            if (isSizeRecipeEscape(attr.value)) continue;
+            if (!isNumericLiteral(attr.value)) continue;
+            context.report({
+              node: attr,
+              messageId: "geometry",
+              data: { prop, name },
+            });
+          }
+        });
+        return visitors;
+      },
+    },
   },
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/config",
-  "version": "7.6.0",
+  "version": "7.6.1",
   "description": "Shared build and test configuration presets for multiplatform.one",
   "keywords": [
     "config",
@@ -36,6 +36,7 @@
     "oxlint.d.ts",
     "lint.mjs",
     "lint.d.ts",
+    "drawing-registry.mjs",
     "!tsconfig/dist",
     "!tsconfig/types",
     "types",
@@ -83,6 +84,7 @@
     "./tsconfig/app.json": "./tsconfig/app.json",
     "./react-native-config": "./src/react-native.config.cjs",
     "./oxlint": "./oxlint.mjs",
+    "./drawing-registry": "./drawing-registry.mjs",
     "./lint": {
       "types": "./lint.d.ts",
       "default": "./lint.mjs",
@@ -100,7 +102,7 @@
     "vite-plugin-external": "^6.2.2",
     "vite-plugin-i18next-loader": "^3.1.3",
     "vitest": "^4.1.5",
-    "@multiplatform.one/utils": "7.6.0"
+    "@multiplatform.one/utils": "7.6.1"
   },
   "devDependencies": {
     "tsdown": "^0.21.10",

package/src/drawing-registry.spec.ts

@@ -0,0 +1,69 @@
+import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { afterEach, describe, expect, it } from "vitest";
+import { DRAWING_PRAGMA, isDrawingFile, readDrawingRegistry } from "../drawing-registry.mjs";
+
+const fixtures: string[] = [];
+
+afterEach(() => {
+  for (const dir of fixtures.splice(0)) {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
+
+function specWith(members: { drawing?: string; chrome?: string }) {
+  const root = mkdtempSync(join(tmpdir(), "mpo-drawing-"));
+  fixtures.push(root);
+  const drawingMembers = members.drawing ? `Members: **${members.drawing}**` : "Members: *(none)*";
+  const chromeMembers = members.chrome ? `Members: **${members.chrome}**` : "Members: *(none)*";
+  const markdown = `# Theme
+
+## Drawing files
+
+| Class        | Normative meaning |
+| ------------ | ----------------- |
+| DRAWING      | Glyphs. ${drawingMembers} |
+| CHROME-ALLOW | Exceptions. ${chromeMembers} |
+`;
+  const specPath = join(root, "spec.md");
+  writeFileSync(specPath, markdown);
+  return specPath;
+}
+
+describe("readDrawingRegistry", () => {
+  it("parses DRAWING and CHROME-ALLOW members from the spec table", () => {
+    const specPath = specWith({
+      drawing: "listing/glyphs/CanvasGlyph.tsx",
+      chrome: "Card",
+    });
+    const registry = readDrawingRegistry(specPath);
+    expect(registry.present).toBe(true);
+    expect(registry.files).toEqual(["listing/glyphs/CanvasGlyph.tsx"]);
+    expect(registry.chromeAllow).toEqual(["Card"]);
+  });
+
+  it("yields empty lists when the spec file is missing", () => {
+    const registry = readDrawingRegistry(join(tmpdir(), "no-such-spec.md"));
+    expect(registry.present).toBe(false);
+    expect(registry.files).toEqual([]);
+    expect(registry.chromeAllow).toEqual([]);
+  });
+});
+
+describe("isDrawingFile / DRAWING_PRAGMA", () => {
+  it("matches a registered path suffix", () => {
+    expect(
+      isDrawingFile("packages/marketplace/src/listing/glyphs/CanvasGlyph.tsx", [
+        "listing/glyphs/CanvasGlyph.tsx",
+      ]),
+    ).toBe(true);
+    expect(isDrawingFile("features/lookout/src/WallScreen.tsx", ["CanvasGlyph.tsx"])).toBe(false);
+    expect(isDrawingFile("features/demo/FooCanvasGlyph.tsx", ["CanvasGlyph.tsx"])).toBe(false);
+  });
+
+  it("matches the file pragma", () => {
+    expect(DRAWING_PRAGMA.test("// mpo-drawing — canvas mark\nexport const G = 1;\n")).toBe(true);
+    expect(DRAWING_PRAGMA.test("export const G = 1;\n")).toBe(false);
+  });
+});

package/src/index.ts

@@ -1,3 +1,9 @@
 export { createStorybookViteConfig, type CreateStorybookViteConfigOptions } from "./storybook";
 export { createViteConfig, type CreateViteConfigOptions } from "./vite";
 export { createVitestConfig, type CreateVitestConfigOptions } from "./vitest";
+export {
+  ensureTamaguiWorkspacePaths,
+  tamaguiWorkspacePathsFile,
+  type EnsureTamaguiWorkspacePathsOptions,
+  type EnsureTamaguiWorkspacePathsResult,
+} from "./tamaguiWorkspacePaths";

package/src/lint.spec.ts

@@ -50,3 +50,125 @@ describe("runConventionChecks", () => {
     expect(code).toBe(0);
   });
 });
+
+describe("story file shape (MPO-93)", () => {
+  function storyTree() {
+    const root = makeTree();
+    mkdirSync(join(root, "packages", "ui", "src"), { recursive: true });
+    return root;
+  }
+  function run(root: string) {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const log = vi.spyOn(console, "log").mockImplementation(() => {});
+    const code = runConventionChecks({ roots: { root } });
+    const lines = error.mock.calls.map((c) => String(c[0]));
+    error.mockRestore();
+    log.mockRestore();
+    return { code, lines };
+  }
+
+  it("fails a story that exports a named `meta` beside `export default`", () => {
+    const root = storyTree();
+    writeFileSync(
+      join(root, "packages", "ui", "src", "Navbar.stories.tsx"),
+      "export const meta = { title: 'Navbar' };\nexport default meta;\nexport const Default = {};\n",
+    );
+    const { code, lines } = run(root);
+    expect(code).toBe(1);
+    expect(lines.join("\n")).toMatch(
+      /Navbar\.stories\.tsx:1 — exports a named `meta` beside `export default`/,
+    );
+  });
+
+  it("fails a story that re-exports `meta` through `export { meta }`", () => {
+    const root = storyTree();
+    writeFileSync(
+      join(root, "packages", "ui", "src", "Carousel.stories.tsx"),
+      "const meta = { title: 'Carousel' };\nexport { meta };\nexport default meta;\n",
+    );
+    const { code, lines } = run(root);
+    expect(code).toBe(1);
+    expect(lines.join("\n")).toMatch(/Carousel\.stories\.tsx:2 — exports a named `meta`/);
+  });
+
+  it("fails a story with no default export", () => {
+    const root = storyTree();
+    writeFileSync(
+      join(root, "apps", "demo", "Orphan.stories.tsx"),
+      "const meta = { title: 'Orphan' };\nexport const Default = {};\n",
+    );
+    const { code, lines } = run(root);
+    expect(code).toBe(1);
+    expect(lines.join("\n")).toMatch(/Orphan\.stories\.tsx — no default export/);
+  });
+
+  it("passes classic CSF and a CSF factory file, and ignores non-story modules", () => {
+    const root = storyTree();
+    writeFileSync(
+      join(root, "packages", "ui", "src", "Button.stories.tsx"),
+      "const meta = { title: 'Button' };\nexport default meta;\nexport const Default = {};\n",
+    );
+    writeFileSync(
+      join(root, "packages", "ui", "src", "Factory.stories.tsx"),
+      "import preview from '#.storybook/preview';\nexport const meta = preview.meta({ title: 'Factory' });\nexport const Default = meta.story({});\n",
+    );
+    writeFileSync(join(root, "packages", "ui", "src", "meta.ts"), "export const meta = 1;\n");
+    const { code } = run(root);
+    expect(code).toBe(0);
+  });
+});
+
+describe("undeclared drawing file (MPO-17)", () => {
+  function drawingSpec(root: string, drawingMember: string) {
+    mkdirSync(join(root, "docs"), { recursive: true });
+    writeFileSync(
+      join(root, "docs", "theme-propagation-spec.md"),
+      [
+        "# Theme",
+        "",
+        "## Drawing files",
+        "",
+        "| Class        | Normative meaning |",
+        "| ------------ | ----------------- |",
+        `| DRAWING      | Glyphs. Members: ${drawingMember} |`,
+        "| CHROME-ALLOW | Exceptions. Members: *(none)* |",
+        "",
+      ].join("\n"),
+    );
+  }
+
+  function run(root: string) {
+    const error = vi.spyOn(console, "error").mockImplementation(() => {});
+    const log = vi.spyOn(console, "log").mockImplementation(() => {});
+    const code = runConventionChecks({ roots: { root } });
+    const lines = error.mock.calls.map((c) => String(c[0]));
+    error.mockRestore();
+    log.mockRestore();
+    return { code, lines };
+  }
+
+  it("fails a // mpo-drawing file that is not a DRAWING member", () => {
+    const root = makeTree();
+    drawingSpec(root, "*(none)*");
+    writeFileSync(
+      join(root, "features", "demo", "CanvasGlyph.tsx"),
+      "// mpo-drawing\nexport const Glyph = () => null;\n",
+    );
+    const { code, lines } = run(root);
+    expect(code).toBe(1);
+    expect(lines.join("\n")).toMatch(
+      /CanvasGlyph\.tsx — \/\/ mpo-drawing without a DRAWING Members row/,
+    );
+  });
+
+  it("passes a pragma whose path is listed as a DRAWING member", () => {
+    const root = makeTree();
+    drawingSpec(root, "**features/demo/CanvasGlyph.tsx**");
+    writeFileSync(
+      join(root, "features", "demo", "CanvasGlyph.tsx"),
+      "// mpo-drawing\nexport const Glyph = () => null;\n",
+    );
+    const { code } = run(root);
+    expect(code).toBe(0);
+  });
+});