📖 Storybook-Design | Comprehensive Component Design System Specs in Storybook - #672
Open
milah-247 wants to merge 1 commit into
Open
📖 Storybook-Design | Comprehensive Component Design System Specs in Storybook#672milah-247 wants to merge 1 commit into
milah-247 wants to merge 1 commit into
Conversation
Documents Colors, Typography, Shadows, and Radii tokens as Storybook Docs pages under Foundations/*, sourced from the real CSS custom properties in globals.css and Tailwind's default scale (not overridden in tailwind.config.js). Adds a Theme toolbar toggle in preview.tsx that applies the app's .dark class to every story via a decorator, so existing component stories can be inspected in both themes.
|
@milah-247 Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits. You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
src/stories/foundations/—Colors,Typography,Shadows,Radii— documenting the app's real design tokens rather than invented ones:src/app/globals.css(--color-background,--color-foreground,--color-surface,--color-surface-raised,--color-border,--color-muted), the static brand tokens (--color-neon-green,--color-oracle-navy,--color-oracle-border), and a reference table of hardcoded brand accent hexes used around the app (wallet button, admin tab "cyber lime") that aren't yet exposed as tokens.--font-sans/--font-mono(both currently Geist Sans, loaded vianext/font/googleinlayout.tsx), plus Tailwind v4's default type scale and font weights (not overridden intailwind.config.js).shadow-*/rounded-*scales, sincetailwind.config.jsdoesn't extend either..storybook/preview.tsxwith aglobalTypes.themetoolbar toggle (Light/Dark) and a decorator that applies the app's real.darkclass — the same mechanismnext-themesuses on<html>viaattribute="class"— to a wrapper div around every story. This makes the theme toggle work across all stories, not just the new token docs, without touching the existingAddressBadge/RelayerStatusTable/WalletConnectButton/OptimizedDialogstories.tailwind.config.js'scontentglobs explicitly exclude*.stories.tsxfiles — Tailwind classes written only in story files wouldn't be generated.Technical Requirements Addressed
Files Changed
.storybook/preview.tsxsrc/stories/foundations/Colors.stories.tsx(new)src/stories/foundations/Typography.stories.tsx(new)src/stories/foundations/Shadows.stories.tsx(new)src/stories/foundations/Radii.stories.tsx(new)src/stories/foundations/shared.tsx(new — small internal layout helpers, not a story file)Testing
npx tsc --noEmit— no new type errors introduced.npx eslint src/stories .storybook— clean.npx storybook buildcurrently fails onmain, unrelated to this change: thestorybookcore package isn't pinned inpackage.jsonat all, so tooling resolves a freshstorybook@10.5.5, while@storybook/addon-essentialsand@storybook/addon-interactionsare pinned at8.6.14(@storybook/addon-a11y,addon-links,@storybook/nextjs, and@storybook/reactare on10.5.5). The 8.x addons importstorybook/internal/common, which doesn't exist in the 10.x layout, so Storybook can't loadaddon-essentials'/addon-interactions' presets and fails before rendering anything — this affects all 4 pre-existing story files too, not just the ones added here. Confirmed vianpm ls storybook(no resolved version) and the addon-essentials/addon-interactionspackage.jsonversions. Fixing the version matrix is a separate, larger change (would need every@storybook/*package aligned to one major, plus verifyingaddon-essentials/addon-interactions's config surface against 10.x) that I've left out of scope here to avoid touching unrelated tooling; flagging it since it blocks verifying "zero console warnings" for this issue.npx eslint/npx tsc --noEmitare clean, and the new files avoid Tailwind utility classes (excluded from Storybook's content scan) so they render using the same CSS custom properties the app itself relies on.Closes #632