diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 5b626c20dc41..a8b97f0cc0eb 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,11 @@ +## 8.0.0-alpha.14 + +- Addons: Remove Node.js internal aliasing for Node builds - [#25712](https://github.com/storybookjs/storybook/pull/25712), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Automigration: Add removeReactDependency fix to allFixes array - [#25717](https://github.com/storybookjs/storybook/pull/25717), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Codemods: Add support for multiple file extensions in runCodemod function - [#25708](https://github.com/storybookjs/storybook/pull/25708), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- Next.js: Add webpack aliases for OpenTelemetry API - [#25652](https://github.com/storybookjs/storybook/pull/25652), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! +- UI: Remove `defaultProps` from `Link` component - [#25619](https://github.com/storybookjs/storybook/pull/25619), thanks [@tsvanharen](https://github.com/tsvanharen)! + ## 8.0.0-alpha.13 - Next.js: Fix SWC mode activation - [#25670](https://github.com/storybookjs/storybook/pull/25670), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)! diff --git a/README.md b/README.md index bf45664b938f..829b319ec96f 100644 --- a/README.md +++ b/README.md @@ -97,10 +97,10 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/ ### Supported Frameworks | Renderer | Demo | | -| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +|----------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------| | [React](code/renderers/react) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://next--630511d655df72125520f051.chromatic.com/) | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react) | | [Angular](code/frameworks/angular/) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://next--6322ce6af69825592bbb28fc.chromatic.com/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/) | -| [Vue](code/renderers/vue) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](code/renderers/vue) | +| [Vue 3](code/renderers/vue3) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue3/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/) | [![Vue 3](https://img.shields.io/npm/dm/@storybook/vue3?style=flat-square&color=eee)](code/renderers/vue3/) | | [Web components](code/renderers/web-components) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://next--638db5bf49adfdfe8cf545e0.chromatic.com/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](code/renderers/web-components) | | [React Native](https://github.com/storybookjs/react-native) | [![](https://img.shields.io/npm/v/@storybook/react-native/latest?style=flat-square&color=blue&label)](/) | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native) | | [HTML](code/renderers/html) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://next--63dd39a158cf6fc05199b4bb.chromatic.com/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](code/renderers/html) | diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md index 9495cf2c1508..216893fb7070 100644 --- a/code/addons/docs/README.md +++ b/code/addons/docs/README.md @@ -12,7 +12,7 @@ Storybook Docs transforms your Storybook stories into world-class component docu **MDX.** If you want more control, `MDX` allows you to write long-form markdown documentation and include stories in one file. You can also use it to write pure documentation pages and embed them inside your Storybook alongside your stories. -Just like Storybook, Docs supports every major view layer including React, Vue, Angular, HTML, Web components, Svelte, and many more. +Just like Storybook, Docs supports every major view layer including React, Vue 3, Angular, HTML, Web components, Svelte, and many more. Read on to learn more: @@ -113,7 +113,7 @@ export default { ### Be sure to check framework specific installation needs - [React](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/react) (covered here) -- [Vue](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/vue) +- [Vue 3](https://github.com/storybookjs/storybook/blob/next/code/addons/docs/vue3) - [Angular](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/angular) - [Ember](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/ember) - [Web Components](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/web-components) diff --git a/code/addons/docs/common/README.md b/code/addons/docs/common/README.md index 1195d287d444..4a43dfe641de 100644 --- a/code/addons/docs/common/README.md +++ b/code/addons/docs/common/README.md @@ -2,7 +2,7 @@ Storybook Docs transforms your Storybook stories into world-class component documentation. Docs supports [all web frameworks that Storybook supports](../README.md#framework-support). -Popular frameworks like [React](../react/README.md)/[Vue](../vue/README.md)/[Angular](../angular/README.md)/[Ember](../ember/README.md)/[Web components](../web-components/README.md) have their own framework-specific optimizations and setup guides. This README documents the "common" setup for other frameworks that don't have any docs-specific optimizations. +Popular frameworks like [React](../react/README.md)/[Vue 3](../vue3/README.md)/[Angular](../angular/README.md)/[Ember](../ember/README.md)/[Web components](../web-components/README.md) have their own framework-specific optimizations and setup guides. This README documents the "common" setup for other frameworks that don't have any docs-specific optimizations. - [Installation](#installation) - [DocsPage](#docspage) diff --git a/code/addons/docs/docs/docspage.md b/code/addons/docs/docs/docspage.md index 3fef9898f955..5e89251c2ede 100644 --- a/code/addons/docs/docs/docspage.md +++ b/code/addons/docs/docs/docspage.md @@ -23,7 +23,7 @@ Like `addon-info`, `DocsPage` provides sensible defaults, meaning it adds docume However, `DocsPage` brings the following improvements: -- It supports all frameworks that Storybook supports, including React, Vue, Angular and [many others](../README.md#framework-support). +- It supports all frameworks that Storybook supports, including React, Vue 3, Angular and [many others](../README.md#framework-support). - It generates better documentation that can be used as a standalone docs site, independently of Storybook. - It supports better configuration, so you can capture project specific information with ease. - It's built to work with [`MDX`](./mdx.md) when you need more control of your documentation. diff --git a/code/addons/docs/docs/faq.md b/code/addons/docs/docs/faq.md index 5710640cc092..895098b7ad31 100644 --- a/code/addons/docs/docs/faq.md +++ b/code/addons/docs/docs/faq.md @@ -9,7 +9,7 @@ You've read the [Storybook Docs README](../README.md). You're already familiar w ## Does Docs support framework X? -Docs does not currently support [React Native](https://github.com/storybookjs/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue, Angular, Ember, Svelte, and others. +Docs does not currently support [React Native](https://github.com/storybookjs/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue 3, Angular, Ember, Svelte, and others. ## How does Docs interact with existing addons? @@ -44,6 +44,6 @@ This is [Component Story Format (CSF)](https://medium.com/storybookjs/component- ## More resources - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md) -- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) +- Framework-specific docs: [React](../react/README.md) / [Vue 3](../vue3/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea) - Example: [Storybook Design System](https://github.com/storybookjs/design-system) diff --git a/code/addons/docs/docs/mdx.md b/code/addons/docs/docs/mdx.md index 50039fd7fa6e..3f251fd9a9e5 100644 --- a/code/addons/docs/docs/mdx.md +++ b/code/addons/docs/docs/mdx.md @@ -195,6 +195,6 @@ Be sure to update your Storybook config file to load `.stories.mdx` stories, as ## More resources - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md) -- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) +- Framework-specific docs: [React](../react/README.md) / [Vue 3](../vue3/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea) - Example: [Storybook Design System](https://github.com/storybookjs/design-system) diff --git a/code/addons/docs/docs/multiframework.md b/code/addons/docs/docs/multiframework.md index 7959f79ef426..070d94089b00 100644 --- a/code/addons/docs/docs/multiframework.md +++ b/code/addons/docs/docs/multiframework.md @@ -13,7 +13,7 @@ Storybook Docs [provides basic support for all non-RN Storybook view layers](../ Your framework might need framework-specific configuration. This could include adding extra webpack loaders or global decorators/story parameters. -Addon-docs handles this kind of customization by file naming convention. Its [common preset](https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/common/preset.ts) does this by looking for files `..//{preset,config}.[tj]sx?`, where `` is the framework identifier, e.g. `vue`, `angular`, `react`, etc. +Addon-docs handles this kind of customization by file naming convention. Its [common preset](https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/common/preset.ts) does this by looking for files `..//{preset,config}.[tj]sx?`, where `` is the framework identifier, e.g. `vue3`, `angular`, `react`, etc. For example, consider Storybook Docs for Vue, which needs `vue-docgen-loader` in its webpack config, and also has custom extraction functions for [props tables](#props-tables) and [component descriptions](#component-descriptions). @@ -162,6 +162,6 @@ This configures the `jsxDecorator` to be run on every story. ## More resources - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md) -- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) +- Framework-specific docs: [React](../react/README.md) / [Vue 3](../vue3/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea) - Example: [Storybook Design System](https://github.com/storybookjs/design-system) diff --git a/code/addons/docs/docs/props-tables.md b/code/addons/docs/docs/props-tables.md index cdc704e2bd65..dcfe92476c04 100644 --- a/code/addons/docs/docs/props-tables.md +++ b/code/addons/docs/docs/props-tables.md @@ -18,7 +18,7 @@ Storybook Docs automatically generates props tables for components in supported ## Usage -For framework-specific setup instructions, see the framework's README: [React](../react/README.md), [Vue](../vue/README.md), [Angular](../angular/README.md), [Web Components](../web-components/README.md), [Ember](../ember/README.md). +For framework-specific setup instructions, see the framework's README: [React](../react/README.md), [Vue3 ](../vue3/README.md), [Angular](../angular/README.md), [Web Components](../web-components/README.md), [Ember](../ember/README.md). ### DocsPage @@ -228,7 +228,7 @@ This package relies on a variety of sub-packages to extract property information | Framework | Underlying library | Docs | Open issues | | -------------- | ---------------------------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | React | `react-docgen` `react-docgen-typescript` | [Docs](../react/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+react%22) | -| Vue | `vue-docgen-api` | [Docs](../vue/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+vue%22) | +| Vue 3 | `vue-docgen-api` | [Docs](../vue3/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22vue3%22) | | Angular | `compodoc` | [Docs](../angular/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+angular%22) | | Web-components | `custom-elements.json` | [Docs](../web-components/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+web-components%22) | | Ember | `yui-doc` | [Docs](../ember/README.md#props-tables) | [Open issues](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22block%3A+props%22+label%3Abug+label%3A%22app%3A+ember%22) | @@ -236,6 +236,6 @@ This package relies on a variety of sub-packages to extract property information ## More resources - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md) -- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) +- Framework-specific docs: [React](../react/README.md) / [Vue 3](../vue3/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea) - Example: [Storybook Design System](https://github.com/storybookjs/design-system) diff --git a/code/addons/docs/docs/recipes.md b/code/addons/docs/docs/recipes.md index df2892df89e4..ca03815ce2dd 100644 --- a/code/addons/docs/docs/recipes.md +++ b/code/addons/docs/docs/recipes.md @@ -352,6 +352,6 @@ There is also an webpack loader package that extracts descriptions from jsdoc co ## More resources - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md) -- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) +- Framework-specific docs: [React](../react/README.md) / [Vue 3](../vue3/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea) - Example: [Storybook Design System](https://github.com/storybookjs/design-system) diff --git a/code/addons/docs/docs/theming.md b/code/addons/docs/docs/theming.md index a570ba61073a..6f66a2d37267 100644 --- a/code/addons/docs/docs/theming.md +++ b/code/addons/docs/docs/theming.md @@ -92,6 +92,6 @@ addParameters({ ## More resources - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md) -- Framework-specific docs: [React](../react/README.md) / [Vue](../vue/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) +- Framework-specific docs: [React](../react/README.md) / [Vue 3](../vue3/README.md) / [Angular](../angular/README.md) / [Web components](../web-components/README.md) / [Ember](../ember/README.md) - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea) - Example: [Storybook Design System](https://github.com/storybookjs/design-system) diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 46e00da78797..992ba4115f51 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -30,6 +30,7 @@ }, "./manager": "./dist/manager.js", "./preview": "./dist/preview.js", + "./preset": "./dist/preset.js", "./register.js": "./dist/manager.js", "./package.json": "./package.json" }, diff --git a/code/addons/toolbars/README.md b/code/addons/toolbars/README.md index 560966c094ce..dcb9b9c4deef 100644 --- a/code/addons/toolbars/README.md +++ b/code/addons/toolbars/README.md @@ -42,4 +42,4 @@ The primary difference between the two packages is that `addon-toolbars` makes u - **Ergonomics**. Global args are easy to consume [in stories](https://storybook.js.org/docs/react/essentials/toolbars-and-globals#consuming-globals-from-within-a-story), in [Storybook Docs](https://github.com/storybookjs/storybook/tree/next/code/addons/docs), or even in other addons. -* **Framework compatibility**. Args are completely framework-independent, so `addon-toolbars` is compatible with React, Vue, Angular, etc. out of the box with no framework logic needed in the addon. +* **Framework compatibility**. Args are completely framework-independent, so `addon-toolbars` is compatible with React, Vue 3, Angular, etc. out of the box with no framework logic needed in the addon. diff --git a/code/builders/builder-vite/README.md b/code/builders/builder-vite/README.md index 1e5026e36443..02532578fcad 100644 --- a/code/builders/builder-vite/README.md +++ b/code/builders/builder-vite/README.md @@ -133,7 +133,7 @@ See [Customize Vite config](#customize-vite-config) for details about using `vit ### React Docgen -Docgen is used in Storybook to populate the props table in docs view, the controls panel, and for several other addons. Docgen is supported in Svelte, Vue, and React, and there are two docgen options when using react, `react-docgen` and `react-docgen-typescript`. You can learn more about the pros/cons of each in [this gist](https://gist.github.com/shilman/036313ffa3af52ca986b375d90ea46b0). By default, if we find a `typescript` dependency in your `package.json` file, we will assume you're using typescript and will choose `react-docgen-typescript`. You can change this by setting the `typescript.reactDocgen` option in your `.storybook/main.js` file: +Docgen is used in Storybook to populate the props table in docs view, the controls panel, and for several other addons. Docgen is supported in Svelte, Vue 3, and React. React docgen is configurable via the [`typescript.reactDocgen`](https://storybook.js.org/docs/api/main-config-typescript#reactdocgen) setting in `.storybook/main.js`. ```javascript export default { @@ -158,7 +158,7 @@ storybook configuration directory. This can be overridden in viteFinal. ## Contributing The Vite builder cannot build itself. -Are you willing to contribute? We are especially looking for Vue and Svelte experts, as the current maintainers are react users. +Are you willing to contribute? We are especially looking for Vue 3 and Svelte experts, as the current maintainers are react users. Have a look at the GitHub issues with the `vite` label for known bugs. If you find any new bugs, feel free to create an issue or send a pull request! diff --git a/code/frameworks/nextjs/src/aliases/webpack.ts b/code/frameworks/nextjs/src/aliases/webpack.ts new file mode 100644 index 000000000000..ceacfa541a29 --- /dev/null +++ b/code/frameworks/nextjs/src/aliases/webpack.ts @@ -0,0 +1,11 @@ +import type { Configuration as WebpackConfig } from 'webpack'; + +export const configureAliases = (baseConfig: WebpackConfig): void => { + baseConfig.resolve = { + ...(baseConfig.resolve ?? {}), + alias: { + ...(baseConfig.resolve?.alias ?? {}), + '@opentelemetry/api': 'next/dist/compiled/@opentelemetry/api', + }, + }; +}; diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index 24b2c3ee46d9..95f4cc062702 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/code/frameworks/nextjs/src/preset.ts @@ -21,6 +21,7 @@ import { configureNodePolyfills } from './nodePolyfills/webpack'; import { configureSWCLoader } from './swc/loader'; import { configureBabelLoader } from './babel/loader'; import { configureFastRefresh } from './fastRefresh/webpack'; +import { configureAliases } from './aliases/webpack'; export const addons: PresetProperty<'addons'> = [ dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))), @@ -161,6 +162,7 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, configureImages(baseConfig, nextConfig); configureStyledJsx(baseConfig); configureNodePolyfills(baseConfig); + configureAliases(baseConfig); if (isDevelopment) { configureFastRefresh(baseConfig); diff --git a/code/frameworks/vue3-vite/README.md b/code/frameworks/vue3-vite/README.md index 1eadfa5c7b7a..bb1eb15f980e 100644 --- a/code/frameworks/vue3-vite/README.md +++ b/code/frameworks/vue3-vite/README.md @@ -20,11 +20,11 @@ For more information visit: [storybook.js.org](https://storybook.js.org) --- Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/vue/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. +You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. ## Extending the Vue application -Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview. +Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file. Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration. diff --git a/code/frameworks/vue3-webpack5/README.md b/code/frameworks/vue3-webpack5/README.md index 3795b03d961f..2e365a8a7f8e 100644 --- a/code/frameworks/vue3-webpack5/README.md +++ b/code/frameworks/vue3-webpack5/README.md @@ -20,11 +20,11 @@ For more information visit: [storybook.js.org](https://storybook.js.org) --- Storybook also comes with a lot of [addons](https://storybook.js.org/addons) and a great API to customize as you wish. -You can also build a [static version](https://storybook.js.org/docs/vue/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. +You can also build a [static version](https://storybook.js.org/docs/sharing/publish-storybook) of your Storybook and deploy it anywhere you want. ## Extending the Vue application -Storybook creates a [Vue 3 application](https://v3.vuejs.org/api/application-api.html#application-api) for your component preview. +Storybook creates a [Vue 3 application](https://vuejs.org/api/application.html#application-api) for your component preview. When using global custom components (`app.component`), directives (`app.directive`), extensions (`app.use`), or other application methods, you will need to configure those in the `./storybook/preview.js` file. Therefore, Storybook provides you with a `setup` function exported from this package, which receives as a callback your Storybook instance, which you can interact with and add your custom configuration. diff --git a/code/lib/cli/src/automigrate/fixes/index.ts b/code/lib/cli/src/automigrate/fixes/index.ts index a00da6ece198..27f8a80b3140 100644 --- a/code/lib/cli/src/automigrate/fixes/index.ts +++ b/code/lib/cli/src/automigrate/fixes/index.ts @@ -18,6 +18,7 @@ import { incompatibleAddons } from './incompatible-addons'; import { angularBuildersMultiproject } from './angular-builders-multiproject'; import { wrapRequire } from './wrap-require'; import { reactDocgen } from './react-docgen'; +import { removeReactDependency } from './prompt-remove-react'; import { storyshotsMigration } from './storyshots-migration'; export * from '../types'; @@ -42,6 +43,7 @@ export const allFixes: Fix[] = [ wrapRequire, reactDocgen, storyshotsMigration, + removeReactDependency, ]; export const initFixes: Fix[] = [eslintPlugin]; diff --git a/code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts b/code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts index aa86a4126a29..eb93ce015b08 100644 --- a/code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts +++ b/code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts @@ -5,6 +5,7 @@ import type { Fix } from '../types'; export const removeReactDependency: Fix<{}> = { id: 'remove-react-dependency', + promptOnly: true, async check({ packageManager, mainConfig, storybookVersion }) { // when the user is using the react renderer, we should not prompt them to remove react diff --git a/code/lib/cli/src/generate.ts b/code/lib/cli/src/generate.ts index a3175e5d0b54..71ea9841fc64 100644 --- a/code/lib/cli/src/generate.ts +++ b/code/lib/cli/src/generate.ts @@ -34,12 +34,12 @@ const command = (name: string) => .command(name) .option( '--disable-telemetry', - 'disable sending telemetry data', + 'Disable sending telemetry data', // default value is false, but if the user sets STORYBOOK_DISABLE_TELEMETRY, it can be true process.env.STORYBOOK_DISABLE_TELEMETRY && process.env.STORYBOOK_DISABLE_TELEMETRY !== 'false' ) .option('--debug', 'Get more logs in debug mode', false) - .option('--enable-crash-reports', 'enable sending crash reports to telemetry data'); + .option('--enable-crash-reports', 'Enable sending crash reports to telemetry data'); command('init') .description('Initialize Storybook into your project.') diff --git a/code/lib/codemod/src/index.ts b/code/lib/codemod/src/index.ts index dafb69513fd5..0bc3f4d1b3db 100644 --- a/code/lib/codemod/src/index.ts +++ b/code/lib/codemod/src/index.ts @@ -47,6 +47,7 @@ export async function runCodemod(codemod: any, { glob, logger, dryRun, rename, p // jscodeshift/prettier know how to handle .ts/.tsx extensions, // so if the user uses one of those globs, we can auto-infer let inferredParser = parser; + if (!parser) { const extension = path.extname(glob).slice(1); const knownParser = jscodeshiftToPrettierParser(extension); @@ -54,7 +55,11 @@ export async function runCodemod(codemod: any, { glob, logger, dryRun, rename, p } const files = await globby([glob, '!**/node_modules', '!**/dist']); + const extensions = new Set(files.map((file) => path.extname(file).slice(1))); + const commaSeparatedExtensions = Array.from(extensions).join(','); + logger.log(`=> Applying ${codemod}: ${files.length} files`); + if (files.length === 0) { logger.log(`=> No matching files for glob: ${glob}`); return; @@ -70,6 +75,7 @@ export async function runCodemod(codemod: any, { glob, logger, dryRun, rename, p // which is faster, and also makes sure the user won't see babel messages such as: // [BABEL] Note: The code generator has deoptimised the styling of repo/node_modules/prettier/index.js as it exceeds the max of 500KB. '--no-babel', + `--extensions=${commaSeparatedExtensions}`, '--fail-on-error', '-t', `${TRANSFORM_DIR}/${codemod}.js`, diff --git a/code/lib/core-server/README.md b/code/lib/core-server/README.md index 9bfbc5667d8e..4af52cb89409 100644 --- a/code/lib/core-server/README.md +++ b/code/lib/core-server/README.md @@ -1,6 +1,6 @@ # Storybook Core-server -This package contains common node-side functionality used among the different frameworks (React, RN, Vue, Ember, Angular, etc). +This package contains common node-side functionality used among the different frameworks (React, RN, Vue 3, Ember, Angular, etc). It contains: diff --git a/code/lib/preview-api/README-core-client.md b/code/lib/preview-api/README-core-client.md index c77706dc0cae..b937562ae166 100644 --- a/code/lib/preview-api/README-core-client.md +++ b/code/lib/preview-api/README-core-client.md @@ -1,6 +1,6 @@ # Storybook Core-Client -This package contains browser-side functionality shared amongst all the frameworks (React, RN, Vue, Ember, Angular, etc) in the old "v6" story store back-compatibility layer. +This package contains browser-side functionality shared amongst all the frameworks (React, RN, Vue 3, Ember, Angular, etc) in the old "v6" story store back-compatibility layer. A framework calls the `start(renderToCanvas, { render, decorateStory })` function and provides: diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts index ccb2bcbfeaf3..c172d7cb2652 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.integration.test.ts @@ -72,98 +72,122 @@ beforeEach(() => { vi.mocked(WebView.prototype).prepareForStory.mockReturnValue('story-element' as any); }); -describe('PreviewWeb', () => { - describe('initial render', () => { - it('renders story mode through the stack', async () => { - const { DocsRenderer } = await import('@storybook/addon-docs'); - projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any; - - projectAnnotations.renderToCanvas.mockImplementationOnce(({ storyFn }: RenderContext) => - storyFn() - ); - document.location.search = '?id=component-one--a'; - await new PreviewWeb(importFn, getProjectAnnotations).ready(); - - await waitForRender(); - - expect(projectAnnotations.decorators[0]).toHaveBeenCalled(); - expect(projectAnnotations.render).toHaveBeenCalled(); - }); - - it('renders docs mode through docs page', async () => { - const { DocsRenderer } = await import('@storybook/addon-docs'); - projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any; - - document.location.search = '?id=component-one--docs&viewMode=docs'; - const preview = new PreviewWeb(importFn, getProjectAnnotations); - - const docsRoot = document.createElement('div'); - vi.mocked(preview.view.prepareForDocs).mockReturnValue(docsRoot as any); - componentOneExports.default.parameters.docs.container.mockImplementationOnce(() => - React.createElement('div', {}, 'INSIDE') - ); - - await preview.ready(); - await waitForRender(); - - expect(docsRoot.outerHTML).toMatchInlineSnapshot('"
INSIDE
"'); - // Extended timeout to try and avoid - // Error: Event was not emitted in time: storyRendered,docsRendered,storyThrewException,storyErrored,storyMissing - }, 10_000); - - it('sends docs rendering exceptions to showException', async () => { - const { DocsRenderer } = await import('@storybook/addon-docs'); - projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any; - - document.location.search = '?id=component-one--docs&viewMode=docs'; - const preview = new PreviewWeb(importFn, getProjectAnnotations); - - const docsRoot = document.createElement('div'); - vi.mocked(preview.view.prepareForDocs).mockReturnValue(docsRoot as any); - componentOneExports.default.parameters.docs.container.mockImplementation(() => { - throw new Error('Docs rendering error'); +describe( + 'PreviewWeb', + () => { + describe('initial render', () => { + it('renders story mode through the stack', async () => { + const { DocsRenderer } = await import('@storybook/addon-docs'); + projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any; + + projectAnnotations.renderToCanvas.mockImplementationOnce( + ({ storyFn }: RenderContext) => storyFn() + ); + document.location.search = '?id=component-one--a'; + await new PreviewWeb(importFn, getProjectAnnotations).ready(); + + await waitForRender(); + + await vi.waitFor(() => { + expect(projectAnnotations.decorators[0]).toHaveBeenCalled(); + expect(projectAnnotations.render).toHaveBeenCalled(); + }); }); - vi.mocked(preview.view.showErrorDisplay).mockClear(); - - await preview.ready(); - await waitForRender(); - - expect(preview.view.showErrorDisplay).toHaveBeenCalled(); + it('renders docs mode through docs page', async () => { + const { DocsRenderer } = await import('@storybook/addon-docs'); + projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any; + + document.location.search = '?id=component-one--docs&viewMode=docs'; + const preview = new PreviewWeb(importFn, getProjectAnnotations); + + const docsRoot = document.createElement('div'); + vi.mocked(preview.view.prepareForDocs).mockReturnValue(docsRoot as any); + componentOneExports.default.parameters.docs.container.mockImplementationOnce(() => + React.createElement('div', {}, 'INSIDE') + ); + + await preview.ready(); + + await vi.waitFor( + () => { + if (docsRoot.outerHTML !== '
INSIDE
') { + throw new Error('DocsRoot not ready yet'); + } + }, + { + timeout: 2000, + } + ); + + expect(docsRoot.outerHTML).toMatchInlineSnapshot('"
INSIDE
"'); + + // Extended timeout to try and avoid + // Error: Event was not emitted in time: storyRendered,docsRendered,storyThrewException,storyErrored,storyMissing + }, 10_000); + + it('sends docs rendering exceptions to showException', async () => { + const { DocsRenderer } = await import('@storybook/addon-docs'); + projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any; + + document.location.search = '?id=component-one--docs&viewMode=docs'; + const preview = new PreviewWeb(importFn, getProjectAnnotations); + + const docsRoot = document.createElement('div'); + vi.mocked(preview.view.prepareForDocs).mockReturnValue(docsRoot as any); + componentOneExports.default.parameters.docs.container.mockImplementation(() => { + throw new Error('Docs rendering error'); + }); + + vi.mocked(preview.view.showErrorDisplay).mockClear(); + + await preview.ready(); + + await vi.waitFor( + () => { + expect(preview.view.showErrorDisplay).toHaveBeenCalled(); + }, + { + timeout: 2000, + } + ); + }); }); - }); - - describe('onGetGlobalMeta changed (HMR)', () => { - const newGlobalDecorator = vi.fn((s) => s()); - const newGetProjectAnnotations = () => { - return { - ...projectAnnotations, - args: { a: 'second' }, - globals: { a: 'second' }, - decorators: [newGlobalDecorator], + + describe('onGetGlobalMeta changed (HMR)', () => { + const newGlobalDecorator = vi.fn((s) => s()); + const newGetProjectAnnotations = () => { + return { + ...projectAnnotations, + args: { a: 'second' }, + globals: { a: 'second' }, + decorators: [newGlobalDecorator], + }; }; - }; - - it('renders story mode through the updated stack', async () => { - const { DocsRenderer } = await import('@storybook/addon-docs'); - projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any; - - document.location.search = '?id=component-one--a'; - const preview = new PreviewWeb(importFn, getProjectAnnotations); - await preview.ready(); - await waitForRender(); - - projectAnnotations.renderToCanvas.mockImplementationOnce(({ storyFn }: RenderContext) => - storyFn() - ); - projectAnnotations.decorators[0].mockClear(); - mockChannel.emit.mockClear(); - preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations }); - await waitForRender(); - - expect(projectAnnotations.decorators[0]).not.toHaveBeenCalled(); - expect(newGlobalDecorator).toHaveBeenCalled(); - expect(projectAnnotations.render).toHaveBeenCalled(); + + it('renders story mode through the updated stack', async () => { + const { DocsRenderer } = await import('@storybook/addon-docs'); + projectAnnotations.parameters.docs.renderer = () => new DocsRenderer() as any; + + document.location.search = '?id=component-one--a'; + const preview = new PreviewWeb(importFn, getProjectAnnotations); + await preview.ready(); + await waitForRender(); + + projectAnnotations.renderToCanvas.mockImplementationOnce( + ({ storyFn }: RenderContext) => storyFn() + ); + projectAnnotations.decorators[0].mockClear(); + mockChannel.emit.mockClear(); + preview.onGetProjectAnnotationsChanged({ getProjectAnnotations: newGetProjectAnnotations }); + + await vi.waitFor(() => { + expect(projectAnnotations.decorators[0]).not.toHaveBeenCalled(); + expect(newGlobalDecorator).toHaveBeenCalled(); + expect(projectAnnotations.render).toHaveBeenCalled(); + }); + }); }); - }); -}); + }, + { retry: 3 } +); diff --git a/code/package.json b/code/package.json index 9594bf64a716..4dd59fc0a482 100644 --- a/code/package.json +++ b/code/package.json @@ -292,5 +292,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "8.0.0-alpha.14" } diff --git a/code/presets/vue3-webpack/README.md b/code/presets/vue3-webpack/README.md index d600b0fa0eab..e361f8bc4222 100644 --- a/code/presets/vue3-webpack/README.md +++ b/code/presets/vue3-webpack/README.md @@ -1,6 +1,6 @@ # Storybook Webpack preset for Vue3 -This package is a [preset](https://storybook.js.org/docs/vue/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Vue3. +This package is a [preset](https://storybook.js.org/docs/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Vue 3. It's an internal package that's not intended to be used directly by users. -- More info on [Storybook for Vue3](https://storybook.js.org/docs/vue/get-started) +- More info on [Storybook for Vue3](https://storybook.js.org/docs/get-started/why-storybook) \ No newline at end of file diff --git a/code/ui/components/src/components/typography/link/link.tsx b/code/ui/components/src/components/typography/link/link.tsx index fb26a03a0df4..50a46440cbbd 100644 --- a/code/ui/components/src/components/typography/link/link.tsx +++ b/code/ui/components/src/components/typography/link/link.tsx @@ -184,12 +184,13 @@ export interface LinkProps extends LinkInnerProps, LinkStylesProps { } export const Link: FC = ({ - cancel, + cancel = true, children, - onClick, - withArrow, - containsIcon, - className, + onClick = undefined, + withArrow = false, + containsIcon = false, + className = undefined, + style = undefined, ...rest }) => ( = ({ ); - -Link.defaultProps = { - cancel: true, - className: undefined, - style: undefined, - onClick: undefined, - withArrow: false, - containsIcon: false, -}; diff --git a/docs/addons/addon-migration-guide.md b/docs/addons/addon-migration-guide.md index b4547353b98f..8d0087b4fb4a 100644 --- a/docs/addons/addon-migration-guide.md +++ b/docs/addons/addon-migration-guide.md @@ -1,8 +1,8 @@ --- -title: Addon migration guide for Storybook 7.0 +title: Addon migration guide for Storybook 8.0 --- -Storybook 7 is our first major release in over two years. While Storybook’s addon API has not changed much in the past couple of years, addons require several changes for compatibility with Storybook 7. This guide will walk you through the upgrade process. +We deeply appreciate the dedication and effort addon creators put into keeping the Storybook ecosystem vibrant and up-to-date. As Storybook evolves to version 8.0, bringing new features and improvements, this guide is here to assist you in migrating your addons from 7.x to 8.0. If you need to migrate your addon from an earlier version of Storybook, please first refer to the [Addon migration guide for Storybook 7.0](https://storybook.js.org/docs/7.6/addons/addon-migration-guide). @@ -10,68 +10,57 @@ As we gather feedback from the community, we’ll update this page. We also have -## Dependencies +## Updating dependencies -The first thing to do is upgrade any Storybook dependencies in your project. We release the next version of all our packages on the `next` npm tag, so the easiest thing is to reference that in your `package.json`: +Begin by updating your Storybook dependencies. Use the `next` tag for pre-release versions, `latest` for the most recent stable release, or specify the version directly. ```json { "dependencies": { - "@storybook/client-logger": "next" + "@storybook/client-logger": "next" // or "latest", or "^8.0.0" } } ``` -If you'd rather depend on the latest version of Storybook, you can use the `latest` tag: +## Key changes for addons -```json -{ - "dependencies": { - "@storybook/client-logger": "latest" - } -} -``` +Here are the essential changes in version 8.0 that impact addon development. Please check the [full migration note](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-7x-to-800) for an exhaustive list of changes in 8.0. -Or use a version specifier: +### Node.js 16 support dropped -```json -{ - "dependencies": { - "@storybook/client-logger": "^7.0.0" - } -} -``` +Please upgrade your addon to Node.js 18, as support for Node.js 16 has ended. -## Breaking changes +### React 18 for manager UI -### `@storybook/addons` has been split into `@storybook/manager-api` and `@storybook/preview-api` +UI injected into panels, tools, etc. by addons is now rendered with React 18. Also note that the `key` prop is no longer passed to the render function. -The default export from `@storybook/addons` can now be used via named imports from `@storybook/manager-api` and `@storybook/preview-api`, depending on which environment you need the API from. The manager is the Storybook UI and includes your addon's Addon Panel. While the preview is used to render stories and includes your addon's decorators. +### @storybook/components deprecations -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`. If you use any of these packages, please import what you need from `@storybook/preview-api` instead. +`Icons` component from `@storybook/components` is now deprecated in favor of [`@storybook/icons`](https://github.com/storybookjs/icons). Additionally, various `Button` component props are also deprecated, with alternatives provided. -### Some components were moved from `@storybook/components` to a new package `@storybook/blocks` +### Storybook layout state API changes -Components like `ColorControl`, `ColorPalette`, `ArgsTable`, `ArgRow`, `TabbedArgsTable`, `SectionRow`, `Source`, AND `Code` were moved into a new package. In Storybook 7.0, they should be imported from `@storybook/blocks` instead. +If you're customizing the Storybook UI configuration with `addons.setConfig({...})`, be aware of [the changes to the layout state API](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#ui-layout-state-has-changed-shape). -```js -// import { ColorControl } from '@storybook/components'; -import { ColorControl } from '@storybook/blocks'; -``` +### Removal of deprecated features -## Deprecations and detailed migrations +Deprecated packages and APIs from 7.0 are now removed in 8.0.Consult the [full migration notes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecations-which-are-now-removed) for details. Most notably for addons, the removal of the `@storybook/addons` now necessitates a switch to `@storybook/preview-api` and `@storybook/manager-api`. -We’ve also deprecated a few packages and APIs in 7.0. After you’ve made your addon working with 7.0, make sure to check the browser console in a Storybook running your addon. If you’re using deprecated packages, you should see warnings that link to migration instructions. +### Babel-loader removed from webpack -There are more technical details available in the [migration notes for addon authors](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#specific-instructions-for-addon-creators). +Storybook 8 [removes babel-loader from the webpack5 builder](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#removed-babelcore-and-babel-loader-from-storybookbuilder-webpack5). If your addon's preset overrides the `babel()` method, it will break if your users are using SWC to compile their files (which is the new default for Webpack 5-based Storybook projects). -Finally, for an exhaustive list of noteworthy changes in 7.0, check [the full migration notes](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#from-version-65x-to-700). +To solve for both Babel and SWC, the most robust approach is to create an [unplugin](https://github.com/unjs/unplugin) that will work with both Webpack and Vite builders. That will give you full control to run Babel (or whatever you want) on stories and components as they are loaded. -## Releasing +As a workaround, update your documentation to tell users to opt-in to Babel support. This should fix your addon in their project, at the cost of performance: + +```sh +npx storybook@latest add @storybook/addon-webpack5-compiler-babel +``` -You should release a new major version of this addon that supports Storybook 7. If you want to continue making changes that support Storybook 6, you should release a minor or a patch of the previous major version. +## Releasing -We also recommend releasing your own addon using the `next` tag to test it out in projects. +Release a new major version of your addon for Storybook 8.0. We recommend you to continue supporting 7.x with minor or patch versions. We also recommend releasing your own addon using the `next` tag to test it out in projects. ## Support diff --git a/docs/addons/install-addons.md b/docs/addons/install-addons.md index 33859546e2ea..b12cc34e1186 100644 --- a/docs/addons/install-addons.md +++ b/docs/addons/install-addons.md @@ -2,111 +2,79 @@ title: 'Install addons' --- -Storybook has [hundreds of reusable addons](https://storybook.js.org/addons) that are packaged as NPM modules. Let's walk through how to extend Storybook by installing and registering addons. +Storybook has [hundreds of reusable addons](https://storybook.js.org/integrations) packaged as NPM modules. Let's walk through how to extend Storybook by installing and registering addons. -### Using addons +## Automatic installation -With the exception of preset addons, all addons have the same installation process: install and register. +Storybook includes a [`storybook add`](../api/cli-options.md#add) command to automate the setup of addons. Several community-led addons can be added using this command, except for preset addons. We encourage you to read the addon's documentation to learn more about its installation process. -For example, to include accessibility testing in Storybook, run the following command to install the necessary addon: +Run the `storybook add` command using your chosen package manager, and the CLI will update your Storybook configuration to include the addon and install any necessary dependencies. -Next, update [`.storybook/main.js|ts`](../configure/index.md#configure-story-rendering) to the following: + - - - - - - - - -Addons may also require addon-specific configuration. Read their respective READMEs. +If you're attempting to install multiple addons at once, it will only install the first addon that was specified. This is a known limitation of the current implementation and will be addressed in a future release. -Now when you run Storybook the accessibility testing addon will be enabled. - -![Storybook addon installed and registered](./storybook-addon-installed-registered.png) - -### Using preset addons +### Manual installation -Storybook preset addons are grouped collections of specific `babel`, `webpack` and `addons` configurations for distinct use cases. Each one with its own set of instructions. Preset addons have a three-step installation process: install, register and optionally configuration. +Storybook addons are always added through the [`addons`](../api/main-config-addons.md) configuration array in [`.storybook/main.js|ts`](../configure/index.md). The following example shows how to manually add the [Accessibility addon](https://storybook.js.org/addons/@storybook/addon-a11y) to Storybook. -For example, to use SCSS styling, run the following command to install the addon and the required dependencies: +Run the following command with your package manager of choice to install the addon. - - -Use the Webpack 5 snippet only if your framework already includes support for this version. Otherwise, use the Webpack 4 snippet. - - - -Next, update [`.storybook/main.js|ts`](../configure/index.md#configure-story-rendering) to the following: +Next, update `.storybook/main.js|ts` to the following: -Now when you run Storybook it will configure itself to use SCSS styling. No further configuration is needed. - -#### Optional configuration +When you run Storybook, the accessibility testing addon will be enabled. -Most preset addons can also take additional parameters. The most common use cases are: +![Storybook addon installed and registered](./storybook-addon-installed-registered.png) -- Addon configuration -- Webpack loader configuration +### Removing addons -Consider the following example: +To remove an addon from Storybook, you can choose to manually uninstall it and remove it from the configuration file (i.e., [`.storybook/main.js|ts`](../configure/index.md)) or opt-in to do it automatically via the CLI with the [`remove`](../api/cli-options.md#remove) command. For example, to remove the [Accessibility addon](https://storybook.js.org/addons/@storybook/addon-a11y) from Storybook with the CLI, run the following command: - - - -Preset addons may also have addon-specific configurations. Read their respective READMEs. - - - -Now, when Storybook starts up, it will update webpack's CSS loader to use modules and adjust how styling is defined. diff --git a/docs/api/arg-types.md b/docs/api/arg-types.md index 555462c1354f..ce52bad09f84 100644 --- a/docs/api/arg-types.md +++ b/docs/api/arg-types.md @@ -19,7 +19,7 @@ To do so, Storybook uses various static analysis tools depending on your framewo | Framework | Static analysis tool | | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | | React | [react-docgen](https://github.com/reactjs/react-docgen) or [react-docgen-typescript](https://github.com/styleguidist/react-docgen-typescript) | -| Vue | [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api) | +| Vue 3 | [vue-docgen-api](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api) | | Angular | [compodoc](https://compodoc.app/) | | WebComponents | [custom-element.json](https://github.com/webcomponents/custom-elements-json) | | Ember | [YUI doc](https://github.com/ember-learn/ember-cli-addon-docs-yuidoc#documenting-components) | diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md index ee164e45e499..0f557786e813 100644 --- a/docs/api/cli-options.md +++ b/docs/api/cli-options.md @@ -14,9 +14,15 @@ Storybook collects completely anonymous data to help us improve user experience. All of the following documentation is available in the CLI by running `storybook --help`. + + +The commands work slightly differently if you're using npm instead of Yarn to publish Storybook. For example, `npm run storybook build -- -o ./path/to/build`. + + + ### `dev` -Compiles and serves a development build of your Storybook that reflects your source code changes in the browser in real time. Should be run from the root of your project. +Compiles and serves a development build of your Storybook that reflects your source code changes in the browser in real-time. It should be run from the root of your project. ```shell storybook dev [options] @@ -52,7 +58,7 @@ With the release of Storybook 8, the `-s` CLI flag was removed. We recommend usi ### `build` -Compiles your Storybook instance so it can be [deployed](../sharing/publish-storybook.md). Should be run from the root of your project. +Compiles your Storybook instance so it can be [deployed](../sharing/publish-storybook.md). It should be run from the root of your project. ```shell storybook build [options] @@ -74,8 +80,150 @@ Options include: | `--disable-telemetry` | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).
`storybook build --disable-telemetry` | | `--test` | Optimize Storybook's production build for performance and tests by removing unnecessary features with the `test` option. Learn more [here](../api/main-config-build.md).
`storybook build --test` | - + + +### `init` + +Installs Storybook into your project per specified version (e.g., `@latest`, `@next`). Read more in the [installation guide](../get-started/install.md). + +```shell +storybook[@version] init [options] +``` + +Options include: + +| Option | Description | +| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `-b`, `--builder` | Defines the [builder](../builders/index.md) to use for your Storybook instance
`storybook init --builder webpack5` | +| `-f`,`--force` | Forcefully installs Storybook into your project, prompting you to overwrite existing files
`storybook init --force` | +| `-s`, `--skip-install` | Skips the dependency installation step. Used only when you need to configure Storybook manually
`storybook init --skip-install` | +| `-t`, `--type` | Defines the [framework](../configure/frameworks.md) to use for your Storybook instance
`storybook init --type solid` | +| `-y`, `--yes` | Skips interactive prompts and automatically installs Storybook per specified version
`storybook init --yes` | +| `--package-manager` | Sets the package manager to use when installing the addon.
Available package managers include `npm`, `yarn`, and `pnpm`
`storybook init --package-manager pnpm` | +| `--use-pnp` | Enables [Plug'n'Play](https://yarnpkg.com/features/pnp) support for Yarn. This option is only available when using Yarn as your package manager
`storybook init --use-pnp` | + +### `add` + +Installs a Storybook addon and configures your project for it. Read more in the [addon installation guide](../addons/install-addons.md). + +```shell +storybook add [addon] [options] +``` + +Options include: + +| Option | Description | +| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `--package-manager` | Sets the package manager to use when installing the addon.
Available package managers include `npm`, `yarn`, and `pnpm`
`storybook add [addon] --package-manager pnpm` | +| `-s`, `--skip-postinstall` | Skips post-install configuration. Used only when you need to configure the addon yourself
`storybook add [addon] --skip-postinstall` | + +### `remove` + +Deletes a Storybook addon from your project. Read more in the [addon installation guide](../addons/install-addons.md#removing-addons). + +```shell +storybook remove [addon] [options] +``` + +Options include: + +| Option | Description | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `--package-manager` | Sets the package manager to use when removing the addon.
Available package managers include `npm`, `yarn`, and `pnpm`
`storybook remove [addon]--package-manager pnpm` | + +### `upgrade` + +Upgrades your Storybook instance to the latest version. Read more in the [upgrade guide](../configure/upgrading.md). + +```shell +storybook upgrade [options] +``` + +Options include: + +| Option | Description | +| -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `-c`, `--config-dir` | Directory where to load Storybook configurations from
`storybook upgrade --config-dir .storybook` | +| `-n`, `--dry-run` | Checks for version upgrades without installing them
`storybook upgrade --dry-run` | +| `-s`, `--skip-check` | Skips the migration check step during the upgrade process
`storybook upgrade --skip-check` | +| `-y`, `--yes` | Skips interactive prompts and automatically upgrades Storybook to the latest version
`storybook upgrade --yes` | +| `--package-manager` | Sets the package manager to use when installing the addon.
Available package managers include `npm`, `yarn`, and `pnpm`
`storybook upgrade --package-manager pnpm` | + +### `doctor` + +Performs a health check on your Storybook project for common issues (e.g., duplicate dependencies, incompatible addons or mismatched versions) and provides suggestions on how to fix them. Applicable when [upgrading](../configure/upgrading.md#verifying-the-upgrade) Storybook versions. + +```shell +storybook doctor [options] +``` + +Options include: + +| Option | Description | +| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `-c`, `--config-dir` | Directory where to load Storybook configurations from
`storybook doctor --config-dir .storybook` | +| `--package-manager` | Sets the package manager to use when running the health check.
Available package managers include `npm`, `yarn`, and `pnpm`
`storybook doctor --package-manager pnpm` | + +### `info` + +Reports useful debugging information about your environment. Helpful in providing information when opening an issue or a discussion. + +```shell +storybook info +``` + +Example output: + +```shell +Storybook Environment Info: + + System: + OS: macOS 14.2 + CPU: (8) arm64 Apple M3 + Shell: 5.9 - /bin/zsh + Binaries: + Node: 18.19.0 - ~/.nvm/versions/node/v18.19.0/bin/node + npm: 10.2.3 - ~/.nvm/versions/node/v18.19.0/bin/npm <----- active + Browsers: + Chrome: 120.0.6099.199 + npmPackages: + @storybook/addon-essentials: ^7.6.6 => 7.6.6 + @storybook/addon-interactions: ^7.6.6 => 7.6.6 + @storybook/addon-links: ^7.6.6 => 7.6.6 + @storybook/addon-onboarding: ^1.0.10 => 1.0.10 + @storybook/blocks: ^7.6.6 => 7.6.6 + @storybook/preset-create-react-app: ^7.6.6 => 7.6.6 + @storybook/react: ^7.6.6 => 7.6.6 + @storybook/react-webpack5: ^7.6.6 => 7.6.6 + @storybook/test: ^7.6.6 => 7.6.6 + storybook: ^7.6.6 => 7.6.6 + npmGlobalPackages: + chromatic: ^10.2.0 => 10.2.0 +``` + +### `sandbox` + +Generates a local sandbox project for testing Storybook features based on the list of supported [frameworks](../configure/frameworks.md). Useful for reproducing bugs when opening an issue or a discussion. + +```shell +storybook sandbox [framework-filter] [options] +``` + + + +The `framework-filter` argument is optional and can filter the list of available frameworks. For example, `storybook sandbox react` will only show React-based sandboxes. + + + +Options include: + +| Option | Description | +| --------------------------- | ---------------------------------------------------------------------------------------------------- | +| `-o`, `--output [dir-name]` | Configures the location of the sandbox project
`storybook sandbox --output /my-sandbox-project` | +| `--no-init` | Generates a sandbox project without without initializing Storybook
`storybook sandbox --no-init` | + + -If you're using npm instead of yarn to publish Storybook, the commands work slightly different. For example, `npm run storybook build -- -o ./path/to/build`. +If you're looking for a hosted version of the available sandboxes, see [storybook.new](https://storybook.new). diff --git a/docs/api/csf.md b/docs/api/csf.md index d5ed3eb7ec40..1ef89f2e4605 100644 --- a/docs/api/csf.md +++ b/docs/api/csf.md @@ -108,8 +108,6 @@ Consider Storybook’s ["Button" example](../writing-stories/index.md#defining-s paths={[ 'react/button-story-click-handler.js.mdx', 'react/button-story-click-handler.ts.mdx', - 'vue/button-story-click-handler.2.js.mdx', - 'vue/button-story-click-handler.2.ts.mdx', 'vue/button-story-click-handler.3.js.mdx', 'vue/button-story-click-handler.3.ts.mdx', 'svelte/button-story-click-handler.js.mdx', @@ -134,8 +132,6 @@ Now consider the same example, re-written with args: paths={[ 'react/button-story-click-handler-args.js.mdx', 'react/button-story-click-handler-args.ts.mdx', - 'vue/button-story-click-handler-args.2.js.mdx', - 'vue/button-story-click-handler-args.2.ts.mdx', 'vue/button-story-click-handler-args.3.js.mdx', 'vue/button-story-click-handler-args.3.ts.mdx', 'angular/button-story-click-handler-args.ts.mdx', @@ -318,8 +314,6 @@ In CSF 2, the named exports are always functions that instantiate a component, a paths={[ 'react/csf-2-example-starter.js.mdx', 'react/csf-2-example-starter.ts.mdx', - 'vue/csf-2-example-starter.2.js.mdx', - 'vue/csf-2-example-starter.2.ts.mdx', 'vue/csf-2-example-starter.3.js.mdx', 'vue/csf-2-example-starter.3.ts.mdx', 'angular/csf-2-example-starter.ts.mdx', @@ -404,8 +398,6 @@ Let's start with a simple CSF 2 story function: paths={[ 'react/csf-2-example-story.js.mdx', 'react/csf-2-example-story.ts.mdx', - 'vue/csf-2-example-story.2.js.mdx', - 'vue/csf-2-example-story.2.ts.mdx', 'vue/csf-2-example-story.3.js.mdx', 'vue/csf-2-example-story.3.ts.mdx', 'angular/csf-2-example-story.ts.mdx', @@ -428,8 +420,6 @@ Now, let's rewrite it as a story object in CSF 3 with an explicit `render` funct paths={[ 'react/csf-3-example-render.js.mdx', 'react/csf-3-example-render.ts.mdx', - 'vue/csf-3-example-render.2.js.mdx', - 'vue/csf-3-example-render.2.ts.mdx', 'vue/csf-3-example-render.3.js.mdx', 'vue/csf-3-example-render.3.ts.mdx', 'angular/csf-3-example-render.ts.mdx', diff --git a/docs/builders/vite.md b/docs/builders/vite.md index e8d722777e7d..69bd64d147a3 100644 --- a/docs/builders/vite.md +++ b/docs/builders/vite.md @@ -114,7 +114,7 @@ If you need to override it, you can use the `viteFinal` function and adjust it. ### ArgTypes are not generated automatically -Currently, [automatic argType inference](../api/arg-types.md#automatic-argtype-inference) is only available for React, Vue3 and Svelte (JSDocs only). With React, the Vite builder defaults to `react-docgen-typescript` if TypeScript is listed as a dependency. If you run into any issues, you can revert to `react-docgen` by updating your Storybook configuration file as follows: +Currently, [automatic argType inference](../api/arg-types.md#automatic-argtype-inference) is only available for React, Vue 3 and Svelte (JSDocs only). With React, the Vite builder defaults to `react-docgen-typescript` if TypeScript is listed as a dependency. If you run into any issues, you can revert to `react-docgen` by updating your Storybook configuration file as follows: diff --git a/docs/configure/frameworks-feature-support.md b/docs/configure/frameworks-feature-support.md index 498d984cabec..912ee32eb207 100644 --- a/docs/configure/frameworks-feature-support.md +++ b/docs/configure/frameworks-feature-support.md @@ -10,51 +10,51 @@ Below is a comprehensive table of what’s supported in which framework integrat Core frameworks have dedicated maintainers or contributors who are responsible for maintaining the integration. As such, you can use most Storybook features in these frameworks. -| | React | Vue | Angular | Web Components | -| ----------------------------------------------------------------------------------------- | ----- | --- | ------- | -------------- | -| **Essentials** | | | | | -| [Actions](../essentials/actions.md) | ✅ | ✅ | ✅ | ✅ | -| [Backgrounds](../essentials/backgrounds.md) | ✅ | ✅ | ✅ | ✅ | -| [Docs](../writing-docs/index.md) | ✅ | ✅ | ✅ | ✅ | -| [Viewport](../essentials/viewport.md) | ✅ | ✅ | ✅ | ✅ | -| [Controls](../essentials/controls.md) | ✅ | ✅ | ✅ | ✅ | -| [Measure](../essentials/measure-and-outline.md#measure-addon) | ✅ | ✅ | ✅ | ✅ | -| [Outline](../essentials/measure-and-outline.md#outline-addon) | ✅ | ✅ | ✅ | ✅ | -| **Addons** | | | | | -| [A11y](../writing-tests/accessibility-testing.md) | ✅ | ✅ | ✅ | ✅ | -| [Interactions](../writing-tests/interaction-testing.md) | ✅ | ✅ | ✅ | ✅ | -| [Test runner](../writing-tests/test-runner.md) | ✅ | ✅ | ✅ | ✅ | -| [Test coverage](../writing-tests/test-coverage.md) | ✅ | ✅ | ✅ | ✅ | -| [CSS resources](https://github.com/storybookjs/addon-cssresources) | ✅ | ✅ | ✅ | ✅ | -| [Design assets](https://github.com/storybookjs/addon-design-assets) | ✅ | ✅ | ✅ | ✅ | -| [Events](https://github.com/storybookjs/addon-events) | ✅ | ✅ | ✅ | ✅ | -| [Google analytics](https://github.com/storybookjs/addon-google-analytics) | ✅ | ✅ | ✅ | ✅ | -| [GraphQL](https://github.com/storybookjs/addon-graphql) | ✅ | | ✅ | | -| [Jest](https://github.com/storybookjs/storybook/tree/next/code/addons/jest) | ✅ | ✅ | ✅ | ✅ | -| [Links](https://github.com/storybookjs/storybook/tree/next/code/addons/links) | ✅ | ✅ | ✅ | ✅ | -| [Queryparams](https://github.com/storybookjs/addon-queryparams) | ✅ | ✅ | ✅ | ✅ | -| [Storysource](https://github.com/storybookjs/storybook/tree/next/code/addons/storysource) | ✅ | ✅ | ✅ | ✅ | -| **Docs** | | | | | -| [CSF Stories](../api/csf.md) | ✅ | ✅ | ✅ | ✅ | -| [Autodocs](../writing-docs/autodocs.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - ArgTypes](../api/doc-block-argtypes.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Canvas](../api/doc-block-canvas.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - ColorPalette](../api/doc-block-colorpalette.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Controls](../api/doc-block-controls.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Description](../api/doc-block-description.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - IconGallery](../api/doc-block-icongallery.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Markdown](../api/doc-block-markdown.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Meta](../api/doc-block-meta.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Primary](../api/doc-block-primary.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Source](../api/doc-block-source.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Story](../api/doc-block-story.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Stories](../api/doc-block-stories.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Subtitle](../api/doc-block-subtitle.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Title](../api/doc-block-title.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Typeset](../api/doc-block-typeset.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - Unstyled](../api/doc-block-unstyled.md) | ✅ | ✅ | ✅ | ✅ | -| [Doc Blocks - UseOf](../api/doc-block-useof.md) | ✅ | ✅ | ✅ | ✅ | -| Inline stories | ✅ | ✅ | ✅ | ✅ | +| | React | Vue 3 | Angular | Web Components | +| ----------------------------------------------------------------------------------------- | ----- | ----- | ------- | -------------- | +| **Essentials** | | | | | +| [Actions](../essentials/actions.md) | ✅ | ✅ | ✅ | ✅ | +| [Backgrounds](../essentials/backgrounds.md) | ✅ | ✅ | ✅ | ✅ | +| [Docs](../writing-docs/index.md) | ✅ | ✅ | ✅ | ✅ | +| [Viewport](../essentials/viewport.md) | ✅ | ✅ | ✅ | ✅ | +| [Controls](../essentials/controls.md) | ✅ | ✅ | ✅ | ✅ | +| [Measure](../essentials/measure-and-outline.md#measure-addon) | ✅ | ✅ | ✅ | ✅ | +| [Outline](../essentials/measure-and-outline.md#outline-addon) | ✅ | ✅ | ✅ | ✅ | +| **Addons** | | | | | +| [A11y](../writing-tests/accessibility-testing.md) | ✅ | ✅ | ✅ | ✅ | +| [Interactions](../writing-tests/interaction-testing.md) | ✅ | ✅ | ✅ | ✅ | +| [Test runner](../writing-tests/test-runner.md) | ✅ | ✅ | ✅ | ✅ | +| [Test coverage](../writing-tests/test-coverage.md) | ✅ | ✅ | ✅ | ✅ | +| [CSS resources](https://github.com/storybookjs/addon-cssresources) | ✅ | ✅ | ✅ | ✅ | +| [Design assets](https://github.com/storybookjs/addon-design-assets) | ✅ | ✅ | ✅ | ✅ | +| [Events](https://github.com/storybookjs/addon-events) | ✅ | ✅ | ✅ | ✅ | +| [Google analytics](https://github.com/storybookjs/addon-google-analytics) | ✅ | ✅ | ✅ | ✅ | +| [GraphQL](https://github.com/storybookjs/addon-graphql) | ✅ | | ✅ | | +| [Jest](https://github.com/storybookjs/storybook/tree/next/code/addons/jest) | ✅ | ✅ | ✅ | ✅ | +| [Links](https://github.com/storybookjs/storybook/tree/next/code/addons/links) | ✅ | ✅ | ✅ | ✅ | +| [Queryparams](https://github.com/storybookjs/addon-queryparams) | ✅ | ✅ | ✅ | ✅ | +| [Storysource](https://github.com/storybookjs/storybook/tree/next/code/addons/storysource) | ✅ | ✅ | ✅ | ✅ | +| **Docs** | | | | | +| [CSF Stories](../api/csf.md) | ✅ | ✅ | ✅ | ✅ | +| [Autodocs](../writing-docs/autodocs.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - ArgTypes](../api/doc-block-argtypes.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Canvas](../api/doc-block-canvas.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - ColorPalette](../api/doc-block-colorpalette.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Controls](../api/doc-block-controls.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Description](../api/doc-block-description.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - IconGallery](../api/doc-block-icongallery.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Markdown](../api/doc-block-markdown.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Meta](../api/doc-block-meta.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Primary](../api/doc-block-primary.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Source](../api/doc-block-source.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Story](../api/doc-block-story.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Stories](../api/doc-block-stories.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Subtitle](../api/doc-block-subtitle.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Title](../api/doc-block-title.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Typeset](../api/doc-block-typeset.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - Unstyled](../api/doc-block-unstyled.md) | ✅ | ✅ | ✅ | ✅ | +| [Doc Blocks - UseOf](../api/doc-block-useof.md) | ✅ | ✅ | ✅ | ✅ | +| Inline stories | ✅ | ✅ | ✅ | ✅ | ## Community frameworks diff --git a/docs/configure/frameworks.md b/docs/configure/frameworks.md index 6c38d3f7abc3..67191e8d2311 100644 --- a/docs/configure/frameworks.md +++ b/docs/configure/frameworks.md @@ -12,10 +12,10 @@ You start by [installing](../get-started/install.md) Storybook into an existing Storybook provides support for the leading industry builders and frameworks. However, that doesn't mean you can't use Storybook with other frameworks. Below is a list of currently supported frameworks divided by their builders. -| Builder | Framework | -| ------- | ------------------------------------------------------------------------ | -| Webpack | React, Angular, Vue, Web Components, NextJS, HTML, Ember, Preact, Svelte | -| Vite | React, Vue, Web Components, HTML, Svelte, SvelteKit, Qwik, Solid | +| Builder | Framework | +| ------- | -------------------------------------------------------------------------- | +| Webpack | React, Angular, Vue 3, Web Components, NextJS, HTML, Ember, Preact, Svelte | +| Vite | React, Vue 3, Web Components, HTML, Svelte, SvelteKit, Qwik, Solid | ### What about feature support? diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md index 3ff5ad2f899d..77ffed4231db 100644 --- a/docs/configure/images-and-assets.md +++ b/docs/configure/images-and-assets.md @@ -16,8 +16,6 @@ Afterward, you can use any asset in your stories: paths={[ 'react/component-story-static-asset-with-import.js.mdx', 'react/component-story-static-asset-with-import.ts.mdx', - 'vue/component-story-static-asset-with-import.2.js.mdx', - 'vue/component-story-static-asset-with-import.2.ts.mdx', 'vue/component-story-static-asset-with-import.3.js.mdx', 'vue/component-story-static-asset-with-import.3.ts.mdx', 'angular/component-story-static-asset-with-import.ts.mdx', diff --git a/docs/configure/telemetry.md b/docs/configure/telemetry.md index 859d339a7fb0..ff3298ac86fd 100644 --- a/docs/configure/telemetry.md +++ b/docs/configure/telemetry.md @@ -8,7 +8,7 @@ Storybook collects completely anonymous data to help us improve user experience. Hundreds of thousands of developers use Storybook daily to build, test, and document components. Storybook is framework agnostic and integrates with the front-end ecosystem: -- **JavaScript frameworks** such as [React](https://reactjs.org/), [Vue](https://vuejs.org/), [Svelte](https://svelte.dev/) and [Solid](https://www.solidjs.com/) +- **JavaScript frameworks** such as [React](https://reactjs.org/), [Vue 3](https://vuejs.org/), [Svelte](https://svelte.dev/) and [Solid](https://www.solidjs.com/) - **Libraries** such as [Styled-Components](https://styled-components.com/), [Tailwind](https://tailwindcss.com/), [Redux](https://redux.js.org/) - **Design tools** such as [Figma](https://figma.com/), [Sketch](https://www.sketch.com/), [Zeplin](https://zeplin.io/) and [InVision](https://www.invisionapp.com/) - **Workflow tools** such as [Notion](https://www.notion.so/product), [Confluence](https://www.atlassian.com/software/confluence), and [Jira](https://www.atlassian.com/software/jira) @@ -31,7 +31,7 @@ Specifically, we track the following information in our telemetry events: - Storybook version. - Storybook metadata: - Language (e.g., TypeScript, JavaScript). - - Supported view layers (e.g., React, Vue, Angular, Svelte). + - Supported view layers (e.g., React, Vue 3, Angular, Svelte). - Builder (e.g., Webpack5, Vite). - Meta framework (e.g., [Next](https://nextjs.org/), [Gatsby](https://www.gatsbyjs.com/), [CRA](https://create-react-app.dev/)). - [Addons](https://storybook.js.org/integrations) (e.g., [Essentials](../essentials/index.md), [Accessibility](https://storybook.js.org/addons/@storybook/addon-a11y/)). diff --git a/docs/configure/upgrading.md b/docs/configure/upgrading.md index c5e57d8d714e..23f10948b218 100644 --- a/docs/configure/upgrading.md +++ b/docs/configure/upgrading.md @@ -16,13 +16,13 @@ To help ease the pain of keeping Storybook up-to-date, we provide a command-line paths={[ 'common/storybook-upgrade.npm.js.mdx', 'common/storybook-upgrade.pnpm.js.mdx', - 'common/storybook-upgrade.yarn.js.mdx' + 'common/storybook-upgrade.yarn.js.mdx', ]} /> -After running the command the script will: +After running the command, the script will: - Upgrade all Storybook packages in your project to the latest stable version - Run the relevant [automigrations](../migration-guide.md#automatic-upgrade) factoring in the [breaking changes](../migration-guide.md#major-breaking-changes) between your current version and the latest stable version @@ -33,9 +33,25 @@ In addition to running the command, we also recommend checking the [MIGRATION.md +### Verifying the upgrade + +To help you verify that the upgrade was completed and that your project is still working as expected, the Storybook CLI provides the [`doctor`](../api/cli-options.md#doctor) command that allows you to do a health check on your project for common issues that might arise after an upgrade, such as duplicated dependencies, incompatible addons or mismatched versions. To perform the health check, run the following command with your package manager of choice: + + + + + + + ## Automigrate script -Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example, lots of frameworks ([Angular 12](https://angular.io/guide/updating-to-version-12#breaking-changes-in-angular-version-12), [Create React App v5](https://github.com/facebook/create-react-app/pull/11201), [NextJS](https://nextjs.org/docs/upgrading#webpack-5)) have recently migrated from [Webpack 4 to Webpack 5](https://webpack.js.org/migrate/5/), so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for: +Storybook upgrades are not the only thing to consider: changes in the ecosystem also present challenges. For example well-known frontend frameworks, such as [Angular](https://update.angular.io/?l=2&v=16.0-17.0), [Next.js](https://nextjs.org/docs/pages/building-your-application/upgrading) or [Svelte](https://svelte.dev/docs/v4-migration-guide) have been rolling out significant changes to their ecosystem, so even if you don't upgrade your Storybook version, you might need to update your configuration accordingly. That's what Automigrate is for: @@ -43,7 +59,7 @@ Storybook upgrades are not the only thing to consider: changes in the ecosystem paths={[ 'common/storybook-automigrate.npm.js.mdx', 'common/storybook-automigrate.pnpm.js.mdx', - 'common/storybook-automigrate.yarn.js.mdx' + 'common/storybook-automigrate.yarn.js.mdx', ]} /> @@ -76,3 +92,25 @@ If you'd like to downgrade to a stable version, manually edit the package versio Storybook collects completely anonymous data to help us improve user experience. Participation is optional, and you may [opt-out](../configure/telemetry.md#how-to-opt-out) if you'd not like to share any information. + + + +## Troubleshooting + +### Storybook doesn't upgrade to the latest version when using Vue 2 + +If you're attempting to upgrade Storybook to the latest version in your existing Vue 2 project, you will no longer be able to. This is because Vue 2 entered [End of Life](https://v2.vuejs.org/lts/) (EOL) on December 31st, 2023, and will no longer receive any updates from the Vue team. We recommend you upgrade your Vue 2 project to Vue 3 and then upgrade Storybook to the latest version. If you cannot upgrade your Vue 2 project to Vue 3, you can still upgrade Storybook, but only for the latest 7.x version. You can do this by running the following command: + + + + + + + + diff --git a/docs/contribute/code.md b/docs/contribute/code.md index b9d246e2119a..5e8d229ae582 100644 --- a/docs/contribute/code.md +++ b/docs/contribute/code.md @@ -108,7 +108,7 @@ Adding a story or set of generic stories to our suite helps you test your work. Assuming you're working on one of the [Essential addons](../essentials/index.md), there's a chance that a complete set of stories already exists. Check the addon's `template/stories` directory that documents how it's supposed to work and add your stories there. -If you're modifying something related to a specific renderer (e.g., React, Vue, etc.), it will also have a similar `template/stories` directory in which you'll need to add your stories. +If you're modifying something related to a specific renderer (e.g., React, Vue 3, etc.), it will also have a similar `template/stories` directory in which you'll need to add your stories. ### Add tests diff --git a/docs/contribute/framework.md b/docs/contribute/framework.md index f72a7eae9500..825b2f451d12 100644 --- a/docs/contribute/framework.md +++ b/docs/contribute/framework.md @@ -2,7 +2,7 @@ title: 'Contributing a Storybook framework' --- -A Storybook framework is a node package that enables out-of-the-box support for either a metaframework (Next.js, NuxtJS, SvelteKit) or a combination of [builder](../builders/index.md) (Webpack, Vite) plus renderer (React, Angular, Vue, web components, etc). +A Storybook framework is a node package that enables out-of-the-box support for either a metaframework (Next.js, NuxtJS, SvelteKit) or a combination of [builder](../builders/index.md) (Webpack, Vite) plus renderer (React, Angular, Vue 3, web components, etc). For metaframeworks, the Storybook framework also takes care of additional configuration necessary to make Storybook behave similarly to apps generated by the metaframework. For example, `@storybook/nextjs` [recreates or mocks a number of features of Next.js apps](https://github.com/storybookjs/storybook/blob/next/code/frameworks/nextjs/README.md#supported-features) inside Storybook. diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md index ca07ff4bfa79..5bc09d844ab4 100644 --- a/docs/contribute/new-snippets.md +++ b/docs/contribute/new-snippets.md @@ -10,7 +10,7 @@ Storybook maintains code snippets for a [variety of frameworks](../configure/fra We welcome community contributions to the code snippets. Here's a matrix of the frameworks we have snippets for. Help us add snippets for your favorite framework. -| React | Vue | Angular | Web Components | Svelte | Solid | Ember | HTML | Preact | +| React | Vue 3 | Angular | Web Components | Svelte | Solid | Ember | HTML | Preact | | ---------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | ----- | ---- | ------ | | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/react) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/vue) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/angular) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/web-components) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/svelte) | [✅](https://github.com/storybookjs/storybook/tree/next/docs/snippets/solid) | ❌ | ❌ | ❌ | @@ -48,7 +48,6 @@ Browse the documentation and look for the code snippets you're willing to contri 'react/your-component.js.mdx', 'react/your-component.ts.mdx', 'angular/your-component.ts.mdx', - 'vue/your-component.2.js.mdx', 'vue/your-component.3.js.mdx', 'svelte/your-component.js.mdx', 'web-components/your-component.js.mdx', @@ -72,7 +71,6 @@ Create the file `ember/your-component.js.mdx`, similar to the other frameworks, 'react/your-component.js.mdx', 'react/your-component.ts.mdx', 'angular/your-component.ts.mdx', - 'vue/your-component.2.js.mdx', 'vue/your-component.3.js.mdx', 'svelte/your-component.js.mdx', 'web-components/your-component.js.mdx', diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md index fcd5ea7f6333..67b65cb7f51e 100644 --- a/docs/essentials/controls.md +++ b/docs/essentials/controls.md @@ -195,8 +195,6 @@ Until now, we only used auto-generated controls based on the component for which paths={[ 'react/page-story-slots.js.mdx', 'react/page-story-slots.ts.mdx', - 'vue/page-story-slots.2.js.mdx', - 'vue/page-story-slots.2.ts.mdx', 'vue/page-story-slots.3.js.mdx', 'vue/page-story-slots.3.ts.mdx', 'angular/page-story-slots.ts.mdx', diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md index b601ad531c7e..a5aa4082a6f9 100644 --- a/docs/essentials/viewport.md +++ b/docs/essentials/viewport.md @@ -176,9 +176,9 @@ Update your story through [parameters](../writing-stories/parameters.md) to incl ### Keyboard shortcuts -- Previous viewport: shift + v -- Next viewport: v -- Reset viewport: alt + v +- Previous viewport: alt + shift + v +- Next viewport: alt + v +- Reset viewport: alt + control + v If you need, you can edit them on the shortcuts page. diff --git a/docs/faq.md b/docs/faq.md index 55840449c2fa..50ebca8baaf5 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -19,9 +19,9 @@ Here are some answers to frequently asked questions. If you have a question, you - [Is it possible to browse the documentation for past versions of Storybook?](#is-it-possible-to-browse-the-documentation-for-past-versions-of-storybook) - [What icons are available for my toolbar or my addon?](#what-icons-are-available-for-my-toolbar-or-my-addon) - [I see a "No Preview" error with a Storybook production build](#i-see-a-no-preview-error-with-a-storybook-production-build) -- [Can I use Storybook with Vue 3?](#can-i-use-storybook-with-vue-3) +- [Can I use Storybook with Vue 2?](#can-i-use-storybook-with-vue-2) - [Why aren't my code blocks highlighted with Storybook MDX](#why-arent-my-code-blocks-highlighted-with-storybook-mdx) -- [Why aren't my MDX 2 stories working in Storybook?](#why-arent-my-mdx-2-stories-working-in-storybook) +- [Why aren't my MDX stories working in Storybook?](#why-arent-my-mdx-stories-working-in-storybook) - [Why are my mocked GraphQL queries failing with Storybook's MSW addon?](#why-are-my-mocked-graphql-queries-failing-with-storybooks-msw-addon) - [Can I use other GraphQL providers with Storybook's MSW addon?](#can-i-use-other-graphql-providers-with-storybooks-msw-addon) - [Can I mock GraphQL mutations with Storybook's MSW addon?](#can-i-mock-graphql-mutations-with-storybooks-msw-addon) @@ -363,17 +363,29 @@ Suppose you don't want to run the command above frequently. Add `http-server` as -## Can I use Storybook with Vue 3? +## Can I use Storybook with Vue 2? -Yes, with the release of version 6.2, Storybook now includes support for Vue 3. See the [install page](./get-started/install.md) for instructions. +Vue 2 entered [End of Life](https://v2.vuejs.org/lts/) (EOL) on December 31, 2023, and is no longer supported by the Vue team. As a result, we've stopped supporting Vue 2 in Storybook 8 and above and will not be releasing any new versions that support it. We recommend upgrading your project to Vue 3, which Storybook fully supports. If that's not an option, you can still use Storybook with Vue 2 by installing the latest version of Storybook 7 with the following command: + + + + + + ## Why aren't my code blocks highlighted with Storybook MDX Out of the box, Storybook provides syntax highlighting for a set of languages (e.g., Javascript, Markdown, CSS, HTML, Typescript, GraphQL) you can use with your code blocks. Currently, there's a known limitation when you try and register a custom language to get syntax highlighting. We're working on a fix for this And will update this section once it's available. -## Why aren't my MDX 2 stories working in Storybook? +## Why aren't my MDX stories working in Storybook? -MDX 2 introduced some changes to how the code is rendered. For example, if you enabled it in your Storybook and you have the following code block: +MDX can be picky about how your code is formatted with line breaks. This is especially true with code blocks. For example, this will break: ```