wip: update to storybook 7 #66

bnjm · 2023-08-09T11:50:52Z

This PR bumps several dependencies, the most significant change being the Storybook update to v7 (which uses Vite under the hood). The change was motivated by conflicting peer dependencies in #64, which this PR encompasses.

The main commit to review is 194fc49. The automigrate helper (https://storybook.js.org/docs/react/migration-guide) got us 90% of the way there.

Included changes from the combine-dependabot PR:

#61 chore: bump vite-plugin-dts from 3.0.3 to 3.5.1
#60 chore: bump @vueuse/core from 10.2.1 to 10.3.0
#59 chore: bump @types/lodash from 4.14.195 to 4.14.196
#58 chore: bump @vitest/ui from 0.33.0 to 0.34.1
#57 chore: bump @typescript-eslint/eslint-plugin from 5.59.11 to 6.3.0
#56 chore: bump vitest from 0.32.2 to 0.34.1
#54 chore: bump eslint from 8.45.0 to 8.46.0
#53 chore: bump eslint-plugin-vue from 9.15.1 to 9.16.1
#52 chore: bump prettier from 3.0.0 to 3.0.1

This closes AL-3484

Bumps [prettier](https://github.com/prettier/prettier) from 3.0.0 to 3.0.1. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](prettier/prettier@3.0.0...3.0.1) --- updated-dependencies: - dependency-name: prettier dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]>

Bumps [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue) from 9.15.1 to 9.16.1. - [Release notes](https://github.com/vuejs/eslint-plugin-vue/releases) - [Commits](vuejs/eslint-plugin-vue@v9.15.1...v9.16.1) --- updated-dependencies: - dependency-name: eslint-plugin-vue dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]>

Bumps [eslint](https://github.com/eslint/eslint) from 8.45.0 to 8.46.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](eslint/eslint@v8.45.0...v8.46.0) --- updated-dependencies: - dependency-name: eslint dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]>

Bumps [vitest](https://github.com/vitest-dev/vitest/tree/HEAD/packages/vitest) from 0.32.2 to 0.34.1. - [Release notes](https://github.com/vitest-dev/vitest/releases) - [Commits](https://github.com/vitest-dev/vitest/commits/v0.34.1/packages/vitest) --- updated-dependencies: - dependency-name: vitest dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]>

Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 5.59.11 to 6.3.0. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v6.3.0/packages/eslint-plugin) --- updated-dependencies: - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]>

Bumps [@vitest/ui](https://github.com/vitest-dev/vitest/tree/HEAD/packages/ui) from 0.33.0 to 0.34.1. - [Release notes](https://github.com/vitest-dev/vitest/releases) - [Commits](https://github.com/vitest-dev/vitest/commits/v0.34.1/packages/ui) --- updated-dependencies: - dependency-name: "@vitest/ui" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]>

Bumps [@types/lodash](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/lodash) from 4.14.195 to 4.14.196. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/lodash) --- updated-dependencies: - dependency-name: "@types/lodash" dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]>

Bumps [vite-plugin-dts](https://github.com/qmhc/vite-plugin-dts) from 3.0.3 to 3.5.1. - [Release notes](https://github.com/qmhc/vite-plugin-dts/releases) - [Changelog](https://github.com/qmhc/vite-plugin-dts/blob/main/CHANGELOG.md) - [Commits](qmhc/vite-plugin-dts@v3.0.3...v3.5.1) --- updated-dependencies: - dependency-name: vite-plugin-dts dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]>

Bumps [@vueuse/core](https://github.com/vueuse/vueuse/tree/HEAD/packages/core) from 10.2.1 to 10.3.0. - [Release notes](https://github.com/vueuse/vueuse/releases) - [Commits](https://github.com/vueuse/vueuse/commits/v10.3.0/packages/core) --- updated-dependencies: - dependency-name: "@vueuse/core" dependency-type: direct:production update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]>

bnjm · 2023-08-09T12:19:37Z

src/stories/AppMenu.stories.mdx

@@ -732,7 +732,6 @@ Menu items can be disabled.
        template: '<div class="absolute flex inset-0 p-16"><story /></div>'
      })
    ]}>
-    >


dormant typo which threw an error due to the mdx2 update

romiekos · 2023-08-09T12:20:01Z

Wow, new UI and the docs page

romiekos · 2023-08-09T12:20:56Z

And the syntax highlight!

romiekos · 2023-08-09T12:22:31Z

Some buttons are not working.
Example: go to https://649d652b7201581ed9f63642-pogfmcxpzj.chromatic.com/?path=/docs/components-dialog--docs and try to click on the "Show code" button.

bnjm · 2023-08-09T12:25:11Z

.storybook/manager.js

+import { themes } from '@storybook/theming'
+
+addons.setConfig({
+  theme: themes.light


without this, the new default for Storybook is 'auto', which looks weird next to our non-dark-mode-friendly design system. I also didn't want to change too much while Iana is away 😅

bnjm · 2023-08-09T12:58:24Z

Some buttons are not working. Example: go to 649d652b7201581ed9f63642-pogfmcxpzj.chromatic.com/?path=/docs/components-dialog--docs and try to click on the "Show code" button.

good catch, that might be a blocker, will put this is back into draft and look into it

ianaa · 2023-10-26T09:04:34Z

Some buttons are not working. Example: go to 649d652b7201581ed9f63642-pogfmcxpzj.chromatic.com/?path=/docs/components-dialog--docs and try to click on the "Show code" button.

good catch, that might be a blocker, will put this is back into draft and look into it

@romandkos @bnjm thanks for your time on this! After spending quite some time trying to resolve this issue I think the problem lies within the fact that storybook docs run on React, and us trying to render Vue templates inside of them results in an error. here from the docs

While MDX2 supports a variety of runtimes (React, Preact, Vue), Storybook’s implementation is React-only. That means your documentation is rendered in React, while your stories render in the runtime of your choice (React, Vue, Angular, Web Components, Svelte, etc.).

so for more complex components (and their stories), I need to extract those stories from the mdx files.
On a side note, while technically this still works, putting children inside the canvas element is deprecated.

While @bnjm's PR is getting us halfway there, I'll open a fresh one with similar changes plus the mdx/story refactorings just because I merged a bunch of non-storybook dependency updates to main already, and there are many conflicts in package-lock.json

bnjm changed the title ~~chore: bump prettier from 3.0.0 to 3.0.1~~ chore: update to storybook 7 Aug 9, 2023

bnjm force-pushed the storybook-7 branch from 194fc49 to a4adf9c Compare August 9, 2023 12:07

dependabot bot and others added 10 commits August 9, 2023 14:10

chore: update to storybook 7

58e4e17

bnjm force-pushed the storybook-7 branch from a4adf9c to 58e4e17 Compare August 9, 2023 12:11

bnjm requested a review from a team August 9, 2023 12:13

bnjm marked this pull request as ready for review August 9, 2023 12:17

bnjm commented Aug 9, 2023

View reviewed changes

bnjm marked this pull request as draft August 9, 2023 12:58

.fix: storybook should be a dev dependency

9ef489a

bnjm removed the request for review from a team August 10, 2023 09:59

bnjm changed the title ~~chore: update to storybook 7~~ wip: update to storybook 7 Aug 10, 2023

bnjm mentioned this pull request Aug 10, 2023

chore(deps): update dev dependencies #67

Merged

update deps

ca20c0c

ianaa closed this Oct 26, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

wip: update to storybook 7 #66

wip: update to storybook 7 #66

bnjm commented Aug 9, 2023 •

edited

Loading

bnjm Aug 9, 2023 •

edited

Loading

romiekos commented Aug 9, 2023

romiekos commented Aug 9, 2023

romiekos commented Aug 9, 2023

bnjm Aug 9, 2023

bnjm commented Aug 9, 2023

ianaa commented Oct 26, 2023 •

edited

Loading

wip: update to storybook 7 #66

wip: update to storybook 7 #66

Conversation

bnjm commented Aug 9, 2023 • edited Loading

bnjm Aug 9, 2023 • edited Loading

Choose a reason for hiding this comment

romiekos commented Aug 9, 2023

romiekos commented Aug 9, 2023

romiekos commented Aug 9, 2023

bnjm Aug 9, 2023

Choose a reason for hiding this comment

bnjm commented Aug 9, 2023

ianaa commented Oct 26, 2023 • edited Loading

bnjm commented Aug 9, 2023 •

edited

Loading

bnjm Aug 9, 2023 •

edited

Loading

ianaa commented Oct 26, 2023 •

edited

Loading