chore(storybook): update v1 syntax to use Storybook v6 - Githubissues

argoproj / argo-ui

Argoproj shared React components

Apache License 2.0

220 stars 178 forks source link

chore(storybook): update v1 syntax to use Storybook v6 #568

Closed agilgur5 closed 2 weeks ago

agilgur5 commented 1 month ago

Follow-up to https://github.com/argoproj/argo-ui/pull/432#issuecomment-1879816619 and make the v1 code Storybook v7 compatible. This is just one step toward the upgrade, but perhaps the most breaking one. Follow-up to #567 "Future Work" part 1.

Motivation

while the deps used Storybook v6, the configuration and stories themselves were still on a legacy v5 format
- v6 had backward compat for v5, but v7 does not, so this needs upgrading/migrating
- or well, v7 has some legacy mode for it that can be enabled with some config, but it is entirely gone in v8

Modifications

migrate storiesOf to CSF per https://storybook.js.org/docs/7/migration-guide#storiesof-to-csf
- then had to do a bunch of manual changes to get back mostly the same previous indentation (with some minor differences where there were mistakes or inconsistencies)
- CSF is still valid through to latest v8

also remove index.stories.tsx and replace with naming other story files *.stories.tsx

migrate v1 config.js + webpack.config.js to Storybook v6+ main.js + preview.js
- remove ts-loader and instead use the built-in TS support, with a few optimizations per https://github.com/storybookjs/storybook/issues/22164#issuecomment-1603627308

Verification

yarn start works the same as it did in #567

Notes to Reviewers

~This requires #567 to work and so is built on top of it. Please do not merge until that is merged first!~ Rebased on top