diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index 4381e3ec634f..9f0afe1f6501 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,14 @@ +## 8.4.0-alpha.8 + +- Addon-Test: Support for `@vitest/browser` v2.1.2 - [#29407](https://github.com/storybookjs/storybook/pull/29407), thanks @strozw! +- ConfigFile: Fix `export { X }` parsing - [#29344](https://github.com/storybookjs/storybook/pull/29344), thanks @vctqs1! +- Core: Fix building Storybook deleting project root files - [#29371](https://github.com/storybookjs/storybook/pull/29371), thanks @JReinhold! +- Interactions: Escape xml of interactions errors - [#29414](https://github.com/storybookjs/storybook/pull/29414), thanks @kasperpeulen! +- Svelte: Add v5 stories to CLI templates - [#29382](https://github.com/storybookjs/storybook/pull/29382), thanks @JReinhold! +- Test: Remove unused `util` dependency - [#29310](https://github.com/storybookjs/storybook/pull/29310), thanks @JReinhold! +- UI: Fix RefIndicator to use CheckIcon instead of string - [#29209](https://github.com/storybookjs/storybook/pull/29209), thanks @JSMike! +- UI: Simple tag filtering - [#29333](https://github.com/storybookjs/storybook/pull/29333), thanks @shilman! + ## 8.4.0-alpha.7 - CLI: Install Svelte CSF v5 in Svelte5 projects - [#29323](https://github.com/storybookjs/storybook/pull/29323), thanks @shilman! diff --git a/README.md b/README.md index e6585e83a094..5a49d36e82d7 100644 --- a/README.md +++ b/README.md @@ -86,7 +86,7 @@ View [Component Encyclopedia](https://storybook.js.org/showcase) to see how lead Use [storybook.new](https://storybook.new) to quickly create an example project in Stackblitz. -Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile. +Storybook comes with a lot of [addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile. ### Community @@ -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 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/) | +| [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) | @@ -132,7 +132,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/ | [storysource](code/addons/storysource/) | View the code of your stories within the Storybook UI | | [viewport](code/addons/viewport/) | Change display sizes and layouts for responsive components using Storybook | -See [Addon / Framework Support Table](https://storybook.js.org/docs/react/api/frameworks-feature-support) +See [Addon / Framework Support Table](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) To continue improving your experience, we have to eventually deprecate or remove certain addons in favor of new and better tools. @@ -237,7 +237,6 @@ By making a recurring donation, you can support us and our work. \[[Become a bac - ## License [MIT](https://github.com/storybookjs/storybook/blob/main/LICENSE) diff --git a/code/addons/a11y/README.md b/code/addons/a11y/README.md index a6c984d21f65..2bc3f201106d 100755 --- a/code/addons/a11y/README.md +++ b/code/addons/a11y/README.md @@ -2,7 +2,7 @@ This Storybook addon can be helpful to make your UI components more accessible. -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/a11y/docs/screenshot.png) diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 9929da5ad4c5..9b6a1c9e8f66 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/README.md b/code/addons/actions/README.md index a24f0e7052a2..60cfb587eadf 100644 --- a/code/addons/actions/README.md +++ b/code/addons/actions/README.md @@ -2,19 +2,19 @@ Storybook Addon Actions can be used to display data received by event handlers in [Storybook](https://storybook.js.org). -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/actions/docs/screenshot.png) ## Installation -Actions is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Actions is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-actions ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project): ```js export default { diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 2ba921c82226..f6cf41c75fec 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/README.md b/code/addons/backgrounds/README.md index a720847d4bf0..44fc45fb825a 100644 --- a/code/addons/backgrounds/README.md +++ b/code/addons/backgrounds/README.md @@ -2,13 +2,13 @@ Storybook Addon Backgrounds can be used to change background colors inside the preview in [Storybook](https://storybook.js.org). -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) ![React Storybook Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/backgrounds/docs/addon-backgrounds.gif) ## Installation -Backgrounds is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Backgrounds is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-backgrounds @@ -16,7 +16,7 @@ npm i -D @storybook/addon-backgrounds ## Configuration -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project): ```js export default { diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index a0fe70724301..4e87608a8941 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/README.md b/code/addons/controls/README.md index b3c097e53eeb..e368a598e828 100644 --- a/code/addons/controls/README.md +++ b/code/addons/controls/README.md @@ -2,19 +2,19 @@ [Storybook](https://storybook.js.org) Controls gives you a graphical UI to interact with a component's arguments dynamically, without needing to code. It creates an addon panel next to your component examples ("stories"), so you can edit them live. -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/controls/docs/media/addon-controls-hero.gif) ## Installation -Controls is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Controls is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-controls ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project): ```js export default { @@ -123,7 +123,7 @@ Reflow.argTypes = { There are a few known cases where controls can't be auto-generated: -- You're using a framework for which automatic generation [isn't supported](https://storybook.js.org/docs/react/api/frameworks-feature-support) +- You're using a framework for which automatic generation [isn't supported](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) - You're trying to generate controls for a component defined in an external library With a little manual work you can still use controls in such cases. Consider the following example: @@ -172,7 +172,7 @@ CustomControls.argTypes = { }; ``` -Like [story parameters](https://storybook.js.org/docs/react/writing-stories/parameters), `args` and `argTypes` annotations are hierarchically merged, so story-level annotations overwrite component-level annotations. +Like [story parameters](https://storybook.js.org/docs/writing-stories/parameters), `args` and `argTypes` annotations are hierarchically merged, so story-level annotations overwrite component-level annotations. ### How do controls work with MDX? diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 7f9d214c61f9..0de3b1b43b66 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/README.md b/code/addons/docs/README.md index 216893fb7070..9bd82c63de9c 100644 --- a/code/addons/docs/README.md +++ b/code/addons/docs/README.md @@ -76,7 +76,7 @@ For more information on `MDX`, see the [`MDX` reference](https://github.com/stor Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. The following page captures the current state of support: -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) **Note:** `#` = WIP support @@ -139,11 +139,11 @@ export default { `csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`. -> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/react/api/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation. +> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/api/doc-blocks/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation. ## TypeScript configuration -As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md). +As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/configure/integration/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md). ## More resources diff --git a/code/addons/docs/docs/docspage.md b/code/addons/docs/docs/docspage.md index 26f75811de5b..3fd4aef3c11c 100644 --- a/code/addons/docs/docs/docspage.md +++ b/code/addons/docs/docs/docspage.md @@ -34,7 +34,7 @@ However, `DocsPage` brings the following improvements: Storybook uses `component` to extract the component's description and props, and will rely on it further in future releases. We encourage you to add it to existing stories and use it in all new stories. -Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/react/api/csf): +Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/api/csf): ```js import { Badge } from './Badge'; diff --git a/code/addons/docs/docs/mdx.md b/code/addons/docs/docs/mdx.md index 3f251fd9a9e5..735be0164b8f 100644 --- a/code/addons/docs/docs/mdx.md +++ b/code/addons/docs/docs/mdx.md @@ -149,7 +149,7 @@ You can also use the rest of the MDX features in conjunction with embedding. Tha ## Decorators and parameters -To add [decorators](https://storybook.js.org/docs/react/writing-stories/decorators) and [parameters](https://storybook.js.org/docs/react/writing-stories/parameters) in MDX: +To add [decorators](https://storybook.js.org/docs/writing-stories/decorators) and [parameters](https://storybook.js.org/docs/writing-stories/parameters) in MDX: ```md -These controls are implemented to appear automatically in the props table when your story accepts [Storybook Args](https://storybook.js.org/docs/react/api/csf#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`. +These controls are implemented to appear automatically in the props table when your story accepts [Storybook Args](https://storybook.js.org/docs/api/csf#args-story-inputs) as its input. This is done slightly differently depending on whether you're using `DocsPage` or `MDX`. **DocsPage.** In [DocsPage](./docspage.md), simply write your story to consume args and the auto-generated props table will display controls in the right-most column: @@ -200,7 +200,7 @@ Here are the possible customizations for the rest of the prop table: | `table.type.detail` | A longer version of the type (if it's a complex type) | | `table.defaultValue.summary` | A short version of the default value | | `table.defaultValue.detail` | A longer version of the default value (if it's a complex value) | -| `control` | See [`addon-controls` README](https://storybook.js.org/docs/essentials/controls#configuration) | +| `control` | See [`addon-controls` README](https://storybook.js.org/docs/essentials/controls#configuration) | ## Reporting a bug diff --git a/code/addons/docs/docs/recipes.md b/code/addons/docs/docs/recipes.md index e760a61e08f4..d27c4fc851d9 100644 --- a/code/addons/docs/docs/recipes.md +++ b/code/addons/docs/docs/recipes.md @@ -282,7 +282,7 @@ These two methods are complementary. The former is useful for story-specific, an What happens if you want to add some wrapper for your MDX page, or add some other kind of React context? -When you're writing stories you can do this by adding a [decorator](https://storybook.js.org/docs/react/writing-stories/decorators), but when you're adding arbitrary JSX to your MDX documentation outside of a `` block, decorators no longer apply, and you need to use the `docs.container` parameter. +When you're writing stories you can do this by adding a [decorator](https://storybook.js.org/docs/writing-stories/decorators), but when you're adding arbitrary JSX to your MDX documentation outside of a `` block, decorators no longer apply, and you need to use the `docs.container` parameter. The closest Docs equivalent of a decorator is the `container`, a wrapper element that is rendered around the page that is being rendered. Here's an example of adding a solid red border around the page. It uses Storybook's default page container (that sets up various contexts and other magic) and then inserts its own logic between that container and the contents of the page: diff --git a/code/addons/docs/docs/theming.md b/code/addons/docs/docs/theming.md index 6c4c8ac13082..f68f55c67c9e 100644 --- a/code/addons/docs/docs/theming.md +++ b/code/addons/docs/docs/theming.md @@ -9,7 +9,7 @@ ## Storybook theming -Storybook theming is the **recommended way** to theme your docs. Docs uses the same theme system as [Storybook UI](https://storybook.js.org/docs/react/configure/theming), but is themed independently from the main UI. +Storybook theming is the **recommended way** to theme your docs. Docs uses the same theme system as [Storybook UI](https://storybook.js.org/docs/configure/user-interface/theming), but is themed independently from the main UI. Supposing you have a Storybook theme defined for the main UI in `.storybook/manager.js`: diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 3ada1b5b2842..8a38c24695e2 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/README.md b/code/addons/essentials/README.md index bdc351de5b74..03c1be091efe 100644 --- a/code/addons/essentials/README.md +++ b/code/addons/essentials/README.md @@ -2,7 +2,7 @@ Storybook Essentials is a curated collection of addons to bring out the best of Storybook. -Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://storybook.js.org/docs/react/api/frameworks-feature-support) for all of the officially supported frameworks. +Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain [framework support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) for all of the officially supported frameworks. ## Contents diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 23b976a6ee16..4ded7ad164f2 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 62fea2facbec..29e9d5f35f37 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/README.md b/code/addons/highlight/README.md index 6f27d1fda606..88ebb9c6ae23 100644 --- a/code/addons/highlight/README.md +++ b/code/addons/highlight/README.md @@ -8,7 +8,7 @@ Use it to call attention to particular parts of the story. Or use it to enhance ## Usage -This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command: +This addon requires Storybook 6.5 or later. Highlight is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run the following command: yarn: diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 2fc94cadf861..6890d6ca8cea 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 8aa79d677ae7..b08b51d492c8 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/src/utils.ts b/code/addons/interactions/src/utils.ts index d80d9f4cdbee..cfdf6724f49d 100644 --- a/code/addons/interactions/src/utils.ts +++ b/code/addons/interactions/src/utils.ts @@ -30,6 +30,7 @@ export function createAnsiToHtmlFilter(theme: StorybookTheme) { return new Filter({ fg: theme.color.defaultText, bg: theme.background.content, + escapeXML: true, }); } diff --git a/code/addons/jest/README.md b/code/addons/jest/README.md index 73b37e6dc21c..16c85d8fe260 100644 --- a/code/addons/jest/README.md +++ b/code/addons/jest/README.md @@ -2,7 +2,7 @@ Storybook addon for inspecting Jest unit test results. -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) [![Storybook Jest Addon Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/jest/docs/storybook-addon-jest.gif)](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel) @@ -20,7 +20,7 @@ Or if you're using yarn as a package manager: ## Configuration -Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): +Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project): ```js export default { @@ -84,7 +84,7 @@ Assuming that you have already created a test file for your component (e.g., `My ### Story-level -In your story file, add a [decorator](https://storybook.js.org/docs/react/writing-stories/decorators) to your story's default export to display the results: +In your story file, add a [decorator](https://storybook.js.org/docs/writing-stories/decorators) to your story's default export to display the results: ```js // MyComponent.stories.js|jsx @@ -99,7 +99,7 @@ export default { }; ``` -You can also add multiple tests results within your story by including the `jest` [parameter](https://storybook.js.org/docs/react/writing-stories/parameters), for example: +You can also add multiple tests results within your story by including the `jest` [parameter](https://storybook.js.org/docs/writing-stories/parameters), for example: ```js // MyComponent.stories.js|jsx @@ -130,7 +130,7 @@ Default.parameters = { ### Global level To avoid importing the results of the tests in each story, you can update -your [`.storybook/preview.js`](https://storybook.js.org/docs/react/configure/#configure-story-rendering) and include a decorator allowing you to display the results only for the stories that have the `jest` parameter defined: +your [`.storybook/preview.js`](https://storybook.js.org/docs/configure#configure-story-rendering) and include a decorator allowing you to display the results only for the stories that have the `jest` parameter defined: ```js // .storybook/preview.js diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 8d3b62b94778..d9011720d703 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/README.md b/code/addons/links/README.md index cc50832328fa..51066f17e69c 100644 --- a/code/addons/links/README.md +++ b/code/addons/links/README.md @@ -2,7 +2,7 @@ The Storybook Links addon can be used to create links that navigate between stories in [Storybook](https://storybook.js.org). -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) ## Getting Started diff --git a/code/addons/links/package.json b/code/addons/links/package.json index 87017f5a5ca5..9ac8330b8664 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "storybook-addons", diff --git a/code/addons/measure/README.md b/code/addons/measure/README.md index 8e280f150124..985e4a72342d 100644 --- a/code/addons/measure/README.md +++ b/code/addons/measure/README.md @@ -12,7 +12,7 @@ Storybook addon for inspecting layouts and visualizing the box model. ## Usage -This addon requires Storybook 6.3 or later. Measure is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +This addon requires Storybook 6.3 or later. Measure is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-measure diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 4ee59d9b1a11..cf234e890006 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index 1866a4c7a23e..dc3a8bc7de74 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/README.md b/code/addons/outline/README.md index e73da501a3f6..6d7dd53b6ef2 100644 --- a/code/addons/outline/README.md +++ b/code/addons/outline/README.md @@ -6,13 +6,13 @@ Storybook Addon Outline can be used for visually debugging CSS layout and alignm ## Usage -Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Requires Storybook 6.1 or later. Outline is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-outline ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project): ```js export default { diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index a77565af1a58..b651b4da5ba8 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/README.md b/code/addons/storysource/README.md index e460cc6ac058..2427d89eb324 100644 --- a/code/addons/storysource/README.md +++ b/code/addons/storysource/README.md @@ -2,7 +2,7 @@ This addon is used to show stories source in the addon panel. -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) ![Storysource Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/storysource/docs/demo.gif) @@ -56,7 +56,7 @@ To customize the `source-loader`, pass `loaderOptions`. Valid configurations are ## Theming -Storysource will automatically use the light or dark syntax theme based on your storybook theme. See [Theming Storybook](https://storybook.js.org/docs/react/configure/theming) for more information. +Storysource will automatically use the light or dark syntax theme based on your storybook theme. See [Theming Storybook](https://storybook.js.org/docs/configure/user-interface/theming) for more information. ![Storysource Light/Dark Themes](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/storysource/docs/theming-light-dark.png) diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index 91686a297644..607818c5f3af 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/test/package.json b/code/addons/test/package.json index 91eda6ad642f..88b944531df2 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-addon-test", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Integrate Vitest with Storybook", "keywords": [ "storybook-addons", diff --git a/code/addons/test/src/vitest-plugin/viewports.ts b/code/addons/test/src/vitest-plugin/viewports.ts index c779eb3a6633..3fa6b446ddcb 100644 --- a/code/addons/test/src/vitest-plugin/viewports.ts +++ b/code/addons/test/src/vitest-plugin/viewports.ts @@ -1,8 +1,6 @@ /* eslint-disable no-underscore-dangle */ import { UnsupportedViewportDimensionError } from 'storybook/internal/preview-errors'; -import { page } from '@vitest/browser/context'; - import { MINIMAL_VIEWPORTS } from '../../../viewport/src/defaults'; import type { ViewportMap, ViewportStyles } from '../../../viewport/src/types'; @@ -50,6 +48,10 @@ const parseDimension = (value: string, dimension: 'width' | 'height') => { export const setViewport = async (viewportsParam: ViewportsParam = {} as ViewportsParam) => { const defaultViewport = viewportsParam.defaultViewport; + const { page } = await import('@vitest/browser/context').catch(() => ({ + page: null, + })); + if (!page || !globalThis.__vitest_browser__) { return; } diff --git a/code/addons/themes/README.md b/code/addons/themes/README.md index 0c71eb3ce159..68309d9054a0 100644 --- a/code/addons/themes/README.md +++ b/code/addons/themes/README.md @@ -12,7 +12,7 @@ Requires Storybook 7.0 or later. If you need to add it to your Storybook, you ca npm i -D @storybook/addon-themes ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project): ```js export default { diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index b8c6558b3775..356035cce08e 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/README.md b/code/addons/toolbars/README.md index 2e37dc6c6168..dd70fb3ee7c5 100644 --- a/code/addons/toolbars/README.md +++ b/code/addons/toolbars/README.md @@ -6,19 +6,19 @@ The Toolbars addon controls global story rendering options from [Storybook's](ht - set your components' internationalization (i18n) locale - configure just about anything in Storybook that makes use of a global variable -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/toolbars/docs/hero.gif) ## Installation -Toolbars is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Toolbars is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-toolbars ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project): ```js export default { diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 76a1b7027e12..acfc9620cfbe 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/README.md b/code/addons/viewport/README.md index 6444f180db9f..4393724c431c 100644 --- a/code/addons/viewport/README.md +++ b/code/addons/viewport/README.md @@ -2,19 +2,19 @@ Storybook Viewport Addon allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybook.js.org). This helps build responsive components inside of Storybook. -[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support) +[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support) ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/viewport/docs/viewport.png) ## Installation -Viewport is part of [essentials](https://storybook.js.org/docs/react/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: +Viewport is part of [essentials](https://storybook.js.org/docs/essentials) and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run: ```sh npm i -D @storybook/addon-viewport ``` -Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/react/configure/#configure-your-storybook-project): +Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project): ```js export default { diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 89f88480704a..f16c309ea97c 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 4486e411c45d..fd01a63ed47d 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index c4ecddf9347f..99383fdb79d5 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/package.json b/code/core/package.json index fe494dcc815f..a1edc07cbde5 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index 03638c05d5a1..47aa0a30af7e 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,87 +1,87 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.4.0-alpha.7', - '@storybook/addon-actions': '8.4.0-alpha.7', - '@storybook/addon-backgrounds': '8.4.0-alpha.7', - '@storybook/addon-controls': '8.4.0-alpha.7', - '@storybook/addon-docs': '8.4.0-alpha.7', - '@storybook/addon-essentials': '8.4.0-alpha.7', - '@storybook/addon-mdx-gfm': '8.4.0-alpha.7', - '@storybook/addon-highlight': '8.4.0-alpha.7', - '@storybook/addon-interactions': '8.4.0-alpha.7', - '@storybook/addon-jest': '8.4.0-alpha.7', - '@storybook/addon-links': '8.4.0-alpha.7', - '@storybook/addon-measure': '8.4.0-alpha.7', - '@storybook/addon-onboarding': '8.4.0-alpha.7', - '@storybook/addon-outline': '8.4.0-alpha.7', - '@storybook/addon-storysource': '8.4.0-alpha.7', - '@storybook/experimental-addon-test': '8.4.0-alpha.7', - '@storybook/addon-themes': '8.4.0-alpha.7', - '@storybook/addon-toolbars': '8.4.0-alpha.7', - '@storybook/addon-viewport': '8.4.0-alpha.7', - '@storybook/builder-vite': '8.4.0-alpha.7', - '@storybook/builder-webpack5': '8.4.0-alpha.7', - '@storybook/core': '8.4.0-alpha.7', - '@storybook/builder-manager': '8.4.0-alpha.7', - '@storybook/channels': '8.4.0-alpha.7', - '@storybook/client-logger': '8.4.0-alpha.7', - '@storybook/components': '8.4.0-alpha.7', - '@storybook/core-common': '8.4.0-alpha.7', - '@storybook/core-events': '8.4.0-alpha.7', - '@storybook/core-server': '8.4.0-alpha.7', - '@storybook/csf-tools': '8.4.0-alpha.7', - '@storybook/docs-tools': '8.4.0-alpha.7', - '@storybook/manager': '8.4.0-alpha.7', - '@storybook/manager-api': '8.4.0-alpha.7', - '@storybook/node-logger': '8.4.0-alpha.7', - '@storybook/preview': '8.4.0-alpha.7', - '@storybook/preview-api': '8.4.0-alpha.7', - '@storybook/router': '8.4.0-alpha.7', - '@storybook/telemetry': '8.4.0-alpha.7', - '@storybook/theming': '8.4.0-alpha.7', - '@storybook/types': '8.4.0-alpha.7', - '@storybook/angular': '8.4.0-alpha.7', - '@storybook/ember': '8.4.0-alpha.7', - '@storybook/experimental-nextjs-vite': '8.4.0-alpha.7', - '@storybook/html-vite': '8.4.0-alpha.7', - '@storybook/html-webpack5': '8.4.0-alpha.7', - '@storybook/nextjs': '8.4.0-alpha.7', - '@storybook/preact-vite': '8.4.0-alpha.7', - '@storybook/preact-webpack5': '8.4.0-alpha.7', - '@storybook/react-vite': '8.4.0-alpha.7', - '@storybook/react-webpack5': '8.4.0-alpha.7', - '@storybook/server-webpack5': '8.4.0-alpha.7', - '@storybook/svelte-vite': '8.4.0-alpha.7', - '@storybook/svelte-webpack5': '8.4.0-alpha.7', - '@storybook/sveltekit': '8.4.0-alpha.7', - '@storybook/vue3-vite': '8.4.0-alpha.7', - '@storybook/vue3-webpack5': '8.4.0-alpha.7', - '@storybook/web-components-vite': '8.4.0-alpha.7', - '@storybook/web-components-webpack5': '8.4.0-alpha.7', - '@storybook/blocks': '8.4.0-alpha.7', - storybook: '8.4.0-alpha.7', - sb: '8.4.0-alpha.7', - '@storybook/cli': '8.4.0-alpha.7', - '@storybook/codemod': '8.4.0-alpha.7', - '@storybook/core-webpack': '8.4.0-alpha.7', - 'create-storybook': '8.4.0-alpha.7', - '@storybook/csf-plugin': '8.4.0-alpha.7', - '@storybook/instrumenter': '8.4.0-alpha.7', - '@storybook/react-dom-shim': '8.4.0-alpha.7', - '@storybook/source-loader': '8.4.0-alpha.7', - '@storybook/test': '8.4.0-alpha.7', - '@storybook/preset-create-react-app': '8.4.0-alpha.7', - '@storybook/preset-html-webpack': '8.4.0-alpha.7', - '@storybook/preset-preact-webpack': '8.4.0-alpha.7', - '@storybook/preset-react-webpack': '8.4.0-alpha.7', - '@storybook/preset-server-webpack': '8.4.0-alpha.7', - '@storybook/preset-svelte-webpack': '8.4.0-alpha.7', - '@storybook/preset-vue3-webpack': '8.4.0-alpha.7', - '@storybook/html': '8.4.0-alpha.7', - '@storybook/preact': '8.4.0-alpha.7', - '@storybook/react': '8.4.0-alpha.7', - '@storybook/server': '8.4.0-alpha.7', - '@storybook/svelte': '8.4.0-alpha.7', - '@storybook/vue3': '8.4.0-alpha.7', - '@storybook/web-components': '8.4.0-alpha.7', + '@storybook/addon-a11y': '8.4.0-alpha.8', + '@storybook/addon-actions': '8.4.0-alpha.8', + '@storybook/addon-backgrounds': '8.4.0-alpha.8', + '@storybook/addon-controls': '8.4.0-alpha.8', + '@storybook/addon-docs': '8.4.0-alpha.8', + '@storybook/addon-essentials': '8.4.0-alpha.8', + '@storybook/addon-mdx-gfm': '8.4.0-alpha.8', + '@storybook/addon-highlight': '8.4.0-alpha.8', + '@storybook/addon-interactions': '8.4.0-alpha.8', + '@storybook/addon-jest': '8.4.0-alpha.8', + '@storybook/addon-links': '8.4.0-alpha.8', + '@storybook/addon-measure': '8.4.0-alpha.8', + '@storybook/addon-onboarding': '8.4.0-alpha.8', + '@storybook/addon-outline': '8.4.0-alpha.8', + '@storybook/addon-storysource': '8.4.0-alpha.8', + '@storybook/experimental-addon-test': '8.4.0-alpha.8', + '@storybook/addon-themes': '8.4.0-alpha.8', + '@storybook/addon-toolbars': '8.4.0-alpha.8', + '@storybook/addon-viewport': '8.4.0-alpha.8', + '@storybook/builder-vite': '8.4.0-alpha.8', + '@storybook/builder-webpack5': '8.4.0-alpha.8', + '@storybook/core': '8.4.0-alpha.8', + '@storybook/builder-manager': '8.4.0-alpha.8', + '@storybook/channels': '8.4.0-alpha.8', + '@storybook/client-logger': '8.4.0-alpha.8', + '@storybook/components': '8.4.0-alpha.8', + '@storybook/core-common': '8.4.0-alpha.8', + '@storybook/core-events': '8.4.0-alpha.8', + '@storybook/core-server': '8.4.0-alpha.8', + '@storybook/csf-tools': '8.4.0-alpha.8', + '@storybook/docs-tools': '8.4.0-alpha.8', + '@storybook/manager': '8.4.0-alpha.8', + '@storybook/manager-api': '8.4.0-alpha.8', + '@storybook/node-logger': '8.4.0-alpha.8', + '@storybook/preview': '8.4.0-alpha.8', + '@storybook/preview-api': '8.4.0-alpha.8', + '@storybook/router': '8.4.0-alpha.8', + '@storybook/telemetry': '8.4.0-alpha.8', + '@storybook/theming': '8.4.0-alpha.8', + '@storybook/types': '8.4.0-alpha.8', + '@storybook/angular': '8.4.0-alpha.8', + '@storybook/ember': '8.4.0-alpha.8', + '@storybook/experimental-nextjs-vite': '8.4.0-alpha.8', + '@storybook/html-vite': '8.4.0-alpha.8', + '@storybook/html-webpack5': '8.4.0-alpha.8', + '@storybook/nextjs': '8.4.0-alpha.8', + '@storybook/preact-vite': '8.4.0-alpha.8', + '@storybook/preact-webpack5': '8.4.0-alpha.8', + '@storybook/react-vite': '8.4.0-alpha.8', + '@storybook/react-webpack5': '8.4.0-alpha.8', + '@storybook/server-webpack5': '8.4.0-alpha.8', + '@storybook/svelte-vite': '8.4.0-alpha.8', + '@storybook/svelte-webpack5': '8.4.0-alpha.8', + '@storybook/sveltekit': '8.4.0-alpha.8', + '@storybook/vue3-vite': '8.4.0-alpha.8', + '@storybook/vue3-webpack5': '8.4.0-alpha.8', + '@storybook/web-components-vite': '8.4.0-alpha.8', + '@storybook/web-components-webpack5': '8.4.0-alpha.8', + '@storybook/blocks': '8.4.0-alpha.8', + storybook: '8.4.0-alpha.8', + sb: '8.4.0-alpha.8', + '@storybook/cli': '8.4.0-alpha.8', + '@storybook/codemod': '8.4.0-alpha.8', + '@storybook/core-webpack': '8.4.0-alpha.8', + 'create-storybook': '8.4.0-alpha.8', + '@storybook/csf-plugin': '8.4.0-alpha.8', + '@storybook/instrumenter': '8.4.0-alpha.8', + '@storybook/react-dom-shim': '8.4.0-alpha.8', + '@storybook/source-loader': '8.4.0-alpha.8', + '@storybook/test': '8.4.0-alpha.8', + '@storybook/preset-create-react-app': '8.4.0-alpha.8', + '@storybook/preset-html-webpack': '8.4.0-alpha.8', + '@storybook/preset-preact-webpack': '8.4.0-alpha.8', + '@storybook/preset-react-webpack': '8.4.0-alpha.8', + '@storybook/preset-server-webpack': '8.4.0-alpha.8', + '@storybook/preset-svelte-webpack': '8.4.0-alpha.8', + '@storybook/preset-vue3-webpack': '8.4.0-alpha.8', + '@storybook/html': '8.4.0-alpha.8', + '@storybook/preact': '8.4.0-alpha.8', + '@storybook/react': '8.4.0-alpha.8', + '@storybook/server': '8.4.0-alpha.8', + '@storybook/svelte': '8.4.0-alpha.8', + '@storybook/vue3': '8.4.0-alpha.8', + '@storybook/web-components': '8.4.0-alpha.8', }; diff --git a/code/core/src/core-server/presets/common-manager.ts b/code/core/src/core-server/presets/common-manager.ts index 07b11bbaa501..0bdf7cde0031 100644 --- a/code/core/src/core-server/presets/common-manager.ts +++ b/code/core/src/core-server/presets/common-manager.ts @@ -2,12 +2,13 @@ import { global } from '@storybook/global'; import { addons } from '@storybook/core/manager-api'; +const TAG_FILTERS = 'tag-filters'; const STATIC_FILTER = 'static-filter'; -addons.register(STATIC_FILTER, (api) => { +addons.register(TAG_FILTERS, (api) => { // FIXME: this ensures the filter is applied after the first render // to avoid a strange race condition in Webkit only. - const excludeTags = Object.entries(global.TAGS_OPTIONS ?? {}).reduce( + const staticExcludeTags = Object.entries(global.TAGS_OPTIONS ?? {}).reduce( (acc, entry) => { const [tag, option] = entry; if ((option as any).excludeFromSidebar) { @@ -23,7 +24,7 @@ addons.register(STATIC_FILTER, (api) => { return ( // we can filter out the primary story, but we still want to show autodocs (tags.includes('dev') || item.type === 'docs') && - tags.filter((tag) => excludeTags[tag]).length === 0 + tags.filter((tag) => staticExcludeTags[tag]).length === 0 ); }); }); diff --git a/code/core/src/csf-tools/ConfigFile.test.ts b/code/core/src/csf-tools/ConfigFile.test.ts index fe841c49f488..e3409d5eb681 100644 --- a/code/core/src/csf-tools/ConfigFile.test.ts +++ b/code/core/src/csf-tools/ConfigFile.test.ts @@ -1,3 +1,4 @@ +/* eslint-disable no-underscore-dangle */ import { describe, expect, it } from 'vitest'; import { babelPrint } from '@storybook/core/babel'; @@ -1080,7 +1081,6 @@ describe('ConfigFile', () => { const config = loadConfig(source).parse(); config.setImport('path', 'path'); - // eslint-disable-next-line no-underscore-dangle const parsed = babelPrint(config._ast); expect(parsed).toMatchInlineSnapshot(` @@ -1099,7 +1099,6 @@ describe('ConfigFile', () => { const config = loadConfig(source).parse(); config.setImport('path', 'path'); - // eslint-disable-next-line no-underscore-dangle const parsed = babelPrint(config._ast); expect(parsed).toMatchInlineSnapshot(` @@ -1118,7 +1117,6 @@ describe('ConfigFile', () => { const config = loadConfig(source).parse(); config.setImport(['dirname'], 'path'); - // eslint-disable-next-line no-underscore-dangle const parsed = babelPrint(config._ast); expect(parsed).toMatchInlineSnapshot(` @@ -1139,7 +1137,6 @@ describe('ConfigFile', () => { const config = loadConfig(source).parse(); config.setImport(['dirname'], 'path'); - // eslint-disable-next-line no-underscore-dangle const parsed = babelPrint(config._ast); expect(parsed).toMatchInlineSnapshot(` @@ -1161,7 +1158,6 @@ describe('ConfigFile', () => { const config = loadConfig(source).parse(); config.setRequireImport('path', 'path'); - // eslint-disable-next-line no-underscore-dangle const parsed = babelPrint(config._ast); expect(parsed).toMatchInlineSnapshot(` @@ -1181,7 +1177,6 @@ describe('ConfigFile', () => { const config = loadConfig(source).parse(); config.setRequireImport('path', 'path'); - // eslint-disable-next-line no-underscore-dangle const parsed = babelPrint(config._ast); expect(parsed).toMatchInlineSnapshot(` @@ -1200,7 +1195,6 @@ describe('ConfigFile', () => { const config = loadConfig(source).parse(); config.setRequireImport(['dirname'], 'path'); - // eslint-disable-next-line no-underscore-dangle const parsed = babelPrint(config._ast); expect(parsed).toMatchInlineSnapshot(` @@ -1224,7 +1218,6 @@ describe('ConfigFile', () => { const config = loadConfig(source).parse(); config.setRequireImport(['dirname', 'basename'], 'path'); - // eslint-disable-next-line no-underscore-dangle const parsed = babelPrint(config._ast); expect(parsed).toMatchInlineSnapshot(` @@ -1308,4 +1301,31 @@ describe('ConfigFile', () => { ); }); }); + + describe('parse', () => { + it("export { X } with X is import { X } from 'another-file'", () => { + const source = dedent` + import type { StorybookConfig } from '@storybook/react-webpack5'; + import { path } from 'path'; + + export { path }; + + const config: StorybookConfig = { + addons: [ + 'foo', + { name: 'bar', options: {} }, + ], + "otherField": [ + "foo", + { "name": 'bar', options: {} }, + ], + } + export default config; + `; + const config = loadConfig(source).parse(); + + expect(config._exportDecls['path']).toBe(undefined); + expect(config._exports['path']).toBe(undefined); + }); + }); }); diff --git a/code/core/src/csf-tools/ConfigFile.ts b/code/core/src/csf-tools/ConfigFile.ts index 5cb0d28234eb..dc9f973d5ad6 100644 --- a/code/core/src/csf-tools/ConfigFile.ts +++ b/code/core/src/csf-tools/ConfigFile.ts @@ -102,6 +102,7 @@ const _findVarDeclarator = ( ): t.VariableDeclarator | null | undefined => { let declarator: t.VariableDeclarator | null | undefined = null; let declarations: t.VariableDeclarator[] | null = null; + program.body.find((node: t.Node) => { if (t.isVariableDeclaration(node)) { declarations = node.declarations; @@ -248,9 +249,13 @@ export class ConfigFile { ) { const { name: localName } = spec.local; const { name: exportName } = spec.exported; + const decl = _findVarDeclarator(localName, parent as t.Program) as any; - self._exports[exportName] = decl.init; - self._exportDecls[exportName] = decl; + // decl can be empty in case X from `import { X } from ....` because it is not handled in _findVarDeclarator + if (decl) { + self._exports[exportName] = decl.init; + self._exportDecls[exportName] = decl; + } } }); } else { diff --git a/code/core/src/manager-api/modules/url.ts b/code/core/src/manager-api/modules/url.ts index 40971e9dea42..1b08ba7358d4 100644 --- a/code/core/src/manager-api/modules/url.ts +++ b/code/core/src/manager-api/modules/url.ts @@ -159,9 +159,10 @@ export interface SubAPI { * Set the query parameters for the current URL & navigates. * * @param {QueryParams} input - An object containing the query parameters to set. + * @param {NavigateOptions} options - Options for the navigation. * @returns {void} */ - applyQueryParams: (input: QueryParams) => void; + applyQueryParams: (input: QueryParams, options?: NavigateOptions) => void; } export const init: ModuleFn = (moduleArgs) => { @@ -206,10 +207,10 @@ export const init: ModuleFn = (moduleArgs) => { provider.channel?.emit(UPDATE_QUERY_PARAMS, update); } }, - applyQueryParams(input) { + applyQueryParams(input, options) { const { path, queryParams } = api.getUrlState(); - navigateTo(path, { ...queryParams, ...input } as any); + navigateTo(path, { ...queryParams, ...input } as any, options); api.setQueryParams(input); }, navigateUrl(url, options) { diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index de04e48fe1b3..6b71582aabc9 100644 --- a/code/core/src/manager-api/version.ts +++ b/code/core/src/manager-api/version.ts @@ -1 +1 @@ -export const version = '8.4.0-alpha.7'; +export const version = '8.4.0-alpha.8'; diff --git a/code/core/src/manager/components/sidebar/RefIndicator.tsx b/code/core/src/manager/components/sidebar/RefIndicator.tsx index 7c49c95105cd..e34f28d744d6 100644 --- a/code/core/src/manager/components/sidebar/RefIndicator.tsx +++ b/code/core/src/manager/components/sidebar/RefIndicator.tsx @@ -7,6 +7,7 @@ import { styled, useTheme } from '@storybook/core/theming'; import { global } from '@storybook/global'; import { AlertIcon, + CheckIcon, ChevronDownIcon, DocumentIcon, GlobeIcon, @@ -216,7 +217,7 @@ export const RefIndicator = React.memo( ({ - icon: href === ref.url ? 'check' : undefined, + icon: href === ref.url ? : undefined, id, title: id, href, diff --git a/code/core/src/manager/components/sidebar/Search.stories.tsx b/code/core/src/manager/components/sidebar/Search.stories.tsx index 5c70863735e0..1638f06b4dea 100644 --- a/code/core/src/manager/components/sidebar/Search.stories.tsx +++ b/code/core/src/manager/components/sidebar/Search.stories.tsx @@ -47,11 +47,7 @@ const baseProps = { export const Simple: StoryFn = () => {() => null}; -export const SimpleWithCreateButton: StoryFn = () => ( - - {() => null} - -); +export const SimpleWithCreateButton: StoryFn = () => {() => null}; export const FilledIn: StoryFn = () => ( diff --git a/code/core/src/manager/components/sidebar/Search.tsx b/code/core/src/manager/components/sidebar/Search.tsx index d09863a28aab..16a7ba0f151e 100644 --- a/code/core/src/manager/components/sidebar/Search.tsx +++ b/code/core/src/manager/components/sidebar/Search.tsx @@ -1,9 +1,9 @@ -import React, { useCallback, useRef, useState } from 'react'; +import React, { type ReactNode, useCallback, useRef, useState } from 'react'; -import { IconButton, TooltipNote, WithTooltip } from '@storybook/core/components'; +import { IconButton } from '@storybook/core/components'; import { styled } from '@storybook/core/theming'; import { global } from '@storybook/global'; -import { CloseIcon, PlusIcon, SearchIcon } from '@storybook/icons'; +import { CloseIcon, SearchIcon } from '@storybook/icons'; import { shortcutToHumanString, useStorybookApi } from '@storybook/core/manager-api'; @@ -15,7 +15,6 @@ import Fuse from 'fuse.js'; import { getGroupStatus, getHighestStatus } from '../../utils/status'; import { scrollIntoView, searchItem } from '../../utils/tree'; import { useLayout } from '../layout/LayoutProvider'; -import { CreateNewStoryFileModal } from './CreateNewStoryFileModal'; import { DEFAULT_REF_ID } from './Sidebar'; import type { CombinedDataset, @@ -54,10 +53,6 @@ const SearchBar = styled.div({ columnGap: 6, }); -const TooltipNoteWrapper = styled(TooltipNote)({ - margin: 0, -}); - const ScreenReaderLabel = styled.label({ position: 'absolute', left: -10000, @@ -67,49 +62,47 @@ const ScreenReaderLabel = styled.label({ overflow: 'hidden', }); -const CreateNewStoryButton = styled(IconButton)(({ theme }) => ({ - color: theme.color.mediumdark, +const SearchField = styled.div(({ theme }) => ({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + padding: 2, + flexGrow: 1, + height: 32, + width: '100%', + boxShadow: `${theme.button.border} 0 0 0 1px inset`, + borderRadius: theme.appBorderRadius + 2, + + '&:has(input:focus), &:has(input:active)': { + boxShadow: `${theme.color.secondary} 0 0 0 1px inset`, + background: theme.background.app, + }, })); -const SearchIconWrapper = styled.div(({ theme }) => ({ - position: 'absolute', - top: 0, - left: 8, - zIndex: 1, - pointerEvents: 'none', +const IconWrapper = styled.div(({ theme, onClick }) => ({ + cursor: onClick ? 'pointer' : 'default', + flex: '0 0 28px', + height: '100%', + pointerEvents: onClick ? 'auto' : 'none', color: theme.textMutedColor, display: 'flex', alignItems: 'center', - height: '100%', + justifyContent: 'center', })); -const SearchField = styled.div({ - display: 'flex', - flexDirection: 'column', - flexGrow: 1, - position: 'relative', -}); - const Input = styled.input(({ theme }) => ({ appearance: 'none', height: 28, - paddingLeft: 28, - paddingRight: 28, + width: '100%', + padding: 0, border: 0, - boxShadow: `${theme.button.border} 0 0 0 1px inset`, background: 'transparent', - borderRadius: 4, fontSize: `${theme.typography.size.s1 + 1}px`, fontFamily: 'inherit', transition: 'all 150ms', color: theme.color.defaultText, - width: '100%', + outline: 0, - '&:focus, &:active': { - outline: 0, - borderColor: theme.color.secondary, - background: theme.background.app, - }, '&::placeholder': { color: theme.textMutedColor, opacity: 1, @@ -133,11 +126,9 @@ const Input = styled.input(({ theme }) => ({ })); const FocusKey = styled.code(({ theme }) => ({ - position: 'absolute', - top: 6, - right: 9, + margin: 5, + marginTop: 6, height: 16, - zIndex: 1, lineHeight: '16px', textAlign: 'center', fontSize: '11px', @@ -147,50 +138,43 @@ const FocusKey = styled.code(({ theme }) => ({ display: 'flex', alignItems: 'center', gap: 4, + flexShrink: 0, })); const FocusKeyCmd = styled.span({ fontSize: '14px', }); -const ClearIcon = styled.div(({ theme }) => ({ - position: 'absolute', - top: 0, - right: 8, - zIndex: 1, - color: theme.textMutedColor, - cursor: 'pointer', +const Actions = styled.div({ display: 'flex', alignItems: 'center', - height: '100%', -})); + gap: 2, +}); const FocusContainer = styled.div({ outline: 0 }); -const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT'; -const isRendererReact = global.STORYBOOK_RENDERER === 'react'; - export const Search = React.memo<{ children: SearchChildrenFn; dataset: CombinedDataset; enableShortcuts?: boolean; getLastViewed: () => Selection[]; initialQuery?: string; - showCreateStoryButton?: boolean; + searchBarContent?: ReactNode; + searchFieldContent?: ReactNode; }>(function Search({ children, dataset, enableShortcuts = true, getLastViewed, initialQuery = '', - showCreateStoryButton = isDevelopment && isRendererReact, + searchBarContent, + searchFieldContent, }) { const api = useStorybookApi(); const inputRef = useRef(null); const [inputPlaceholder, setPlaceholder] = useState('Find components'); const [allComponents, showAllComponents] = useState(false); const searchShortcut = api ? shortcutToHumanString(api.getShortcutKeys().search) : '/'; - const [isFileSearchModalOpen, setIsFileSearchModalOpen] = useState(false); const makeFuse = useCallback(() => { const list = dataset.entries.reduce((acc, [refId, { index, status }]) => { @@ -406,9 +390,9 @@ export const Search = React.memo<{ {...getRootProps({ refKey: '' }, { suppressRefError: true })} className="search-field" > - + - + {!isMobile && enableShortcuts && !isOpen && ( @@ -421,34 +405,16 @@ export const Search = React.memo<{ )} )} - {isOpen && ( - clearSelection()}> - - - )} + + {isOpen && ( + clearSelection()}> + + + )} + {searchFieldContent} + - {showCreateStoryButton && ( - <> - } - > - { - setIsFileSearchModalOpen(true); - }} - variant="outline" - > - - - - - - )} + {searchBarContent} {children({ diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx index 972606b79598..000a734b042f 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx @@ -43,6 +43,14 @@ const managerContext: any = { ), selectStory: fn().mockName('api::selectStory'), experimental_setFilter: fn().mockName('api::experimental_setFilter'), + getDocsUrl: () => 'https://storybook.js.org/docs/', + getUrlState: () => ({ + queryParams: {}, + path: '', + viewMode: 'story', + url: 'http://localhost:6006/', + }), + applyQueryParams: fn().mockName('api::applyQueryParams'), }, }; @@ -56,6 +64,20 @@ const meta = { menu, extra: [] as Addon_SidebarTopType[], index: index, + indexJson: { + entries: { + // force the tags filter menu to show in production + ['dummy--dummyId']: { + id: 'dummy--dummyId', + name: 'Dummy story', + title: 'dummy', + importPath: './dummy.stories.js', + type: 'story', + tags: ['A', 'B', 'C', 'dev'], + }, + }, + v: 6, + }, storyId, refId: DEFAULT_REF_ID, refs: {}, diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx index e937012c43e6..81e2f0598d2a 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.tsx @@ -1,18 +1,28 @@ -import React, { useMemo } from 'react'; +import React, { useMemo, useState } from 'react'; -import { ScrollArea, Spaced } from '@storybook/core/components'; +import { + IconButton, + ScrollArea, + Spaced, + TooltipNote, + WithTooltip, +} from '@storybook/core/components'; import { styled } from '@storybook/core/theming'; -import type { API_LoadedRefData, Addon_SidebarTopType } from '@storybook/core/types'; +import type { API_LoadedRefData, Addon_SidebarTopType, StoryIndex } from '@storybook/core/types'; +import { global } from '@storybook/global'; +import { PlusIcon } from '@storybook/icons'; -import type { State } from '@storybook/core/manager-api'; +import { type State, useStorybookApi } from '@storybook/core/manager-api'; import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants'; +import { CreateNewStoryFileModal } from './CreateNewStoryFileModal'; import { Explorer } from './Explorer'; import type { HeadingProps } from './Heading'; import { Heading } from './Heading'; import { Search } from './Search'; import { SearchResults } from './SearchResults'; import { SidebarBottom } from './SidebarBottom'; +import { TagsFilter } from './TagsFilter'; import type { CombinedDataset, Selection } from './types'; import { useLastViewed } from './useLastViewed'; @@ -57,6 +67,17 @@ const Bottom = styled.div(({ theme }) => ({ }, })); +const TooltipNoteWrapper = styled(TooltipNote)({ + margin: 0, +}); + +const CreateNewStoryButton = styled(IconButton)(({ theme }) => ({ + color: theme.color.mediumdark, + width: 32, + height: 32, + borderRadius: theme.appBorderRadius + 2, +})); + const Swap = React.memo(function Swap({ children, condition, @@ -99,6 +120,9 @@ const useCombination = ( return useMemo(() => ({ hash, entries: Object.entries(hash) }), [hash]); }; +const isDevelopment = global.CONFIG_TYPE === 'DEVELOPMENT'; +const isRendererReact = global.STORYBOOK_RENDERER === 'react'; + export interface SidebarProps extends API_LoadedRefData { refs: State['refs']; status: State['status']; @@ -110,13 +134,14 @@ export interface SidebarProps extends API_LoadedRefData { enableShortcuts?: boolean; onMenuClick?: HeadingProps['onMenuClick']; showCreateStoryButton?: boolean; + indexJson?: StoryIndex; } - export const Sidebar = React.memo(function Sidebar({ // @ts-expect-error (non strict) storyId = null, refId = DEFAULT_REF_ID, index, + indexJson, indexError, status, previewInitialized, @@ -126,13 +151,15 @@ export const Sidebar = React.memo(function Sidebar({ enableShortcuts = true, refs = {}, onMenuClick, - showCreateStoryButton, + showCreateStoryButton = isDevelopment && isRendererReact, }: SidebarProps) { + const [isFileSearchModalOpen, setIsFileSearchModalOpen] = useState(false); // @ts-expect-error (non strict) const selected: Selection = useMemo(() => storyId && { storyId, refId }, [storyId, refId]); const dataset = useCombination(index, indexError, previewInitialized, status, refs); const isLoading = !index && !indexError; const lastViewedProps = useLastViewed(selected); + const api = useStorybookApi(); return ( @@ -150,7 +177,35 @@ export const Sidebar = React.memo(function Sidebar({ + } + > + { + setIsFileSearchModalOpen(true); + }} + variant="outline" + > + + + + + + ) + } + searchFieldContent={ + indexJson && ( + + ) + } {...lastViewedProps} > {({ diff --git a/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx new file mode 100644 index 000000000000..4050986a91f1 --- /dev/null +++ b/code/core/src/manager/components/sidebar/TagsFilter.stories.tsx @@ -0,0 +1,75 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { findByRole, fn } from '@storybook/test'; + +import { TagsFilter } from './TagsFilter'; + +const meta = { + component: TagsFilter, + tags: ['haha'], + args: { + api: { + experimental_setFilter: fn(), + getDocsUrl: () => 'https://storybook.js.org/docs/', + getUrlState: () => ({ + queryParams: {}, + path: '', + viewMode: 'story', + url: 'http://localhost:6006/', + }), + applyQueryParams: fn().mockName('api::applyQueryParams'), + } as any, + isDevelopment: true, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Closed: Story = { + args: { + indexJson: { + v: 6, + entries: { + 'c1-s1': { tags: ['A', 'B', 'C', 'dev'] } as any, + }, + }, + }, +}; + +export const ClosedWithSelection: Story = { + args: { + ...Closed.args, + initialSelectedTags: ['A', 'B'], + }, +}; + +export const Open: Story = { + ...Closed, + play: async ({ canvasElement }) => { + const button = await findByRole(canvasElement, 'button'); + await button.click(); + }, +}; + +export const OpenWithSelection: Story = { + ...ClosedWithSelection, + play: Open.play, +}; + +export const OpenEmpty: Story = { + args: { + indexJson: { + v: 6, + entries: {}, + }, + }, + play: Open.play, +}; + +export const EmptyProduction: Story = { + args: { + ...OpenEmpty.args, + isDevelopment: false, + }, +}; diff --git a/code/core/src/manager/components/sidebar/TagsFilter.tsx b/code/core/src/manager/components/sidebar/TagsFilter.tsx new file mode 100644 index 000000000000..02e71aa741e5 --- /dev/null +++ b/code/core/src/manager/components/sidebar/TagsFilter.tsx @@ -0,0 +1,130 @@ +import React, { useCallback, useEffect, useState } from 'react'; + +import { Badge, IconButton, WithTooltip } from '@storybook/core/components'; +import { styled } from '@storybook/core/theming'; +import { FilterIcon } from '@storybook/icons'; +import type { StoryIndex, Tag } from '@storybook/types'; + +import type { API } from '@storybook/core/manager-api'; + +import { TagsFilterPanel } from './TagsFilterPanel'; + +const TAGS_FILTER = 'tags-filter'; + +const BUILT_IN_TAGS_HIDE = new Set([ + 'dev', + 'docs-only', + 'test-only', + 'autodocs', + 'test', + 'attached-mdx', + 'unattached-mdx', +]); + +const Wrapper = styled.div({ + position: 'relative', +}); + +const TagSelected = styled(Badge)(({ theme }) => ({ + position: 'absolute', + top: 7, + right: 7, + transform: 'translate(50%, -50%)', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + padding: 3, + height: 6, + minWidth: 6, + lineHeight: 'px', + boxShadow: `${theme.barSelectedColor} 0 0 0 1px inset`, + fontSize: theme.typography.size.s1 - 1, + background: theme.color.secondary, + color: theme.color.lightest, +})); + +export interface TagsFilterProps { + api: API; + indexJson: StoryIndex; + initialSelectedTags?: Tag[]; + isDevelopment: boolean; +} + +export const TagsFilter = ({ + api, + indexJson, + initialSelectedTags = [], + isDevelopment, +}: TagsFilterProps) => { + const [selectedTags, setSelectedTags] = useState(initialSelectedTags); + const [expanded, setExpanded] = useState(false); + const tagsActive = selectedTags.length > 0; + + useEffect(() => { + api.experimental_setFilter(TAGS_FILTER, (item) => { + if (selectedTags.length === 0) { + return true; + } + + return selectedTags.some((tag) => item.tags?.includes(tag)); + }); + }, [api, selectedTags]); + + const allTags = Object.values(indexJson.entries).reduce((acc, entry) => { + entry.tags?.forEach((tag: Tag) => { + if (!BUILT_IN_TAGS_HIDE.has(tag)) { + acc.add(tag); + } + }); + return acc; + }, new Set()); + + const toggleTag = useCallback( + (tag: string) => { + if (selectedTags.includes(tag)) { + setSelectedTags(selectedTags.filter((t) => t !== tag)); + } else { + setSelectedTags([...selectedTags, tag]); + } + }, + [selectedTags, setSelectedTags] + ); + + const handleToggleExpand = useCallback( + (event: React.SyntheticEvent): void => { + event.preventDefault(); + setExpanded(!expanded); + }, + [expanded, setExpanded] + ); + + // Hide the entire UI if there are no tags and it's a built Storybook + if (allTags.size === 0 && !isDevelopment) { + return null; + } + + return ( + ( + + )} + closeOnOutsideClick + > + + + + + {selectedTags.length > 0 && } + + + ); +}; diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx new file mode 100644 index 000000000000..999c5f3fdb04 --- /dev/null +++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.stories.tsx @@ -0,0 +1,62 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { fn } from '@storybook/test'; + +import { TagsFilterPanel } from './TagsFilterPanel'; + +const meta = { + component: TagsFilterPanel, + args: { + toggleTag: fn(), + api: { + getDocsUrl: () => 'https://storybook.js.org/docs/', + } as any, + isDevelopment: true, + }, + tags: ['hoho'], +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Empty: Story = { + args: { + allTags: [], + selectedTags: [], + }, +}; + +export const BuiltInTagsOnly: Story = { + args: { + allTags: ['play-fn'], + selectedTags: [], + }, +}; + +export const BuiltInTagsOnlyProduction: Story = { + args: { + ...BuiltInTagsOnly.args, + isDevelopment: false, + }, +}; + +export const Default: Story = { + args: { + allTags: ['tag1', 'tag2', 'tag3'], + selectedTags: ['tag1', 'tag3'], + }, +}; + +export const BuiltInTags: Story = { + args: { + allTags: [...Default.args.allTags, 'play-fn'], + selectedTags: ['tag1', 'tag3'], + }, +}; + +export const ExtraBuiltInTagsSelected: Story = { + args: { + ...BuiltInTags.args, + selectedTags: ['tag1', 'tag3', 'autodocs', 'play-fn'], + }, +}; diff --git a/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx new file mode 100644 index 000000000000..45f1b5c85aaf --- /dev/null +++ b/code/core/src/manager/components/sidebar/TagsFilterPanel.tsx @@ -0,0 +1,70 @@ +import React from 'react'; + +import { TooltipLinkList } from '@storybook/core/components'; +import { styled, useTheme } from '@storybook/core/theming'; +import { ShareAltIcon } from '@storybook/icons'; +import type { Tag } from '@storybook/types'; + +import type { API } from '@storybook/core/manager-api'; + +const BUILT_IN_TAGS_SHOW = new Set(['play-fn']); + +const Wrapper = styled.div({ + minWidth: 180, + maxWidth: 220, +}); + +interface TagsFilterPanelProps { + api: API; + allTags: Tag[]; + selectedTags: Tag[]; + toggleTag: (tag: Tag) => void; + isDevelopment: boolean; +} + +export const TagsFilterPanel = ({ + api, + allTags, + selectedTags, + toggleTag, + isDevelopment, +}: TagsFilterPanelProps) => { + const theme = useTheme(); + const userTags = allTags.filter((tag) => !BUILT_IN_TAGS_SHOW.has(tag)); + const docsUrl = api.getDocsUrl({ subpath: 'writing-stories/tags#filtering-by-custom-tags' }); + const items = allTags.map((tag) => { + const checked = selectedTags.includes(tag); + const id = `tag-${tag}`; + return { + id, + title: tag, + right: , + onClick: () => toggleTag(tag), + }; + }) as any[]; + + if (allTags.length === 0) { + items.push({ + id: 'no-tags', + title: 'There are no tags. Use tags to organize and filter your Storybook.', + isIndented: false, + }); + } + if (userTags.length === 0 && isDevelopment) { + items.push({ + id: 'tags-docs', + title: 'Learn how to add tags', + icon: , + href: docsUrl, + style: { + borderTop: `4px solid ${theme.appBorderColor}`, + }, + }); + } + + return ( + + + + ); +}; diff --git a/code/core/src/manager/container/Sidebar.tsx b/code/core/src/manager/container/Sidebar.tsx index bd405706068a..bc05d1713b59 100755 --- a/code/core/src/manager/container/Sidebar.tsx +++ b/code/core/src/manager/container/Sidebar.tsx @@ -23,6 +23,10 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) { storyId, refId, layout: { showToolbar }, + // FIXME: This is the actual `index.json` index where the `index` below + // is actually the stories hash. We should fix this up and make it consistent. + // eslint-disable-next-line @typescript-eslint/naming-convention + internal_index, index, status, indexError, @@ -50,6 +54,7 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) { return { title: name, url, + indexJson: internal_index, index, indexError, status, diff --git a/code/core/src/telemetry/README.md b/code/core/src/telemetry/README.md index 7f84d318fc9e..c6a531ac6594 100644 --- a/code/core/src/telemetry/README.md +++ b/code/core/src/telemetry/README.md @@ -2,4 +2,4 @@ Storybook collects completely anonymous telemetry data about general usage. Participation in this program is optional and it’s easy to opt-out. -For more information visit: [storybook.js.org/telemetry](https://storybook.js.org/telemetry) +For more information visit: [storybook.js.org/telemetry](https://storybook.js.org/docs/configure/telemetry) diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index 55ea89cc1ffe..89e5d02cbf95 100644 --- a/code/deprecated/builder-manager/package.json +++ b/code/deprecated/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index 2959a41fa039..1e76611ba778 100644 --- a/code/deprecated/channels/package.json +++ b/code/deprecated/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index 325aabfeeb3d..b5da6166a1b2 100644 --- a/code/deprecated/client-logger/package.json +++ b/code/deprecated/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index 48cf196630e4..c6d49682b3ba 100644 --- a/code/deprecated/components/package.json +++ b/code/deprecated/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index 3e651691a07a..1ccc9266f8e4 100644 --- a/code/deprecated/core-common/package.json +++ b/code/deprecated/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json index 8ece8cc79411..b702cd0a3dcd 100644 --- a/code/deprecated/core-events/package.json +++ b/code/deprecated/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json index eeac3f147d25..93ade9cd77f8 100644 --- a/code/deprecated/core-server/package.json +++ b/code/deprecated/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json index 29d6b33b414a..82d56392034b 100644 --- a/code/deprecated/csf-tools/package.json +++ b/code/deprecated/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json index b4e6406baa56..b7418deec8bb 100644 --- a/code/deprecated/docs-tools/package.json +++ b/code/deprecated/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json index 06a2697a407c..ad4627499a9b 100644 --- a/code/deprecated/manager-api/package.json +++ b/code/deprecated/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index e09af35c9f0e..a349c6dd024f 100644 --- a/code/deprecated/manager/package.json +++ b/code/deprecated/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index 641a398be8f5..11f8751f8104 100644 --- a/code/deprecated/node-logger/package.json +++ b/code/deprecated/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index 70469323bda0..cae353ba0f43 100644 --- a/code/deprecated/preview-api/package.json +++ b/code/deprecated/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index 3cdbd0f6ba5e..b46aad5176e7 100644 --- a/code/deprecated/preview/package.json +++ b/code/deprecated/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index 8beb6975d4a3..c4f9753cca24 100644 --- a/code/deprecated/router/package.json +++ b/code/deprecated/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index bcfcbb572486..f265138d2658 100644 --- a/code/deprecated/telemetry/package.json +++ b/code/deprecated/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json index ed155f9adc27..8a2699fce024 100644 --- a/code/deprecated/theming/package.json +++ b/code/deprecated/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index f6132c644861..be3063a042ac 100644 --- a/code/deprecated/types/package.json +++ b/code/deprecated/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 6a36b0f5807a..1373ff10308a 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 6368bde66552..3910854111bf 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index 6f7a3fb395b4..80b2d0e6db95 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-nextjs-vite", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for Next.js and Vite", "keywords": [ "storybook", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 5a2d3846ca4d..89f2af08794f 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 64d5544f2f71..130f88680ada 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index dc4be0600c67..8b4f7735aa8b 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 9b9f0b3a4623..c47d19c7e868 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 86de08ba035f..bfd8fd02e9e6 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index d51e29ed8d10..bab0c325cc86 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 1c39f5a44b99..39b421d15e5b 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index caa7296cc335..6ae3ceffca3a 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index bc84fb925c87..9a3aa0095160 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index c3ef079637ef..26a456140246 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 3371c67e61d6..07d5525969c6 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 682383e94dd0..893c64a6c21a 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 650d040f09ca..e19f8c37d4d0 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 9e3d1e09c398..b1d802d6e030 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index b431b08ce7cc..18d89286b218 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index 1cfab3fadf71..3c201a481ad8 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index d803ca1246ab..5744f3f09872 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 2a1e908cdf6e..054da7b35cb4 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 88454e37529f..1421770487d0 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 679fb6032099..6482ff63da27 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 099a9c01ec47..c3590012cb35 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index 74b31d3aa46e..5c1d4850006d 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -1,6 +1,6 @@ { "name": "create-storybook", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Initialize Storybook into your project", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook", "bugs": { diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 9cfc419b5af5..babfc5dcfbfc 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index 5cb7091d63cc..ede6a0be7d51 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index b7712437a2ad..67d3a38f1499 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 4545ef26d8fc..5ed141a39235 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/test/package.json b/code/lib/test/package.json index a66703d9bdb3..3e8b9f28c754 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index fdad3323c8bb..47545abb27e2 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index a566c2f465c4..6ab262b8849f 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/README.md b/code/presets/html-webpack/README.md index 3fa497407563..e6b8fd3e587b 100644 --- a/code/presets/html-webpack/README.md +++ b/code/presets/html-webpack/README.md @@ -1,6 +1,6 @@ # Storybook Webpack preset for HTML -This package is a [preset](https://storybook.js.org/docs/html/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling HTML. +This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=html) that configures Storybook's webpack settings for handling HTML. It's an internal package that's not intended to be used directly by users. -- More info on [Storybook for HTML](https://storybook.js.org/docs/html/get-started) +- More info on [Storybook for HTML](https://storybook.js.org/docs/get-started/install?renderer=html) diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 431dbc0d0b15..09b4413eced5 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/README.md b/code/presets/preact-webpack/README.md index 5ac103fdd029..c3e23e11f650 100644 --- a/code/presets/preact-webpack/README.md +++ b/code/presets/preact-webpack/README.md @@ -1,6 +1,6 @@ # Storybook Webpack preset for Preact -This package is a [preset](https://storybook.js.org/docs/preact/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Preact. +This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=preact) that configures Storybook's webpack settings for handling Preact. It's an internal package that's not intended to be used directly by users. -- More info on [Storybook for Preact](https://storybook.js.org/docs/preact/get-started) +- More info on [Storybook for Preact](https://storybook.js.org/docs/get-started/install?renderer=preact) diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 97681802923a..77958f93a3bd 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/README.md b/code/presets/react-webpack/README.md index 74e2ad35024f..30e05d0a67b1 100644 --- a/code/presets/react-webpack/README.md +++ b/code/presets/react-webpack/README.md @@ -1,6 +1,6 @@ # Storybook Webpack preset for React -This package is a [preset](https://storybook.js.org/docs/react/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling React. +This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=react) that configures Storybook's webpack settings for handling React. It's an internal package that's not intended to be used directly by users. -- More info on [Storybook for React](https://storybook.js.org/docs/react/get-started) +- More info on [Storybook for React](https://storybook.js.org/docs/get-started/install?renderer=react) diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 62671290832c..17105d8445b5 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/README.md b/code/presets/server-webpack/README.md index 6ec71da73371..b804e929699b 100644 --- a/code/presets/server-webpack/README.md +++ b/code/presets/server-webpack/README.md @@ -1,6 +1,6 @@ # Storybook Webpack preset for Server -This package is a [preset](https://storybook.js.org/docs/react/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling React. +This package is a [preset](https://storybook.js.org/docs/addons/writing-presets) that configures Storybook's webpack settings for handling React. It's an internal package that's not intended to be used directly by users. - More info on [Storybook for Server](https://github.com/storybookjs/storybook/tree/next/code/frameworks/server-webpack5) diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index b27e1969af9c..69f30e8150c4 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/README.md b/code/presets/svelte-webpack/README.md index b2d6cd5e9035..c29a4ed7a173 100644 --- a/code/presets/svelte-webpack/README.md +++ b/code/presets/svelte-webpack/README.md @@ -1,6 +1,6 @@ # Storybook Webpack preset for Svelte -This package is a [preset](https://storybook.js.org/docs/svelte/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Svelte. +This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=svelte) that configures Storybook's webpack settings for handling Svelte. It's an internal package that's not intended to be used directly by users. -- More info on [Storybook for Svelte](https://storybook.js.org/docs/svelte/get-started) +- More info on [Storybook for Svelte](https://storybook.js.org/docs/get-started/install?renderer=svelte) diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index bc995f0e1f7d..88c0bbad8a74 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/README.md b/code/presets/vue3-webpack/README.md index 4c2a2df89914..9c6133472d65 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/addons/writing-presets#presets-api) that configures Storybook's webpack settings for handling Vue 3. +This package is a [preset](https://storybook.js.org/docs/addons/writing-presets?renderer=vue) 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/get-started/why-storybook) +- More info on [Storybook for Vue3](https://storybook.js.org/docs/get-started/install?renderer=vue) diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index 40d012335cea..532d827d17c5 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 44398d844371..7c0bc681acae 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 25fbf00cb163..10685f818ecf 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index f1180e122899..a15cc4380e2e 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 9658133d098e..b12375bba60e 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index b5180a46c612..fc1aa59d7ab3 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 01ea304a350d..d41c2ee42201 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index ab0d88f156a2..2ad85944b695 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.4.0-alpha.7", + "version": "8.4.0-alpha.8", "description": "Storybook web-components renderer", "keywords": [ "lit", diff --git a/docs/_assets/writing-stories/custom-tag-filter.png b/docs/_assets/writing-stories/custom-tag-filter.png new file mode 100644 index 000000000000..3579f994da12 Binary files /dev/null and b/docs/_assets/writing-stories/custom-tag-filter.png differ diff --git a/docs/_snippets/ghp-github-action.md b/docs/_snippets/ghp-github-action.md index 1d02c60a0827..34e407e0615f 100644 --- a/docs/_snippets/ghp-github-action.md +++ b/docs/_snippets/ghp-github-action.md @@ -27,7 +27,7 @@ jobs: # Set up Node - uses: actions/setup-node@v4 with: - node-version: '16.x' + node-version: '20.x' #👇 Add Storybook build and deploy to GitHub Pages as a step in the workflow - uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3 diff --git a/docs/_snippets/vitest-plugin-vitest-config.md b/docs/_snippets/vitest-plugin-vitest-config.md index 0ddc6054f9df..55a5670b312a 100644 --- a/docs/_snippets/vitest-plugin-vitest-config.md +++ b/docs/_snippets/vitest-plugin-vitest-config.md @@ -2,7 +2,7 @@ import { defineConfig, mergeConfig } from 'vitest/config'; import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin'; // 👇 If you're using Next.js, apply this framework plugin as well -// import { storybookNextjsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'; +// import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'; import viteConfig from './vite.config'; @@ -15,7 +15,7 @@ export default mergeConfig( // The --ci flag will skip prompts and not open a browser storybookScript: 'yarn storybook --ci', }), - // storybookNextjsPlugin(), + // storybookNextJsPlugin(), ], test: { // Glob pattern to find story files diff --git a/docs/_snippets/vitest-plugin-vitest-workspace.md b/docs/_snippets/vitest-plugin-vitest-workspace.md index cfe0f50a2681..b4e9ba800211 100644 --- a/docs/_snippets/vitest-plugin-vitest-workspace.md +++ b/docs/_snippets/vitest-plugin-vitest-workspace.md @@ -2,7 +2,7 @@ import { defineWorkspace } from 'vitest/config'; import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin'; // 👇 If you're using Next.js, apply this framework plugin as well -// import { storybookNextjsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'; +// import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'; export default defineWorkspace([ // This is the path to your existing Vitest config file @@ -16,7 +16,7 @@ export default defineWorkspace([ // The --ci flag will skip prompts and not open a browser storybookScript: 'yarn storybook --ci', }), - // storybookNextjsPlugin(), + // storybookNextJsPlugin(), ], test: { name: 'storybook', @@ -87,7 +87,7 @@ export default defineWorkspace([ import { defineConfig, mergeConfig } from 'vitest/config'; import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin'; // 👇 If you're using Sveltekit, apply this framework plugin as well -// import { storybookNextjsPlugin } from '@storybook/sveltekit/vite-plugin'; +// import { storybookSveltekitPlugin } from '@storybook/sveltekit/vite-plugin'; import viteConfig from './vite.config'; diff --git a/docs/versions/next.json b/docs/versions/next.json index b7cf99de3ecf..5419ab744ce7 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"8.4.0-alpha.7","info":{"plain":"- CLI: Install Svelte CSF v5 in Svelte5 projects - [#29323](https://github.com/storybookjs/storybook/pull/29323), thanks @shilman!\n- Manager: Add tags property to ComponentEntry objects - [#29343](https://github.com/storybookjs/storybook/pull/29343), thanks @Sidnioulz!"}} +{"version":"8.4.0-alpha.8","info":{"plain":"- Addon-Test: Support for `@vitest/browser` v2.1.2 - [#29407](https://github.com/storybookjs/storybook/pull/29407), thanks @strozw!\n- ConfigFile: Fix `export { X }` parsing - [#29344](https://github.com/storybookjs/storybook/pull/29344), thanks @vctqs1!\n- Core: Fix building Storybook deleting project root files - [#29371](https://github.com/storybookjs/storybook/pull/29371), thanks @JReinhold!\n- Interactions: Escape xml of interactions errors - [#29414](https://github.com/storybookjs/storybook/pull/29414), thanks @kasperpeulen!\n- Svelte: Add v5 stories to CLI templates - [#29382](https://github.com/storybookjs/storybook/pull/29382), thanks @JReinhold!\n- Test: Remove unused `util` dependency - [#29310](https://github.com/storybookjs/storybook/pull/29310), thanks @JReinhold!\n- UI: Fix RefIndicator to use CheckIcon instead of string - [#29209](https://github.com/storybookjs/storybook/pull/29209), thanks @JSMike!\n- UI: Simple tag filtering - [#29333](https://github.com/storybookjs/storybook/pull/29333), thanks @shilman!"}} diff --git a/docs/writing-stories/tags.mdx b/docs/writing-stories/tags.mdx index 25459a84ba59..350e168c532d 100644 --- a/docs/writing-stories/tags.mdx +++ b/docs/writing-stories/tags.mdx @@ -51,6 +51,21 @@ To remove a tag from a story, prefix it with `!`. For example: Tags can be removed for all stories in your project (in `.storybook/preview.js|ts`), all stories for a component (in the CSF file meta), or a single story (as above). +## Filtering by custom tags + +Custom tags enable a flexible layer of categorization on top of Storybook's sidebar hierarchy. In the example above, we created an `experimental` tag to indicate that a story is not yet stable. + +You can create custom tags for any purpose. Sample uses might include: +- Status, such as `experimental`, `new`, `stable`, or `deprecated` +- User persona, such as `admin`, `user`, or `developer` +- Component/code ownership + +Custom tags are useful because they show up as filters in Storybook's sidebar. Selecting a tag in the filter causes the sidebar to only show stories with that tag. Selecting multiple tags shows stories that contain any of those tags. + +![Filtering by custom tag](../_assets/writing-stories/custom-tag-filter.png) + +Filtering by tags is a powerful way to focus on a subset of stories, especially in large Storybook projects. You can also narrow your stories by tag and then search within that subset. + ## Recipes ### Docs-only stories diff --git a/docs/writing-tests/test-addon.mdx b/docs/writing-tests/test-addon.mdx index a10aabe5aeb7..c75e43a8e59e 100644 --- a/docs/writing-tests/test-addon.mdx +++ b/docs/writing-tests/test-addon.mdx @@ -83,7 +83,7 @@ Some Storybook frameworks require additional setup to enable the framework's fea ```js title="vitest.config.ts" import { defineConfig, mergeConfig } from 'vitest/config'; import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin'; - import { storybookNextjsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'; + import { storybookNextJsPlugin } from '@storybook/experimental-nextjs-vite/vite-plugin'; import viteConfig from './vite.config'; @@ -92,7 +92,7 @@ Some Storybook frameworks require additional setup to enable the framework's fea defineConfig({ plugins: [ storybookTest(), - storybookNextjsPlugin(), // 👈 Apply the framework plugin here + storybookNextJsPlugin(), // 👈 Apply the framework plugin here ], // ... }) @@ -514,4 +514,4 @@ Default: - **`exclude`**: Stories with these tags will not be tested, and will not be counted in the test results - **`skip`**: Stories with these tags will not be tested, and will be counted in the test results - \ No newline at end of file +