feat(storybook): Polish interaction and presentation - #231
Closed
jdjioe5-cpu wants to merge 1 commit into
Closed
Conversation
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
Multiple issues (missing MDX import, unbalanced JSX tags, and invalid/unused props in Gooddata dashboard stories) will break compilation and/or prevent the theme override controls from functioning correctly.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR advances the Storybook “polish + integrator guidance” effort from #64 by adding ThemeOverrides playground stories and embedding them into widget MDX pages, with Storybook controls intended to map to theme override paths.
Changes:
- Adds ThemeOverrides “Playground” stories for multiple widgets (SuperfluidCampaign, CitizenClaim, AiCredits, GoodReserve, Gooddata).
- Updates widget MDX docs pages to include a “Theme overrides” section rendering the new playground canvases.
- Extends some Storybook helper stories to accept
defaultTheme/themeOverridesparameters for reuse in playgrounds.
File summaries
| File | Description |
|---|---|
| examples/storybook/src/stories/superfluid-campaign-widget/SuperfluidCampaignWidgetThemeOverrides.stories.tsx | New ThemeOverrides playground story + controls for SuperfluidCampaignWidget. |
| examples/storybook/src/stories/superfluid-campaign-widget/SuperfluidCampaignWidget.mdx | Adds “Theme overrides” docs section (currently missing required import). |
| examples/storybook/src/stories/helpers/goodDataWidgetStories.tsx | Attempts to thread theme overrides through Gooddata dashboard story shell (currently contains invalid props + unused destructure). |
| examples/storybook/src/stories/helpers/aiCreditsWidgetStories.tsx | Adds optional theme args passthrough to the mocked backend story (typing currently uses any). |
| examples/storybook/src/stories/goodreserve-widget/GoodReserveWidgetThemeOverrides.stories.tsx | New ThemeOverrides playground story for GoodReserveWidget (currently has JSX tag imbalance + scratch notes). |
| examples/storybook/src/stories/goodreserve-widget/GoodReserveWidget.stories.tsx | Exposes renderStory + adds themeOverrides passthrough (typing currently uses any). |
| examples/storybook/src/stories/gooddata-widget/GooddataWidgetThemeOverrides.stories.tsx | New ThemeOverrides playground story for Gooddata (currently doesn’t actually apply overrides). |
| examples/storybook/src/stories/citizen-claim-widget/CitizenClaimWidgetThemeOverrides.stories.tsx | New ThemeOverrides playground story + controls for CitizenClaimWidget. |
| examples/storybook/src/stories/citizen-claim-widget/CitizenClaimWidget.mdx | Adds “Theme overrides” docs section and imports the new playground stories. |
| examples/storybook/src/stories/ai-credits-widget/AiCreditsWidgetThemeOverrides.stories.tsx | New ThemeOverrides playground story + controls for AiCreditsWidget. |
| examples/storybook/src/stories/ai-credits-widget/AiCreditsWidget.mdx | Adds “Theme overrides” docs section and imports the new playground stories. |
Review details
Suppressed comments (1)
examples/storybook/src/stories/superfluid-campaign-widget/SuperfluidCampaignWidgetThemeOverrides.stories.tsx:52
- The light_Button override sets
colorto the same value asbackground, which will render the button label unreadable for most colors (including the default).
light_Button: {
background: args.primaryColor,
color: args.primaryColor,
},
- Files reviewed: 11/11 changed files
- Comments generated: 10
- Review effort level: Lite
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+78
to
+84
| <DocsCallout title="All overridable paths" tone="info"> | ||
| <DocsList> | ||
| <li><strong>dark_Button / light_Button</strong>: background, color</li> | ||
| </DocsList> | ||
| <div style={{ marginTop: 24 }}> | ||
| {renderStory(reserveWidgetMockStates.quoteReady, 'GoodReserveWidget-theme', 'dark', themeOverrides)} | ||
| </div> |
Comment on lines
+106
to
+110
| <AiCreditsDashboard | ||
| mockState={{ kind: 'demo', response: FIXED_ANALYTICS_RESPONSE }} | ||
| defaultTheme={defaultTheme} | ||
| themeOverrides={themeOverrides} | ||
| /> |
| title="Theme overrides" | ||
| description="Play around with some of the theme overrides using the controls below (you may have to activate Controls in the addons panel, top-right). The code here can be copied and used directly in your own dapp — it always matches what's rendered. See the callout below the code for additional overridable styles not wired to a control." | ||
| > | ||
| <Canvas of={ThemeOverridesStories.Playground} /> |
Comment on lines
+78
to
+79
| <AiCreditsDashboardDemoStory defaultTheme="dark" themeOverrides={themeOverrides} /> | ||
| </div> |
Comment on lines
+45
to
+48
| dark_Button: { | ||
| background: args.primaryColor, | ||
| color: args.primaryColor, | ||
| }, |
| mockState: Story['args']['mockState'], | ||
| dataTestId: string, | ||
| defaultTheme?: 'light' | 'dark', | ||
| themeOverrides?: any |
Comment on lines
+69
to
+72
| // Note: GoodReserveWidget.stories.tsx doesn't natively accept themeOverrides via QuoteReadyBuy.render | ||
| // but we can render it directly or wrap it if needed. | ||
| // Wait, QuoteReadyBuy doesn't accept themeOverrides directly in GoodReserveWidget.stories.tsx. | ||
| // I will mock it here directly. |
Comment on lines
+419
to
+422
| interface ThemeArgs { | ||
| defaultTheme?: 'light' | 'dark' | ||
| themeOverrides?: any | ||
| } |
Comment on lines
+65
to
+68
| interface ThemeArgs { | ||
| defaultTheme?: 'light' | 'dark' | ||
| themeOverrides?: any | ||
| } |
Comment on lines
+70
to
+75
| function GoodDataWidgetStoryShell({ | ||
| dataTestId, | ||
| children, | ||
| defaultTheme = 'dark', | ||
| themeOverrides, | ||
| }: { dataTestId: string; children: React.ReactNode } & ThemeArgs) { |
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
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.
Fixes #64 by adding interactive ThemeOverrides stories for the remaining widgets, mapping styling variables to controls.