code-by-sia · code-by-sia · May 30, 2026 · May 30, 2026
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,6 @@
 node_modules/
 .idea/
 dist/
+storybook-static/
 .DS_Store
 *.iml
-
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,24 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const configDir = dirname(fileURLToPath(import.meta.url));
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(ts|tsx)'],
+  addons: ['@storybook/addon-docs'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  viteFinal: async (viteConfig) => {
+    viteConfig.resolve = viteConfig.resolve || {};
+    viteConfig.resolve.alias = {
+      ...(viteConfig.resolve.alias || {}),
+      '@': resolve(configDir, '../src'),
+    };
+    return viteConfig;
+  },
+};
+
+export default config;
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,4 @@
+<link href="https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
+      integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
+      crossorigin="anonymous">
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react-vite';
+import '../src/app/styles.css';
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    layout: 'fullscreen',
+  },
+};
+
+export default preview;
diff --git a/README.md b/README.md
@@ -71,6 +71,12 @@ Run unit tests:
 npm test
 ```
 
+Run Storybook for isolated UI development:
+
+```sh
+npm run storybook
+```
+
 ## Documentation
 
 Additional documentation is available in the [`docs/`](docs/) directory:

diff --git a/docs/assets/index-Ca8yA5D4.css → docs/assets/index-Bu-CVJUF.css b/docs/assets/index-Ca8yA5D4.css → docs/assets/index-Bu-CVJUF.css
diff --git a/docs/assets/index-DGmfnYFC.js → docs/assets/index-Vds5Mw57.js b/docs/assets/index-DGmfnYFC.js → docs/assets/index-Vds5Mw57.js
diff --git a/docs/development.md b/docs/development.md
@@ -49,9 +49,26 @@ npm run typecheck
 - `npm run dev`: start the local Vite server.
 - `npm run build`: create the production build in `docs/`.
 - `npm run preview`: preview the production build locally.
+- `npm run storybook`: start Storybook on port 6006.
+- `npm run build-storybook`: build static Storybook output.
 - `npm test`: run Vitest once.
 - `npm run typecheck`: run TypeScript without emitting files.
 
+## Storybook
+
+Storybook documents the React UI layer in isolation. Start it with:
+
+```bash
+npm run storybook
+```
+
+Initial stories live beside the UI components they document:
+
+- `src/shared/ui/*.stories.tsx`
+- `src/features/ribbon/*.stories.tsx`
+
+Use Storybook for component states, visual review, and UI experiments that do not require the spreadsheet canvas.
+
 ## Contribution Workflow
 
 1. Create an issue.

diff --git a/docs/index.html b/docs/index.html
@@ -10,8 +10,8 @@
         crossorigin="anonymous">
   <link rel="icon" href="/OpenWebSheet/favicon.ico">
   <title>Open web sheet</title>
-  <script type="module" crossorigin src="/OpenWebSheet/assets/index-DGmfnYFC.js"></script>
-  <link rel="stylesheet" crossorigin href="/OpenWebSheet/assets/index-Ca8yA5D4.css">
+  <script type="module" crossorigin src="/OpenWebSheet/assets/index-Vds5Mw57.js"></script>
+  <link rel="stylesheet" crossorigin href="/OpenWebSheet/assets/index-Bu-CVJUF.css">
 </head>
 <body>
   <noscript>