+);
diff --git a/code/ui/blocks/src/examples/ControlsWithSubcomponentsParameters.stories.tsx b/code/ui/blocks/src/examples/ControlsWithSubcomponentsParameters.stories.tsx
new file mode 100644
index 000000000000..65d350564c1a
--- /dev/null
+++ b/code/ui/blocks/src/examples/ControlsWithSubcomponentsParameters.stories.tsx
@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ControlsParameters, SubcomponentA, SubcomponentB } from './ControlsParameters';
+
+/**
+ * Reference stories to be used by the Controls stories
+ */
+const meta = {
+ title: 'examples/Stories for the Controls Block with Subcomponents',
+ component: ControlsParameters,
+ subcomponents: { SubcomponentA, SubcomponentB },
+ args: { b: 'b' },
+ argTypes: {
+ // @ts-expect-error Meta type is trying to force us to use real props as args
+ extraMetaArgType: {
+ type: { name: 'string' },
+ name: 'Extra Meta',
+ description: 'An extra argtype added at the meta level',
+ table: { defaultValue: { summary: "'a default value'" } },
+ },
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const NoParameters: Story = {
+ argTypes: {
+ // @ts-expect-error Story type is trying to force us to use real props as args
+ extraStoryArgType: {
+ type: { name: 'string' },
+ name: 'Extra Story',
+ description: 'An extra argtype added at the story level',
+ table: { defaultValue: { summary: "'a default value'" } },
+ },
+ },
+};
diff --git a/code/ui/manager/src/components/sidebar/Menu.stories.tsx b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
index ca89361f179e..98788518db4b 100644
--- a/code/ui/manager/src/components/sidebar/Menu.stories.tsx
+++ b/code/ui/manager/src/components/sidebar/Menu.stories.tsx
@@ -56,6 +56,7 @@ export const Expanded: Story = {
getAddonsShortcuts: () => ({}),
versionUpdateAvailable: () => false,
isWhatsNewUnread: () => true,
+ getDocsUrl: () => 'https://storybook.js.org/docs/',
},
false,
false,
@@ -99,6 +100,7 @@ export const ExpandedWithoutWhatsNew: Story = {
getAddonsShortcuts: () => ({}),
versionUpdateAvailable: () => false,
isWhatsNewUnread: () => false,
+ getDocsUrl: () => 'https://storybook.js.org/docs/',
},
false,
false,
diff --git a/code/ui/manager/src/components/sidebar/Search.tsx b/code/ui/manager/src/components/sidebar/Search.tsx
index 32415c056110..525337b8b2aa 100644
--- a/code/ui/manager/src/components/sidebar/Search.tsx
+++ b/code/ui/manager/src/components/sidebar/Search.tsx
@@ -122,8 +122,15 @@ const FocusKey = styled.code(({ theme }) => ({
color: theme.base === 'light' ? theme.color.dark : theme.textMutedColor,
userSelect: 'none',
pointerEvents: 'none',
+ display: 'flex',
+ alignItems: 'center',
+ gap: 4,
}));
+const FocusKeyCmd = styled.span({
+ fontSize: '14px',
+});
+
const ClearIcon = styled.div(({ theme }) => ({
position: 'absolute',
top: 0,
@@ -352,7 +359,17 @@ export const Search = React.memo<{
{/* @ts-expect-error (TODO) */}
- {enableShortcuts && !isOpen && {searchShortcut}}
+ {enableShortcuts && !isOpen && (
+
+ {searchShortcut === '⌘ K' ? (
+ <>
+ ⌘K
+ >
+ ) : (
+ searchShortcut
+ )}
+
+ )}
{isOpen && (
clearSelection()}>
diff --git a/code/ui/manager/src/container/Menu.tsx b/code/ui/manager/src/container/Menu.tsx
index 2c8fb64c01a3..77df6aecdd01 100644
--- a/code/ui/manager/src/container/Menu.tsx
+++ b/code/ui/manager/src/container/Menu.tsx
@@ -5,7 +5,7 @@ import { Badge } from '@storybook/components';
import type { API, State } from '@storybook/manager-api';
import { shortcutToHumanString } from '@storybook/manager-api';
import { styled, useTheme } from '@storybook/theming';
-import { CheckIcon } from '@storybook/icons';
+import { CheckIcon, InfoIcon, ShareAltIcon, WandIcon } from '@storybook/icons';
const focusableUIElements = {
storySearchField: 'storybook-explorer-searchfield',
@@ -65,10 +65,22 @@ export const useMenu = (
id: 'about',
title: 'About your Storybook',
onClick: () => api.changeSettingsTab('about'),
+ icon: ,
}),
[api]
);
+ const documentation = useMemo(() => {
+ const docsUrl = api.getDocsUrl({ versioned: true, renderer: true });
+
+ return {
+ id: 'documentation',
+ title: 'Documentation',
+ href: docsUrl,
+ icon: ,
+ };
+ }, [api]);
+
const whatsNewNotificationsEnabled =
state.whatsNewData?.status === 'SUCCESS' && !state.disableWhatsNewNotifications;
const isWhatsNewUnread = api.isWhatsNewUnread();
@@ -80,6 +92,7 @@ export const useMenu = (
right: whatsNewNotificationsEnabled && isWhatsNewUnread && (
Check it out
),
+ icon: ,
}),
[api, whatsNewNotificationsEnabled, isWhatsNewUnread]
);
@@ -104,7 +117,7 @@ export const useMenu = (
onClick: () => api.toggleNav(),
active: isNavShown,
right: enableShortcuts ? : null,
- left: isNavShown ? : null,
+ icon: isNavShown ? : null,
}),
[api, enableShortcuts, shortcutKeys, isNavShown]
);
@@ -116,7 +129,7 @@ export const useMenu = (
onClick: () => api.toggleToolbar(),
active: showToolbar,
right: enableShortcuts ? : null,
- left: showToolbar ? : null,
+ icon: showToolbar ? : null,
}),
[api, enableShortcuts, shortcutKeys, showToolbar]
);
@@ -128,7 +141,7 @@ export const useMenu = (
onClick: () => api.togglePanel(),
active: isPanelShown,
right: enableShortcuts ? : null,
- left: isPanelShown ? : null,
+ icon: isPanelShown ? : null,
}),
[api, enableShortcuts, shortcutKeys, isPanelShown]
);
@@ -150,7 +163,7 @@ export const useMenu = (
onClick: () => api.toggleFullscreen(),
active: isFullscreen,
right: enableShortcuts ? : null,
- left: isFullscreen ? : null,
+ icon: isFullscreen ? : null,
}),
[api, enableShortcuts, shortcutKeys, isFullscreen]
);
@@ -232,6 +245,7 @@ export const useMenu = (
() => [
about,
...(state.whatsNewData?.status === 'SUCCESS' ? [whatsNew] : []),
+ documentation,
shortcuts,
sidebarToggle,
toolbarToogle,
@@ -250,6 +264,7 @@ export const useMenu = (
about,
state,
whatsNew,
+ documentation,
shortcuts,
sidebarToggle,
toolbarToogle,
diff --git a/code/yarn.lock b/code/yarn.lock
index c589f2a7e3c1..658e3dd2ca3c 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -4915,8 +4915,8 @@ __metadata:
fs-extra: "npm:^11.1.0"
react: "npm:^18.2.0"
react-dom: "npm:^18.2.0"
- remark-external-links: "npm:^8.0.0"
- remark-slug: "npm:^6.0.0"
+ rehype-external-links: "npm:^3.0.0"
+ rehype-slug: "npm:^6.0.0"
ts-dedent: "npm:^2.0.0"
typescript: "npm:^5.3.2"
vite: "npm:^4.0.4"
@@ -5169,7 +5169,6 @@ __metadata:
"@angular/platform-browser": "npm:^17.0.5"
"@angular/platform-browser-dynamic": "npm:^17.0.5"
"@storybook/builder-webpack5": "workspace:*"
- "@storybook/cli": "workspace:*"
"@storybook/client-logger": "workspace:*"
"@storybook/core-common": "workspace:*"
"@storybook/core-events": "workspace:*"
@@ -5439,11 +5438,9 @@ __metadata:
detect-indent: "npm:^6.1.0"
envinfo: "npm:^7.7.3"
execa: "npm:^5.0.0"
- express: "npm:^4.17.3"
find-up: "npm:^5.0.0"
fs-extra: "npm:^11.1.0"
get-npm-tarball-url: "npm:^2.0.3"
- get-port: "npm:^5.1.1"
giget: "npm:^1.0.0"
globby: "npm:^11.0.2"
jscodeshift: "npm:^0.15.1"
@@ -5459,7 +5456,6 @@ __metadata:
tiny-invariant: "npm:^1.3.1"
ts-dedent: "npm:^2.0.0"
typescript: "npm:^5.3.2"
- util-deprecate: "npm:^1.0.2"
bin:
getstorybook: ./bin/index.js
sb: ./bin/index.js
@@ -5548,6 +5544,7 @@ __metadata:
resolution: "@storybook/core-common@workspace:lib/core-common"
dependencies:
"@storybook/core-events": "workspace:*"
+ "@storybook/csf-tools": "workspace:*"
"@storybook/node-logger": "workspace:*"
"@storybook/types": "workspace:*"
"@types/find-cache-dir": "npm:^3.2.1"
@@ -5557,9 +5554,13 @@ __metadata:
"@types/node-fetch": "npm:^2.6.4"
"@types/picomatch": "npm:^2.3.0"
"@types/pretty-hrtime": "npm:^1.0.0"
+ "@yarnpkg/fslib": "npm:2.10.3"
+ "@yarnpkg/libzip": "npm:2.3.0"
chalk: "npm:^4.1.0"
+ cross-spawn: "npm:^7.0.3"
esbuild: "npm:^0.18.0"
esbuild-register: "npm:^3.5.0"
+ execa: "npm:^5.0.0"
file-system-cache: "npm:2.3.0"
find-cache-dir: "npm:^3.0.0"
find-up: "npm:^5.0.0"
@@ -5573,10 +5574,14 @@ __metadata:
pkg-dir: "npm:^5.0.0"
pretty-hrtime: "npm:^1.0.3"
resolve-from: "npm:^5.0.0"
+ semver: "npm:^7.3.7"
slash: "npm:^5.0.0"
+ tempy: "npm:^1.0.1"
+ tiny-invariant: "npm:^1.3.1"
ts-dedent: "npm:^2.0.0"
type-fest: "npm:~2.19"
typescript: "npm:^5.3.2"
+ util: "npm:^0.12.4"
languageName: unknown
linkType: soft
@@ -15801,13 +15806,6 @@ __metadata:
languageName: node
linkType: hard
-"get-port@npm:^5.1.1":
- version: 5.1.1
- resolution: "get-port@npm:5.1.1"
- checksum: 2873877a469b24e6d5e0be490724a17edb39fafc795d1d662e7bea951ca649713b4a50117a473f9d162312cb0e946597bd0e049ed2f866e79e576e8e213d3d1c
- languageName: node
- linkType: hard
-
"get-stdin@npm:^6.0.0":
version: 6.0.0
resolution: "get-stdin@npm:6.0.0"
@@ -15927,10 +15925,10 @@ __metadata:
languageName: node
linkType: hard
-"github-slugger@npm:^1.0.0":
- version: 1.5.0
- resolution: "github-slugger@npm:1.5.0"
- checksum: 116f99732925f939cbfd6f2e57db1aa7e111a460db0d103e3b3f2fce6909d44311663d4542350706cad806345b9892358cc3b153674f88eeae77f43380b3bfca
+"github-slugger@npm:^2.0.0":
+ version: 2.0.0
+ resolution: "github-slugger@npm:2.0.0"
+ checksum: 21b912b6b1e48f1e5a50b2292b48df0ff6abeeb0691b161b3d93d84f4ae6b1acd6ae23702e914af7ea5d441c096453cf0f621b72d57893946618d21dd1a1c486
languageName: node
linkType: hard
@@ -16439,6 +16437,24 @@ __metadata:
languageName: node
linkType: hard
+"hast-util-heading-rank@npm:^3.0.0":
+ version: 3.0.0
+ resolution: "hast-util-heading-rank@npm:3.0.0"
+ dependencies:
+ "@types/hast": "npm:^3.0.0"
+ checksum: 1879c84f629e73f1f13247ab349324355cd801363b44e3d46f763aa5c0ea3b42dcd47b46e5643a0502cf01a6b1fdb9208fd12852e44ca6c671b3e4bccf9369a1
+ languageName: node
+ linkType: hard
+
+"hast-util-is-element@npm:^3.0.0":
+ version: 3.0.0
+ resolution: "hast-util-is-element@npm:3.0.0"
+ dependencies:
+ "@types/hast": "npm:^3.0.0"
+ checksum: f5361e4c9859c587ca8eb0d8343492f3077ccaa0f58a44cd09f35d5038f94d65152288dcd0c19336ef2c9491ec4d4e45fde2176b05293437021570aa0bc3613b
+ languageName: node
+ linkType: hard
+
"hast-util-parse-selector@npm:^2.0.0":
version: 2.2.5
resolution: "hast-util-parse-selector@npm:2.2.5"
@@ -16493,6 +16509,15 @@ __metadata:
languageName: node
linkType: hard
+"hast-util-to-string@npm:^3.0.0":
+ version: 3.0.0
+ resolution: "hast-util-to-string@npm:3.0.0"
+ dependencies:
+ "@types/hast": "npm:^3.0.0"
+ checksum: 649edd993cf244563ad86d861aa0863759a4fbec49c43b3d92240e42aa4b69f0c3332ddff9e80954bbd8756c86b0fddc20e97d281c6da59d00427f45da8dab68
+ languageName: node
+ linkType: hard
+
"hast-util-whitespace@npm:^3.0.0":
version: 3.0.0
resolution: "hast-util-whitespace@npm:3.0.0"
@@ -17268,10 +17293,10 @@ __metadata:
languageName: node
linkType: hard
-"is-absolute-url@npm:^3.0.0":
- version: 3.0.3
- resolution: "is-absolute-url@npm:3.0.3"
- checksum: 04c415974c32e73a83d3a21a9bea18fc4e2c14fbe6bbd64832cf1e67a75ade2af0e900f552f0b8a447f1305f5ffc9d143ccd8d005dbe715d198c359d342b86f0
+"is-absolute-url@npm:^4.0.0":
+ version: 4.0.1
+ resolution: "is-absolute-url@npm:4.0.1"
+ checksum: 6f8f603945bd9f2c6031758bbc12352fc647bd5d807cad10d96cc6300fd0e15240cc091521a61db767e4ec0bacff257b4f1015fd5249c147bbb4a4497356c72e
languageName: node
linkType: hard
@@ -19627,15 +19652,6 @@ __metadata:
languageName: node
linkType: hard
-"mdast-util-definitions@npm:^4.0.0":
- version: 4.0.0
- resolution: "mdast-util-definitions@npm:4.0.0"
- dependencies:
- unist-util-visit: "npm:^2.0.0"
- checksum: d81bb0b702f99878c8e8e4f66dd7f6f673ab341f061b3d9487ba47dad28b584e02f16b4c42df23714eaac8a7dd8544ba7d77308fad8d4a9fd0ac92e2a7f56be9
- languageName: node
- linkType: hard
-
"mdast-util-find-and-replace@npm:^3.0.0":
version: 3.0.1
resolution: "mdast-util-find-and-replace@npm:3.0.1"
@@ -19917,13 +19933,6 @@ __metadata:
languageName: node
linkType: hard
-"mdast-util-to-string@npm:^1.0.0":
- version: 1.1.0
- resolution: "mdast-util-to-string@npm:1.1.0"
- checksum: 5dad9746ec0839792a8a35f504564e8d2b8c30013652410306c111963d33f1ee7b5477aa64ed77b64e13216363a29395809875ffd80e2031a08614657628a121
- languageName: node
- linkType: hard
-
"mdast-util-to-string@npm:^3.0.0, mdast-util-to-string@npm:^3.1.0":
version: 3.2.0
resolution: "mdast-util-to-string@npm:3.2.0"
@@ -24526,6 +24535,33 @@ __metadata:
languageName: node
linkType: hard
+"rehype-external-links@npm:^3.0.0":
+ version: 3.0.0
+ resolution: "rehype-external-links@npm:3.0.0"
+ dependencies:
+ "@types/hast": "npm:^3.0.0"
+ "@ungap/structured-clone": "npm:^1.0.0"
+ hast-util-is-element: "npm:^3.0.0"
+ is-absolute-url: "npm:^4.0.0"
+ space-separated-tokens: "npm:^2.0.0"
+ unist-util-visit: "npm:^5.0.0"
+ checksum: 486b5db73d8fe72611d62b4eb0b56ec71025ea32bba764ad54473f714ca627be75e057ac29243763f85a77c3810f31727ce3e03c975b3803c1c98643d038e9ae
+ languageName: node
+ linkType: hard
+
+"rehype-slug@npm:^6.0.0":
+ version: 6.0.0
+ resolution: "rehype-slug@npm:6.0.0"
+ dependencies:
+ "@types/hast": "npm:^3.0.0"
+ github-slugger: "npm:^2.0.0"
+ hast-util-heading-rank: "npm:^3.0.0"
+ hast-util-to-string: "npm:^3.0.0"
+ unist-util-visit: "npm:^5.0.0"
+ checksum: 51303c33d039c271cabe62161b49fa737be488f70ced62f00c165e47a089a99de2060050385e5c00d0df83ed30c7fa1c79a51b78508702836aefa51f7e7a6760
+ languageName: node
+ linkType: hard
+
"relateurl@npm:^0.2.7":
version: 0.2.7
resolution: "relateurl@npm:0.2.7"
@@ -24547,19 +24583,6 @@ __metadata:
languageName: node
linkType: hard
-"remark-external-links@npm:^8.0.0":
- version: 8.0.0
- resolution: "remark-external-links@npm:8.0.0"
- dependencies:
- extend: "npm:^3.0.0"
- is-absolute-url: "npm:^3.0.0"
- mdast-util-definitions: "npm:^4.0.0"
- space-separated-tokens: "npm:^1.0.0"
- unist-util-visit: "npm:^2.0.0"
- checksum: 5f0affc97e18ad3247e3b29449f4df98be5a75950cf0f0f13dd1755c4ef1065f9ab44626bba34d913d32bb92afd6f06a8e2f8068e83b48337f0b7a5d1f0cecfe
- languageName: node
- linkType: hard
-
"remark-gfm@npm:^4.0.0":
version: 4.0.0
resolution: "remark-gfm@npm:4.0.0"
@@ -24855,17 +24878,6 @@ __metadata:
languageName: node
linkType: hard
-"remark-slug@npm:^6.0.0":
- version: 6.1.0
- resolution: "remark-slug@npm:6.1.0"
- dependencies:
- github-slugger: "npm:^1.0.0"
- mdast-util-to-string: "npm:^1.0.0"
- unist-util-visit: "npm:^2.0.0"
- checksum: 7cc2857936fce9c9c00b9c7d70de46d594cedf93bd8560fd006164dee7aacccdf472654ee35b33f4fb4bd0af882d89998c6d0c9088c2e95702a9fc15ebae002a
- languageName: node
- linkType: hard
-
"remark-stringify@npm:^11.0.0":
version: 11.0.0
resolution: "remark-stringify@npm:11.0.0"
@@ -28215,13 +28227,6 @@ __metadata:
languageName: node
linkType: hard
-"unist-util-is@npm:^4.0.0":
- version: 4.1.0
- resolution: "unist-util-is@npm:4.1.0"
- checksum: 21ca3d7bacc88853b880b19cb1b133a056c501617d7f9b8cce969cd8b430ed7e1bc416a3a11b02540d5de6fb86807e169d00596108a459d034cf5faec97c055e
- languageName: node
- linkType: hard
-
"unist-util-is@npm:^5.0.0":
version: 5.2.1
resolution: "unist-util-is@npm:5.2.1"
@@ -28308,16 +28313,6 @@ __metadata:
languageName: node
linkType: hard
-"unist-util-visit-parents@npm:^3.0.0":
- version: 3.1.1
- resolution: "unist-util-visit-parents@npm:3.1.1"
- dependencies:
- "@types/unist": "npm:^2.0.0"
- unist-util-is: "npm:^4.0.0"
- checksum: 231c80c5ba8e79263956fcaa25ed2a11ad7fe77ac5ba0d322e9d51bbc4238501e3bb52f405e518bcdc5471e27b33eff520db0aa4a3b1feb9fb6e2de6ae385d49
- languageName: node
- linkType: hard
-
"unist-util-visit-parents@npm:^4.0.0":
version: 4.1.1
resolution: "unist-util-visit-parents@npm:4.1.1"
@@ -28348,17 +28343,6 @@ __metadata:
languageName: node
linkType: hard
-"unist-util-visit@npm:^2.0.0":
- version: 2.0.3
- resolution: "unist-util-visit@npm:2.0.3"
- dependencies:
- "@types/unist": "npm:^2.0.0"
- unist-util-is: "npm:^4.0.0"
- unist-util-visit-parents: "npm:^3.0.0"
- checksum: 7b11303d82271ca53a2ced2d56c87a689dd518596c99ff4a11cdff750f5cc5c0e4b64b146bd2363557cb29443c98713bfd1e8dc6d1c3f9d474b9eb1f23a60888
- languageName: node
- linkType: hard
-
"unist-util-visit@npm:^3.0.0":
version: 3.1.0
resolution: "unist-util-visit@npm:3.1.0"
diff --git a/docs/addons/addon-types.md b/docs/addons/addon-types.md
index c189c090d815..f46e4f41ff03 100644
--- a/docs/addons/addon-types.md
+++ b/docs/addons/addon-types.md
@@ -90,7 +90,7 @@ Use this boilerplate code while writing your own preset addon.
-## Learn more about the Storybook addon ecosystem
+**Learn more about the Storybook addon ecosystem**
- Types of addons for other types of addons
- [Writing addons](./writing-addons.md) for the basics of addon development
diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md
index 5a0464170067..8bdc7d62367e 100644
--- a/docs/addons/addons-api.md
+++ b/docs/addons/addons-api.md
@@ -378,7 +378,7 @@ Hook that allows you to retrieve or update a story's [`args`](../writing-stories
-## Learn more about the Storybook addon ecosystem
+**Learn more about the Storybook addon ecosystem**
- [Types of addons](./addon-types.md) for other types of addons
- [Writing addons](./writing-addons.md) for the basics of addon development
diff --git a/docs/addons/integration-catalog.md b/docs/addons/integration-catalog.md
index fba4fd76fe2f..e5620b1a7c50 100644
--- a/docs/addons/integration-catalog.md
+++ b/docs/addons/integration-catalog.md
@@ -104,7 +104,7 @@ Not finding the recipe that you want? If it's popular in the community, our docs
If you'd like to request a recipe, open a [new discussion](https://github.com/storybookjs/storybook/discussions/new?category=ideas) in our GitHub repo. We'll review your request, and if it's popular, we'll add it to our backlog and prioritize it.
-## Learn more about the Storybook addon ecosystem
+**Learn more about the Storybook addon ecosystem**
- [Types of addons](./addon-types.md) for other types of addons
- [Writing addons](./writing-addons.md) for the basics of addon development
diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md
index ca963041014c..dd99775dbdd5 100644
--- a/docs/addons/writing-addons.md
+++ b/docs/addons/writing-addons.md
@@ -315,7 +315,7 @@ By default, the Addon Kit comes pre-configured with a GitHub Actions workflow, e
Then, click the **New repository secret**, name it `NPM_TOKEN`, and paste the token you generated earlier. Whenever you merge a pull request to the default branch, the workflow will run and publish a new release, automatically incrementing the version number and updating the changelog.
-## Learn more about the Storybook addon ecosystem
+**Learn more about the Storybook addon ecosystem**
- [Types of addons](./addon-types.md) for other types of addons
- Writing addons for the basics of addon development
diff --git a/docs/addons/writing-presets.md b/docs/addons/writing-presets.md
index 4c7ae3be3843..eaa3da082eb5 100644
--- a/docs/addons/writing-presets.md
+++ b/docs/addons/writing-presets.md
@@ -57,7 +57,9 @@ To customize Storybook's Babel configuration and add support for additional feat
+
The Babel configuration is only applied to frameworks that use Babel internally. If you enable it for a framework that uses a different compiler, like [SWC](https://swc.rs/) or [esbuild](https://esbuild.github.io/), it will be ignored.
+
### Builders
@@ -199,6 +201,8 @@ However, if you need, you can also customize the template used by Storybook to r
As Storybook relies on [esbuild](https://esbuild.github.io/) instead of Webpack to build the UI, presets that depend on the `managerWebpack` API to configure the manager or load additional files other than CSS or images will no longer work. We recommend removing it from your preset and adjusting your configuration to convert any additional files to JavaScript.
+**Learn more about the Storybook addon ecosystem**
+
- [Types of addons](./addon-types.md) for other types of addons
- [Writing addons](./writing-addons.md) for the basics of addon development
- Presets for preset development
diff --git a/docs/api/main-config-babel-default.md b/docs/api/main-config-babel-default.md
index b79867e1dc34..94f34878ac63 100644
--- a/docs/api/main-config-babel-default.md
+++ b/docs/api/main-config-babel-default.md
@@ -26,7 +26,7 @@ To adjust your Storybook's Babel setup directly—not via an addon—use [`babel
## `Babel.Config`
-See [Babel docs](https://babeljs.io/docs/options).
+The options provided by [Babel](https://babeljs.io/docs/options) are only applicable if you've enabled the [`@storybook/addon-webpack5-compiler-babel`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-babel) addon.
## `Options`
diff --git a/docs/api/main-config-babel.md b/docs/api/main-config-babel.md
index a84a938b5a35..d7e9c865a0e0 100644
--- a/docs/api/main-config-babel.md
+++ b/docs/api/main-config-babel.md
@@ -27,7 +27,13 @@ Customize Storybook's [Babel](https://babeljs.io/) setup.
## `Babel.Config`
-See [Babel docs](https://babeljs.io/docs/options).
+The options provided by [Babel](https://babeljs.io/docs/options) are only applicable if you've enabled the [`@storybook/addon-webpack5-compiler-babel`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-babel) addon.
+
+
+
+If you have an existing Babel configuration file (e.g., `.babelrc`), it will be automatically detected and used by Storybook without any additional configuration required.
+
+
## `Options`
diff --git a/docs/api/main-config-stories.md b/docs/api/main-config-stories.md
index b59d0cb93bf0..89b7051588ba 100644
--- a/docs/api/main-config-stories.md
+++ b/docs/api/main-config-stories.md
@@ -101,7 +101,7 @@ Where to start looking for story files, relative to the root of your project.
Type: `string`
-Default: `'**/*.@(mdx|stories.@(mdx|js|jsx|mjs|ts|tsx))'`
+Default: `'**/*.@(mdx|stories.@(js|jsx|mjs|ts|tsx))'`
A glob, relative to `StoriesSpecifier.directory` (with no leading `./`), that matches the filenames to load.
diff --git a/docs/api/main-config-swc.md b/docs/api/main-config-swc.md
index ffd91ddbc7fb..0a102bf0cf13 100644
--- a/docs/api/main-config-swc.md
+++ b/docs/api/main-config-swc.md
@@ -21,7 +21,7 @@ Customize Storybook's [SWC](https://swc.rs/) setup.
## `SWC.Options`
-See SWC's [documentation](https://swc.rs/) for more information.
+The options provided by [SWC](https://swc.rs/) are only applicable if you've enabled the [`@storybook/addon-webpack5-compiler-swc`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-swc) addon.
## Options
diff --git a/docs/builders/builder-api.md b/docs/builders/builder-api.md
index 82ecfcf27fbf..f06c82b95e27 100644
--- a/docs/builders/builder-api.md
+++ b/docs/builders/builder-api.md
@@ -157,7 +157,7 @@ While running in development mode, the builder's development server must be able
This area is under rapid development, and the associated documentation is still in progress and subject to change. If you are interested in creating a builder, you can learn more about implementing a builder in Storybook by checking the source code for [Vite](https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite), [Webpack](https://github.com/storybookjs/storybook/tree/next/code/builders/builder-webpack5), or Modern Web's [dev-server-storybook](https://github.com/modernweb-dev/web/blob/master/packages/dev-server-storybook/src/serve/storybookPlugin.ts). When you're ready, open an [RFC](../contribute/RFC.md) to discuss your proposal with the Storybook community and maintainers.
-#### Learn more about builders
+**Learn more about builders**
- [Vite builder](./vite.md) for bundling with Vite
- [Webpack builder](./webpack.md) for bundling with Webpack
diff --git a/docs/builders/vite.md b/docs/builders/vite.md
index 5a2025ed0a51..e8d722777e7d 100644
--- a/docs/builders/vite.md
+++ b/docs/builders/vite.md
@@ -140,7 +140,7 @@ If you are migrating from a Webpack-based project, such as [CRA](https://create-
-#### Learn more about builders
+**Learn more about builders**
- Vite builder for bundling with Vite
- [Webpack builder](./webpack.md) for bundling with Webpack
diff --git a/docs/builders/webpack.md b/docs/builders/webpack.md
index dcf545175b56..b4f13fa46aec 100644
--- a/docs/builders/webpack.md
+++ b/docs/builders/webpack.md
@@ -107,9 +107,57 @@ Additionally, if you're generating a [static build](../api/cli-options.md#build)
-## What about Webpack 4 support?
+## Compiler support
-Support for Webpack 4 has been removed and is no longer being maintained. If you're upgrading your Storybook, it will automatically use Webpack 5 and attempt to migrate your configuration. However, if you're working with a custom Webpack configuration, you may need to update it to work with Webpack 5. The migration process is necessary to ensure that your project runs smoothly with the latest version of Storybook. You can follow the instructions provided on the Webpack [website](https://webpack.js.org/migrate/5/) to update your configuration.
+Storybook takes a compiler-agnostic approach to bundling. This allows you to bring your own application bundler (e.g., [Babel](https://babeljs.io/), [SWC](https://swc.rs/)) and ensures compatibility within the vast ecosystem of Webpack 5-based projects.
+
+### SWC
+
+If your project is built using [SWC](https://swc.rs/), use the [`@storybook/addon-webpack5-compiler-swc`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-swc) addon. This addon increases ecosystem compatibility with Webpack 5 projects while maintaining high performance. Run the following command to set up the addon automatically:
+
+
+
+
+
+
+
+
+
+Additional options can be provided to customize the SWC configuration. See the [SWC API documentation](../api/main-config-swc.md) for more information.
+
+
+
+When enabled, this addon adjusts the Webpack configuration to use the [`swc-loader`](https://swc.rs/docs/usage/swc-loader) for JavaScript and TypeScript files. Additionally, it will detect and use your project's SWC configuration.
+
+### Babel
+
+If you're working with a project that relies on Babel's tooling to provide support for specific features, including TypeScript or other modern JavaScript features, you can use the [`@storybook/addon-webpack5-compiler-babel`](https://storybook.js.org/addons/@storybook/addon-webpack5-compiler-babel) addon to allow you to include them in your Storybook to ensure compatibility with your project. Run the following command to set up the addon automatically:
+
+
+
+
+
+
+
+
+
+Additional options can be provided to customize the Babel configuration. See the [`babel` API documentation](../api/main-config-babel.md) for more information, or if you're working on an addon, the [`babelDefault` documentation](../api/main-config-babel-default.md) for more information.
+
+
+
+When enabled, the addon will adjust the Webpack configuration to use the [`babel-loader`](https://webpack.js.org/loaders/babel-loader/) as the default loader for JavaScript and TypeScript files. Additionally, it will detect and use your project's Babel configuration.
## Troubleshooting
@@ -145,7 +193,11 @@ However, if you're working with a framework that provides a default aliasing con
As Storybook relies on [esbuild](https://esbuild.github.io/) to build its internal manager, support for bundling assets with the `managerWebpack` will no longer have an impact on the Storybook UI. We recommend removing existing `managerWebpack` configuration elements from your Storybook configuration file and bundling assets other than images or CSS into JavaScript beforehand.
-#### Learn more about builders
+### Storybook doesn't run with Webpack 4
+
+Support for Webpack 4 has been removed and is no longer being maintained. If you're upgrading your Storybook, it will automatically use Webpack 5 and attempt to migrate your configuration. However, if you're working with a custom Webpack configuration, you may need to update it to work with Webpack 5. The migration process is necessary to ensure that your project runs smoothly with the latest version of Storybook. You can follow the instructions provided on the Webpack [website](https://webpack.js.org/migrate/5/) to update your configuration.
+
+**Learn more about builders**
- [Vite builder](./vite.md) for bundling with Vite
- Webpack builder for bundling with Webpack
diff --git a/docs/contribute/RFC.md b/docs/contribute/RFC.md
index e920e6b6bead..96b93158d07d 100644
--- a/docs/contribute/RFC.md
+++ b/docs/contribute/RFC.md
@@ -46,7 +46,7 @@ If you are interested in implementing an "active" RFC, but cannot determine if s
This RFC process took heavy inspiration from the RFC processes from [Rust](https://github.com/rust-lang/rfcs) and [Gatsby](https://www.gatsbyjs.com/contributing/rfc-process/).
-## Learn more about contributing to Storybook
+**Learn more about contributing to Storybook**
- RFC process for authoring feature requests
- [Code](./code.md) for features and bug fixes
diff --git a/docs/contribute/code.md b/docs/contribute/code.md
index f386fa2f2be9..b9d246e2119a 100644
--- a/docs/contribute/code.md
+++ b/docs/contribute/code.md
@@ -261,7 +261,7 @@ It's troublesome to know which packages you'll change ahead of time, and watchin
-## Learn more about contributing to Storybook
+**Learn more about contributing to Storybook**
- [RFC process](./RFC.md) for authoring feature requests
- Code for features and bug fixes
diff --git a/docs/contribute/documentation-updates.md b/docs/contribute/documentation-updates.md
index 76808e2c786b..d73d9d8f3070 100644
--- a/docs/contribute/documentation-updates.md
+++ b/docs/contribute/documentation-updates.md
@@ -22,7 +22,7 @@ Scroll down to the bottom of the document page on GitHub and describe what you c
In the Storybook repository, create a pull request that describes changes and includes additional context that would help maintainers review. Once you submit the PR, a maintainer will guide you through the triage and merge process.
-## Learn more about contributing to Storybook
+**Learn more about contributing to Storybook**
- [RFC process](./RFC.md) for authoring feature requests
- [Code](./code.md) for features and bug fixes
diff --git a/docs/contribute/framework.md b/docs/contribute/framework.md
index e568b0d54fb4..f72a7eae9500 100644
--- a/docs/contribute/framework.md
+++ b/docs/contribute/framework.md
@@ -143,7 +143,7 @@ Test it in a fresh project using a Storybook set up as close as possible to your
Once it's fully tested and released, please let us know about your framework by either announcing it in the [`#showcase`](https://discord.com/channels/486522875931656193/1048740936953376859) Discord channel or tweeting it and mentioning `@storybookjs`. It's our hope that well-made community frameworks can eventually move into the Storybook codebase and be considered "officially" supported.
-## Learn more about contributing to Storybook
+**Learn more about contributing to Storybook**
- [RFC process](./RFC.md) for authoring feature requests
- [Code](./code.md) for features and bug fixes
diff --git a/docs/contribute/new-snippets.md b/docs/contribute/new-snippets.md
index 0ba9c72067f0..ca07ff4bfa79 100644
--- a/docs/contribute/new-snippets.md
+++ b/docs/contribute/new-snippets.md
@@ -131,7 +131,7 @@ Go through the documentation and check your work.
Finally, commit, push and open a pull request in the Storybook monorepo. Add a clear description of the work you've done, and one of the maintainers will guide you through the merge process.
-## Learn more about contributing to Storybook
+**Learn more about contributing to Storybook**
- [RFC process](./RFC.md) for authoring feature requests
- [Code](./code.md) for features and bug fixes
diff --git a/docs/snippets/common/component-story-mdx-embed.mdx.mdx b/docs/snippets/common/component-story-mdx-embed.mdx.mdx
deleted file mode 100644
index a87ba2dda8d1..000000000000
--- a/docs/snippets/common/component-story-mdx-embed.mdx.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
-```md
-
-
-import { Story } from '@storybook/addon-docs';
-
-# Some header
-
-And Markdown here
-
-
-```
\ No newline at end of file
diff --git a/docs/snippets/common/component-story-mdx-reference-storyid.mdx.mdx b/docs/snippets/common/component-story-mdx-reference-storyid.mdx.mdx
deleted file mode 100644
index d79599c9cecb..000000000000
--- a/docs/snippets/common/component-story-mdx-reference-storyid.mdx.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
-```md
-
-
-import { Story } from '@storybook/addon-docs';
-
-
-```
\ No newline at end of file
diff --git a/docs/snippets/common/main-config-features-legacy-mdx-1.js.mdx b/docs/snippets/common/main-config-features-legacy-mdx-1.js.mdx
deleted file mode 100644
index e961bf074cb3..000000000000
--- a/docs/snippets/common/main-config-features-legacy-mdx-1.js.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-```js
-// .storybook/main.js
-
-export default {
- // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
- framework: '@storybook/your-framework',
- stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
- features: {
- legacyMdx1: true, // 👈 Enables MDX v1 support
- },
-};
-```
diff --git a/docs/snippets/common/main-config-features-legacy-mdx-1.ts.mdx b/docs/snippets/common/main-config-features-legacy-mdx-1.ts.mdx
deleted file mode 100644
index c983311700f4..000000000000
--- a/docs/snippets/common/main-config-features-legacy-mdx-1.ts.mdx
+++ /dev/null
@@ -1,16 +0,0 @@
-```ts
-// .storybook/main.ts
-
-// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
-import type { StorybookConfig } from '@storybook/your-framework';
-
-const config: StorybookConfig = {
- framework: '@storybook/your-framework',
- stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
- features: {
- legacyMdx1: true, // 👈 Enables MDX v1 support
- },
-};
-
-export default config;
-```
diff --git a/docs/snippets/common/mdx-canvas-doc-block.mdx.mdx b/docs/snippets/common/mdx-canvas-doc-block.mdx.mdx
deleted file mode 100644
index dbd2297f3da2..000000000000
--- a/docs/snippets/common/mdx-canvas-doc-block.mdx.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-```md
-
-
-import { Canvas, Meta } from '@storybook/addon-docs';
-
-import { ExampleComponent} from './ExampleComponent';
-
-
-
-
-```
\ No newline at end of file
diff --git a/docs/snippets/common/mdx-changelog-stories.mdx.mdx b/docs/snippets/common/mdx-changelog-stories.mdx.mdx
deleted file mode 100644
index bc0aeb2980a7..000000000000
--- a/docs/snippets/common/mdx-changelog-stories.mdx.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-```md
-
-
-
-import { Meta } from '@storybook/addon-docs';
-
-import Changelog from '../CHANGELOG.md';
-
-
-
-
-```
\ No newline at end of file
diff --git a/docs/snippets/common/my-component-with-story-content.mdx.mdx b/docs/snippets/common/my-component-with-story-content.mdx.mdx
deleted file mode 100644
index 66451f49bbbf..000000000000
--- a/docs/snippets/common/my-component-with-story-content.mdx.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-```md
-
-
-import { Canvas } from '@storybook/addon-docs';
-
-import { MyComponent } from './MyComponent';
-
-
-```
diff --git a/docs/snippets/common/storybook-addon-compiler-babel-auto-install.npm.js.mdx b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.npm.js.mdx
new file mode 100644
index 000000000000..334013ebdfba
--- /dev/null
+++ b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```sh
+npx storybook@latest add @storybook/addon-webpack5-compiler-babel
+```
diff --git a/docs/snippets/common/storybook-addon-compiler-babel-auto-install.pnpm.js.mdx b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.pnpm.js.mdx
new file mode 100644
index 000000000000..bb5e796ab2f1
--- /dev/null
+++ b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.pnpm.js.mdx
@@ -0,0 +1,3 @@
+```sh
+pnpm dlx storybook@latest add @storybook/addon-webpack5-compiler-babel
+```
diff --git a/docs/snippets/common/storybook-addon-compiler-babel-auto-install.yarn.js.mdx b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.yarn.js.mdx
new file mode 100644
index 000000000000..c29afff2cedd
--- /dev/null
+++ b/docs/snippets/common/storybook-addon-compiler-babel-auto-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```sh
+yarn dlx storybook@latest add @storybook/addon-webpack5-compiler-babel
+```
diff --git a/docs/snippets/common/storybook-addon-compiler-swc-auto-install.npm.js.mdx b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.npm.js.mdx
new file mode 100644
index 000000000000..8161ee59d97d
--- /dev/null
+++ b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.npm.js.mdx
@@ -0,0 +1,3 @@
+```sh
+npx storybook@latest add @storybook/addon-webpack5-compiler-swc
+```
diff --git a/docs/snippets/common/storybook-addon-compiler-swc-auto-install.pnpm.js.mdx b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.pnpm.js.mdx
new file mode 100644
index 000000000000..5f70d2b8d773
--- /dev/null
+++ b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.pnpm.js.mdx
@@ -0,0 +1,3 @@
+```sh
+pnpm dlx storybook@latest add @storybook/addon-webpack5-compiler-swc
+```
diff --git a/docs/snippets/common/storybook-addon-compiler-swc-auto-install.yarn.js.mdx b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.yarn.js.mdx
new file mode 100644
index 000000000000..ceb0554462a0
--- /dev/null
+++ b/docs/snippets/common/storybook-addon-compiler-swc-auto-install.yarn.js.mdx
@@ -0,0 +1,3 @@
+```sh
+yarn dlx storybook@latest add @storybook/addon-webpack5-compiler-swc
+```
diff --git a/docs/snippets/common/storybook-automigration-mdx-legacy.npm.mdx b/docs/snippets/common/storybook-automigration-mdx-legacy.npm.mdx
new file mode 100644
index 000000000000..b54577026015
--- /dev/null
+++ b/docs/snippets/common/storybook-automigration-mdx-legacy.npm.mdx
@@ -0,0 +1,3 @@
+```shell
+npx storybook@latest automigrate mdx1to2
+```
diff --git a/docs/snippets/common/storybook-automigration-mdx-legacy.pnpm.mdx b/docs/snippets/common/storybook-automigration-mdx-legacy.pnpm.mdx
new file mode 100644
index 000000000000..4c17825bf1a8
--- /dev/null
+++ b/docs/snippets/common/storybook-automigration-mdx-legacy.pnpm.mdx
@@ -0,0 +1,3 @@
+```shell
+pnpm dlx storybook@latest automigrate mdx1to2
+```
diff --git a/docs/snippets/common/storybook-automigration-mdx-legacy.yarn.mdx b/docs/snippets/common/storybook-automigration-mdx-legacy.yarn.mdx
new file mode 100644
index 000000000000..277d34f73467
--- /dev/null
+++ b/docs/snippets/common/storybook-automigration-mdx-legacy.yarn.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn dlx storybook@latest automigrate mdx1to2
+```
diff --git a/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx b/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx
index 6e7e2fca09fe..ee4ecfbd706c 100644
--- a/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx
+++ b/docs/snippets/common/storybook-main-register-essentials-addon.js.mdx
@@ -3,7 +3,7 @@
export default {
framework: '@storybook/your-framework',
- stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: ['@storybook/addon-essentials'], // 👈 Register addon-essentials
};
```
diff --git a/docs/snippets/common/storybook-main-register-essentials-addon.ts.mdx b/docs/snippets/common/storybook-main-register-essentials-addon.ts.mdx
index d4e42fd31129..88f505b62b7b 100644
--- a/docs/snippets/common/storybook-main-register-essentials-addon.ts.mdx
+++ b/docs/snippets/common/storybook-main-register-essentials-addon.ts.mdx
@@ -6,7 +6,7 @@ import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
framework: '@storybook/your-framework',
- stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+ stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: ['@storybook/addon-essentials'], // 👈 Register addon-essentials
};
diff --git a/docs/snippets/common/storybook-migration-mdx-stories.npm.mdx b/docs/snippets/common/storybook-migration-mdx-stories.npm.mdx
new file mode 100644
index 000000000000..f2f2c30f2fac
--- /dev/null
+++ b/docs/snippets/common/storybook-migration-mdx-stories.npm.mdx
@@ -0,0 +1,3 @@
+```shell
+npx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx”
+```
diff --git a/docs/snippets/common/storybook-migration-mdx-stories.pnpm.mdx b/docs/snippets/common/storybook-migration-mdx-stories.pnpm.mdx
new file mode 100644
index 000000000000..5f9ac39d6e7c
--- /dev/null
+++ b/docs/snippets/common/storybook-migration-mdx-stories.pnpm.mdx
@@ -0,0 +1,3 @@
+```shell
+pnpm dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx”
+```
diff --git a/docs/snippets/common/storybook-migration-mdx-stories.yarn.mdx b/docs/snippets/common/storybook-migration-mdx-stories.yarn.mdx
new file mode 100644
index 000000000000..499212af80b1
--- /dev/null
+++ b/docs/snippets/common/storybook-migration-mdx-stories.yarn.mdx
@@ -0,0 +1,3 @@
+```shell
+yarn dlx storybook@latest migrate mdx-to-csf --glob "src/**/*.stories.mdx”
+```
diff --git a/docs/snippets/html/checkbox-story.mdx.mdx b/docs/snippets/html/checkbox-story.mdx.mdx
deleted file mode 100644
index e81434c68848..000000000000
--- a/docs/snippets/html/checkbox-story.mdx.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
-```md
-
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-export const Checkbox = (args) => ``;
-
-
-
-# Checkbox
-
-With `MDX`, we can define a story for `Checkbox` right in the middle of our
-Markdown documentation.
-
-
-```
diff --git a/docs/snippets/preact/histogram-story.mdx.mdx b/docs/snippets/preact/histogram-story.mdx.mdx
deleted file mode 100644
index e0843151cc72..000000000000
--- a/docs/snippets/preact/histogram-story.mdx.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-```md
-
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs/';
-
-import { Histogram } from './Histogram';
-
-
-
-
-
-
-```
\ No newline at end of file
diff --git a/docs/versions/next.json b/docs/versions/next.json
index 690b644cd675..fefad810da35 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.0.0-alpha.11","info":{"plain":"- Angular: Remove cached NgModules and introduce a global queue during bootstrapping - [#24982](https://github.com/storybookjs/storybook/pull/24982), thanks [@Marklb](https://github.com/Marklb)!\n- CLI: Fix sandbox command versioning - [#25600](https://github.com/storybookjs/storybook/pull/25600), thanks [@ndelangen](https://github.com/ndelangen)!\n- CLI: Support upgrading to canary versions - [#25596](https://github.com/storybookjs/storybook/pull/25596), thanks [@JReinhold](https://github.com/JReinhold)!\n- ConfigFile: Fix export specifiers - [#25590](https://github.com/storybookjs/storybook/pull/25590), thanks [@shilman](https://github.com/shilman)!\n- Interaction: Replace @storybook/jest by @storybook/test - [#25584](https://github.com/storybookjs/storybook/pull/25584), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Next.js: Pass jsConfig to SWC Loader and load config with defaults - [#25203](https://github.com/storybookjs/storybook/pull/25203), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Parameters: Remove passArgsFirst flag - [#25585](https://github.com/storybookjs/storybook/pull/25585), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Preset: Remove deprecated config preset - [#25607](https://github.com/storybookjs/storybook/pull/25607), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- React: Refactor RSC out of Next - [#25591](https://github.com/storybookjs/storybook/pull/25591), thanks [@shilman](https://github.com/shilman)!\n- Sandboxes: Update wait-on command to use TCP instead of HTTP - [#25541](https://github.com/storybookjs/storybook/pull/25541), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- Telejson: Update stringify options in codebase - [#25564](https://github.com/storybookjs/storybook/pull/25564), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- UI: Fix menu icon on the sidebar - [#25587](https://github.com/storybookjs/storybook/pull/25587), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- Webpack5: Make export-order-loader compatible with both esm and cjs - [#25540](https://github.com/storybookjs/storybook/pull/25540), thanks [@mlazari](https://github.com/mlazari)!"}}
+{"version":"8.0.0-alpha.12","info":{"plain":"- Blocks: Fix Controls block not having controls - [#25663](https://github.com/storybookjs/storybook/pull/25663), thanks [@JReinhold](https://github.com/JReinhold)!\n- Blocks: Support `subcomponents` in `ArgTypes` and `Controls`, remove `ArgsTable` block - [#25614](https://github.com/storybookjs/storybook/pull/25614), thanks [@JReinhold](https://github.com/JReinhold)!\n- CLI: Fix existing version detection in `upgrade` - [#25642](https://github.com/storybookjs/storybook/pull/25642), thanks [@JReinhold](https://github.com/JReinhold)!\n- Core: Add preset with experimental server API - [#25664](https://github.com/storybookjs/storybook/pull/25664), thanks [@shilman](https://github.com/shilman)!\n- MDX: Replace remark by rehype plugins - [#25615](https://github.com/storybookjs/storybook/pull/25615), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- React: Fix acorn ecma version warning - [#25634](https://github.com/storybookjs/storybook/pull/25634), thanks [@dannyhw](https://github.com/dannyhw)!\n- Shortcuts: Require modifier key to trigger shortcuts (`F`,`A`,`D`,`S`,`T`,`/`) - [#25625](https://github.com/storybookjs/storybook/pull/25625), thanks [@cdedreuille](https://github.com/cdedreuille)!\n- Theming: Fix export of module augmentation - [#25643](https://github.com/storybookjs/storybook/pull/25643), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- UI: Add links to documentation and videos in UI - [#25565](https://github.com/storybookjs/storybook/pull/25565), thanks [@Integrayshaun](https://github.com/Integrayshaun)!\n- Webpack: Use `node:assert` used in `export-order-loader` - [#25622](https://github.com/storybookjs/storybook/pull/25622), thanks [@JReinhold](https://github.com/JReinhold)!"}}
diff --git a/docs/writing-docs/autodocs.md b/docs/writing-docs/autodocs.md
index 4e066de59f64..e902c99eb942 100644
--- a/docs/writing-docs/autodocs.md
+++ b/docs/writing-docs/autodocs.md
@@ -290,7 +290,7 @@ If you're still encountering issues, we recommend reaching out to the community
If you turned off inline rendering for your stories via the [`inline`](../api/doc-block-story.md#inline) configuration option, you would run into a situation where the associated controls are not updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release.
-#### Learn more about Storybook documentation
+**Learn more about Storybook documentation**
- Autodocs for creating documentation for your stories
- [MDX](./mdx.md) for customizing your documentation
diff --git a/docs/writing-docs/build-documentation.md b/docs/writing-docs/build-documentation.md
index fffb922a5c9b..aeaec7bf5ae9 100644
--- a/docs/writing-docs/build-documentation.md
+++ b/docs/writing-docs/build-documentation.md
@@ -50,7 +50,7 @@ You can use any hosting provider to deploy your documentation, for instance:
- [Netlify](https://www.netlify.com/)
- [S3](https://aws.amazon.com/en/s3/)
-#### Learn more about Storybook documentation
+**Learn more about Storybook documentation**
- [Autodocs](./autodocs.md) for creating documentation for your stories
- [MDX](./mdx.md) for customizing your documentation
diff --git a/docs/writing-docs/doc-blocks.md b/docs/writing-docs/doc-blocks.md
index 12cfaee8317b..d42b5e8749fe 100644
--- a/docs/writing-docs/doc-blocks.md
+++ b/docs/writing-docs/doc-blocks.md
@@ -278,7 +278,7 @@ Storybook's Doc Blocks are highly customizable and helpful building blocks to as
-#### Learn more about Storybook documentation
+**Learn more about Storybook documentation**
- [Autodocs](./autodocs.md) for creating documentation for your stories
- [MDX](./mdx.md) for customizing your documentation
diff --git a/docs/writing-docs/mdx.md b/docs/writing-docs/mdx.md
index cfe98b9bc4a7..afc4c11a86b4 100644
--- a/docs/writing-docs/mdx.md
+++ b/docs/writing-docs/mdx.md
@@ -12,7 +12,7 @@ In addition, you can write pure documentation pages in MDX and add them to Story
-Writing stories directly in MDX was deprecated in Storybook 7. Please reference the [previous documentation](../../../release-6-5/docs/writing-docs/mdx.md) for guidance on that feature.
+Writing stories directly in MDX was removed in Storybook 8, and we're no longer supporting it. Please reference the [previous documentation](../../../release-6-5/docs/writing-docs/mdx.md) for guidance on that feature or [migrate](../migration-guide.md#storiesmdx-to-mdxcsf) to the new format.
@@ -63,12 +63,6 @@ The first thing you'll notice is that the component documentation is divided int
- **CSF** is great for succinctly defining stories (component examples). If you use TypeScript, it also provides type safety and auto-completion.
- **MDX** is great for writing structured documentation and composing it with interactive JSX elements.
-
-
-If you’re coming from a previous version of Storybook, you might be accustomed to using MDX both for **documentation** and for defining **stories** in the same `.stories.mdx` file. We’ve deprecated this functionality and plan to remove it in a future version of Storybook. We provide [migration](#automigration) scripts to help you onto the new format.
-
-
-
### Anatomy of MDX
Assuming you’re already familiar with writing stories with [CSF](../writing-stories/index.md), we can dissect the MDX side of things in greater detail.
@@ -210,9 +204,17 @@ The [`remark-gfm`](https://github.com/remarkjs/remark-gfm) package isn't provide
To help you transition to the new version, we've created a migration helper in our CLI. We recommend using it and reaching out using the default communication channels (e.g., [GitHub discussions](https://github.com/storybookjs/storybook/discussions/new?category=help)) for problems you encounter.
-```shell
-npx storybook@latest automigrate mdx1to2
-```
+
+
+
+
+
## Setup custom documentation
@@ -386,47 +388,12 @@ By applying this pattern with the Controls addon, all anchors will be ignored in
### The MDX documentation doesn't render in my environment
-As Storybook relies on MDX 2 to render documentation, some technical limitations may prevent you from migrating to this version. If that's the case, we've prepared a set of instructions to help you transition to this new version.
+As Storybook relies on the latest version of [MDX](https://mdxjs.com/) to render documentation, some technical limitations may prevent you from migrating to this version. If that's the case, we've prepared a set of instructions to help you transition to this new version.
#### Storybook doesn't create documentation for my component stories
If you run into a situation where Storybook is not able to detect and render the documentation for your component stories, it may be due to a misconfiguration in your Storybook. Check your configuration file (i.e., `.storybook/main.js|ts`) and ensure the `stories` configuration element provides the correct path to your stories location(e.g., `../src/**/*.stories.@(js|jsx|mjs|ts|tsx)`).
-#### The documentation doesn't render using `stories.mdx`
-
-Starting with Storybook 7.0, we've deprecated documenting stories with the `.stories.mdx` file extension. If you're still using the `stories.mdx` extension, we recommend [migrating](#automigration) as soon as possible to avoid any issues, as the majority of APIs and [Doc Blocks](./doc-blocks.md) used by Storybook were overhauled to support MDX 2 and the new MDX compiler (e.g., the [`Meta`](../api/doc-block-meta.md) block).
-
-#### MDX 1 fallback
-
-If you're still having issues with MDX documentation, you can enable MDX 1 as a fallback. To do so, you'll need to take some additional steps.
-
-Run the following command to install the required dependency.
-
-
-
-
-
-
-
-Update your Storybook configuration (in `.storybook/main.js|ts`), and provide the `legacyMdx1` feature flag to enable MDX 1 support.
-
-
-
-
-
-
-
### The migration seems flaky and keeps failing
By default, running the [migration command](#automigration) will try and migrate all existing MDX files in your project according to the MDX 2 specification. However, this might not always be possible, and you might run into issues during the migration. To help you troubleshoot those issues, we've prepared some recommendations that might help you.
@@ -459,7 +426,16 @@ If you're still encountering issues, we recommend reaching out to the community
If you turned off inline rendering for your stories via the [`inline`](../api/doc-block-story.md#inline) configuration option, you would run into a situation where the associated controls are not updating the story within the documentation page. This is a known limitation of the current implementation and will be addressed in a future release.
-#### Learn more about Storybook documentation
+### The React version used is unexpected
+
+For most projects, Storybook's addon-docs uses the React version listed in your project's dependencies. If it does not find one, it will use React 18.2.0. There are two exceptions to this:
+
+- Preact projects will always use React 17
+- Next.js projects will always use the canary version that comes with the Next.js version installed, regardless of which React version is listed in the project’s dependencies.
+
+If you're having issues with the React version used, you may need to re-create your project's `node_modules` folder to ensure the correct version is used.
+
+**Learn more about Storybook documentation**
- [Autodocs](./autodocs.md) for creating documentation for your stories
- MDX for customizing your documentation
diff --git a/scripts/event-log-checker.ts b/scripts/event-log-checker.ts
index 3a835f6ddf22..849c5d0cf140 100644
--- a/scripts/event-log-checker.ts
+++ b/scripts/event-log-checker.ts
@@ -4,7 +4,7 @@ import assert from 'assert';
import fetch from 'node-fetch';
import { esMain } from './utils/esmain';
import { allTemplates } from '../code/lib/cli/src/sandbox-templates';
-import versions from '../code/lib/cli/src/versions';
+import versions from '../code/lib/core-common/src/versions';
import { oneWayHash } from '../code/lib/telemetry/src/one-way-hash';
const PORT = process.env.PORT || 6007;
diff --git a/scripts/release/__tests__/version.test.ts b/scripts/release/__tests__/version.test.ts
index 2f5ffb8ea9b0..87f998222188 100644
--- a/scripts/release/__tests__/version.test.ts
+++ b/scripts/release/__tests__/version.test.ts
@@ -11,7 +11,7 @@ import type * as MockedFSToExtra from '../../../code/__mocks__/fs-extra';
vi.mock('fs-extra', async () => import('../../../code/__mocks__/fs-extra'));
const fsExtra = fsExtraImp as unknown as typeof MockedFSToExtra;
-vi.mock('../../../code/lib/cli/src/versions', () => ({
+vi.mock('../../../code/lib/core-common/src/versions', () => ({
'@storybook/addon-a11y': '7.1.0-alpha.29',
}));
@@ -40,7 +40,7 @@ describe('Version', () => {
'src',
'version.ts'
);
- const VERSIONS_PATH = path.join(CODE_DIR_PATH, 'lib', 'cli', 'src', 'versions.ts');
+ const VERSIONS_PATH = path.join(CODE_DIR_PATH, 'lib', 'core-common', 'src', 'versions.ts');
const A11Y_PACKAGE_JSON_PATH = path.join(CODE_DIR_PATH, 'addons', 'a11y', 'package.json');
it('should throw when release type is invalid', async () => {
diff --git a/scripts/release/version.ts b/scripts/release/version.ts
index c56d7afa5b54..53365fd2d499 100644
--- a/scripts/release/version.ts
+++ b/scripts/release/version.ts
@@ -125,7 +125,7 @@ const bumpCodeVersion = async (nextVersion: string) => {
const bumpVersionSources = async (currentVersion: string, nextVersion: string) => {
const filesToUpdate = [
path.join(CODE_DIR_PATH, 'lib', 'manager-api', 'src', 'version.ts'),
- path.join(CODE_DIR_PATH, 'lib', 'cli', 'src', 'versions.ts'),
+ path.join(CODE_DIR_PATH, 'lib', 'core-common', 'src', 'versions.ts'),
];
console.log(`🤜 Bumping versions in...:\n ${chalk.cyan(filesToUpdate.join('\n '))}`);
diff --git a/scripts/sandbox/generate.ts b/scripts/sandbox/generate.ts
index f6260ada4875..27f17f8c7ad0 100755
--- a/scripts/sandbox/generate.ts
+++ b/scripts/sandbox/generate.ts
@@ -12,14 +12,14 @@ import { esMain } from '../utils/esmain';
import type { OptionValues } from '../utils/options';
import { createOptions } from '../utils/options';
import { allTemplates as sandboxTemplates } from '../../code/lib/cli/src/sandbox-templates';
-import storybookVersions from '../../code/lib/cli/src/versions';
-import { JsPackageManagerFactory } from '../../code/lib/cli/src/js-package-manager/JsPackageManagerFactory';
+import storybookVersions from '../../code/lib/core-common/src/versions';
+import { JsPackageManagerFactory } from '../../code/lib/core-common/src/js-package-manager/JsPackageManagerFactory';
// eslint-disable-next-line import/no-cycle
import { localizeYarnConfigFiles, setupYarn } from './utils/yarn';
import type { GeneratorConfig } from './utils/types';
import { getStackblitzUrl, renderTemplate } from './utils/template';
-import type { JsPackageManager } from '../../code/lib/cli/src/js-package-manager';
+import type { JsPackageManager } from '../../code/lib/core-common/src/js-package-manager';
import {
BEFORE_DIR_NAME,
AFTER_DIR_NAME,
diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index 22047cf6b69e..cd7dc643a185 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -25,21 +25,23 @@ import {
addWorkaroundResolutions,
} from '../utils/yarn';
import { exec } from '../utils/exec';
-import type { ConfigFile } from '../../code/lib/csf-tools';
-import storybookPackages from '../../code/lib/cli/src/versions';
-import { writeConfig } from '../../code/lib/csf-tools';
+import type { ConfigFile } from '../../code/lib/csf-tools/src';
+import { writeConfig } from '../../code/lib/csf-tools/src';
import { filterExistsInCodeDir } from '../utils/filterExistsInCodeDir';
import { findFirstPath } from '../utils/paths';
import { detectLanguage } from '../../code/lib/cli/src/detect';
import { SupportedLanguage } from '../../code/lib/cli/src/project_types';
import { updatePackageScripts } from '../utils/package-json';
import { addPreviewAnnotations, readMainConfig } from '../utils/main-js';
-import { JsPackageManagerFactory } from '../../code/lib/cli/src/js-package-manager/JsPackageManagerFactory';
+import {
+ type JsPackageManager,
+ versions as storybookPackages,
+ JsPackageManagerFactory,
+} from '../../code/lib/core-common/src';
import { workspacePath } from '../utils/workspace';
import { babelParse } from '../../code/lib/csf-tools/src/babelParse';
import { CODE_DIRECTORY, REPROS_DIRECTORY } from '../utils/constants';
import type { TemplateKey } from '../../code/lib/cli/src/sandbox-templates';
-import type { JsPackageManager } from '../../code/lib/cli/src/js-package-manager';
const logger = console;
@@ -378,7 +380,8 @@ export const addStories: Task['run'] = async (
// Ensure that we match the right stories in the stories directory
updateStoriesField(
mainConfig,
- (await detectLanguage(packageManager)) === SupportedLanguage.JAVASCRIPT
+ (await detectLanguage(packageManager as any as Parameters[0])) ===
+ SupportedLanguage.JAVASCRIPT
);
const isCoreRenderer =
diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts
index 006aac905f80..a2fb82e1fa6a 100644
--- a/scripts/utils/yarn.ts
+++ b/scripts/utils/yarn.ts
@@ -4,7 +4,7 @@ import path from 'path';
import type { TemplateKey } from 'get-template';
import { exec } from './exec';
// TODO -- should we generate this file a second time outside of CLI?
-import storybookVersions from '../../code/lib/cli/src/versions';
+import storybookVersions from '../../code/lib/core-common/src/versions';
import touch from './touch';
export type YarnOptions = {
diff --git a/yarn.lock b/yarn.lock
index 41331a2f1000..14231d72f18e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9,4 +9,4 @@ __metadata:
version: 0.0.0-use.local
resolution: "@storybook/root@workspace:."
languageName: unknown
- linkType: soft
\ No newline at end of file
+ linkType: soft