diff --git a/.circleci/config.yml b/.circleci/config.yml index 590f6ba9a71f..ba7d9e3e5397 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -701,22 +701,22 @@ workflows: requires: - build - create-sandboxes: - parallelism: 30 + parallelism: 31 requires: - build # - smoke-test-sandboxes: # disabled for now # requires: # - create-sandboxes - build-sandboxes: - parallelism: 30 + parallelism: 31 requires: - create-sandboxes - chromatic-sandboxes: - parallelism: 30 + parallelism: 31 requires: - build-sandboxes - e2e-production: - parallelism: 30 + parallelism: 31 requires: - build-sandboxes - e2e-dev: @@ -724,7 +724,7 @@ workflows: requires: - create-sandboxes - test-runner-production: - parallelism: 30 + parallelism: 31 requires: - build-sandboxes # TODO: reenable once we find out the source of flakyness diff --git a/.github/ISSUE_TEMPLATE/bug_report.yml b/.github/ISSUE_TEMPLATE/bug_report.yml index a7422347a2be..f19ff982f638 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.yml +++ b/.github/ISSUE_TEMPLATE/bug_report.yml @@ -19,18 +19,17 @@ body: attributes: label: To Reproduce description: >- - Please create a reproduction by running `npx sb@next sandbox` and + Please create a reproduction using [storybook.new](https://storybook.new), or by running `npx sb@next sandbox` and following the instructions. Read our [documentation](https://storybook.js.org/docs/react/contribute/how-to-reproduce) to learn more about creating reproductions. placeholder: >- - Paste your repository and deployed reproduction here. We prioritize - issues with reproductions over those without. + Paste a link to your reproduction here. We prioritize issues with reproductions over those without. - type: textarea id: system attributes: label: System - description: Please paste the results of `npx sb@next info` here. + description: Please paste the results of `npx storybook@latest info` here. render: shell - type: textarea id: context 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 048849f31dac..e65b163f7b52 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -8,9 +8,6 @@ - [Modern browser support](#modern-browser-support) - [React peer dependencies required](#react-peer-dependencies-required) - [start-storybook / build-storybook binaries removed](#start-storybook--build-storybook-binaries-removed) - - [New Addons API](#new-addons-api) - - [Specific instructions for addon creators](#specific-instructions-for-addon-creators) - - [Specific instructions for addon users](#specific-instructions-for-addon-users) - [New Framework API](#new-framework-api) - [Available framework packages](#available-framework-packages) - [Framework field mandatory](#framework-field-mandatory) @@ -35,7 +32,7 @@ - [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default) - [7.0 Vite changes](#70-vite-changes) - [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically) - - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) + - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook) - [7.0 Webpack changes](#70-webpack-changes) - [Webpack4 support discontinued](#webpack4-support-discontinued) - [Babel mode v7 exclusively](#babel-mode-v7-exclusively) @@ -54,6 +51,9 @@ - [Create React App: dropped CRA4 support](#create-react-app-dropped-cra4-support) - [HTML: No longer auto-dedents source code](#html-no-longer-auto-dedents-source-code) - [7.0 Addon authors changes](#70-addon-authors-changes) + - [New Addons API](#new-addons-api) + - [Specific instructions for addon creators](#specific-instructions-for-addon-creators) + - [Specific instructions for addon users](#specific-instructions-for-addon-users) - [register.js removed](#registerjs-removed) - [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons) - [No more configuration for manager](#no-more-configuration-for-manager) @@ -82,8 +82,7 @@ - [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration) - [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) + - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global) - [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) @@ -297,7 +296,7 @@ ## From version 6.5.x to 7.0.0 -A number of these changes can be made automatically by the Storybook CLI. To take advantage of these "automigrations", run `npx storybook@next upgrade --prerelease` or `pnpx storybook@next upgrade --prerelease`. +A number of these changes can be made automatically by the Storybook CLI. To take advantage of these "automigrations", run `npx storybook@latest upgrade --prerelease` or `pnpx dlx storybook@latest upgrade --prerelease`. ### 7.0 breaking changes @@ -499,110 +498,6 @@ The new CLI commands remove the following flags: | -------- | --------------------------------------------------------------------------------------------- | | --modern | No migration needed. [All ESM code is modern in SB7](#modern-esm--ie11-support-discontinued). | -#### New Addons API - -Storybook 7 adds 2 new packages for addon authors to use: `@storybook/preview-api` and `@storybook/manager-api`. -These 2 packages replace `@storybook/addons`. - -When adding addons to storybook, you can (for example) add panels: - -```js -import { addons } from '@storybook/manager-api'; - -addons.addPanel('my-panel', { - title: 'My Panel', - render: ({ active, key }) =>
My Panel
, -}); -``` - -Note that this before would import `addons` from `@storybook/addons`, but now it imports `{ addons }` from `@storybook/manager-api`. -The `addons` export is now a named export only, there's no default export anymore, so make sure to update this usage. - -The package `@storybook/addons` is still available, but it's only for backwards compatibility. It's not recommended to use it anymore. - -It's also been used by addon creators to gain access to a few APIs like `makeDecorator`. -These APIs are now available in `@storybook/preview-api`. - -Storybook users have had access to a few storybook-lifecycle hooks such as `useChannel`, `useParameter`, `useStorybookState`; -when these hooks are used in panels, they should be imported from `@storybook/manager-api`. -When these hooks are used in decorators/stories, they should be imported from `@storybook/preview-api`. - -Storybook 7 includes `@storybook/addons` shim package that provides the old API and calls the new API under the hood. -This backwards compatibility will be removed in a future release of storybook. - -Here's an example of using the new API: -The `@storybook/preview-api` is used here, because the `useEffect` hook is used in a decorator. - -```js -import { useEffect, makeDecorator } from '@storybook/preview-api'; - -export const withMyAddon = makeDecorator({ - name: 'withMyAddon', - parameterName: 'myAddon', - wrapper: (getStory) => { - useEffect(() => { - // do something with the options - }, []); - return getStory(context); - }, -}); -``` - -##### Specific instructions for addon creators - -If you're an addon creator, you'll have to update your addon to use the new APIs. - -That means you'll have to release a breaking release of your addon to make it compatible with Storybook 7. -It should no longer depend on `@storybook/addons`, but instead on `@storybook/preview-api` and/or `@storybook/manager-api`. - -You might also depend (and use) these packages in your addon's decorators: `@storybook/store`, `@storybook/preview-web`, `@storybook/core-client`, `@storybook/client-api`; these have all been consolidated into `@storybook/preview-api`. -So if you use any of these packages, please import what you need from `@storybook/preview-api` instead. - - -Storybook 7 will prepare manager-code for the browser using ESbuild (before it was using a combination of webpack + babel). -This is a very important change, though it will not affect most addons. -It means that when creating custom addons, particularly custom addons within the repo in which they are consumed, -you will need to be aware that this code is not passed though babel, and thus will not use your babel config. -This can result in errors if you are using experimental JS features in your addon code, not supported yet by ESbuild, -or using babel dependent features such as Component selectors in Emotion. - -ESbuild also places some constraints on things you can import into your addon's manager code: only woff2 files are supported, and not all image file types are supported. -Here's the list of supported file types: -https://github.com/storybookjs/storybook/blob/4a37372f649e85e7a0c35b0493da016dbb5dee17/code/lib/builder-manager/src/index.ts#L54-L64 -This is not configurable. - -If this is a problem for your addon, you need to pre-compile your addon's manager code to ensure it works. - -If you addon also introduces preview code (such a decorators) it will be passed though whatever builder + config the user has configured for their project; this hasn't changed. - -In both the preview and manager code it's good to remember [Storybook now targets modern browser only](#modern-browser-support). - -The package `@storybook/components` contain a lot of components useful for building addons. -Some of these addons have been moved to a new package `@storybook/blocks`. -These components were moved: `ColorControl`, `ColorPalette`, `ArgsTable`, `ArgRow`, `TabbedArgsTable`, `SectionRow`, `Source`, `Code`. - -##### Specific instructions for addon users - -All of storybook's core addons have been updated and are ready to use with Storybook 7. - -We're working with the community to update the most popular addons. -But if you're using an addon that hasn't been updated yet, it might not work. - -It's possible for example for older addons to use APIs that are no longer available in Storybook 7. -Your addon might not show upside of the storybook (manager) UI, or storybook might fail to start entirely. - -When this happens to you please open an issue on the addon's repo, and ask the addon author to update their addon to be compatible with Storybook 7. -It's also useful for the storybook team to know which addons are not yet compatible, so please open an issue on the storybook repo as well; particularly if the addon is popular and causes a critical failure. - -Here's a list of popular addons that are known not to be compatible with Storybook 7 yet: -- [ ] [storybook-addon-jsx](https://github.com/storybookjs/addon-jsx) -- [ ] [storybook-addon-dark-mode](https://github.com/hipstersmoothie/storybook-dark-mode) - -Though storybook should de-duplicate storybook packages, storybook CLI's `upgrade` command will warn you when you have multiple storybook-dependencies, because it is a possibility that this causes addons/storybook to not work, so when running into issues, please run this: -``` -npx sb upgrade -``` - #### New Framework API _Has automigration_ @@ -610,7 +505,7 @@ _Has automigration_ Storybook 7 introduces the concept of `frameworks`, which abstracts configuration for `renderers` (e.g. React, Vue), `builders` (e.g. Webpack, Vite) and defaults to make integrations easier. This requires quite a few changes, depending on what your project is using. **We recommend you to use the automigrations**, but in case the command fails or you'd like to do the changes manually, here's a guide: > Note: -> All of the following changes can be done automatically either via `npx storybook@next upgrade --prerelease` or via the `npx storybook@next automigrate` command. It's highly recommended to use these commands, which will tell you exactly what to do. +> All of the following changes can be done automatically either via `npx storybook@latest upgrade --prerelease` or via the `npx storybook@latest automigrate` command. It's highly recommended to use these commands, which will tell you exactly what to do. ##### Available framework packages @@ -1032,7 +927,7 @@ Storybook now uses [Babel mode v7](#babel-mode-v7) exclusively. In 6.x, Storyboo In the new mode, Storybook expects you to provide a configuration file. Depending on the complexity your project, Storybook will fail to run without a babel configuration. If you want a configuration file that's equivalent to the 6.x default, you can run the following command in your project directory: ```sh -npx storybook@next babelrc +npx storybook@latest babelrc ``` This command will create a `.babelrc.json` file in your project, containing a few babel plugins which will be installed as dev dependencies. @@ -1183,6 +1078,110 @@ You can get the same result by setting [the parameter `parameters.docs.source.fo ### 7.0 Addon authors changes +#### New Addons API + +Storybook 7 adds 2 new packages for addon authors to use: `@storybook/preview-api` and `@storybook/manager-api`. +These 2 packages replace `@storybook/addons`. + +When adding addons to storybook, you can (for example) add panels: + +```js +import { addons } from '@storybook/manager-api'; + +addons.addPanel('my-panel', { + title: 'My Panel', + render: ({ active, key }) =>
My Panel
, +}); +``` + +Note that this before would import `addons` from `@storybook/addons`, but now it imports `{ addons }` from `@storybook/manager-api`. +The `addons` export is now a named export only, there's no default export anymore, so make sure to update this usage. + +The package `@storybook/addons` is still available, but it's only for backwards compatibility. It's not recommended to use it anymore. + +It's also been used by addon creators to gain access to a few APIs like `makeDecorator`. +These APIs are now available in `@storybook/preview-api`. + +Storybook users have had access to a few storybook-lifecycle hooks such as `useChannel`, `useParameter`, `useStorybookState`; +when these hooks are used in panels, they should be imported from `@storybook/manager-api`. +When these hooks are used in decorators/stories, they should be imported from `@storybook/preview-api`. + +Storybook 7 includes `@storybook/addons` shim package that provides the old API and calls the new API under the hood. +This backwards compatibility will be removed in a future release of storybook. + +Here's an example of using the new API: +The `@storybook/preview-api` is used here, because the `useEffect` hook is used in a decorator. + +```js +import { useEffect, makeDecorator } from '@storybook/preview-api'; + +export const withMyAddon = makeDecorator({ + name: 'withMyAddon', + parameterName: 'myAddon', + wrapper: (getStory) => { + useEffect(() => { + // do something with the options + }, []); + return getStory(context); + }, +}); +``` + +##### Specific instructions for addon creators + +If you're an addon creator, you'll have to update your addon to use the new APIs. + +That means you'll have to release a breaking release of your addon to make it compatible with Storybook 7. +It should no longer depend on `@storybook/addons`, but instead on `@storybook/preview-api` and/or `@storybook/manager-api`. + +You might also depend (and use) these packages in your addon's decorators: `@storybook/store`, `@storybook/preview-web`, `@storybook/core-client`, `@storybook/client-api`; these have all been consolidated into `@storybook/preview-api`. +So if you use any of these packages, please import what you need from `@storybook/preview-api` instead. + + +Storybook 7 will prepare manager-code for the browser using ESbuild (before it was using a combination of webpack + babel). +This is a very important change, though it will not affect most addons. +It means that when creating custom addons, particularly custom addons within the repo in which they are consumed, +you will need to be aware that this code is not passed though babel, and thus will not use your babel config. +This can result in errors if you are using experimental JS features in your addon code, not supported yet by ESbuild, +or using babel dependent features such as Component selectors in Emotion. + +ESbuild also places some constraints on things you can import into your addon's manager code: only woff2 files are supported, and not all image file types are supported. +Here's the list of supported file types: +https://github.com/storybookjs/storybook/blob/4a37372f649e85e7a0c35b0493da016dbb5dee17/code/lib/builder-manager/src/index.ts#L54-L64 +This is not configurable. + +If this is a problem for your addon, you need to pre-compile your addon's manager code to ensure it works. + +If you addon also introduces preview code (such a decorators) it will be passed though whatever builder + config the user has configured for their project; this hasn't changed. + +In both the preview and manager code it's good to remember [Storybook now targets modern browser only](#modern-browser-support). + +The package `@storybook/components` contain a lot of components useful for building addons. +Some of these addons have been moved to a new package `@storybook/blocks`. +These components were moved: `ColorControl`, `ColorPalette`, `ArgsTable`, `ArgRow`, `TabbedArgsTable`, `SectionRow`, `Source`, `Code`. + +##### Specific instructions for addon users + +All of storybook's core addons have been updated and are ready to use with Storybook 7. + +We're working with the community to update the most popular addons. +But if you're using an addon that hasn't been updated yet, it might not work. + +It's possible for example for older addons to use APIs that are no longer available in Storybook 7. +Your addon might not show upside of the storybook (manager) UI, or storybook might fail to start entirely. + +When this happens to you please open an issue on the addon's repo, and ask the addon author to update their addon to be compatible with Storybook 7. +It's also useful for the storybook team to know which addons are not yet compatible, so please open an issue on the storybook repo as well; particularly if the addon is popular and causes a critical failure. + +Here's a list of popular addons that are known not to be compatible with Storybook 7 yet: +- [ ] [storybook-addon-jsx](https://github.com/storybookjs/addon-jsx) +- [ ] [storybook-addon-dark-mode](https://github.com/hipstersmoothie/storybook-dark-mode) + +Though storybook should de-duplicate storybook packages, storybook CLI's `upgrade` command will warn you when you have multiple storybook-dependencies, because it is a possibility that this causes addons/storybook to not work, so when running into issues, please run this: +``` +npx sb upgrade +``` + #### register.js removed In SB 6.x and earlier, addons exported a `register.js` entry point by convention, and users would import this in `.storybook/manager.js`. This was [deprecated in SB 6.5](#deprecated-registerjs) @@ -1510,7 +1509,7 @@ If you get stuck with the [MDX2 upgrade](#mdx2-upgrade), we also provide opt-in To process your `.stories.mdx` files with MDX1, first install the `@storybook/mdx1-csf` package in your project: ``` -yarn add -D @storybook/mdx1-csf@next +yarn add -D @storybook/mdx1-csf@latest ``` Then enable the `legacyMdx1` feature flag in your `.storybook/main.js` file: @@ -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 @@ -1946,7 +1941,7 @@ You can run the existing suite of automigrations to see which ones apply to your ``` -npx sb@next automigrate +npx sb@latest automigrate ``` @@ -1958,7 +1953,7 @@ Storybook 6.3 supports CRA5 out of the box when you install it fresh. However, i ``` -npx sb@next automigrate +npx sb@latest automigrate ``` @@ -2212,7 +2207,7 @@ module.exports = { In the new mode, Storybook expects you to provide a configuration file. If you want a configuration file that's equivalent to the 6.x default, you can run the following command in your project directory: ```sh -npx sb@next babelrc +npx sb@latest babelrc ``` This will create a `.babelrc.json` file. This file includes a bunch of babel plugins, so you may need to add new package devDependencies accordingly. @@ -2796,7 +2791,7 @@ Basic.decorators = [ ... ]; To help you upgrade your stories, we've created a codemod: ``` -npx @storybook/cli@next migrate csf-hoist-story-annotations --glob="**/*.stories.js" +npx @storybook/cli@latest migrate csf-hoist-story-annotations --glob="**/*.stories.js" ``` For more information, [see the documentation](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#csf-hoist-story-annotations). @@ -3090,7 +3085,7 @@ We've removed the ability to specify the hierarchy separators (how you control t If you are currently using custom separators, we encourage you to migrate to using `/` as the sole separator. If you are using `|` or `.` as a separator currently, we provide a codemod, [`upgrade-hierarchy-separators`](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#upgrade-hierarchy-separators), that can be used to rename your components. **Note: the codemod will not work for `.mdx` components, you will need to make the changes by hand.** ``` -npx sb@next migrate upgrade-hierarchy-separators --glob="*/**/*.stories.@(tsx|jsx|ts|js)" +npx sb@latest migrate upgrade-hierarchy-separators --glob="*/**/*.stories.@(tsx|jsx|ts|js)" ``` We also now default to showing "roots", which are non-expandable groupings in the sidebar for the top-level groups. If you'd like to disable this, set the `showRoots` option in `.storybook/manager.js`: @@ -4210,7 +4205,7 @@ Storybook now uses Babel 7. There's a couple of cases when it can break with you - If you aren't using Babel yourself, and don't have .babelrc, install following dependencies: ``` - npm i -D @babel/core babel-loader@next + npm i -D @babel/core babel-loader@latest ``` - If you're using Babel 6, make sure that you have direct dependencies on `babel-core@6` and `babel-loader@7` and that you have a `.babelrc` in your project directory. 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 e6c7dac0a572..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", @@ -61,6 +61,9 @@ "manager": [ "dist/manager.d.ts" ], + "decorator": [ + "dist/decorator.d.ts" + ], "preview": [ "dist/preview.d.ts" ] @@ -77,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", @@ -121,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/README.md b/code/addons/docs/README.md index 96cb01bc5a18..02c97503b313 100644 --- a/code/addons/docs/README.md +++ b/code/addons/docs/README.md @@ -110,7 +110,7 @@ export default { }; ``` -If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/code/addons/storyshots/storyshots-core/README.md), you will need to +If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/code/addons/storyshots-core/README.md), you will need to configure Jest to transform MDX stories into something Storyshots can understand: Add the following to your Jest configuration: 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 52cc337e7cef..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.0-beta.52", + "@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/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx index bb7f5f0b81e0..615878d2cc28 100644 --- a/code/addons/viewport/src/Tool.tsx +++ b/code/addons/viewport/src/Tool.tsx @@ -155,9 +155,9 @@ export const ViewportTool: FC = memo( setState({ selected: defaultViewport || (viewports[state.selected] ? state.selected : responsiveViewport.id), - isRotated: state.isRotated, + isRotated: defaultOrientation === 'landscape', }); - }, [defaultViewport]); + }, [defaultOrientation, defaultViewport]); const { selected, isRotated } = state; const item = diff --git a/code/addons/viewport/template/stories/parameters.stories.ts b/code/addons/viewport/template/stories/parameters.stories.ts index 8ea3a1bbc4dc..4aba0bd2970a 100644 --- a/code/addons/viewport/template/stories/parameters.stories.ts +++ b/code/addons/viewport/template/stories/parameters.stories.ts @@ -26,6 +26,15 @@ export const Selected = { }, }; +export const Orientation = { + parameters: { + viewport: { + defaultViewport: Object.keys(MINIMAL_VIEWPORTS)[0], + defaultOrientation: 'landscape', + }, + }, +}; + export const Custom = { parameters: { viewport: { diff --git a/code/frameworks/angular/README.md b/code/frameworks/angular/README.md index 623d18c47441..3158060f3f9a 100644 --- a/code/frameworks/angular/README.md +++ b/code/frameworks/angular/README.md @@ -27,12 +27,12 @@ So you can develop UI components in isolation without worrying about app specifi ```sh cd my-angular-app -npx storybook init +npx storybook@latest init ``` ## Setup Storybook for your Angular projects -Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `.storybook` folder will be created and the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this: +Storybook supports Angular multi-project workspace. You can setup Storybook for each project in the workspace. When running `npx storybook@latest init` you will be asked for which project Storybook should be set up. Essentially, during initialization, the `.storybook` folder will be created and the `angular.json` will be edited to add the Storybook configuration for the selected project. The configuration looks approximately like this: ```json // angular.json 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