feat(core-eslint): component-must-have-story rule
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
59
packages/core-eslint/rules/component-must-have-story.js
Normal file
59
packages/core-eslint/rules/component-must-have-story.js
Normal file
@@ -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/<feature>/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),
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
84
packages/core-eslint/rules/component-must-have-story.test.js
Normal file
84
packages/core-eslint/rules/component-must-have-story.test.js
Normal file
@@ -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 = () => <button>x</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: [],
|
||||
});
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user