Merge pull request #25110 from storybookjs/docs_svelte_ts_example

Docs: Svelte docs and examples update (cherry picked from commit 7bee11f)
storybookjs · Dec 7, 2023 · 635d8bc · 635d8bc
1 parent 8b57738
commit 635d8bc
Show file tree

Hide file tree

Showing 147 changed files with 2,248 additions and 1,068 deletions.
diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md
@@ -93,7 +93,7 @@ Use the `makeDecorator` API to create decorators in the style of the official ad
 
 <Callout variant="info">
 
- If the story's parameters include `{ exampleParameter: { disable: true } }` (where `exampleParameter` is the `parameterName` of your addon), your decorator will not be called.
+If the story's parameters include `{ exampleParameter: { disable: true } }` (where `exampleParameter` is the `parameterName` of your addon), your decorator will not be called.
 
 </Callout>
 
@@ -124,6 +124,7 @@ The `selectStory` API method allows you to select a single story. It accepts the
     'vue/button-story-with-addon-example.ts.mdx',
     'angular/button-story-with-addon-example.ts.mdx',
     'svelte/button-story-with-addon-example.js.mdx',
+    'svelte/button-story-with-addon-example.ts.mdx',
     'web-components/button-story-with-addon-example.js.mdx',
     'web-components/button-story-with-addon-example.ts.mdx',
   ]}

diff --git a/docs/api/csf.md b/docs/api/csf.md
@@ -51,6 +51,7 @@ With CSF, every named export in the file represents a story object by default.
     'vue/my-component-story-basic-and-props.js.mdx',
     'vue/my-component-story-basic-and-props.ts.mdx',
     'svelte/my-component-story-basic-and-props.js.mdx',
+    'svelte/my-component-story-basic-and-props.ts.mdx',
     'angular/my-component-story-basic-and-props.ts.mdx',
     'web-components/my-component-story-basic-and-props.js.mdx',
     'web-components/my-component-story-basic-and-props.ts.mdx',
@@ -112,6 +113,7 @@ Consider Storybook’s ["Button" example](../writing-stories/index.md#defining-s
     'vue/button-story-click-handler.3.js.mdx',
     'vue/button-story-click-handler.3.ts.mdx',
     'svelte/button-story-click-handler.js.mdx',
+    'svelte/button-story-click-handler.ts.mdx',
     'angular/button-story-click-handler.ts.mdx',
     'web-components/button-story-click-handler.js.mdx',
     'web-components/button-story-click-handler.ts.mdx',
@@ -138,6 +140,7 @@ Now consider the same example, re-written with args:
     'vue/button-story-click-handler-args.3.ts.mdx',
     'angular/button-story-click-handler-args.ts.mdx',
     'svelte/button-story-click-handler-args.js.mdx',
+    'svelte/button-story-click-handler-args.ts.mdx',
     'web-components/button-story-click-handler-args.js.mdx',
     'web-components/button-story-click-handler-args.ts.mdx',
     'solid/button-story-click-handler-args.js.mdx',
@@ -162,6 +165,8 @@ Or even more simply:
     'vue/button-story-click-handler-simplificated.ts.mdx',
     'web-components/button-story-click-handler-simplificated.js.mdx',
     'web-components/button-story-click-handler-simplificated.ts.mdx',
+    'svelte/button-story-click-handler-simplificated.js.mdx',
+    'svelte/button-story-click-handler-simplificated.ts.mdx',
     'solid/button-story-click-handler-simplificated.js.mdx',
     'solid/button-story-click-handler-simplificated.ts.mdx',
   ]}
@@ -193,6 +198,7 @@ A good use case for the `play` function is a form component. With previous Story
     'web-components/login-form-with-play-function.js.mdx',
     'web-components/login-form-with-play-function.ts.mdx',
     'svelte/login-form-with-play-function.js.mdx',
+    'svelte/login-form-with-play-function.ts.mdx',
     'solid/login-form-with-play-function.js.mdx',
     'solid/login-form-with-play-function.ts.mdx',
   ]}
@@ -204,6 +210,8 @@ 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.
 
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'preact', 'qwik', 'solid' ]}>
+
 ## 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:
@@ -230,6 +238,8 @@ Starting in Storybook 6.4, you can write your stories as JavaScript objects, red
 
 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.
 
+</IfRenderer>
+
 ## Storybook export vs. name handling
 
 Storybook handles named exports and the `name` option slightly differently. When should you use one vs. the other?
@@ -271,10 +281,11 @@ Consider the following story file:
     'react/my-component-story-with-nonstory.ts.mdx',
     'vue/my-component-story-with-nonstory.js.mdx',
     'vue/my-component-story-with-nonstory.ts.mdx',
-    'svelte/my-component-story-with-nonstory.js.mdx',
     'angular/my-component-story-with-nonstory.ts.mdx',
     'web-components/my-component-story-with-nonstory.js.mdx',
     'web-components/my-component-story-with-nonstory.ts.mdx',
+    'svelte/my-component-story-with-nonstory.js.mdx',
+    'svelte/my-component-story-with-nonstory.ts.mdx',
     'solid/my-component-story-with-nonstory.js.mdx',
     'solid/my-component-story-with-nonstory.ts.mdx',
   ]}
@@ -316,6 +327,8 @@ In CSF 2, the named exports are always functions that instantiate a component, a
     'web-components/csf-2-example-starter.ts.mdx',
     'solid/csf-2-example-starter.js.mdx',
     'solid/csf-2-example-starter.ts.mdx',
+    'svelte/csf-2-example-starter.js.mdx',
+    'svelte/csf-2-example-starter.ts.mdx',
   ]}
 />
 
@@ -336,6 +349,7 @@ Here's the CSF 3 equivalent:
     'web-components/csf-3-example-starter.js.mdx',
     'web-components/csf-3-example-starter.ts.mdx',
     'solid/csf-3-example-starter.ts.mdx',
+    'svelte/csf-3-example-starter.ts.mdx',
   ]}
 />
 
@@ -399,6 +413,8 @@ Let's start with a simple CSF 2 story function:
     'web-components/csf-2-example-story.ts.mdx',
     'solid/csf-2-example-story.js.mdx',
     'solid/csf-2-example-story.ts.mdx',
+    'svelte/csf-2-example-story.js.mdx',
+    'svelte/csf-2-example-story.ts.mdx',
   ]}
 />
 
@@ -421,11 +437,17 @@ Now, let's rewrite it as a story object in CSF 3 with an explicit `render` funct
     'web-components/csf-3-example-render.ts.mdx',
     'solid/csf-3-example-render.js.mdx',
     'solid/csf-3-example-render.ts.mdx',
+    'svelte/csf-3-example-render.js.mdx',
+    'svelte/csf-3-example-render.ts.mdx',
   ]}
 />
 
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'preact', 'qwik', 'solid' ]}>
+
 Learn more about [render functions](#custom-render-functions).
 
+</IfRenderer>
+
 <!-- prettier-ignore-end -->
 
 But in CSF 2, a lot of story functions are identical: take the component specified in the default export and spread args into it. What's interesting about these stories is not the function, but the args passed into the function.
@@ -442,8 +464,12 @@ CSF 3 provides default render functions for each renderer. If all you're doing i
 
 <!-- prettier-ignore-end -->
 
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'preact', 'qwik', 'solid' ]}>
+
 For more information, see the section on [custom render functions](#custom-render-functions).
 
+</IfRenderer>
+
 ### Generate titles automatically
 
 Finally, CSF 3 can automatically generate titles.

diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md
@@ -22,6 +22,7 @@ Afterward, you can use any asset in your stories:
     'vue/component-story-static-asset-with-import.3.ts.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.ts.mdx',
     'web-components/component-story-static-asset-with-import.js.mdx',
     'web-components/component-story-static-asset-with-import.ts.mdx',
     'solid/component-story-static-asset-with-import.js.mdx',
@@ -62,6 +63,7 @@ Here `../public` is your static directory. Now use it in a component or story li
     'vue/component-story-static-asset-without-import.ts.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.ts.mdx',
     'web-components/component-story-static-asset-without-import.js.mdx',
     'web-components/component-story-static-asset-without-import.ts.mdx',
     'solid/component-story-static-asset-without-import.js.mdx',
@@ -117,6 +119,7 @@ Upload your files to an online CDN and reference them. In this example, we’re
     'vue/component-story-static-asset-cdn.ts.mdx',
     'angular/component-story-static-asset-cdn.ts.mdx',
     'svelte/component-story-static-asset-cdn.js.mdx',
+    'svelte/component-story-static-asset-cdn.ts.mdx',
     'web-components/component-story-static-asset-cdn.js.mdx',
     'web-components/component-story-static-asset-cdn.ts.mdx',
     'solid/component-story-static-asset-cdn.js.mdx',

diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md
@@ -121,6 +121,10 @@ If you haven't used the CLI to setup the configuration, or if you want to define
 
 <!-- prettier-ignore-end -->
 
+<IfRenderer renderer={['angular', 'vue', 'web-components', 'ember', 'html', 'preact', 'qwik', 'solid' ]}>
+
+<!-- Uncomment once frameworks that support custom templates are enabled to prevent misinformation about the example -->
+
 ## Fully custom args
 
 Until now, we only used auto-generated controls based on the component we're writing stories for. If we are writing [complex stories](../writing-stories/stories-for-multiple-components.md), we may want to add controls for args that aren’t part of the component. For example, here's how you could use a `footer` arg to populate a child component:
@@ -155,6 +159,8 @@ By default, Storybook will add controls for all args that:
 
 Using `argTypes`, you can change the display and behavior of each control.
 
+</IfRenderer>
+
 ### Dealing with complex values
 
 When dealing with non-primitive values, you'll notice that you'll run into some limitations. The most obvious issue is that not every value can be represented as part of the `args` param in the URL, losing the ability to share and deeplink to such a state. Beyond that, complex values such as JSX cannot be synchronized between the manager (e.g., Controls addon) and the preview (your story).
@@ -171,6 +177,7 @@ One way to deal with this is to use primitive values (e.g., strings) as arg valu
     'vue/component-story-custom-args-complex.ts.mdx',
     'angular/component-story-custom-args-complex.ts.mdx',
     'svelte/component-story-custom-args-complex.js.mdx',
+    'svelte/component-story-custom-args-complex.ts.mdx',
     'web-components/component-story-custom-args-complex.js.mdx',
     'web-components/component-story-custom-args-complex.ts.mdx',
     'solid/component-story-custom-args-complex.js.mdx',

diff --git a/docs/essentials/toolbars-and-globals.md b/docs/essentials/toolbars-and-globals.md
@@ -170,6 +170,7 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl
     'vue/my-component-story-use-globaltype.ts.mdx',
     'angular/my-component-story-use-globaltype.ts.mdx',
     'svelte/my-component-story-use-globaltype.js.mdx',
+    'svelte/my-component-story-use-globaltype.ts.mdx',
     'web-components/my-component-story-use-globaltype.js.mdx',
     'web-components/my-component-story-use-globaltype.ts.mdx',
     'solid/my-component-story-use-globaltype.js.mdx',
@@ -193,6 +194,7 @@ In Storybook 6.0, if you set the global option `passArgsFirst: false` for backwa
     'vue/my-component-story-use-globaltype-backwards-compat.js.mdx',
     'angular/my-component-story-use-globaltype-backwards-compat.ts.mdx',
     'svelte/my-component-story-use-globaltype-backwards-compat.js.mdx',
+    'svelte/my-component-story-use-globaltype-backwards-compat.ts.mdx',
     'web-components/my-component-story-use-globaltype-backwards-compat.js.mdx',
     'web-components/my-component-story-use-globaltype-backwards-compat.ts.mdx',
     'solid/my-component-story-use-globaltype-backwards-compat.js.mdx',

diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md
@@ -132,6 +132,7 @@ Update your story through [parameters](../writing-stories/parameters.md) to incl
     'web-components/my-component-story-configure-viewports.js.mdx',
     'web-components/my-component-story-configure-viewports.ts.mdx',
     'svelte/my-component-story-configure-viewports.js.mdx',
+    'svelte/my-component-story-configure-viewports.ts.mdx',
     'solid/my-component-story-configure-viewports.js.mdx',
     'solid/my-component-story-configure-viewports.ts.mdx',
   ]}

diff --git a/docs/sharing/design-integrations.md b/docs/sharing/design-integrations.md
@@ -110,6 +110,7 @@ In Storybook, add a new [parameter](../writing-stories/parameters.md) named `des
     'vue/component-story-figma-integration.ts.mdx',
     'angular/component-story-figma-integration.ts.mdx',
     'svelte/component-story-figma-integration.js.mdx',
+    'svelte/component-story-figma-integration.ts.mdx',
     'web-components/component-story-figma-integration.js.mdx',
     'web-components/component-story-figma-integration.ts.mdx',
     'solid/component-story-figma-integration.js.mdx',

diff --git a/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.js.mdx b/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.js.mdx
@@ -23,7 +23,5 @@
   setClient(mockedClient);
 </script>
 
-<div>
-  <slot />
-</div>
+<slot />
 ```
diff --git a/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx b/docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx
@@ -0,0 +1,27 @@
+```html
+<!-- MockApolloWrapperClient.svelte -->
+
+<script lang="ts">
+  import { ApolloClient, InMemoryCache } from '@apollo/client';
+
+  import { setClient } from 'svelte-apollo';
+
+  const mockedClient = new ApolloClient({
+    uri: 'https://your-graphql-endpoint',
+    cache: new InMemoryCache(),
+    defaultOptions: {
+      watchQuery: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+      query: {
+        fetchPolicy: 'no-cache',
+        errorPolicy: 'all',
+      },
+    },
+  });
+  setClient(mockedClient);
+</script>
+
+<slot />
+```
diff --git a/docs/snippets/svelte/badge-story.mdx.mdx b/docs/snippets/svelte/badge-story.mdx.mdx
diff --git a/docs/snippets/svelte/button-group-story.js.mdx b/docs/snippets/svelte/button-group-story.js.mdx
@@ -10,16 +10,7 @@ export default {
   component: ButtonGroup,
 };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
 export const Pair = {
-  render: (args) => ({
-    Component: ButtonGroup,
-    props: args,
-  }),
   args: {
     buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
     orientation: 'horizontal',

diff --git a/docs/snippets/svelte/button-group-story.ts-4-9.mdx b/docs/snippets/svelte/button-group-story.ts-4-9.mdx
@@ -0,0 +1,24 @@
+```ts
+// ButtonGroup.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import ButtonGroup from './ButtonGroup.svelte';
+
+//👇 Imports the Button stories
+import * as ButtonStories from './Button.stories';
+
+const meta = {
+  component: ButtonGroup,
+} satisfies Meta<typeof ButtonGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Pair: Story = {
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
+};
+```