Skip to content

Commit 3de70cf

Browse files
code-by-siacode-by-sia
authored
feat: add storybook for React UI (#64)
Co-authored-by: Sia <me@siamand.cc>
1 parent fbc538e commit 3de70cf

16 files changed

Lines changed: 2842 additions & 104 deletions

‎.gitignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
node_modules/
22
.idea/
33
dist/
4+
storybook-static/
45
.DS_Store
56
*.iml
6-

‎.storybook/main.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import type { StorybookConfig } from '@storybook/react-vite';
2+
import { dirname, resolve } from 'node:path';
3+
import { fileURLToPath } from 'node:url';
4+
5+
const configDir = dirname(fileURLToPath(import.meta.url));
6+
7+
const config: StorybookConfig = {
8+
stories: ['../src/**/*.stories.@(ts|tsx)'],
9+
addons: ['@storybook/addon-docs'],
10+
framework: {
11+
name: '@storybook/react-vite',
12+
options: {},
13+
},
14+
viteFinal: async (viteConfig) => {
15+
viteConfig.resolve = viteConfig.resolve || {};
16+
viteConfig.resolve.alias = {
17+
...(viteConfig.resolve.alias || {}),
18+
'@': resolve(configDir, '../src'),
19+
};
20+
return viteConfig;
21+
},
22+
};
23+
24+
export default config;

‎.storybook/preview-head.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i&display=swap" rel="stylesheet">
2+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
3+
integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
4+
crossorigin="anonymous">

‎.storybook/preview.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import type { Preview } from '@storybook/react-vite';
2+
import '../src/app/styles.css';
3+
4+
const preview: Preview = {
5+
parameters: {
6+
controls: {
7+
matchers: {
8+
color: /(background|color)$/i,
9+
date: /Date$/i,
10+
},
11+
},
12+
layout: 'fullscreen',
13+
},
14+
};
15+
16+
export default preview;

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,12 @@ Run unit tests:
7171
npm test
7272
```
7373

74+
Run Storybook for isolated UI development:
75+
76+
```sh
77+
npm run storybook
78+
```
79+
7480
## Documentation
7581

7682
Additional documentation is available in the [`docs/`](docs/) directory:

docs/assets/index-Ca8yA5D4.css renamed to docs/assets/index-Bu-CVJUF.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/assets/index-DGmfnYFC.js renamed to docs/assets/index-Vds5Mw57.js

File renamed without changes.

‎docs/development.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,26 @@ npm run typecheck
4949
- `npm run dev`: start the local Vite server.
5050
- `npm run build`: create the production build in `docs/`.
5151
- `npm run preview`: preview the production build locally.
52+
- `npm run storybook`: start Storybook on port 6006.
53+
- `npm run build-storybook`: build static Storybook output.
5254
- `npm test`: run Vitest once.
5355
- `npm run typecheck`: run TypeScript without emitting files.
5456

57+
## Storybook
58+
59+
Storybook documents the React UI layer in isolation. Start it with:
60+
61+
```bash
62+
npm run storybook
63+
```
64+
65+
Initial stories live beside the UI components they document:
66+
67+
- `src/shared/ui/*.stories.tsx`
68+
- `src/features/ribbon/*.stories.tsx`
69+
70+
Use Storybook for component states, visual review, and UI experiments that do not require the spreadsheet canvas.
71+
5572
## Contribution Workflow
5673

5774
1. Create an issue.

‎docs/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
crossorigin="anonymous">
1111
<link rel="icon" href="/OpenWebSheet/favicon.ico">
1212
<title>Open web sheet</title>
13-
<script type="module" crossorigin src="/OpenWebSheet/assets/index-DGmfnYFC.js"></script>
14-
<link rel="stylesheet" crossorigin href="/OpenWebSheet/assets/index-Ca8yA5D4.css">
13+
<script type="module" crossorigin src="/OpenWebSheet/assets/index-Vds5Mw57.js"></script>
14+
<link rel="stylesheet" crossorigin href="/OpenWebSheet/assets/index-Bu-CVJUF.css">
1515
</head>
1616
<body>
1717
<noscript>

0 commit comments

Comments
 (0)