Clean up Svelte snippets + Create Svelte/Typescript snippets

docs/addons/addons-api.md

@@ -122,6 +122,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',
   ]}

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/introduction.md#def
     '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',
@@ -160,6 +163,8 @@ Or even more simply:
     'angular/button-story-click-handler-simplificated.ts.mdx',
     'vue/button-story-click-handler-simplificated.js.mdx',
     'vue/button-story-click-handler-simplificated.ts.mdx',
+    'svelte/button-story-click-handler-simplificated.js.mdx',
+    'svelte/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',
     'solid/button-story-click-handler-simplificated.js.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',
   ]}
@@ -272,6 +278,7 @@ Consider the following story file:
     'vue/my-component-story-with-nonstory.js.mdx',
     'vue/my-component-story-with-nonstory.ts.mdx',
     'svelte/my-component-story-with-nonstory.js.mdx',
+    'svelte/my-component-story-with-nonstory.ts.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',

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

docs/essentials/controls.md

@@ -171,6 +171,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',

docs/essentials/toolbars-and-globals.md

@@ -113,6 +113,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',
@@ -136,6 +137,7 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl
     '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',

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

docs/sharing/design-integrations.md

@@ -108,6 +108,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',

docs/snippets/svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx

@@ -0,0 +1,29 @@
+```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>
+
+<div>
+  <slot />
+</div>
+```

docs/snippets/svelte/button-group-story.js.mdx

@@ -1,7 +1,7 @@
 ```js
 // ButtonGroup.stories.js
 
-import ButtonGroup from '../ButtonGroup.svelte';
+import ButtonGroup from './ButtonGroup.svelte';
 
 //👇 Imports the Button stories
 import * as ButtonStories from './Button.stories';
@@ -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/svelte/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',

docs/snippets/svelte/button-group-story.ts.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: Meta<typeof ButtonGroup> = {
+  component: ButtonGroup,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Pair: Story = {
+  args: {
+    buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
+    orientation: 'horizontal',
+  },
+};
+```

docs/snippets/svelte/button-story-auto-docs.js.mdx

@@ -13,21 +13,13 @@ export default {
 };
 
 export const Primary = {
-  render: (args) => ({
-    Component: Button,
-    props: args,
-  }),
   args: {
     primary: true,
     label: 'Button',
   },
 };
 
 export const Secondary = {
-  render: (args) => ({
-    Component: Button,
-    props: args,
-  }),
   args: {
     ...Primary.args,
     primary: false,

docs/snippets/svelte/button-story-auto-docs.ts.mdx

@@ -0,0 +1,33 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  //👇 Enables auto-generated documentation for the component story
+  tags: ['autodocs'],
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    ...Primary.args,
+    primary: false,
+  },
+};
+```