From f7534d901b1bf204e92ef2fab48ba5053733d1d4 Mon Sep 17 00:00:00 2001 From: FragginWagon Date: Tue, 8 Sep 2026 21:43:26 -0400 Subject: [PATCH] feat: migrate visual fixtures to storybook --- .local/project-ports.json | 10 +- README.md | 10 + apps/web/.storybook/main.js | 20 + apps/web/.storybook/preview.js | 26 + apps/web/package.json | 2 + apps/web/src/App.vue | 3 + apps/web/src/assets/styles/global-tokens.scss | 110 + apps/web/src/assets/styles/global.scss | 136 +- .../src/components/molecules/ListingCard.scss | 25 +- .../molecules/ListingCard.stories.js | 22 + .../organisms/DesignSystemShowcase.stories.js | 8 + .../organisms/DesignSystemShowcase.vue | 136 + apps/web/src/composables/useTheme.js | 30 + .../assets/Color-YHDXOIA2-CAjHKXV5.js | 1 + .../DesignSystemShowcase.stories-CBasa7mO.js | 1 + .../assets/DocsRenderer-CFRXHY34-BZ6DD22w.js | 623 + .../assets/ListingCard.stories-IoNR1hI7.js | 28 + .../assets/_commonjsHelpers-CqkleIqs.js | 1 + .../storybook-static/assets/axe-BvpLO7uO.js | 30 + .../assets/entry-preview-CGVAO5Fg.js | 1 + .../assets/entry-preview-docs-CnIUST3K.js | 16 + .../assets/iframe-BYP-OqC3.js | 211 + .../storybook-static/assets/index-8_2S3kac.js | 11 + .../storybook-static/assets/index-Bhqu_tAV.js | 6 + .../storybook-static/assets/index-ByeaK1nt.js | 1 + .../assets/matchers-7Z3WT2CE-T3xScrR7.js | 14 + .../assets/preview-B0GEC7uH.js | 34 + .../assets/preview-BBWR9nbA.js | 1 + .../assets/preview-BwSvqabu.js | 2 + .../assets/preview-CCCznEf4.js | 396 + .../assets/preview-CUsaxwq0.js | 1 + .../assets/preview-CvbIS5ZJ.js | 1 + .../assets/preview-DD_OYowb.js | 1 + .../assets/preview-DGUiP6tS.js | 7 + .../assets/preview-DxcmNWIE.css | 1 + .../assets/preview-zA01MCnV.js | 241 + .../assets/vue.esm-bundler-c7-UdoSZ.js | 38 + apps/web/storybook-static/favicon.svg | 1 + apps/web/storybook-static/iframe.html | 666 + apps/web/storybook-static/index.html | 173 + apps/web/storybook-static/index.json | 1 + .../nunito-sans-bold-italic.woff2 | Bin 0 -> 49460 bytes .../storybook-static/nunito-sans-bold.woff2 | Bin 0 -> 47144 bytes .../storybook-static/nunito-sans-italic.woff2 | Bin 0 -> 49620 bytes .../nunito-sans-regular.woff2 | Bin 0 -> 47072 bytes apps/web/storybook-static/project.json | 1 + .../sb-addons/a11y-9/manager-bundle.js | 220 + .../essentials-actions-2/manager-bundle.js | 3 + .../manager-bundle.js | 12 + .../essentials-controls-1/manager-bundle.js | 405 + .../essentials-docs-3/manager-bundle.js | 245 + .../essentials-measure-7/manager-bundle.js | 3 + .../essentials-outline-8/manager-bundle.js | 3 + .../essentials-toolbars-6/manager-bundle.js | 3 + .../essentials-viewport-5/manager-bundle.js | 3 + .../common-manager-bundle.js | 3 + .../sb-common-assets/favicon.svg | 1 + .../nunito-sans-bold-italic.woff2 | Bin 0 -> 49460 bytes .../sb-common-assets/nunito-sans-bold.woff2 | Bin 0 -> 47144 bytes .../sb-common-assets/nunito-sans-italic.woff2 | Bin 0 -> 49620 bytes .../nunito-sans-regular.woff2 | Bin 0 -> 47072 bytes .../sb-manager/globals-module-info.js | 1052 + .../sb-manager/globals-runtime.js | 42127 ++++++++++++++++ .../storybook-static/sb-manager/globals.js | 48 + .../storybook-static/sb-manager/runtime.js | 12048 +++++ docs/DESIGN.md | 702 +- docs/IMPLEMENTATION-STATUS.md | 1 + package-lock.json | 3602 +- package.json | 8 +- 69 files changed, 62947 insertions(+), 589 deletions(-) create mode 100644 apps/web/.storybook/main.js create mode 100644 apps/web/.storybook/preview.js create mode 100644 apps/web/src/assets/styles/global-tokens.scss create mode 100644 apps/web/src/components/organisms/DesignSystemShowcase.stories.js create mode 100644 apps/web/src/components/organisms/DesignSystemShowcase.vue create mode 100644 apps/web/src/composables/useTheme.js create mode 100644 apps/web/storybook-static/assets/Color-YHDXOIA2-CAjHKXV5.js create mode 100644 apps/web/storybook-static/assets/DesignSystemShowcase.stories-CBasa7mO.js create mode 100644 apps/web/storybook-static/assets/DocsRenderer-CFRXHY34-BZ6DD22w.js create mode 100644 apps/web/storybook-static/assets/ListingCard.stories-IoNR1hI7.js create mode 100644 apps/web/storybook-static/assets/_commonjsHelpers-CqkleIqs.js create mode 100644 apps/web/storybook-static/assets/axe-BvpLO7uO.js create mode 100644 apps/web/storybook-static/assets/entry-preview-CGVAO5Fg.js create mode 100644 apps/web/storybook-static/assets/entry-preview-docs-CnIUST3K.js create mode 100644 apps/web/storybook-static/assets/iframe-BYP-OqC3.js create mode 100644 apps/web/storybook-static/assets/index-8_2S3kac.js create mode 100644 apps/web/storybook-static/assets/index-Bhqu_tAV.js create mode 100644 apps/web/storybook-static/assets/index-ByeaK1nt.js create mode 100644 apps/web/storybook-static/assets/matchers-7Z3WT2CE-T3xScrR7.js create mode 100644 apps/web/storybook-static/assets/preview-B0GEC7uH.js create mode 100644 apps/web/storybook-static/assets/preview-BBWR9nbA.js create mode 100644 apps/web/storybook-static/assets/preview-BwSvqabu.js create mode 100644 apps/web/storybook-static/assets/preview-CCCznEf4.js create mode 100644 apps/web/storybook-static/assets/preview-CUsaxwq0.js create mode 100644 apps/web/storybook-static/assets/preview-CvbIS5ZJ.js create mode 100644 apps/web/storybook-static/assets/preview-DD_OYowb.js create mode 100644 apps/web/storybook-static/assets/preview-DGUiP6tS.js create mode 100644 apps/web/storybook-static/assets/preview-DxcmNWIE.css create mode 100644 apps/web/storybook-static/assets/preview-zA01MCnV.js create mode 100644 apps/web/storybook-static/assets/vue.esm-bundler-c7-UdoSZ.js create mode 100644 apps/web/storybook-static/favicon.svg create mode 100644 apps/web/storybook-static/iframe.html create mode 100644 apps/web/storybook-static/index.html create mode 100644 apps/web/storybook-static/index.json create mode 100644 apps/web/storybook-static/nunito-sans-bold-italic.woff2 create mode 100644 apps/web/storybook-static/nunito-sans-bold.woff2 create mode 100644 apps/web/storybook-static/nunito-sans-italic.woff2 create mode 100644 apps/web/storybook-static/nunito-sans-regular.woff2 create mode 100644 apps/web/storybook-static/project.json create mode 100644 apps/web/storybook-static/sb-addons/a11y-9/manager-bundle.js create mode 100644 apps/web/storybook-static/sb-addons/essentials-actions-2/manager-bundle.js create mode 100644 apps/web/storybook-static/sb-addons/essentials-backgrounds-4/manager-bundle.js create mode 100644 apps/web/storybook-static/sb-addons/essentials-controls-1/manager-bundle.js create mode 100644 apps/web/storybook-static/sb-addons/essentials-docs-3/manager-bundle.js create mode 100644 apps/web/storybook-static/sb-addons/essentials-measure-7/manager-bundle.js create mode 100644 apps/web/storybook-static/sb-addons/essentials-outline-8/manager-bundle.js create mode 100644 apps/web/storybook-static/sb-addons/essentials-toolbars-6/manager-bundle.js create mode 100644 apps/web/storybook-static/sb-addons/essentials-viewport-5/manager-bundle.js create mode 100644 apps/web/storybook-static/sb-addons/storybook-core-core-server-presets-0/common-manager-bundle.js create mode 100644 apps/web/storybook-static/sb-common-assets/favicon.svg create mode 100644 apps/web/storybook-static/sb-common-assets/nunito-sans-bold-italic.woff2 create mode 100644 apps/web/storybook-static/sb-common-assets/nunito-sans-bold.woff2 create mode 100644 apps/web/storybook-static/sb-common-assets/nunito-sans-italic.woff2 create mode 100644 apps/web/storybook-static/sb-common-assets/nunito-sans-regular.woff2 create mode 100644 apps/web/storybook-static/sb-manager/globals-module-info.js create mode 100644 apps/web/storybook-static/sb-manager/globals-runtime.js create mode 100644 apps/web/storybook-static/sb-manager/globals.js create mode 100644 apps/web/storybook-static/sb-manager/runtime.js diff --git a/.local/project-ports.json b/.local/project-ports.json index cd79ac8..4760605 100644 --- a/.local/project-ports.json +++ b/.local/project-ports.json @@ -2,8 +2,8 @@ "version": 1, "projectName": "pokemon-inventory", "projectPath": "/Users/fragginwagon/Developer/Source Code/pokemon/pokemon-inventory", - "updatedAt": "2026-09-08T23:54:46.326Z", - "lastSeenAt": "2026-09-08T23:54:46.326Z", + "updatedAt": "2026-09-09T01:42:54.487Z", + "lastSeenAt": "2026-09-09T01:42:54.487Z", "ports": [ { "service": "api", @@ -23,6 +23,12 @@ "port": 5433, "notes": "" }, + { + "service": "storybook", + "protocol": "tcp", + "port": 6006, + "notes": "" + }, { "service": "redis", "protocol": "tcp", diff --git a/README.md b/README.md index c235f02..306f71c 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,16 @@ This command starts healthy PostgreSQL and Redis containers, applies migrations, The command does not provision an administrator automatically. Run `npm run provision:admin` once after setting the initial administrator variables in `.env` when admin access is needed. Stop the application processes with `Ctrl+C`; stop the containers separately with `npm run db:down` when they are no longer needed. +## Visual Development + +Run Storybook to inspect the authoritative design tokens and mock visual fixtures without requiring API data: + +```sh +npm run storybook +``` + +Open `http://localhost:6006/`. Use the Storybook theme toolbar to switch between light and dark themes. The accessibility addon is enabled for component review. The fixture showcase is intentionally mock-only and is not part of the production router. + ## Initial Administrator After the development database is migrated, set `INITIAL_ADMIN_EMAIL`, `INITIAL_ADMIN_PASSWORD`, and `INITIAL_SELLER_NAME` in your local `.env`, then run `npm run provision:admin` once. The command creates the only initial administrator and linked Seller; it refuses to run after any User exists. diff --git a/apps/web/.storybook/main.js b/apps/web/.storybook/main.js new file mode 100644 index 0000000..fd06fe2 --- /dev/null +++ b/apps/web/.storybook/main.js @@ -0,0 +1,20 @@ +import { fileURLToPath } from 'node:url'; + +export default { + stories: ['../src/**/*.stories.js'], + addons: ['@storybook/addon-essentials', '@storybook/addon-a11y'], + framework: { + name: '@storybook/vue3-vite', + options: {}, + }, + viteFinal: async (config) => ({ + ...config, + resolve: { + ...config.resolve, + alias: { + ...config.resolve?.alias, + '@': fileURLToPath(new URL('../src', import.meta.url)), + }, + }, + }), +}; diff --git a/apps/web/.storybook/preview.js b/apps/web/.storybook/preview.js new file mode 100644 index 0000000..a63f80b --- /dev/null +++ b/apps/web/.storybook/preview.js @@ -0,0 +1,26 @@ +import '../src/assets/styles/global.scss'; + +export const globalTypes = { + theme: { + description: 'Global color theme', + defaultValue: 'light', + toolbar: { + icon: 'paintbrush', + items: ['light', 'dark'], + dynamicTitle: true, + }, + }, +}; + +export const decorators = [ + (story, context) => { + document.documentElement.dataset.theme = context.globals.theme; + return story(); + }, +]; + +export const parameters = { + controls: { expanded: true }, + a11y: { test: 'todo' }, + layout: 'fullscreen', +}; diff --git a/apps/web/package.json b/apps/web/package.json index 03969d6..f97e514 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -5,6 +5,8 @@ "scripts": { "dev": "vite", "build": "vite build", + "storybook": "storybook dev -p 6006", + "build-storybook": "storybook build", "test": "node --test tests/*.test.js" }, "dependencies": { diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue index 6a6cd2d..7b84f05 100644 --- a/apps/web/src/App.vue +++ b/apps/web/src/App.vue @@ -1,5 +1,8 @@