Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Draft
wants to merge 23 commits into
base: master
Choose a base branch
from
Draft

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

wants to merge 23 commits into from

Commits on Jul 18, 2024

  1. fix(deps): downgrade all breakage from dependabot et al 

    - go back to Storybook v6 addons, matching the `storybook` dep
  - the addons were partially auto-upgraded to breaking versions by dependabot
- go back to Webpack v4, matching Storybook v6
  - this was also auto-upgraded to a breaking version by dependabot
  - go back to `ts-loader` v8, matching Webpack v4
    - and this too had a breaking dependabot upgrade

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 18, 2024
    Configuration menu
    Copy the full SHA
    30acdb5 View commit details
    Browse the repository at this point in the history

  2. revert unrelated dep changes 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 18, 2024
    Configuration menu
    Copy the full SHA
    233c828 View commit details
    Browse the repository at this point in the history

  3. revert the yarn.lock semver compatible changes as well 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 18, 2024
    Configuration menu
    Copy the full SHA
    6470e20 View commit details
    Browse the repository at this point in the history

  4. and once more 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 18, 2024
    Configuration menu
    Copy the full SHA
    25b3beb View commit details
    Browse the repository at this point in the history

  5. attempt to revert more unnecessary auto-made yarn.lock changes 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 18, 2024
    Configuration menu
    Copy the full SHA
    e2f27ae View commit details
    Browse the repository at this point in the history

  6. some more 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 18, 2024
    Configuration menu
    Copy the full SHA
    fa39e16 View commit details
    Browse the repository at this point in the history

  7. more 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 18, 2024
    Configuration menu
    Copy the full SHA
    78a9486 View commit details
    Browse the repository at this point in the history

  8. set all storybook deps to 6.5.14 and ensure yarn.lock follows it 

    - the latter took some manual editing and resolutions until it got it, and now it reproduces the minimal variant

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 18, 2024
    Configuration menu
    Copy the full SHA
    0d6fc93 View commit details
    Browse the repository at this point in the history

  9. more yarn.lock diff reduction 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 18, 2024
    Configuration menu
    Copy the full SHA
    991775d View commit details
    Browse the repository at this point in the history

  10. more babel reduction 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 18, 2024
    Configuration menu
    Copy the full SHA
    27113f8 View commit details
    Browse the repository at this point in the history

  11. more babel reduction 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 18, 2024
    Configuration menu
    Copy the full SHA
    9a0affa View commit details
    Browse the repository at this point in the history

  12. more 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 18, 2024
    Configuration menu
    Copy the full SHA
    d219d35 View commit details
    Browse the repository at this point in the history

  13. couple more iterations on that 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 18, 2024
    Configuration menu
    Copy the full SHA
    ce69bfa View commit details
    Browse the repository at this point in the history

  14. migrate from @dump247/storybook-state to useState hook 

    - as per its archived docs
- tried to make the diff as small as possible

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 18, 2024
    Configuration menu
    Copy the full SHA
    d7a4c73 View commit details
    Browse the repository at this point in the history

Commits on Jul 19, 2024

  1. import individual components from dir 

    - same as downstream in Workflows, in order to code split properly, can't use the `src/` or `src/components/` imports as they have side effects (and therefore can't be tree-shaken)
  - instead have to do individual component imports to tree shake properly

- this seems to substantially improve performance from lethargic minutes of loading on first page load to seconds
  - I believe Storybook tries to code split things itself, so maybe it was making a giant bundle for each story file?

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 19, 2024
    Configuration menu
    Copy the full SHA
    6a82512 View commit details
    Browse the repository at this point in the history

  2. chore(storybook): update v1 syntax to use Storybook v6 

    - 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
  - 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)
      - tried to keep the diff as small as possible
    - CSF is still valid through to latest v8

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 19, 2024
    Configuration menu
    Copy the full SHA
    59aedfc View commit details
    Browse the repository at this point in the history

  3. chore(storybook): convert v1 config to use Storybook v6 

    - modified version of v2's config

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 19, 2024
    Configuration menu
    Copy the full SHA
    4b05145 View commit details
    Browse the repository at this point in the history

  4. fixup config a bit -- take more from prev webpack config 

    - `ts-loader` is necessary to handle the `import type` syntax
  - custom `tsconfig.json` doesn't seem necessary though
- use same SASS config
- plain CSS config not needed though bc PostCSS already runs by default

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 19, 2024
    Configuration menu
    Copy the full SHA
    b1da16f View commit details
    Browse the repository at this point in the history

  5. rename to .stories.tsx and remove index 

    - the conventional format
  - also had some problems finding stories without this change

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 19, 2024
    Configuration menu
    Copy the full SHA
    1bb3401 View commit details
    Browse the repository at this point in the history

  6. fix deprecation warning re: storyName 

    - per https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#hoisted-csf-annotations
  - migrate `.story.name` -> `.storyName`
    - not sure why the automigration didn't do this and instead used the deprecated name 😕

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 19, 2024
    Configuration menu
    Copy the full SHA
    f09b116 View commit details
    Browse the repository at this point in the history

  7. also fix history deprecation warning 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 19, 2024
    Configuration menu
    Copy the full SHA
    ae6ef5c View commit details
    Browse the repository at this point in the history

  8. attempt to load CSS properly but still fail 

    Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 19, 2024
    Configuration menu
    Copy the full SHA
    ba76eda View commit details
    Browse the repository at this point in the history

  9. improve perf with built in loader for TS 

    - remove `ts-loader` as not necessary
- plus some settings for Storybook's TS loader preset

Signed-off-by: Anton Gilgur <agilgur5@gmail.com>
    @agilgur5
    agilgur5 committed Jul 19, 2024
    Configuration menu
    Copy the full SHA
    ea006e0 View commit details
    Browse the repository at this point in the history