From e5df064500a9d297a4ba1352885a68a6c34b1d84 Mon Sep 17 00:00:00 2001 From: Thomas Hallock Date: Thu, 18 Sep 2025 08:18:07 -0500 Subject: [PATCH] add: Storybook configuration for React abacus component development MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- packages/templates/.storybook/main.ts | 27 ++++++++++ packages/templates/.storybook/preview.ts | 67 ++++++++++++++++++++++++ packages/templates/package.json | 35 ++++++++++++- 3 files changed, 127 insertions(+), 2 deletions(-) create mode 100644 packages/templates/.storybook/main.ts create mode 100644 packages/templates/.storybook/preview.ts diff --git a/packages/templates/.storybook/main.ts b/packages/templates/.storybook/main.ts new file mode 100644 index 00000000..1a0a6f84 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/packages/templates/.storybook/preview.ts b/packages/templates/.storybook/preview.ts new file mode 100644 index 00000000..80ba561c --- /dev/null +++ b/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; \ No newline at end of file diff --git a/packages/templates/package.json b/packages/templates/package.json index 80ab73b4..a21f031c 100644 --- a/packages/templates/package.json +++ b/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": {