From f8653c2b1e344b14b94dba8aeb5278290515662e Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 22 Jul 2019 21:46:09 +0800 Subject: [PATCH 1/5] Module format: Load component as part of default export --- lib/core/src/client/preview/start.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js index e49d770f7585..29d5291a88ca 100644 --- a/lib/core/src/client/preview/start.js +++ b/lib/core/src/client/preview/start.js @@ -350,18 +350,17 @@ export default function start(render, { decorateStory } = {}) { } const { default: meta, ...exports } = fileExports; - const kindName = meta.title; + const { title: kindName, parameters: params, decorators: decos, component } = meta; // We pass true here to avoid the warning about HMR. It's cool clientApi, we got this const kind = clientApi.storiesOf(kindName, true); - kind.addParameters({ framework }); - (meta.decorators || []).forEach(decorator => { + // we should always have a framework, rest optional + kind.addParameters({ framework, component, ...params }); + + (decos || []).forEach(decorator => { kind.addDecorator(decorator); }); - if (meta.parameters) { - kind.addParameters(meta.parameters); - } Object.keys(exports).forEach(key => { if (isExportStory(key, meta)) { From 214e2532ba9e9aaf6005b6e8bd1eb4a78336cfe1 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 22 Jul 2019 21:46:44 +0800 Subject: [PATCH 2/5] Module format: accept component as Meta attribute --- addons/docs/src/blocks/Meta.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/addons/docs/src/blocks/Meta.tsx b/addons/docs/src/blocks/Meta.tsx index 5308f9f0ea9e..2e4f022bf10f 100644 --- a/addons/docs/src/blocks/Meta.tsx +++ b/addons/docs/src/blocks/Meta.tsx @@ -4,6 +4,7 @@ type Decorator = (...args: any) => any; interface MetaProps { title: string; + component?: any; decorators?: [Decorator]; parameters?: any; } From db8fd5cef1b429e272939a70dd89c4c2c7b704f9 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 22 Jul 2019 21:47:14 +0800 Subject: [PATCH 3/5] Update tests for module/mdx top-level component construct --- addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap | 6 ++---- addons/docs/fixtures/parameters.mdx | 2 +- addons/docs/fixtures/previews.mdx | 2 +- examples/official-storybook/stories/addon-docs.stories.mdx | 3 ++- .../official-storybook/stories/demo/button.stories.mdx | 7 +------ .../convert-mdx-to-module/parameters.input.js | 2 +- .../convert-mdx-to-module/parameters.output.js | 2 +- .../convert-mdx-to-module/story-refs.input.js | 3 ++- .../convert-mdx-to-module/story-refs.output.js | 2 +- .../convert-module-to-mdx/parameters.input.js | 3 +-- .../convert-module-to-mdx/parameters.output.js | 2 +- 11 files changed, 14 insertions(+), 20 deletions(-) diff --git a/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap b/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap index a8c09401768b..aa661f3163ca 100644 --- a/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap +++ b/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap @@ -281,8 +281,8 @@ function MDXContent({ components, ...props }) { Two' }; const componentMeta = { title: 'Button', parameters: { - component: Button, notes: 'component notes', }, includeStories: ['helloButton', 'two'], diff --git a/addons/docs/fixtures/parameters.mdx b/addons/docs/fixtures/parameters.mdx index 0805466b38cd..2b2e1c6b5546 100644 --- a/addons/docs/fixtures/parameters.mdx +++ b/addons/docs/fixtures/parameters.mdx @@ -1,7 +1,7 @@ import { Button } from '@storybook/react/demo'; import { Story, Meta } from '@storybook/addon-docs/blocks'; - + diff --git a/addons/docs/fixtures/previews.mdx b/addons/docs/fixtures/previews.mdx index 80601eed2ed0..b56d1bcbf3b8 100644 --- a/addons/docs/fixtures/previews.mdx +++ b/addons/docs/fixtures/previews.mdx @@ -1,7 +1,7 @@ import { Button } from '@storybook/react/demo'; import { Preview, Story, Meta } from '@storybook/addon-docs/blocks'; - + # Preview diff --git a/examples/official-storybook/stories/addon-docs.stories.mdx b/examples/official-storybook/stories/addon-docs.stories.mdx index 18720dddbde3..d7646f3cea9a 100644 --- a/examples/official-storybook/stories/addon-docs.stories.mdx +++ b/examples/official-storybook/stories/addon-docs.stories.mdx @@ -15,8 +15,9 @@ import DocgenButton from '../components/DocgenButton';
{storyFn()}
]} - parameters={{ component: Button, notes: 'component notes' }} + parameters={{ notes: 'component notes' }} /> # Selected diff --git a/examples/official-storybook/stories/demo/button.stories.mdx b/examples/official-storybook/stories/demo/button.stories.mdx index fbdbfebf81b6..d1b73e7048c7 100644 --- a/examples/official-storybook/stories/demo/button.stories.mdx +++ b/examples/official-storybook/stories/demo/button.stories.mdx @@ -3,12 +3,7 @@ import { action } from '@storybook/addon-actions'; import { Button } from '@storybook/react/demo'; import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'; - + # Simple Button diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/parameters.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/parameters.input.js index 625ba4ea5ddc..bba94e8ede9a 100644 --- a/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/parameters.input.js +++ b/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/parameters.input.js @@ -5,8 +5,8 @@ import { Meta, Story } from '@storybook/addon-docs/blocks'; diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/parameters.output.js index 99aec036bc9c..9af5998b71e7 100644 --- a/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/parameters.output.js +++ b/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/parameters.output.js @@ -4,9 +4,9 @@ import { storiesOf } from '@storybook/react'; export default { title: 'Button', + component: Button, parameters: { - component: Button, foo: 1, bar: 2, }, diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/story-refs.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/story-refs.input.js index dde5d657a50b..b9bd1b771d2b 100644 --- a/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/story-refs.input.js +++ b/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/story-refs.input.js @@ -4,8 +4,9 @@ import { Button } from '@storybook/react/demo';
{storyFn()}
]} - parameters={{ component: Button, notes: 'component notes' }} + parameters={{ notes: 'component notes' }} /> ## Getting into details diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/story-refs.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/story-refs.output.js index ca002408d5ce..f056484f00cf 100644 --- a/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/story-refs.output.js +++ b/lib/codemod/src/transforms/__testfixtures__/convert-mdx-to-module/story-refs.output.js @@ -4,6 +4,7 @@ import { Button } from '@storybook/react/demo'; export default { title: 'Addons|Docs/mdx', + component: Button, decorators: [ storyFn => ( @@ -18,7 +19,6 @@ export default { ], parameters: { - component: Button, notes: 'component notes', }, }; diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-module-to-mdx/parameters.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-module-to-mdx/parameters.input.js index 5da4d1d544c0..af5840e218a5 100644 --- a/lib/codemod/src/transforms/__testfixtures__/convert-module-to-mdx/parameters.input.js +++ b/lib/codemod/src/transforms/__testfixtures__/convert-module-to-mdx/parameters.input.js @@ -5,9 +5,8 @@ import { storiesOf } from '@storybook/react'; export default { title: 'Button', - + component: Button, parameters: { - component: Button, foo: 1, bar: 2, }, diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-module-to-mdx/parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-module-to-mdx/parameters.output.js index 9ed5e1e7f0a1..335493de3d49 100644 --- a/lib/codemod/src/transforms/__testfixtures__/convert-module-to-mdx/parameters.output.js +++ b/lib/codemod/src/transforms/__testfixtures__/convert-module-to-mdx/parameters.output.js @@ -4,8 +4,8 @@ import { Meta, Story } from '@storybook/addon-docs/blocks'; From 44ed77bc78eb8bb6713892c07b6c52454c0aad16 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 22 Jul 2019 22:08:19 +0800 Subject: [PATCH 4/5] Module format: Update documentation for top-level components --- docs/src/pages/basics/writing-stories/index.md | 7 +++++-- .../src/pages/formats/module-story-format/index.md | 14 +++++++------- 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/docs/src/pages/basics/writing-stories/index.md b/docs/src/pages/basics/writing-stories/index.md index dd4b52fed551..e091ca697974 100644 --- a/docs/src/pages/basics/writing-stories/index.md +++ b/docs/src/pages/basics/writing-stories/index.md @@ -16,7 +16,10 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import Button from './Button'; -export default { title: 'Button' }; +export default { + component: Button, + title: 'Button', +}; export const withText = () => ; @@ -33,7 +36,7 @@ This is what you'll see in Storybook: ![Basic stories](../static/basic-stories.png) -The named exports define the Button's stories, and the `default` export defines metadata that applies to the group. In this case, the title determines the title of the group in Storybook's left-hand navigation panel. +The named exports define the Button's stories, and the `default` export defines metadata that applies to the group. In this case, the `component` is `Button`. The title determines the title of the group in Storybook's left-hand navigation panel. In this case it's located at the top level, but typically it's [positioned within the story hierarchy](#story-hierarchy). This example is written in Storybook's [Module format](../../formats/module-story-format/). Storybook also supports: diff --git a/docs/src/pages/formats/module-story-format/index.md b/docs/src/pages/formats/module-story-format/index.md index 15150754209b..5fdf208b06b2 100644 --- a/docs/src/pages/formats/module-story-format/index.md +++ b/docs/src/pages/formats/module-story-format/index.md @@ -11,11 +11,14 @@ The module format is supported in all frameworks except React Native, where you ## Default export -The default export defines metadata about your component, including its `title` (where it will show up in the Storybook navigation UI), [decorators](../../basics/writing-stories/#decorators) and [parameters](../../writing-stories/#parameters). +The default export defines metadata about your component, including the `component` itself, its `title` (where it will show up in the [navigation UI story hierarchy](../../basics/writing-stories/#story-hierarchy)), [decorators](../../basics/writing-stories/#decorators), and [parameters](../../basics/writing-stories/#parameters). ```js +import MyComponent from './MyComponent'; + export default { - title: 'Path|To/Some/Component', + title: 'Path|To/MyComponent', + component: MyComponent, decorators: [ ... ], parameters: { ... } } @@ -27,7 +30,7 @@ For more examples, see [writing stories](../../basics/writing-stories/) By default every named export in the file represents a story function. -Story functions can be annotated with a `story` object to define story-level [decorators](../../basics/writing-stories/#decorators) and [parameters](../../writing-stories/#parameters), and also to define the `name` of the story. +Story functions can be annotated with a `story` object to define story-level [decorators](../../basics/writing-stories/#decorators) and [parameters](../../basics/writing-stories/#parameters), and also to define the `name` of the story. The `name` is useful if you want to use names with spaces, names that correspond to restricted keywords in Javascript, or names that collide with other variables in the file. If it's not specified, the export name will be used instead. @@ -55,6 +58,7 @@ import someData from './data.json'; export default { title: 'MyComponent', + component: MyComponent, includeStories: ['simpleStory', 'complexStory'] } export const simpleData = { foo: 1, bar: 'baz' }; @@ -71,7 +75,3 @@ For this specific example the equivalent result can be achieved in a few ways de - `includeStories: /.*Story$/` - `excludeStories: ['simpleData', 'complexData']` - `excludeStories: /.*Data$/` - -``` - -``` From 5e0f6db7311362873f60ebd9f0e62f40a16e595b Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 22 Jul 2019 22:20:02 +0800 Subject: [PATCH 5/5] Module-format: Update examples with top-level component --- examples/mithril-kitchen-sink/src/stories/welcome.stories.js | 4 +--- .../stories/addon-a11y/base-button.stories.js | 2 +- .../official-storybook/stories/addon-a11y/button.stories.js | 2 +- .../official-storybook/stories/addon-a11y/form.stories.js | 2 +- examples/official-storybook/stories/addon-docs.stories.js | 4 +--- .../official-storybook/stories/addon-info/options.stories.js | 2 +- .../stories/addon-knobs/with-knobs.stories.js | 4 ---- examples/official-storybook/stories/demo/button.stories.js | 4 +--- examples/official-storybook/stories/demo/welcome.stories.js | 4 +--- .../src/stories/addon-centered.stories.js | 5 +---- examples/preact-kitchen-sink/src/stories/button.stories.js | 5 +---- .../src/stories/addon-centered.stories.js | 4 +--- .../vue-kitchen-sink/src/stories/addon-centered.stories.js | 4 +--- .../vue-kitchen-sink/src/stories/components/app.stories.js | 5 +---- .../src/stories/components/button.stories.js | 4 +--- 15 files changed, 14 insertions(+), 41 deletions(-) diff --git a/examples/mithril-kitchen-sink/src/stories/welcome.stories.js b/examples/mithril-kitchen-sink/src/stories/welcome.stories.js index a67ad2aa91a2..60ead95a694f 100644 --- a/examples/mithril-kitchen-sink/src/stories/welcome.stories.js +++ b/examples/mithril-kitchen-sink/src/stories/welcome.stories.js @@ -4,9 +4,7 @@ import Welcome from '../Welcome'; export default { title: 'Welcome', - parameters: { - component: Welcome, - }, + component: Welcome, }; export const story1 = () => ({ diff --git a/examples/official-storybook/stories/addon-a11y/base-button.stories.js b/examples/official-storybook/stories/addon-a11y/base-button.stories.js index 5aa1e2e528de..a882bf92a4e2 100644 --- a/examples/official-storybook/stories/addon-a11y/base-button.stories.js +++ b/examples/official-storybook/stories/addon-a11y/base-button.stories.js @@ -6,8 +6,8 @@ const text = 'Testing the a11y addon'; export default { title: 'Addons|A11y/BaseButton', + component: BaseButton, parameters: { - component: BaseButton, options: { selectedPanel: 'storybook/a11y/panel' }, }, }; diff --git a/examples/official-storybook/stories/addon-a11y/button.stories.js b/examples/official-storybook/stories/addon-a11y/button.stories.js index f3eaeffbb2a6..dc7863262dbb 100644 --- a/examples/official-storybook/stories/addon-a11y/button.stories.js +++ b/examples/official-storybook/stories/addon-a11y/button.stories.js @@ -5,8 +5,8 @@ const text = 'Testing the a11y addon'; export default { title: 'Addons|A11y/Button', + component: Button, parameters: { - component: Button, options: { selectedPanel: 'storybook/a11y/panel' }, }, }; diff --git a/examples/official-storybook/stories/addon-a11y/form.stories.js b/examples/official-storybook/stories/addon-a11y/form.stories.js index ee7a7d2bd606..9aa54fc6b0d0 100644 --- a/examples/official-storybook/stories/addon-a11y/form.stories.js +++ b/examples/official-storybook/stories/addon-a11y/form.stories.js @@ -6,8 +6,8 @@ const text = 'Testing the a11y addon'; export default { title: 'Addons|A11y/Form', + component: Form, parameters: { - component: Form, options: { selectedPanel: 'storybook/a11y/panel' }, }, }; diff --git a/examples/official-storybook/stories/addon-docs.stories.js b/examples/official-storybook/stories/addon-docs.stories.js index 163744b595a2..d598a749b8ba 100644 --- a/examples/official-storybook/stories/addon-docs.stories.js +++ b/examples/official-storybook/stories/addon-docs.stories.js @@ -5,9 +5,7 @@ import DocgenButton from '../components/DocgenButton'; export default { title: 'Addons|Docs/stories', - parameters: { - component: DocgenButton, - }, + component: DocgenButton, }; export const basic = () =>
Click docs tab to see basic docs
; diff --git a/examples/official-storybook/stories/addon-info/options.stories.js b/examples/official-storybook/stories/addon-info/options.stories.js index de4cf20de859..12bb82cb98c3 100644 --- a/examples/official-storybook/stories/addon-info/options.stories.js +++ b/examples/official-storybook/stories/addon-info/options.stories.js @@ -128,8 +128,8 @@ fullControlOverStylesUsingAFunction.story = { export const useACustomComponentForTheTable = () => ; useACustomComponentForTheTable.story = { name: 'Use a custom component for the table', + component: TableComponent, parameters: { - component: TableComponent, info: { TableComponent, }, diff --git a/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js index b03ae5d218b8..b31e0970d512 100644 --- a/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js +++ b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js @@ -43,10 +43,6 @@ let injectedIsLoading = false; export default { title: 'Addons|Knobs.withKnobs', decorators: [withKnobs], - - parameters: { - component: withKnobs, - }, }; export const tweaksStaticValues = () => { diff --git a/examples/official-storybook/stories/demo/button.stories.js b/examples/official-storybook/stories/demo/button.stories.js index 7da5a4a6c5c8..b7f26b217407 100644 --- a/examples/official-storybook/stories/demo/button.stories.js +++ b/examples/official-storybook/stories/demo/button.stories.js @@ -4,9 +4,7 @@ import { Button } from '@storybook/react/demo'; export default { title: 'Other|Demo/Button', - parameters: { - component: Button, - }, + component: Button, }; export const withText = () => ; diff --git a/examples/official-storybook/stories/demo/welcome.stories.js b/examples/official-storybook/stories/demo/welcome.stories.js index 809d2f340122..cca11f79f2c7 100644 --- a/examples/official-storybook/stories/demo/welcome.stories.js +++ b/examples/official-storybook/stories/demo/welcome.stories.js @@ -4,9 +4,7 @@ import { Welcome } from '@storybook/react/demo'; export default { title: 'Other|Demo/Welcome', - parameters: { - component: Welcome, - }, + component: Welcome, }; export const toStorybook = () => ; diff --git a/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js b/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js index 3af8adceef40..09ffee19464d 100644 --- a/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js +++ b/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js @@ -7,11 +7,8 @@ import Button from '../Button'; export default { title: 'Addons|Centered', + component: Button, decorators: [Centered], - - parameters: { - component: Centered, - }, }; export const button = () => ; diff --git a/examples/preact-kitchen-sink/src/stories/button.stories.js b/examples/preact-kitchen-sink/src/stories/button.stories.js index 193b7310393c..0cac539b8ece 100644 --- a/examples/preact-kitchen-sink/src/stories/button.stories.js +++ b/examples/preact-kitchen-sink/src/stories/button.stories.js @@ -7,10 +7,7 @@ import Button from '../Button'; export default { title: 'Button', - - parameters: { - component: Button, - }, + component: Button, }; export const withText = () => ; diff --git a/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js index f1fcb4a169a5..78f5a7bd094f 100644 --- a/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js +++ b/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js @@ -5,10 +5,8 @@ import Button from '../components/Button.svelte'; export default { title: 'Addon|Centered', + component: Button, decorators: [Centered], - parameters: { - component: Centered, - }, }; export const rounded = () => ({ diff --git a/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js index 6503a63f35ca..0efa5b102f08 100644 --- a/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js +++ b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js @@ -4,10 +4,8 @@ import MyButton from './Button.vue'; export default { title: 'Addon|Centered', + component: MyButton, decorators: [Centered], - parameters: { - component: Centered, - }, }; export const rounded = () => ({ diff --git a/examples/vue-kitchen-sink/src/stories/components/app.stories.js b/examples/vue-kitchen-sink/src/stories/components/app.stories.js index 76fc82880324..dfbcfa3ae753 100644 --- a/examples/vue-kitchen-sink/src/stories/components/app.stories.js +++ b/examples/vue-kitchen-sink/src/stories/components/app.stories.js @@ -2,10 +2,7 @@ import App from '../../App.vue'; export default { title: 'App', - - parameters: { - component: App, - }, + component: App, }; export const app = () => ({ diff --git a/examples/vue-kitchen-sink/src/stories/components/button.stories.js b/examples/vue-kitchen-sink/src/stories/components/button.stories.js index bb32c5132635..ef21f273041e 100644 --- a/examples/vue-kitchen-sink/src/stories/components/button.stories.js +++ b/examples/vue-kitchen-sink/src/stories/components/button.stories.js @@ -2,9 +2,7 @@ import Button from '../Button.vue'; export default { title: 'Button', - parameters: { - component: Button, - }, + component: Button, }; export const rounded = () => ({