add: Storybook configuration for React abacus component development

- Add complete Storybook 7.6.0 setup with TypeScript support
- Configure React Spring and use-gesture dependencies
- Add dev dependencies for interactive component development
- Enable hot reloading and component documentation

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

packages/templates/.storybook/main.ts

@@ -0,0 +1,27 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-actions',
+    '@storybook/addon-controls',
+    '@storybook/addon-docs',
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  typescript: {
+    check: false,
+    reactDocgen: 'react-docgen-typescript',
+    reactDocgenTypescriptOptions: {
+      shouldExtractLiteralValuesFromEnum: true,
+      propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
+    },
+  },
+};
+
+export default config;

packages/templates/.storybook/preview.ts

@@ -0,0 +1,67 @@
+import type { Preview } from '@storybook/react';
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      description: {
+        component: 'Interactive Soroban (Japanese Abacus) Components',
+      },
+    },
+    layout: 'centered',
+  },
+  argTypes: {
+    value: {
+      control: { type: 'number', min: 0, max: 99999 },
+      description: 'The numeric value to display on the abacus',
+    },
+    columns: {
+      control: { type: 'select' },
+      options: ['auto', 1, 2, 3, 4, 5],
+      description: 'Number of columns or auto-calculate based on value',
+    },
+    beadShape: {
+      control: { type: 'select' },
+      options: ['diamond', 'square', 'circle'],
+      description: 'Shape of the beads',
+    },
+    colorScheme: {
+      control: { type: 'select' },
+      options: ['monochrome', 'place-value', 'alternating', 'heaven-earth'],
+      description: 'Color scheme strategy',
+    },
+    colorPalette: {
+      control: { type: 'select' },
+      options: ['default', 'colorblind', 'mnemonic', 'grayscale', 'nature'],
+      description: 'Color palette for place values',
+    },
+    scaleFactor: {
+      control: { type: 'range', min: 0.5, max: 3, step: 0.1 },
+      description: 'Scale multiplier for component size',
+    },
+    animated: {
+      control: { type: 'boolean' },
+      description: 'Enable react-spring animations',
+    },
+    draggable: {
+      control: { type: 'boolean' },
+      description: 'Enable drag interactions with @use-gesture/react',
+    },
+    hideInactiveBeads: {
+      control: { type: 'boolean' },
+      description: 'Hide inactive beads completely',
+    },
+    showEmptyColumns: {
+      control: { type: 'boolean' },
+      description: 'Show leading zero columns',
+    },
+  },
+};
+
+export default preview;

packages/templates/package.json

@@ -6,6 +6,7 @@
   "types": "index.d.ts",
   "files": [
     "*.typ",
+    "*.tsx",
     "index.js",
     "index.d.ts",
     "svg-crop-processor.js",
@@ -32,7 +33,9 @@
     "examples:python": "python3 examples/python-example.py",
     "gallery": "node generate-gallery.js && node build-unified-gallery.js && open gallery-unified.html",
     "gallery:node": "node generate-gallery-node.js && node build-unified-gallery.js && open gallery-unified.html",
-    "gallery:clean": "rm -rf gallery/ gallery-static.html"
+    "gallery:clean": "rm -rf gallery/ gallery-static.html",
+    "storybook": "storybook dev -p 6007",
+    "build-storybook": "storybook build"
   },
   "keywords": [
     "typst",
@@ -42,8 +45,36 @@
     "flashcards",
     "monorepo",
     "typescript",
-    "python"
+    "python",
+    "react",
+    "svg",
+    "animations"
   ],
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@react-spring/web": "^9.7.0",
+    "@use-gesture/react": "^10.3.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.0.0",
+    "@storybook/addon-actions": "^7.6.0",
+    "@storybook/addon-essentials": "^7.6.0",
+    "@storybook/addon-interactions": "^7.6.0",
+    "@storybook/addon-links": "^7.6.0",
+    "@storybook/addon-controls": "^7.6.0",
+    "@storybook/addon-docs": "^7.6.0",
+    "@storybook/blocks": "^7.6.0",
+    "@storybook/react": "^7.6.0",
+    "@storybook/react-vite": "^7.6.0",
+    "@storybook/testing-library": "^0.2.2",
+    "storybook": "^7.6.0",
+    "vite": "^4.5.0"
+  },
   "author": "Soroban Flashcards Team",
   "license": "MIT",
   "repository": {