diff --git a/MIGRATION.md b/MIGRATION.md index 52cb910ef59..6a489b4e107 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -1,6 +1,7 @@

Migration

- [From version 6.4.x to 6.5.0](#from-version-64x-to-650) + - [Opt-in MDX2 support](#opt-in-mdx2-support) - [CSF3 auto-title redundant filename](#csf3-auto-title-redundant-filename) - [From version 6.3.x to 6.4.0](#from-version-63x-to-640) - [Automigrate](#automigrate) @@ -192,6 +193,24 @@ ## From version 6.4.x to 6.5.0 +### Opt-in MDX2 support + +SB6.5 adds experimental opt-in support for MDXv2. To install: + +```sh +yarn add @storybook/mdx2-csf -D +``` + +Then add the `previewMdx2` feature flag to your `.storybook/main.js` config: + +```js +module.exports = { + features: { + previewMdx2: true, + }, +}; +``` + ### CSF3 auto-title redundant filename SB 6.4 introduced experimental "auto-title", in which a story's location in the sidebar (aka `title`) can be automatically inferred from its location on disk. For example, the file `atoms/Button.stories.js` might result in the title `Atoms/Button`. diff --git a/addons/docs/jest-transform-mdx.js b/addons/docs/jest-transform-mdx.js index 24609dd329f..597d18a69cb 100644 --- a/addons/docs/jest-transform-mdx.js +++ b/addons/docs/jest-transform-mdx.js @@ -1,11 +1,8 @@ const path = require('path'); -const mdx = require('@mdx-js/mdx'); const { ScriptTransformer } = require('@jest/transform'); const { dedent } = require('ts-dedent'); -const { createCompiler } = require('@storybook/csf-mdx1'); - -const compilers = [createCompiler({})]; +const { compileSync } = require('@storybook/mdx1-csf'); module.exports = { process(src, filename, config, { instrument }) { @@ -13,7 +10,7 @@ module.exports = { /* @jsx mdx */ import React from 'react' import { mdx } from '@mdx-js/react' - ${mdx.sync(src, { compilers, filepath: filename })} + ${compileSync(src, { filepath: filename })} `; const extension = path.extname(filename); diff --git a/addons/docs/mdx-compiler-plugin.js b/addons/docs/mdx-compiler-plugin.js index 3b3dfc9491e..2651fa35e30 100644 --- a/addons/docs/mdx-compiler-plugin.js +++ b/addons/docs/mdx-compiler-plugin.js @@ -1 +1 @@ -module.exports = require('@storybook/csf-mdx1').createCompiler; +module.exports = require('@storybook/mdx1-csf').createCompiler; diff --git a/addons/docs/package.json b/addons/docs/package.json index e9b4e3e8099..04c2e48505f 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -61,8 +61,6 @@ "@babel/plugin-transform-react-jsx": "^7.12.12", "@babel/preset-env": "^7.12.11", "@jest/transform": "^26.6.2", - "@mdx-js/loader": "^1.6.22", - "@mdx-js/mdx": "^1.6.22", "@mdx-js/react": "^1.6.22", "@storybook/addons": "6.5.0-alpha.39", "@storybook/api": "6.5.0-alpha.39", @@ -72,7 +70,7 @@ "@storybook/core": "6.5.0-alpha.39", "@storybook/core-events": "6.5.0-alpha.39", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/csf-mdx1": "6.5.0-alpha.39", + "@storybook/mdx1-csf": "0.0.1-canary.1.8dbf866.0", "@storybook/node-logger": "6.5.0-alpha.39", "@storybook/postinstall": "6.5.0-alpha.39", "@storybook/preview-web": "6.5.0-alpha.39", @@ -108,6 +106,7 @@ "@emotion/styled": "^10.0.27", "@storybook/angular": "6.5.0-alpha.39", "@storybook/html": "6.5.0-alpha.39", + "@storybook/mdx2-csf": "0.0.1-canary.1.838a6ca.0", "@storybook/react": "6.5.0-alpha.39", "@storybook/vue": "6.5.0-alpha.39", "@storybook/web-components": "6.5.0-alpha.39", @@ -137,6 +136,7 @@ "peerDependencies": { "@storybook/angular": "6.5.0-alpha.39", "@storybook/html": "6.5.0-alpha.39", + "@storybook/mdx2-csf": "0.0.1-canary.1.838a6ca.0", "@storybook/react": "6.5.0-alpha.39", "@storybook/vue": "6.5.0-alpha.39", "@storybook/vue3": "6.5.0-alpha.39", @@ -157,6 +157,9 @@ "@storybook/html": { "optional": true }, + "@storybook/mdx2-csf": { + "optional": true + }, "@storybook/react": { "optional": true }, diff --git a/addons/docs/src/frameworks/common/preset.ts b/addons/docs/src/frameworks/common/preset.ts index 2f6ecf59063..0955268d576 100644 --- a/addons/docs/src/frameworks/common/preset.ts +++ b/addons/docs/src/frameworks/common/preset.ts @@ -1,11 +1,12 @@ import path from 'path'; import remarkSlug from 'remark-slug'; import remarkExternalLinks from 'remark-external-links'; +import global from 'global'; -// @ts-ignore -import { createCompiler } from '@storybook/csf-mdx1'; import type { BuilderConfig, Options } from '@storybook/core-common'; +const { log } = console; + // for frameworks that are not working with react, we need to configure // the jsx to transpile mdx, for now there will be a flag for that // for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx' @@ -34,9 +35,9 @@ function createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }: Bab export async function webpack( webpackConfig: any = {}, options: Options & - BabelParams & { sourceLoaderOptions: any; transcludeMarkdown: boolean } & Parameters< + BabelParams & { sourceLoaderOptions: any; transcludeMarkdown: boolean } /* & Parameters< typeof createCompiler - >[0] + >[0] */ ) { const { builder = 'webpack4' } = await options.presets.apply<{ builder: BuilderConfig; @@ -65,6 +66,13 @@ export async function webpack( remarkPlugins: [remarkSlug, remarkExternalLinks], }; + const mdxVersion = global.FEATURES?.previewMdx2 ? 'MDX2' : 'MDX1'; + log(`Addon-docs: using ${mdxVersion}`); + + const mdxLoader = global.FEATURES?.previewMdx2 + ? require.resolve('@storybook/mdx2-csf/loader') + : require.resolve('@storybook/mdx1-csf/loader'); + // set `sourceLoaderOptions` to `null` to disable for manual configuration const sourceLoader = sourceLoaderOptions ? [ @@ -89,7 +97,7 @@ export async function webpack( options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }), }, { - loader: require.resolve('@mdx-js/loader'), + loader: mdxLoader, options: mdxLoaderOptions, }, ], @@ -123,11 +131,11 @@ export async function webpack( options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }), }, { - loader: require.resolve('@mdx-js/loader'), - options: { - compilers: [createCompiler(options)], - ...mdxLoaderOptions, - }, + loader: mdxLoader, + // options: { + // compilers: [createCompiler(options)], + // ...mdxLoaderOptions, + // }, }, ], }, @@ -140,7 +148,7 @@ export async function webpack( options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }), }, { - loader: require.resolve('@mdx-js/loader'), + loader: mdxLoader, options: mdxLoaderOptions, }, ], diff --git a/examples/react-ts/.storybook/main.ts b/examples/react-ts/.storybook/main.ts index 865d5edbda3..d359398d9f2 100644 --- a/examples/react-ts/.storybook/main.ts +++ b/examples/react-ts/.storybook/main.ts @@ -32,6 +32,7 @@ const config: StorybookConfig = { buildStoriesJson: true, babelModeV7: true, warnOnLegacyHierarchySeparator: false, + previewMdx2: true, }, framework: '@storybook/react', }; diff --git a/examples/react-ts/src/addon-docs/docs-only.stories.mdx b/examples/react-ts/src/addon-docs/docs-only.stories.mdx index 3063e6e867a..5df54f6a26c 100644 --- a/examples/react-ts/src/addon-docs/docs-only.stories.mdx +++ b/examples/react-ts/src/addon-docs/docs-only.stories.mdx @@ -6,4 +6,4 @@ import { Meta, Canvas } from '@storybook/addon-docs'; ## [Link](http://https://storybook.js.org/) in heading -This file is a documentation-only MDX file, i.e. it doesn't contain any `` definitions. +This file is a documentation-only MDX {1+1} file, i.e. it doesn't contain any `` definitions. diff --git a/examples/react-ts/src/addon-docs/docs.stories.mdx b/examples/react-ts/src/addon-docs/docs.stories.mdx index 44639a3698f..14466bbdc91 100644 --- a/examples/react-ts/src/addon-docs/docs.stories.mdx +++ b/examples/react-ts/src/addon-docs/docs.stories.mdx @@ -1,9 +1,9 @@ import { Meta, Story } from '@storybook/addon-docs'; import { Button } from '../button'; - + -# Button +# Button MDX - - `) - ).toMatchInlineSnapshot(` - export const componentNotes = () => ; - componentNotes.storyName = 'component notes'; - componentNotes.parameters = { storySource: { source: '' } }; - - const componentMeta = { - title: 'Button', - args: { - a: 1, - b: 2, - }, - argTypes: { - a: { - name: 'A', - }, - b: { - name: 'B', - }, - }, - includeStories: ['componentNotes'], - }; - - const mdxStoryNameToKey = { 'component notes': 'componentNotes' }; - `); - }); - - it('component-id.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - - - - `) - ).toMatchInlineSnapshot(` - export const componentNotes = () => ; - componentNotes.storyName = 'component notes'; - componentNotes.parameters = { storySource: { source: '' } }; - - const componentMeta = { - title: 'Button', - id: 'button-id', - component: Button, - includeStories: ['componentNotes'], - }; - - const mdxStoryNameToKey = { 'component notes': 'componentNotes' }; - `); - }); - - it('csf-imports.mdx', () => { - expect( - clean(dedent` - import { Story, Meta, Canvas } from '@storybook/addon-docs'; - import { Welcome, Button } from '@storybook/angular/demo'; - import * as MyStories from './My.stories'; - import { Other } from './Other.stories'; - - - - # Stories from CSF imports - - - - - - - - - `) - ).toMatchInlineSnapshot(` - export const _Basic_ = MyStories.Basic; - - export const _Other_ = Other; - - export const _Foo_ = MyStories.Foo; - _Foo_.storyName = 'renamed'; - - const componentMeta = { title: 'MDX/CSF imports', includeStories: ['_Basic_', '_Other_', '_Foo_'] }; - - const mdxStoryNameToKey = { _Basic_: '_Basic_', _Other_: '_Other_', renamed: '_Foo_' }; - `); - }); - - it('decorators.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - -
{storyFn()}
]} - /> - - # Decorated story - -
{storyFn()}
]}> - - - `) - ).toMatchInlineSnapshot(` - export const one = () => ; - one.storyName = 'one'; - one.parameters = { storySource: { source: '' } }; - one.decorators = [(storyFn) =>
{storyFn()}
]; - - const componentMeta = { - title: 'Button', - decorators: [ - (storyFn) => ( -
- {storyFn()} -
- ), - ], - includeStories: ['one'], - }; - - const mdxStoryNameToKey = { one: 'one' }; - `); - }); - - it('docs-only.mdx', () => { - expect( - clean(dedent` - import { Meta } from '@storybook/addon-docs'; - - - - # Documentation only - - This is a documentation-only MDX file which cleans a dummy 'docsOnly: true' story. - `) - ).toMatchInlineSnapshot(` - export const __page = () => { - throw new Error('Docs-only story'); - }; - - __page.parameters = { docsOnly: true }; - - const componentMeta = { title: 'docs-only', includeStories: ['__page'] }; - - const mdxStoryNameToKey = {}; - `); - }); - - it('loaders.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - ({ foo: 1 })]} /> - - # Story with loader - - ({ bar: 2 })]}> - - - `) - ).toMatchInlineSnapshot(` - export const one = () => ; - one.storyName = 'one'; - one.parameters = { storySource: { source: '' } }; - one.loaders = [ - async () => ({ - bar: 2, - }), - ]; - - const componentMeta = { - title: 'Button', - loaders: [ - async () => ({ - foo: 1, - }), - ], - includeStories: ['one'], - }; - - const mdxStoryNameToKey = { one: 'one' }; - `); - }); - - it('meta-quotes-in-title.mdx', () => { - expect( - clean(dedent` - import { Meta } from '@storybook/addon-docs'; - - - `) - ).toMatchInlineSnapshot(` - export const __page = () => { - throw new Error('Docs-only story'); - }; - - __page.parameters = { docsOnly: true }; - - const componentMeta = { title: "Addons/Docs/what's in a title?", includeStories: ['__page'] }; - - const mdxStoryNameToKey = {}; - `); - }); - - it('non-story-exports.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - # Story definition - - - - - - export const two = 2; - - - - - `) - ).toMatchInlineSnapshot(` - export const one = () => ; - one.storyName = 'one'; - one.parameters = { storySource: { source: '' } }; - - export const helloStory = () => ; - helloStory.storyName = 'hello story'; - helloStory.parameters = { storySource: { source: '' } }; - - const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] }; - - const mdxStoryNameToKey = { one: 'one', 'hello story': 'helloStory' }; - `); - }); - - it('parameters.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - - - - - - - - `) - ).toMatchInlineSnapshot(` - export const componentNotes = () => ; - componentNotes.storyName = 'component notes'; - componentNotes.parameters = { storySource: { source: '' } }; - - export const storyNotes = () => ; - storyNotes.storyName = 'story notes'; - storyNotes.parameters = { - storySource: { source: '' }, - ...{ - notes: 'story notes', - }, - }; - - const componentMeta = { - title: 'Button', - parameters: { - notes: 'component notes', - }, - component: Button, - includeStories: ['componentNotes', 'storyNotes'], - }; - - const mdxStoryNameToKey = { 'component notes': 'componentNotes', 'story notes': 'storyNotes' }; - `); - }); - - it('previews.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Canvas, Story, Meta } from '@storybook/addon-docs'; - - - - # Canvas - - Canvases can contain normal components, stories, and story references - - - - - - - - - - - - - Canvas without a story - - - - - `) - ).toMatchInlineSnapshot(` - export const helloButton = () => ; - helloButton.storyName = 'hello button'; - helloButton.parameters = { storySource: { source: '' } }; - - export const two = () => ; - two.storyName = 'two'; - two.parameters = { storySource: { source: '' } }; - - const componentMeta = { - title: 'Button', - parameters: { - notes: 'component notes', - }, - component: Button, - includeStories: ['helloButton', 'two'], - }; - - const mdxStoryNameToKey = { 'hello button': 'helloButton', two: 'two' }; - `); - }); - - it('story-args.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - # Args - - export const Template = (args) => ; - - - {Template.bind({})} - - `) - ).toMatchInlineSnapshot(` - export const componentNotes = Template.bind({}); - componentNotes.storyName = 'component notes'; - componentNotes.argTypes = { - a: { - name: 'A', - }, - b: { - name: 'B', - }, - }; - componentNotes.args = { - a: 1, - b: 2, - }; - componentNotes.parameters = { storySource: { source: 'args => ' } }; - - const componentMeta = { title: 'Button', includeStories: ['componentNotes'] }; - - const mdxStoryNameToKey = { 'component notes': 'componentNotes' }; - `); - }); - - it('story-current.mdx', () => { - expect( - clean(dedent` - import { Story } from '@storybook/addon-docs'; - - # Current story - - - `) - ).toMatchInlineSnapshot(` - const componentMeta = { includeStories: [] }; - - const mdxStoryNameToKey = {}; - `); - }); - - it('story-def-text-only.mdx', () => { - expect( - clean(dedent` - import { Story, Meta } from '@storybook/addon-docs'; - - - - # Story definition - - Plain text - `) - ).toMatchInlineSnapshot(` - export const text = () => 'Plain text'; - text.storyName = 'text'; - text.parameters = { storySource: { source: "'Plain text'" } }; - - const componentMeta = { title: 'Text', includeStories: ['text'] }; - - const mdxStoryNameToKey = { text: 'text' }; - `); - }); - - it('story-definitions.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - # Story definition - - - - - - - - - - - - - - - - - `) - ).toMatchInlineSnapshot(` - export const one = () => ; - one.storyName = 'one'; - one.parameters = { storySource: { source: '' } }; - - export const helloStory = () => ; - helloStory.storyName = 'hello story'; - helloStory.parameters = { storySource: { source: '' } }; - - export const wPunctuation = () => ; - wPunctuation.storyName = 'w/punctuation'; - wPunctuation.parameters = { storySource: { source: '' } }; - - export const _1FineDay = () => ; - _1FineDay.storyName = '1 fine day'; - _1FineDay.parameters = { storySource: { source: '' } }; - - const componentMeta = { - title: 'Button', - includeStories: ['one', 'helloStory', 'wPunctuation', '_1FineDay'], - }; - - const mdxStoryNameToKey = { - one: 'one', - 'hello story': 'helloStory', - 'w/punctuation': 'wPunctuation', - '1 fine day': '_1FineDay', - }; - `); - }); - - it('story-function-var.mdx', () => { - expect( - clean(dedent` - import { Meta, Story } from '@storybook/addon-docs'; - - - - export const basicFn = () => - `) - ).toMatchInlineSnapshot(` - const componentMeta = { includeStories: [] }; - - const mdxStoryNameToKey = {}; - `); - }); - - it('errors on missing story props', async () => { - await expect(async () => - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - # Bad story - - - - - `) - ).rejects.toThrow('Expected a Story name, id, or story attribute'); - }); - - describe('csf3', () => { - it('auto-title-docs-only.mdx', () => { - expect( - clean(dedent` - import { Meta } from '@storybook/addon-docs'; - - - - # Auto-title Docs Only - - Spme **markdown** here! - `) - ).toMatchInlineSnapshot(` - const componentMeta = { includeStories: [] }; - - const mdxStoryNameToKey = {}; - `); - }); - - it('auto-title.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - - - - `) - ).toMatchInlineSnapshot(` - export const basic = () => ; - basic.storyName = 'Basic'; - basic.parameters = { storySource: { source: '' } }; - - const componentMeta = { component: Button, includeStories: ['basic'] }; - - const mdxStoryNameToKey = { Basic: 'basic' }; - `); - }); - - it('default-render.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - - - `) - ).toMatchInlineSnapshot(` - export const basic = {}; - basic.storyName = 'Basic'; - basic.parameters = { storySource: { source: '{}' } }; - - const componentMeta = { title: 'Button', component: Button, includeStories: ['basic'] }; - - const mdxStoryNameToKey = { Basic: 'basic' }; - `); - }); - - it('component-render.mdx', () => { - expect( - clean(dedent` - import { Button } from '@storybook/react/demo'; - import { Story, Meta } from '@storybook/addon-docs'; - - - * generates error - * 1. child.value =`