diff --git a/MIGRATION.md b/MIGRATION.md index 0c7802b97322..d644da51c0bc 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -760,7 +760,6 @@ export const MyStory = { }; ``` - ### API and Component Changes #### Button Component API Changes @@ -908,6 +907,15 @@ The package `@storybook/blocks` is no longer published as of Storybook 9. All exports can now be found in the export `@storybook/addon-docs/blocks`. +Previously, you were able to import all blocks from `@storybook/addon-docs`, this is no longer the case. + +This is the only correct import path: + +```diff +- import { Meta } from "@storybook/addon-docs"; ++ import { Meta } from "@storybook/addon-docs/blocks"; +``` + ### Configuration and Type Changes #### Manager builder removed alias for `util`, `assert` and `process` @@ -920,7 +928,6 @@ Adding these aliases meant storybook core, had to depend on these packages, whic If you addon fails to load after this change, we recommend looking at implementing the alias at compile time of your addon, or alternatively look at other bundling config to ensure the correct entries/packages/dependencies are used. - #### Type System Updates The following types have been removed: @@ -943,7 +950,6 @@ Deprecated getters have been removed from the CsfFile class: - `_fileName` - `_makeTitle` - #### React-Native config dir renamed In Storybook 9, React Native (RN) projects use the `.rnstorybook` config directory instead of `.storybook`. @@ -1105,7 +1111,7 @@ To enable it, just set the feature flag in your `.storybook/main. file. ```tsx export default { features: { - angularFilterNonInputControls: true + angularFilterNonInputControls: true, }, // ... other configurations }; diff --git a/code/addons/docs/src/compiler/index.test.ts b/code/addons/docs/src/compiler/index.test.ts index d5c9a45afa41..e1be960c61b7 100644 --- a/code/addons/docs/src/compiler/index.test.ts +++ b/code/addons/docs/src/compiler/index.test.ts @@ -270,7 +270,7 @@ describe('full snapshots', () => { }); it('canvas without story children', () => { const input = dedent` - import { Canvas } from '@storybook/addon-docs'; + import { Canvas } from '@storybook/addon-docs/blocks';

Some here

@@ -279,7 +279,7 @@ describe('full snapshots', () => { expect(compileSync(input)).toMatchInlineSnapshot(` import {jsx as _jsx} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Canvas} from '@storybook/addon-docs'; + import {Canvas} from '@storybook/addon-docs/blocks'; function _createMdxContent(props) { return _jsx(Canvas, { children: _jsx("h2", { @@ -308,7 +308,7 @@ describe('docs-mdx-compiler-plugin', () => { expect( clean( compileSync(dedent` - import { Story, Meta, Canvas } from '@storybook/addon-docs'; + import { Story, Meta, Canvas } from '@storybook/addon-docs/blocks'; import { Welcome, Button } from '@storybook/angular/demo'; import * as MyStories from './My.stories'; import { Other } from './Other.stories'; @@ -327,7 +327,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Story, Meta, Canvas} from '@storybook/addon-docs'; + import {Story, Meta, Canvas} from '@storybook/addon-docs/blocks'; import {Welcome, Button} from '@storybook/angular/demo'; import * as MyStories from './My.stories'; import {Other} from './Other.stories'; @@ -358,7 +358,7 @@ describe('docs-mdx-compiler-plugin', () => { expect( clean( compileSync(dedent` - import { Meta } from '@storybook/addon-docs'; + import { Meta } from '@storybook/addon-docs/blocks'; @@ -370,7 +370,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Meta} from '@storybook/addon-docs'; + import {Meta} from '@storybook/addon-docs/blocks'; function _createMdxContent(props) { const _components = { h1: "h1", @@ -395,7 +395,7 @@ describe('docs-mdx-compiler-plugin', () => { expect( clean( compileSync(dedent` - import { Meta } from '@storybook/addon-docs'; + import { Meta } from '@storybook/addon-docs/blocks'; `) @@ -403,7 +403,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` import {jsx as _jsx} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Meta} from '@storybook/addon-docs'; + import {Meta} from '@storybook/addon-docs/blocks'; function _createMdxContent(props) { return _jsx(Meta, { title: "Addons/Docs/what's in a title?" @@ -417,7 +417,7 @@ describe('docs-mdx-compiler-plugin', () => { clean( compileSync(dedent` import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; + import { Story, Meta } from '@storybook/addon-docs/blocks'; @@ -432,7 +432,7 @@ describe('docs-mdx-compiler-plugin', () => { import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; import {Button} from '@storybook/react/demo'; - import {Story, Meta} from '@storybook/addon-docs'; + import {Story, Meta} from '@storybook/addon-docs/blocks'; export const two = 2; function _createMdxContent(props) { const _components = { @@ -457,7 +457,7 @@ describe('docs-mdx-compiler-plugin', () => { expect( clean( compileSync(dedent` - import { Story } from '@storybook/addon-docs'; + import { Story } from '@storybook/addon-docs/blocks'; # Current story @@ -467,7 +467,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Story} from '@storybook/addon-docs'; + import {Story} from '@storybook/addon-docs/blocks'; function _createMdxContent(props) { const _components = { h1: "h1", @@ -489,7 +489,7 @@ describe('docs-mdx-compiler-plugin', () => { expect( clean( compileSync(dedent` - import { Story } from '@storybook/addon-docs'; + import { Story } from '@storybook/addon-docs/blocks'; # Story reference @@ -499,7 +499,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Story} from '@storybook/addon-docs'; + import {Story} from '@storybook/addon-docs/blocks'; function _createMdxContent(props) { const _components = { h1: "h1", @@ -522,7 +522,7 @@ describe('docs-mdx-compiler-plugin', () => { clean( compileSync( [ - "import { Meta, Story } from '@storybook/addon-docs';", + "import { Meta, Story } from '@storybook/addon-docs/blocks';", "import { titleFunction } from '../title-generators';", '', @@ -533,7 +533,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` import {jsx as _jsx} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Meta, Story} from '@storybook/addon-docs'; + import {Meta, Story} from '@storybook/addon-docs/blocks'; import {titleFunction} from '../title-generators'; function _createMdxContent(props) { return _jsx(Meta, { @@ -548,7 +548,7 @@ describe('docs-mdx-compiler-plugin', () => { expect( clean( compileSync(dedent` - import { Meta } from '@storybook/addon-docs'; + import { Meta } from '@storybook/addon-docs/blocks'; @@ -560,7 +560,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Meta} from '@storybook/addon-docs'; + import {Meta} from '@storybook/addon-docs/blocks'; function _createMdxContent(props) { const _components = { h1: "h1", @@ -587,7 +587,7 @@ describe('docs-mdx-compiler-plugin', () => { clean( compileSync(dedent` import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; + import { Story, Meta } from '@storybook/addon-docs/blocks'; `) @@ -596,7 +596,7 @@ describe('docs-mdx-compiler-plugin', () => { import {jsx as _jsx} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; import {Button} from '@storybook/react/demo'; - import {Story, Meta} from '@storybook/addon-docs'; + import {Story, Meta} from '@storybook/addon-docs/blocks'; function _createMdxContent(props) { return _jsx(Meta, { component: Button @@ -610,7 +610,7 @@ describe('docs-mdx-compiler-plugin', () => { expect( clean( compileSync(dedent` - import { Meta } from '@storybook/addon-docs'; + import { Meta } from '@storybook/addon-docs/blocks'; @@ -638,7 +638,7 @@ describe('docs-mdx-compiler-plugin', () => { ).toMatchInlineSnapshot(` import {Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs} from "react/jsx-runtime"; import {useMDXComponents as _provideComponents} from "@mdx-js/react"; - import {Meta} from '@storybook/addon-docs'; + import {Meta} from '@storybook/addon-docs/blocks'; function _createMdxContent(props) { return _jsxs(_Fragment, { children: [_jsx(Meta, { diff --git a/code/addons/docs/src/index.ts b/code/addons/docs/src/index.ts index f1213094b4b0..20953c9bc649 100644 --- a/code/addons/docs/src/index.ts +++ b/code/addons/docs/src/index.ts @@ -3,9 +3,6 @@ import { definePreviewAddon } from 'storybook/internal/csf'; import * as addonAnnotations from './preview'; import type { DocsTypes } from './types'; -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-ignore (these types only work once the package is compiled) -export * from '@storybook/addon-docs/blocks'; export { DocsRenderer } from './DocsRenderer'; export type { DocsTypes }; diff --git a/code/addons/docs/template/stories/docs2/MetaOf.mdx b/code/addons/docs/template/stories/docs2/MetaOf.mdx index ee40c7f95625..9d3b3ffbf4fb 100644 --- a/code/addons/docs/template/stories/docs2/MetaOf.mdx +++ b/code/addons/docs/template/stories/docs2/MetaOf.mdx @@ -1,4 +1,4 @@ -import { Meta, Story, Stories } from '@storybook/addon-docs'; +import { Meta, Story, Stories } from '@storybook/addon-docs/blocks'; import * as ButtonStories from './button.stories.ts'; diff --git a/code/addons/docs/template/stories/docs2/MetaOfNamed.mdx b/code/addons/docs/template/stories/docs2/MetaOfNamed.mdx index 9de44a95adb7..455d03c3dbc6 100644 --- a/code/addons/docs/template/stories/docs2/MetaOfNamed.mdx +++ b/code/addons/docs/template/stories/docs2/MetaOfNamed.mdx @@ -1,4 +1,4 @@ -import { Meta, Story, Stories } from '@storybook/addon-docs'; +import { Meta, Story, Stories } from '@storybook/addon-docs/blocks'; import * as ButtonStories from './button.stories.ts'; diff --git a/code/addons/docs/template/stories/docs2/Title.mdx b/code/addons/docs/template/stories/docs2/Title.mdx index f94dc947bb89..52a74470badc 100644 --- a/code/addons/docs/template/stories/docs2/Title.mdx +++ b/code/addons/docs/template/stories/docs2/Title.mdx @@ -1,4 +1,4 @@ -import { Meta, Subtitle } from '@storybook/addon-docs'; +import { Meta, Subtitle } from '@storybook/addon-docs/blocks'; diff --git a/code/addons/docs/template/stories/docs2/UtfSymbolScroll.mdx b/code/addons/docs/template/stories/docs2/UtfSymbolScroll.mdx index 11c902ce3baa..d8aa64b1bf1c 100644 --- a/code/addons/docs/template/stories/docs2/UtfSymbolScroll.mdx +++ b/code/addons/docs/template/stories/docs2/UtfSymbolScroll.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs/blocks'; diff --git a/code/addons/docs/template/stories/docspage/override.stories.ts b/code/addons/docs/template/stories/docspage/override.stories.ts index 8633007233be..dc8e926b0b47 100644 --- a/code/addons/docs/template/stories/docspage/override.stories.ts +++ b/code/addons/docs/template/stories/docspage/override.stories.ts @@ -2,7 +2,7 @@ // once sandbox linking is working // // import { createElement } from 'react'; -// import { Title, Primary } from '@storybook/addon-docs'; +// import { Title, Primary } from '@storybook/addon-docs/blocks'; // // const Override = () => // createElement('div', { style: { border: '10px solid green', padding: '100px' } }, [ diff --git a/code/core/src/core-server/utils/__mockdata__/src/docs2/Template.mdx b/code/core/src/core-server/utils/__mockdata__/src/docs2/Template.mdx index 420fac1c277b..cc9fc12d3f32 100644 --- a/code/core/src/core-server/utils/__mockdata__/src/docs2/Template.mdx +++ b/code/core/src/core-server/utils/__mockdata__/src/docs2/Template.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs/blocks'; diff --git a/code/core/src/core-server/utils/__mockdata__/src/docs2/Title.mdx b/code/core/src/core-server/utils/__mockdata__/src/docs2/Title.mdx index b9e99041157d..75643a1dd03c 100644 --- a/code/core/src/core-server/utils/__mockdata__/src/docs2/Title.mdx +++ b/code/core/src/core-server/utils/__mockdata__/src/docs2/Title.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs/blocks'; diff --git a/code/frameworks/angular/template/stories/basics/README.mdx b/code/frameworks/angular/template/stories/basics/README.mdx index 4af25e032e7b..f2f64c9634f6 100644 --- a/code/frameworks/angular/template/stories/basics/README.mdx +++ b/code/frameworks/angular/template/stories/basics/README.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs/blocks'; diff --git a/code/frameworks/angular/template/stories/core/README.mdx b/code/frameworks/angular/template/stories/core/README.mdx index 15dbdc282625..5e62dde83109 100644 --- a/code/frameworks/angular/template/stories/core/README.mdx +++ b/code/frameworks/angular/template/stories/core/README.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs/blocks'; diff --git a/code/frameworks/angular/template/stories/others/ngx-translate/README.mdx b/code/frameworks/angular/template/stories/others/ngx-translate/README.mdx index b998907b39cf..5bb491b3a5ce 100644 --- a/code/frameworks/angular/template/stories/others/ngx-translate/README.mdx +++ b/code/frameworks/angular/template/stories/others/ngx-translate/README.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs/blocks'; diff --git a/test-storybooks/external-docs/components/AccountForm.mdx b/test-storybooks/external-docs/components/AccountForm.mdx index 1048a938b871..d0fd645a9e7e 100644 --- a/test-storybooks/external-docs/components/AccountForm.mdx +++ b/test-storybooks/external-docs/components/AccountForm.mdx @@ -1,4 +1,4 @@ -import { Meta, Story } from '@storybook/addon-docs'; +import { Meta, Story } from '@storybook/addon-docs/blocks'; import * as AccountFormStories from './AccountForm.stories'; ## Docs for Account form diff --git a/test-storybooks/external-docs/components/Template.mdx b/test-storybooks/external-docs/components/Template.mdx index fc2a3cf935cf..2b27b2abe310 100644 --- a/test-storybooks/external-docs/components/Template.mdx +++ b/test-storybooks/external-docs/components/Template.mdx @@ -1,4 +1,4 @@ -import { Title, Description, ArgsTable, Stories, PRIMARY_STORY } from '@storybook/addon-docs'; +import { Title, Description, ArgsTable, Stories, PRIMARY_STORY } from '@storybook/addon-docs/blocks'; # This is a template! diff --git a/test-storybooks/external-docs/components/emoji-button.mdx b/test-storybooks/external-docs/components/emoji-button.mdx index 9aa0417cf745..658de90a1694 100644 --- a/test-storybooks/external-docs/components/emoji-button.mdx +++ b/test-storybooks/external-docs/components/emoji-button.mdx @@ -1,4 +1,4 @@ -import { Meta } from '@storybook/addon-docs'; +import { Meta } from '@storybook/addon-docs/blocks'; import * as EmojiButtonStories from './emoji-button.stories.tsx'; import Template from './Template.mdx'; diff --git a/test-storybooks/external-docs/pages/_app.js b/test-storybooks/external-docs/pages/_app.js index b1d0261547bb..06b851aec1d9 100644 --- a/test-storybooks/external-docs/pages/_app.js +++ b/test-storybooks/external-docs/pages/_app.js @@ -1,7 +1,7 @@ /* eslint-disable react/prop-types */ import React from 'react'; import 'nextra-theme-docs/style.css'; -import { ExternalDocs } from '@storybook/addon-docs'; +import { ExternalDocs } from '@storybook/addon-docs/blocks'; import * as reactAnnotations from '@storybook/react/preview'; import * as previewAnnotations from '../.storybook/preview'; diff --git a/test-storybooks/external-docs/pages/index.mdx b/test-storybooks/external-docs/pages/index.mdx index 6e2b480410ab..001c2345adb4 100644 --- a/test-storybooks/external-docs/pages/index.mdx +++ b/test-storybooks/external-docs/pages/index.mdx @@ -1,5 +1,5 @@ import Callout from 'nextra-theme-docs/callout'; -import { Title, Meta, Story, Canvas } from '@storybook/addon-docs'; +import { Title, Meta, Story, Canvas } from '@storybook/addon-docs/blocks'; import * as AccountFormStories from '../components/AccountForm.stories'; import * as ButtonStories from '../components/button.stories';