Merge pull request #18660 from storybookjs/chore_fix_csf3_docs_snippets

Chore: (Docs) Updates for CSF3

docs/addons/addons-api.md

@@ -235,7 +235,6 @@ Let's say you've got a story like this:
     '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',
   ]}
 />
 

docs/addons/writing-addons.md

@@ -200,7 +200,6 @@ When Storybook was initialized, it provided a small set of example stories. Chan
     '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',
   ]}
 />
 

docs/api/csf.md

@@ -44,7 +44,6 @@ With CSF, every named export in the file represents a story object by default.
     'react/my-component-story-basic-and-props.ts.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',
     'angular/my-component-story-basic-and-props.ts.mdx',
   ]}
 />
@@ -92,7 +91,6 @@ Consider Storybook’s ["Button" example](../writing-stories/introduction.md#def
     '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',
     'angular/button-story-click-handler.ts.mdx',
   ]}
 />
@@ -125,7 +123,6 @@ Or even more simply:
     'react/button-story-click-handler-simplificated.js.mdx',
     'angular/button-story-click-handler-simplificated.ts.mdx',
     'vue/button-story-click-handler-simplificated.js.mdx',
-    'svelte/button-story-click-handler-simplificated.native-format.mdx',
   ]}
 />
 
@@ -158,6 +155,28 @@ A good use case for the `play` function is a form component. With previous Story
 
 When the story renders in the UI, Storybook executes each step defined in the `play` function and runs the assertions without the need for user interaction.
 
+## Custom render functions
+
+Starting in Storybook 6.4, you can write your stories as JavaScript objects, reducing the boilerplate code you need to generate to test your components, thus improving functionality and usability. `Render` functions are helpful methods to give you additional control over how the story renders. For example, if you were writing a story as an object and you wanted to specify how your component should render, you could write the following:
+
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+   'react/component-story-with-custom-render-function.js.mdx',
+   'react/component-story-with-custom-render-function.ts.mdx',
+   'angular/component-story-with-custom-render-function.ts.mdx',
+   'vue/component-story-with-custom-render-function.js.mdx',
+   'vue/component-story-with-custom-render-function.ts.mdx',
+   'preact/component-story-with-custom-render-function.js.mdx',
+   'web-components/component-story-with-custom-render-function.js.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
+
+When Storybook loads this story, it will detect the existence of a `render` function and adjust the component rendering accordingly based on what's defined.
+
 ## Storybook export vs. name handling
 
 Storybook handles named exports and the `name` option slightly differently. When should you use one vs. the other?

docs/api/mdx.md

@@ -44,7 +44,6 @@ For example, here's the story from the `Checkbox` example above, rewritten in CS
     'react/checkbox-story-csf.ts.mdx',
     'vue/checkbox-story-csf.js.mdx',
     'angular/checkbox-story-csf.ts.mdx',
-    'svelte/checkbox-story-csf.native-format.mdx',
   ]}
 />
 

docs/configure/environment-variables.md

@@ -60,7 +60,6 @@ Then you can access this environment variable anywhere, even within your stories
     'angular/my-component-with-env-variables.mdx.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',
     'svelte/my-component-with-env-variables.mdx.mdx',
   ]}
 />

docs/configure/images-and-assets.md

@@ -24,7 +24,6 @@ Afterward, you can use any asset in your stories:
     'angular/component-story-static-asset-with-import.ts.mdx',
     'angular/component-story-static-asset-with-import.mdx.mdx',
     'svelte/component-story-static-asset-with-import.js.mdx',
-    'svelte/component-story-static-asset-with-import.native-format.mdx',
     'svelte/component-story-static-asset-with-import.mdx.mdx',
   ]}
 />
@@ -61,7 +60,6 @@ Here `../public` is your static directory. Now use it in a component or story li
     'angular/component-story-static-asset-without-import.ts.mdx',
     'angular/component-story-static-asset-without-import.mdx.mdx',
     'svelte/component-story-static-asset-without-import.js.mdx',
-    'svelte/component-story-static-asset-without-import.native-format.mdx',
     'svelte/component-story-static-asset-without-import.mdx.mdx',
   ]}
 />
@@ -112,7 +110,6 @@ Upload your files to an online CDN and reference them. In this example, we’re
     'angular/component-story-static-asset-cdn.ts.mdx',
     'angular/component-story-static-asset-cdn.mdx.mdx',
     'svelte/component-story-static-asset-cdn.js.mdx',
-    'svelte/component-story-static-asset-cdn.native-format.mdx',
     'svelte/component-story-static-asset-cdn.mdx.mdx',
   ]}
 />

docs/contribute/new-snippets.md

@@ -47,7 +47,6 @@ Browse the documentation and look for the code snippets you're willing to contri
     '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',
   ]}
 />
@@ -70,7 +69,6 @@ Create the file `ember/your-component.js.mdx`, similar to the other frameworks,
     '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',
     'ember/your-component.js.mdx', //👈🏼 The code snippet you created.
   ]}

docs/essentials/controls.md

@@ -119,7 +119,6 @@ Until now, we only used auto-generated controls based on the component we're wri
     'vue/table-story-fully-customize-controls.mdx-3.mdx.mdx',
     'angular/table-story-fully-customize-controls.ts.mdx',
     'angular/table-story-fully-customize-controls.mdx.mdx',
-    'svelte/table-story-fully-customize-controls.native-format.mdx',
   ]}
 />
 
@@ -151,7 +150,6 @@ One way to deal with this is to use primitive values (e.g., strings) as arg valu
     'angular/component-story-custom-args-complex.ts.mdx',
     'angular/component-story-custom-args-complex.mdx.mdx',
     'svelte/component-story-custom-args-complex.js.mdx',
-    'svelte/component-story-custom-args-complex.native-format.mdx',
   ]}
 />
 

docs/essentials/viewport.md

@@ -126,7 +126,6 @@ Update your story through [parameters](../writing-stories/parameters.md) to incl
     'angular/my-component-story-configure-viewports.mdx.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',
     'svelte/my-component-story-configure-viewports.mdx.mdx',
   ]}
 />

docs/get-started/setup.md

@@ -20,7 +20,6 @@ Pick a simple component from your project, like a Button, and write a `.stories.
     'vue/your-component.3.js.mdx',
     'vue/your-component.mdx-3.mdx.mdx',
     'svelte/your-component.js.mdx',
-    'svelte/your-component.native-format.mdx',
     'svelte/your-component.mdx.mdx',
     'web-components/your-component.js.mdx',
     'html/your-component.js.mdx',

docs/get-started/whats-a-story.md

@@ -22,7 +22,6 @@ Let’s start with the `Button` component. A story is a function that describes
     'vue/button-story.js.mdx',
     'vue/button-story.mdx.mdx',
     'svelte/button-story.js.mdx',
-    'svelte/button-story.native-format.mdx',
     'svelte/button-story.mdx.mdx',
     'web-components/button-story.js.mdx',
     'html/button-story.js.mdx',
@@ -54,7 +53,6 @@ The above story definition can be further improved to take advantage of [Storybo
     'angular/button-story-with-args.mdx.mdx',
     'web-components/button-story-with-args.js.mdx',
     'svelte/button-story-with-args.js.mdx',
-    'svelte/button-story-with-args.native-format.mdx',
     'svelte/button-story-with-args.mdx.mdx',
     'html/button-story-with-args.js.mdx',
     'html/button-story-with-args.ts.mdx',

docs/snippets/angular/app-story-with-mock.ts.mdx

@@ -1,37 +1,39 @@
 ```ts
 // App.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, Story } from '@storybook/angular';
 
 import { AppComponent } from './app.component';
 
 export default {
   /* 👇 The title prop is optional.
-  * See https://storybook.js.org/docs/angular/configure/overview#configure-story-loading
-  * to learn how to generate automatic titles
-  */
+   * See https://storybook.js.org/docs/7.0/angular/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
   title: 'App',
   component: AppComponent,
 } as Meta;
 
-const Template: Story = () => ({
-  props: {},
-});
-
-export const Success = Template.bind({});
-Success.parameters = {
-  fetch: {
-    json: {
-      JavaScript: 3390991,
-      'C++': 44974,
-      TypeScript: 15530,
-      CoffeeScript: 12253,
-      Python: 9383,
-      C: 5341,
-      Shell: 5115,
-      HTML: 3420,
-      CSS: 3171,
-      Makefile: 189,
+ /*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/7.0/angular/api/csf
+ * to learn how to use render functions.
+ */
+export const Success: Story = {
+  parameters: {
+    fetch: {
+      json: {
+        JavaScript: 3390991,
+        'C++': 44974,
+        TypeScript: 15530,
+        CoffeeScript: 12253,
+        Python: 9383,
+        C: 5341,
+        Shell: 5115,
+        HTML: 3420,
+        CSS: 3171,
+        Makefile: 189,
+      },
     },
   },
 };

docs/snippets/angular/badge-story-starter-example.mdx.mdx

@@ -12,62 +12,67 @@ import { Icon } from './icon.component';
 
 <Meta title="MDX/Badge" component={Badge} />
 
+<!--
+ 👇 Render functions are a framework specific feature to allow you control on how the component renders.
+  See https://storybook.js.org/docs/7.0/angular/api/csf
+  to learn how to use render functions.
+-->
+
 # Badge
 
 Let's define a story for our `Badge` component:
 
-<Story name="positive">
-  {{
+<Story 
+  name="positive"
+  render={() => ({
     template:`<Badge status="positive">Positive</Badge>`,
-  }}
-</Story>
+  })} />
 
 We can drop it in a `Canvas` to get a code snippet:
 
 <Canvas>
-  <Story name="negative">
-    {{
+  <Story 
+    name="negative"
+    render={() => ({
       template: `<Badge status="negative">Negative</Badge>`,
-    }}
-  </Story>
+    })} />
 </Canvas>
 
 We can even preview multiple stories in a block. This
 gets rendered as a group, but defines individual stories
 with unique URLs and isolated snapshot tests.
 
 <Canvas>
-  <Story name="warning">
-    {{
+  <Story 
+    name="warning"
+    render={() => ({
       template: `<Badge status="warning">Warning</Badge>`,
-    }}
-  </Story>
-  <Story name="neutral">
-    {{
+    })} />
+  <Story 
+    name="neutral"
+    render={() => ({
       template: `<Badge status="neutral">Neutral</Badge>`,
-    }}
-  </Story>
-  <Story name="error">
-    {{
-      template: `<Badge status="error">Error</Badge>`,
-    }}
-  </Story>
+    })} />
   <Story 
+    name="error"
+    render={() => ({
+      template: `<Badge status="error">Error</Badge>`,
+    })} />
+  <Story
     name="with icon"
     decorators={[
       moduleMetadata({
-        declarations: [Badge, Icon],
-        imports: [CommonModule],
+       declarations: [Badge, Icon],
+       imports: [CommonModule],
       })
-    ]}>
-    {{
+    ]} 
+    render={() => ({
       template: `
         <Badge status="warning">
           <Icon icon="check" inline></Icon>
           with icon
         </Badge>
       `,
-    }}
-  </Story>
+    })} />
 </Canvas>
-```
+```