diff --git a/.circleci/config.yml b/.circleci/config.yml
index 617cdac42c28..ee9dee76c725 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -555,19 +555,19 @@ workflows:
requires:
- unit-tests
- create-sandboxes:
- parallelism: 21
+ parallelism: 20
requires:
- build
- build-sandboxes:
- parallelism: 21
+ parallelism: 20
requires:
- create-sandboxes
- chromatic-sandboxes:
- parallelism: 18
+ parallelism: 17
requires:
- build-sandboxes
- e2e-production:
- parallelism: 18
+ parallelism: 17
requires:
- build-sandboxes
- e2e-dev:
@@ -575,7 +575,7 @@ workflows:
requires:
- create-sandboxes
- test-runner-production:
- parallelism: 18
+ parallelism: 17
requires:
- build-sandboxes
- bench:
@@ -609,22 +609,22 @@ workflows:
requires:
- build
- create-sandboxes:
- parallelism: 34
+ parallelism: 33
requires:
- build
# - smoke-test-sandboxes: # disabled for now
# requires:
# - create-sandboxes
- build-sandboxes:
- parallelism: 34
+ parallelism: 33
requires:
- create-sandboxes
- chromatic-sandboxes:
- parallelism: 31
+ parallelism: 30
requires:
- build-sandboxes
- e2e-production:
- parallelism: 31
+ parallelism: 30
requires:
- build-sandboxes
- e2e-dev:
@@ -632,7 +632,7 @@ workflows:
requires:
- create-sandboxes
- test-runner-production:
- parallelism: 31
+ parallelism: 30
requires:
- build-sandboxes
# TODO: reenable once we find out the source of flakyness
diff --git a/.github/workflows/generate-sandboxes-next.yml b/.github/workflows/generate-sandboxes-next.yml
index f6ab2f7c822f..c20f5491ef30 100644
--- a/.github/workflows/generate-sandboxes-next.yml
+++ b/.github/workflows/generate-sandboxes-next.yml
@@ -43,7 +43,7 @@ jobs:
run: yarn wait-on http://localhost:6001
working-directory: ./code
- name: Generate
- run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease
+ run: yarn generate-sandboxes --local-registry --exclude=angular-cli/prerelease --debug
working-directory: ./code
- name: Publish
run: yarn publish-sandboxes --remote=https://storybook-bot:${{ secrets.PAT_STORYBOOK_BOT}}@github.com/storybookjs/sandboxes.git --push --branch=next
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 65162adc174c..b4400d25c0c7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 7.4.6
+
+- CLI: Fix Nextjs project detection - [#24346](https://github.com/storybookjs/storybook/pull/24346), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Fix missing favicon during dev - [#24356](https://github.com/storybookjs/storybook/pull/24356), thanks [@ndelangen](https://github.com/ndelangen)!
+
## 7.4.5
- UI: Fix infinite hook call causing browsers to freeze - [#24291](https://github.com/storybookjs/storybook/pull/24291), thanks [@yannbf](https://github.com/yannbf)!
diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index b198f6cba525..cc8636b9d524 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,15 @@
+## 7.5.0-alpha.4
+
+- CLI: Fix Nextjs project detection - [#24346](https://github.com/storybookjs/storybook/pull/24346), thanks [@yannbf](https://github.com/yannbf)!
+- Core: Deprecate `storyStoreV6` (including `storiesOf`) and `storyIndexers` - [#23938](https://github.com/storybookjs/storybook/pull/23938), thanks [@JReinhold](https://github.com/JReinhold)!
+- Core: Fix Promise cycle bug in useSharedState - [#24268](https://github.com/storybookjs/storybook/pull/24268), thanks [@ndelangen](https://github.com/ndelangen)!
+- Core: Fix missing favicon during dev - [#24356](https://github.com/storybookjs/storybook/pull/24356), thanks [@ndelangen](https://github.com/ndelangen)!
+- NextJS: Change babel plugins from `proposal-...` to `transform-...` - [#24290](https://github.com/storybookjs/storybook/pull/24290), thanks [@roottool](https://github.com/roottool)!
+- Nextjs: Improve support for Windows-style paths - [#23695](https://github.com/storybookjs/storybook/pull/23695), thanks [@T99](https://github.com/T99)!
+- UI: Fix infinite hook call causing browsers to freeze - [#24291](https://github.com/storybookjs/storybook/pull/24291), thanks [@yannbf](https://github.com/yannbf)!
+- UI: Improve contrast ratio between focus / hover - [#24205](https://github.com/storybookjs/storybook/pull/24205), thanks [@chocoscoding](https://github.com/chocoscoding)!
+- Vite: Move mdx-plugin from @storybook/builder-vite to @storybook/addon-docs - [#24166](https://github.com/storybookjs/storybook/pull/24166), thanks [@bryanjtc](https://github.com/bryanjtc)!
+
## 7.5.0-alpha.3
- Build: Filter some manager errors - [#24217](https://github.com/storybookjs/storybook/pull/24217), thanks [@yannbf](https://github.com/yannbf)!
diff --git a/MIGRATION.md b/MIGRATION.md
index adfbcfa9caf8..898ee74f2fbf 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,7 +1,10 @@
Migration
+- [From version 7.4.0 to 7.5.0](#from-version-740-to-750)
+ - [`storyStoreV6` and `storiesOf` is deprecated](#storystorev6-and-storiesof-is-deprecated)
+ - [`storyIndexers` is replaced with `experimental_indexers`](#storyindexers-is-replaced-with-experimental_indexers)
- [From version 7.0.0 to 7.2.0](#from-version-700-to-720)
- - [Addon API is more type-strict](#addon-api-is-more-type-strict)
+ - [Addon API is more type-strict](#addon-api-is-more-type-strict)
- [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
- [7.0 breaking changes](#70-breaking-changes)
- [Dropped support for Node 15 and below](#dropped-support-for-node-15-and-below)
@@ -27,7 +30,7 @@
- [Deploying build artifacts](#deploying-build-artifacts)
- [Dropped support for file URLs](#dropped-support-for-file-urls)
- [Serving with nginx](#serving-with-nginx)
- - [Ignore story files from node\_modules](#ignore-story-files-from-node_modules)
+ - [Ignore story files from node_modules](#ignore-story-files-from-node_modules)
- [7.0 Core changes](#70-core-changes)
- [7.0 feature flags removed](#70-feature-flags-removed)
- [Story context is prepared before for supporting fine grained updates](#story-context-is-prepared-before-for-supporting-fine-grained-updates)
@@ -39,7 +42,7 @@
- [Addon-interactions: Interactions debugger is now default](#addon-interactions-interactions-debugger-is-now-default)
- [7.0 Vite changes](#70-vite-changes)
- [Vite builder uses Vite config automatically](#vite-builder-uses-vite-config-automatically)
- - [Vite cache moved to node\_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
+ - [Vite cache moved to node_modules/.cache/.vite-storybook](#vite-cache-moved-to-node_modulescachevite-storybook)
- [7.0 Webpack changes](#70-webpack-changes)
- [Webpack4 support discontinued](#webpack4-support-discontinued)
- [Babel mode v7 exclusively](#babel-mode-v7-exclusively)
@@ -90,7 +93,7 @@
- [Dropped addon-docs manual babel configuration](#dropped-addon-docs-manual-babel-configuration)
- [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
- [Autoplay in docs](#autoplay-in-docs)
- - [Removed STORYBOOK\_REACT\_CLASSES global](#removed-storybook_react_classes-global)
+ - [Removed STORYBOOK_REACT_CLASSES global](#removed-storybook_react_classes-global)
- [7.0 Deprecations and default changes](#70-deprecations-and-default-changes)
- [storyStoreV7 enabled by default](#storystorev7-enabled-by-default)
- [`Story` type deprecated](#story-type-deprecated)
@@ -303,6 +306,72 @@
- [Packages renaming](#packages-renaming)
- [Deprecated embedded addons](#deprecated-embedded-addons)
+## From version 7.4.0 to 7.5.0
+
+#### `storyStoreV6` and `storiesOf` is deprecated
+
+`storyStoreV6` and `storiesOf` is deprecated and will be completely removed in Storybook 8.0.0.
+
+If you're using `storiesOf` we recommend you migrate your stories to CSF3 for a better story writing experience.
+In many cases you can get started with the migration by using two migration scripts:
+
+```bash
+
+# 1. convert storiesOf to CSF
+npx storybook@latest migrate storiesof-to-csf --glob="**/*.stories.tsx" --parser=tsx
+
+# 2. Convert CSF 2 to CSF 3
+npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.tsx" --parser=tsx
+```
+
+They won't do a perfect migration so we recommend that you manually go through each file afterwards.
+
+Alternatively you can build your own `storiesOf` implementation by leveraging the new (experimental) indexer API ([documentation](https://storybook.js.org/docs/react/api/main-config-indexers), [migration](#storyindexers-is-replaced-with-experimental_indexers)). A proof of concept of such an implementation can be seen in [this StackBlitz demo](https://stackblitz.com/edit/github-h2rgfk?file=README.md). See the demo's `README.md` for a deeper explanation of the implementation.
+
+#### `storyIndexers` is replaced with `experimental_indexers`
+
+Defining custom indexers for stories has become a more official - yet still experimental - API which is now configured at `experimental_indexers` instead of `storyIndexers` in `main.ts`. `storyIndexers` has been deprecated and will be fully removed in version 8.0.0.
+
+The new experimental indexers are documented [here](https://storybook.js.org/docs/react/api/main-config-indexers). The most notable change from `storyIndexers` is that the indexer must now return a list of [`IndexInput`](https://github.com/storybookjs/storybook/blob/next/code/lib/types/src/modules/indexer.ts#L104-L148) instead of `CsfFile`. It's possible to construct an `IndexInput` from a `CsfFile` using the `CsfFile.indexInputs` getter.
+
+That means you can convert an existing story indexer like this:
+
+```diff
+// .storybook/main.ts
+
+import { readFileSync } from 'fs';
+import { loadCsf } from '@storybook/csf-tools';
+
+export default {
+- storyIndexers = (indexers) => {
+- const indexer = async (fileName, opts) => {
++ experimental_indexers = (indexers) => {
++ const createIndex = async (fileName, opts) => {
+ const code = readFileSync(fileName, { encoding: 'utf-8' });
+ const makeTitle = (userTitle) => {
+ // Do something with the auto title retrieved by Storybook
+ return userTitle;
+ };
+
+ // Parse the CSF file with makeTitle as a custom context
+- return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse();
++ return loadCsf(code, { ...compilationOptions, makeTitle, fileName }).parse().indexInputs;
+ };
+
+ return [
+ {
+ test: /(stories|story)\.[tj]sx?$/,
+- indexer,
++ createIndex,
+ },
+ ...(indexers || []),
+ ];
+ },
+};
+```
+
+As an addon author you can support previous versions of Storybook by setting both `storyIndexers` and `indexers_experimental`, without triggering the deprecation warning.
+
## From version 7.0.0 to 7.2.0
#### Addon API is more type-strict
@@ -312,6 +381,7 @@ When registering an addon using `@storybook/manager-api`, the addon API is now m
The `type` property is now a required field, and the `id` property should not be set anymore.
Here's a correct example:
+
```tsx
import { addons, types } from '@storybook/manager-api';
@@ -319,7 +389,7 @@ addons.register('my-addon', () => {
addons.add('my-addon/panel', {
type: types.PANEL,
title: 'My Addon',
- render: ({ active }) => active ? Hello World
: null,
+ render: ({ active }) => (active ? Hello World
: null),
});
});
```
@@ -870,16 +940,16 @@ Given the following `main.js`:
```js
export default {
- stories: ['../**/*.stories.*']
-}
+ stories: ['../**/*.stories.*'],
+};
```
If you want to restore the previous behavior to include `node_modules`, you can update it to:
```js
export default {
- stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*']
-}
+ stories: ['../**/*.stories.*', '../**/node_modules/**/*.stories.*'],
+};
```
The first glob would have node_modules automatically excluded by Storybook, and the second glob would include all stories that are under a nested `node_modules` directory.
@@ -1047,7 +1117,7 @@ Starting in 7.0, we drop support for Angular < 14
_Has automigration_
-In Storybook 6.4 we deprecated calling Storybook directly (e.g. `npm run storybook`) for Angular. In Storybook 7.0, we've removed it entirely. Instead, you have to set up the Storybook builder in your `angular.json` and execute `ng run :storybook` to start Storybook.
+In Storybook 6.4 we deprecated calling Storybook directly (e.g. `npm run storybook`) for Angular. In Storybook 7.0, we've removed it entirely. Instead, you have to set up the Storybook builder in your `angular.json` and execute `ng run :storybook` to start Storybook.
You can run `npx storybook@next automigrate` to automatically fix your configuration, or visit https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/README.md#how-do-i-migrate-to-an-angular-storybook-builder for instructions on how to set up Storybook for Angular manually.
diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
index c4502be4094b..20df88c627d6 100644
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
index 395b29c60e4e..dda5650f3129 100644
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Get UI feedback when an action is performed on an interactive element",
"keywords": [
"storybook",
diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
index dfe6faf33d59..3fb06769672d 100644
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Switch backgrounds to view components in different settings",
"keywords": [
"addon",
diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
index c831a18a9ebb..829829c166b9 100644
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-controls",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Interact with component inputs dynamically in the Storybook UI",
"keywords": [
"addon",
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index 02cd1a5a5254..39294a7573b8 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Document component usage and properties in Markdown",
"keywords": [
"addon",
diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
index 8349f8fb04bd..e2e95e6e04e3 100644
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-essentials",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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 4ef15be2efa1..1edd50d8d422 100644
--- a/code/addons/gfm/package.json
+++ b/code/addons/gfm/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-mdx-gfm",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "GitHub Flavored Markdown in Storybook",
"keywords": [
"addon",
diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
index af5845acebeb..22a9069a26a1 100644
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-highlight",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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 d405d8d1e255..237b5c71bf4b 100644
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-interactions",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Automate, test and debug user interactions",
"keywords": [
"storybook-addons",
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
index 28f73f6fa9d8..f26d6bc8c8e9 100644
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
diff --git a/code/addons/links/package.json b/code/addons/links/package.json
index 6b2fc478179b..dfbaeb62ac89 100644
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Link stories together to build demos and prototypes with your UI components",
"keywords": [
"addon",
diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
index 092c352a3d4d..4048a81c373e 100644
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-measure",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Inspect layouts by visualizing the box model",
"keywords": [
"storybook-addons",
diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
index 6421ad382c91..77bd3f840529 100644
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-outline",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Outline all elements with CSS to help with layout placement and alignment",
"keywords": [
"storybook-addons",
diff --git a/code/addons/storyshots-core/package.json b/code/addons/storyshots-core/package.json
index e4ab0ee9fc26..40c1efefff70 100644
--- a/code/addons/storyshots-core/package.json
+++ b/code/addons/storyshots-core/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Take a code snapshot of every story automatically with Jest",
"keywords": [
"addon",
diff --git a/code/addons/storyshots-puppeteer/package.json b/code/addons/storyshots-puppeteer/package.json
index 1663d29c3113..cad9d29cca7b 100644
--- a/code/addons/storyshots-puppeteer/package.json
+++ b/code/addons/storyshots-puppeteer/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storyshots-puppeteer",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Image snapshots addition to StoryShots based on puppeteer",
"keywords": [
"addon",
diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
index b3088fad58a2..afc05fcb6e9b 100644
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "View a story’s source code to see how it works and paste into your app",
"keywords": [
"addon",
diff --git a/code/addons/themes/docs/api.md b/code/addons/themes/docs/api.md
index 36138394d93b..b499dd945744 100644
--- a/code/addons/themes/docs/api.md
+++ b/code/addons/themes/docs/api.md
@@ -7,7 +7,7 @@
Takes your provider component, global styles, and theme(s)to wrap your stories in.
```js
-import { withThemeFromJSXProvider } from '@storybook/addon-styling';
+import { withThemeFromJSXProvider } from '@storybook/addon-themes';
export const decorators = [
withThemeFromJSXProvider({
@@ -36,7 +36,7 @@ Available options:
Takes your theme class names to apply your parent element to enable your theme(s).
```js
-import { withThemeByClassName } from '@storybook/addon-styling';
+import { withThemeByClassName } from '@storybook/addon-themes';
export const decorators = [
withThemeByClassName({
@@ -62,7 +62,7 @@ Available options:
Takes your theme names and data attribute to apply your parent element to enable your theme(s).
```js
-import { withThemeByDataAttribute } from '@storybook/addon-styling';
+import { withThemeByDataAttribute } from '@storybook/addon-themes';
export const decorators = [
withThemeByDataAttribute({
@@ -94,7 +94,7 @@ If none of these decorators work for your library there is still hope. We've pro
Pulls the selected theme from storybook's global state.
```js
-import { DecoratorHelpers } from '@storybook/addon-styling';
+import { DecoratorHelpers } from '@storybook/addon-themes';
const { pluckThemeFromContext } = DecoratorHelpers;
export const myCustomDecorator =
@@ -111,7 +111,7 @@ export const myCustomDecorator =
Returns the theme parameters for this addon.
```js
-import { DecoratorHelpers } from '@storybook/addon-styling';
+import { DecoratorHelpers } from '@storybook/addon-themes';
const { useThemeParameters } = DecoratorHelpers;
export const myCustomDecorator =
@@ -128,7 +128,7 @@ export const myCustomDecorator =
Used to register the themes and defaultTheme with the addon state.
```js
-import { DecoratorHelpers } from '@storybook/addon-styling';
+import { DecoratorHelpers } from '@storybook/addon-themes';
const { initializeThemeState } = DecoratorHelpers;
export const myCustomDecorator = ({ themes, defaultState, ...rest }) => {
@@ -147,7 +147,7 @@ Let's use Vuetify as an example. Vuetify uses it's own global state to know whic
```js
// .storybook/withVeutifyTheme.decorator.js
-import { DecoratorHelpers } from '@storybook/addon-styling';
+import { DecoratorHelpers } from '@storybook/addon-themes';
import { useTheme } from 'vuetify';
const { initializeThemeState, pluckThemeFromContext, useThemeParameters } = DecoratorHelpers;
diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
index 402c6f53b499..8dc2fdac1a59 100644
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-themes",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Switch between multiple themes for you components in Storybook",
"keywords": [
"css",
diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
index 8d903e8329bf..225542096e83 100644
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-toolbars",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Create your own toolbar items that control story rendering",
"keywords": [
"addon",
diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
index 8d0eebe2da4e..e351d612d53f 100644
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
"keywords": [
"addon",
diff --git a/code/builders/builder-manager/package.json b/code/builders/builder-manager/package.json
index aa89f1a4a2dd..e588c64a0f9e 100644
--- a/code/builders/builder-manager/package.json
+++ b/code/builders/builder-manager/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/builder-manager",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook manager builder",
"keywords": [
"storybook"
diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index ad90bd41016e..6e0cc80db781 100644
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/builder-vite",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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 3ebcb46cb095..a9402b286f33 100644
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/builder-webpack5",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
diff --git a/code/deprecated/addons/package.json b/code/deprecated/addons/package.json
index bb239b43c391..5b5c38aac14d 100644
--- a/code/deprecated/addons/package.json
+++ b/code/deprecated/addons/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addons",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook addons store",
"keywords": [
"storybook"
diff --git a/code/deprecated/channel-postmessage/package.json b/code/deprecated/channel-postmessage/package.json
index 7ec7734fa6b1..aa0b4152b062 100644
--- a/code/deprecated/channel-postmessage/package.json
+++ b/code/deprecated/channel-postmessage/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/channel-postmessage",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "",
"keywords": [
"storybook"
diff --git a/code/deprecated/channel-websocket/package.json b/code/deprecated/channel-websocket/package.json
index 5812dd647c76..c0dcf7c19306 100644
--- a/code/deprecated/channel-websocket/package.json
+++ b/code/deprecated/channel-websocket/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/channel-websocket",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "",
"keywords": [
"storybook"
diff --git a/code/deprecated/client-api/package.json b/code/deprecated/client-api/package.json
index cce9a3e808cf..dfe7cc6c40d4 100644
--- a/code/deprecated/client-api/package.json
+++ b/code/deprecated/client-api/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/client-api",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook Client API",
"keywords": [
"storybook"
diff --git a/code/deprecated/core-client/package.json b/code/deprecated/core-client/package.json
index 041f5f8e8f48..40d57044f9b0 100644
--- a/code/deprecated/core-client/package.json
+++ b/code/deprecated/core-client/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-client",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
diff --git a/code/deprecated/manager-api-shim/package.json b/code/deprecated/manager-api-shim/package.json
index ba69b2d1ea3c..0fa3e479a599 100644
--- a/code/deprecated/manager-api-shim/package.json
+++ b/code/deprecated/manager-api-shim/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/api",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook Manager API (facade)",
"keywords": [
"storybook"
diff --git a/code/deprecated/preview-web/package.json b/code/deprecated/preview-web/package.json
index dacea129e8e3..b5845b28acd9 100644
--- a/code/deprecated/preview-web/package.json
+++ b/code/deprecated/preview-web/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preview-web",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "",
"keywords": [
"storybook"
diff --git a/code/deprecated/store/package.json b/code/deprecated/store/package.json
index 560228fe6710..2362d4bab5c7 100644
--- a/code/deprecated/store/package.json
+++ b/code/deprecated/store/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/store",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "",
"keywords": [
"storybook"
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index 9bc04b9ad933..bdcd21c0ff44 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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 f5155feaf976..7de04d5536d1 100644
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/ember",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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/html-vite/package.json b/code/frameworks/html-vite/package.json
index 8662aafe6a55..dfddffd7886a 100644
--- a/code/frameworks/html-vite/package.json
+++ b/code/frameworks/html-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/html-vite",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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 bfdf6a1a1bd2..02d5ef123a63 100644
--- a/code/frameworks/html-webpack5/package.json
+++ b/code/frameworks/html-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/html-webpack5",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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 a9142100cf8d..a5fae0c402c5 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/nextjs",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook for Next.js",
"keywords": [
"storybook",
@@ -80,13 +80,13 @@
},
"dependencies": {
"@babel/core": "^7.22.9",
- "@babel/plugin-proposal-class-properties": "^7.18.6",
- "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
- "@babel/plugin-proposal-numeric-separator": "^7.18.6",
- "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
"@babel/plugin-syntax-bigint": "^7.8.3",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-syntax-import-assertions": "^7.22.5",
+ "@babel/plugin-transform-class-properties": "^7.22.5",
+ "@babel/plugin-transform-export-namespace-from": "^7.22.11",
+ "@babel/plugin-transform-numeric-separator": "^7.22.11",
+ "@babel/plugin-transform-object-rest-spread": "^7.22.15",
"@babel/plugin-transform-runtime": "^7.22.9",
"@babel/preset-env": "^7.22.9",
"@babel/preset-react": "^7.22.5",
diff --git a/code/frameworks/nextjs/src/babel/preset.ts b/code/frameworks/nextjs/src/babel/preset.ts
index 08a6c18e4312..46dddd1d1659 100644
--- a/code/frameworks/nextjs/src/babel/preset.ts
+++ b/code/frameworks/nextjs/src/babel/preset.ts
@@ -142,9 +142,9 @@ export default (api: any, options: NextBabelPresetOptions = {}): BabelPreset =>
require('@babel/plugin-syntax-dynamic-import'),
require('@babel/plugin-syntax-import-assertions'),
require('./plugins/react-loadable-plugin'),
- [require('@babel/plugin-proposal-class-properties'), options['class-properties'] || {}],
+ [require('@babel/plugin-transform-class-properties'), options['class-properties'] || {}],
[
- require('@babel/plugin-proposal-object-rest-spread'),
+ require('@babel/plugin-transform-object-rest-spread'),
{
useBuiltIns: true,
},
@@ -172,8 +172,8 @@ export default (api: any, options: NextBabelPresetOptions = {}): BabelPreset =>
isServer && require('@babel/plugin-syntax-bigint'),
// Always compile numeric separator because the resulting number is
// smaller.
- require('@babel/plugin-proposal-numeric-separator'),
- require('@babel/plugin-proposal-export-namespace-from'),
+ require('@babel/plugin-transform-numeric-separator'),
+ require('@babel/plugin-transform-export-namespace-from'),
].filter(Boolean),
};
};
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index ba3bf1a368fb..3df266adecec 100644
--- a/code/frameworks/preact-vite/package.json
+++ b/code/frameworks/preact-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preact-vite",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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 22026ace45e4..8d4d7ecb9beb 100644
--- a/code/frameworks/preact-webpack5/package.json
+++ b/code/frameworks/preact-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preact-webpack5",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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 3a56dd4bb77e..15026f5f0af8 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react-vite",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
"keywords": [
"storybook"
@@ -52,9 +52,8 @@
"@storybook/builder-vite": "workspace:*",
"@storybook/react": "workspace:*",
"@vitejs/plugin-react": "^3.0.1",
- "ast-types": "^0.14.2",
"magic-string": "^0.30.0",
- "react-docgen": "6.0.0-alpha.3"
+ "react-docgen": "^6.0.2"
},
"devDependencies": {
"@types/node": "^16.0.0",
diff --git a/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts b/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts
index efa6717b47b2..01889ddf9dcf 100644
--- a/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts
+++ b/code/frameworks/react-vite/src/plugins/docgen-handlers/actualNameHandler.ts
@@ -9,40 +9,46 @@
* directly from displayNameHandler, using the same approach as babel-plugin-react-docgen.
*/
-import { namedTypes as t } from 'ast-types';
-import type { NodePath } from 'ast-types/lib/node-path';
-import { getNameOrValue, isReactForwardRefCall } from 'react-docgen/dist/utils';
-import type { Importer } from 'react-docgen/dist/parse';
-import type Documentation from 'react-docgen/dist/Documentation';
+import type { Handler, NodePath, babelTypes as t } from 'react-docgen';
+import { utils } from 'react-docgen';
-export default function actualNameHandler(
- documentation: Documentation,
- path: NodePath,
- importer: Importer
-): void {
- if (t.ClassDeclaration.check(path.node) || t.FunctionDeclaration.check(path.node)) {
- documentation.set('actualName', getNameOrValue(path.get('id')));
+const { getNameOrValue, isReactForwardRefCall } = utils;
+
+const actualNameHandler: Handler = function actualNameHandler(documentation, componentDefinition) {
+ if (
+ (componentDefinition.isClassDeclaration() || componentDefinition.isFunctionDeclaration()) &&
+ componentDefinition.has('id')
+ ) {
+ documentation.set(
+ 'actualName',
+ getNameOrValue(componentDefinition.get('id') as NodePath)
+ );
} else if (
- t.ArrowFunctionExpression.check(path.node) ||
- t.FunctionExpression.check(path.node) ||
- isReactForwardRefCall(path, importer)
+ componentDefinition.isArrowFunctionExpression() ||
+ componentDefinition.isFunctionExpression() ||
+ isReactForwardRefCall(componentDefinition)
) {
- let currentPath = path;
- while (currentPath.parent) {
- if (t.VariableDeclarator.check(currentPath.parent.node)) {
- documentation.set('actualName', getNameOrValue(currentPath.parent.get('id')));
+ let currentPath: NodePath = componentDefinition;
+
+ while (currentPath.parentPath) {
+ if (currentPath.parentPath.isVariableDeclarator()) {
+ documentation.set('actualName', getNameOrValue(currentPath.parentPath.get('id')));
return;
}
- if (t.AssignmentExpression.check(currentPath.parent.node)) {
- const leftPath = currentPath.parent.get('left');
- if (t.Identifier.check(leftPath.node) || t.Literal.check(leftPath.node)) {
+ if (currentPath.parentPath.isAssignmentExpression()) {
+ const leftPath = currentPath.parentPath.get('left');
+
+ if (leftPath.isIdentifier() || leftPath.isLiteral()) {
documentation.set('actualName', getNameOrValue(leftPath));
return;
}
}
- currentPath = currentPath.parent;
+
+ currentPath = currentPath.parentPath;
}
// Could not find an actual name
documentation.set('actualName', '');
}
-}
+};
+
+export default actualNameHandler;
diff --git a/code/frameworks/react-vite/src/plugins/react-docgen.ts b/code/frameworks/react-vite/src/plugins/react-docgen.ts
index 0561456f8618..9c35568f45ba 100644
--- a/code/frameworks/react-vite/src/plugins/react-docgen.ts
+++ b/code/frameworks/react-vite/src/plugins/react-docgen.ts
@@ -1,22 +1,23 @@
import path from 'path';
import { createFilter } from '@rollup/pluginutils';
+import type { Documentation } from 'react-docgen';
import {
+ ERROR_CODES,
parse,
- handlers as docgenHandlers,
- resolver as docgenResolver,
- importers as docgenImporters,
+ builtinHandlers as docgenHandlers,
+ builtinResolvers as docgenResolver,
+ builtinImporters as docgenImporters,
} from 'react-docgen';
-import type { DocumentationObject } from 'react-docgen/dist/Documentation';
import MagicString from 'magic-string';
import type { PluginOption } from 'vite';
import actualNameHandler from './docgen-handlers/actualNameHandler';
-type DocObj = DocumentationObject & { actualName: string };
+type DocObj = Documentation & { actualName: string };
// TODO: None of these are able to be overridden, so `default` is aspirational here.
const defaultHandlers = Object.values(docgenHandlers).map((handler) => handler);
-const defaultResolver = docgenResolver.findAllExportedComponentDefinitions;
-const defaultImporter = docgenImporters.makeFsImporter();
+const defaultResolver = new docgenResolver.FindExportedDefinitionsResolver();
+const defaultImporter = docgenImporters.fsImporter;
const handlers = [...defaultHandlers, actualNameHandler];
type Options = {
@@ -39,8 +40,9 @@ export function reactDocgen({
if (!filter(relPath)) return;
try {
- // Since we're using `findAllExportedComponentDefinitions`, this will always be an array.
- const docgenResults = parse(src, defaultResolver, handlers, {
+ const docgenResults = parse(src, {
+ resolver: defaultResolver,
+ handlers,
importer: defaultImporter,
filename: id,
}) as DocObj[];
@@ -59,10 +61,12 @@ export function reactDocgen({
code: s.toString(),
map: s.generateMap(),
};
- } catch (e) {
- // Usually this is just an error from react-docgen that it couldn't find a component
- // Only uncomment for troubleshooting
- // console.error(e);
+ } catch (e: any) {
+ // Ignore the error when react-docgen cannot find a react component
+ if (e.code === ERROR_CODES.MISSING_DEFINITION) {
+ return;
+ }
+ throw e;
}
},
};
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index 63bccc4cdded..e767d5e14b42 100644
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react-webpack5",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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 e51a150727e6..3997eaffc5e2 100644
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/server-webpack5",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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 acb1b7dbd301..5eabe2366d49 100644
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte-vite",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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 1c2724ac75eb..97ca845f9087 100644
--- a/code/frameworks/svelte-webpack5/package.json
+++ b/code/frameworks/svelte-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte-webpack5",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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 f67a365c5a07..8b9f808420b5 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/sveltekit",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook for SvelteKit",
"keywords": [
"storybook",
diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json
index a555e6a25e53..d081aa9f1c37 100644
--- a/code/frameworks/vue-vite/package.json
+++ b/code/frameworks/vue-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue-vite",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json
index 0cf9250fa49e..2c6f6d8d6fc2 100644
--- a/code/frameworks/vue-webpack5/package.json
+++ b/code/frameworks/vue-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue-webpack5",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 8fa49e0856c2..440d63740f21 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue3-vite",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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 dbbbdd863a4f..cf035615f7b9 100644
--- a/code/frameworks/vue3-webpack5/package.json
+++ b/code/frameworks/vue3-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue3-webpack5",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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 f5ca940fdef0..1956f8b0047a 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": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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 83b6e574e9a5..17b38ad48112 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": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
"keywords": [
"lit",
diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json
index 2fbf433ebd9b..7108ca6958d9 100644
--- a/code/lib/channels/package.json
+++ b/code/lib/channels/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/channels",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index 5a91ab003d78..3802f4407bb8 100644
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
{
"name": "sb",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook CLI",
"keywords": [
"storybook"
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index cd624199accb..de2d447d9f7a 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
{
"name": "storybook",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook CLI",
"keywords": [
"storybook"
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index 9a6f9539aaaa..a089338f0950 100644
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/cli",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook's CLI - easiest method of adding storybook to your projects",
"keywords": [
"cli",
diff --git a/code/lib/cli/src/project_types.ts b/code/lib/cli/src/project_types.ts
index 25c058dee818..05c64b402423 100644
--- a/code/lib/cli/src/project_types.ts
+++ b/code/lib/cli/src/project_types.ts
@@ -5,11 +5,6 @@ function ltMajor(versionRange: string, major: number) {
return validRange(versionRange) && minVersion(versionRange).major < major;
}
-function gtMajor(versionRange: string, major: number) {
- // Uses validRange to avoid a throw from minVersion if an invalid range gets passed
- return validRange(versionRange) && minVersion(versionRange).major > major;
-}
-
function eqMajor(versionRange: string, major: number) {
// Uses validRange to avoid a throw from minVersion if an invalid range gets passed
return validRange(versionRange) && minVersion(versionRange).major === major;
@@ -162,9 +157,7 @@ export const supportedTemplates: TemplateConfiguration[] = [
},
{
preset: ProjectType.NEXTJS,
- dependencies: {
- next: (versionRange) => eqMajor(versionRange, 9) || gtMajor(versionRange, 9),
- },
+ dependencies: ['next'],
matcherFunction: ({ dependencies }) => {
return dependencies.every(Boolean);
},
diff --git a/code/lib/cli/src/sandbox-templates.ts b/code/lib/cli/src/sandbox-templates.ts
index 69e858f1d14f..799de8e593ee 100644
--- a/code/lib/cli/src/sandbox-templates.ts
+++ b/code/lib/cli/src/sandbox-templates.ts
@@ -576,7 +576,7 @@ export const merged: TemplateKey[] = [
...normal,
'react-webpack/18-ts',
'react-webpack/17-ts',
- 'angular-cli/15-ts',
+ // 'angular-cli/15-ts', // TODO: re-enable when building the storybook works again
'preact-webpack5/default-ts',
'preact-vite/default-ts',
'html-webpack/default',
diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts
index 574333730804..ef712eb5df59 100644
--- a/code/lib/cli/src/versions.ts
+++ b/code/lib/cli/src/versions.ts
@@ -1,97 +1,97 @@
// auto generated file, do not edit
export default {
- '@storybook/addon-a11y': '7.5.0-alpha.3',
- '@storybook/addon-actions': '7.5.0-alpha.3',
- '@storybook/addon-backgrounds': '7.5.0-alpha.3',
- '@storybook/addon-controls': '7.5.0-alpha.3',
- '@storybook/addon-docs': '7.5.0-alpha.3',
- '@storybook/addon-essentials': '7.5.0-alpha.3',
- '@storybook/addon-highlight': '7.5.0-alpha.3',
- '@storybook/addon-interactions': '7.5.0-alpha.3',
- '@storybook/addon-jest': '7.5.0-alpha.3',
- '@storybook/addon-links': '7.5.0-alpha.3',
- '@storybook/addon-mdx-gfm': '7.5.0-alpha.3',
- '@storybook/addon-measure': '7.5.0-alpha.3',
- '@storybook/addon-outline': '7.5.0-alpha.3',
- '@storybook/addon-themes': '7.5.0-alpha.3',
- '@storybook/addon-storyshots': '7.5.0-alpha.3',
- '@storybook/addon-storyshots-puppeteer': '7.5.0-alpha.3',
- '@storybook/addon-storysource': '7.5.0-alpha.3',
- '@storybook/addon-toolbars': '7.5.0-alpha.3',
- '@storybook/addon-viewport': '7.5.0-alpha.3',
- '@storybook/addons': '7.5.0-alpha.3',
- '@storybook/angular': '7.5.0-alpha.3',
- '@storybook/api': '7.5.0-alpha.3',
- '@storybook/blocks': '7.5.0-alpha.3',
- '@storybook/builder-manager': '7.5.0-alpha.3',
- '@storybook/builder-vite': '7.5.0-alpha.3',
- '@storybook/builder-webpack5': '7.5.0-alpha.3',
- '@storybook/channel-postmessage': '7.5.0-alpha.3',
- '@storybook/channel-websocket': '7.5.0-alpha.3',
- '@storybook/channels': '7.5.0-alpha.3',
- '@storybook/cli': '7.5.0-alpha.3',
- '@storybook/client-api': '7.5.0-alpha.3',
- '@storybook/client-logger': '7.5.0-alpha.3',
- '@storybook/codemod': '7.5.0-alpha.3',
- '@storybook/components': '7.5.0-alpha.3',
- '@storybook/core-client': '7.5.0-alpha.3',
- '@storybook/core-common': '7.5.0-alpha.3',
- '@storybook/core-events': '7.5.0-alpha.3',
- '@storybook/core-server': '7.5.0-alpha.3',
- '@storybook/core-webpack': '7.5.0-alpha.3',
- '@storybook/csf-plugin': '7.5.0-alpha.3',
- '@storybook/csf-tools': '7.5.0-alpha.3',
- '@storybook/docs-tools': '7.5.0-alpha.3',
- '@storybook/ember': '7.5.0-alpha.3',
- '@storybook/html': '7.5.0-alpha.3',
- '@storybook/html-vite': '7.5.0-alpha.3',
- '@storybook/html-webpack5': '7.5.0-alpha.3',
- '@storybook/instrumenter': '7.5.0-alpha.3',
- '@storybook/manager': '7.5.0-alpha.3',
- '@storybook/manager-api': '7.5.0-alpha.3',
- '@storybook/nextjs': '7.5.0-alpha.3',
- '@storybook/node-logger': '7.5.0-alpha.3',
- '@storybook/postinstall': '7.5.0-alpha.3',
- '@storybook/preact': '7.5.0-alpha.3',
- '@storybook/preact-vite': '7.5.0-alpha.3',
- '@storybook/preact-webpack5': '7.5.0-alpha.3',
- '@storybook/preset-create-react-app': '7.5.0-alpha.3',
- '@storybook/preset-html-webpack': '7.5.0-alpha.3',
- '@storybook/preset-preact-webpack': '7.5.0-alpha.3',
- '@storybook/preset-react-webpack': '7.5.0-alpha.3',
- '@storybook/preset-server-webpack': '7.5.0-alpha.3',
- '@storybook/preset-svelte-webpack': '7.5.0-alpha.3',
- '@storybook/preset-vue-webpack': '7.5.0-alpha.3',
- '@storybook/preset-vue3-webpack': '7.5.0-alpha.3',
- '@storybook/preset-web-components-webpack': '7.5.0-alpha.3',
- '@storybook/preview': '7.5.0-alpha.3',
- '@storybook/preview-api': '7.5.0-alpha.3',
- '@storybook/preview-web': '7.5.0-alpha.3',
- '@storybook/react': '7.5.0-alpha.3',
- '@storybook/react-dom-shim': '7.5.0-alpha.3',
- '@storybook/react-vite': '7.5.0-alpha.3',
- '@storybook/react-webpack5': '7.5.0-alpha.3',
- '@storybook/router': '7.5.0-alpha.3',
- '@storybook/server': '7.5.0-alpha.3',
- '@storybook/server-webpack5': '7.5.0-alpha.3',
- '@storybook/source-loader': '7.5.0-alpha.3',
- '@storybook/store': '7.5.0-alpha.3',
- '@storybook/svelte': '7.5.0-alpha.3',
- '@storybook/svelte-vite': '7.5.0-alpha.3',
- '@storybook/svelte-webpack5': '7.5.0-alpha.3',
- '@storybook/sveltekit': '7.5.0-alpha.3',
- '@storybook/telemetry': '7.5.0-alpha.3',
- '@storybook/theming': '7.5.0-alpha.3',
- '@storybook/types': '7.5.0-alpha.3',
- '@storybook/vue': '7.5.0-alpha.3',
- '@storybook/vue-vite': '7.5.0-alpha.3',
- '@storybook/vue-webpack5': '7.5.0-alpha.3',
- '@storybook/vue3': '7.5.0-alpha.3',
- '@storybook/vue3-vite': '7.5.0-alpha.3',
- '@storybook/vue3-webpack5': '7.5.0-alpha.3',
- '@storybook/web-components': '7.5.0-alpha.3',
- '@storybook/web-components-vite': '7.5.0-alpha.3',
- '@storybook/web-components-webpack5': '7.5.0-alpha.3',
- sb: '7.5.0-alpha.3',
- storybook: '7.5.0-alpha.3',
+ '@storybook/addon-a11y': '7.5.0-alpha.4',
+ '@storybook/addon-actions': '7.5.0-alpha.4',
+ '@storybook/addon-backgrounds': '7.5.0-alpha.4',
+ '@storybook/addon-controls': '7.5.0-alpha.4',
+ '@storybook/addon-docs': '7.5.0-alpha.4',
+ '@storybook/addon-essentials': '7.5.0-alpha.4',
+ '@storybook/addon-highlight': '7.5.0-alpha.4',
+ '@storybook/addon-interactions': '7.5.0-alpha.4',
+ '@storybook/addon-jest': '7.5.0-alpha.4',
+ '@storybook/addon-links': '7.5.0-alpha.4',
+ '@storybook/addon-mdx-gfm': '7.5.0-alpha.4',
+ '@storybook/addon-measure': '7.5.0-alpha.4',
+ '@storybook/addon-outline': '7.5.0-alpha.4',
+ '@storybook/addon-themes': '7.5.0-alpha.4',
+ '@storybook/addon-storyshots': '7.5.0-alpha.4',
+ '@storybook/addon-storyshots-puppeteer': '7.5.0-alpha.4',
+ '@storybook/addon-storysource': '7.5.0-alpha.4',
+ '@storybook/addon-toolbars': '7.5.0-alpha.4',
+ '@storybook/addon-viewport': '7.5.0-alpha.4',
+ '@storybook/addons': '7.5.0-alpha.4',
+ '@storybook/angular': '7.5.0-alpha.4',
+ '@storybook/api': '7.5.0-alpha.4',
+ '@storybook/blocks': '7.5.0-alpha.4',
+ '@storybook/builder-manager': '7.5.0-alpha.4',
+ '@storybook/builder-vite': '7.5.0-alpha.4',
+ '@storybook/builder-webpack5': '7.5.0-alpha.4',
+ '@storybook/channel-postmessage': '7.5.0-alpha.4',
+ '@storybook/channel-websocket': '7.5.0-alpha.4',
+ '@storybook/channels': '7.5.0-alpha.4',
+ '@storybook/cli': '7.5.0-alpha.4',
+ '@storybook/client-api': '7.5.0-alpha.4',
+ '@storybook/client-logger': '7.5.0-alpha.4',
+ '@storybook/codemod': '7.5.0-alpha.4',
+ '@storybook/components': '7.5.0-alpha.4',
+ '@storybook/core-client': '7.5.0-alpha.4',
+ '@storybook/core-common': '7.5.0-alpha.4',
+ '@storybook/core-events': '7.5.0-alpha.4',
+ '@storybook/core-server': '7.5.0-alpha.4',
+ '@storybook/core-webpack': '7.5.0-alpha.4',
+ '@storybook/csf-plugin': '7.5.0-alpha.4',
+ '@storybook/csf-tools': '7.5.0-alpha.4',
+ '@storybook/docs-tools': '7.5.0-alpha.4',
+ '@storybook/ember': '7.5.0-alpha.4',
+ '@storybook/html': '7.5.0-alpha.4',
+ '@storybook/html-vite': '7.5.0-alpha.4',
+ '@storybook/html-webpack5': '7.5.0-alpha.4',
+ '@storybook/instrumenter': '7.5.0-alpha.4',
+ '@storybook/manager': '7.5.0-alpha.4',
+ '@storybook/manager-api': '7.5.0-alpha.4',
+ '@storybook/nextjs': '7.5.0-alpha.4',
+ '@storybook/node-logger': '7.5.0-alpha.4',
+ '@storybook/postinstall': '7.5.0-alpha.4',
+ '@storybook/preact': '7.5.0-alpha.4',
+ '@storybook/preact-vite': '7.5.0-alpha.4',
+ '@storybook/preact-webpack5': '7.5.0-alpha.4',
+ '@storybook/preset-create-react-app': '7.5.0-alpha.4',
+ '@storybook/preset-html-webpack': '7.5.0-alpha.4',
+ '@storybook/preset-preact-webpack': '7.5.0-alpha.4',
+ '@storybook/preset-react-webpack': '7.5.0-alpha.4',
+ '@storybook/preset-server-webpack': '7.5.0-alpha.4',
+ '@storybook/preset-svelte-webpack': '7.5.0-alpha.4',
+ '@storybook/preset-vue-webpack': '7.5.0-alpha.4',
+ '@storybook/preset-vue3-webpack': '7.5.0-alpha.4',
+ '@storybook/preset-web-components-webpack': '7.5.0-alpha.4',
+ '@storybook/preview': '7.5.0-alpha.4',
+ '@storybook/preview-api': '7.5.0-alpha.4',
+ '@storybook/preview-web': '7.5.0-alpha.4',
+ '@storybook/react': '7.5.0-alpha.4',
+ '@storybook/react-dom-shim': '7.5.0-alpha.4',
+ '@storybook/react-vite': '7.5.0-alpha.4',
+ '@storybook/react-webpack5': '7.5.0-alpha.4',
+ '@storybook/router': '7.5.0-alpha.4',
+ '@storybook/server': '7.5.0-alpha.4',
+ '@storybook/server-webpack5': '7.5.0-alpha.4',
+ '@storybook/source-loader': '7.5.0-alpha.4',
+ '@storybook/store': '7.5.0-alpha.4',
+ '@storybook/svelte': '7.5.0-alpha.4',
+ '@storybook/svelte-vite': '7.5.0-alpha.4',
+ '@storybook/svelte-webpack5': '7.5.0-alpha.4',
+ '@storybook/sveltekit': '7.5.0-alpha.4',
+ '@storybook/telemetry': '7.5.0-alpha.4',
+ '@storybook/theming': '7.5.0-alpha.4',
+ '@storybook/types': '7.5.0-alpha.4',
+ '@storybook/vue': '7.5.0-alpha.4',
+ '@storybook/vue-vite': '7.5.0-alpha.4',
+ '@storybook/vue-webpack5': '7.5.0-alpha.4',
+ '@storybook/vue3': '7.5.0-alpha.4',
+ '@storybook/vue3-vite': '7.5.0-alpha.4',
+ '@storybook/vue3-webpack5': '7.5.0-alpha.4',
+ '@storybook/web-components': '7.5.0-alpha.4',
+ '@storybook/web-components-vite': '7.5.0-alpha.4',
+ '@storybook/web-components-webpack5': '7.5.0-alpha.4',
+ sb: '7.5.0-alpha.4',
+ storybook: '7.5.0-alpha.4',
};
diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json
index df614d6de3d0..f63b74e572f4 100644
--- a/code/lib/client-logger/package.json
+++ b/code/lib/client-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/client-logger",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index 66fb6082f246..fa8caf281dea 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/codemod",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "A collection of codemod scripts written with JSCodeshift",
"keywords": [
"storybook"
diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json
index 16b7c738a9be..050031f4cb70 100644
--- a/code/lib/core-common/package.json
+++ b/code/lib/core-common/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-common",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json
index 332c51c87988..dd9fbd3c7757 100644
--- a/code/lib/core-events/package.json
+++ b/code/lib/core-events/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-events",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Event names used in storybook core",
"keywords": [
"storybook"
diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json
index 8c10b00e73ed..fc62f70ccc6a 100644
--- a/code/lib/core-server/package.json
+++ b/code/lib/core-server/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-server",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
@@ -94,7 +94,6 @@
"prompts": "^2.4.0",
"read-pkg-up": "^7.0.1",
"semver": "^7.3.7",
- "serve-favicon": "^2.5.0",
"telejson": "^7.2.0",
"tiny-invariant": "^1.3.1",
"ts-dedent": "^2.0.0",
@@ -108,7 +107,6 @@
"@types/compression": "^1.7.0",
"@types/ip": "^1.1.0",
"@types/node-fetch": "^2.5.7",
- "@types/serve-favicon": "^2.5.2",
"@types/ws": "^8",
"boxen": "^5.1.2",
"jest-os-detection": "^1.3.1",
diff --git a/code/lib/core-server/src/build-static.ts b/code/lib/core-server/src/build-static.ts
index 8782337a6db0..55dc59fbaac1 100644
--- a/code/lib/core-server/src/build-static.ts
+++ b/code/lib/core-server/src/build-static.ts
@@ -2,7 +2,7 @@ import chalk from 'chalk';
import { copy, emptyDir, ensureDir } from 'fs-extra';
import { dirname, isAbsolute, join, resolve } from 'path';
import { global } from '@storybook/global';
-import { logger } from '@storybook/node-logger';
+import { deprecate, logger } from '@storybook/node-logger';
import { telemetry, getPrecedingUpgrade } from '@storybook/telemetry';
import type {
BuilderOptions,
@@ -23,6 +23,7 @@ import {
import { ConflictingStaticDirConfigError } from '@storybook/core-events/server-errors';
import isEqual from 'lodash/isEqual.js';
+import dedent from 'ts-dedent';
import { outputStats } from './utils/output-stats';
import {
copyAllStaticFiles,
@@ -123,6 +124,13 @@ export async function buildStaticStandalone(options: BuildStaticStandaloneOption
presets.apply('docs', {}),
]);
+ if (features?.storyStoreV7 === false) {
+ deprecate(
+ dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead.
+ - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated`
+ );
+ }
+
const fullOptions: Options = {
...options,
presets,
diff --git a/code/lib/core-server/src/dev-server.ts b/code/lib/core-server/src/dev-server.ts
index 4619caf29e72..1e8de546880e 100644
--- a/code/lib/core-server/src/dev-server.ts
+++ b/code/lib/core-server/src/dev-server.ts
@@ -5,8 +5,9 @@ import invariant from 'tiny-invariant';
import type { CoreConfig, Options, StorybookConfig } from '@storybook/types';
import { logConfig } from '@storybook/core-common';
+import { deprecate, logger } from '@storybook/node-logger';
-import { logger } from '@storybook/node-logger';
+import dedent from 'ts-dedent';
import { MissingBuilderError } from '@storybook/core-events/server-errors';
import { getMiddleware } from './utils/middleware';
import { getServerAddresses } from './utils/server-address';
@@ -37,6 +38,13 @@ export async function storybookDevServer(options: Options) {
getServerChannel(server)
);
+ if (features?.storyStoreV7 === false) {
+ deprecate(
+ dedent`storyStoreV6 is deprecated, please migrate to storyStoreV7 instead.
+ - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storystorev6-and-storiesof-is-deprecated`
+ );
+ }
+
let indexError: Error | undefined;
// try get index generator, if failed, send telemetry without storyCount, then rethrow the error
const initializedStoryIndexGenerator: Promise =
diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
index 7b03427729d2..0f847b8917a1 100644
--- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts
+++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts
@@ -25,7 +25,7 @@ import type {
} from '@storybook/types';
import { userOrAutoTitleFromSpecifier, sortStoriesV7 } from '@storybook/preview-api';
import { commonGlobOptions, normalizeStoryPath } from '@storybook/core-common';
-import { logger, once } from '@storybook/node-logger';
+import { deprecate, logger, once } from '@storybook/node-logger';
import { getStorySortParameter } from '@storybook/csf-tools';
import { storyNameFromExport, toId } from '@storybook/csf';
import { analyze } from '@storybook/docs-mdx';
@@ -119,12 +119,6 @@ export class StoryIndexGenerator {
public readonly options: StoryIndexGeneratorOptions
) {
this.specifierToCache = new Map();
- if (options.storyIndexers.length > 1) {
- // TODO: write migration notes before enabling this warning
- // deprecate(
- // "'storyIndexers' is deprecated, please use 'indexers' instead. See migration notes at XXX"
- // );
- }
}
async initialize() {
@@ -298,6 +292,10 @@ export class StoryIndexGenerator {
invariant(indexer, `No matching indexer found for ${absolutePath}`);
if (indexer.indexer) {
+ deprecate(
+ dedent`'storyIndexers' is deprecated, please use 'experimental_indexers' instead. Found a deprecated indexer with matcher: ${indexer.test}
+ - Refer to the migration guide at https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#storyindexers-is-replaced-with-experimental_indexers`
+ );
return this.extractStoriesFromDeprecatedIndexer({
indexer: indexer.indexer,
indexerOptions: { makeTitle: defaultMakeTitle },
diff --git a/code/lib/core-server/src/utils/server-statics.ts b/code/lib/core-server/src/utils/server-statics.ts
index b2d5a5e3cbce..19d569cfcc06 100644
--- a/code/lib/core-server/src/utils/server-statics.ts
+++ b/code/lib/core-server/src/utils/server-statics.ts
@@ -3,16 +3,16 @@ import type { Options, StorybookConfig } from '@storybook/types';
import { getDirectoryFromWorkingDir } from '@storybook/core-common';
import { ConflictingStaticDirConfigError } from '@storybook/core-events/server-errors';
import chalk from 'chalk';
+import type { Router } from 'express';
import express from 'express';
import { pathExists } from 'fs-extra';
-import path from 'path';
-import favicon from 'serve-favicon';
+import path, { basename } from 'path';
import isEqual from 'lodash/isEqual.js';
import { dedent } from 'ts-dedent';
import { defaultStaticDirs } from './constants';
-export async function useStatics(router: any, options: Options) {
+export async function useStatics(router: Router, options: Options) {
const staticDirs =
(await options.presets.apply('staticDirs')) ?? [];
const faviconPath = await options.presets.apply('favicon');
@@ -54,7 +54,7 @@ export async function useStatics(router: any, options: Options) {
);
}
- router.use(favicon(faviconPath));
+ router.get(`/${basename(faviconPath)}`, (req, res) => res.sendFile(faviconPath));
}
export const parseStaticDir = async (arg: string) => {
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index 8e838355adde..ca5739b08558 100644
--- a/code/lib/core-webpack/package.json
+++ b/code/lib/core-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-webpack",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index 0daa86ce6f60..07483a79d5f7 100644
--- a/code/lib/csf-plugin/package.json
+++ b/code/lib/csf-plugin/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/csf-plugin",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Enrich CSF files via static analysis",
"keywords": [
"storybook"
diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json
index 239ae14ddcbd..27d9e30aaa7f 100644
--- a/code/lib/csf-tools/package.json
+++ b/code/lib/csf-tools/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/csf-tools",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Parse and manipulate CSF and Storybook config files",
"keywords": [
"storybook"
diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json
index 8b46d3cf81d0..d552f6bc6208 100644
--- a/code/lib/docs-tools/package.json
+++ b/code/lib/docs-tools/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/docs-tools",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Shared utility functions for frameworks to implement docs",
"keywords": [
"storybook"
diff --git a/code/lib/docs-tools/src/argTypes/convert/convert.test.ts b/code/lib/docs-tools/src/argTypes/convert/convert.test.ts
index 5b7b15ec6c63..f5139d7847a1 100644
--- a/code/lib/docs-tools/src/argTypes/convert/convert.test.ts
+++ b/code/lib/docs-tools/src/argTypes/convert/convert.test.ts
@@ -180,30 +180,18 @@ describe('storybook type system', () => {
{
"kind": {
"raw": "'default' | 'action'",
- "name": "union",
+ "name": "enum",
"value": [
- {
- "name": "other",
- "value": "literal"
- },
- {
- "name": "other",
- "value": "literal"
- }
+ "default",
+ "action"
]
},
"inlinedNumericLiteralUnion": {
"raw": "0 | 1",
- "name": "union",
+ "name": "enum",
"value": [
- {
- "name": "other",
- "value": "literal"
- },
- {
- "name": "other",
- "value": "literal"
- }
+ 0,
+ 1
]
},
"enumUnion": {
@@ -812,7 +800,7 @@ const transformToModule = (inputCode: string) => {
const annotateWithDocgen = (inputCode: string, filename: string) => {
const options = {
presets: ['@babel/typescript', '@babel/react'],
- plugins: ['babel-plugin-react-docgen', '@babel/plugin-proposal-class-properties'],
+ plugins: ['babel-plugin-react-docgen', '@babel/plugin-transform-class-properties'],
babelrc: false,
filename,
};
diff --git a/code/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts b/code/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts
index 6caa89a5d268..82b85c0333e1 100644
--- a/code/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts
+++ b/code/lib/docs-tools/src/argTypes/convert/proptypes/convert.ts
@@ -2,7 +2,7 @@
import mapValues from 'lodash/mapValues.js';
import type { SBType } from '@storybook/types';
import type { PTType } from './types';
-import { includesQuotes, trimQuotes } from '../utils';
+import { parseLiteral } from '../utils';
const SIGNATURE_REGEXP = /^\(.*\) => /;
@@ -13,15 +13,7 @@ export const convert = (type: PTType): SBType | any => {
switch (name) {
case 'enum': {
- const values = computed
- ? value
- : value.map((v: PTType) => {
- const trimmedValue = trimQuotes(v.value);
-
- return includesQuotes(v.value) || Number.isNaN(Number(trimmedValue))
- ? trimmedValue
- : Number(trimmedValue);
- });
+ const values = computed ? value : value.map((v: PTType) => parseLiteral(v.value));
return { ...base, name, value: values };
}
case 'string':
diff --git a/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts b/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts
index 4683b933f845..ffec5b18db20 100644
--- a/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts
+++ b/code/lib/docs-tools/src/argTypes/convert/typescript/convert.ts
@@ -1,6 +1,7 @@
/* eslint-disable no-case-declarations */
import type { SBType } from '@storybook/types';
import type { TSType, TSSigType } from './types';
+import { parseLiteral } from '../utils';
const convertSig = (type: TSSigType) => {
switch (type.type) {
@@ -37,6 +38,18 @@ export const convert = (type: TSType): SBType | void => {
case 'signature':
return { ...base, ...convertSig(type) };
case 'union':
+ let result;
+ if (type.elements.every((element) => element.name === 'literal')) {
+ result = {
+ ...base,
+ name: 'enum',
+ // @ts-expect-error fix types
+ value: type.elements.map((v) => parseLiteral(v.value)),
+ };
+ } else {
+ result = { ...base, name, value: type.elements.map(convert) };
+ }
+ return result;
case 'intersection':
return { ...base, name, value: type.elements.map(convert) };
default:
diff --git a/code/lib/docs-tools/src/argTypes/convert/typescript/types.ts b/code/lib/docs-tools/src/argTypes/convert/typescript/types.ts
index dee016d76734..aed18f3f4160 100644
--- a/code/lib/docs-tools/src/argTypes/convert/typescript/types.ts
+++ b/code/lib/docs-tools/src/argTypes/convert/typescript/types.ts
@@ -33,7 +33,7 @@ type TSObjectSigType = TSBaseType & {
};
type TSScalarType = TSBaseType & {
- name: 'any' | 'boolean' | 'number' | 'void' | 'string' | 'symbol';
+ name: 'any' | 'boolean' | 'number' | 'void' | 'string' | 'symbol' | 'literal';
};
type TSArrayType = TSBaseType & {
diff --git a/code/lib/docs-tools/src/argTypes/convert/utils.ts b/code/lib/docs-tools/src/argTypes/convert/utils.ts
index 6523490388a8..8af215e69aec 100644
--- a/code/lib/docs-tools/src/argTypes/convert/utils.ts
+++ b/code/lib/docs-tools/src/argTypes/convert/utils.ts
@@ -1,3 +1,10 @@
const QUOTE_REGEX = /^['"]|['"]$/g;
export const trimQuotes = (str: string) => str.replace(QUOTE_REGEX, '');
export const includesQuotes = (str: string) => QUOTE_REGEX.test(str);
+export const parseLiteral = (str: string) => {
+ const trimmedValue = trimQuotes(str);
+
+ return includesQuotes(str) || Number.isNaN(Number(trimmedValue))
+ ? trimmedValue
+ : Number(trimmedValue);
+};
diff --git a/code/lib/docs-tools/src/argTypes/docgen/typeScript/createType.ts b/code/lib/docs-tools/src/argTypes/docgen/typeScript/createType.ts
index 7b03da0e2411..8aa541f38c6d 100644
--- a/code/lib/docs-tools/src/argTypes/docgen/typeScript/createType.ts
+++ b/code/lib/docs-tools/src/argTypes/docgen/typeScript/createType.ts
@@ -9,9 +9,12 @@ export function createType({ tsType, required }: DocgenInfo): PropType {
return null;
}
+ let typeName = tsType.name;
if (!required) {
- return createSummaryValue(tsType.name.replace(' | undefined', ''));
+ typeName = typeName.replace(' | undefined', '');
}
- return createSummaryValue(tsType.name);
+ return createSummaryValue(
+ ['Array', 'Record', 'signature'].includes(tsType.name) ? tsType.raw : typeName
+ );
}
diff --git a/code/lib/docs-tools/src/argTypes/docgen/types.ts b/code/lib/docs-tools/src/argTypes/docgen/types.ts
index 498daee4ac58..d671a2bae8b7 100644
--- a/code/lib/docs-tools/src/argTypes/docgen/types.ts
+++ b/code/lib/docs-tools/src/argTypes/docgen/types.ts
@@ -26,8 +26,9 @@ export interface DocgenFlowType extends DocgenType {
elements?: any[];
}
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface DocgenTypeScriptType extends DocgenType {}
+export interface DocgenTypeScriptType extends DocgenType {
+ raw?: string;
+}
// export type DocgenType = DocgenPropType | DocgenFlowType | DocgenTypeScriptType;
diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json
index f0be5ce6e6aa..b9d22eb8445f 100644
--- a/code/lib/instrumenter/package.json
+++ b/code/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/instrumenter",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json
index edf38d9bd9be..086a2a2fc55f 100644
--- a/code/lib/manager-api/package.json
+++ b/code/lib/manager-api/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/manager-api",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Core Storybook Manager API & Context",
"keywords": [
"storybook"
diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts
index b55d6c41c9fe..e1a280d5aa14 100644
--- a/code/lib/manager-api/src/version.ts
+++ b/code/lib/manager-api/src/version.ts
@@ -1 +1 @@
-export const version = '7.5.0-alpha.3';
+export const version = '7.5.0-alpha.4';
diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json
index e8d040b3ea86..c3a2bfc8abe9 100644
--- a/code/lib/node-logger/package.json
+++ b/code/lib/node-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/node-logger",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/postinstall/package.json b/code/lib/postinstall/package.json
index 7ec1f76f6d9d..93e9ef630ebc 100644
--- a/code/lib/postinstall/package.json
+++ b/code/lib/postinstall/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/postinstall",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook addons postinstall utilities",
"keywords": [
"api",
diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json
index d9cd953503ef..9079669709e9 100644
--- a/code/lib/preview-api/package.json
+++ b/code/lib/preview-api/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preview-api",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json
index 8408a49dafff..47f22adf59bf 100644
--- a/code/lib/preview/package.json
+++ b/code/lib/preview/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preview",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index c4b2b76ef89f..250b0cab82bd 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": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/router/package.json b/code/lib/router/package.json
index 4bad88c95755..3e20f332cde8 100644
--- a/code/lib/router/package.json
+++ b/code/lib/router/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/router",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Core Storybook Router",
"keywords": [
"storybook"
diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
index 6d650685eb5d..8cf27fd7efef 100644
--- a/code/lib/source-loader/package.json
+++ b/code/lib/source-loader/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/source-loader",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Source loader",
"keywords": [
"lib",
diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json
index cd20b69a6f28..90aced13b741 100644
--- a/code/lib/telemetry/package.json
+++ b/code/lib/telemetry/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/telemetry",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Telemetry logging for crash reports and usage statistics",
"keywords": [
"storybook"
diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json
index 8916113cc5e5..47baae612c16 100644
--- a/code/lib/theming/package.json
+++ b/code/lib/theming/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/theming",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Core Storybook Components",
"keywords": [
"storybook"
diff --git a/code/lib/types/package.json b/code/lib/types/package.json
index c3c7dacaf8d6..bbb6ccd3ea0d 100644
--- a/code/lib/types/package.json
+++ b/code/lib/types/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/types",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Core Storybook TS Types",
"keywords": [
"storybook"
diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts
index 45d94e585eb3..0f2a9f54c271 100644
--- a/code/lib/types/src/modules/core-common.ts
+++ b/code/lib/types/src/modules/core-common.ts
@@ -369,7 +369,7 @@ export interface StorybookConfig {
/**
* Process CSF files for the story index.
- * @soonDeprecated use {@link experimental_indexers} instead
+ * @deprecated use {@link experimental_indexers} instead
*/
storyIndexers?: PresetValue;
diff --git a/code/lib/types/src/modules/indexer.ts b/code/lib/types/src/modules/indexer.ts
index 8ee01b07e83f..4f0838bba05e 100644
--- a/code/lib/types/src/modules/indexer.ts
+++ b/code/lib/types/src/modules/indexer.ts
@@ -68,7 +68,7 @@ export type Indexer = BaseIndexer & {
*/
createIndex: (fileName: string, options: IndexerOptions) => Promise;
/**
- * @soonDeprecated Use {@link index} instead
+ * @deprecated Use {@link index} instead
*/
indexer?: never;
};
@@ -79,7 +79,7 @@ export type DeprecatedIndexer = BaseIndexer & {
};
/**
- * @soonDeprecated Use {@link Indexer} instead
+ * @deprecated Use {@link Indexer} instead
*/
export type StoryIndexer = Indexer | DeprecatedIndexer;
diff --git a/code/package.json b/code/package.json
index 386254893d93..7a14a389b3d7 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/root",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"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 86933a98358b..ff11ebc6ac0d 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": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook for Create React App preset",
"keywords": [
"storybook"
diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json
index 3556946b2e40..7169a9b7f06a 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": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json
index ca6dea1ef877..6a4df6a8d8ab 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": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index 81124aaf70ac..57ec0135a2ef 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": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading",
"keywords": [
"storybook"
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index c7afa6e1873f..7998e916bdc1 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": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json
index 5ea573ea5811..99251c3a8a68 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": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/presets/vue-webpack/package.json b/code/presets/vue-webpack/package.json
index 96fe12d4c9ab..b1479512dedd 100644
--- a/code/presets/vue-webpack/package.json
+++ b/code/presets/vue-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-vue-webpack",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json
index a62613dee690..b89f171428eb 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": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json
index 187ea433598c..170535b14155 100644
--- a/code/presets/web-components-webpack/package.json
+++ b/code/presets/web-components-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preset-web-components-webpack",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
"keywords": [
"lit",
diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json
index 6d199de76d3c..3ea6ca17deae 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/html",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook HTML renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index e3116aa668a5..f49856e1cb95 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preact",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook Preact renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 02fa5c555f8a..75c51405d7e7 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook React renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/react/src/docs/extractArgTypes.test.ts b/code/renderers/react/src/docs/extractArgTypes.test.ts
index 31ea19fd754c..f96a8722e9d9 100644
--- a/code/renderers/react/src/docs/extractArgTypes.test.ts
+++ b/code/renderers/react/src/docs/extractArgTypes.test.ts
@@ -37,7 +37,7 @@ const transformToModule = (inputCode: string) => {
const annotateWithDocgen = (inputPath: string) => {
const options = {
presets: ['@babel/typescript', '@babel/react'],
- plugins: ['babel-plugin-react-docgen', '@babel/plugin-proposal-class-properties'],
+ plugins: ['babel-plugin-react-docgen', '@babel/plugin-transform-class-properties'],
babelrc: false,
};
const { code } = transformFileSync(inputPath, options) || {};
diff --git a/code/renderers/react/template/stories/docgen-components/9493-ts-display-name/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/9493-ts-display-name/argTypes.snapshot
index dde0ac32a22f..560ce954feb2 100644
--- a/code/renderers/react/template/stories/docgen-components/9493-ts-display-name/argTypes.snapshot
+++ b/code/renderers/react/template/stories/docgen-components/9493-ts-display-name/argTypes.snapshot
@@ -23,10 +23,15 @@ Object {
},
"title": Object {
"control": Object {
- "type": "object",
+ "type": "radio",
},
"description": "A title that brings attention to the alert.",
"name": "title",
+ "options": Array [
+ "Code Red",
+ "Code Yellow",
+ "Code Green",
+ ],
"table": Object {
"defaultValue": Object {
"detail": undefined,
@@ -39,22 +44,13 @@ Object {
},
},
"type": Object {
- "name": "union",
+ "name": "enum",
"raw": "'Code Red' | 'Code Yellow' | 'Code Green'",
"required": false,
"value": Array [
- Object {
- "name": "other",
- "value": "literal",
- },
- Object {
- "name": "other",
- "value": "literal",
- },
- Object {
- "name": "other",
- "value": "literal",
- },
+ "Code Red",
+ "Code Yellow",
+ "Code Green",
],
},
},
diff --git a/code/renderers/react/template/stories/docgen-components/9493-ts-display-name/properties.snapshot b/code/renderers/react/template/stories/docgen-components/9493-ts-display-name/properties.snapshot
index f6be2f921ecf..1333ed781146 100644
--- a/code/renderers/react/template/stories/docgen-components/9493-ts-display-name/properties.snapshot
+++ b/code/renderers/react/template/stories/docgen-components/9493-ts-display-name/properties.snapshot
@@ -12,21 +12,12 @@ Object {
"name": "title",
"required": false,
"sbType": Object {
- "name": "union",
+ "name": "enum",
"raw": "'Code Red' | 'Code Yellow' | 'Code Green'",
"value": Array [
- Object {
- "name": "other",
- "value": "literal",
- },
- Object {
- "name": "other",
- "value": "literal",
- },
- Object {
- "name": "other",
- "value": "literal",
- },
+ "Code Red",
+ "Code Yellow",
+ "Code Green",
],
},
"type": Object {
diff --git a/code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/argTypes.snapshot
index cfe5c6d41a5a..35afb4cfba6f 100644
--- a/code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/argTypes.snapshot
+++ b/code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/argTypes.snapshot
@@ -13,7 +13,7 @@ Object {
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
- "summary": "signature",
+ "summary": "{ width: number; height: number }",
},
},
"type": Object {
diff --git a/code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/properties.snapshot b/code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/properties.snapshot
index 9a88cea0e370..05ad26d8baee 100644
--- a/code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/properties.snapshot
+++ b/code/renderers/react/template/stories/docgen-components/9721-ts-deprecated-jsdoc/properties.snapshot
@@ -22,7 +22,7 @@ Object {
},
"type": Object {
"detail": undefined,
- "summary": "signature",
+ "summary": "{ width: number; height: number }",
},
},
],
diff --git a/code/renderers/react/template/stories/docgen-components/9827-ts-default-values/argTypes.snapshot b/code/renderers/react/template/stories/docgen-components/9827-ts-default-values/argTypes.snapshot
index d37d679b5b9d..0f05e4e2bdf5 100644
--- a/code/renderers/react/template/stories/docgen-components/9827-ts-default-values/argTypes.snapshot
+++ b/code/renderers/react/template/stories/docgen-components/9827-ts-default-values/argTypes.snapshot
@@ -13,7 +13,7 @@ Object {
"jsDocTags": undefined,
"type": Object {
"detail": undefined,
- "summary": "Array",
+ "summary": "string[]",
},
},
"type": Object {
diff --git a/code/renderers/react/template/stories/docgen-components/9827-ts-default-values/properties.snapshot b/code/renderers/react/template/stories/docgen-components/9827-ts-default-values/properties.snapshot
index 5d944694e62b..06f92d9ce2e5 100644
--- a/code/renderers/react/template/stories/docgen-components/9827-ts-default-values/properties.snapshot
+++ b/code/renderers/react/template/stories/docgen-components/9827-ts-default-values/properties.snapshot
@@ -48,7 +48,7 @@ Object {
},
"type": Object {
"detail": undefined,
- "summary": "Array",
+ "summary": "string[]",
},
},
],
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index ab40ca24327d..e1b7a638cecb 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/server",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook Server renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index aec033cbf106..8aaa390671be 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook Svelte renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/vue/package.json b/code/renderers/vue/package.json
index 7767f5108fef..8f0adba6c632 100644
--- a/code/renderers/vue/package.json
+++ b/code/renderers/vue/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook Vue renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index 90fb37402b94..db1f0e632e47 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue3",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook Vue 3 renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index f929fb877db1..c248bd3a41c4 100644
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/web-components",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook web-components renderer",
"keywords": [
"lit",
diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json
index c34dbabd4e84..060dc07626e3 100644
--- a/code/ui/blocks/package.json
+++ b/code/ui/blocks/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/blocks",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Storybook Doc Blocks",
"keywords": [
"storybook"
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index 4bd67d34b104..85c425ea05bf 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/components",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Core Storybook Components",
"keywords": [
"storybook"
diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json
index 36960bd3baa2..9a13dc094783 100644
--- a/code/ui/manager/package.json
+++ b/code/ui/manager/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/manager",
- "version": "7.5.0-alpha.3",
+ "version": "7.5.0-alpha.4",
"description": "Core Storybook UI",
"keywords": [
"storybook"
diff --git a/code/yarn.lock b/code/yarn.lock
index a9ad7bd0ce70..3f9dbaca64d1 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -414,7 +414,17 @@ __metadata:
languageName: node
linkType: hard
-"@babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.22.9":
+"@babel/code-frame@npm:^7.22.10":
+ version: 7.22.10
+ resolution: "@babel/code-frame@npm:7.22.10"
+ dependencies:
+ "@babel/highlight": ^7.22.10
+ chalk: ^2.4.2
+ checksum: fc5fe681eda128f15b928287b6c8e2ccec45776b8662524945cde005fba725642cc47ab0cfef4e7ff9ba5acccb3e907eebc2b3a7f075b8b31b19011229170b27
+ languageName: node
+ linkType: hard
+
+"@babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.22.9":
version: 7.22.9
resolution: "@babel/compat-data@npm:7.22.9"
checksum: 1334264b041f8ad4e33036326970c9c26754eb5c04b3af6c223fe6da988cbb8a8542b5526f49ec1ac488210d2f710484a0e4bcd30256294ae3f261d0141febad
@@ -513,7 +523,30 @@ __metadata:
languageName: node
linkType: hard
-"@babel/generator@npm:7.22.9":
+"@babel/core@npm:^7.18.9":
+ version: 7.22.10
+ resolution: "@babel/core@npm:7.22.10"
+ dependencies:
+ "@ampproject/remapping": ^2.2.0
+ "@babel/code-frame": ^7.22.10
+ "@babel/generator": ^7.22.10
+ "@babel/helper-compilation-targets": ^7.22.10
+ "@babel/helper-module-transforms": ^7.22.9
+ "@babel/helpers": ^7.22.10
+ "@babel/parser": ^7.22.10
+ "@babel/template": ^7.22.5
+ "@babel/traverse": ^7.22.10
+ "@babel/types": ^7.22.10
+ convert-source-map: ^1.7.0
+ debug: ^4.1.0
+ gensync: ^1.0.0-beta.2
+ json5: ^2.2.2
+ semver: ^6.3.1
+ checksum: aebc08abfc4d4370d3023b1c5a22db2edd896ddbe21ed54f11c654660481f598b08fd456f9a5aa90cd2d81e0ea6767cd73f72fc11f7ad04d897f8fb20671cc1c
+ languageName: node
+ linkType: hard
+
+"@babel/generator@npm:7.22.9, @babel/generator@npm:^7.12.11, @babel/generator@npm:^7.22.5, @babel/generator@npm:^7.22.9, @babel/generator@npm:^7.7.2, @babel/generator@npm:^7.8.7":
version: 7.22.9
resolution: "@babel/generator@npm:7.22.9"
dependencies:
@@ -525,7 +558,19 @@ __metadata:
languageName: node
linkType: hard
-"@babel/generator@npm:^7.12.11, @babel/generator@npm:^7.22.15, @babel/generator@npm:^7.22.5, @babel/generator@npm:^7.22.9, @babel/generator@npm:^7.7.2, @babel/generator@npm:^7.8.7":
+"@babel/generator@npm:^7.22.10":
+ version: 7.22.10
+ resolution: "@babel/generator@npm:7.22.10"
+ dependencies:
+ "@babel/types": ^7.22.10
+ "@jridgewell/gen-mapping": ^0.3.2
+ "@jridgewell/trace-mapping": ^0.3.17
+ jsesc: ^2.5.1
+ checksum: 2f26ac64f0b606cd9e7799eb2bc42d371b378ba2cb3c7c92c01a3bfccca271371990bcd2dc67fee5547721ba3e1fa83ca03fe3aab30bdf417c3078b9759d2f10
+ languageName: node
+ linkType: hard
+
+"@babel/generator@npm:^7.22.15":
version: 7.22.15
resolution: "@babel/generator@npm:7.22.15"
dependencies:
@@ -555,7 +600,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-compilation-targets@npm:^7.12.0, @babel/helper-compilation-targets@npm:^7.20.7, @babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.5, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.22.9":
+"@babel/helper-compilation-targets@npm:^7.12.0, @babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.5, @babel/helper-compilation-targets@npm:^7.22.6, @babel/helper-compilation-targets@npm:^7.22.9":
version: 7.22.15
resolution: "@babel/helper-compilation-targets@npm:7.22.15"
dependencies:
@@ -568,6 +613,19 @@ __metadata:
languageName: node
linkType: hard
+"@babel/helper-compilation-targets@npm:^7.22.10":
+ version: 7.22.10
+ resolution: "@babel/helper-compilation-targets@npm:7.22.10"
+ dependencies:
+ "@babel/compat-data": ^7.22.9
+ "@babel/helper-validator-option": ^7.22.5
+ browserslist: ^4.21.9
+ lru-cache: ^5.1.1
+ semver: ^6.3.1
+ checksum: edef207b819f491ded9462ac73858eadb155f4a0afe6cf3951459e47ad23b743ed56d7bd8a1b3f63fd25b39543db42ea58fea7b2193dcb4c98a511d7f1ad547a
+ languageName: node
+ linkType: hard
+
"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.11, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.22.5":
version: 7.22.15
resolution: "@babel/helper-create-class-features-plugin@npm:7.22.15"
@@ -683,7 +741,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.18.9, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
+"@babel/helper-plugin-utils@npm:^7.0.0, @babel/helper-plugin-utils@npm:^7.10.4, @babel/helper-plugin-utils@npm:^7.12.13, @babel/helper-plugin-utils@npm:^7.14.5, @babel/helper-plugin-utils@npm:^7.18.6, @babel/helper-plugin-utils@npm:^7.20.2, @babel/helper-plugin-utils@npm:^7.22.5, @babel/helper-plugin-utils@npm:^7.8.0, @babel/helper-plugin-utils@npm:^7.8.3":
version: 7.22.5
resolution: "@babel/helper-plugin-utils@npm:7.22.5"
checksum: d2c4bfe2fa91058bcdee4f4e57a3f4933aed7af843acfd169cd6179fab8d13c1d636474ecabb2af107dc77462c7e893199aa26632bac1c6d7e025a17cbb9d20d
@@ -775,7 +833,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helpers@npm:^7.22.15, @babel/helpers@npm:^7.22.5, @babel/helpers@npm:^7.22.6, @babel/helpers@npm:^7.8.4":
+"@babel/helpers@npm:^7.22.10, @babel/helpers@npm:^7.22.15, @babel/helpers@npm:^7.22.5, @babel/helpers@npm:^7.22.6, @babel/helpers@npm:^7.8.4":
version: 7.22.15
resolution: "@babel/helpers@npm:7.22.15"
dependencies:
@@ -786,6 +844,17 @@ __metadata:
languageName: node
linkType: hard
+"@babel/highlight@npm:^7.22.10":
+ version: 7.22.10
+ resolution: "@babel/highlight@npm:7.22.10"
+ dependencies:
+ "@babel/helper-validator-identifier": ^7.22.5
+ chalk: ^2.4.2
+ js-tokens: ^4.0.0
+ checksum: ac321ed90d37f76df74a44addc1692658eff64060375550bfb64919959573b14000ac83744e1ed30cc51b8b2f1291b0f0e98a3398d3c33c9c4548dd326a898fc
+ languageName: node
+ linkType: hard
+
"@babel/highlight@npm:^7.22.13":
version: 7.22.13
resolution: "@babel/highlight@npm:7.22.13"
@@ -806,6 +875,15 @@ __metadata:
languageName: node
linkType: hard
+"@babel/parser@npm:^7.22.10":
+ version: 7.22.10
+ resolution: "@babel/parser@npm:7.22.10"
+ bin:
+ parser: ./bin/babel-parser.js
+ checksum: 22de4b5b2e20dd5b44a73963e5fceef44501bacdd14f0b3b96fc16975826553c83c3e424e2ea906b4f2fb8c2129b176bcee33ae99e30de9006ceb28ded5c6ac7
+ languageName: node
+ linkType: hard
+
"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.22.15, @babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.22.5":
version: 7.22.15
resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.22.15"
@@ -844,7 +922,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/plugin-proposal-class-properties@npm:^7.13.0, @babel/plugin-proposal-class-properties@npm:^7.16.5, @babel/plugin-proposal-class-properties@npm:^7.18.6":
+"@babel/plugin-proposal-class-properties@npm:^7.13.0, @babel/plugin-proposal-class-properties@npm:^7.16.5":
version: 7.18.6
resolution: "@babel/plugin-proposal-class-properties@npm:7.18.6"
dependencies:
@@ -871,18 +949,6 @@ __metadata:
languageName: node
linkType: hard
-"@babel/plugin-proposal-export-namespace-from@npm:^7.18.9":
- version: 7.18.9
- resolution: "@babel/plugin-proposal-export-namespace-from@npm:7.18.9"
- dependencies:
- "@babel/helper-plugin-utils": ^7.18.9
- "@babel/plugin-syntax-export-namespace-from": ^7.8.3
- peerDependencies:
- "@babel/core": ^7.0.0-0
- checksum: b90346bd3628ebd44138d0628a5aba1e6b11748893fb48e87008cac30f3bc7cd3161362e49433156737350318174164436357a66fbbfdbe952606b460bd8a0e4
- languageName: node
- linkType: hard
-
"@babel/plugin-proposal-nullish-coalescing-operator@npm:^7.13.8":
version: 7.18.6
resolution: "@babel/plugin-proposal-nullish-coalescing-operator@npm:7.18.6"
@@ -895,33 +961,6 @@ __metadata:
languageName: node
linkType: hard
-"@babel/plugin-proposal-numeric-separator@npm:^7.18.6":
- version: 7.18.6
- resolution: "@babel/plugin-proposal-numeric-separator@npm:7.18.6"
- dependencies:
- "@babel/helper-plugin-utils": ^7.18.6
- "@babel/plugin-syntax-numeric-separator": ^7.10.4
- peerDependencies:
- "@babel/core": ^7.0.0-0
- checksum: a83a65c6ec0d2293d830e9db61406d246f22d8ea03583d68460cb1b6330c6699320acce1b45f66ba3c357830720e49267e3d99f95088be457c66e6450fbfe3fa
- languageName: node
- linkType: hard
-
-"@babel/plugin-proposal-object-rest-spread@npm:^7.20.7":
- version: 7.20.7
- resolution: "@babel/plugin-proposal-object-rest-spread@npm:7.20.7"
- dependencies:
- "@babel/compat-data": ^7.20.5
- "@babel/helper-compilation-targets": ^7.20.7
- "@babel/helper-plugin-utils": ^7.20.2
- "@babel/plugin-syntax-object-rest-spread": ^7.8.3
- "@babel/plugin-transform-parameters": ^7.20.7
- peerDependencies:
- "@babel/core": ^7.0.0-0
- checksum: b9818749bb49d8095df64c45db682448d04743d96722984cbfd375733b2585c26d807f84b4fdb28474f2d614be6a6ffe3d96ffb121840e9e5345b2ccc0438bd8
- languageName: node
- linkType: hard
-
"@babel/plugin-proposal-optional-chaining@npm:^7.13.12":
version: 7.21.0
resolution: "@babel/plugin-proposal-optional-chaining@npm:7.21.0"
@@ -1665,7 +1704,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/plugin-transform-parameters@npm:^7.20.7, @babel/plugin-transform-parameters@npm:^7.22.15, @babel/plugin-transform-parameters@npm:^7.22.5":
+"@babel/plugin-transform-parameters@npm:^7.22.15, @babel/plugin-transform-parameters@npm:^7.22.5":
version: 7.22.15
resolution: "@babel/plugin-transform-parameters@npm:7.22.15"
dependencies:
@@ -2346,7 +2385,25 @@ __metadata:
languageName: node
linkType: hard
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.17, @babel/types@npm:^7.22.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.0, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.8.6, @babel/types@npm:^7.8.7, @babel/types@npm:^7.9.6":
+"@babel/traverse@npm:^7.18.9, @babel/traverse@npm:^7.22.10":
+ version: 7.22.10
+ resolution: "@babel/traverse@npm:7.22.10"
+ dependencies:
+ "@babel/code-frame": ^7.22.10
+ "@babel/generator": ^7.22.10
+ "@babel/helper-environment-visitor": ^7.22.5
+ "@babel/helper-function-name": ^7.22.5
+ "@babel/helper-hoist-variables": ^7.22.5
+ "@babel/helper-split-export-declaration": ^7.22.6
+ "@babel/parser": ^7.22.10
+ "@babel/types": ^7.22.10
+ debug: ^4.1.0
+ globals: ^11.1.0
+ checksum: 8e8b63b053962908408ed9d954810e93f241122222db115327ed5876d020f420fc115ef2d79623c2a4928447ddc002ec220be2a152b241d19de2480c88e10cfb
+ languageName: node
+ linkType: hard
+
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.11.5, @babel/types@npm:^7.18.9, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.21.4, @babel/types@npm:^7.22.10, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.17, @babel/types@npm:^7.22.5, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.4, @babel/types@npm:^7.6.1, @babel/types@npm:^7.7.0, @babel/types@npm:^7.7.2, @babel/types@npm:^7.8.3, @babel/types@npm:^7.8.6, @babel/types@npm:^7.8.7, @babel/types@npm:^7.9.6":
version: 7.22.17
resolution: "@babel/types@npm:7.22.17"
dependencies:
@@ -6892,7 +6949,6 @@ __metadata:
"@types/node-fetch": ^2.5.7
"@types/pretty-hrtime": ^1.0.0
"@types/semver": ^7.3.4
- "@types/serve-favicon": ^2.5.2
"@types/ws": ^8
better-opn: ^3.0.2
boxen: ^5.1.2
@@ -6913,7 +6969,6 @@ __metadata:
prompts: ^2.4.0
read-pkg-up: ^7.0.1
semver: ^7.3.7
- serve-favicon: ^2.5.0
slash: ^5.0.0
telejson: ^7.2.0
tiny-invariant: ^1.3.1
@@ -7283,13 +7338,13 @@ __metadata:
resolution: "@storybook/nextjs@workspace:frameworks/nextjs"
dependencies:
"@babel/core": ^7.22.9
- "@babel/plugin-proposal-class-properties": ^7.18.6
- "@babel/plugin-proposal-export-namespace-from": ^7.18.9
- "@babel/plugin-proposal-numeric-separator": ^7.18.6
- "@babel/plugin-proposal-object-rest-spread": ^7.20.7
"@babel/plugin-syntax-bigint": ^7.8.3
"@babel/plugin-syntax-dynamic-import": ^7.8.3
"@babel/plugin-syntax-import-assertions": ^7.22.5
+ "@babel/plugin-transform-class-properties": ^7.22.5
+ "@babel/plugin-transform-export-namespace-from": ^7.22.11
+ "@babel/plugin-transform-numeric-separator": ^7.22.11
+ "@babel/plugin-transform-object-rest-spread": ^7.22.15
"@babel/plugin-transform-runtime": ^7.22.9
"@babel/preset-env": ^7.22.9
"@babel/preset-react": ^7.22.5
@@ -7696,9 +7751,8 @@ __metadata:
"@storybook/react": "workspace:*"
"@types/node": ^16.0.0
"@vitejs/plugin-react": ^3.0.1
- ast-types: ^0.14.2
magic-string: ^0.30.0
- react-docgen: 6.0.0-alpha.3
+ react-docgen: ^6.0.2
typescript: ~4.9.3
vite: ^4.0.0
peerDependencies:
@@ -8874,6 +8928,19 @@ __metadata:
linkType: hard
"@types/babel__core@npm:^7, @types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.14, @types/babel__core@npm:^7.1.7":
+ version: 7.20.0
+ resolution: "@types/babel__core@npm:7.20.0"
+ dependencies:
+ "@babel/parser": ^7.20.7
+ "@babel/types": ^7.20.7
+ "@types/babel__generator": "*"
+ "@types/babel__template": "*"
+ "@types/babel__traverse": "*"
+ checksum: 75dcd39258bc008b6fd4db7de2c8bfeb29b5cd2c726f54407f70243ddea1d8ce9e7082281557614c4a5f9f30d478387ca6ab6cc576fc829cebeb159bfaa8799f
+ languageName: node
+ linkType: hard
+
+"@types/babel__core@npm:^7.18.0":
version: 7.20.1
resolution: "@types/babel__core@npm:7.20.1"
dependencies:
@@ -8919,7 +8986,7 @@ __metadata:
languageName: node
linkType: hard
-"@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.0.6":
+"@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.0.6, @types/babel__traverse@npm:^7.18.0":
version: 7.20.1
resolution: "@types/babel__traverse@npm:7.20.1"
dependencies:
@@ -9044,6 +9111,13 @@ __metadata:
languageName: node
linkType: hard
+"@types/doctrine@npm:^0.0.5":
+ version: 0.0.5
+ resolution: "@types/doctrine@npm:0.0.5"
+ checksum: 9b38d1b110e94fa34632e21f83b64ed05116f6349b5666c11bc0d4081c793f9b0be25b9d8b34df0ec38d440741836c17d4c84576e22dc00a18fe972f96688bf3
+ languageName: node
+ linkType: hard
+
"@types/ejs@npm:^3.1.1":
version: 3.1.2
resolution: "@types/ejs@npm:3.1.2"
@@ -9634,6 +9708,13 @@ __metadata:
languageName: node
linkType: hard
+"@types/resolve@npm:^1.20.2":
+ version: 1.20.2
+ resolution: "@types/resolve@npm:1.20.2"
+ checksum: c5b7e1770feb5ccfb6802f6ad82a7b0d50874c99331e0c9b259e415e55a38d7a86ad0901c57665d93f75938be2a6a0bc9aa06c9749192cadb2e4512800bbc6e6
+ languageName: node
+ linkType: hard
+
"@types/responselike@npm:^1.0.0":
version: 1.0.0
resolution: "@types/responselike@npm:1.0.0"
@@ -9684,15 +9765,6 @@ __metadata:
languageName: node
linkType: hard
-"@types/serve-favicon@npm:^2.5.2":
- version: 2.5.4
- resolution: "@types/serve-favicon@npm:2.5.4"
- dependencies:
- "@types/express": "*"
- checksum: 60bb648eff8bba7f589e9a2027879c39c137c96e1afafb6a09cb220477c1ebe74c3ce4293c52724592f04e3278950b82741f449c8517a432c163107333a0d6b8
- languageName: node
- linkType: hard
-
"@types/serve-index@npm:^1.9.1":
version: 1.9.1
resolution: "@types/serve-index@npm:1.9.1"
@@ -12869,13 +12941,20 @@ __metadata:
languageName: node
linkType: hard
-"caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001464, caniuse-lite@npm:^1.0.30001517":
+"caniuse-lite@npm:^1.0.30001406, caniuse-lite@npm:^1.0.30001464":
version: 1.0.30001533
resolution: "caniuse-lite@npm:1.0.30001533"
checksum: bb07dc0845f4f05ee833eaf25c0eb93af2c6e1c59b0897ea85218cf9ef2e880c8b5e1f20c1b32916d4687cd557d945f8c43c64c8e3200d1a433681b30b42fe54
languageName: node
linkType: hard
+"caniuse-lite@npm:^1.0.30001517":
+ version: 1.0.30001520
+ resolution: "caniuse-lite@npm:1.0.30001520"
+ checksum: 48daf0d55e72e343f09fe17cbd47303a5bf4d65f6ec08ef68cc998c4fed073c9789d710e296496140e8179138dccb4667b786e260ca5451e1663786ef889db3b
+ languageName: node
+ linkType: hard
+
"case-sensitive-paths-webpack-plugin@npm:^2.4.0":
version: 2.4.0
resolution: "case-sensitive-paths-webpack-plugin@npm:2.4.0"
@@ -15217,9 +15296,9 @@ __metadata:
linkType: hard
"electron-to-chromium@npm:^1.4.477":
- version: 1.4.515
- resolution: "electron-to-chromium@npm:1.4.515"
- checksum: 635bad718d0b301fe3e37adad623cf2ae35544863a213b481efb6acf12fbe684e3cfe6553a7bf21532ff186e46fc088c5e9700058d15ce07804797bd0528c230
+ version: 1.4.490
+ resolution: "electron-to-chromium@npm:1.4.490"
+ checksum: d205e3c9f4bf14cbaaa2be5bf3f3d498e161ec0cc6f10da7bfdd2c355e4ae1937244335fabe8b376e970d14ba2b2c415aa2a2d89ea61c000f54e6ed137853bb9
languageName: node
linkType: hard
@@ -23373,7 +23452,7 @@ __metadata:
languageName: node
linkType: hard
-"min-indent@npm:^1.0.0":
+"min-indent@npm:^1.0.0, min-indent@npm:^1.0.1":
version: 1.0.1
resolution: "min-indent@npm:1.0.1"
checksum: 7e207bd5c20401b292de291f02913230cb1163abca162044f7db1d951fa245b174dc00869d40dd9a9f32a885ad6a5f3e767ee104cf278f399cb4e92d3f582d5c
@@ -23710,13 +23789,6 @@ __metadata:
languageName: node
linkType: hard
-"ms@npm:2.1.1":
- version: 2.1.1
- resolution: "ms@npm:2.1.1"
- checksum: 056140c631e740369fa21142417aba1bd629ab912334715216c666eb681c8f015c622dd4e38bc1d836b30852b05641331661703af13a0397eb0ca420fc1e75d9
- languageName: node
- linkType: hard
-
"ms@npm:2.1.2":
version: 2.1.2
resolution: "ms@npm:2.1.2"
@@ -26876,26 +26948,6 @@ __metadata:
languageName: node
linkType: hard
-"react-docgen@npm:6.0.0-alpha.3":
- version: 6.0.0-alpha.3
- resolution: "react-docgen@npm:6.0.0-alpha.3"
- dependencies:
- "@babel/core": ^7.7.5
- "@babel/generator": ^7.12.11
- ast-types: ^0.14.2
- commander: ^2.19.0
- doctrine: ^3.0.0
- estree-to-babel: ^3.1.0
- neo-async: ^2.6.1
- node-dir: ^0.1.10
- resolve: ^1.17.0
- strip-indent: ^3.0.0
- bin:
- react-docgen: bin/react-docgen.js
- checksum: 284bba5528d5e9084c3ed36b2d2fec8fc5d55f3fb8ca544ec3a0d1ab98c39001ecb7db6e03a1088b82eb3d750c1343cde2fc9b7729540277eda40e10f38912d8
- languageName: node
- linkType: hard
-
"react-docgen@npm:^5.0.0":
version: 5.4.3
resolution: "react-docgen@npm:5.4.3"
@@ -26916,6 +26968,24 @@ __metadata:
languageName: node
linkType: hard
+"react-docgen@npm:^6.0.2":
+ version: 6.0.2
+ resolution: "react-docgen@npm:6.0.2"
+ dependencies:
+ "@babel/core": ^7.18.9
+ "@babel/traverse": ^7.18.9
+ "@babel/types": ^7.18.9
+ "@types/babel__core": ^7.18.0
+ "@types/babel__traverse": ^7.18.0
+ "@types/doctrine": ^0.0.5
+ "@types/resolve": ^1.20.2
+ doctrine: ^3.0.0
+ resolve: ^1.22.1
+ strip-indent: ^4.0.0
+ checksum: 040f9b460982d6b4690ed5381b6181c58f6a2cd9cd6d70cfc449663527eaf93908cc6f7f06b018d9bc345b65d0cb87cb3d05541403556f20c1feab28342b0b4c
+ languageName: node
+ linkType: hard
+
"react-dom@npm:^16.8.0":
version: 16.14.0
resolution: "react-dom@npm:16.14.0"
@@ -28221,7 +28291,7 @@ __metadata:
languageName: node
linkType: hard
-"resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.13.1, resolve@npm:^1.14.2, resolve@npm:^1.15.1, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.4, resolve@npm:^1.3.2, resolve@npm:^1.4.0":
+"resolve@npm:^1.10.0, resolve@npm:^1.12.0, resolve@npm:^1.13.1, resolve@npm:^1.14.2, resolve@npm:^1.15.1, resolve@npm:^1.17.0, resolve@npm:^1.19.0, resolve@npm:^1.20.0, resolve@npm:^1.22.1, resolve@npm:^1.22.4, resolve@npm:^1.3.2, resolve@npm:^1.4.0":
version: 1.22.4
resolution: "resolve@npm:1.22.4"
dependencies:
@@ -28260,7 +28330,7 @@ __metadata:
languageName: node
linkType: hard
-"resolve@patch:resolve@^1.10.0#~builtin, resolve@patch:resolve@^1.12.0#~builtin, resolve@patch:resolve@^1.13.1#~builtin, resolve@patch:resolve@^1.14.2#~builtin, resolve@patch:resolve@^1.15.1#~builtin, resolve@patch:resolve@^1.17.0#~builtin, resolve@patch:resolve@^1.19.0#~builtin, resolve@patch:resolve@^1.20.0#~builtin, resolve@patch:resolve@^1.22.4#~builtin, resolve@patch:resolve@^1.3.2#~builtin, resolve@patch:resolve@^1.4.0#~builtin":
+"resolve@patch:resolve@^1.10.0#~builtin, resolve@patch:resolve@^1.12.0#~builtin, resolve@patch:resolve@^1.13.1#~builtin, resolve@patch:resolve@^1.14.2#~builtin, resolve@patch:resolve@^1.15.1#~builtin, resolve@patch:resolve@^1.17.0#~builtin, resolve@patch:resolve@^1.19.0#~builtin, resolve@patch:resolve@^1.20.0#~builtin, resolve@patch:resolve@^1.22.1#~builtin, resolve@patch:resolve@^1.22.4#~builtin, resolve@patch:resolve@^1.3.2#~builtin, resolve@patch:resolve@^1.4.0#~builtin":
version: 1.22.4
resolution: "resolve@patch:resolve@npm%3A1.22.4#~builtin::version=1.22.4&hash=c3c19d"
dependencies:
@@ -28514,13 +28584,6 @@ __metadata:
languageName: node
linkType: hard
-"safe-buffer@npm:5.1.1":
- version: 5.1.1
- resolution: "safe-buffer@npm:5.1.1"
- checksum: 1c233bd105deeba3c9a8911ed4ec24ba45adbb51fec02f7944a10a202c38e3df4ef2b524bdeb55f2e4f8c77c13b2959e2e2e6022e5d99acdd70633b5f7e138cf
- languageName: node
- linkType: hard
-
"safe-buffer@npm:5.1.2, safe-buffer@npm:~5.1.0, safe-buffer@npm:~5.1.1":
version: 5.1.2
resolution: "safe-buffer@npm:5.1.2"
@@ -28829,19 +28892,6 @@ __metadata:
languageName: node
linkType: hard
-"serve-favicon@npm:^2.5.0":
- version: 2.5.0
- resolution: "serve-favicon@npm:2.5.0"
- dependencies:
- etag: ~1.8.1
- fresh: 0.5.2
- ms: 2.1.1
- parseurl: ~1.3.2
- safe-buffer: 5.1.1
- checksum: 7244ced3c46f8dfde591dc801f1e21ebc8fa07c4870cbbaee3ce37104b3aad32858e674e251a8ed4837867ea0dd67cb734b485ae5a7b0895cb6022f8b8c79303
- languageName: node
- linkType: hard
-
"serve-index@npm:^1.9.1":
version: 1.9.1
resolution: "serve-index@npm:1.9.1"
@@ -29833,6 +29883,15 @@ __metadata:
languageName: node
linkType: hard
+"strip-indent@npm:^4.0.0":
+ version: 4.0.0
+ resolution: "strip-indent@npm:4.0.0"
+ dependencies:
+ min-indent: ^1.0.1
+ checksum: 6b1fb4e22056867f5c9e7a6f3f45922d9a2436cac758607d58aeaac0d3b16ec40b1c43317de7900f1b8dd7a4107352fa47fb960f2c23566538c51e8585c8870e
+ languageName: node
+ linkType: hard
+
"strip-json-comments@npm:^2.0.0":
version: 2.0.1
resolution: "strip-json-comments@npm:2.0.1"
diff --git a/docs/configure/styling-and-css.md b/docs/configure/styling-and-css.md
index b328359af00f..2f847b80935d 100644
--- a/docs/configure/styling-and-css.md
+++ b/docs/configure/styling-and-css.md
@@ -2,7 +2,11 @@
title: 'Styling and CSS'
---
-There are many ways to include CSS in a web application, and correspondingly there are many ways to include CSS in Storybook. Usually, it is best to try and replicate what your application does with styling in Storybook’s configuration. To make this easier, we recommend using [`@storybook/addon-styling`](https://github.com/storybookjs/addon-styling).
+There are many ways to include CSS in a web application, and correspondingly there are many ways to include CSS in Storybook. Usually, it is best to try and replicate what your application does with styling in Storybook’s configuration.
+
+If you're using Vite to build your Storybook, you're covered! Storybook will use your vite config file which supports most popular styling tools out-of-the-box 🎉. However, if you're using Webpack, you may need some extra configuration. To make this easier, we recommend using [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/).
+
+**Note**: If you're using Storybook with Angular or Next.js, you can skip this section. Storybook will automatically use the same styling configuration as your application.
## Importing CSS files
@@ -25,21 +29,23 @@ If your component files import their CSS files, this will work too. The noticeab
If you're using Vite as your builder, you're covered! Vite supports Sass and PostCSS out-of-the-box 🎉
-However, if you're using Webpack and want to use Sass and PostCss, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling`](https://github.com/storybookjs/addon-styling#storybookaddon-styling) to help you configure these tools. Or if you'd prefer, you can customize [Storybook's webpack configuration yourself](../builders/webpack.md#override-the-default-configuration) to include the appropriate loader(s).
+However, if you're using Webpack and want to use Sass and PostCss, you'll need some extra configuration. We recommend installing [`@storybook/addon-styling-webpack`](https://storybook.js.org/addons/@storybook/addon-styling-webpack/) to help you configure these tools. Or if you'd prefer, you can customize [Storybook's webpack configuration yourself](../builders/webpack.md#override-the-default-configuration) to include the appropriate loader(s).
## CSS-in-JS
-CSS-in-JS libraries are designed to use basic JavaScript, and they often work in Storybook without any extra configuration. Some libraries expect components to render in a specific rendering “context” (for example, to provide themes), which can be accomplished with `@storybook/addon-styling`'s [`withThemeFromJSXProvider` decorator](https://github.com/storybookjs/addon-styling/blob/next/docs/api.md#withthemefromjsxprovider).
+CSS-in-JS libraries are designed to use basic JavaScript, and they often work in Storybook without any extra configuration. Some libraries expect components to render in a specific rendering “context” (for example, to provide themes), which can be accomplished with `@storybook/addon-themes`'s [`withThemeFromJSXProvider` decorator](https://github.com/storybookjs/storybook/blob/next/code/addons/themes/docs/api.md#withthemefromjsxprovider).
## Adding webfonts
If you need webfonts to be available, you may need to add some code to the [`.storybook/preview-head.html`](./story-rendering.md#adding-to-head) file. We recommend including any assets with your Storybook if possible, in which case you likely want to configure the [static file location](./images-and-assets.md#serving-static-files-via-storybook-configuration).
+
+
## Troubleshooting
### Styles aren't being applied with Angular
-The latest Angular releases introduced significant changes in configuring and styling projects. If you're working with an Angular version greater than 13 and your styles aren't being applied, you may need to check your `angular.json` ad adjust the `builder` configuration to import your CSS:
+The latest Angular releases introduced significant changes in configuring and styling projects. If you're working with an Angular version greater than 13 and your styles aren't being applied, you may need to check your `angular.json` and adjust the `builder` configuration to import your CSS:
```json
{
@@ -56,7 +62,7 @@ The latest Angular releases introduced significant changes in configuring and st
}
```
-Additionally, if you need Storybook-specific styles that are separate from your application, you can configure the styles with [Storybook's custom builder](../get-started/install.md), which will override the application's styles:
+Additionally, if you need Storybook-specific styles that are separate from your application, you can configure the styles with [Storybook's custom builder](../get-started/install.md#troubleshooting), which will override the application's styles:
```json
{
@@ -121,3 +127,5 @@ Starting with version `14.1.8`, Nx uses the Storybook builder directly, which me
```
When Nx runs, it will load Storybook's configuration and styling based on [`storybook`'s `browserTarget`](https://nx.dev/storybook/extra-topics-for-angular-projects#setting-up-browsertarget).
+
+
diff --git a/docs/snippets/common/main-config-addons.js.mdx b/docs/snippets/common/main-config-addons.js.mdx
index 9658ffd13d43..81db53b1cd83 100644
--- a/docs/snippets/common/main-config-addons.js.mdx
+++ b/docs/snippets/common/main-config-addons.js.mdx
@@ -8,9 +8,23 @@ export default {
addons: [
'@storybook/addon-essentials',
{
- name: '@storybook/addon-styling',
+ name: '@storybook/addon-styling-webpack',
options: {
- postCss: true,
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader',
+ {
+ loader: 'postcss-loader',
+ options: {
+ implementation: require.resolve('postcss'),
+ },
+ },
+ ],
+ },
+ ],
},
},
],
diff --git a/docs/snippets/common/main-config-addons.ts.mdx b/docs/snippets/common/main-config-addons.ts.mdx
index 1038c4a4b41f..29c023182344 100644
--- a/docs/snippets/common/main-config-addons.ts.mdx
+++ b/docs/snippets/common/main-config-addons.ts.mdx
@@ -10,9 +10,23 @@ const config: StorybookConfig = {
addons: [
'@storybook/addon-essentials',
{
- name: '@storybook/addon-styling',
+ name: '@storybook/addon-styling-webpack',
options: {
- postCss: true,
+ rules: [
+ {
+ test: /\.css$/,
+ use: [
+ 'style-loader',
+ 'css-loader',
+ {
+ loader: 'postcss-loader',
+ options: {
+ implementation: require.resolve('postcss'),
+ },
+ },
+ ],
+ },
+ ],
},
},
],
diff --git a/docs/snippets/common/storybook-addon-panel-initial.js.mdx b/docs/snippets/common/storybook-addon-panel-initial.js.mdx
index 707e8bb199a7..f097d264461a 100644
--- a/docs/snippets/common/storybook-addon-panel-initial.js.mdx
+++ b/docs/snippets/common/storybook-addon-panel-initial.js.mdx
@@ -3,7 +3,7 @@
import React from 'react';
-import { addons, types } from '@storybook/preview-api';
+import { addons, types } from '@storybook/manager-api';
import { AddonPanel } from '@storybook/components';
diff --git a/docs/snippets/react/page-story-args-within-story.js.mdx b/docs/snippets/react/page-story-args-within-story.js.mdx
new file mode 100644
index 000000000000..282e81f79cf7
--- /dev/null
+++ b/docs/snippets/react/page-story-args-within-story.js.mdx
@@ -0,0 +1,31 @@
+```js
+// my-component/component.stories.js|jsx
+
+import { useArgs } from '@storybook/preview-api';
+import { Checkbox } from './checkbox';
+
+export default {
+ title: 'Inputs/Checkbox',
+ component: Checkbox,
+};
+
+export const Example = {
+ args: {
+ isChecked: false,
+ label: 'Try Me!',
+ },
+ /**
+ * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
+ * If you are not concerned with linting, you may use an arrow function.
+ */
+ render: function Render(args) {
+ const [{ isChecked }, updateArgs] = useArgs();
+
+ function onChange() {
+ updateArgs({ isChecked: !isChecked });
+ }
+
+ return ;
+ },
+};
+```
diff --git a/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx b/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx
new file mode 100644
index 000000000000..5a23cb8f523e
--- /dev/null
+++ b/docs/snippets/react/page-story-args-within-story.ts-4-9.mdx
@@ -0,0 +1,35 @@
+```ts
+// my-component/component.stories.ts|tsx
+
+import { StoryObj, Meta } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import { Checkbox } from './checkbox';
+
+const meta = {
+ title: 'Inputs/Checkbox',
+ component: Checkbox,
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+export const Example = {
+ args: {
+ isChecked: false,
+ label: 'Try Me!',
+ },
+ /**
+ * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
+ * If you are not concerned with linting, you may use an arrow function.
+ */
+ render: function Render(args) {
+ const [{ isChecked }, updateArgs] = useArgs();
+
+ function onChange() {
+ updateArgs({ isChecked: !isChecked });
+ }
+
+ return ;
+ },
+} satisfies Story;
+```
diff --git a/docs/snippets/react/page-story-args-within-story.ts.mdx b/docs/snippets/react/page-story-args-within-story.ts.mdx
new file mode 100644
index 000000000000..137e37cbf3d6
--- /dev/null
+++ b/docs/snippets/react/page-story-args-within-story.ts.mdx
@@ -0,0 +1,35 @@
+```ts
+// my-component/component.stories.ts|tsx
+
+import { StoryObj, Meta } from '@storybook/react';
+import { useArgs } from '@storybook/preview-api';
+import { Checkbox } from './checkbox';
+
+const meta: Meta = {
+ title: 'Inputs/Checkbox',
+ component: Checkbox,
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Example: Story = {
+ args: {
+ isChecked: false,
+ label: 'Try Me!',
+ },
+ /**
+ * 👇 To avoid linting issues, it is recommended to use a function with a capitalized name.
+ * If you are not concerned with linting, you may use an arrow function.
+ */
+ render: function Render(args) {
+ const [{ isChecked }, updateArgs] = useArgs();
+
+ function onChange() {
+ updateArgs({ isChecked: !isChecked });
+ }
+
+ return ;
+ },
+};
+```
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 2995041f2b7a..e6e5140c4079 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"7.5.0-alpha.3","info":{"plain":"- Build: Filter some manager errors - [#24217](https://github.com/storybookjs/storybook/pull/24217), thanks [@yannbf](https://github.com/yannbf)!\n- Build: Migrate @storybook/addon-backgrounds to strict-ts - [#22178](https://github.com/storybookjs/storybook/pull/22178), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- Build: Upgrade chromatic bin package - [#24133](https://github.com/storybookjs/storybook/pull/24133), thanks [@ndelangen](https://github.com/ndelangen)!\n- CLI: Change `/Date$/` to `/Dates$/i` - [#24195](https://github.com/storybookjs/storybook/pull/24195), thanks [@arup1221](https://github.com/arup1221)!\n- CLI: Fix `sb add` adding duplicative entries - [#24229](https://github.com/storybookjs/storybook/pull/24229), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Throw an error when critical presets fail to load - [#24176](https://github.com/storybookjs/storybook/pull/24176), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Unify error when builder is missing - [#24177](https://github.com/storybookjs/storybook/pull/24177), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Upgrade `esbuild-register` to `3.5.0` - [#24175](https://github.com/storybookjs/storybook/pull/24175), thanks [@anneau](https://github.com/anneau)!\n- Dependencies: Upgrade `file-system-cache` - [#24232](https://github.com/storybookjs/storybook/pull/24232), thanks [@seriouz](https://github.com/seriouz)!\n- Indexer: Rename `index` to `createIndex` - [#24075](https://github.com/storybookjs/storybook/pull/24075), thanks [@JReinhold](https://github.com/JReinhold)!\n- Maintenance: Regen lockfiles - [#24152](https://github.com/storybookjs/storybook/pull/24152), thanks [@ndelangen](https://github.com/ndelangen)!\n- Manager: Fix useAddonState when using a setter function - [#24237](https://github.com/storybookjs/storybook/pull/24237), thanks [@ndelangen](https://github.com/ndelangen)!\n- NextJS: Add compatibility with nextjs `13.5` - [#24239](https://github.com/storybookjs/storybook/pull/24239), thanks [@ndelangen](https://github.com/ndelangen)!\n- NextJS: Aliases `react` and `react-dom` like `next.js` does - [#23671](https://github.com/storybookjs/storybook/pull/23671), thanks [@sookmax](https://github.com/sookmax)!\n- Nextjs: Improve Google Fonts failure error messages and documentation - [#23891](https://github.com/storybookjs/storybook/pull/23891), thanks [@nsheaps](https://github.com/nsheaps)!\n- Nextjs: Migrate from config to previewAnnotations - [#24178](https://github.com/storybookjs/storybook/pull/24178), thanks [@yannbf](https://github.com/yannbf)!\n- Theming: Add `barHoverColor` - [#20169](https://github.com/storybookjs/storybook/pull/20169), thanks [@julien-deramond](https://github.com/julien-deramond)!\n- Types: Allow `null` in value of `experimental_updateStatus` to clear status - [#24206](https://github.com/storybookjs/storybook/pull/24206), thanks [@ndelangen](https://github.com/ndelangen)!\n- Types: Don't distribute generic type of Meta and Story - [#24110](https://github.com/storybookjs/storybook/pull/24110), thanks [@kasperpeulen](https://github.com/kasperpeulen)!\n- UI: Expand sidebar for selected story when using composition - [#23781](https://github.com/storybookjs/storybook/pull/23781), thanks [@joaonunomota](https://github.com/joaonunomota)!\n- UI: Fix SVG override fill when path has a fill attribute - [#24156](https://github.com/storybookjs/storybook/pull/24156), thanks [@ndelangen](https://github.com/ndelangen)!\n- UI: Fix TreeNode alignment when using a different font - [#22221](https://github.com/storybookjs/storybook/pull/22221), thanks [@bdriguesdev](https://github.com/bdriguesdev)!\n- UI: Fix custom theme hover-color inconsistency - [#22262](https://github.com/storybookjs/storybook/pull/22262), thanks [@yoshi2no](https://github.com/yoshi2no)!\n- UI: Fix keydown shortcut within shadow tree - [#24179](https://github.com/storybookjs/storybook/pull/24179), thanks [@stropitek](https://github.com/stropitek)!\n- UI: Improve look and feel of status UI in sidebar - [#24099](https://github.com/storybookjs/storybook/pull/24099), thanks [@ndelangen](https://github.com/ndelangen)!"}}
+{"version":"7.5.0-alpha.4","info":{"plain":"- CLI: Fix Nextjs project detection - [#24346](https://github.com/storybookjs/storybook/pull/24346), thanks [@yannbf](https://github.com/yannbf)!\n- Core: Deprecate `storyStoreV6` (including `storiesOf`) and `storyIndexers` - [#23938](https://github.com/storybookjs/storybook/pull/23938), thanks [@JReinhold](https://github.com/JReinhold)!\n- Core: Fix Promise cycle bug in useSharedState - [#24268](https://github.com/storybookjs/storybook/pull/24268), thanks [@ndelangen](https://github.com/ndelangen)!\n- Core: Fix missing favicon during dev - [#24356](https://github.com/storybookjs/storybook/pull/24356), thanks [@ndelangen](https://github.com/ndelangen)!\n- NextJS: Change babel plugins from `proposal-...` to `transform-...` - [#24290](https://github.com/storybookjs/storybook/pull/24290), thanks [@roottool](https://github.com/roottool)!\n- Nextjs: Improve support for Windows-style paths - [#23695](https://github.com/storybookjs/storybook/pull/23695), thanks [@T99](https://github.com/T99)!\n- UI: Fix infinite hook call causing browsers to freeze - [#24291](https://github.com/storybookjs/storybook/pull/24291), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Improve contrast ratio between focus / hover - [#24205](https://github.com/storybookjs/storybook/pull/24205), thanks [@chocoscoding](https://github.com/chocoscoding)!\n- Vite: Move mdx-plugin from @storybook/builder-vite to @storybook/addon-docs - [#24166](https://github.com/storybookjs/storybook/pull/24166), thanks [@bryanjtc](https://github.com/bryanjtc)!"}}
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 807797e5675f..26a61edfb322 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -213,6 +213,25 @@ Similarly, special formats are available for dates and colors. Date objects will
Args specified through the URL will extend and override any default values of args set on the story.
+
+
+## Setting args from within a story
+
+Interactive components often need to be controlled by their containing component or page to respond to events, modify their state and reflect those changes in the UI. For example, when a user toggles a switch component, the switch should be checked, and the arg shown in Storybook should reflect the change. To enable this, you can use the `useArgs` API exported by `@storybook/preview-api`:
+
+
+
+
+
+
+
+
+
## Mapping to complex arg values
Complex values such as JSX elements cannot be serialized to the manager (e.g., the Controls addon) or synced with the URL. Arg values can be "mapped" from a simple string to a complex type using the `mapping` property in `argTypes` to work around this limitation. It works in any arg but makes the most sense when used with the `select` control type.
diff --git a/scripts/package.json b/scripts/package.json
index 906bb2b95926..8a1ace601a4d 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -58,12 +58,12 @@
"dependencies": {
"@actions/core": "^1.10.0",
"@babel/core": "^7.22.0",
- "@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-proposal-decorators": "^7.22.0",
"@babel/plugin-syntax-class-properties": "^7.12.13",
"@babel/plugin-syntax-decorators": "^7.22.0",
"@babel/plugin-syntax-jsx": "^7.21.0",
"@babel/plugin-syntax-typescript": "^7.21.0",
+ "@babel/plugin-transform-class-properties": "^7.22.5",
"@babel/preset-env": "^7.22.0",
"@babel/preset-react": "^7.22.0",
"@babel/preset-typescript": "^7.21.0",
diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts
index 0e477b1a6220..22a4eccf4d14 100755
--- a/scripts/sandbox/generate.ts
+++ b/scripts/sandbox/generate.ts
@@ -125,6 +125,10 @@ const runGenerators = async (
localRegistry = true,
debug = false
) => {
+ if (debug) {
+ console.log('Debug mode enabled. Verbose logs will be printed to the console.');
+ }
+
console.log(`🤹♂️ Generating sandboxes with a concurrency of ${maxConcurrentTasks}`);
const limit = pLimit(maxConcurrentTasks);
diff --git a/scripts/yarn.lock b/scripts/yarn.lock
index ee273eaf2d45..ee865b1b5b66 100644
--- a/scripts/yarn.lock
+++ b/scripts/yarn.lock
@@ -131,7 +131,7 @@ __metadata:
languageName: node
linkType: hard
-"@babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.22.11, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.22.5":
+"@babel/helper-create-class-features-plugin@npm:^7.22.11, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.22.5":
version: 7.22.15
resolution: "@babel/helper-create-class-features-plugin@npm:7.22.15"
dependencies:
@@ -393,18 +393,6 @@ __metadata:
languageName: node
linkType: hard
-"@babel/plugin-proposal-class-properties@npm:^7.18.6":
- version: 7.18.6
- resolution: "@babel/plugin-proposal-class-properties@npm:7.18.6"
- dependencies:
- "@babel/helper-create-class-features-plugin": ^7.18.6
- "@babel/helper-plugin-utils": ^7.18.6
- peerDependencies:
- "@babel/core": ^7.0.0-0
- checksum: d5172ac6c9948cdfc387e94f3493ad86cb04035cf7433f86b5d358270b1b9752dc25e176db0c5d65892a246aca7bdb4636672e15626d7a7de4bc0bd0040168d9
- languageName: node
- linkType: hard
-
"@babel/plugin-proposal-decorators@npm:^7.22.0":
version: 7.22.15
resolution: "@babel/plugin-proposal-decorators@npm:7.22.15"
@@ -2891,12 +2879,12 @@ __metadata:
dependencies:
"@actions/core": ^1.10.0
"@babel/core": ^7.22.0
- "@babel/plugin-proposal-class-properties": ^7.18.6
"@babel/plugin-proposal-decorators": ^7.22.0
"@babel/plugin-syntax-class-properties": ^7.12.13
"@babel/plugin-syntax-decorators": ^7.22.0
"@babel/plugin-syntax-jsx": ^7.21.0
"@babel/plugin-syntax-typescript": ^7.21.0
+ "@babel/plugin-transform-class-properties": ^7.22.5
"@babel/preset-env": ^7.22.0
"@babel/preset-react": ^7.22.0
"@babel/preset-typescript": ^7.21.0