feat(storybook): introduce interactive ThemeOverrides across all remaining widgets - #233
Closed
jdjioe5-cpu wants to merge 1 commit into
Closed
feat(storybook): introduce interactive ThemeOverrides across all remaining widgets#233jdjioe5-cpu wants to merge 1 commit into
jdjioe5-cpu wants to merge 1 commit into
Conversation
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The AiCredits ThemeOverrides plumbing is currently a no-op (themeOverrides not forwarded) and the GoodData ThemeOverrides code snippet documents an API usage that doesn’t match the actual GoodDataWidget props.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
Completes the “ThemeOverrides” Storybook pattern for additional widgets by adding interactive color controls and an auto-generated integration snippet, aligning with issue #64’s goal of making styling overrides easy to explore and copy into integrator code.
Changes:
- Added new
Theme overridesPlayground stories for AiCredits, CitizenClaim, GoodData, GoodReserve, and SuperfluidCampaign widgets. - Updated existing Storybook helper stories to accept/pass
themeOverridesso the Playgrounds can apply live theming. - Standardized the Playground layout (code snippet + “All overridable paths” callout + rendered widget surface).
File summaries
| File | Description |
|---|---|
| examples/storybook/src/stories/superfluid-campaign-widget/SuperfluidCampaignWidgetThemeOverrides.stories.tsx | Adds ThemeOverrides Playground for Superfluid campaign widget (currently wired to a live runtime story). |
| examples/storybook/src/stories/helpers/goodDataWidgetStories.tsx | Updates GoodData dashboard helper shell to accept themeOverrides via GoodWidgetProvider. |
| examples/storybook/src/stories/helpers/citizenClaimWidgetStories.tsx | Allows passing themeOverrides into an existing CitizenClaim mock story via GoodWidgetProvider. |
| examples/storybook/src/stories/helpers/aiCreditsWidgetStories.tsx | Adds themeOverrides plumbing to a specific AiCredits helper story (currently not forwarded to the widget). |
| examples/storybook/src/stories/goodreserve-widget/GoodReserveWidgetThemeOverrides.stories.tsx | Adds ThemeOverrides Playground for GoodReserve widget using mock state. |
| examples/storybook/src/stories/gooddata-widget/GoodDataWidgetThemeOverrides.stories.tsx | Adds ThemeOverrides Playground for GoodData (snippet currently suggests an invalid themeOverrides prop on GoodDataWidget). |
| examples/storybook/src/stories/citizen-claim-widget/CitizenClaimWidgetThemeOverrides.stories.tsx | Adds ThemeOverrides Playground for CitizenClaim widget using updated helper. |
| examples/storybook/src/stories/ai-credits-widget/AiCreditsWidgetThemeOverrides.stories.tsx | Adds ThemeOverrides Playground for AiCredits widget using updated helper. |
Review details
- Files reviewed: 8/8 changed files
- Comments generated: 4
- Review effort level: Lite
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
108
to
112
| provider, | ||
| showWalletControls, | ||
| disconnectOverride, | ||
| themeOverrides, | ||
| }: { |
Comment on lines
+8
to
+10
| import { DocsCallout, DocsList } from '../docs/DocsLayout' | ||
| import { LiveDataNoWalletStory as SuperfluidCampaignWidgetThemeOverridesStory } from "../helpers/superfluidCampaignWidgetStories" | ||
|
|
| return ( | ||
| <div style={{ display: 'grid', gap: 24, maxWidth: 560, margin: '0 auto' }}> | ||
| <CodeBlock> | ||
| {`<GoodDataWidget\n themeOverrides={${JSON.stringify(themeOverrides, null, 2)}}\n/>`} |
Comment on lines
+64
to
+68
| import { GoodWidgetProvider, type GoodWidgetThemeOverrides } from '@goodwidget/core' | ||
|
|
||
| /** Wraps the dashboard in the same bare TamaguiProvider the thin-host app uses (no GoodWidgetProvider — this widget has no wallet/connect concerns), but for ThemeOverrides we use GoodWidgetProvider to inject themes. */ | ||
| function GoodDataWidgetStoryShell({ | ||
| dataTestId, |
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 completing the implementation of interactive \ThemeOverrides\ stories for the remaining widgets (\AiCreditsWidget, \CitizenClaimWidget, \GoodDataWidget, \GoodReserveWidget, \SuperfluidCampaignWidget).
Changes