diff --git a/app/server/README.md b/app/server/README.md index f8586b4fd7fc..4e550a96f05d 100644 --- a/app/server/README.md +++ b/app/server/README.md @@ -62,7 +62,7 @@ module.exports = { Notice that the JSON does not specify a rendering function -- `@storybook/server` will instead call your `parameters.server.url` with the story's server id appended. -For example the JSON story above is requivalent to the CSF definition: +For example the JSON story above is requivalent to the CSF3 definition: ```javascript export default { @@ -74,11 +74,12 @@ export default { }, }; -export const Default = (args) => {}; -Default.storyName = 'Default'; -Default.parameters = { - server: { - id: 'path/of/your/story"', +export const Default = { + name: 'Default', + parameters: { + server: { + id: 'path/of/your/story"', + }, }, }; ``` diff --git a/app/server/src/client/preview/index.ts b/app/server/src/client/preview/index.ts index 9c8154de92fc..473142ab4cfb 100644 --- a/app/server/src/client/preview/index.ts +++ b/app/server/src/client/preview/index.ts @@ -1,5 +1,5 @@ import { start } from '@storybook/core/client'; -import { ClientStoryApi, Loadable } from '@storybook/addons'; +import { ClientStoryApi, Loadable, StoryFn, Args } from '@storybook/addons'; import './globals'; import { renderMain as render } from './render'; @@ -16,7 +16,10 @@ interface ClientApi extends ClientStoryApi { raw: () => any; // todo add type } +const globalRender: StoryFn = (args: Args) => {}; + const api = start(render); +api.clientApi.globalRender = globalRender; export const storiesOf: ClientApi['storiesOf'] = (kind, m) => { return (api.clientApi.storiesOf(kind, m) as ReturnType).addParameters({ diff --git a/app/server/src/lib/compiler/__testfixtures__/a11y.snapshot b/app/server/src/lib/compiler/__testfixtures__/a11y.snapshot index eb2ea48d76ad..0057e3dd70c4 100644 --- a/app/server/src/lib/compiler/__testfixtures__/a11y.snapshot +++ b/app/server/src/lib/compiler/__testfixtures__/a11y.snapshot @@ -11,11 +11,12 @@ export default { } }; -export const Label = (args) => {}; -Label.storyName = 'Label'; -Label.parameters = { - server: { - id: \\"addons/a11y/label\\" +export const Label = { + name: \\"Label\\", + parameters: { + server: { + id: \\"addons/a11y/label\\" + } } }; " diff --git a/app/server/src/lib/compiler/__testfixtures__/actions.snapshot b/app/server/src/lib/compiler/__testfixtures__/actions.snapshot index b955cdc387bc..b2f7434f4b0b 100644 --- a/app/server/src/lib/compiler/__testfixtures__/actions.snapshot +++ b/app/server/src/lib/compiler/__testfixtures__/actions.snapshot @@ -11,18 +11,19 @@ export default { } }; -export const Multiple_actions_config = (args) => {}; -Multiple_actions_config.storyName = 'Multiple actions + config'; -Multiple_actions_config.parameters = { - actions: [ - \\"click\\", - \\"contextmenu\\", - { - clearOnStoryChange: false +export const Multiple_actions_config = { + name: \\"Multiple actions + config\\", + parameters: { + actions: [ + \\"click\\", + \\"contextmenu\\", + { + clearOnStoryChange: false + } + ], + server: { + id: \\"addons/actions/story3\\" } - ], - server: { - id: \\"addons/actions/story3\\" } }; " diff --git a/app/server/src/lib/compiler/__testfixtures__/backgrounds.snapshot b/app/server/src/lib/compiler/__testfixtures__/backgrounds.snapshot index 2f4052384f66..12bac06c25cb 100644 --- a/app/server/src/lib/compiler/__testfixtures__/backgrounds.snapshot +++ b/app/server/src/lib/compiler/__testfixtures__/backgrounds.snapshot @@ -19,11 +19,12 @@ export default { } }; -export const Story_1 = (args) => {}; -Story_1.storyName = 'Story 1'; -Story_1.parameters = { - server: { - id: \\"addons/backgrounds/story1\\" +export const Story_1 = { + name: \\"Story 1\\", + parameters: { + server: { + id: \\"addons/backgrounds/story1\\" + } } }; " diff --git a/app/server/src/lib/compiler/__testfixtures__/controls.snapshot b/app/server/src/lib/compiler/__testfixtures__/controls.snapshot index 54f26b569c56..ccbda5cd711c 100644 --- a/app/server/src/lib/compiler/__testfixtures__/controls.snapshot +++ b/app/server/src/lib/compiler/__testfixtures__/controls.snapshot @@ -11,48 +11,49 @@ export default { } }; -export const Simple = (args) => {}; -Simple.storyName = 'Simple'; -Simple.parameters = { - server: { - id: \\"addons/controls/simple\\" - } -}; -Simple.args = { - name: \\"John Doe\\", - birthday: \\"1960-12-25T00:42:03.600Z\\", - favorite_color: \\"red\\", - active: true, - pets: 2, - sports: [ - \\"football\\", - \\"baseball\\" - ], - favorite_food: \\"Ice Cream\\", - other_things: { - hair: \\"Brown\\", - eyes: \\"Blue\\" - } -}; -Simple.argTypes = { - birthday: { - control: { - type: \\"date\\" +export const Simple = { + name: \\"Simple\\", + parameters: { + server: { + id: \\"addons/controls/simple\\" } }, - favorite_color: { - control: { - type: \\"color\\" + args: { + name: \\"John Doe\\", + birthday: \\"1960-12-25T00:42:03.600Z\\", + favorite_color: \\"red\\", + active: true, + pets: 2, + sports: [ + \\"football\\", + \\"baseball\\" + ], + favorite_food: \\"Ice Cream\\", + other_things: { + hair: \\"Brown\\", + eyes: \\"Blue\\" } }, - favorite_food: { - control: { - type: \\"select\\", - options: { - hot_dog: \\"Hot Dog\\", - pizza: \\"Pizza\\", - burgers: \\"Burgers\\", - ice_cream: \\"Ice Cream\\" + argTypes: { + birthday: { + control: { + type: \\"date\\" + } + }, + favorite_color: { + control: { + type: \\"color\\" + } + }, + favorite_food: { + control: { + type: \\"select\\", + options: { + hot_dog: \\"Hot Dog\\", + pizza: \\"Pizza\\", + burgers: \\"Burgers\\", + ice_cream: \\"Ice Cream\\" + } } } } diff --git a/app/server/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot b/app/server/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot index e6784af74891..14b34271465e 100644 --- a/app/server/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot +++ b/app/server/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot @@ -27,33 +27,35 @@ export default { } }; -export const Heading = (args) => {}; -Heading.storyName = 'Heading'; -Heading.parameters = { - actions: [ - \\"click\\", - \\"contextmenu\\", - { - clearOnStoryChange: false - } - ], - server: { - id: \\"demo/heading\\", - params: { - color: \\"orange\\" +export const Heading = { + name: \\"Heading\\", + parameters: { + actions: [ + \\"click\\", + \\"contextmenu\\", + { + clearOnStoryChange: false + } + ], + server: { + id: \\"demo/heading\\", + params: { + color: \\"orange\\" + } } + }, + args: { + name: \\"John Doe\\", + age: 44 } }; -Heading.args = { - name: \\"John Doe\\", - age: 44 -}; -export const Button = (args) => {}; -Button.storyName = 'Button'; -Button.parameters = { - server: { - id: \\"demo/button\\" +export const Button = { + name: \\"Button\\", + parameters: { + server: { + id: \\"demo/button\\" + } } }; " diff --git a/app/server/src/lib/compiler/__testfixtures__/links.snapshot b/app/server/src/lib/compiler/__testfixtures__/links.snapshot index 0ff20b9103c6..9c269a837cf1 100644 --- a/app/server/src/lib/compiler/__testfixtures__/links.snapshot +++ b/app/server/src/lib/compiler/__testfixtures__/links.snapshot @@ -6,11 +6,12 @@ export default { title: \\"Welcome\\", }; -export const Welcome = (args) => {}; -Welcome.storyName = 'Welcome'; -Welcome.parameters = { - server: { - id: \\"welcome/welcome\\" +export const Welcome = { + name: \\"Welcome\\", + parameters: { + server: { + id: \\"welcome/welcome\\" + } } }; " diff --git a/app/server/src/lib/compiler/__testfixtures__/multiple_stories.snapshot b/app/server/src/lib/compiler/__testfixtures__/multiple_stories.snapshot index a66caa054864..756da4e91ab6 100644 --- a/app/server/src/lib/compiler/__testfixtures__/multiple_stories.snapshot +++ b/app/server/src/lib/compiler/__testfixtures__/multiple_stories.snapshot @@ -6,27 +6,30 @@ export default { title: \\"Demo\\", }; -export const Heading = (args) => {}; -Heading.storyName = 'Heading'; -Heading.parameters = { - server: { - id: \\"demo/heading\\" +export const Heading = { + name: \\"Heading\\", + parameters: { + server: { + id: \\"demo/heading\\" + } } }; -export const Headings = (args) => {}; -Headings.storyName = 'Headings'; -Headings.parameters = { - server: { - id: \\"demo/headings\\" +export const Headings = { + name: \\"Headings\\", + parameters: { + server: { + id: \\"demo/headings\\" + } } }; -export const Button = (args) => {}; -Button.storyName = 'Button'; -Button.parameters = { - server: { - id: \\"demo/button\\" +export const Button = { + name: \\"Button\\", + parameters: { + server: { + id: \\"demo/button\\" + } } }; " diff --git a/app/server/src/lib/compiler/__testfixtures__/params.snapshot b/app/server/src/lib/compiler/__testfixtures__/params.snapshot index fe48cb123e94..1423ce39b9c5 100644 --- a/app/server/src/lib/compiler/__testfixtures__/params.snapshot +++ b/app/server/src/lib/compiler/__testfixtures__/params.snapshot @@ -13,13 +13,14 @@ export default { } }; -export const Story = (args) => {}; -Story.storyName = 'Story'; -Story.parameters = { - server: { - id: \\"params/story\\", - params: { - message: \\"Hello World\\" +export const Story = { + name: \\"Story\\", + parameters: { + server: { + id: \\"params/story\\", + params: { + message: \\"Hello World\\" + } } } }; diff --git a/app/server/src/lib/compiler/__testfixtures__/params_override.snapshot b/app/server/src/lib/compiler/__testfixtures__/params_override.snapshot index 517e27b7bde6..11a59bd1b516 100644 --- a/app/server/src/lib/compiler/__testfixtures__/params_override.snapshot +++ b/app/server/src/lib/compiler/__testfixtures__/params_override.snapshot @@ -13,14 +13,15 @@ export default { } }; -export const Override = (args) => {}; -Override.storyName = 'Override'; -Override.parameters = { - server: { - id: \\"params/override\\", - params: { - message: \\"Hello World\\", - color: \\"green\\" +export const Override = { + name: \\"Override\\", + parameters: { + server: { + id: \\"params/override\\", + params: { + message: \\"Hello World\\", + color: \\"green\\" + } } } }; diff --git a/app/server/src/lib/compiler/__testfixtures__/yaml.snapshot b/app/server/src/lib/compiler/__testfixtures__/yaml.snapshot index 3f3304c1363b..cde9cda3d0bc 100644 --- a/app/server/src/lib/compiler/__testfixtures__/yaml.snapshot +++ b/app/server/src/lib/compiler/__testfixtures__/yaml.snapshot @@ -6,27 +6,30 @@ export default { title: \\"Demo YAML\\", }; -export const Heading = (args) => {}; -Heading.storyName = 'Heading'; -Heading.parameters = { - server: { - id: \\"yaml/heading\\" +export const Heading = { + name: \\"Heading\\", + parameters: { + server: { + id: \\"yaml/heading\\" + } } }; -export const Headings = (args) => {}; -Headings.storyName = 'Headings'; -Headings.parameters = { - server: { - id: \\"yaml/headings\\" +export const Headings = { + name: \\"Headings\\", + parameters: { + server: { + id: \\"yaml/headings\\" + } } }; -export const Button = (args) => {}; -Button.storyName = 'Button'; -Button.parameters = { - server: { - id: \\"yaml/button\\" +export const Button = { + name: \\"Button\\", + parameters: { + server: { + id: \\"yaml/button\\" + } } }; " diff --git a/app/server/src/lib/compiler/__testfixtures__/yml.snapshot b/app/server/src/lib/compiler/__testfixtures__/yml.snapshot index c3572b0c7579..15c610e2fe6e 100644 --- a/app/server/src/lib/compiler/__testfixtures__/yml.snapshot +++ b/app/server/src/lib/compiler/__testfixtures__/yml.snapshot @@ -6,27 +6,30 @@ export default { title: \\"Demo YML\\", }; -export const Heading = (args) => {}; -Heading.storyName = 'Heading'; -Heading.parameters = { - server: { - id: \\"yaml/heading\\" +export const Heading = { + name: \\"Heading\\", + parameters: { + server: { + id: \\"yaml/heading\\" + } } }; -export const Headings = (args) => {}; -Headings.storyName = 'Headings'; -Headings.parameters = { - server: { - id: \\"yaml/headings\\" +export const Headings = { + name: \\"Headings\\", + parameters: { + server: { + id: \\"yaml/headings\\" + } } }; -export const Button = (args) => {}; -Button.storyName = 'Button'; -Button.parameters = { - server: { - id: \\"yaml/button\\" +export const Button = { + name: \\"Button\\", + parameters: { + server: { + id: \\"yaml/button\\" + } } }; " diff --git a/app/server/src/lib/compiler/index.ts b/app/server/src/lib/compiler/index.ts index c2afad7b8b80..c6aca9a351ea 100644 --- a/app/server/src/lib/compiler/index.ts +++ b/app/server/src/lib/compiler/index.ts @@ -1,31 +1,12 @@ -import { - CompileCsfModuleArgs, - CompileStorybookSectionArgs, - CompileStorybookStoryArgs, - StorybookSection, - StorybookStory, -} from './types'; +import { CompileCsfModuleArgs, CompileStorybookSectionArgs, StorybookSection } from './types'; import { stringifySection } from './stringifier'; -function createStory(storyArgs: CompileStorybookStoryArgs): StorybookStory { - const { name, ...options } = storyArgs; - - return { - name, - storyFn: '(args) => {}', - ...options, - }; -} - function createSection(args: CompileStorybookSectionArgs): StorybookSection { - const { title, stories, ...options } = args; return { imports: {}, decorators: [], - title, - stories: stories.map((storyArgs) => createStory(storyArgs)), - ...options, + ...args, }; } diff --git a/app/server/src/lib/compiler/stringifier.ts b/app/server/src/lib/compiler/stringifier.ts index 12eb66bb2110..0dfec11b402a 100644 --- a/app/server/src/lib/compiler/stringifier.ts +++ b/app/server/src/lib/compiler/stringifier.ts @@ -60,18 +60,12 @@ export function stringifyDefault(section: StorybookSection): string { } export function stringifyStory(story: StorybookStory): string { - const { name, storyFn, ...options } = story; + const { name, ...options } = story; const storyId = identifier(name); - const storyStrings = [ - `export const ${storyId} = ${storyFn};`, - `${storyId}.storyName = '${name}';`, - ]; + const exportedStory = { name, ...options }; - Object.keys(options).forEach((key) => { - storyStrings.push(`${storyId}.${key} = ${stringifyObject(options[key])};`); - }); - storyStrings.push(''); + const storyStrings = [`export const ${storyId} = ${stringifyObject(exportedStory)};`, '']; return storyStrings.join('\n'); } diff --git a/app/server/src/lib/compiler/types.ts b/app/server/src/lib/compiler/types.ts index 7b08af446bc8..0d7f72a0291c 100644 --- a/app/server/src/lib/compiler/types.ts +++ b/app/server/src/lib/compiler/types.ts @@ -15,7 +15,6 @@ export interface CompileCsfModuleArgs extends CompileStorybookSectionArgs { export interface StorybookStory { name: string; - storyFn: string; decorators?: string[]; [x: string]: any; } diff --git a/examples/server-kitchen-sink/.storybook/main.js b/examples/server-kitchen-sink/.storybook/main.js index a6397a07db4a..b981eba61bf8 100644 --- a/examples/server-kitchen-sink/.storybook/main.js +++ b/examples/server-kitchen-sink/.storybook/main.js @@ -1,5 +1,5 @@ module.exports = { - stories: ['../stories/**/*.stories.@(json|yaml)'], + stories: ['../stories/**/*.stories.@(json|yaml|yml)'], logLevel: 'debug', addons: [ '@storybook/addon-docs', @@ -9,4 +9,7 @@ module.exports = { '@storybook/addon-links', '@storybook/addon-controls', ], + features: { + previewCsfV3: true, + }, }; diff --git a/examples/server-kitchen-sink/stories/addon-a11y.stories.json b/examples/server-kitchen-sink/stories/addons/a11y.stories.json similarity index 96% rename from examples/server-kitchen-sink/stories/addon-a11y.stories.json rename to examples/server-kitchen-sink/stories/addons/a11y.stories.json index 958571aafdfb..49afad6c39f3 100644 --- a/examples/server-kitchen-sink/stories/addon-a11y.stories.json +++ b/examples/server-kitchen-sink/stories/addons/a11y.stories.json @@ -1,5 +1,4 @@ { - "title": "Addons/a11y", "parameters": { "options": { "selectedPanel": "storybook/a11y/panel" diff --git a/examples/server-kitchen-sink/stories/addon-actions.stories.json b/examples/server-kitchen-sink/stories/addons/actions.stories.json similarity index 97% rename from examples/server-kitchen-sink/stories/addon-actions.stories.json rename to examples/server-kitchen-sink/stories/addons/actions.stories.json index b5db602918a9..ea7eae25d5c0 100644 --- a/examples/server-kitchen-sink/stories/addon-actions.stories.json +++ b/examples/server-kitchen-sink/stories/addons/actions.stories.json @@ -1,5 +1,4 @@ { - "title": "Addons/Actions", "parameters": { "options": { "selectedPanel": "storybook/actions/panel" } }, diff --git a/examples/server-kitchen-sink/stories/addon-backgrounds.stories.json b/examples/server-kitchen-sink/stories/addons/backgrounds.stories.json similarity index 93% rename from examples/server-kitchen-sink/stories/addon-backgrounds.stories.json rename to examples/server-kitchen-sink/stories/addons/backgrounds.stories.json index f5fe3529dc23..24fdb9b7fd58 100644 --- a/examples/server-kitchen-sink/stories/addon-backgrounds.stories.json +++ b/examples/server-kitchen-sink/stories/addons/backgrounds.stories.json @@ -1,5 +1,4 @@ { - "title": "Addons/Backgrounds", "parameters": { "backgrounds": { "default": "dark", diff --git a/examples/server-kitchen-sink/stories/addon-controls.stories.json b/examples/server-kitchen-sink/stories/addons/controls.stories.json similarity index 97% rename from examples/server-kitchen-sink/stories/addon-controls.stories.json rename to examples/server-kitchen-sink/stories/addons/controls.stories.json index 522fa1818e14..f91b59af9fc8 100644 --- a/examples/server-kitchen-sink/stories/addon-controls.stories.json +++ b/examples/server-kitchen-sink/stories/addons/controls.stories.json @@ -1,5 +1,4 @@ { - "title": "Addons/Controls", "parameters": { "options": { "selectedPanel": "storybook/controls/panel" } }, diff --git a/examples/server-kitchen-sink/stories/demo.stories.json b/examples/server-kitchen-sink/stories/demo.stories.json index 207332142d29..e335d37445df 100644 --- a/examples/server-kitchen-sink/stories/demo.stories.json +++ b/examples/server-kitchen-sink/stories/demo.stories.json @@ -1,5 +1,4 @@ { - "title": "Demo", "stories": [ { "name": "Heading", diff --git a/examples/server-kitchen-sink/stories/scripts.stories.json b/examples/server-kitchen-sink/stories/html_content/scripts.stories.json similarity index 93% rename from examples/server-kitchen-sink/stories/scripts.stories.json rename to examples/server-kitchen-sink/stories/html_content/scripts.stories.json index 8edb51ffafd6..34a55ec8c2b4 100644 --- a/examples/server-kitchen-sink/stories/scripts.stories.json +++ b/examples/server-kitchen-sink/stories/html_content/scripts.stories.json @@ -1,5 +1,4 @@ { - "title": "Html Content/Scripts", "stories": [ { "name": "Head Inline", diff --git a/examples/server-kitchen-sink/stories/styles.stories.json b/examples/server-kitchen-sink/stories/html_content/styles.stories.json similarity index 93% rename from examples/server-kitchen-sink/stories/styles.stories.json rename to examples/server-kitchen-sink/stories/html_content/styles.stories.json index 8a81304b8566..377372d5b7ee 100644 --- a/examples/server-kitchen-sink/stories/styles.stories.json +++ b/examples/server-kitchen-sink/stories/html_content/styles.stories.json @@ -1,5 +1,4 @@ { - "title": "Html Content/Styles", "stories": [ { "name": "Head Inline", diff --git a/examples/server-kitchen-sink/stories/kitchen_sink.stories.json b/examples/server-kitchen-sink/stories/kitchen_sink.stories.json index 87f09c3ce26c..69baaf12ab1a 100644 --- a/examples/server-kitchen-sink/stories/kitchen_sink.stories.json +++ b/examples/server-kitchen-sink/stories/kitchen_sink.stories.json @@ -1,5 +1,4 @@ { - "title": "Kitchen Sink", "addons": ["knobs"], "parameters": { "backgrounds": { diff --git a/examples/server-kitchen-sink/stories/params.stories.json b/examples/server-kitchen-sink/stories/params.stories.json index c714b0a562df..3744bfd02f51 100644 --- a/examples/server-kitchen-sink/stories/params.stories.json +++ b/examples/server-kitchen-sink/stories/params.stories.json @@ -1,5 +1,4 @@ { - "title": "Params", "parameters": { "server": { "params": { "color": "red" } diff --git a/examples/server-kitchen-sink/stories/welcome.stories.json b/examples/server-kitchen-sink/stories/welcome.stories.json index 976e10c37cc5..401ef4b0a314 100644 --- a/examples/server-kitchen-sink/stories/welcome.stories.json +++ b/examples/server-kitchen-sink/stories/welcome.stories.json @@ -1,5 +1,4 @@ { - "title": "Welcome", "stories": [ { "name": "Welcome", diff --git a/examples/server-kitchen-sink/stories/yaml.stories.yaml b/examples/server-kitchen-sink/stories/yaml.stories.yaml index 1eb8c906e054..7511de2da854 100644 --- a/examples/server-kitchen-sink/stories/yaml.stories.yaml +++ b/examples/server-kitchen-sink/stories/yaml.stories.yaml @@ -1,4 +1,3 @@ -title: Demo YAML stories: - name: Heading parameters: diff --git a/examples/server-kitchen-sink/stories/yml.stories.yml b/examples/server-kitchen-sink/stories/yml.stories.yml index bc334cb8949f..7511de2da854 100644 --- a/examples/server-kitchen-sink/stories/yml.stories.yml +++ b/examples/server-kitchen-sink/stories/yml.stories.yml @@ -1,4 +1,3 @@ -title: Demo YML stories: - name: Heading parameters: