feat: add Storybook stories for pure components

[talissoncosta]

• I have read the Contributing Guide.
• I have added information to docs/ if required so people know about the feature.
• I have filled in the "Changes" section below.
• I have filled in the "How did you test this code" section below.

Changes

Contributes to #6882

Add Storybook stories for 39 components organised into 8 sidebar categories. Fix components to remove unnecessary dependencies that blocked Storybook rendering.

Stories (39 components)

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

Component	Change	Risk
Checkbox	Utils.GUID() → Math.random()	Low
StatItem	Utils.numberWithCommas() → toLocaleString(), IonIcon → Icon	Low
Panel, PageTitle	Add explicit Row import (was window global)	None
LabelWithTooltip	Add explicit Tooltip import (was window global)	None
InfoMessage, AccordionCard, IdentifierString	IonIcon → Icon (removes @ionic/react dep)	Low
WarningMessage	Remove dead enabledButton prop and Constants import	None
Confidence	Inline convertToPConfidence (4 lines, removes Utils)	None
Tabs	Inline fromParam using URLSearchParams (removes Utils)	Low
ToggleChip	Add Row import, inline Utils.colour() with Color lib	Low
tagColors (6 files)	Extract to common/constants/tag-colours.ts	None
Loader	Extract from project-components.js to Loader.tsx, currentColor instead of #6633ff	None

Storybook infrastructure

• Webpack mocks: code-help.js, _data.js, dompurify.js — stub CommonJS modules
• Globals: Tooltip, Row, FormGroup registered in preview.js
• Unit tests: convertToPConfidence (5 tests), fromParam (6 tests)

Coverage

• Notion report: 39 working, 13 blocked
• Remaining blockers tracked in Refactor project-components.js: move from global window assignments to proper ES6 modules #6310 and Spike: Storybook component coverage — findings and blockers #7097

How did you test this code?

• npm run storybook — all stories render in light and dark mode
• npm run test:unit -- --testPathPatterns="convertToPConfidence|fromParam" — 11 tests pass
• npx eslint --fix passes on all modified files

Smoke test before merge

Components were changed to remove dependencies. Verify in the app:

• Checkbox — toggle any checkbox (e.g. server-side only)
• InfoMessage — verify info banner renders with chevron icon
• AccordionCard — verify accordion expands/collapses
• WarningMessage — trigger a warning message
• StatItem — check usage page, verify numbers format correctly
• Panel — verify panels with title + action render correctly
• Tabs — navigate between tabs (e.g. feature modal)
• IdentifierString — check identity page
• ToggleChip — verify tag chips render with correct colours
• Loader — verify loading spinner appears
• PageTitle — verify page headers render
• tagColors — create/edit a tag, verify colour picker works

Storybook verification

• Run npm run storybook and click through all 8 categories
• Toggle dark mode — verify all stories render in both themes

[claude]

⚠️ Code review skipped — your organization's overage spend limit has been reached.

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.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
flagsmith-frontend-preview	Ready	Preview, Comment	Apr 2, 2026 11:57am
flagsmith-frontend-staging	Ready	Preview, Comment	Apr 2, 2026 11:57am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
docs	Ignored	Preview	Apr 2, 2026 11:57am

[github-actions]

Docker builds report

Image	Build Status	Security report
ghcr.io/flagsmith/flagsmith-e2e:pr-7100	Finished ✅	Skipped
ghcr.io/flagsmith/flagsmith-api-test:pr-7100	Finished ✅	Skipped
ghcr.io/flagsmith/flagsmith-api:pr-7100	Finished ✅	Results ✅
ghcr.io/flagsmith/flagsmith:pr-7100	Finished ✅	Results ✅
ghcr.io/flagsmith/flagsmith-private-cloud:pr-7100	Finished ✅	Results ✅
ghcr.io/flagsmith/flagsmith-frontend:pr-7100	Finished ✅	Results ✅

[github-actions]

Playwright Test Results (oss - depot-ubuntu-latest-16)

 10 passed

Details

 10 tests across 7 suites
 23.9 seconds
 20167e3
 🔄 Run: #15628 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

 10 passed

Details

 10 tests across 7 suites
 29.4 seconds
 20167e3
 🔄 Run: #15628 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

 16 passed

Details

 16 tests across 13 suites
 34.7 seconds
 20167e3
 🔄 Run: #15628 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

 2 passed

Details

 2 tests across 2 suites
 53.6 seconds
 20167e3
 🔄 Run: #15628 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

 10 passed

Details

 10 tests across 7 suites
 46.7 seconds
 b347360
 🔄 Run: #15652 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

 10 passed

Details

 10 tests across 7 suites
 28.4 seconds
 b347360
 🔄 Run: #15652 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

 2 passed

Details

 2 tests across 2 suites
 52.1 seconds
 b347360
 🔄 Run: #15652 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

 1 passed

Details

 1 test across 1 suite
 53.5 seconds
 b347360
 🔄 Run: #15652 (attempt 1)