chore: migrate storybook

Author: openscript

.gitignore

@@ -253,3 +253,6 @@ $RECYCLE.BIN/
 .pnpm-store
 .nx/cache
 .nx/workspace-data
+
+
+storybook-static

.prettierignore

@@ -0,0 +1,5 @@
+# Add files here to ignore them from prettier formatting
+/dist
+/coverage
+/.nx/cache
+/.nx/workspace-data

.storybook/main.js

@@ -13,10 +13,7 @@
     },
     "lint": {
       "cache": true,
-      "inputs": [
-        "default",
-        "{workspaceRoot}/eslint.config.js"
-      ]
+      "inputs": ["default", "{workspaceRoot}/eslint.config.js"]
     },
     "e2e": {
       "cache": true
@@ -25,5 +22,16 @@
       "cache": true,
       "inputs": ["default", "^default"]
     }
-  }
+  },
+  "plugins": [
+    {
+      "plugin": "@nx/storybook/plugin",
+      "options": {
+        "serveStorybookTargetName": "storybook",
+        "buildStorybookTargetName": "build-storybook",
+        "testStorybookTargetName": "test-storybook",
+        "staticStorybookTargetName": "static-storybook"
+      }
+    }
+  ]
 }

.storybook/manager.js

@@ -6,7 +6,6 @@
     "lint": "pnpm exec nx run-many --target=lint --parallel",
     "test": "pnpm exec nx run-many --target=test --parallel --output-style=stream --skip-nx-cache",
     "test:watch": "pnpm exec nx run-many --target=test --watch --parallel --output-style=stream",
-    "prepublish": "pnpm exec nx run-many --target=prepare --parallel",
     "version": "changeset version",
     "tag": "changeset tag"
   },
@@ -15,11 +14,28 @@
   "packageManager": "[email protected]",
   "devDependencies": {
     "@changesets/cli": "^2.27.9",
+    "@chromatic-com/storybook": "^3",
     "@eslint/js": "^9.14.0",
     "@nx/eslint": "^20.0.12",
-    "@nx/eslint-plugin": "20.0.12",
-    "@nx/js": "^20.0.12",
+    "@nx/eslint-plugin": "20.2.1",
+    "@nx/js": "20.2.1",
+    "@nx/storybook": "^20.2.1",
     "@nx/vite": "^20.0.12",
+    "@nx/web": "20.2.1",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-docs": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.6",
+    "@storybook/addon-interactions": "^8.4.6",
+    "@storybook/core-server": "^8.4.6",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/react": "^8.4.6",
+    "@storybook/react-vite": "^8.4.6",
+    "@storybook/test": "^8.4.7",
+    "@storybook/test-runner": "^0.20.1",
+    "@storybook/theming": "^8.4.7",
+    "@swc-node/register": "~1.10.9",
+    "@swc/core": "~1.10.1",
+    "@swc/helpers": "~0.5.11",
     "@types/node": "^22.9.0",
     "@vitest/coverage-v8": "^2.1.4",
     "@vitest/ui": "^2.1.4",
@@ -29,10 +45,12 @@
     "globals": "^15.12.0",
     "nx": "^20.0.12",
     "prettier": "^3.3.3",
+    "storybook": "^8.4.6",
+    "ts-node": "10.9.2",
     "tslib": "^2.8.1",
     "tsx": "^4.19.2",
     "typescript": "^5.6.3",
-    "typescript-eslint": "^8.13.0",
+    "typescript-eslint": "^8.18.0",
     "vite": "^5.4.10",
     "vite-plugin-dts": "^4.3.0",
     "vitest": "^2.1.4"

.storybook/preview.js

@@ -0,0 +1,28 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions', '@chromatic-com/storybook'],
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: 'vite.config.ts',
+      },
+    },
+  },
+
+  docs: {},
+
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs

nx.json

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({
+  theme: theme,
+});

package.json

@@ -0,0 +1 @@
+export const tags = ["autodocs"];