From 9ef545b71431496c0ac794320a3c38f6cbed6e75 Mon Sep 17 00:00:00 2001 From: Danijel Martinek Date: Wed, 13 May 2026 07:40:19 +0200 Subject: [PATCH] feat(core-eslint): component-must-have-story rule Co-Authored-By: Claude Sonnet 4.6 --- .../rules/component-must-have-story.js | 59 +++++++++++++ .../rules/component-must-have-story.test.js | 84 +++++++++++++++++++ 2 files changed, 143 insertions(+) create mode 100644 packages/core-eslint/rules/component-must-have-story.js create mode 100644 packages/core-eslint/rules/component-must-have-story.test.js diff --git a/packages/core-eslint/rules/component-must-have-story.js b/packages/core-eslint/rules/component-must-have-story.js new file mode 100644 index 0000000..3338da4 --- /dev/null +++ b/packages/core-eslint/rules/component-must-have-story.js @@ -0,0 +1,59 @@ +import fs from "node:fs"; +import path from "node:path"; + +/** + * Identifies "component files" by location + extension: + * - `.tsx` extension + * - Inside `packages/core-ui/src/` OR `packages//src/ui/` + * - NOT a test, stories, spec, or barrel file + */ +function isComponentFile(filename) { + if (!filename.endsWith(".tsx")) return false; + const base = path.basename(filename); + if ( + base === "index.tsx" || + base.endsWith(".test.tsx") || + base.endsWith(".stories.tsx") || + base.endsWith(".spec.tsx") + ) { + return false; + } + return ( + filename.includes("/packages/core-ui/src/") || + /\/packages\/[^/]+\/src\/ui\//.test(filename) + ); +} + +/** @type {import("eslint").Rule.RuleModule} */ +export default { + meta: { + type: "problem", + docs: { + description: + "Every component file must have a sibling *.stories.tsx for Storybook coverage.", + }, + schema: [], + messages: { + missingStory: + "Component {{filename}} has no sibling Storybook story at {{expected}}. Stories are the spec for visual conformance.", + }, + }, + create(context) { + return { + Program(node) { + const filename = context.filename; + if (!isComponentFile(filename)) return; + const expected = filename.replace(/\.tsx$/, ".stories.tsx"); + if (fs.existsSync(expected)) return; + context.report({ + node, + messageId: "missingStory", + data: { + filename: path.basename(filename), + expected: path.basename(expected), + }, + }); + }, + }; + }, +}; diff --git a/packages/core-eslint/rules/component-must-have-story.test.js b/packages/core-eslint/rules/component-must-have-story.test.js new file mode 100644 index 0000000..00b1cb6 --- /dev/null +++ b/packages/core-eslint/rules/component-must-have-story.test.js @@ -0,0 +1,84 @@ +import { describe, it } from "vitest"; +import { RuleTester } from "eslint"; +import path from "node:path"; +import os from "node:os"; +import fs from "node:fs"; +import rule from "./component-must-have-story.js"; + +function makeFixture({ withStory, location = "core-ui" }) { + const root = fs.mkdtempSync(path.join(os.tmpdir(), "cmhs-")); + const dir = + location === "core-ui" + ? path.join(root, "packages", "core-ui", "src", "atoms", "Button") + : path.join(root, "packages", "demo", "src", "ui", "atoms", "Button"); + fs.mkdirSync(dir, { recursive: true }); + const component = path.join(dir, "Button.tsx"); + fs.writeFileSync(component, `export const Button = () => ;`); + if (withStory) { + fs.writeFileSync(path.join(dir, "Button.stories.tsx"), `export default { title: "Button" };`); + } + return { component }; +} + +const tester = new RuleTester({ + languageOptions: { + parser: await import("@typescript-eslint/parser"), + ecmaVersion: "latest", + sourceType: "module", + parserOptions: { ecmaFeatures: { jsx: true } }, + }, +}); + +describe("component-must-have-story", () => { + it("passes for a core-ui component with a sibling .stories.tsx", () => { + const { component } = makeFixture({ withStory: true }); + tester.run("component-must-have-story", rule, { + valid: [{ filename: component, code: fs.readFileSync(component, "utf8") }], + invalid: [], + }); + }); + + it("fires for a core-ui component without a sibling .stories.tsx", () => { + const { component } = makeFixture({ withStory: false }); + tester.run("component-must-have-story", rule, { + valid: [], + invalid: [{ + filename: component, + code: fs.readFileSync(component, "utf8"), + errors: [{ messageId: "missingStory" }], + }], + }); + }); + + it("passes for a feature ui component with a sibling .stories.tsx", () => { + const { component } = makeFixture({ withStory: true, location: "feature" }); + tester.run("component-must-have-story", rule, { + valid: [{ filename: component, code: fs.readFileSync(component, "utf8") }], + invalid: [], + }); + }); + + it("is a no-op for index.tsx", () => { + const root = fs.mkdtempSync(path.join(os.tmpdir(), "cmhs-")); + const dir = path.join(root, "packages", "core-ui", "src", "atoms", "Button"); + fs.mkdirSync(dir, { recursive: true }); + const file = path.join(dir, "index.tsx"); + fs.writeFileSync(file, `export * from "./Button";`); + tester.run("component-must-have-story", rule, { + valid: [{ filename: file, code: fs.readFileSync(file, "utf8") }], + invalid: [], + }); + }); + + it("is a no-op for files outside packages/core-ui/ and packages/*/src/ui/", () => { + const root = fs.mkdtempSync(path.join(os.tmpdir(), "cmhs-")); + const dir = path.join(root, "packages", "auth", "src", "application", "use-cases"); + fs.mkdirSync(dir, { recursive: true }); + const file = path.join(dir, "sign-in.use-case.tsx"); + fs.writeFileSync(file, `export const x = 1;`); + tester.run("component-must-have-story", rule, { + valid: [{ filename: file, code: fs.readFileSync(file, "utf8") }], + invalid: [], + }); + }); +});