From de2a0780122054a272837a4c7ac6a42899e7ce6c Mon Sep 17 00:00:00 2001 From: chakAs3 Date: Tue, 4 Apr 2023 11:39:17 +0400 Subject: [PATCH 1/9] support add new functions to vue app setup --- code/renderers/vue3/src/render.ts | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts index 640fc54d4e52..7033d489f9f0 100644 --- a/code/renderers/vue3/src/render.ts +++ b/code/renderers/vue3/src/render.ts @@ -1,4 +1,5 @@ /* eslint-disable no-param-reassign */ +import type { App } from 'vue'; import { createApp, h, reactive } from 'vue'; import type { RenderContext, ArgsStoryFn } from '@storybook/types'; import type { Args, StoryContext } from '@storybook/csf'; @@ -14,10 +15,18 @@ export const render: ArgsStoryFn = (props, context) => { return h(Component, props, getSlots(props, context)); }; +// set of setup functions that will be called when story is created +const setupFunctions = new Set<(app: App, storyContext?: StoryContext) => void>(); +/** add a setup function to set that will be call when story is created a d + * + * @param fn + */ +export const setup = (fn: (app: App, storyContext?: StoryContext) => void) => { + setupFunctions.add(fn); +}; -let setupFunction = (_app: any) => {}; -export const setup = (fn: (app: any) => void) => { - setupFunction = fn; +const runSetupFunctions = (app: App, storyContext: StoryContext) => { + setupFunctions.forEach((fn) => fn(app, storyContext)); }; const map = new Map< @@ -59,7 +68,7 @@ export function renderToCanvas( }); storybookApp.config.errorHandler = (e: unknown) => showException(e as Error); - setupFunction(storybookApp); + runSetupFunctions(storybookApp, storyContext); storybookApp.mount(canvasElement); showMain(); From 28bded3911e0d8e702050a05fa71fd935364a54f Mon Sep 17 00:00:00 2001 From: chakAs3 Date: Wed, 5 Apr 2023 16:26:30 +0400 Subject: [PATCH 2/9] add stories test for provide/inject and using setup in different places --- .../template/stories/GlobalSetup.stories.js | 32 +++++++++++++++ .../vue3/template/stories/GlobalSetup.vue | 4 ++ .../vue3/template/stories/preview.js | 13 ------- .../vue3/template/stories/preview.ts | 39 +++++++++++++++++++ 4 files changed, 75 insertions(+), 13 deletions(-) create mode 100644 code/renderers/vue3/template/stories/GlobalSetup.stories.js create mode 100644 code/renderers/vue3/template/stories/GlobalSetup.vue delete mode 100644 code/renderers/vue3/template/stories/preview.js create mode 100644 code/renderers/vue3/template/stories/preview.ts diff --git a/code/renderers/vue3/template/stories/GlobalSetup.stories.js b/code/renderers/vue3/template/stories/GlobalSetup.stories.js new file mode 100644 index 000000000000..7344f31dc763 --- /dev/null +++ b/code/renderers/vue3/template/stories/GlobalSetup.stories.js @@ -0,0 +1,32 @@ +import { inject } from 'vue'; +import GlobalUsage from './GlobalUsage.vue'; +import GlobalSetup from './GlobalSetup.vue'; + +export default { + component: GlobalSetup, + argTypes: {}, + render: (args) => ({ + // Components used in your story `template` are defined in the `components` object + components: { GlobalSetup }, + // The story's `args` need to be mapped into the template through the `setup()` method + setup() { + const themeColor = inject('themeColor', 'red'); // <-- this is the global setup from .storybook/preview.ts + return { args: { ...args, backgroundColor: themeColor } }; + }, + // And then the `args` are bound to your component with `v-bind="args"` + template: ``, + }), +}; + +export const Primary = { + args: { + primary: true, + label: 'Global Setup', + }, +}; + +export const Secondary = { + args: { + label: 'Global Setup', + }, +}; diff --git a/code/renderers/vue3/template/stories/GlobalSetup.vue b/code/renderers/vue3/template/stories/GlobalSetup.vue new file mode 100644 index 000000000000..7e2c93756432 --- /dev/null +++ b/code/renderers/vue3/template/stories/GlobalSetup.vue @@ -0,0 +1,4 @@ + diff --git a/code/renderers/vue3/template/stories/preview.js b/code/renderers/vue3/template/stories/preview.js deleted file mode 100644 index c57ed02a172a..000000000000 --- a/code/renderers/vue3/template/stories/preview.js +++ /dev/null @@ -1,13 +0,0 @@ -import { global as globalThis } from '@storybook/global'; -// eslint-disable-next-line import/no-extraneous-dependencies -import { setup } from '@storybook/vue3'; - -// TODO: I'd like to be able to export rather than imperatively calling an imported function -// export const setup = (app) => { -// app.component('GlobalButton', Button); -// }; - -setup((app) => { - // This adds a component that can be used globally in stories - app.component('GlobalButton', globalThis.Components.Button); -}); diff --git a/code/renderers/vue3/template/stories/preview.ts b/code/renderers/vue3/template/stories/preview.ts new file mode 100644 index 000000000000..24a38773656e --- /dev/null +++ b/code/renderers/vue3/template/stories/preview.ts @@ -0,0 +1,39 @@ +import { global as globalThis } from '@storybook/global'; +// eslint-disable-next-line import/no-extraneous-dependencies +import { setup } from '@storybook/vue3'; +import type { App, Plugin } from 'vue'; + +const i18nPlugin: Plugin = { + install: (app: App, options) => { + // inject a globally available $translate() method + // eslint-disable-next-line no-param-reassign + app.config.globalProperties.$translate = (key: string) => { + // retrieve a nested property in `options` + // using `key` as the path + return key.split('.').reduce((o: { [x: string]: any }, i: string | number) => { + if (o) return o[i]; + }, options); + }; + }, +}; +const themeColor = 'themeColor'; + +// add components to global scope +setup((app) => { + // This adds a component that can be used globally in stories + app.component('GlobalButton', globalThis.Components.Button); +}); + +// this adds a plugin to vue app +setup((app, context) => { + app.use(i18nPlugin, { + greetings: { + hello: 'Bonjour!', + }, + }); +}); + +// additonal setup to provide selected language to the app +setup((app, context) => { + app.provide(themeColor, 'green'); +}); From a920749409a5b190b3a1e6a6a85250d539a52ce6 Mon Sep 17 00:00:00 2001 From: chakAs3 Date: Fri, 7 Apr 2023 16:29:02 +0400 Subject: [PATCH 3/9] merging back changes from next to vue3-setup-functions --- CHANGELOG.md | 28 + MIGRATION.md | 5 - code/addons/a11y/package.json | 22 +- code/addons/actions/package.json | 18 +- code/addons/backgrounds/package.json | 18 +- code/addons/controls/package.json | 22 +- code/addons/docs/angular/README.md | 2 +- code/addons/docs/common/README.md | 2 +- code/addons/docs/ember/README.md | 2 +- code/addons/docs/package.json | 26 +- code/addons/docs/react/README.md | 2 +- code/addons/docs/src/preview.ts | 3 - code/addons/docs/vue/README.md | 2 +- code/addons/docs/vue3/README.md | 2 +- code/addons/essentials/package.json | 32 +- code/addons/gfm/package.json | 6 +- code/addons/gfm/src/index.ts | 2 +- code/addons/highlight/package.json | 8 +- code/addons/interactions/package.json | 22 +- code/addons/jest/package.json | 16 +- code/addons/links/package.json | 16 +- code/addons/measure/package.json | 16 +- code/addons/outline/package.json | 16 +- code/addons/storyshots-core/package.json | 24 +- code/addons/storyshots-puppeteer/package.json | 10 +- code/addons/storysource/package.json | 18 +- code/addons/toolbars/package.json | 14 +- code/addons/viewport/package.json | 16 +- code/frameworks/angular/package.json | 30 +- .../client/angular-beta/AbstractRenderer.ts | 25 +- .../src/client/angular-beta/DocsRenderer.ts | 4 +- .../angular/template/cli/Button.stories.ts | 4 +- .../angular/template/cli/Header.stories.ts | 4 +- .../angular/template/cli/Page.stories.ts | 4 +- code/frameworks/ember/package.json | 14 +- .../ember/template/cli/Button.stories.js | 6 +- code/frameworks/html-vite/package.json | 22 +- code/frameworks/html-webpack5/package.json | 12 +- code/frameworks/nextjs/README.md | 6 +- code/frameworks/nextjs/package.json | 18 +- .../nextjs/template/cli/js/Button.stories.js | 4 +- .../nextjs/template/cli/js/Header.stories.js | 4 +- .../nextjs/template/cli/js/Page.stories.js | 4 +- .../template/cli/ts-3-8/Button.stories.ts | 4 +- .../template/cli/ts-3-8/Header.stories.ts | 4 +- .../template/cli/ts-3-8/Page.stories.ts | 4 +- .../nextjs/template/cli/ts/Button.stories.ts | 4 +- .../nextjs/template/cli/ts/Header.stories.ts | 4 +- .../nextjs/template/cli/ts/Page.stories.ts | 4 +- code/frameworks/preact-vite/README.md | 6 +- code/frameworks/preact-vite/package.json | 8 +- code/frameworks/preact-webpack5/package.json | 12 +- code/frameworks/react-vite/package.json | 8 +- code/frameworks/react-webpack5/package.json | 10 +- code/frameworks/server-webpack5/package.json | 12 +- code/frameworks/svelte-vite/package.json | 10 +- code/frameworks/svelte-webpack5/package.json | 12 +- code/frameworks/sveltekit/README.md | 6 +- code/frameworks/sveltekit/package.json | 10 +- code/frameworks/vue-vite/package.json | 12 +- code/frameworks/vue-webpack5/package.json | 12 +- code/frameworks/vue3-vite/package.json | 10 +- code/frameworks/vue3-webpack5/package.json | 12 +- .../web-components-vite/package.json | 12 +- .../web-components-webpack5/package.json | 12 +- code/lerna.json | 2 +- code/lib/addons/package.json | 10 +- code/lib/builder-manager/package.json | 10 +- code/lib/builder-vite/README.md | 2 +- code/lib/builder-vite/package.json | 22 +- code/lib/builder-webpack5/package.json | 40 +- code/lib/channel-postmessage/package.json | 10 +- code/lib/channel-websocket/package.json | 8 +- code/lib/channels/package.json | 4 +- code/lib/cli-sb/package.json | 6 +- code/lib/cli-storybook/package.json | 6 +- code/lib/cli/package.json | 20 +- code/lib/cli/src/automigrate/fixes/mdx-gfm.ts | 2 +- .../cli/src/js-package-manager/NPMProxy.ts | 4 +- code/lib/cli/src/versions.ts | 186 +-- code/lib/client-api/package.json | 8 +- code/lib/client-logger/package.json | 4 +- code/lib/codemod/package.json | 10 +- code/lib/core-client/package.json | 8 +- code/lib/core-common/package.json | 8 +- code/lib/core-events/package.json | 4 +- code/lib/core-server/package.json | 22 +- code/lib/core-webpack/package.json | 10 +- code/lib/csf-plugin/package.json | 6 +- code/lib/csf-tools/package.json | 6 +- code/lib/docs-tools/package.json | 10 +- code/lib/instrumenter/package.json | 12 +- code/lib/manager-api-shim/package.json | 8 +- code/lib/manager-api/package.json | 16 +- code/lib/manager-api/src/index.tsx | 2 +- code/lib/manager-api/src/version.ts | 2 +- code/lib/node-logger/package.json | 4 +- code/lib/postinstall/package.json | 4 +- code/lib/preview-api/package.json | 16 +- .../preview-api/src/modules/addons/hooks.ts | 5 +- code/lib/preview-web/package.json | 8 +- code/lib/preview/package.json | 16 +- code/lib/react-dom-shim/package.json | 6 +- code/lib/router/package.json | 6 +- code/lib/source-loader/package.json | 6 +- code/lib/store/package.json | 8 +- .../store/template/stories/args.stories.ts | 1 + .../store/template/stories/globals.stories.ts | 1 + code/lib/telemetry/package.json | 8 +- code/lib/theming/package.json | 6 +- code/lib/types/package.json | 6 +- code/package.json | 2 +- code/presets/create-react-app/package.json | 8 +- code/presets/html-webpack/package.json | 6 +- code/presets/preact-webpack/package.json | 6 +- code/presets/react-webpack/package.json | 12 +- code/presets/server-webpack/package.json | 10 +- code/presets/svelte-webpack/package.json | 8 +- code/presets/vue-webpack/package.json | 8 +- code/presets/vue3-webpack/package.json | 8 +- .../web-components-webpack/package.json | 6 +- code/renderers/html/package.json | 12 +- .../html/template/cli/js/Button.stories.js | 4 +- .../html/template/cli/js/Header.stories.js | 6 +- .../html/template/cli/js/Page.stories.js | 4 +- .../template/cli/ts-3-8/Button.stories.ts | 2 +- .../template/cli/ts-3-8/Header.stories.ts | 6 +- .../html/template/cli/ts-3-8/Page.stories.ts | 4 +- .../template/cli/ts-4-9/Button.stories.ts | 2 +- .../template/cli/ts-4-9/Header.stories.ts | 6 +- .../html/template/cli/ts-4-9/Page.stories.ts | 4 +- code/renderers/preact/package.json | 10 +- .../preact/template/cli/Button.stories.jsx | 4 +- .../preact/template/cli/Header.stories.jsx | 4 +- .../preact/template/cli/Page.stories.jsx | 4 +- code/renderers/react/package.json | 16 +- code/renderers/react/src/applyDecorators.ts | 19 + code/renderers/react/src/config.ts | 2 + .../react/template/cli/js/Button.stories.js | 4 +- .../react/template/cli/js/Header.stories.js | 4 +- .../react/template/cli/js/Page.stories.js | 4 +- .../template/cli/ts-3-8/Button.stories.ts | 2 +- .../template/cli/ts-3-8/Header.stories.ts | 2 +- .../template/cli/ts-4-9/Button.stories.ts | 4 +- .../template/cli/ts-4-9/Header.stories.ts | 4 +- .../react/template/cli/ts-4-9/Page.stories.ts | 4 +- .../template/stories/decorators.stories.tsx | 22 +- code/renderers/server/package.json | 10 +- code/renderers/svelte/package.json | 16 +- .../svelte/template/cli/js/Button.stories.js | 4 +- .../svelte/template/cli/js/Header.stories.js | 4 +- .../svelte/template/cli/js/Page.stories.js | 4 +- .../template/cli/ts-3-8/Button.stories.ts | 4 +- .../template/cli/ts-3-8/Header.stories.ts | 4 +- .../template/cli/ts-3-8/Page.stories.ts | 4 +- .../template/cli/ts-4-9/Button.stories.ts | 4 +- .../template/cli/ts-4-9/Header.stories.ts | 4 +- .../template/cli/ts-4-9/Page.stories.ts | 4 +- code/renderers/vue/package.json | 14 +- .../vue/template/cli/Button.stories.js | 4 +- .../vue/template/cli/Header.stories.js | 4 +- .../vue/template/cli/Page.stories.js | 4 +- code/renderers/vue3/package.json | 12 +- code/renderers/vue3/src/decorateStory.ts | 25 +- .../vue3/src/docs/sourceDecorator.test.ts | 434 ++++++- .../vue3/src/docs/sourceDecorator.ts | 438 ++++--- code/renderers/vue3/src/docs/utils.ts | 77 ++ code/renderers/vue3/src/render.test.ts | 89 ++ code/renderers/vue3/src/render.ts | 114 +- .../vue3/template/cli/js/Button.stories.js | 4 +- .../vue3/template/cli/js/Header.stories.js | 4 +- .../vue3/template/cli/js/Page.stories.js | 4 +- .../template/cli/ts-3-8/Button.stories.ts | 6 +- .../template/cli/ts-3-8/Header.stories.ts | 6 +- .../vue3/template/cli/ts-3-8/Page.stories.ts | 6 +- .../template/cli/ts-4-9/Button.stories.ts | 6 +- .../template/cli/ts-4-9/Header.stories.ts | 6 +- .../vue3/template/cli/ts-4-9/Page.stories.ts | 6 +- .../vue3/template/stories/BaseLayout.vue | 18 + .../template/stories/GlobalSetup.stories.js | 45 + .../vue3/template/stories/GlobalSetup.vue | 4 + .../vue3/template/stories/GlobalUsage.vue | 2 +- .../vue3/template/stories/MySlotComponent.vue | 12 + .../template/stories/ReactiveArgs.stories.js | 83 ++ .../template/stories/ReactiveSlots.stories.ts | 88 ++ .../template/stories/ScopedSlots.stories.ts | 81 ++ .../vue3/template/stories/preview.js | 13 - .../vue3/template/stories/preview.ts | 42 + code/renderers/vue3/tsconfig.json | 3 +- code/renderers/web-components/package.json | 16 +- .../template/cli/js/Button.stories.js | 4 +- .../template/cli/js/Header.stories.js | 2 +- .../template/cli/js/Page.stories.js | 2 +- .../template/cli/ts-3-8/Button.stories.ts | 4 +- .../template/cli/ts-3-8/Header.stories.ts | 2 +- .../template/cli/ts-3-8/Page.stories.ts | 2 +- .../template/cli/ts-4-9/Button.stories.ts | 4 +- .../template/cli/ts-4-9/Header.stories.ts | 2 +- .../template/cli/ts-4-9/Page.stories.ts | 2 +- code/ui/blocks/package.json | 24 +- code/ui/blocks/src/components/Source.tsx | 4 +- code/ui/components/package.json | 10 +- code/ui/components/src/spaced/Spaced.tsx | 6 +- code/ui/components/src/tabs/tabs.tsx | 5 +- code/ui/manager/package.json | 28 +- code/ui/manager/src/index.tsx | 29 +- code/yarn.lock | 1009 +++++++++-------- docs/addons/addon-migration-guide.md | 78 ++ docs/addons/install-addons.md | 6 - docs/builders/builder-api.md | 6 - docs/builders/vite.md | 6 - docs/configure/babel.md | 2 +- docs/configure/overview.md | 10 +- docs/configure/theming.md | 6 - docs/configure/upgrading.md | 15 +- docs/essentials/interactions.md | 6 - docs/essentials/introduction.md | 12 - docs/get-started/install.md | 4 +- .../installation-problems/angular.mdx | 2 +- .../installation-problems/react.mdx | 2 +- docs/migration-guide.md | 14 +- docs/snippets/common/init-command.npx.js.mdx | 3 + docs/snippets/common/init-command.npx.mdx | 3 - docs/snippets/common/init-command.pnpm.js.mdx | 3 + docs/snippets/common/init-command.pnpm.mdx | 3 - .../common/storybook-a11y-install.npm.js.mdx | 2 +- .../common/storybook-a11y-install.pnpm.js.mdx | 2 +- .../common/storybook-a11y-install.yarn.js.mdx | 2 +- ...storybook-addon-actions-install.npm.js.mdx | 2 +- ...torybook-addon-actions-install.pnpm.js.mdx | 2 +- ...torybook-addon-actions-install.yarn.js.mdx | 2 +- ...rybook-addon-essentials-install.npm.js.mdx | 2 +- ...ybook-addon-essentials-install.pnpm.js.mdx | 2 +- ...ybook-addon-essentials-install.yarn.js.mdx | 2 +- ...interactions-addon-full-install.npm.js.mdx | 2 +- ...nteractions-addon-full-install.pnpm.js.mdx | 2 +- ...nteractions-addon-full-install.yarn.js.mdx | 2 +- .../storybook-addon-panel-initial.js.mdx | 2 +- ...torybook-coverage-addon-install.npm.js.mdx | 2 +- ...orybook-coverage-addon-install.pnpm.js.mdx | 2 +- ...orybook-coverage-addon-install.yarn.js.mdx | 2 +- .../storybook-fallback-mdx-install.npm.js.mdx | 2 +- ...storybook-fallback-mdx-install.pnpm.js.mdx | 2 +- ...storybook-fallback-mdx-install.yarn.js.mdx | 2 +- .../storybook-test-runner-install.npm.js.mdx | 2 +- .../storybook-test-runner-install.pnpm.js.mdx | 2 +- .../storybook-test-runner-install.yarn.js.mdx | 2 +- ...storybook-testing-addon-install.npm.js.mdx | 2 +- ...torybook-testing-addon-install.yarn.js.mdx | 2 +- ...rybook-theming-packages-install.npm.js.mdx | 2 +- ...ybook-theming-packages-install.pnpm.js.mdx | 2 +- ...ybook-theming-packages-install.yarn.js.mdx | 2 +- .../storybook-upgrade-prerelease.npm.js.mdx | 2 +- .../storybook-upgrade-prerelease.pnpm.js.mdx | 2 +- .../common/storybook-upgrade.npm.js.mdx | 3 + .../common/storybook-upgrade.pnpm.js.mdx | 3 + .../storybook-vite-builder-install.npm.js.mdx | 2 +- ...storybook-vite-builder-install.yarn.js.mdx | 2 +- docs/toc.js | 5 + docs/writing-docs/mdx.md | 2 +- docs/writing-stories/decorators.md | 2 + docs/writing-stories/play-function.md | 6 - docs/writing-tests/accessibility-testing.md | 6 - .../importing-stories-in-tests.md | 6 - docs/writing-tests/interaction-testing.md | 6 - docs/writing-tests/test-coverage.md | 6 - docs/writing-tests/test-runner.md | 6 - 267 files changed, 2862 insertions(+), 1824 deletions(-) create mode 100644 code/renderers/react/src/applyDecorators.ts create mode 100644 code/renderers/vue3/src/docs/utils.ts create mode 100644 code/renderers/vue3/src/render.test.ts create mode 100644 code/renderers/vue3/template/stories/BaseLayout.vue create mode 100644 code/renderers/vue3/template/stories/GlobalSetup.stories.js create mode 100644 code/renderers/vue3/template/stories/GlobalSetup.vue create mode 100644 code/renderers/vue3/template/stories/MySlotComponent.vue create mode 100644 code/renderers/vue3/template/stories/ReactiveSlots.stories.ts create mode 100644 code/renderers/vue3/template/stories/ScopedSlots.stories.ts delete mode 100644 code/renderers/vue3/template/stories/preview.js create mode 100644 code/renderers/vue3/template/stories/preview.ts create mode 100644 docs/addons/addon-migration-guide.md create mode 100644 docs/snippets/common/init-command.npx.js.mdx delete mode 100644 docs/snippets/common/init-command.npx.mdx create mode 100644 docs/snippets/common/init-command.pnpm.js.mdx delete mode 100644 docs/snippets/common/init-command.pnpm.mdx create mode 100644 docs/snippets/common/storybook-upgrade.npm.js.mdx create mode 100644 docs/snippets/common/storybook-upgrade.pnpm.js.mdx diff --git a/CHANGELOG.md b/CHANGELOG.md index bea818f9392b..f6327ac323e9 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,31 @@ +## 7.1.0-alpha.0 (April 5, 2023) + +#### Bug Fixes + +- Angular: Fix components disappearing on docs page on property change [#21944](https://github.com/storybooks/storybook/pull/21944) +- React: Don't show decorators in JSX snippets [#21907](https://github.com/storybooks/storybook/pull/21907) +- Docs: Include decorators by default in source decorators [#21902](https://github.com/storybooks/storybook/pull/21902) +- CLI: Fix npm list command [#21947](https://github.com/storybooks/storybook/pull/21947) +- Core: Revert Emotion `:first-child` (etc) workarounds [#21213](https://github.com/storybooks/storybook/pull/21213) +- Addon-actions: Fix non-included type file [#21922](https://github.com/storybooks/storybook/pull/21922) +- Addon GFM: Fix node-logger dependency [#21938](https://github.com/storybooks/storybook/pull/21938) + +#### Build + +- Build: Update trigger circle ci workflow to include main [#21888](https://github.com/storybooks/storybook/pull/21888) +- Build: Update dangerfile temporarily to check for patch label [#21945](https://github.com/storybooks/storybook/pull/21945) +- Build: Re-enable Vue2 Vite sandbox [#21940](https://github.com/storybooks/storybook/pull/21940) +- Build: Fix release badge on repros [#21923](https://github.com/storybooks/storybook/pull/21923) +- Build: fix the workflows to generate sandboxes [#21912](https://github.com/storybooks/storybook/pull/21912) +- Build: bump the node version in CI [#21917](https://github.com/storybooks/storybook/pull/21917) +- Build: no `pnp.cjs` in the root, regen lockfiles [#21908](https://github.com/storybooks/storybook/pull/21908) +- Build: remove pnp sandbox template [#21913](https://github.com/storybooks/storybook/pull/21913) +- Build: make the CI config ready for 7.0 release [#21808](https://github.com/storybooks/storybook/pull/21808) + +#### Dependency Upgrades + +- Update `@emotion/cache` version [#21941](https://github.com/storybooks/storybook/pull/21941) + ## 7.0.2 (April 3, 2023) Storybook 7.0 is here! 🎉 diff --git a/MIGRATION.md b/MIGRATION.md index 950eee27b650..35a95f79222c 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -83,7 +83,6 @@ - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration) - [Autoplay in docs](#autoplay-in-docs) - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) - - [parameters.docs.source.excludeDecorators defaults to true](#parametersdocssourceexcludedecorators-defaults-to-true) - [7.0 Deprecations and default changes](#70-deprecations-and-default-changes) - [storyStoreV7 enabled by default](#storystorev7-enabled-by-default) - [`Story` type deprecated](#story-type-deprecated) @@ -1618,10 +1617,6 @@ If your story depends on a play function to render correctly, _and_ you are conf This was a legacy global variable from the early days of react docgen. If you were using this variable, you can instead use docgen information which is added directly to components using `.__docgenInfo`. -#### parameters.docs.source.excludeDecorators defaults to true - -By default we don't render decorators in the Source/Canvas blocks. If you want to render decorators, you can set the parameter to `false`. - ### 7.0 Deprecations and default changes #### storyStoreV7 enabled by default diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 94e4cb9999e5..8c4c87c0ab8e 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", @@ -63,16 +63,16 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addon-highlight": "7.0.2", - "@storybook/channels": "7.0.2", - "@storybook/client-logger": "7.0.2", - "@storybook/components": "7.0.2", - "@storybook/core-events": "7.0.2", + "@storybook/addon-highlight": "7.1.0-alpha.0", + "@storybook/channels": "7.1.0-alpha.0", + "@storybook/client-logger": "7.1.0-alpha.0", + "@storybook/components": "7.1.0-alpha.0", + "@storybook/core-events": "7.1.0-alpha.0", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.2", - "@storybook/preview-api": "7.0.2", - "@storybook/theming": "7.0.2", - "@storybook/types": "7.0.2", + "@storybook/manager-api": "7.1.0-alpha.0", + "@storybook/preview-api": "7.1.0-alpha.0", + "@storybook/theming": "7.1.0-alpha.0", + "@storybook/types": "7.1.0-alpha.0", "axe-core": "^4.2.0", "lodash": "^4.17.21", "react-resize-detector": "^7.1.2" @@ -104,7 +104,7 @@ "./src/preview.tsx" ] }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a", + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4", "storybook": { "displayName": "Accessibility", "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 3b35c439cf9f..f77d1cdb677a 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", @@ -80,14 +80,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.2", - "@storybook/components": "7.0.2", - "@storybook/core-events": "7.0.2", + "@storybook/client-logger": "7.1.0-alpha.0", + "@storybook/components": "7.1.0-alpha.0", + "@storybook/core-events": "7.1.0-alpha.0", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.2", - "@storybook/preview-api": "7.0.2", - "@storybook/theming": "7.0.2", - "@storybook/types": "7.0.2", + "@storybook/manager-api": "7.1.0-alpha.0", + "@storybook/preview-api": "7.1.0-alpha.0", + "@storybook/theming": "7.1.0-alpha.0", + "@storybook/types": "7.1.0-alpha.0", "dequal": "^2.0.2", "lodash": "^4.17.21", "polished": "^4.2.2", @@ -124,7 +124,7 @@ "./src/preview.ts" ] }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a", + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4", "storybook": { "displayName": "Actions", "unsupportedFrameworks": [ diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index e96aabb105a8..ffbf5ffc109d 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", @@ -76,14 +76,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.2", - "@storybook/components": "7.0.2", - "@storybook/core-events": "7.0.2", + "@storybook/client-logger": "7.1.0-alpha.0", + "@storybook/components": "7.1.0-alpha.0", + "@storybook/core-events": "7.1.0-alpha.0", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.2", - "@storybook/preview-api": "7.0.2", - "@storybook/theming": "7.0.2", - "@storybook/types": "7.0.2", + "@storybook/manager-api": "7.1.0-alpha.0", + "@storybook/preview-api": "7.1.0-alpha.0", + "@storybook/theming": "7.1.0-alpha.0", + "@storybook/types": "7.1.0-alpha.0", "memoizerific": "^1.11.3", "ts-dedent": "^2.0.0" }, @@ -112,7 +112,7 @@ "./src/preview.tsx" ] }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a", + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4", "storybook": { "displayName": "Backgrounds", "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 00ff59beb8b4..c6b90940e3b0 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", @@ -68,15 +68,15 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/blocks": "7.0.2", - "@storybook/client-logger": "7.0.2", - "@storybook/components": "7.0.2", - "@storybook/core-common": "7.0.2", - "@storybook/manager-api": "7.0.2", - "@storybook/node-logger": "7.0.2", - "@storybook/preview-api": "7.0.2", - "@storybook/theming": "7.0.2", - "@storybook/types": "7.0.2", + "@storybook/blocks": "7.1.0-alpha.0", + "@storybook/client-logger": "7.1.0-alpha.0", + "@storybook/components": "7.1.0-alpha.0", + "@storybook/core-common": "7.1.0-alpha.0", + "@storybook/manager-api": "7.1.0-alpha.0", + "@storybook/node-logger": "7.1.0-alpha.0", + "@storybook/preview-api": "7.1.0-alpha.0", + "@storybook/theming": "7.1.0-alpha.0", + "@storybook/types": "7.1.0-alpha.0", "lodash": "^4.17.21", "ts-dedent": "^2.0.0" }, @@ -102,7 +102,7 @@ ], "platform": "browser" }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a", + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4", "storybook": { "displayName": "Controls", "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png", diff --git a/code/addons/docs/angular/README.md b/code/addons/docs/angular/README.md index f36e613bf874..a3bad52693aa 100644 --- a/code/addons/docs/angular/README.md +++ b/code/addons/docs/angular/README.md @@ -25,7 +25,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m First add the package. Make sure that the versions for your `@storybook/*` packages match: ```sh -yarn add -D @storybook/addon-docs@next +yarn add -D @storybook/addon-docs ``` Then add the following to your `.storybook/main.js` exports: diff --git a/code/addons/docs/common/README.md b/code/addons/docs/common/README.md index ae232074aea1..1195d287d444 100644 --- a/code/addons/docs/common/README.md +++ b/code/addons/docs/common/README.md @@ -15,7 +15,7 @@ Popular frameworks like [React](../react/README.md)/[Vue](../vue/README.md)/[Ang First add the package. Make sure that the versions for your `@storybook/*` packages match: ```sh -yarn add -D @storybook/addon-docs@next +yarn add -D @storybook/addon-docs ``` Then add the following to your `.storybook/main.js` addons: diff --git a/code/addons/docs/ember/README.md b/code/addons/docs/ember/README.md index 487c621b1fe9..29af33a3b433 100644 --- a/code/addons/docs/ember/README.md +++ b/code/addons/docs/ember/README.md @@ -18,7 +18,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m First add the package. Make sure that the versions for your `@storybook/*` packages match: ```sh -yarn add -D @storybook/addon-docs@next +yarn add -D @storybook/addon-docs ``` Then add the following to your `.storybook/main.js` addons: diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 869c240624f8..de6129b5cecc 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", @@ -103,19 +103,19 @@ "@babel/plugin-transform-react-jsx": "^7.19.0", "@jest/transform": "^29.3.1", "@mdx-js/react": "^2.1.5", - "@storybook/blocks": "7.0.2", - "@storybook/client-logger": "7.0.2", - "@storybook/components": "7.0.2", - "@storybook/csf-plugin": "7.0.2", - "@storybook/csf-tools": "7.0.2", + "@storybook/blocks": "7.1.0-alpha.0", + "@storybook/client-logger": "7.1.0-alpha.0", + "@storybook/components": "7.1.0-alpha.0", + "@storybook/csf-plugin": "7.1.0-alpha.0", + "@storybook/csf-tools": "7.1.0-alpha.0", "@storybook/global": "^5.0.0", "@storybook/mdx2-csf": "^1.0.0", - "@storybook/node-logger": "7.0.2", - "@storybook/postinstall": "7.0.2", - "@storybook/preview-api": "7.0.2", - "@storybook/react-dom-shim": "7.0.2", - "@storybook/theming": "7.0.2", - "@storybook/types": "7.0.2", + "@storybook/node-logger": "7.1.0-alpha.0", + "@storybook/postinstall": "7.1.0-alpha.0", + "@storybook/preview-api": "7.1.0-alpha.0", + "@storybook/react-dom-shim": "7.1.0-alpha.0", + "@storybook/theming": "7.1.0-alpha.0", + "@storybook/types": "7.1.0-alpha.0", "fs-extra": "^11.1.0", "remark-external-links": "^8.0.0", "remark-slug": "^6.0.0", @@ -148,7 +148,7 @@ "./src/shims/mdx-react-shim.ts" ] }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a", + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4", "storybook": { "displayName": "Docs", "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png", diff --git a/code/addons/docs/react/README.md b/code/addons/docs/react/README.md index 5200fea3bd2b..1ef7daf97bb5 100644 --- a/code/addons/docs/react/README.md +++ b/code/addons/docs/react/README.md @@ -23,7 +23,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m First add the package. Make sure that the versions for your `@storybook/*` packages match: ```sh -yarn add -D @storybook/addon-docs@next +yarn add -D @storybook/addon-docs ``` Then add the following to your `.storybook/main.js` list of `addons`: diff --git a/code/addons/docs/src/preview.ts b/code/addons/docs/src/preview.ts index 22712de48159..0d1183bd0cf1 100644 --- a/code/addons/docs/src/preview.ts +++ b/code/addons/docs/src/preview.ts @@ -4,8 +4,5 @@ export const parameters: any = { const { DocsRenderer } = (await import('./DocsRenderer')) as any; return new DocsRenderer(); }, - source: { - excludeDecorators: true, - }, }, }; diff --git a/code/addons/docs/vue/README.md b/code/addons/docs/vue/README.md index fa7c3d22d67c..17156db24017 100644 --- a/code/addons/docs/vue/README.md +++ b/code/addons/docs/vue/README.md @@ -23,7 +23,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m First add the package. Make sure that the versions for your `@storybook/*` packages match: ```sh -yarn add -D @storybook/addon-docs@next +yarn add -D @storybook/addon-docs ``` Then add the following to your `.storybook/main.js` addons: diff --git a/code/addons/docs/vue3/README.md b/code/addons/docs/vue3/README.md index 539d6b066c03..4d79d29fad1d 100644 --- a/code/addons/docs/vue3/README.md +++ b/code/addons/docs/vue3/README.md @@ -23,7 +23,7 @@ To learn more about Storybook Docs, read the [general documentation](../README.m First add the package. Make sure that the versions for your `@storybook/*` packages match: ```sh -yarn add -D @storybook/addon-docs@next +yarn add -D @storybook/addon-docs ``` Then add the following to your `.storybook/main.js` addons: diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 2da9a81c11ee..512cb6e1f0f9 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", @@ -119,23 +119,23 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addon-actions": "7.0.2", - "@storybook/addon-backgrounds": "7.0.2", - "@storybook/addon-controls": "7.0.2", - "@storybook/addon-docs": "7.0.2", - "@storybook/addon-highlight": "7.0.2", - "@storybook/addon-measure": "7.0.2", - "@storybook/addon-outline": "7.0.2", - "@storybook/addon-toolbars": "7.0.2", - "@storybook/addon-viewport": "7.0.2", - "@storybook/core-common": "7.0.2", - "@storybook/manager-api": "7.0.2", - "@storybook/node-logger": "7.0.2", - "@storybook/preview-api": "7.0.2", + "@storybook/addon-actions": "7.1.0-alpha.0", + "@storybook/addon-backgrounds": "7.1.0-alpha.0", + "@storybook/addon-controls": "7.1.0-alpha.0", + "@storybook/addon-docs": "7.1.0-alpha.0", + "@storybook/addon-highlight": "7.1.0-alpha.0", + "@storybook/addon-measure": "7.1.0-alpha.0", + "@storybook/addon-outline": "7.1.0-alpha.0", + "@storybook/addon-toolbars": "7.1.0-alpha.0", + "@storybook/addon-viewport": "7.1.0-alpha.0", + "@storybook/core-common": "7.1.0-alpha.0", + "@storybook/manager-api": "7.1.0-alpha.0", + "@storybook/node-logger": "7.1.0-alpha.0", + "@storybook/preview-api": "7.1.0-alpha.0", "ts-dedent": "^2.0.0" }, "devDependencies": { - "@storybook/vue": "7.0.2", + "@storybook/vue": "7.1.0-alpha.0", "typescript": "^4.9.3" }, "peerDependencies": { @@ -166,5 +166,5 @@ ], "platform": "node" }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a" + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4" } diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 9b8e142f5f49..7e1a737a2b9a 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", @@ -51,7 +51,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/node-logger": "7.0.2", + "@storybook/node-logger": "7.1.0-alpha.0", "remark-gfm": "^3.0.1", "ts-dedent": "^2.0.0" }, @@ -69,5 +69,5 @@ "cjs" ] }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a" + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4" } diff --git a/code/addons/gfm/src/index.ts b/code/addons/gfm/src/index.ts index 76981b982a1b..ecfc725fc231 100644 --- a/code/addons/gfm/src/index.ts +++ b/code/addons/gfm/src/index.ts @@ -13,7 +13,7 @@ export const mdxLoaderOptions = async (config: any) => { deprecate(dedent` The "@storybook/addon-mdx-gfm" addon is meant as a migration assistant for Storybook 7.0; and will likely be removed in a future version. It's recommended you read this document: - https://storybook.js.org/docs/7.0/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm + https://storybook.js.org/docs/react/writing-docs/mdx#lack-of-github-flavored-markdown-gfm Once you've made the necessary changes, you can remove the addon from your package.json and storybook config. `); diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 9124c8e79f84..70bdffbf21d4 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", @@ -61,9 +61,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-events": "7.0.2", + "@storybook/core-events": "7.1.0-alpha.0", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.0.2" + "@storybook/preview-api": "7.1.0-alpha.0" }, "devDependencies": { "@types/webpack-env": "^1.16.0", @@ -78,7 +78,7 @@ "./src/preview.ts" ] }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a", + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Highlight", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 32f170928bdb..38e933ae427b 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", @@ -72,16 +72,16 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.2", - "@storybook/components": "7.0.2", - "@storybook/core-common": "7.0.2", - "@storybook/core-events": "7.0.2", + "@storybook/client-logger": "7.1.0-alpha.0", + "@storybook/components": "7.1.0-alpha.0", + "@storybook/core-common": "7.1.0-alpha.0", + "@storybook/core-events": "7.1.0-alpha.0", "@storybook/global": "^5.0.0", - "@storybook/instrumenter": "7.0.2", - "@storybook/manager-api": "7.0.2", - "@storybook/preview-api": "7.0.2", - "@storybook/theming": "7.0.2", - "@storybook/types": "7.0.2", + "@storybook/instrumenter": "7.1.0-alpha.0", + "@storybook/manager-api": "7.1.0-alpha.0", + "@storybook/preview-api": "7.1.0-alpha.0", + "@storybook/theming": "7.1.0-alpha.0", + "@storybook/types": "7.1.0-alpha.0", "jest-mock": "^27.0.6", "polished": "^4.2.2", "ts-dedent": "^2.2.0" @@ -118,7 +118,7 @@ ], "platform": "node" }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a", + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4", "storybook": { "displayName": "Interactions", "unsupportedFrameworks": [ diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index a012f8036ab6..db9c28aaa9e2 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -70,13 +70,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.2", - "@storybook/components": "7.0.2", - "@storybook/core-events": "7.0.2", + "@storybook/client-logger": "7.1.0-alpha.0", + "@storybook/components": "7.1.0-alpha.0", + "@storybook/core-events": "7.1.0-alpha.0", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.2", - "@storybook/preview-api": "7.0.2", - "@storybook/theming": "7.0.2", + "@storybook/manager-api": "7.1.0-alpha.0", + "@storybook/preview-api": "7.1.0-alpha.0", + "@storybook/theming": "7.1.0-alpha.0", "react-resize-detector": "^7.1.2", "upath": "^1.2.0" }, @@ -105,7 +105,7 @@ ], "platform": "browser" }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a", + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4", "storybook": { "displayName": "Jest", "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 534f9f66b7c4..7136898807b8 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", @@ -80,14 +80,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.2", - "@storybook/core-events": "7.0.2", + "@storybook/client-logger": "7.1.0-alpha.0", + "@storybook/core-events": "7.1.0-alpha.0", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.2", - "@storybook/preview-api": "7.0.2", - "@storybook/router": "7.0.2", - "@storybook/types": "7.0.2", + "@storybook/manager-api": "7.1.0-alpha.0", + "@storybook/preview-api": "7.1.0-alpha.0", + "@storybook/router": "7.1.0-alpha.0", + "@storybook/types": "7.1.0-alpha.0", "prop-types": "^15.7.2", "ts-dedent": "^2.0.0" }, @@ -119,7 +119,7 @@ ], "post": "./scripts/fix-preview-api-reference.ts" }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a", + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4", "storybook": { "displayName": "Links", "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index a74864a8b5e6..f9cbb8329499 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", @@ -75,13 +75,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.2", - "@storybook/components": "7.0.2", - "@storybook/core-events": "7.0.2", + "@storybook/client-logger": "7.1.0-alpha.0", + "@storybook/components": "7.1.0-alpha.0", + "@storybook/core-events": "7.1.0-alpha.0", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.2", - "@storybook/preview-api": "7.0.2", - "@storybook/types": "7.0.2" + "@storybook/manager-api": "7.1.0-alpha.0", + "@storybook/preview-api": "7.1.0-alpha.0", + "@storybook/types": "7.1.0-alpha.0" }, "devDependencies": { "typescript": "~4.9.3" @@ -108,7 +108,7 @@ "./src/preview.tsx" ] }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a", + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4", "storybook": { "displayName": "Measure", "unsupportedFrameworks": [ diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 7577cc956c1f..cde33cd3151f 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", @@ -78,13 +78,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.2", - "@storybook/components": "7.0.2", - "@storybook/core-events": "7.0.2", + "@storybook/client-logger": "7.1.0-alpha.0", + "@storybook/components": "7.1.0-alpha.0", + "@storybook/core-events": "7.1.0-alpha.0", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.2", - "@storybook/preview-api": "7.0.2", - "@storybook/types": "7.0.2", + "@storybook/manager-api": "7.1.0-alpha.0", + "@storybook/preview-api": "7.1.0-alpha.0", + "@storybook/types": "7.1.0-alpha.0", "ts-dedent": "^2.0.0" }, "devDependencies": { @@ -112,7 +112,7 @@ "./src/preview.tsx" ] }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a", + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4", "storybook": { "displayName": "Outline", "unsupportedFrameworks": [ diff --git a/code/addons/storyshots-core/package.json b/code/addons/storyshots-core/package.json index b987914190ed..88b6f0d95a2c 100644 --- a/code/addons/storyshots-core/package.json +++ b/code/addons/storyshots-core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "Take a code snapshot of every story automatically with Jest", "keywords": [ "addon", @@ -37,12 +37,12 @@ "dependencies": { "@jest/transform": "^29.3.1", "@storybook/babel-plugin-require-context-hook": "1.0.1", - "@storybook/client-api": "7.0.2", - "@storybook/core-common": "7.0.2", - "@storybook/core-webpack": "7.0.2", + "@storybook/client-api": "7.1.0-alpha.0", + "@storybook/core-common": "7.1.0-alpha.0", + "@storybook/core-webpack": "7.1.0-alpha.0", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.0.2", - "@storybook/types": "7.0.2", + "@storybook/preview-api": "7.1.0-alpha.0", + "@storybook/types": "7.1.0-alpha.0", "@types/glob": "^7.1.3", "@types/jest-specific-snapshot": "^0.5.6", "glob": "^8.1.0", @@ -57,11 +57,11 @@ "@angular/core": "^13.3.6", "@angular/platform-browser-dynamic": "^13.3.6", "@emotion/jest": "^11.8.0", - "@storybook/addon-docs": "7.0.2", - "@storybook/angular": "7.0.2", - "@storybook/react": "7.0.2", - "@storybook/vue": "7.0.2", - "@storybook/vue3": "7.0.2", + "@storybook/addon-docs": "7.1.0-alpha.0", + "@storybook/angular": "7.1.0-alpha.0", + "@storybook/react": "7.1.0-alpha.0", + "@storybook/vue": "7.1.0-alpha.0", + "@storybook/vue3": "7.1.0-alpha.0", "babel-loader": "^9.1.2", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", @@ -142,7 +142,7 @@ "access": "public" }, "bundler": {}, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a", + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4", "storybook": { "displayName": "Storyshots", "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png", diff --git a/code/addons/storyshots-puppeteer/package.json b/code/addons/storyshots-puppeteer/package.json index 04886767221a..cf602f45a0b9 100644 --- a/code/addons/storyshots-puppeteer/package.json +++ b/code/addons/storyshots-puppeteer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots-puppeteer", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "Image snapshots addition to StoryShots based on puppeteer", "keywords": [ "addon", @@ -36,8 +36,8 @@ "dependencies": { "@axe-core/puppeteer": "^4.2.0", "@storybook/csf": "^0.1.0", - "@storybook/node-logger": "7.0.2", - "@storybook/types": "7.0.2", + "@storybook/node-logger": "7.1.0-alpha.0", + "@storybook/types": "7.1.0-alpha.0", "@types/jest-image-snapshot": "^5.1.0", "jest-image-snapshot": "^6.0.0" }, @@ -49,7 +49,7 @@ "rimraf": "^3.0.2" }, "peerDependencies": { - "@storybook/addon-storyshots": "7.0.2", + "@storybook/addon-storyshots": "7.1.0-alpha.0", "puppeteer": ">=2.0.0" }, "peerDependenciesMeta": { @@ -61,5 +61,5 @@ "access": "public" }, "bundler": {}, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a" + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4" } diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 5773438e9b5a..f9a07e655a10 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", @@ -54,13 +54,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.2", - "@storybook/components": "7.0.2", - "@storybook/manager-api": "7.0.2", - "@storybook/preview-api": "7.0.2", - "@storybook/router": "7.0.2", - "@storybook/source-loader": "7.0.2", - "@storybook/theming": "7.0.2", + "@storybook/client-logger": "7.1.0-alpha.0", + "@storybook/components": "7.1.0-alpha.0", + "@storybook/manager-api": "7.1.0-alpha.0", + "@storybook/preview-api": "7.1.0-alpha.0", + "@storybook/router": "7.1.0-alpha.0", + "@storybook/source-loader": "7.1.0-alpha.0", + "@storybook/theming": "7.1.0-alpha.0", "estraverse": "^5.2.0", "prop-types": "^15.7.2", "react-syntax-highlighter": "^15.5.0" @@ -92,7 +92,7 @@ "./src/preset.ts" ] }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a", + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4", "storybook": { "displayName": "Storysource", "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 355c3c0aa721..23a02b68d076 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", @@ -68,11 +68,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.2", - "@storybook/components": "7.0.2", - "@storybook/manager-api": "7.0.2", - "@storybook/preview-api": "7.0.2", - "@storybook/theming": "7.0.2" + "@storybook/client-logger": "7.1.0-alpha.0", + "@storybook/components": "7.1.0-alpha.0", + "@storybook/manager-api": "7.1.0-alpha.0", + "@storybook/preview-api": "7.1.0-alpha.0", + "@storybook/theming": "7.1.0-alpha.0" }, "devDependencies": { "typescript": "~4.9.3" @@ -99,7 +99,7 @@ ], "platform": "browser" }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a", + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4", "storybook": { "displayName": "Toolbars", "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 35982d8c6cc9..b95dacc16068 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", @@ -73,13 +73,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.0.2", - "@storybook/components": "7.0.2", - "@storybook/core-events": "7.0.2", + "@storybook/client-logger": "7.1.0-alpha.0", + "@storybook/components": "7.1.0-alpha.0", + "@storybook/core-events": "7.1.0-alpha.0", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.2", - "@storybook/preview-api": "7.0.2", - "@storybook/theming": "7.0.2", + "@storybook/manager-api": "7.1.0-alpha.0", + "@storybook/preview-api": "7.1.0-alpha.0", + "@storybook/theming": "7.1.0-alpha.0", "memoizerific": "^1.11.3", "prop-types": "^15.7.2" }, @@ -109,7 +109,7 @@ "./src/preview.ts" ] }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a", + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4", "storybook": { "displayName": "Viewport", "icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png", diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 909c211f732d..92110bef6045 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "7.0.2", + "version": "7.1.0-alpha.0", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", @@ -36,20 +36,20 @@ "prep": "../../../scripts/prepare/tsc.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.0.2", - "@storybook/cli": "7.0.2", - "@storybook/client-logger": "7.0.2", - "@storybook/core-client": "7.0.2", - "@storybook/core-common": "7.0.2", - "@storybook/core-events": "7.0.2", - "@storybook/core-server": "7.0.2", - "@storybook/core-webpack": "7.0.2", - "@storybook/docs-tools": "7.0.2", + "@storybook/builder-webpack5": "7.1.0-alpha.0", + "@storybook/cli": "7.1.0-alpha.0", + "@storybook/client-logger": "7.1.0-alpha.0", + "@storybook/core-client": "7.1.0-alpha.0", + "@storybook/core-common": "7.1.0-alpha.0", + "@storybook/core-events": "7.1.0-alpha.0", + "@storybook/core-server": "7.1.0-alpha.0", + "@storybook/core-webpack": "7.1.0-alpha.0", + "@storybook/docs-tools": "7.1.0-alpha.0", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.0.2", - "@storybook/node-logger": "7.0.2", - "@storybook/preview-api": "7.0.2", - "@storybook/types": "7.0.2", + "@storybook/manager-api": "7.1.0-alpha.0", + "@storybook/node-logger": "7.1.0-alpha.0", + "@storybook/preview-api": "7.1.0-alpha.0", + "@storybook/types": "7.1.0-alpha.0", "@types/node": "^16.0.0", "@types/react": "^16.14.34", "@types/react-dom": "^16.9.14", @@ -123,5 +123,5 @@ "bundler": { "tsConfig": "tsconfig.build.json" }, - "gitHead": "96b498debee8b89d0c4050c13172a5a818c9997a" + "gitHead": "8ff2938f8ac0c2d524ae653cd89251e5cd4721a4" } diff --git a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts index 029de1cd02e6..d3aa188aff5d 100644 --- a/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/AbstractRenderer.ts @@ -1,4 +1,4 @@ -import { ApplicationRef, enableProdMode, importProvidersFrom, NgModule } from '@angular/core'; +import { ApplicationRef, enableProdMode, NgModule } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { BehaviorSubject, Subject } from 'rxjs'; @@ -14,16 +14,16 @@ type StoryRenderInfo = { moduleMetadataSnapshot: string; }; -const applicationRefs = new Set(); +const applicationRefs = new Map(); export abstract class AbstractRenderer { /** * Wait and destroy the platform */ - public static resetApplications() { + public static resetApplications(domNode?: HTMLElement) { componentNgModules.clear(); - applicationRefs.forEach((appRef) => { - if (!appRef.destroyed) { + applicationRefs.forEach((appRef, appDOMNode) => { + if (!appRef.destroyed && (!domNode || appDOMNode === domNode)) { appRef.destroy(); } }); @@ -50,7 +50,7 @@ export abstract class AbstractRenderer { } }; - protected previousStoryRenderInfo: StoryRenderInfo; + protected previousStoryRenderInfo = new Map(); // Observable to change the properties dynamically without reloading angular module&component protected storyProps$: Subject; @@ -67,7 +67,7 @@ export abstract class AbstractRenderer { } } - protected abstract beforeFullRender(): Promise; + protected abstract beforeFullRender(domNode?: HTMLElement): Promise; protected abstract afterFullRender(): Promise; @@ -100,6 +100,7 @@ export abstract class AbstractRenderer { if ( !this.fullRendererRequired({ + targetDOMNode, storyFnAngular, moduleMetadata: { ...storyFnAngular.moduleMetadata, @@ -112,7 +113,7 @@ export abstract class AbstractRenderer { return; } - await this.beforeFullRender(); + await this.beforeFullRender(targetDOMNode); // Complete last BehaviorSubject and set a new one for the current module if (this.storyProps$) { @@ -140,7 +141,7 @@ export abstract class AbstractRenderer { ], }); - applicationRefs.add(applicationRef); + applicationRefs.set(targetDOMNode, applicationRef); await this.afterFullRender(); } @@ -171,22 +172,24 @@ export abstract class AbstractRenderer { } private fullRendererRequired({ + targetDOMNode, storyFnAngular, moduleMetadata, forced, }: { + targetDOMNode: HTMLElement; storyFnAngular: StoryFnAngularReturnType; moduleMetadata: NgModule; forced: boolean; }) { - const { previousStoryRenderInfo } = this; + const previousStoryRenderInfo = this.previousStoryRenderInfo.get(targetDOMNode); const currentStoryRender = { storyFnAngular, moduleMetadataSnapshot: stringify(moduleMetadata), }; - this.previousStoryRenderInfo = currentStoryRender; + this.previousStoryRenderInfo.set(targetDOMNode, currentStoryRender); if ( // check `forceRender` of story RenderContext diff --git a/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts b/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts index 945881088b82..d51573376fcb 100644 --- a/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts +++ b/code/frameworks/angular/src/client/angular-beta/DocsRenderer.ts @@ -38,8 +38,8 @@ export class DocsRenderer extends AbstractRenderer { await super.render({ ...options, forced: false }); } - async beforeFullRender(): Promise { - DocsRenderer.resetApplications(); + async beforeFullRender(domNode?: HTMLElement): Promise { + DocsRenderer.resetApplications(domNode); } async afterFullRender(): Promise { diff --git a/code/frameworks/angular/template/cli/Button.stories.ts b/code/frameworks/angular/template/cli/Button.stories.ts index 85ce82c88270..8f280fb0c763 100644 --- a/code/frameworks/angular/template/cli/Button.stories.ts +++ b/code/frameworks/angular/template/cli/Button.stories.ts @@ -1,7 +1,7 @@ import type { Meta, StoryObj } from '@storybook/angular'; import Button from './button.component'; -// More on how to set up stories at: https://storybook.js.org/docs/7.0/angular/writing-stories/introduction +// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction const meta: Meta