feat: add Storybook stories for pure components#7100
Open
talissoncosta wants to merge 13 commits intomainfrom
Open
feat: add Storybook stories for pure components#7100talissoncosta wants to merge 13 commits intomainfrom
talissoncosta wants to merge 13 commits intomainfrom
Conversation
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit at claude.ai/admin-settings/claude-code.
Once credits are available, reopen this pull request to trigger a review.
|
The latest updates on your projects. Learn more about Vercel for GitHub. 3 Skipped Deployments
|
github-actions
Bot
added
front-end
Contributor
Docker builds report
|
Contributor
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
|
github-actions
Bot
added
feature
github-actions
Bot
added
feature
github-actions
Bot
added
feature
github-actions
Bot
added
feature
talissoncosta
force-pushed
the
chore/design-system-tokens
branch
2 times, most recently
from
c33def5 to
33e4dee
Compare
This was referenced Apr 8, 2026
talissoncosta
force-pushed
the
feat/storybook-component-stories
branch
from
b347360 to
d9f7b74
Compare
github-actions
Bot
added
feature
Wire up the missing pieces for Storybook to render real app components in isolation: - Add webpack mocks for @ionic/react and ionicons/icons so components using IonIcon render a placeholder span instead of failing - Stub helper utilities (escapeHtml, isSaas) used transitively by things like code-help so stories don't break on init - Configure preview.js with a global ReactSelect wrapper that mirrors the app's project-components.js Select shim (className=react-select, classNamePrefix), shared tooltip/row/form-group window globals, and enable autodocs globally so we don't repeat tags per story Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Remove implicit dependencies on window globals, the legacy Flux stores, and project-wide singletons so components can render in Storybook without bootstrapping the full app: - IonIcon → Icon in InfoMessage, AccordionCard, IdentifierString (the icon library shim is good for legacy code but stories should render with the new Icon system) - Add explicit Row/Tooltip imports where components relied on window globals (Panel, PageTitle, LabelWithTooltip, ToggleChip) - Inline Utils.colour usage (ToggleChip) and remove dead Utils references where possible - Inline Utils.GUID() with Math.random() in Checkbox and inline fromParam with URLSearchParams in Tabs - Drop the dead enabledButton path and Constants import from WarningMessage - Inline convertToPConfidence into utils.tsx and add unit tests (convertToPConfidence.test.ts, fromParam.test.ts) - Extract the chart/loader SVG from project-components.js into a standalone Loader.tsx component - Extract tagColors from common/constants.ts to a dedicated common/constants/tag-colours.ts and update the six callers (ColourSelect, CreateEditTag, AddEditTags, StaleFlagWarning, EnvironmentSettingsPage, InlineModal) - Refactor PasswordRequirements to use token utility classes (text-success / text-danger, list-unstyled, fs-small) instead of inline styles - SettingRow: relax HTMLAttributes intersection so onChange types cleanly through These changes are no-ops in the running app — same render output — but unlock isolated rendering in Storybook. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
ChipInput previously rendered the chip-remove button with an ionicon (close) which doesn't follow the new design system Icon contract. Add a close icon to the design-system Icon component (matching the existing close-circle SVG paths but standalone) and update ChipInput to use it at 16px to match production sizing. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Banner shipped in #6883 as design-system foundation but has zero consumers and its current shape (variant + icon + children) is too thin to replace InfoMessage / WarningMessage / ErrorMessage — those carry title, isClosable + close, collapseId localStorage memory, action buttons, and API-error parsing that Banner doesn't. ModalAlert was an internal modal variant with no remaining call sites after recent refactors. Drop both rather than carry unused primitives that would be redesigned when the migration is actually planned. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
ColorSwatch and BooleanDotIndicator are the same primitive (a decorative coloured shape used as a key) — one square, one circle. Unify them: - Add \`shape: 'square' | 'circle'\` to ColorSwatch (default 'square') - Rewrite BooleanDotIndicator as a thin wrapper that maps \`enabled\` to colorSurfaceAction / colorSurfaceMuted tokens and delegates to ColorSwatch with shape='circle' size='lg' - Tokenise the previously hardcoded #6837fc (enabled) and #dbdcdf (disabled) Visual change: the boolean dot grows from 14px to 16px (lg). It only renders inside permission tooltips, so the diff is barely visible. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add stories for 40 components across the design system, organised into the following categories: - Data Display: BarChart, BooleanDotIndicator, ColorSwatch, DropdownMenu, IdentifierString, LabelWithTooltip, Logo, SettingTitle, StatItem, ToggleChip, Tooltip, VCSProviderTag - Forms: Button, ButtonDropdown, Checkbox, CheckboxGroup, ChipInput, FormGroup, GhostInput, MultiSelect, Radio, SearchableSelect, Switch - Feedback: EmptyState, ErrorMessage, InfoMessage, Loader, PasswordRequirements, Skeleton, WarningMessage - Patterns: AccordionCard, Card, PageTitle, Panel, SettingRow - Layout: Column, Flex, Row - Modals: InlineModal, Modal Conventions used: - Args-driven (\`component:\` + \`args:\`) for simple primitives so the Controls panel and autodocs props table light up; \`render:\` for stories that need state, composition, or layout demonstrations - Component descriptions on heavyweight stories (Modal, InfoMessage, ErrorMessage, WarningMessage, Tooltip, AccordionCard, Panel, PageTitle, Card, ColorSwatch, PasswordRequirements) - Interactive states covered with \`play\` functions on Modal, Tooltip, ButtonDropdown, DropdownMenu so Chromatic captures the open dialog / hovered tooltip / open menu rather than only the trigger - Source overrides via \`docs.source.code\` where the render function doesn't reflect the consumer call (PasswordRequirements) - Token utility classes (\`d-flex\`, \`gap-*\`, etc.) instead of inline styles where Bootstrap utilities exist; chart palette tokens (\`colorChart*\`, \`colorSurfaceAction\`, etc.) instead of hardcoded hex - Setting.stories.tsx renamed to SettingRow.stories.tsx to match the component name Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The four navigation components (Breadcrumb, OverflowNav, SidebarLink, Tabs) all need a MemoryRouter context to render in isolation. Extract the wrapper as \`withRouter\` in documentation/components/_decorators.tsx so each story imports it instead of inlining the helper. Stories cover: - Breadcrumb: default trail, single-level - OverflowNav: default ProjectNavbar, forced overflow trigger, and an Open variant with a play function that clicks the overflow trigger so Chromatic captures the popover - SidebarLink: default and AllStates list - Tabs: default theme and pill theme (uncontrolled) Component descriptions added on Tabs explaining the in-page tabs pattern and when to use it vs other navigation components. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
… variant gaps
DRY pass on the layout wrappers used inside story render functions.
The same \`style={{ display: 'flex', alignItems: 'center', gap: 12 }}\`
pattern appeared 14 times across Button, Checkbox, Radio, Switch, and
Skeleton. Replaced with \`d-flex align-items-center gap-2\` and friends.
Variant gaps filled while we were here:
- Button.Variants: add the missing \`icon\` (icon-only buttons) and
\`project\` (avatar-style picker buttons) themes
- Tooltip: add a Placements story showing top / right / bottom / left
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Button isn't a form input — it's a general-purpose trigger used in toolbars, page headers, modals, empty states, and CTAs across the app. Same for ButtonDropdown. Promoting them to top level (alongside Icons) keeps the Forms category focused on input controls and select pickers. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
The earlier extraction of \`tagColors\` to \`common/constants/tag-colours.ts\` wasn't required for any story — no story imports tagColors directly, and \`Constants.tagColors\` resolves cleanly inside Storybook with the existing code-help mock. Revert to reduce PR scope: \`tagColors\` lives back on the Constants object, the six callers (StaleFlagWarning, EnvironmentSettingsPage, AddEditTags, ColourSelect, CreateEditTag, utils.tsx) go back to \`Constants.tagColors\`, and \`common/constants/tag-colours.ts\` is deleted. Net: 7 fewer modified files, no behaviour change. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…ils stub Several "decoupling" edits in the earlier refactor commit weren't actually required for stories to render — \`Tooltip\`, \`Row\`, \`FormGroup\`, etc. are declared globally in \`global.d.ts\` and bound at runtime by both \`project-components.js\` (app) and \`.storybook/preview.js\` (stories). Same goes for \`Utils.colour\`, \`Utils.GUID\`, and \`Utils.fromParam\` — easier to widen the Storybook Utils stub than to inline these in production code. Reverted in production: - LabelWithTooltip: drop explicit Tooltip import - Panel, PageTitle, InlineModal: drop explicit Row import - ToggleChip: drop Color import; restore Utils.colour() call - Checkbox: restore Utils.GUID() call (left ReactMarkdown dead-import cleanup intact) - Tabs: restore Utils.fromParam() call - EnvironmentSettingsPage: revert leftover whitespace-only formatting Storybook Utils stub gains \`colour\`, \`GUID\`, \`fromParam\` so the above calls resolve. Net: 9 production component files now match origin/main exactly; only the storybook stub grows by 11 lines. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
4 tasks
The close icon was added to Icon.tsx for ChipInput but never registered in the Icons story, so it didn't show up in the catalogue. Added under Actions next to close-circle. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Lint-staged re-applied a Prettier collapse of a multi-line callback each time the file got staged. Restore origin/main exactly so the file no longer shows up in the PR diff. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit at claude.ai/admin-settings/claude-code.
Once credits are available, reopen this pull request to trigger a review.
Contributor
Visual Regression16 screenshots compared. See report for details. |
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.
docs/if required so people know about the feature.Changes
Closes #7179
Contributes to #6882
Add Storybook stories for the design system. 45 components organised across 8 categories. Two small design-system consolidations bundled in (Banner / ModalAlert removed, ColorSwatch + BooleanDotIndicator unified).
Coverage
web/components/base/have storiesPopover(blocked by FocusMonitor + jQuery); 5 react-select / routing internals not meant for direct consumer useCategories
Story conventions
component:for primitives (autodocs props table, working Controls panel)render:for stories needing state, composition, or layout demosplayfunctions on Modal, Tooltip, ButtonDropdown, DropdownMenu, OverflowNav so Chromatic captures the open / hovered / expanded statewithRouterdecorator atdocumentation/components/_decorators.tsxComponent changes (non-story)
Mostly Storybook plumbing. Two design-system consolidations.
BooleanDotIndicatorrewritten as<ColorSwatch shape='circle' size='lg' />ColorSwatchgainsshape: 'square' | 'circle'BooleanDotIndicatorBanner+ModalAlertremovedcloseicon inIconChipInputIonIcon → Iconin InfoMessage, AccordionCard, IdentifierString, ChipInputPasswordRequirementstoken utilities (text-success/text-danger/fs-small)Loader.tsxextracted fromproject-components.js@ionic/react,dompurify,code-help,_dataUtilsstub at.storybook/stubs/utils.jscommon/utils/utilshas circular dep withaccount-storethat crashes bundler. Stub may drift from prod — tracked in #7360 to drop once the cycle is broken.How did you test this code?
npm run storybook— all 45 stories render in light and dark modeplay-driven stories (Modal Open, Tooltip Hovered/Placements, ButtonDropdown Open, DropdownMenu Open, OverflowNav OverflowOpen) capture the open statenpm run test:unit -- --testPathPatterns="convertToPConfidence|fromParam"passesnpx eslint --fixclean on all touched filesQA — smoke test before merge
P1 — visual changes worth a look
isClosable; close icon should becurrentColor, not redP2 — should be no-op
Follow-ups
common/utils/utilsfrom legacy stores so Storybook can drop the Utils stub