From bbec620d00a997a927e81521d28dfb9c2d417bb7 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Sun, 30 Nov 2025 06:02:41 -0800 Subject: [PATCH] add storybook setup and initial stories --- .storybook/main.ts | 39 +-- .storybook/preview-head.html | 10 + .storybook/preview.ts | 58 ++++- .storybook/storybook-overrides.css | 16 ++ .../game/DatabaseCells.stories.svelte | 223 ++++++++++++++++ .../game/ElementLabel.stories.svelte | 87 +++++++ .../components/game/JobItem.stories.svelte | 102 ++++++++ .../game/JobPortrait.stories.svelte | 168 +++++++++++++ .../game/ProficiencyLabel.stories.svelte | 120 +++++++++ .../game/UncapIndicator.stories.svelte | 188 ++++++++++++++ .../components/ui/Button.stories.svelte | 186 ++++++++++++++ .../components/ui/Checkbox.stories.svelte | 178 +++++++++++++ .../components/ui/Dialog.stories.svelte | 161 ++++++++++++ .../components/ui/DropdownMenu.stories.svelte | 133 ++++++++++ .../components/ui/Input.stories.svelte | 171 +++++++++++++ .../ui/SegmentedControl.stories.svelte | 138 ++++++++++ .../components/ui/Select.stories.svelte | 154 ++++++++++++ .../components/ui/Switch.stories.svelte | 134 ++++++++++ .../components/ui/Tooltip.stories.svelte | 89 +++++++ .../components/ui/Typeahead.stories.svelte | 174 +++++++++++++ src/stories/foundations/Colors.mdx | 238 ++++++++++++++++++ src/stories/foundations/Elements.mdx | 232 +++++++++++++++++ src/stories/foundations/Spacing.mdx | 143 +++++++++++ src/stories/foundations/Typography.mdx | 119 +++++++++ src/stories/mocks/characters.ts | 62 +++++ src/stories/mocks/jobs.ts | 38 +++ src/stories/mocks/summons.ts | 51 ++++ src/stories/mocks/weapons.ts | 89 +++++++ 28 files changed, 3477 insertions(+), 24 deletions(-) create mode 100644 .storybook/preview-head.html create mode 100644 .storybook/storybook-overrides.css create mode 100644 src/stories/components/game/DatabaseCells.stories.svelte create mode 100644 src/stories/components/game/ElementLabel.stories.svelte create mode 100644 src/stories/components/game/JobItem.stories.svelte create mode 100644 src/stories/components/game/JobPortrait.stories.svelte create mode 100644 src/stories/components/game/ProficiencyLabel.stories.svelte create mode 100644 src/stories/components/game/UncapIndicator.stories.svelte create mode 100644 src/stories/components/ui/Button.stories.svelte create mode 100644 src/stories/components/ui/Checkbox.stories.svelte create mode 100644 src/stories/components/ui/Dialog.stories.svelte create mode 100644 src/stories/components/ui/DropdownMenu.stories.svelte create mode 100644 src/stories/components/ui/Input.stories.svelte create mode 100644 src/stories/components/ui/SegmentedControl.stories.svelte create mode 100644 src/stories/components/ui/Select.stories.svelte create mode 100644 src/stories/components/ui/Switch.stories.svelte create mode 100644 src/stories/components/ui/Tooltip.stories.svelte create mode 100644 src/stories/components/ui/Typeahead.stories.svelte create mode 100644 src/stories/foundations/Colors.mdx create mode 100644 src/stories/foundations/Elements.mdx create mode 100644 src/stories/foundations/Spacing.mdx create mode 100644 src/stories/foundations/Typography.mdx create mode 100644 src/stories/mocks/characters.ts create mode 100644 src/stories/mocks/jobs.ts create mode 100644 src/stories/mocks/summons.ts create mode 100644 src/stories/mocks/weapons.ts diff --git a/.storybook/main.ts b/.storybook/main.ts index a429e076..a0edf5d8 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,20 +1,29 @@ import type { StorybookConfig } from '@storybook/sveltekit'; +import remarkGfm from 'remark-gfm'; const config: StorybookConfig = { - "stories": [ - "../src/**/*.mdx", - "../src/**/*.stories.@(js|ts|svelte)" - ], - "addons": [ - "@storybook/addon-svelte-csf", - "@chromatic-com/storybook", - "@storybook/addon-docs", - "@storybook/addon-a11y", - "@storybook/addon-vitest" - ], - "framework": { - "name": "@storybook/sveltekit", - "options": {} - } + stories: ['../src/stories/**/*.mdx', '../src/stories/**/*.stories.@(js|ts|svelte)'], + addons: [ + '@storybook/addon-svelte-csf', + '@chromatic-com/storybook', + { + name: '@storybook/addon-docs', + options: { + mdxPluginOptions: { + mdxCompileOptions: { + remarkPlugins: [remarkGfm] + } + } + } + }, + '@storybook/addon-a11y', + '@storybook/addon-vitest' + ], + framework: { + name: '@storybook/sveltekit', + options: {} + }, + staticDirs: ['../static'] }; + export default config; \ No newline at end of file diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html new file mode 100644 index 00000000..17a0c06f --- /dev/null +++ b/.storybook/preview-head.html @@ -0,0 +1,10 @@ + + diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 20a11e09..32361091 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,14 +1,54 @@ -import type { Preview } from '@storybook/sveltekit' +import type { Preview } from '@storybook/sveltekit'; +import '$src/app.scss'; +import './storybook-overrides.css'; const preview: Preview = { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/i, - }, - }, - }, + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i + } + }, + viewport: { + options: { + phone: { name: 'Phone', styles: { width: '375px', height: '667px' } }, + tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px' } }, + laptop: { name: 'Laptop', styles: { width: '1280px', height: '800px' } }, + desktop: { name: 'Desktop', styles: { width: '1920px', height: '1080px' } } + } + }, + backgrounds: { + options: { + light: { name: 'light', value: '#f5f5f5' }, + dark: { name: 'dark', value: '#191919' }, + "card-light": { name: 'card-light', value: '#ffffff' }, + "card-dark": { name: 'card-dark', value: '#212121' } + } + }, + docs: { + toc: true + } + }, + + globalTypes: { + theme: { + name: 'Theme', + description: 'Global theme for components', + defaultValue: 'light', + toolbar: { + icon: 'circlehollow', + items: ['light', 'dark'], + showName: true + } + } + }, + + initialGlobals: { + backgrounds: { + value: 'light' + } + } }; export default preview; \ No newline at end of file diff --git a/.storybook/storybook-overrides.css b/.storybook/storybook-overrides.css new file mode 100644 index 00000000..f73eb3c0 --- /dev/null +++ b/.storybook/storybook-overrides.css @@ -0,0 +1,16 @@ +/* Storybook-specific overrides */ + +/* Allow scrolling in Storybook (app.scss sets overflow: hidden for custom layout scrolling) */ +body { + overflow: auto !important; + height: auto !important; +} + +html { + height: auto !important; +} + +/* Ensure docs pages can scroll */ +.sbdocs-wrapper { + overflow: auto !important; +} diff --git a/src/stories/components/game/DatabaseCells.stories.svelte b/src/stories/components/game/DatabaseCells.stories.svelte new file mode 100644 index 00000000..f583bf17 --- /dev/null +++ b/src/stories/components/game/DatabaseCells.stories.svelte @@ -0,0 +1,223 @@ + + + + +
+ +
+ + + + +
+ +
+ + + + +
+ +
+ + + + +
+ {#each elements as el} +
+ + {el.name} +
+ {/each} +
+ + + + +
+ {#each proficiencies as prof} +
+ + {prof.name} +
+ {/each} +
+ + + + +
+
+ Regular FLB: + +
+
+ Regular ULB: + +
+
+ Transcendence: + +
+
+ Special ULB: + +
+
+ + + + +
+
+ MLB (3★): + +
+
+ FLB (4★): + +
+
+ ULB (5★): + +
+
+ Transcendence: + +
+
+ + + + +
+
+ MLB (3★): + +
+
+ FLB (4★): + +
+
+ ULB (5★): + +
+
+ Transcendence: + +
+
+ + diff --git a/src/stories/components/game/ElementLabel.stories.svelte b/src/stories/components/game/ElementLabel.stories.svelte new file mode 100644 index 00000000..3494fc68 --- /dev/null +++ b/src/stories/components/game/ElementLabel.stories.svelte @@ -0,0 +1,87 @@ + + + + + + + +
+ {#each elements as el} +
+ + {el.name} +
+ {/each} +
+ + + + +
+
+ Small: + {#each elements as el} + + {/each} +
+
+ Medium: + {#each elements as el} + + {/each} +
+
+ Large: + {#each elements as el} + + {/each} +
+
+ X-Large: + {#each elements as el} + + {/each} +
+
+ diff --git a/src/stories/components/game/JobItem.stories.svelte b/src/stories/components/game/JobItem.stories.svelte new file mode 100644 index 00000000..77d3571d --- /dev/null +++ b/src/stories/components/game/JobItem.stories.svelte @@ -0,0 +1,102 @@ + + + + + + + + + + + + +
+ + Has UM badge +
+ + + + +
+ + No UM badge +
+ + + + +
+ + Shows multiple proficiency icons +
+ + + + +
+ (selectedJob = mockJob.id)} + /> + (selectedJob = mockJobNoUM.id)} + /> + (selectedJob = mockJobMultiProf.id)} + /> +
+ + + + +
+

Click to select a job

+ (interactiveSelected = 'job-1')} + /> + (interactiveSelected = 'job-2')} + /> + (interactiveSelected = 'job-3')} + /> +

+ Selected: {interactiveSelected ? `Job ${interactiveSelected}` : 'None'} +

+
+ diff --git a/src/stories/components/game/JobPortrait.stories.svelte b/src/stories/components/game/JobPortrait.stories.svelte new file mode 100644 index 00000000..bfcd2656 --- /dev/null +++ b/src/stories/components/game/JobPortrait.stories.svelte @@ -0,0 +1,168 @@ + + + + + + + +
+
+ + Small +
+
+ + Medium +
+
+ + Large +
+
+ + + + +
+
+ + Gran +
+
+ + Djeeta +
+
+ + + + +
+
+ + Wind +
+
+ + Fire +
+
+ + Water +
+
+ + Earth +
+
+ + Light +
+
+ + Dark +
+
+ + + + +
+
+ + With Placeholder +
+
+ + No Placeholder +
+
+ + + + +
+
+ alert('Clicked!')} /> + Clickable (hover to see effect) +
+
+ + Non-clickable +
+
+ + + + +
+
+ + {mockJob.name.en} +
+
+ + {mockJobNoUM.name.en} +
+
+ + {mockJobMultiProf.name.en} +
+
+ diff --git a/src/stories/components/game/ProficiencyLabel.stories.svelte b/src/stories/components/game/ProficiencyLabel.stories.svelte new file mode 100644 index 00000000..d4f100f8 --- /dev/null +++ b/src/stories/components/game/ProficiencyLabel.stories.svelte @@ -0,0 +1,120 @@ + + + + + + + +
+ {#each proficiencies as prof} +
+ + {prof.name} +
+ {/each} +
+ + + + +
+
+ Small: + {#each proficiencies.slice(0, 5) as prof} + + {/each} +
+
+ Medium: + {#each proficiencies.slice(0, 5) as prof} + + {/each} +
+
+ Large: + {#each proficiencies.slice(0, 5) as prof} + + {/each} +
+
+ X-Large: + {#each proficiencies.slice(0, 5) as prof} + + {/each} +
+
+ + + + +
+ Proficiencies +
+ + Sabre +
+
+ + Katana +
+
+ + + + +
+ + +
+ diff --git a/src/stories/components/game/UncapIndicator.stories.svelte b/src/stories/components/game/UncapIndicator.stories.svelte new file mode 100644 index 00000000..1258c154 --- /dev/null +++ b/src/stories/components/game/UncapIndicator.stories.svelte @@ -0,0 +1,188 @@ + + + + + + + + + + + + + + + + + + +
+
+ 3★ MLB: + +
+
+ 4★ FLB: + +
+
+ 5★ ULB: + +
+
+ + + + +
+
+ 3★ MLB: + +
+
+ 4★ FLB: + +
+
+ 5★ ULB: + +
+
+ 6★ Transcendence: + +
+
+ + + + +
+
+ 3★ MLB: + +
+
+ 4★ FLB: + +
+
+ 5★ ULB: + +
+
+ 6★ Transcendence: + +
+
+ + + + +
+
+ 0/4: + +
+
+ 1/4: + +
+
+ 2/4: + +
+
+ 3/4: + +
+
+ 4/4: + +
+
+ + + + +
+ {#each [0, 1, 2, 3, 4, 5] as stage} +
+ Stage {stage}: + +
+ {/each} +
+ + + + +
+

Click stars to change uncap level

+ (editableUncap = level)} + updateTranscendence={(stage) => (editableTrans = stage)} + /> +

+ Current: {editableUncap}★ / Transcendence: {editableTrans} +

+
+ + diff --git a/src/stories/components/ui/Button.stories.svelte b/src/stories/components/ui/Button.stories.svelte new file mode 100644 index 00000000..fa7eca99 --- /dev/null +++ b/src/stories/components/ui/Button.stories.svelte @@ -0,0 +1,186 @@ + + + + + {#snippet children()}Button{/snippet} + + + + +
+ {#each variants as variant} + + {/each} +
+ + + + +
+ {#each sizes as size} + + {/each} +
+ + + + +
+ {#each variants as variant} + + {/each} +
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+
+

Without elementStyle

+
+ {#each elements as element} + + {/each} +
+
+
+

With elementStyle

+
+ {#each elements as element} + + {/each} +
+
+
+ + + + +
+ + +
+ + + + +
+ + +
+ + + + +
+
+ + {#each variants as variant} + {variant} + {/each} +
+ {#each sizes as size} +
+ {size} + {#each variants as variant} + + {/each} +
+ {/each} +
+ + + + +
+ + + +
+ diff --git a/src/stories/components/ui/Checkbox.stories.svelte b/src/stories/components/ui/Checkbox.stories.svelte new file mode 100644 index 00000000..df92f55c --- /dev/null +++ b/src/stories/components/ui/Checkbox.stories.svelte @@ -0,0 +1,178 @@ + + + + + + + + + + + + + +
+
+ Small + + + +
+
+ Medium + + + +
+
+ Large + + + +
+
+ + + + +
+
+ Default + + +
+
+ Bound + + +
+
+ Contained + + +
+
+ + + + +
+ {#each ['wind', 'fire', 'water', 'earth', 'dark', 'light'] as element} +
+ {element} + + + +
+ {/each} +
+ + + + +
+ + + +
+ + + + +
+ + + +
+ + + + +
+ + + + +
+ diff --git a/src/stories/components/ui/Dialog.stories.svelte b/src/stories/components/ui/Dialog.stories.svelte new file mode 100644 index 00000000..5c01f468 --- /dev/null +++ b/src/stories/components/ui/Dialog.stories.svelte @@ -0,0 +1,161 @@ + + + + + + +
+ + + {#snippet children()} +

This is the dialog content. You can put any content here.

+ {/snippet} + +
+ + + + +
+ + + {#snippet children()} +

Your account settings form would go here.

+ {/snippet} + +
+ + + + +
+ + + {#snippet children()} +

Are you sure you want to proceed with this action?

+ {/snippet} + {#snippet footer()} + + + {/snippet} + +
+ + + + +
+ + + {#snippet children()} +
+

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation + ullamco laboris. +

+

+ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat + nulla pariatur. Excepteur sint occaecat cupidatat non proident. +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque + laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis. +

+

+ At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium + voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint. +

+

+ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id + quod maxime placeat facere possimus. +

+
+ {/snippet} + {#snippet footer()} + + + {/snippet} + +
+ + + + +
+ + + {#snippet children()} +
+
+ + +
+
+ + +
+
+ {/snippet} + {#snippet footer()} + + + {/snippet} + +
+ + + + +
+ + + {#snippet children()} +

+ Are you sure you want to delete this item? This action cannot be undone and all associated + data will be permanently removed. +

+ {/snippet} + {#snippet footer()} + + + {/snippet} + +
+ diff --git a/src/stories/components/ui/DropdownMenu.stories.svelte b/src/stories/components/ui/DropdownMenu.stories.svelte new file mode 100644 index 00000000..11cc4e43 --- /dev/null +++ b/src/stories/components/ui/DropdownMenu.stories.svelte @@ -0,0 +1,133 @@ + + + + + + {#snippet trigger({ props })} + + {/snippet} + {#snippet menu()} + Edit + Duplicate + Archive + {/snippet} + + + + + + + {#snippet trigger({ props })} + + {/snippet} + {#snippet menu()} + New File + New Folder + + Import + Export + + Delete + {/snippet} + + + + + + + {#snippet trigger({ props })} + + {/snippet} + {#snippet menu()} + New Document + New Folder + + Save + Save As... + {/snippet} + + + + + + + {#snippet trigger({ props })} + + {/snippet} + {#snippet menu()} + Edit + Move + + Delete + {/snippet} + + + + + + + {#snippet trigger({ props })} + + {/snippet} + {#snippet menu()} + Profile + Settings + Help + + Sign out + {/snippet} + + + + + + + {#snippet trigger({ props })} + + {/snippet} + {#snippet menu()} + Characters + Weapons + Summons + Classes + Skills + Raids + Materials + Items + {/snippet} + + diff --git a/src/stories/components/ui/Input.stories.svelte b/src/stories/components/ui/Input.stories.svelte new file mode 100644 index 00000000..4fcfcb78 --- /dev/null +++ b/src/stories/components/ui/Input.stories.svelte @@ -0,0 +1,171 @@ + + + + + + + + + + + + + + + + + + + +
+ + + +
+ + + + +
+ + +
+ + + + +
+ Quantity: + +
+ + + + +
+ Level: + +
+ + + + +
+ + +
+ + + + + + + + + + + + + +
+ + +
+
+ Number + +
+
+ Range + +
+
+
+ + + + +
+ + + + +
+ diff --git a/src/stories/components/ui/SegmentedControl.stories.svelte b/src/stories/components/ui/SegmentedControl.stories.svelte new file mode 100644 index 00000000..803ba1d0 --- /dev/null +++ b/src/stories/components/ui/SegmentedControl.stories.svelte @@ -0,0 +1,138 @@ + + + + + + + + Grid + List + Compact + + + + + + + On + Off + + + + + + + All + Active + Archived + + + + + + + Day + Week + Month + + + + + +
+ + Wind + Other + + + Fire + Other + + + Water + Other + + + Earth + Other + + + Dark + Other + + + Light + Other + +
+ + + + + + First + Second + Third + + + + + +
+ + Characters + Weapons + Summons + +
+ + + + +
+ + Characters + Weapons + Summons + +
+ {#if tabValue === 'characters'} +

Character content goes here

+ {:else if tabValue === 'weapons'} +

Weapon content goes here

+ {:else} +

Summon content goes here

+ {/if} +
+
+ + + + + + Enabled + Also Enabled + Disabled + + diff --git a/src/stories/components/ui/Select.stories.svelte b/src/stories/components/ui/Select.stories.svelte new file mode 100644 index 00000000..ea872811 --- /dev/null +++ b/src/stories/components/ui/Select.stories.svelte @@ -0,0 +1,154 @@ + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+ Medium + +
+ + + + + + + + + + + + + + + + + +
+ +