Support Storybook 7

[yannbf]

This is a followup work on #12 as I couldn't push to the branch unfortunately. Original work by @i-udas

Closes #3, Closes #8, Closes #10, Closes #11

What I did

• Updates Storybook example to version 7
• Updates implementation and dependency to support and use Storybook 7 apis

Release Notes

Support Storybook 7.0 (#13)

💥 Breaking Change

This version adds support for Storybook 7.0. It requires you to be using Storybook 7.0, as there were several internal changes required, all of which depend on new Storybook packages.

🚀 Features

In Storybook 7.0, the play function can also be defined in the Meta (default export). This is now supported in @storybook/testing-vue3.

Additionally, this package also supports CSF3, while maintaining compatibility with previous formats as well such as CSF1 and CSF2.

⚠️ Deprecations

The setGlobalConfig function is now deprecated in favor of setProjectAnnotations, which aligns better with Storybook 7.0 nomenclature.

From:

  import { setGlobalConfig } from '@storybook/testing-vue3';
  import * as globalStorybookConfig from './.storybook/preview';

  setGlobalConfig(globalStorybookConfig);

To:

  import { setProjectAnnotations } from '@storybook/testing-vue3';
  import * as globalStorybookConfig from './.storybook/preview';

  setProjectAnnotations(globalStorybookConfig);

The future of @storybook/testing-vue3

This package served as a way to provide testing utilities for Vue + Storybook users, and after some validation it's a candidate to be promoted into the @storybook/vue3 package itself. Meaning, in the near future, the utilities of this package will be merged into @storybook/vue3 and the @storybook/testing-vue3 package will be deprecated, given that you won't need yet another package anymore. This should happen in the upcoming months.

Once this is done, there will be a final release notifying the users, and the migration should be simple and straightforward. Thank you so much for using this package!

📦 Published PR as canary version: 1.0.0-canary.13.c3b6b8a.0

:sparkles: Test out this PR locally via: ```bash npm install @storybook/testing-vue3@1.0.0-canary.13.c3b6b8a.0 # or yarn add @storybook/testing-vue3@1.0.0-canary.13.c3b6b8a.0 ```

[yannbf]

For anyone interested (cc @shuda323, @AlmarAubel, @mikiSumcul, @mrtnvh, @MichaelBitard, @Hanawa02, @i-udas), please follow this PR and test its canary version. It's currently in version 1.0.0-canary.13.922565e.0, however with typescript issues for now (so ignore that part for now)

Feedback is deeply appreciated!

[yannbf]

@SocketSecurity ignore-all

[MichaelBitard]

Hi,

Thanks for your work!

We have tried this PR --> https://github.com/MTES-MCT/camino/pull/621/files#diff-1e6de3828ce1525bbc845baedb2831cd210cf0284863af1f7bbb618fc555c825

and we only have the *.ts storybook files failing, all our *.tsx storybook files work well

[yannbf]

Hi,

Thanks for your work!

We have tried this PR --> https://github.com/MTES-MCT/camino/pull/621/files#diff-1e6de3828ce1525bbc845baedb2831cd210cf0284863af1f7bbb618fc555c825

and we only have the *.ts storybook files failing, all our *.tsx storybook files work well

Thank you so much @MichaelBitard, your reproduction was crucial to get this in the right shape. The most recent version should work with JSX and non-JSX stories: 1.0.0-canary.13.54193a7.0, there's only one last step to get this 100%, which is the Typescript types!

[socket-security[bot]]

New, updated, and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Packages	Version	New capabilities	Transitives	Size	Publisher
vite	4.3.9	eval, network, filesystem, shell, environment	+27	212 MB	vitebot
react-dom	18.2.0	None	+2	4.91 MB	gnoff
typescript	4.9.5	None	+0	66.8 MB	typescript-bot
vitest	0.32.2	eval, filesystem, shell, environment	+102	223 MB	oreanno
vitest	0.33.0	filesystem, shell, environment	+32	6.77 MB	oreanno
storybook	7.0.26	None	+348	277 MB	shilman
vue-tsc	1.6.5	filesystem	+8	44.7 MB	johnsoncodehk
@storybook/client-logger	7.0.26	None	+1	11.7 kB	shilman
@storybook/testing-library	0.2.0	eval, filesystem	+51	6.54 MB	yannbf
@storybook/preview-api	7.0.26	network	+18	6.07 MB	shilman
jsdom	22.1.0	network	+31	6.6 MB	domenic
@storybook/blocks	7.0.26	eval	+135	248 MB	shilman
vue	3.3.4	eval	+9	9.83 MB	yyx990803
@storybook/types	7.0.26	None	+8	4.85 MB	shilman
react	18.2.0	None	+0	316 kB	gnoff
@storybook/vue3-vite	7.0.26	None	+226	321 MB	shilman
@vitejs/plugin-vue	4.2.3	network, environment	+36	221 MB	vitebot
@testing-library/vue	7.0.0	network, environment	+69	18.5 MB	testing-library-bot
@storybook/addon-interactions	7.0.26	shell	+109	234 MB	shilman
@testing-library/jest-dom	5.16.5	None	+60	7.57 MB	testing-library-bot
expect-type	0.16.0	None	+0	39.9 kB	mmkale
typescript	4.1.5...5.1.3	None	+0/-0	40.1 MB	typescript-bot
@storybook/vue3	6.2.9...7.0.26	eval	+203/-500	452 MB	shilman
@storybook/addon-essentials	6.2.9...7.0.26	None	+210/-336	261 MB	shilman
@storybook/addon-links	6.2.9...7.0.26	network	+42/-17	19.1 MB	shilman

🚮 Removed packages: @babel/core@7.12.9, @cypress/vue@3.0.1, @cypress/webpack-dev-server@1.3.0, @storybook/addon-actions@6.2.9, @storybook/addons@6.2.9, @storybook/client-api@6.2.9, @vue/cli-plugin-typescript@4.5.13, @vue/cli-service@4.5.13, @vue/compiler-sfc@3.0.11, babel-loader@8.2.2, cypress@7.4.0, vue-loader@15.9.7

[MichaelBitard]

You're welcome, thanks to you for doing all this! I was merely an alpha-tester :)

I updated our PR with your latest version and it works for tsx and ts files \o/.

I just had to add a function check if (typeof value.story === 'function') { here https://github.com/MTES-MCT/camino/pull/621/files#diff-1e6de3828ce1525bbc845baedb2831cd210cf0284863af1f7bbb618fc555c825R43 to make typescript happy

[yannbf]

You're welcome, thanks to you for doing all this! I was merely an alpha-tester :)

I updated our PR with your latest version and it works for tsx and ts files \o/.

I just had to add a function check if (typeof value.story === 'function') { here https://github.com/MTES-MCT/camino/pull/621/files#diff-1e6de3828ce1525bbc845baedb2831cd210cf0284863af1f7bbb618fc555c825R43 to make typescript happy

Thanks once again <3 I believe I fixed all issues now, it's shippable and you wouldn't need any workaround. Could you please do a final test?

1.0.0-canary.13.c3b6b8a.0

[MichaelBitard]

hell yeah \o/ It's perfect!

[yannbf]

@MichaelBitard thanks once again, v1.0.0 is released!