Merge pull request #7673 from storybookjs/7101-docs-svelte-preset

Addon-docs: Svelte example

examples/svelte-kitchen-sink/.storybook/config.js

@@ -0,0 +1,7 @@
+import { addParameters } from '@storybook/svelte';
+
+addParameters({
+  docs: {
+    iframeHeight: 300,
+  },
+});

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',

examples/svelte-kitchen-sink/package.json

@@ -14,6 +14,7 @@
     "@storybook/addon-actions": "6.0.0-alpha.25",
     "@storybook/addon-backgrounds": "6.0.0-alpha.25",
     "@storybook/addon-centered": "6.0.0-alpha.25",
+    "@storybook/addon-docs": "6.0.0-alpha.25",
     "@storybook/addon-knobs": "6.0.0-alpha.25",
     "@storybook/addon-links": "6.0.0-alpha.25",
     "@storybook/addon-options": "6.0.0-alpha.25",

examples/svelte-kitchen-sink/src/stories/addon-docs.stories.mdx

@@ -0,0 +1,74 @@
+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.
+
+<Story id="welcome--welcome" height="400px" />
+
+Hallelujah! Svelte is working out of the box without modification.
+How you like them apples?!
+
+Just like in React, we first declare our component.
+
+<Meta title="Addon/Docs" />
+
+## 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 `rounded` looks in MDX:
+
+<Story name="rounded">
+  {{
+    Component: ButtonView,
+    props: {
+      rounded: true,
+      message: 'Rounded text',
+    },
+  }}
+</Story>
+
+And `square`:
+
+<Story name="square">
+  {{
+    Component: ButtonView,
+    props: {
+      rounded: false,
+      message: 'Squared text',
+    },
+  }}
+</Story>
+
+## More info
+
+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.
+
+Follow us on Twitter for more short demos & project updates! ❤️📈🛠

lib/core/src/client/preview/StoryRenderer.tsx

@@ -284,6 +284,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;