Skip to content

Commit 221cb0e

Browse files
scriptcodedscriptcoded
committed
chore: add storybook
1 parent c8085ab commit 221cb0e

File tree

12 files changed

+2289
-27
lines changed

12 files changed

+2289
-27
lines changed

‎packages/storybook/.gitignore‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
26+
*storybook.log
27+
storybook-static

‎packages/storybook/.storybook/main.ts‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import type { StorybookConfig } from "@storybook/react-vite";
2+
import type { UserConfig } from "vite";
3+
4+
const config: StorybookConfig = {
5+
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
6+
addons: [
7+
"@chromatic-com/storybook",
8+
"@storybook/addon-docs",
9+
"@storybook/addon-a11y",
10+
"@storybook/addon-vitest",
11+
],
12+
framework: {
13+
name: "@storybook/react-vite",
14+
options: {},
15+
},
16+
async viteFinal(config) {
17+
// Merge custom configuration into the default config
18+
const { mergeConfig } = await import("vite");
19+
20+
return mergeConfig(config, {
21+
plugins: [
22+
// Force full reload for components to re-register
23+
{
24+
name: "full-reload",
25+
handleHotUpdate({ server }) {
26+
server.ws.send({ type: "full-reload" });
27+
return [];
28+
},
29+
},
30+
],
31+
} satisfies UserConfig);
32+
},
33+
};
34+
export default config;

‎packages/storybook/.storybook/preview.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import type { Preview } from "@storybook/react-vite";
2+
3+
import "@scouterna/ui-webc/dist/ui-webc/ui-webc.css";
4+
5+
const preview: Preview = {
6+
parameters: {
7+
controls: {
8+
matchers: {
9+
color: /(background|color)$/i,
10+
date: /Date$/i,
11+
},
12+
},
13+
14+
a11y: {
15+
// 'todo' - show a11y violations in the test UI only
16+
// 'error' - fail CI on a11y violations
17+
// 'off' - skip a11y checks entirely
18+
test: "todo",
19+
},
20+
},
21+
};
22+
23+
export default preview;

‎packages/storybook/.storybook/vitest.setup.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
2+
import { setProjectAnnotations } from '@storybook/react-vite';
3+
import * as projectAnnotations from './preview';
4+
5+
// This is an important step to apply the right configuration when testing your stories.
6+
// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
7+
setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

‎packages/storybook/package.json‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
{
2+
"name": "storybook",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc -b && vite build",
9+
"lint": "eslint .",
10+
"preview": "vite preview",
11+
"storybook": "storybook dev -p 6006 --no-open",
12+
"build-storybook": "storybook build"
13+
},
14+
"dependencies": {
15+
"react": "^19.2.0",
16+
"react-dom": "^19.2.0"
17+
},
18+
"devDependencies": {
19+
"@chromatic-com/storybook": "^4.1.3",
20+
"@eslint/js": "^9.39.1",
21+
"@scouterna/ui-webc": "workspace:^",
22+
"@scouterna/ui-react": "workspace:^",
23+
"@storybook/addon-a11y": "^10.0.8",
24+
"@storybook/addon-docs": "^10.0.8",
25+
"@storybook/addon-vitest": "^10.0.8",
26+
"@storybook/react-vite": "^10.0.8",
27+
"@types/node": "^24.10.1",
28+
"@types/react": "^19.2.5",
29+
"@types/react-dom": "^19.2.3",
30+
"@vitejs/plugin-react": "^5.1.1",
31+
"eslint": "^9.39.1",
32+
"eslint-plugin-react-hooks": "^7.0.1",
33+
"eslint-plugin-react-refresh": "^0.4.24",
34+
"eslint-plugin-storybook": "^10.0.8",
35+
"globals": "^16.5.0",
36+
"storybook": "^10.0.8",
37+
"typescript": "~5.9.3",
38+
"typescript-eslint": "^8.46.4",
39+
"vite": "^7.2.4",
40+
"vitest": "^4.0.12",
41+
"playwright": "^1.56.1",
42+
"@vitest/browser-playwright": "^4.0.12",
43+
"@vitest/coverage-v8": "^4.0.12"
44+
}
45+
}

‎packages/storybook/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎packages/storybook/src/stories/button.stories.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { ScoutButton } from "@scouterna/ui-react";
2+
3+
import type { Meta, StoryObj } from "@storybook/react-vite";
4+
import { fn } from "storybook/test";
5+
// import { ScoutButton } from "../../../ui-react/lib/components/stencil-generated/components";
6+
7+
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
8+
const meta = {
9+
title: "Example/Button",
10+
component: ScoutButton,
11+
parameters: {
12+
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
13+
layout: "centered",
14+
},
15+
// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
16+
tags: ["autodocs"],
17+
// Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#story-args
18+
args: { onClick: fn() },
19+
} satisfies Meta<typeof ScoutButton>;
20+
21+
export default meta;
22+
type Story = StoryObj<typeof meta>;
23+
24+
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
25+
export const Primary: Story = {
26+
args: {
27+
variant: "primary",
28+
},
29+
render: (args) => <ScoutButton {...args}>Hello, World!</ScoutButton>,
30+
};

‎packages/storybook/tsconfig.app.json‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
{
2+
"compilerOptions": {
3+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4+
"target": "ES2022",
5+
"useDefineForClassFields": true,
6+
"lib": ["ES2022", "DOM", "DOM.Iterable"],
7+
"module": "ESNext",
8+
"types": ["vite/client"],
9+
"skipLibCheck": true,
10+
11+
/* Bundler mode */
12+
"moduleResolution": "bundler",
13+
"allowImportingTsExtensions": true,
14+
"verbatimModuleSyntax": true,
15+
"moduleDetection": "force",
16+
"noEmit": true,
17+
"jsx": "react-jsx",
18+
19+
/* Linting */
20+
"strict": true,
21+
"noUnusedLocals": true,
22+
"noUnusedParameters": true,
23+
"erasableSyntaxOnly": true,
24+
"noFallthroughCasesInSwitch": true,
25+
"noUncheckedSideEffectImports": true
26+
},
27+
"include": ["src"]
28+
}

‎packages/storybook/tsconfig.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"files": [],
3+
"references": [
4+
{ "path": "./tsconfig.app.json" },
5+
{ "path": "./tsconfig.node.json" }
6+
]
7+
}

‎packages/storybook/tsconfig.node.json‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"compilerOptions": {
3+
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
4+
"target": "ES2023",
5+
"lib": ["ES2023"],
6+
"module": "ESNext",
7+
"types": ["node"],
8+
"skipLibCheck": true,
9+
10+
/* Bundler mode */
11+
"moduleResolution": "bundler",
12+
"allowImportingTsExtensions": true,
13+
"verbatimModuleSyntax": true,
14+
"moduleDetection": "force",
15+
"noEmit": true,
16+
17+
/* Linting */
18+
"strict": true,
19+
"noUnusedLocals": true,
20+
"noUnusedParameters": true,
21+
"erasableSyntaxOnly": true,
22+
"noFallthroughCasesInSwitch": true,
23+
"noUncheckedSideEffectImports": true
24+
},
25+
"include": ["_vite.config.ts"]
26+
}

0 commit comments

Comments
 (0)