Context
Spike #7097 audited Storybook component coverage and identified which components can be added today. This issue tracks the implementation.
What
Add Storybook stories for 39 components that can render in isolation, organised into sidebar categories. Fix components where trivial dependency changes unblock Storybook rendering.
Stories (39 components, 8 categories)
| Category |
Components |
| Forms |
Button, ButtonDropdown, Checkbox, CheckboxGroup, GhostInput, Radio, Switch |
| Feedback |
Banner, EmptyState, InfoMessage, Loader, WarningMessage |
| Navigation |
Breadcrumb, NavSubLink, SidebarLink, Tabs |
| Layout |
AccordionCard, Card, FormGroup, PageTitle, Panel, Row |
| Data Display |
BooleanDotIndicator, ClearFilters, Confidence, DropdownMenu, IdentifierString, LabelWithTooltip, Logo, SettingTitle, StatItem, ToggleChip, Tooltip, VCSProviderTag |
| Modals |
Modal (Alert, Header, CloseButton), ModalDefault |
| Patterns |
SettingRow, Skeleton |
| Icons |
Icons catalogue |
Component fixes required
- Remove `@ionic/react` IonIcon from InfoMessage, AccordionCard, IdentifierString, StatItem
- Remove dead `enabledButton` prop from WarningMessage
- Add explicit imports for window globals (Panel, PageTitle, LabelWithTooltip, ToggleChip)
- Inline trivial Utils functions (Checkbox, Confidence, Tabs)
- Extract `tagColors` from Constants to standalone file
- Extract Loader from `project-components.js`
Storybook infrastructure
- Webpack mocks for CommonJS modules (`code-help`, `_data.js`, `dompurify`)
- Global registration in `preview.js` (Tooltip, Row, FormGroup)
- Unit tests for extracted functions
Remaining blocked (13 components)
Tracked in Storybook Coverage Report. Root cause: `constants.ts` uses relative `require()` for code-help files. Needs #6310 to unblock.
PR
#7100
Context
Spike #7097 audited Storybook component coverage and identified which components can be added today. This issue tracks the implementation.
What
Add Storybook stories for 39 components that can render in isolation, organised into sidebar categories. Fix components where trivial dependency changes unblock Storybook rendering.
Stories (39 components, 8 categories)
Component fixes required
Storybook infrastructure
Remaining blocked (13 components)
Tracked in Storybook Coverage Report. Root cause: `constants.ts` uses relative `require()` for code-help files. Needs #6310 to unblock.
PR
#7100