[SG-36770] Update Storybook stories to use Component Story Format: client/web/enterprise/batches/* - batch-spec, list, preview
Created by: gitstart-sourcegraph
Problem statement
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.
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:
- 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: https://github.com/sourcegraph/sourcegraph/pull/25222/commits/e3a39cae40c69cb74de1d0461bd70fb31bdb281a
- 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: https://github.com/sourcegraph/sourcegraph/commit/5a5b716337da4a768b4b26157d06728035c57816
- 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: https://github.com/sourcegraph/sourcegraph/commit/b228f5d5879b5164d23565c7d63480793e6004da You will likely see TypeScript warnings on the newly-modified files. Update these by adding the Storybook types. See this commit for reference: https://github.com/sourcegraph/sourcegraph/commit/810e8e217d6a665f109ca2a0a92ba4125f6b27ea
Directories to be Migrated
client/web/src/enterprise/batches/batch-spec client/web/src/enterprise/batches/list client/web/src/enterprise/batches/preview
Ref
Sourcegraph Issue GitStart Issue
Time estimate
Pull requests with frontend lines changed should take 3 hours at maximum. Ping the reviewer in the spec pull request if time-consuming changes are required. Split the work into multiple pull requests if the total diff is bigger than 450 lines of code.
Test plan
Run yarn storybook Storybook should run without any error
App preview:
Check out the client app preview documentation to learn more.