feat: integrate Storybook for Ability components and add stories

- Updated tsconfig.json to include Storybook configuration and story files.
- Created main Storybook configuration in .storybook/main.ts.
- Added preview configuration in .storybook/preview.js for Mantine styles and parameters.
- Developed AbilityCard stories with mock data and decorators for context providers.
- Implemented ThemeToggle stories with light and dark mode support.
- Defined Zod schemas for ability tags in abilities_tags.zod.ts.
- Created AbilityManualDetailPage stories with mock data and context.
- Added tsconfig.storybook.json for Storybook-specific TypeScript settings.

Author: manchuwook

.gitignore

@@ -13,4 +13,6 @@ coverage
 .cursor/rules/nx-rules.mdc
 .github/instructions/nx.instructions.md
 vite.config.*.timestamp*
-vitest.config.*.timestamp*
+vitest.config.*.timestamp*
+
+storybook-static

.storybook/main.ts

@@ -0,0 +1,20 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.@(mdx|stories.@(js|jsx|ts|tsx))'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {
+      builder: {
+        viteConfigPath: 'vite.config.ts',
+      },
+    },
+  },
+};
+
+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

.storybook/preview.js

@@ -0,0 +1,30 @@
+import '@mantine/core/styles.css';
+import '@mantine/notifications/styles.css';
+import '@mantine/dates/styles.css';
+
+const preview = {
+    parameters: {
+        actions: { argTypesRegex: "^on[A-Z].*" },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        backgrounds: {
+            default: 'light',
+            values: [
+                {
+                    name: 'light',
+                    value: '#ffffff',
+                },
+                {
+                    name: 'dark',
+                    value: '#1A1B1E',
+                },
+            ],
+        },
+    },
+};
+
+export default preview;

.vscode/mcp.json

@@ -19,6 +19,13 @@
     "cloudflare-docs": {
       "command": "npx",
       "args": ["mcp-remote", "https://docs.mcp.cloudflare.com/sse"]
+    },
+    "mantine": {
+      "command": "npx",
+      "args": ["@hakxel/mantine-ui-server"],
+      "env": {
+        "MANTINE_VERSION": "7.17.7" // Optional: specify version
+      }
     }
   }
 }

nx.json

@@ -15,6 +15,15 @@
         "buildDepsTargetName": "build-deps",
         "watchDepsTargetName": "watch-deps"
       }
+    },
+    {
+      "plugin": "@nx/storybook/plugin",
+      "options": {
+        "serveStorybookTargetName": "storybook",
+        "buildStorybookTargetName": "build-storybook",
+        "testStorybookTargetName": "test-storybook",
+        "staticStorybookTargetName": "static-storybook"
+      }
     }
   ]
 }

package.json

@@ -60,9 +60,18 @@
     "@nx/eslint": "^21.1.2",
     "@nx/js": "21.1.2",
     "@nx/react": "^21.1.2",
+    "@nx/storybook": "21.1.2",
     "@nx/vite": "21.1.2",
     "@nx/web": "21.1.2",
     "@rollup/plugin-dynamic-import-vars": "^2.1.5",
+    "@storybook/addon-essentials": "8.6.14",
+    "@storybook/addon-interactions": "^8.6.11",
+    "@storybook/core-server": "8.6.14",
+    "@storybook/jest": "^0.2.3",
+    "@storybook/react": "8.6.14",
+    "@storybook/react-vite": "8.6.14",
+    "@storybook/test-runner": "^0.22.0",
+    "@storybook/testing-library": "^0.2.2",
     "@swc-node/register": "~1.9.1",
     "@swc/core": "~1.5.7",
     "@swc/helpers": "~0.5.11",
@@ -90,7 +99,9 @@
     "prettier": "^2.6.2",
     "rimraf": "^6.0.1",
     "rollup-plugin-visualizer": "^6.0.0",
+    "storybook": "8.6.14",
     "terser": "^5.39.2",
+    "ts-node": "10.9.1",
     "typescript": "^5.8.3",
     "vite-plugin-bundle-analyzer": "^0.0.1",
     "vite-plugin-compression": "^0.5.1",