vince/dimensionlab-website
1
0
Fork 0
Code Issues 5 Pull requests Projects Releases Packages Wiki Activity Actions

feat(storybook): migrate stories to react

Browse source
This commit is contained in:
vince 2026-06-19 23:45:54 +02:00
parent 92a8990e7a
commit 76fe468df5
64 changed files with 590 additions and 685 deletions
Download patch file Download diff file Expand all files Collapse all files

85
src/lib/ui/storybook.test.ts
View file

@ -7,35 +7,36 @@ const componentsDir = join(root, "src/lib/ui/components");
const storiesDir = join(root, "src/lib/ui/stories");
const requiredStoryFiles = [
"Badge.stories.svelte",
"Button.stories.svelte",
"DashboardFrame.stories.svelte",
"DashboardHeader.stories.svelte",
"DashboardOnePager.stories.svelte",
"CornerBracketFrame.stories.svelte",
"DiagonalStripeField.stories.svelte",
"FooterCell.stories.svelte",
"FooterStatusCell.stories.svelte",
"GridFrame.stories.svelte",
"IconButton.stories.svelte",
"IconGlyph.stories.svelte",
"ModuleCard.stories.svelte",
"Panel.stories.svelte",
"ProgressMeter.stories.svelte",
"Separator.stories.svelte",
"ServiceGroupPanel.stories.svelte",
"ServicePanel.stories.svelte",
"ServiceRow.stories.svelte",
"SignalTrace.stories.svelte",
"Sparkline.stories.svelte",
"StatusBadge.stories.svelte",
"StatusStrip.stories.svelte",
"SystemState.stories.svelte",
"ScanlineField.stories.svelte",
"TelemetryCard.stories.svelte",
"TelemetryGrid.stories.svelte",
"TelemetryStrip.stories.svelte",
"WeatherModule.stories.svelte",
"Badge.stories.tsx",
"Button.stories.tsx",
"DashboardFrame.stories.tsx",
"DashboardHeader.stories.tsx",
"DashboardOnePager.stories.tsx",
"CornerBracketFrame.stories.tsx",
"DiagonalStripeField.stories.tsx",
"FooterCell.stories.tsx",
"FooterStatusCell.stories.tsx",
"GridFrame.stories.tsx",
"IconButton.stories.tsx",
"IconGlyph.stories.tsx",
"LineChart.stories.tsx",
"ModuleCard.stories.tsx",
"Panel.stories.tsx",
"ProgressMeter.stories.tsx",
"Separator.stories.tsx",
"ServiceGroupPanel.stories.tsx",
"ServicePanel.stories.tsx",
"ServiceRow.stories.tsx",
"SignalTrace.stories.tsx",
"Sparkline.stories.tsx",
"StatusBadge.stories.tsx",
"StatusStrip.stories.tsx",
"SystemState.stories.tsx",
"ScanlineField.stories.tsx",
"TelemetryCard.stories.tsx",
"TelemetryGrid.stories.tsx",
"TelemetryStrip.stories.tsx",
"WeatherModule.stories.tsx",
] as const;
const forbiddenStoryContent = [
@ -64,8 +65,8 @@ describe("Storybook inventory", () => {
test("keeps component and story files paired as the UI inventory changes", () => {
const componentStoryFiles = readdirSync(componentsDir)
.filter((filename) => filename.endsWith(".svelte"))
.map((filename) => filename.replace(".svelte", ".stories.svelte"));
.filter((filename) => filename.endsWith(".tsx") && !filename.endsWith(".test.tsx"))
.map((filename) => filename.replace(".tsx", ".stories.tsx"));
for (const filename of componentStoryFiles) {
expect(existsSync(join(storiesDir, filename)), `${filename} is missing`).toBe(true);
@ -74,7 +75,7 @@ describe("Storybook inventory", () => {
test("keeps Storybook fixtures generic and content-free", () => {
const storyText = readdirSync(storiesDir)
.filter((filename) => filename.endsWith(".svelte") || filename.endsWith(".ts"))
.filter((filename) => filename.endsWith(".tsx") || filename.endsWith(".ts"))
.map((filename) => readFileSync(join(storiesDir, filename), "utf8").toLowerCase())
.join("\n");
@ -90,12 +91,12 @@ describe("Storybook inventory", () => {
"ScanlineField",
"SignalTrace",
]) {
expect(existsSync(join(componentsDir, `${component}.svelte`)), `${component} is missing`).toBe(
expect(existsSync(join(componentsDir, `${component}.tsx`)), `${component} is missing`).toBe(
true,
);
expect(
existsSync(join(storiesDir, `${component}.stories.svelte`)),
`${component}.stories.svelte is missing`,
existsSync(join(storiesDir, `${component}.stories.tsx`)),
`${component}.stories.tsx is missing`,
).toBe(true);
}
});
@ -107,7 +108,7 @@ describe("Storybook inventory", () => {
"ScanlineField",
"SignalTrace",
]) {
const source = readFileSync(join(componentsDir, `${component}.svelte`), "utf8");
const source = readFileSync(join(componentsDir, `${component}.tsx`), "utf8");
expect(source).toContain('aria-hidden="true"');
}
@ -115,8 +116,16 @@ describe("Storybook inventory", () => {
test("does not add deferred form/navigation primitives", () => {
for (const component of ["Input", "ToggleGroup", "ScrollArea"]) {
expect(existsSync(join(root, `src/lib/ui/components/${component}.svelte`))).toBe(false);
expect(existsSync(join(storiesDir, `${component}.stories.svelte`))).toBe(false);
expect(existsSync(join(root, `src/lib/ui/components/${component}.tsx`))).toBe(false);
expect(existsSync(join(storiesDir, `${component}.stories.tsx`))).toBe(false);
}
});
test("does not keep Svelte stories in the React Storybook inventory", () => {
const svelteStories = readdirSync(storiesDir).filter((filename) =>
filename.endsWith(".stories.svelte"),
);
expect(svelteStories).toEqual([]);
});
});