Skip to content
Snippets Groups Projects

[SG-25227]: Update Storybook stories to use Component Story Format

Closed Warren Gifford requested to merge contractors/SG-25227 into main

Created by: gitstart-sourcegraph

Description

The Component Story Format is the recommended way to write stories in Storybook. The new format is easier to understand and it is also important that we update our existing stories to ensure we stay up to date with new features, and are able to follow future documentation.

Refs

Files to be Migrated

  • client/web/src/enterprise/batches/settings/AddCredentialModal.story.tsx
  • client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/add-insight-modal/AddInsightModal.story.tsx
  • client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboard-select/DashboardSelect.story.tsx
  • client/web/src/enterprise/insights/pages/dashboards/dashboard-page/components/dashboards-content/components/empty-insight-dashboard/EmptyInsightDashboard.story.tsx

Success criteria

  • All stories in the repo are using the Component Story Format
  • All stories still usable when running yarn storybook

Implementation details

Please see this PR description as an example of how this change can be implemented. In summary, follow these implementation steps:

  1. Modify existing storiesOf usage to ensure any add or alternative function calls are chained onto the original storiesOf function call. See this diff for an example of this change: e3a39ca.
  2. Run the storiesof-to-csf Storybook codemod with this command: npx sb migrate storiesof-to-csf --glob="client/web/**/*.story.tsx". For an expected diff (on different files) see this commit: 5a5b716.
  3. Run the csf-hoist-story-annotations Storybook codemod with this command: npx sb migrate csf-hoist-story-annotations --glob="client/web/**/*.story.tsx". For an expected diff (on different files) see this commit: b228f5d.
  4. You will likely see TypeScript warnings on the newly-modified files. Update these by adding the Storybook types. See this commit for reference: 810e8e2

Test plan

  1. All stories in the requested directories are using this Component Story Format.
  2. All stories still usable when running yarn storybook

App preview:

Check out the client app preview documentation to learn more.

Merge request reports

Closed by avatar (Jun 9, 2025 10:09am UTC)

Loading

Activity

Filter activity
  • Approvals
  • Assignees & reviewers
  • Comments (from bots)
  • Comments (from users)
  • Commits & branches
  • Edits
  • Labels
  • Lock status
  • Mentions
  • Merge request status
  • Tracking
Please register or sign in to reply
Loading