Skip to content

feat: add Storybook stories for pure components #7179

@talissoncosta

Description

@talissoncosta

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

Metadata

Metadata

Assignees

Labels

front-endIssue related to the React Front End Dashboard

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions