Storybook
🤖 This is a generated document — do not edit. Built by
tools/wiki/generate-storybook-page.tsfrom the*.stories.tssources underlibs/andapps/stretched/src(no Storybook build involved). Refresh withbun run wiki:buildand commit; staleness fails the wiki gates in CI and pre-push. About this section: Generated Docs.
See also: Testing, Component Library Guide
84 story files · 266 stories · 102 play functions (interaction
tests). A story is the test: play functions run before screenshots in the
smoke/interaction/visual gates, so this inventory is also the coverage map of
the component gates. Run Storybook with bun run storybook.
Stories per section
Inventory
| Title | Stories | Play | File |
|---|---|---|---|
| Animations/Locks | 2 | 2 | locks-animation.stories.ts |
| Animations/Market Cycle | 2 | 2 | market-animation.stories.ts |
| Animations/Optimize | 4 | 1 | optimize-animation.stories.ts |
| Animations/Timeline Zoom | 1 | 1 | timeline-animation.stories.ts |
| Components/Acrostic | 32 | 0 | acrostic.stories.ts |
| Components/Aurora Text | 1 | 1 | aurora-text.stories.ts |
| Components/Badge | 4 | 0 | badge.stories.ts |
| Components/BreakdownBar | 1 | 0 | breakdown-bar.stories.ts |
| Components/Button | 1 | 0 | button.stories.ts |
| Components/Cards/Accordion | 2 | 2 | accordion.stories.ts |
| Components/Cards/Card | 3 | 0 | card.stories.ts |
| Components/Cards/ExpansionCard | 3 | 1 | expansion-card.stories.ts |
| Components/Cards/KpiCard | 3 | 0 | kpi-card.stories.ts |
| Components/Cards/KpiTicker | 1 | 0 | kpi-ticker.stories.ts |
| Components/Charts/BarChart | 1 | 0 | bar-chart.stories.ts |
| Components/Charts/BoxPlot | 1 | 0 | box-plot.stories.ts |
| Components/Charts/Calendar | 1 | 1 | calendar.stories.ts |
| Components/Charts/FunnelChart | 1 | 0 | funnel-chart.stories.ts |
| Components/Charts/LifeGrid | 5 | 5 | life-grid.stories.ts |
| Components/Charts/LineChart | 2 | 0 | line-chart.stories.ts |
| Components/Charts/ScatterChart | 1 | 0 | scatter-chart.stories.ts |
| Components/Confetti Burst | 2 | 1 | confetti-burst.stories.ts |
| Components/EmptyState | 1 | 0 | empty-state.stories.ts |
| Components/Equation | 2 | 1 | equation.stories.ts |
| Components/Flickering Grid | 1 | 1 | flickering-grid.stories.ts |
| Components/Loader | 4 | 0 | loader.stories.ts |
| Components/Message | 1 | 1 | message.stories.ts |
| Components/Modal | 2 | 1 | modal.stories.ts |
| Components/Navigation/Stepper | 3 | 1 | stepper.stories.ts |
| Components/Navigation/Tabs | 2 | 1 | tabs.stories.ts |
| Components/PriceTranslator | 4 | 1 | price-translator.stories.ts |
| Components/SectionGate | 4 | 1 | section-gate.stories.ts |
| Components/SectionHeader | 1 | 0 | section-header.stories.ts |
| Components/SegmentedControl | 1 | 1 | segmented-control.stories.ts |
| Components/StoryTeller | 3 | 1 | stretched-story-teller.stories.ts |
| Components/Text Highlighter | 1 | 1 | text-highlighter.stories.ts |
| Components/Toast | 1 | 1 | toast.stories.ts |
| Components/Tooltip | 1 | 1 | tooltip.stories.ts |
| Components/UpsellBanner | 5 | 5 | upsell-banner.stories.ts |
| Components/Video Text | 1 | 1 | video-text.stories.ts |
| Dynamic/Builder | 1 | 1 | dynamic-component-builder.stories.ts |
| Dynamic/Page Builder | 4 | 3 | page-builder.stories.ts |
| Dynamic/Story Catalog | 1 | 1 | story-catalog.stories.ts |
| Dynamic/Variable Binding | 1 | 1 | variable-binding.stories.ts |
| Foundations/Colors | 4 | 0 | colors.stories.ts |
| Foundations/Design Tokens | 7 | 0 | tokens.stories.ts |
| Foundations/Design Tokens | 3 | 0 | design-tokens.stories.ts |
| Foundations/Gradients | 2 | 0 | gradients.stories.ts |
| Foundations/Magic Effects | 1 | 1 | magic.stories.ts |
| Foundations/Mobile First | 1 | 0 | mobile-first.stories.ts |
| Inputs/Field | 5 | 1 | field.stories.ts |
| Inputs/Input | 5 | 1 | input.stories.ts |
| Inputs/LocationInput | 3 | 1 | location-input.stories.ts |
| Inputs/NumberInput | 11 | 2 | number-input.stories.ts |
| Inputs/Select | 2 | 1 | select.stories.ts |
| Inputs/Switch | 7 | 1 | switch.stories.ts |
| Inputs/Textarea | 4 | 1 | textarea.stories.ts |
| Inputs/WordsInput | 6 | 2 | words-input.stories.ts |
| Layouts/AppShell | 3 | 1 | app-shell.stories.ts |
| Layouts/Area Layout | 2 | 2 | area-layout.stories.ts |
| Layouts/Grid Layout | 9 | 0 | grid-layout.stories.ts |
| Organisms/ComparePreview | 1 | 1 | compare-preview.stories.ts |
| Organisms/Encryption | 7 | 2 | encryption.stories.ts |
| Organisms/Expenses | 4 | 4 | expenses.stories.ts |
| Organisms/Feedback | 3 | 3 | feedback.stories.ts |
| Organisms/InTheNews | 5 | 5 | in-the-news.stories.ts |
| Organisms/Layaway | 4 | 4 | layaway.stories.ts |
| Organisms/User | 7 | 2 | user.stories.ts |
| Organisms/User/Welcome Dialog | 2 | 2 | welcome-dialog.stories.ts |
| Organisms/UserSettings/AccountSection | 1 | 0 | account-section.stories.ts |
| Organisms/UserSettings/DangerZoneSection | 1 | 1 | danger-zone-section.stories.ts |
| Organisms/UserSettings/Dialog | 3 | 1 | user-settings-dialog.stories.ts |
| Organisms/UserSettings/SecuritySection | 1 | 1 | security-section.stories.ts |
| Organisms/UserSettings/StatsSection | 1 | 0 | stats-section.stories.ts |
| Organisms/VotingPreview | 2 | 2 | voting-preview.stories.ts |
| Organisms/WorthItTeaser | 8 | 8 | worth-it-teaser.stories.ts |
| Pages/Coming Soon | 1 | 0 | coming-soon.component.stories.ts |
| Pages/Home | 2 | 0 | home.component.stories.ts |
| Stories Overview/Foundations | 2 | 2 | foundation-stories.stories.ts |
| Stories Overview/In-depth Story | 1 | 1 | value-of-time.stories.ts |
| Stories Overview/Localized Story (i18n) | 1 | 1 | localized-story.stories.ts |
| Stories Overview/Map | 9 | 4 | story-map.stories.ts |
| Stories Overview/Queue | 3 | 1 | story-queue.stories.ts |
| Stories Overview/StoryTeller | 3 | 1 | story-teller.stories.ts |
Components without a story
Component files (@Component in libs/stretched-components/src/components) whose folder has no
*.stories.ts — invisible to the smoke, interaction, and visual gates: