From a4067ff99c154027491b1c113edfa4ea584c648a Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 4 Aug 2019 10:41:25 +0800 Subject: [PATCH 1/7] Svelte example: Add addon-docs --- addons/docs/src/frameworks/svelte/config.js | 7 +++++++ addons/docs/svelte/config.js | 1 + addons/docs/svelte/index.js | 1 + addons/docs/svelte/preset.js | 1 + examples/svelte-kitchen-sink/.storybook/presets.js | 1 + examples/svelte-kitchen-sink/package.json | 1 + 6 files changed, 12 insertions(+) create mode 100644 addons/docs/src/frameworks/svelte/config.js create mode 100644 addons/docs/svelte/config.js create mode 100644 addons/docs/svelte/index.js create mode 100644 addons/docs/svelte/preset.js create mode 100644 examples/svelte-kitchen-sink/.storybook/presets.js diff --git a/addons/docs/src/frameworks/svelte/config.js b/addons/docs/src/frameworks/svelte/config.js new file mode 100644 index 000000000000..03054b255ee1 --- /dev/null +++ b/addons/docs/src/frameworks/svelte/config.js @@ -0,0 +1,7 @@ +/* eslint-disable import/no-extraneous-dependencies */ +import { addParameters } from '@storybook/svelte'; +import { DocsPage } from '@storybook/addon-docs/blocks'; + +addParameters({ + docs: DocsPage, +}); diff --git a/addons/docs/svelte/config.js b/addons/docs/svelte/config.js new file mode 100644 index 000000000000..1dbed01d0933 --- /dev/null +++ b/addons/docs/svelte/config.js @@ -0,0 +1 @@ +module.exports = require('../dist/frameworks/svelte/config'); diff --git a/addons/docs/svelte/index.js b/addons/docs/svelte/index.js new file mode 100644 index 000000000000..135f6edf2325 --- /dev/null +++ b/addons/docs/svelte/index.js @@ -0,0 +1 @@ +module.exports = require('../dist/frameworks/common/index'); diff --git a/addons/docs/svelte/preset.js b/addons/docs/svelte/preset.js new file mode 100644 index 000000000000..913ef1222a0b --- /dev/null +++ b/addons/docs/svelte/preset.js @@ -0,0 +1 @@ +module.exports = require('../dist/frameworks/common/makePreset').default('svelte'); diff --git a/examples/svelte-kitchen-sink/.storybook/presets.js b/examples/svelte-kitchen-sink/.storybook/presets.js new file mode 100644 index 000000000000..479bad11a41f --- /dev/null +++ b/examples/svelte-kitchen-sink/.storybook/presets.js @@ -0,0 +1 @@ +module.exports = ['@storybook/addon-docs/svelte/preset']; diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json index 9476f3608942..3988be05b977 100644 --- a/examples/svelte-kitchen-sink/package.json +++ b/examples/svelte-kitchen-sink/package.json @@ -15,6 +15,7 @@ "@storybook/addon-actions": "5.2.0-beta.22", "@storybook/addon-backgrounds": "5.2.0-beta.22", "@storybook/addon-centered": "5.2.0-beta.22", + "@storybook/addon-docs": "5.2.0-beta.22", "@storybook/addon-knobs": "5.2.0-beta.22", "@storybook/addon-links": "5.2.0-beta.22", "@storybook/addon-notes": "5.2.0-beta.22", From 5827ffcab77749dcb1a6ec06b23073913d23cc2d Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Sun, 4 Aug 2019 10:54:45 +0800 Subject: [PATCH 2/7] Addon-docs: Fix svelte preset --- addons/docs/src/frameworks/common/makePreset.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/addons/docs/src/frameworks/common/makePreset.ts b/addons/docs/src/frameworks/common/makePreset.ts index 89eac7be9990..7b7fe799039c 100644 --- a/addons/docs/src/frameworks/common/makePreset.ts +++ b/addons/docs/src/frameworks/common/makePreset.ts @@ -8,9 +8,10 @@ const makePreset = (framework: string) => { return [...preConfig, ...entry]; } + const sourceLoaderOptions = framework === 'svelte' ? null : {}; const configureJSX = framework !== 'react'; const webpack = (webpackConfig: any, options: any) => - common.webpack(webpackConfig, { configureJSX, ...options }); + common.webpack(webpackConfig, { configureJSX, sourceLoaderOptions, ...options }); return { ...common, From e6c05b0ba7902856655c1a44e49b79c8e6f27ec3 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 6 Aug 2019 01:59:12 +0800 Subject: [PATCH 3/7] Svelte: Add MDX example --- .../svelte-kitchen-sink/.storybook/config.js | 2 +- .../src/stories/addon-docs.stories.mdx | 72 +++++++++++++++++++ 2 files changed, 73 insertions(+), 1 deletion(-) create mode 100644 examples/svelte-kitchen-sink/src/stories/addon-docs.stories.mdx diff --git a/examples/svelte-kitchen-sink/.storybook/config.js b/examples/svelte-kitchen-sink/.storybook/config.js index bd76665f9cb8..eec6fcc81848 100644 --- a/examples/svelte-kitchen-sink/.storybook/config.js +++ b/examples/svelte-kitchen-sink/.storybook/config.js @@ -8,4 +8,4 @@ addParameters({ }, }); -configure(require.context('../src/stories', true, /\.stories\.js$/), module); +configure(require.context('../src/stories', true, /\.stories\.(js|mdx)$/), module); diff --git a/examples/svelte-kitchen-sink/src/stories/addon-docs.stories.mdx b/examples/svelte-kitchen-sink/src/stories/addon-docs.stories.mdx new file mode 100644 index 000000000000..2fb6e04cdcbc --- /dev/null +++ b/examples/svelte-kitchen-sink/src/stories/addon-docs.stories.mdx @@ -0,0 +1,72 @@ +import { Story, Preview, Meta } from '@storybook/addon-docs/blocks'; +import ButtonView from './views/ButtonView.svelte'; + +# Storybook Docs for Svelte + +Storybook supports every major view layer: +React, Vue, Angular, Ember, React Native, etc. + +Storybook Docs does too. + + + +Hallelujah! Svelte is working out of the box without modification. +How you like them apples?! + +Just like in React, we first declare our component. + + + +## CSF stories + +Here's how we Svelte stories in pure CSF: + +```js +export const rounded = () => ({ + Component: ButtonView, + props: { + rounded: true, + message: 'Rounded text', + }, +}); + +export const square = () => ({ + Component: ButtonView, + props: { + rounded: false, + message: 'Squared text', + }, +}); +``` + +## MDX stories + +Amd here's how it looks in MDX: + + + {{ + Component: ButtonView, + props: { + rounded: true, + message: 'Rounded text', + }, + }} + + + + {{ + Component: ButtonView, + props: { + rounded: false, + message: 'Squared text', + }, + }} + + +## More info + +For more info, check out the [Storybook Docs Technical Preview](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing). + +We want your feedback to help make this more useful. + +Follow us on Twitter for more short demos & project updates! ❤️📈🛠 From 8593a1e1abf218119d3f80ad54852e1f6db42e44 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 27 Aug 2019 11:58:55 +0800 Subject: [PATCH 4/7] Addon-docs: Update svelte preset to latest API --- addons/docs/src/frameworks/svelte/config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/addons/docs/src/frameworks/svelte/config.js b/addons/docs/src/frameworks/svelte/config.js index 03054b255ee1..e44357a5cc27 100644 --- a/addons/docs/src/frameworks/svelte/config.js +++ b/addons/docs/src/frameworks/svelte/config.js @@ -1,7 +1,8 @@ /* eslint-disable import/no-extraneous-dependencies */ import { addParameters } from '@storybook/svelte'; -import { DocsPage } from '@storybook/addon-docs/blocks'; +import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'; addParameters({ + docsContainer: DocsContainer, docs: DocsPage, }); From b4f1a201455f2d77467eb87eefd6882ee12946b2 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 11 Mar 2020 09:35:00 +0800 Subject: [PATCH 5/7] Fix svelte example? --- addons/docs/src/frameworks/svelte/config.js | 8 -------- addons/docs/svelte/config.js | 1 - addons/docs/svelte/index.js | 1 - addons/docs/svelte/preset.js | 1 - examples/svelte-kitchen-sink/.storybook/main.js | 6 ++++++ examples/svelte-kitchen-sink/.storybook/presets.js | 1 - .../src/stories/addon-docs.stories.mdx | 8 +++++--- 7 files changed, 11 insertions(+), 15 deletions(-) delete mode 100644 addons/docs/src/frameworks/svelte/config.js delete mode 100644 addons/docs/svelte/config.js delete mode 100644 addons/docs/svelte/index.js delete mode 100644 addons/docs/svelte/preset.js delete mode 100644 examples/svelte-kitchen-sink/.storybook/presets.js diff --git a/addons/docs/src/frameworks/svelte/config.js b/addons/docs/src/frameworks/svelte/config.js deleted file mode 100644 index e44357a5cc27..000000000000 --- a/addons/docs/src/frameworks/svelte/config.js +++ /dev/null @@ -1,8 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies */ -import { addParameters } from '@storybook/svelte'; -import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks'; - -addParameters({ - docsContainer: DocsContainer, - docs: DocsPage, -}); diff --git a/addons/docs/svelte/config.js b/addons/docs/svelte/config.js deleted file mode 100644 index 1dbed01d0933..000000000000 --- a/addons/docs/svelte/config.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('../dist/frameworks/svelte/config'); diff --git a/addons/docs/svelte/index.js b/addons/docs/svelte/index.js deleted file mode 100644 index 135f6edf2325..000000000000 --- a/addons/docs/svelte/index.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('../dist/frameworks/common/index'); diff --git a/addons/docs/svelte/preset.js b/addons/docs/svelte/preset.js deleted file mode 100644 index 913ef1222a0b..000000000000 --- a/addons/docs/svelte/preset.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('../dist/frameworks/common/makePreset').default('svelte'); diff --git a/examples/svelte-kitchen-sink/.storybook/main.js b/examples/svelte-kitchen-sink/.storybook/main.js index 2f3f49da9ad8..de958c60c996 100644 --- a/examples/svelte-kitchen-sink/.storybook/main.js +++ b/examples/svelte-kitchen-sink/.storybook/main.js @@ -5,6 +5,12 @@ module.exports = { addons: [ '@storybook/addon-storysource', '@storybook/addon-actions', + { + name: '@storybook/addon-docs', + options: { + configureJSX: true, + }, + }, '@storybook/addon-links', '@storybook/addon-knobs', '@storybook/addon-backgrounds', diff --git a/examples/svelte-kitchen-sink/.storybook/presets.js b/examples/svelte-kitchen-sink/.storybook/presets.js deleted file mode 100644 index 479bad11a41f..000000000000 --- a/examples/svelte-kitchen-sink/.storybook/presets.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = ['@storybook/addon-docs/svelte/preset']; diff --git a/examples/svelte-kitchen-sink/src/stories/addon-docs.stories.mdx b/examples/svelte-kitchen-sink/src/stories/addon-docs.stories.mdx index 2fb6e04cdcbc..ddbbb014395f 100644 --- a/examples/svelte-kitchen-sink/src/stories/addon-docs.stories.mdx +++ b/examples/svelte-kitchen-sink/src/stories/addon-docs.stories.mdx @@ -15,7 +15,7 @@ How you like them apples?! Just like in React, we first declare our component. - + ## CSF stories @@ -41,7 +41,7 @@ export const square = () => ({ ## MDX stories -Amd here's how it looks in MDX: +Amd here's how `rounded` looks in MDX: {{ @@ -53,6 +53,8 @@ Amd here's how it looks in MDX: }} +And `square`: + {{ Component: ButtonView, @@ -65,7 +67,7 @@ Amd here's how it looks in MDX: ## More info -For more info, check out the [Storybook Docs Technical Preview](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing). +For more info, check out the [Storybook Docs README](https://github.com/storybookjs/storybook/tree/next/addons/docs). We want your feedback to help make this more useful. From 15279518c06252fbe3f7119e60a235ff4e5aef04 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 11 Mar 2020 09:35:31 +0800 Subject: [PATCH 6/7] Core: Throw error when docs page is set but no container --- lib/core/src/client/preview/StoryRenderer.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/core/src/client/preview/StoryRenderer.tsx b/lib/core/src/client/preview/StoryRenderer.tsx index 89bb545bdbbf..9c59a6d0b4b1 100644 --- a/lib/core/src/client/preview/StoryRenderer.tsx +++ b/lib/core/src/client/preview/StoryRenderer.tsx @@ -283,6 +283,10 @@ export class StoryRenderer { } const docs = parameters.docs || {}; + if (docs.page && !docs.container) { + throw new Error('No `docs.container` set, did you run `addon-docs/preset`?'); + } + const DocsContainer = docs.container || (({ children }: { children: Element }) => <>{children}); const Page = docs.page || NoDocs; From 041ef98eb3d9f05ca626ed58a2d217e40add61d3 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Wed, 11 Mar 2020 09:52:12 +0800 Subject: [PATCH 7/7] Svelte example: configure docs height --- examples/svelte-kitchen-sink/.storybook/config.js | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 examples/svelte-kitchen-sink/.storybook/config.js diff --git a/examples/svelte-kitchen-sink/.storybook/config.js b/examples/svelte-kitchen-sink/.storybook/config.js new file mode 100644 index 000000000000..2eae43220865 --- /dev/null +++ b/examples/svelte-kitchen-sink/.storybook/config.js @@ -0,0 +1,7 @@ +import { addParameters } from '@storybook/svelte'; + +addParameters({ + docs: { + iframeHeight: 300, + }, +});