Merge branch 'next' into 14831-extract-addon-events

storybookjs · May 9, 2021 · 5b5bfe8 · 5b5bfe8
2 parents 1cb0bea + 20898b6
commit 5b5bfe8
Show file tree

Hide file tree

Showing 98 changed files with 1,169 additions and 321 deletions.
diff --git a/README.md b/README.md
@@ -82,7 +82,7 @@ Documentation can be found [Storybook's docs site](https://storybook.js.org/docs
 
 Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/docs/react/get-started/examples>
 
-Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native development for mobile.
+Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.
 
 ### Community
 
@@ -108,6 +108,7 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story
 | [Marko](app/marko)                                          | [v6.2.x](https://storybookjs.netlify.com/marko-cli/)                        | [![Marko](https://img.shields.io/npm/dm/@storybook/marko.svg)](app/marko)                      |
 | [Riot](app/riot)                                            | [v6.2.x](https://storybookjs.netlify.com/riot-kitchen-sink/)                | [![Riot](https://img.shields.io/npm/dm/@storybook/riot.svg)](app/riot)                         |
 | [Rax](app/rax)                                              | [v6.2.x](https://storybookjs.netlify.com/rax-kitchen-sink/)                 | [![Rax](https://img.shields.io/npm/dm/@storybook/rax.svg)](app/rax)                            |
+| [Android, iOS, Flutter](https://github.com/storybookjs/native)                                              | [v6.2.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html)                 | [![Rax](https://img.shields.io/npm/dm/@storybook/native.svg)](https://github.com/storybookjs/native)                            |
 
 ### Sub Projects
 

diff --git a/addons/actions/src/register.tsx b/addons/actions/src/register.tsx
@@ -8,7 +8,7 @@ addons.register(ADDON_ID, (api) => {
   addons.addPanel(PANEL_ID, {
     title() {
       const [actionsCount, setActionsCount] = useState(0);
-      const onEvent = () => setActionsCount((previous) => previous + 1);
+      const onEvent = () => setActionsCount(previous => previous + 1);
       const onChange = () => setActionsCount(0);
 
       useEffect(() => {

diff --git a/addons/queryparams/README.md b/addons/queryparams/README.md
diff --git a/addons/queryparams/package.json b/addons/queryparams/package.json
diff --git a/addons/queryparams/preset.js b/addons/queryparams/preset.js
diff --git a/addons/queryparams/src/constants.ts b/addons/queryparams/src/constants.ts
diff --git a/addons/queryparams/src/index.ts b/addons/queryparams/src/index.ts
diff --git a/addons/queryparams/src/preset/addDecorator.ts b/addons/queryparams/src/preset/addDecorator.ts
diff --git a/addons/queryparams/src/typings.d.ts b/addons/queryparams/src/typings.d.ts
diff --git a/addons/queryparams/tsconfig.json b/addons/queryparams/tsconfig.json
diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md
@@ -185,6 +185,8 @@ When Storybook was initialized it provided a small set of examples stories. Chan
     'react/button-story-with-addon-example.js.mdx',
     'vue/button-story-with-addon-example.js.mdx',
     'angular/button-story-with-addon-example.ts.mdx',
+    'svelte/button-story-with-addon-example.js.mdx',
+    'svelte/button-story-with-addon-example.native-format.mdx',
   ]}
 />
 

diff --git a/docs/api/csf.md b/docs/api/csf.md
@@ -42,6 +42,8 @@ With CSF, every named export in the file represents a story function by default.
   paths={[
     'react/my-component-story-basic-and-props.js.mdx',
     'vue/my-component-story-basic-and-props.js.mdx',
+    'svelte/my-component-story-basic-and-props.js.mdx',
+    'svelte/my-component-story-basic-and-props.native-format.mdx',
   ]}
 />
 
@@ -86,6 +88,8 @@ Consider Storybook’s ["Button" example](../writing-stories/introduction.md#def
     'react/button-story-click-handler.js.mdx',
     'vue/button-story-click-handler.2.js.mdx',
     'vue/button-story-click-handler.3.js.mdx',
+    'svelte/button-story-click-handler.js.mdx',
+    'svelte/button-story-click-handler.native-format.mdx',
   ]}
 />
 
@@ -177,6 +181,7 @@ Consider the following story file:
   paths={[
     'react/my-component-story-with-nonstory.js.mdx',
     'vue/my-component-story-with-nonstory.js.mdx',
+    'svelte/my-component-story-with-nonstory.js.mdx',
   ]}
 />
 

diff --git a/docs/api/mdx.md b/docs/api/mdx.md
@@ -40,6 +40,7 @@ For example, here's the story from `Checkbox` example above, rewritten in CSF:
   paths={[
     'react/checkbox-story-csf.js.mdx',
     'vue/checkbox-story-csf.js.mdx',
+    'svelte/checkbox-story-csf.native-format.mdx',
   ]}
 />
 

diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md
@@ -50,6 +50,8 @@ Then you can access this environment variable anywhere, even within your stories
     'vue/my-component-with-env-variables.3.js.mdx',
     'angular/my-component-with-env-variables.ts.mdx',
     'web-components/my-component-with-env-variables.js.mdx',
+    'svelte/my-component-with-env-variables.js.mdx',
+    'svelte/my-component-with-env-variables.native-format.mdx',
   ]}
 />
 

diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md
@@ -18,6 +18,8 @@ Afterwards you can use any asset in your stories:
     'vue/component-story-static-asset-with-import.2.js.mdx',
     'vue/component-story-static-asset-with-import.3.js.mdx',
     'angular/component-story-static-asset-with-import.ts.mdx',
+    'svelte/component-story-static-asset-with-import.js.mdx',
+    'svelte/component-story-static-asset-with-import.native-format.mdx',
   ]}
 />
 
@@ -56,6 +58,8 @@ Here `./public` is your static directory. Now use it in a component or story lik
     'react/component-story-static-asset-without-import.js.mdx',
     'vue/component-story-static-asset-without-import.js.mdx',
     'angular/component-story-static-asset-without-import.ts.mdx',
+    'svelte/component-story-static-asset-without-import.js.mdx',
+    'svelte/component-story-static-asset-without-import.native-format.mdx',
   ]}
 />
 
@@ -91,6 +95,8 @@ Upload your files to an online CDN and reference them. In this example we’re u
     'react/component-story-static-asset-cdn.js.mdx',
     'vue/component-story-static-asset-cdn.js.mdx',
     'angular/component-story-static-asset-cdn.ts.mdx',
+    'svelte/component-story-static-asset-cdn.js.mdx',
+    'svelte/component-story-static-asset-cdn.native-format.mdx',
   ]}
 />
 

diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
@@ -116,6 +116,7 @@ Up until now, we only used auto-generated controls based on the component we're
     'vue/table-story-fully-customize-controls.2.js.mdx',
     'vue/table-story-fully-customize-controls.3.js.mdx',
     'angular/table-story-fully-customize-controls.ts.mdx',
+    'svelte/table-story-fully-customize-controls.native-format.mdx',
   ]}
 />
 
@@ -145,6 +146,8 @@ One way to deal with this is to use primitive values (e.g. strings) as arg value
     'vue/component-story-custom-args-complex.2.js.mdx',
     'vue/component-story-custom-args-complex.3.js.mdx',
     'angular/component-story-custom-args-complex.ts.mdx',
+    'svelte/component-story-custom-args-complex.js.mdx',
+    'svelte/component-story-custom-args-complex.native-format.mdx',
   ]}
 />
 

diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md
@@ -124,6 +124,8 @@ You can change your story through [parameters](../writing-stories/parameters.md)
     'vue/my-component-story-configure-viewports.js.mdx',
     'angular/my-component-story-configure-viewports.ts.mdx',
     'web-components/my-component-story-configure-viewports.js.mdx',
+    'svelte/my-component-story-configure-viewports.js.mdx',
+    'svelte/my-component-story-configure-viewports.native-format.mdx',
   ]}
 />
 

diff --git a/docs/get-started/installation-problems/marko.mdx b/docs/get-started/installation-problems/marko.mdx
@@ -1,2 +1,2 @@
 - You can also setup Storybook manually through the Storybook CLI. Add the `--type marko` flag when you initialize Storybook in your project.
-- If there's an installation problem, check the [README for the Marko framework](../../app/marko/README.md).
+- If there's an installation problem, check the [README for the Marko framework](https://github.com/storybookjs/marko).
diff --git a/docs/get-started/installation-problems/mithril.mdx b/docs/get-started/installation-problems/mithril.mdx
@@ -1,2 +1,2 @@
 - You can also setup Storybook manually through the Storybook CLI. Add the `--type mithril` flag when you initialize Storybook in your project.
-- If there's an installation problem, check the [README for the Mithril framework](../../app/mithril/README.md).
+- If there's an installation problem, check the [README for the Mithril framework](https://github.com/storybookjs/mithril).
diff --git a/docs/get-started/installation-problems/rax.mdx b/docs/get-started/installation-problems/rax.mdx
@@ -1,2 +1,2 @@
 - You can also setup Storybook manually through the Storybook CLI. Add the `--type rax` flag when you initialize Storybook in your project.
-- If there's an installation problem, check the [README for the Rax framework](../../app/rax/README.md).
+- If there's an installation problem, check the [README for the Rax framework](https://github.com/storybookjs/rax).
diff --git a/docs/get-started/installation-problems/riot.mdx b/docs/get-started/installation-problems/riot.mdx
@@ -1,2 +1,2 @@
 - You can also setup Storybook manually through the Storybook CLI. Add the `--type riot` flag when you initialize Storybook in your project.
-- If there's an installation problem, check the [README for the Riot framework](../../app/riot/README.md).
+- If there's an installation problem, check the [README for the Riot framework](https://github.com/storybookjs/riot/).
diff --git a/docs/get-started/installation-problems/svelte.mdx b/docs/get-started/installation-problems/svelte.mdx
@@ -1,2 +1,3 @@
 - You can also setup Storybook manually through the Storybook CLI. Add the `--type svelte` flag when you initialize Storybook in your project.
 - If there's an installation problem, check the [README for the Svelte framework](../../app/svelte/README.md).
+- If there's an installation problem with Svelte Native Story Format, check the [README for the Svelte Story Format](https://github.com/storybookjs/addon-svelte-csf).
diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md
@@ -16,6 +16,7 @@ Pick a simple component from your project, like a Button, and write a `.stories.
     'vue/your-component.2.js.mdx',
     'vue/your-component.3.js.mdx',
     'svelte/your-component.js.mdx',
+    'svelte/your-component.native-format.mdx',
     'web-components/your-component.js.mdx',
   ]}
 />

diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md
@@ -20,6 +20,7 @@ Let’s start with the `Button` component. A story is a function that describes
     'angular/button-story.ts.mdx',
     'vue/button-story.js.mdx',
     'svelte/button-story.js.mdx',
+    'svelte/button-story.native-format.mdx',
     'svelte/button-story.mdx.mdx',
     'web-components/button-story.js.mdx',
   ]}
@@ -43,6 +44,8 @@ The above story definition can be further improved to take advantage of [Storybo
     'vue/button-story-with-args.3.js.mdx',
     'angular/button-story-with-args.ts.mdx',
     'web-components/button-story-with-args.js.mdx',
+    'svelte/button-story-with-args.js.mdx',
+    'svelte/button-story-with-args.native-format.mdx',
   ]}
 />