diff --git a/MIGRATION.md b/MIGRATION.md index d63cd568816f..2e2e735fb21f 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -105,17 +105,17 @@ - [Tab addons cannot manually route, Tool addons can filter their visibility via tabId](#tab-addons-cannot-manually-route-tool-addons-can-filter-their-visibility-via-tabid) - [Removed `config` preset](#removed-config-preset-1) - [From version 7.5.0 to 7.6.0](#from-version-750-to-760) - - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) - - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) - - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) - - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) - - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) + - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated) + - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated) + - [typescript.skipBabel deprecated](#typescriptskipbabel-deprecated) + - [Primary doc block accepts of prop](#primary-doc-block-accepts-of-prop) + - [Addons no longer need a peer dependency on React](#addons-no-longer-need-a-peer-dependency-on-react) - [From version 7.4.0 to 7.5.0](#from-version-740-to-750) - - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) - - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) + - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated) + - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers) - [From version 7.0.0 to 7.2.0](#from-version-700-to-720) - - [Addon API is more type-strict](#addon-api-is-more-type-strict) - - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) + - [Addon API is more type-strict](#addon-api-is-more-type-strict) + - [Addon-controls hideNoControlsWarning parameter is deprecated](#addon-controls-hidenocontrolswarning-parameter-is-deprecated) - [From version 6.5.x to 7.0.0](#from-version-65x-to-700) - [7.0 breaking changes](#70-breaking-changes) - [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below) @@ -141,7 +141,7 @@ - [Deploying build artifacts](#deploying-build-artifacts) - [Dropped support for file URLs](#dropped-support-for-file-urls) - [Serving with nginx](#serving-with-nginx) - - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules) + - [Ignore story files from node_modules](#ignore-story-files-from-node_modules) - [7.0 Core changes](#70-core-changes) - [7.0 feature flags removed](#70-feature-flags-removed) - [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates) @@ -155,7 +155,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) @@ -167,6 +167,7 @@ - [Angular: Drop support for calling Storybook directly](#angular-drop-support-for-calling-storybook-directly) - [Angular: Application providers and ModuleWithProviders](#angular-application-providers-and-modulewithproviders) - [Angular: Removed legacy renderer](#angular-removed-legacy-renderer) + - [Angular: initializer functions](#angular-initializer-functions) - [Next.js: use the `@storybook/nextjs` framework](#nextjs-use-the-storybooknextjs-framework) - [SvelteKit: needs the `@storybook/sveltekit` framework](#sveltekit-needs-the-storybooksveltekit-framework) - [Vue3: replaced app export with setup](#vue3-replaced-app-export-with-setup) @@ -205,7 +206,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) + - [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) @@ -430,7 +431,7 @@ These APIs allowed addons to render arbitrary content in the Storybook sidebar. > [!NOTE] > You need to set the feature flag `backgroundsStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format and set the value with `globals`. -> +> > See here how to set feature flags: https://storybook.js.org/docs/api/main-config/main-config-features The `addon-backgrounds` addon now uses a new format for configuring its list of selectable backgrounds. @@ -476,7 +477,7 @@ This locks that story to the `twitter` background, it cannot be changed by the a > [!NOTE] > You need to set the feature flag `viewportStoryGlobals` to `true` in your `.storybook/main.ts` to use the new format and set the value with `globals`. -> +> > See here how to set feature flags: https://storybook.js.org/docs/api/main-config/main-config-features The `addon-viewport` addon now uses a new format for configuring its list of selectable viewports. @@ -2579,6 +2580,15 @@ Please visit https://angular.io/guide/standalone-components#configuring-dependen The `parameters.angularLegacyRendering` option is removed. You cannot use the old legacy renderer anymore. +#### Angular: Initializer functions + +Initializer functions using the `APP_INITIALIZER` dependency injection token only run when the component renders. To ensure an initializer function is always executed, you can adjust your `.storybook/preview.ts` and invoke it directly. + +```js +myCustomInitializer(); +export default preview; +``` + #### Next.js: use the `@storybook/nextjs` framework In Storybook 7.0 we introduced a convenient package that provides an out of the box experience for Next.js projects: `@storybook/nextjs`. Please see the [following resource](./code/frameworks/nextjs/README.md#getting-started) to get started with it. diff --git a/code/package.json b/code/package.json index 49d43900fb56..9285f17e675e 100644 --- a/code/package.json +++ b/code/package.json @@ -293,5 +293,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.5.0-alpha.10" } diff --git a/docs/_assets/contribute/local-storybook-website-dropdown-optimized.mp4 b/docs/_assets/contribute/local-storybook-website-dropdown-optimized.mp4 new file mode 100644 index 000000000000..b165b199c31b Binary files /dev/null and b/docs/_assets/contribute/local-storybook-website-dropdown-optimized.mp4 differ diff --git a/docs/_assets/contribute/local-storybook-website-dropdown-optimized.png b/docs/_assets/contribute/local-storybook-website-dropdown-optimized.png deleted file mode 100644 index 229efa469abf..000000000000 Binary files a/docs/_assets/contribute/local-storybook-website-dropdown-optimized.png and /dev/null differ diff --git a/docs/_snippets/add-localize-package-to-polyfills.md b/docs/_snippets/add-localize-package-to-polyfills.md deleted file mode 100644 index 109a146cb5d3..000000000000 --- a/docs/_snippets/add-localize-package-to-polyfills.md +++ /dev/null @@ -1,4 +0,0 @@ -```ts filename="src/polyfills.ts" renderer="angular" language="ts" -import '@angular/localize/init'; -``` - diff --git a/docs/_snippets/addon-actions-action-function.md b/docs/_snippets/addon-actions-action-function.md index 2bfa724a201b..ac2c1cd93a7d 100644 --- a/docs/_snippets/addon-actions-action-function.md +++ b/docs/_snippets/addon-actions-action-function.md @@ -91,4 +91,3 @@ const meta: Meta { export default meta; ``` - diff --git a/docs/_snippets/addon-backgrounds-grid.md b/docs/_snippets/addon-backgrounds-grid.md index 03c3b7559735..266d4e39d520 100644 --- a/docs/_snippets/addon-backgrounds-grid.md +++ b/docs/_snippets/addon-backgrounds-grid.md @@ -131,4 +131,3 @@ const meta: Meta = { export default meta; ``` - diff --git a/docs/_snippets/addon-consume-and-update-globaltype.md b/docs/_snippets/addon-consume-and-update-globaltype.md index d2e163551ea6..08eed8c3a8bd 100644 --- a/docs/_snippets/addon-consume-and-update-globaltype.md +++ b/docs/_snippets/addon-consume-and-update-globaltype.md @@ -38,4 +38,3 @@ const ExampleToolbar = () => { ); }; ``` - diff --git a/docs/_snippets/addon-consume-globaltype.md b/docs/_snippets/addon-consume-globaltype.md index cbebb92a408d..6a53af2bdc55 100644 --- a/docs/_snippets/addon-consume-globaltype.md +++ b/docs/_snippets/addon-consume-globaltype.md @@ -38,4 +38,3 @@ const ThemePanel = (props) => { ); }; ``` - diff --git a/docs/_snippets/addon-highlight-reset.md b/docs/_snippets/addon-highlight-reset.md index 5cd0e675b9f0..72a5f296a996 100644 --- a/docs/_snippets/addon-highlight-reset.md +++ b/docs/_snippets/addon-highlight-reset.md @@ -240,4 +240,3 @@ export const ResetHighlight: Story = { ], }; ``` - diff --git a/docs/_snippets/addon-test-install.md b/docs/_snippets/addon-test-install.md index b516f291b85f..482a6c00793e 100644 --- a/docs/_snippets/addon-test-install.md +++ b/docs/_snippets/addon-test-install.md @@ -1,4 +1,4 @@ -```shell renderer="common" language="js" packageManager="npx" +```shell renderer="common" language="js" packageManager="npm" npx storybook add @storybook/experimental-addon-test ``` diff --git a/docs/_snippets/angular-install.md b/docs/_snippets/angular-install.md index 25add9054a0d..5333417d45d9 100644 --- a/docs/_snippets/angular-install.md +++ b/docs/_snippets/angular-install.md @@ -9,4 +9,3 @@ pnpm add --save-dev @storybook/angular ```shell renderer="angular" language="js" packageManager="yarn" yarn add --dev @storybook/angular ``` - diff --git a/docs/_snippets/angular-project-compodoc-config.md b/docs/_snippets/angular-project-compodoc-config.md index 161f5cfce106..ce7077448325 100644 --- a/docs/_snippets/angular-project-compodoc-config.md +++ b/docs/_snippets/angular-project-compodoc-config.md @@ -46,4 +46,3 @@ } } ``` - diff --git a/docs/_snippets/api-doc-block-argtypes-parameter.md b/docs/_snippets/api-doc-block-argtypes-parameter.md index f0f64183d994..abd54038f549 100644 --- a/docs/_snippets/api-doc-block-argtypes-parameter.md +++ b/docs/_snippets/api-doc-block-argtypes-parameter.md @@ -63,4 +63,3 @@ const meta: Meta = { export default meta; ``` - diff --git a/docs/_snippets/api-doc-block-canvas-parameter.md b/docs/_snippets/api-doc-block-canvas-parameter.md index 64c77770d0d2..f49d31200bde 100644 --- a/docs/_snippets/api-doc-block-canvas-parameter.md +++ b/docs/_snippets/api-doc-block-canvas-parameter.md @@ -107,4 +107,3 @@ export const Basic: Story = { }, }; ``` - diff --git a/docs/_snippets/api-doc-block-controls-parameter.md b/docs/_snippets/api-doc-block-controls-parameter.md index 229051ffabb8..03f33b83c7ed 100644 --- a/docs/_snippets/api-doc-block-controls-parameter.md +++ b/docs/_snippets/api-doc-block-controls-parameter.md @@ -94,4 +94,3 @@ const meta: Meta = { export default meta; ``` - diff --git a/docs/_snippets/api-doc-block-description-example.md b/docs/_snippets/api-doc-block-description-example.md index 8ae271fdb0af..63221a8078fc 100644 --- a/docs/_snippets/api-doc-block-description-example.md +++ b/docs/_snippets/api-doc-block-description-example.md @@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/angular'; import { Button } from './button.component'; /** - * # Button stories + * Button stories * These stories showcase the button */ const meta: Meta