;
+
+// This is an accessible story
+export const Accessible: Story = {
+ args: {
+ primary: false,
+ label: 'Button',
+ },
+};
+
+// This is not
+export const Inaccessible: Story = {
+ args: {
+ ...Accessible.args,
+ backgroundColor: 'red',
+ },
+};
+```
diff --git a/docs/snippets/svelte/component-test-with-testing-library.ts.mdx b/docs/snippets/svelte/component-test-with-testing-library.ts.mdx
new file mode 100644
index 000000000000..07516b1557b2
--- /dev/null
+++ b/docs/snippets/svelte/component-test-with-testing-library.ts.mdx
@@ -0,0 +1,20 @@
+```ts
+// Form.test.ts
+
+import { render, fireEvent } from '@testing-library/svelte';
+
+import LoginForm from './LoginForm.svelte';
+
+import { InvalidForm } from './LoginForm.stories'; //π Our stories imported here.
+
+it('Checks if the form is valid', async () => {
+ const { getByTestId, getByText } = render(LoginForm, {
+ props: InvalidForm.args,
+ });
+
+ await fireEvent.click(getByText('Submit'));
+
+ const isFormValid = getByTestId('invalid-form');
+ expect(isFormValid).toBeInTheDocument();
+});
+```
diff --git a/docs/snippets/svelte/document-screen-fetch.js.mdx b/docs/snippets/svelte/document-screen-fetch.js.mdx
index b50d0bc021bd..e36bec8be30b 100644
--- a/docs/snippets/svelte/document-screen-fetch.js.mdx
+++ b/docs/snippets/svelte/document-screen-fetch.js.mdx
@@ -7,6 +7,7 @@
import PageLayout from './PageLayout.svelte';
import DocumentHeader from './DocumentHeader.svelte';
import DocumentList from './DocumentList.svelte';
+
export let user = {};
export let document = {};
export let subdocuments = [];
@@ -35,7 +36,7 @@
{#if status === "error"}
There was an error fetching the data!
-{/if} {#if status === "loading"}
+{:else if status === "loading"}
Loading...
{:else}
diff --git a/docs/snippets/svelte/document-screen-fetch.ts.mdx b/docs/snippets/svelte/document-screen-fetch.ts.mdx
new file mode 100644
index 000000000000..a64fa476ccad
--- /dev/null
+++ b/docs/snippets/svelte/document-screen-fetch.ts.mdx
@@ -0,0 +1,47 @@
+```html
+
+
+
+
+{#if status === "error"}
+There was an error fetching the data!
+{:else if status === "loading"}
+Loading...
+{:else}
+
+
+
+
+{/if}
+```
diff --git a/docs/snippets/svelte/document-screen-with-grapqhl.ts.mdx b/docs/snippets/svelte/document-screen-with-grapqhl.ts.mdx
new file mode 100644
index 000000000000..df975e9da4b3
--- /dev/null
+++ b/docs/snippets/svelte/document-screen-with-grapqhl.ts.mdx
@@ -0,0 +1,46 @@
+```html
+
+
+
+
+{#if $infoResult.loading}
+Loading...
+{:else if $infoResult.error}
+There was an error fetching the data!
+{:else}
+
+
+
+
+{/if}
+```
diff --git a/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
index 7f44a194d27d..709555ebf4c2 100644
--- a/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
+++ b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.js.mdx
@@ -8,7 +8,7 @@ import MockApolloWrapperClient from './MockApolloWrapperClient.svelte';
export default {
component: DocumentScreen,
- decorators: [() => MockGraphqlProvider],
+ decorators: [() => MockApolloWrapperClient],
};
//πThe mocked data that will be used in the story
@@ -37,9 +37,6 @@ const TestData = {
};
export const MockedSuccess = {
- render: () => ({
- Component: DocumentScreen,
- }),
parameters: {
msw: [
graphql.query('AllInfoQuery', (req, res, ctx) => {
@@ -50,9 +47,6 @@ export const MockedSuccess = {
};
export const MockedError = {
- render: () => ({
- Component: DocumentScreen,
- }),
parameters: {
msw: [
graphql.query('AllInfoQuery', (req, res, ctx) => {
diff --git a/docs/snippets/svelte/documentscreen-story-msw-graphql-query.ts.mdx b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.ts.mdx
new file mode 100644
index 000000000000..c61204cfd1ab
--- /dev/null
+++ b/docs/snippets/svelte/documentscreen-story-msw-graphql-query.ts.mdx
@@ -0,0 +1,70 @@
+```ts
+// YourPage.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { graphql } from 'msw';
+
+import DocumentScreen from './YourPage.svelte';
+import MockApolloWrapperClient from './MockApolloWrapperClient.svelte';
+
+const meta: Meta = {
+ component: DocumentScreen,
+ decorators: [() => MockApolloWrapperClient],
+};
+
+export default meta;
+type Story = StoryObj;
+
+//πThe mocked data that will be used in the story
+const TestData = {
+ user: {
+ userID: 1,
+ name: 'Someone',
+ },
+ document: {
+ id: 1,
+ userID: 1,
+ title: 'Something',
+ brief: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+ status: 'approved',
+ },
+ subdocuments: [
+ {
+ id: 1,
+ userID: 1,
+ title: 'Something',
+ content:
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
+ status: 'approved',
+ },
+ ],
+};
+
+export const MockedSuccess: Story = {
+ parameters: {
+ msw: [
+ graphql.query('AllInfoQuery', (req, res, ctx) => {
+ return res(ctx.data(TestData));
+ }),
+ ],
+ },
+};
+
+export const MockedError: Story = {
+ parameters: {
+ msw: [
+ graphql.query('AllInfoQuery', (req, res, ctx) => {
+ return res(
+ ctx.delay(800),
+ ctx.errors([
+ {
+ message: 'Access denied',
+ },
+ ])
+ );
+ }),
+ ],
+ },
+};
+```
diff --git a/docs/snippets/svelte/histogram-story.mdx.mdx b/docs/snippets/svelte/histogram-story.mdx.mdx
deleted file mode 100644
index 06f1787be509..000000000000
--- a/docs/snippets/svelte/histogram-story.mdx.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-```md
-
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import Histogram from './Histogram.svelte';
-
-
-
-
-
-
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/loader-story.js.mdx b/docs/snippets/svelte/loader-story.js.mdx
index 474e6c781c8d..b4adf6968b2a 100644
--- a/docs/snippets/svelte/loader-story.js.mdx
+++ b/docs/snippets/svelte/loader-story.js.mdx
@@ -5,23 +5,23 @@ import fetch from 'node-fetch';
import TodoItem from './TodoItem.svelte';
-export default {
- component: TodoItem,
-};
-
/*
*π 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 Primary = {
+export default {
+ component: TodoItem,
render: (args, { loaded: { todo } }) => ({
Component: TodoItem,
props: {
...args,
- todo,
+ ...todo,
},
}),
+};
+
+export const Primary = {
loaders: [
async () => ({
todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
diff --git a/docs/snippets/svelte/loader-story.mdx.mdx b/docs/snippets/svelte/loader-story.mdx.mdx
deleted file mode 100644
index 7ded8fc8de92..000000000000
--- a/docs/snippets/svelte/loader-story.mdx.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
-```md
-
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import TodoItem from './TodoItem.svelte';
-
-import fetch from 'node-fetch';
-
-
-
-
-
- ({
- todo: await (
- await fetch('https://jsonplaceholder.typicode.com/todos/1')
- ).json(),
- }),
- ]}
- render={(args, { loaded: { todo } }) => ({
- Component: TodoItem,
- props: {
- ...args,
- todo,
- },
- })} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/loader-story.ts.mdx b/docs/snippets/svelte/loader-story.ts.mdx
new file mode 100644
index 000000000000..5bea2892ef0c
--- /dev/null
+++ b/docs/snippets/svelte/loader-story.ts.mdx
@@ -0,0 +1,36 @@
+```ts
+// TodoItem.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import fetch from 'node-fetch';
+
+import TodoItem from './TodoItem.svelte';
+
+/*
+ *π 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.
+ */
+const meta: Meta = {
+ component: TodoItem,
+ render: (args, { loaded: { todo } }) => ({
+ Component: TodoItem,
+ props: {
+ ...args,
+ ...todo,
+ },
+ }),
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Primary: Story = {
+ loaders: [
+ async () => ({
+ todo: await (await fetch('https://jsonplaceholder.typicode.com/todos/1')).json(),
+ }),
+ ],
+};
+```
diff --git a/docs/snippets/svelte/login-form-with-play-function.js.mdx b/docs/snippets/svelte/login-form-with-play-function.js.mdx
index c4b1565ffaf4..b21ebab5507c 100644
--- a/docs/snippets/svelte/login-form-with-play-function.js.mdx
+++ b/docs/snippets/svelte/login-form-with-play-function.js.mdx
@@ -11,27 +11,13 @@ export default {
component: LoginForm,
};
-/*
- *π 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 EmptyForm = {
- render: (args) => ({
- Component: LoginForm,
- props: args,
- }),
-};
+export const EmptyForm = {};
/*
* See https://storybook.js.org/docs/svelte/writing-stories/play-function#working-with-the-canvas
* to learn more about using the canvasElement to query the DOM
*/
export const FilledForm = {
- render: (args) => ({
- Component: LoginForm,
- props: args,
- }),
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
diff --git a/docs/snippets/svelte/login-form-with-play-function.mdx.mdx b/docs/snippets/svelte/login-form-with-play-function.mdx.mdx
deleted file mode 100644
index 920ff153f5bc..000000000000
--- a/docs/snippets/svelte/login-form-with-play-function.mdx.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
-```md
-
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import { within, userEvent } from '@storybook/testing-library';
-
-import { expect } from '@storybook/jest';
-
-import LoginForm from './LoginForm.svelte';
-
-
-
-
-
-
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/login-form-with-play-function.ts.mdx b/docs/snippets/svelte/login-form-with-play-function.ts.mdx
new file mode 100644
index 000000000000..46a323420dfd
--- /dev/null
+++ b/docs/snippets/svelte/login-form-with-play-function.ts.mdx
@@ -0,0 +1,45 @@
+```ts
+// LoginForm.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { userEvent, within } from '@storybook/testing-library';
+
+import { expect } from '@storybook/jest';
+
+import LoginForm from './LoginForm.svelte';
+
+const meta: Meta = {
+ component: LoginForm,
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const EmptyForm: Story = {};
+
+/*
+ * See https://storybook.js.org/docs/svelte/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FilledForm: Story = {
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+
+ // π Simulate interactions with the component
+ await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
+
+ await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
+
+ // See https://storybook.js.org/docs/svelte/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+ await userEvent.click(canvas.getByRole('button'));
+
+ // π Assert DOM structure
+ await expect(
+ canvas.getByText(
+ 'Everything is perfect. Your account is ready and we should probably get you started!'
+ )
+ ).toBeInTheDocument();
+ },
+};
+```
diff --git a/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx b/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx
deleted file mode 100644
index 763fbc2057fe..000000000000
--- a/docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx
+++ /dev/null
@@ -1,48 +0,0 @@
-```md
-
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import Badge from './Badge.svelte';
-
-
-
-
-
-
-```
diff --git a/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx b/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx
index baaf11c2767c..6d968632b7db 100644
--- a/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx
+++ b/docs/snippets/svelte/my-component-story-basic-and-props.js.mdx
@@ -7,11 +7,7 @@ export default {
component: MyComponent,
};
-export const Basic = {
- render: () => ({
- Component: MyComponent,
- }),
-};
+export const Basic = {};
export const WithProp = {
render: () => ({
diff --git a/docs/snippets/svelte/my-component-story-basic-and-props.ts.mdx b/docs/snippets/svelte/my-component-story-basic-and-props.ts.mdx
new file mode 100644
index 000000000000..aef4cc28b8b7
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-basic-and-props.ts.mdx
@@ -0,0 +1,25 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta = {
+ component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Basic: Story = {};
+
+export const WithProp: Story = {
+ render: () => ({
+ Component: MyComponent,
+ props: {
+ prop: 'value',
+ },
+ }),
+};
+```
diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx
index 075779bbb1bb..856aed93e83b 100644
--- a/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx
+++ b/docs/snippets/svelte/my-component-story-configure-viewports.js.mdx
@@ -19,9 +19,6 @@ export default {
};
export const MyStory = {
- render: () => ({
- Component: MyComponent,
- }),
parameters: {
viewport: {
defaultViewport: 'iphonex',
diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx
deleted file mode 100644
index 076245d67a68..000000000000
--- a/docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx
+++ /dev/null
@@ -1,37 +0,0 @@
-```md
-
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-import MyComponent from './MyComponent.svelte';
-
-
-
-
-
- ({
- Component: MyComponent,
- props: {},
- })} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-story-configure-viewports.ts.mdx b/docs/snippets/svelte/my-component-story-configure-viewports.ts.mdx
new file mode 100644
index 000000000000..d4826268d7cb
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-configure-viewports.ts.mdx
@@ -0,0 +1,33 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta = {
+ component: MyComponent,
+ parameters: {
+ //π The viewports object from the Essentials addon
+ viewport: {
+ //π The viewports you want to use
+ viewports: INITIAL_VIEWPORTS,
+ //π Your own default viewport
+ defaultViewport: 'iphone6',
+ },
+ },
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const MyStory: Story = {
+ parameters: {
+ viewport: {
+ defaultViewport: 'iphonex',
+ },
+ },
+};
+```
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx b/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx
index 8ee73b34422d..c25aa876eb7d 100644
--- a/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx
+++ b/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.js.mdx
@@ -4,7 +4,7 @@
export const StoryWithLocale = ({ globals: { locale } }) => {
const caption = getCaptionForLocale(locale);
return {
- component: MyComponent,
+ Component: MyComponent,
props: {
locale: caption,
},
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.ts.mdx b/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.ts.mdx
new file mode 100644
index 000000000000..f48fa95463e0
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-use-globaltype-backwards-compat.ts.mdx
@@ -0,0 +1,13 @@
+```ts
+// MyComponent.stories.ts
+
+export const StoryWithLocale: Story = ({ globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ return {
+ Component: MyComponent,
+ props: {
+ locale: caption,
+ },
+ };
+};
+```
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
index 176e9cae2381..8542b37240a7 100644
--- a/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
+++ b/docs/snippets/svelte/my-component-story-use-globaltype.js.mdx
@@ -26,7 +26,7 @@ export const StoryWithLocale = {
render: (args, { globals: { locale } }) => {
const caption = getCaptionForLocale(locale);
return {
- component: MyComponent,
+ Component: MyComponent,
props: {
locale: caption,
},
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
deleted file mode 100644
index fdd3a189307e..000000000000
--- a/docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
-```md
-
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import MyComponent from './MyComponent.svelte';
-
-
-
-export const getCaptionForLocale = (locale) => {
- switch(locale) {
- case 'es': return 'Hola!';
- case 'fr': return 'Bonjour!';
- case 'kr': return 'μλ
νμΈμ!';
- case 'zh': return 'δ½ ε₯½!';
- default:
- return 'Hello!';
- }
-};
-
-
-
- {
- const caption = getCaptionForLocale(locale);
- return {
- component: MyComponent,
- props: {
- locale: caption,
- },
- };
- }} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/my-component-story-use-globaltype.ts.mdx b/docs/snippets/svelte/my-component-story-use-globaltype.ts.mdx
new file mode 100644
index 000000000000..9163e3cd3ed6
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-use-globaltype.ts.mdx
@@ -0,0 +1,41 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta = {
+ component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj;
+
+const getCaptionForLocale = (locale) => {
+ switch (locale) {
+ case 'es':
+ return 'Hola!';
+ case 'fr':
+ return 'Bonjour!';
+ case 'kr':
+ return 'μλ
νμΈμ!';
+ case 'zh':
+ return 'δ½ ε₯½!';
+ default:
+ return 'Hello!';
+ }
+};
+
+export const StoryWithLocale: Story = {
+ render: (args, { globals: { locale } }) => {
+ const caption = getCaptionForLocale(locale);
+ return {
+ Component: MyComponent,
+ props: {
+ locale: caption,
+ },
+ };
+ },
+};
+```
diff --git a/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx b/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx
index a1d49428d9fa..0ca9319f8737 100644
--- a/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx
+++ b/docs/snippets/svelte/my-component-story-with-nonstory.js.mdx
@@ -15,20 +15,12 @@ export const simpleData = { foo: 1, bar: 'baz' };
export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
export const SimpleStory = {
- render: (args) => ({
- Component: MyComponent,
- props: args,
- }),
args: {
data: simpleData,
},
};
export const ComplexStory = {
- render: (args) => ({
- Component: MyComponent,
- props: args,
- }),
args: {
data: complexData,
},
diff --git a/docs/snippets/svelte/my-component-story-with-nonstory.ts.mdx b/docs/snippets/svelte/my-component-story-with-nonstory.ts.mdx
new file mode 100644
index 000000000000..97c183896eb9
--- /dev/null
+++ b/docs/snippets/svelte/my-component-story-with-nonstory.ts.mdx
@@ -0,0 +1,33 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+import someData from './data.json';
+
+const meta: Meta = {
+ component: MyComponent,
+ includeStories: ['SimpleStory', 'ComplexStory'], // π Storybook loads these stories
+ excludeStories: /.*Data$/, // π Storybook ignores anything that contains Data
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const simpleData = { foo: 1, bar: 'baz' };
+export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } };
+
+export const SimpleStory: Story = {
+ args: {
+ data: simpleData,
+ },
+};
+
+export const ComplexStory: Story = {
+ args: {
+ data: complexData,
+ },
+};
+```
diff --git a/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx b/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx
deleted file mode 100644
index b828c96c364b..000000000000
--- a/docs/snippets/svelte/my-component-with-env-variables.mdx.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
-```md
-
-
-import { Canvas, Meta, Story } from '@storybook/addon-docs';
-
-import MyComponent from './MyComponent.svelte';
-
-
-
-
-
-
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/page-story.js.mdx b/docs/snippets/svelte/page-story.js.mdx
index d55dc030dc0d..ec72dc32448c 100644
--- a/docs/snippets/svelte/page-story.js.mdx
+++ b/docs/snippets/svelte/page-story.js.mdx
@@ -10,16 +10,7 @@ export default {
component: Page,
};
-/*
- *π 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 LoggedIn = {
- render: (args) => ({
- Component: Page,
- props: args,
- }),
args: {
...HeaderStories.LoggedIn.args,
},
diff --git a/docs/snippets/svelte/page-story.ts.mdx b/docs/snippets/svelte/page-story.ts.mdx
new file mode 100644
index 000000000000..897a7f6db039
--- /dev/null
+++ b/docs/snippets/svelte/page-story.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// Page.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Page from './Page.svelte';
+
+//π Imports all Header stories
+import * as HeaderStories from './Header.stories';
+
+const meta: Meta = {
+ component: Page,
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const LoggedIn: Story = {
+ args: {
+ ...HeaderStories.LoggedIn.args,
+ },
+};
+```
diff --git a/docs/snippets/svelte/simple-page-implementation.ts.mdx b/docs/snippets/svelte/simple-page-implementation.ts.mdx
new file mode 100644
index 000000000000..95fb6c5b988a
--- /dev/null
+++ b/docs/snippets/svelte/simple-page-implementation.ts.mdx
@@ -0,0 +1,20 @@
+```html
+
+
+
+
+
+```
diff --git a/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx b/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx
index 448436303a53..7ddea5b9cef4 100644
--- a/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx
+++ b/docs/snippets/svelte/storybook-addon-a11y-disable.js.mdx
@@ -8,10 +8,6 @@ export default {
};
export const NonA11yStory = {
- render: (args) => ({
- Component: MyComponent,
- props: args,
- }),
parameters: {
a11y: {
// This option disables all a11y checks on this story
diff --git a/docs/snippets/svelte/storybook-addon-a11y-disable.mdx.mdx b/docs/snippets/svelte/storybook-addon-a11y-disable.mdx.mdx
deleted file mode 100644
index ed29878a5432..000000000000
--- a/docs/snippets/svelte/storybook-addon-a11y-disable.mdx.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
-```md
-
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import MyComponent from './MyComponent.svelte';
-
-
-
-
-
- ({
- Component: MyComponent,
- props: {},
- })} />
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/storybook-addon-a11y-disable.ts.mdx b/docs/snippets/svelte/storybook-addon-a11y-disable.ts.mdx
new file mode 100644
index 000000000000..d9b1abb6a04e
--- /dev/null
+++ b/docs/snippets/svelte/storybook-addon-a11y-disable.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// MyComponent.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MyComponent from './MyComponent.svelte';
+
+const meta: Meta = {
+ component: MyComponent,
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const NonA11yStory: Story = {
+ parameters: {
+ a11y: {
+ // This option disables all a11y checks on this story
+ disable: true,
+ },
+ },
+};
+```
diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx
index 65635998e178..d26c9049ae24 100644
--- a/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx
+++ b/docs/snippets/svelte/storybook-addon-a11y-story-config.js.mdx
@@ -8,10 +8,6 @@ export default {
};
export const ExampleStory = {
- render: (args) => ({
- Component: MyComponent,
- props: args,
- }),
parameters: {
a11y: {
element: '#storybook-root',
diff --git a/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.ts.mdx
similarity index 54%
rename from docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx
rename to docs/snippets/svelte/storybook-addon-a11y-story-config.ts.mdx
index 2df1cfa885a9..a2516ffa6464 100644
--- a/docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx
+++ b/docs/snippets/svelte/storybook-addon-a11y-story-config.ts.mdx
@@ -1,23 +1,19 @@
-```md
-
+```ts
+// MyComponent.stories.ts
-import { Meta, Story } from '@storybook/addon-docs';
+import type { Meta, StoryObj } from '@storybook/svelte';
import MyComponent from './MyComponent.svelte';
-
+const meta: Meta = {
+ component: MyComponent,
+};
-
+export default meta;
+type Story = StoryObj;
- ({
- Component: MyComponent,
- props: {},
- })} />
-```
\ No newline at end of file
+ },
+};
+```
diff --git a/docs/snippets/svelte/storybook-preview-global-decorator.js.mdx b/docs/snippets/svelte/storybook-preview-global-decorator.js.mdx
index 7951b0a3efd9..33fdc0a5b32f 100644
--- a/docs/snippets/svelte/storybook-preview-global-decorator.js.mdx
+++ b/docs/snippets/svelte/storybook-preview-global-decorator.js.mdx
@@ -3,5 +3,7 @@
import MarginDecorator from './MarginDecorator.svelte';
-export default { decorators: [() => MarginDecorator] };
+export default {
+ decorators: [() => MarginDecorator],
+};
```
diff --git a/docs/snippets/svelte/storybook-preview-global-decorator.ts.mdx b/docs/snippets/svelte/storybook-preview-global-decorator.ts.mdx
new file mode 100644
index 000000000000..9e6cf557f9c3
--- /dev/null
+++ b/docs/snippets/svelte/storybook-preview-global-decorator.ts.mdx
@@ -0,0 +1,13 @@
+```ts
+// .storybook/preview.ts
+
+import type { Preview } from '@storybook/svelte';
+
+import MarginDecorator from './MarginDecorator.svelte';
+
+const preview: Preview = {
+ decorators: [() => MarginDecorator],
+};
+
+export default preview;
+```
diff --git a/docs/snippets/svelte/your-component-with-decorator.mdx.mdx b/docs/snippets/svelte/your-component-with-decorator.mdx.mdx
deleted file mode 100644
index 8cc0313e5d30..000000000000
--- a/docs/snippets/svelte/your-component-with-decorator.mdx.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-```md
-
-
-import { Meta } from '@storybook/addon-docs';
-
-import YourComponent from './YourComponent.svelte';
-import MarginDecorator from './MarginDecorator.svelte';
-
- MarginDecorator]}/>
-```
\ No newline at end of file
diff --git a/docs/snippets/svelte/your-component-with-decorator.ts.mdx b/docs/snippets/svelte/your-component-with-decorator.ts.mdx
new file mode 100644
index 000000000000..8919e9008aa5
--- /dev/null
+++ b/docs/snippets/svelte/your-component-with-decorator.ts.mdx
@@ -0,0 +1,33 @@
+```ts
+// YourComponent.stories.ts
+
+import type { Meta } from '@storybook/svelte';
+
+import YourComponent from './YourComponent.svelte';
+
+import MarginDecorator from './MarginDecorator.svelte';
+
+const meta: Meta = {
+ component: YourComponent,
+ decorators: [() => MarginDecorator],
+};
+
+export default meta;
+
+// Your templates and stories here.
+// Don't forget to use the component you're testing and not the MarginDecorator component
+```
+
+```html
+
+
+
+
+
+
+
+```
diff --git a/docs/snippets/svelte/your-component.mdx.mdx b/docs/snippets/svelte/your-component.mdx.mdx
deleted file mode 100644
index 8f63ceffc626..000000000000
--- a/docs/snippets/svelte/your-component.mdx.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
-```md
-
-
-import { Meta, Story } from '@storybook/addon-docs';
-
-import YourComponent from './YourComponent.svelte';
-
-
-
-
-
-
- ({
- component: YourComponent,
- props: args,
- })} />
-```
\ No newline at end of file
diff --git a/docs/writing-docs/autodocs.md b/docs/writing-docs/autodocs.md
index 45f886d0c770..1b6098fb2aa1 100644
--- a/docs/writing-docs/autodocs.md
+++ b/docs/writing-docs/autodocs.md
@@ -20,6 +20,7 @@ To enable auto-generated documentation for your stories, you'll need to add the
'vue/button-story-auto-docs.ts.mdx',
'angular/button-story-auto-docs.ts.mdx',
'svelte/button-story-auto-docs.js.mdx',
+ 'svelte/button-story-auto-docs.ts.mdx',
'web-components/button-story-auto-docs.js.mdx',
'web-components/button-story-auto-docs.ts.mdx',
]}
diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md
index 4d3a53652ff7..6cbeefad074d 100644
--- a/docs/writing-stories/args.md
+++ b/docs/writing-stories/args.md
@@ -32,6 +32,7 @@ To define the args of a single story, use the `args` CSF story key:
'web-components/button-story-with-args.js.mdx',
'web-components/button-story-with-args.ts.mdx',
'svelte/button-story-with-args.js.mdx',
+ 'svelte/button-story-with-args.ts.mdx',
'html/button-story-with-args.ts.mdx',
'html/button-story-with-args.js.mdx',
'solid/button-story-with-args.js.mdx',
@@ -80,6 +81,7 @@ You can also define args at the component level; they will apply to all the comp
'web-components/button-story-component-args-primary.js.mdx',
'web-components/button-story-component-args-primary.ts.mdx',
'svelte/button-story-component-args-primary.js.mdx',
+ 'svelte/button-story-component-args-primary.ts.mdx',
'solid/button-story-component-args-primary.js.mdx',
'solid/button-story-component-args-primary.ts.mdx',
]}
@@ -146,6 +148,7 @@ Args are useful when writing stories for composite components that are assembled
'web-components/page-story.js.mdx',
'web-components/page-story.ts.mdx',
'svelte/page-story.js.mdx',
+ 'svelte/page-story.ts.mdx',
'solid/page-story.js.mdx',
'solid/page-story.ts.mdx',
]}
diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md
index 4307a31020f4..14701c2e44bd 100644
--- a/docs/writing-stories/build-pages-with-storybook.md
+++ b/docs/writing-stories/build-pages-with-storybook.md
@@ -44,6 +44,7 @@ When you are building screens in this way, it is typical that the inputs of a co
'web-components/simple-page-implementation.js.mdx',
'web-components/simple-page-implementation.ts.mdx',
'svelte/simple-page-implementation.js.mdx',
+ 'svelte/simple-page-implementation.ts.mdx',
'solid/simple-page-implementation.js.mdx',
'solid/simple-page-implementation.ts.mdx',
]}
@@ -145,6 +146,7 @@ If you're working with pure presentational screens, adding stories through [args
'vue/document-screen-fetch.3.ts.mdx',
'angular/document-screen-fetch.ts.mdx',
'svelte/document-screen-fetch.js.mdx',
+ 'svelte/document-screen-fetch.ts.mdx',
'web-components/document-screen-fetch.js.mdx',
'solid/document-screen-fetch.js.mdx',
]}
@@ -190,6 +192,7 @@ In addition to mocking RESTful requests, the other noteworthy feature of the [MS
'vue/document-screen-with-graphql.3.ts.mdx',
'angular/document-screen-with-graphql.ts.mdx',
'svelte/document-screen-with-grapqhl.js.mdx',
+ 'svelte/document-screen-with-grapqhl.ts.mdx',
]}
/>
@@ -209,7 +212,9 @@ To test your screen with the GraphQL mocked data, you could write the following
'angular/apollo-module.mock-apollo-module.ts.mdx',
'angular/documentscreen-story-msw-graphql-query.ts.mdx',
'svelte/documentscreen-story-msw-graphql-query.js.mdx',
+ 'svelte/documentscreen-story-msw-graphql-query.ts.mdx',
'svelte/apollo-wrapper-component.with-mock-implementation.js.mdx',
+ 'svelte/apollo-wrapper-component.with-mock-implementation.ts.mdx',
]}
usesCsf3
csf2Path="writing-stories/build-pages-with-storybook#snippet-documentscreen-story-msw-graphql-query"
diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md
index d8637bf72fef..355c1ead090e 100644
--- a/docs/writing-stories/decorators.md
+++ b/docs/writing-stories/decorators.md
@@ -26,6 +26,7 @@ Some components require a βharnessβ to render in a useful way. For instance,
'web-components/your-component-with-decorator.js.mdx',
'web-components/your-component-with-decorator.ts.mdx',
'svelte/your-component-with-decorator.js.mdx',
+ 'svelte/your-component-with-decorator.ts.mdx',
'solid/your-component-with-decorator.js.mdx',
'solid/your-component-with-decorator.ts.mdx'
]}
@@ -101,6 +102,7 @@ To define a decorator for a single story, use the `decorators` key on a named ex
'web-components/button-story-decorator.js.mdx',
'web-components/button-story-decorator.ts.mdx',
'svelte/button-story-decorator.js.mdx',
+ 'svelte/button-story-decorator.ts.mdx',
'solid/button-story-decorator.js.mdx',
'solid/button-story-decorator.ts.mdx',
]}
@@ -129,6 +131,7 @@ To define a decorator for all stories of a component, use the `decorators` key o
'web-components/button-story-component-decorator.js.mdx',
'web-components/button-story-component-decorator.ts.mdx',
'svelte/button-story-component-decorator.js.mdx',
+ 'svelte/button-story-component-decorator.ts.mdx',
'solid/button-story-component-decorator.js.mdx',
'solid/button-story-component-decorator.ts.mdx',
]}
@@ -151,6 +154,7 @@ We can also set a decorator for **all stories** via the `decorators` export of y
'angular/storybook-preview-global-decorator.ts.mdx',
'web-components/storybook-preview-global-decorator.js.mdx',
'svelte/storybook-preview-global-decorator.js.mdx',
+ 'svelte/storybook-preview-global-decorator.ts.mdx',
'solid/storybook-preview-global-decorator.js.mdx',
'solid/storybook-preview-global-decorator.ts.mdx',
]}
diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md
index 48117452703e..feb9ca7e5506 100644
--- a/docs/writing-stories/introduction.md
+++ b/docs/writing-stories/introduction.md
@@ -37,6 +37,7 @@ The _default_ export metadata controls how Storybook lists your stories and prov
'vue/button-story-default-export-with-component.ts.mdx',
'angular/button-story-default-export-with-component.ts.mdx',
'svelte/button-story-default-export-with-component.js.mdx',
+ 'svelte/button-story-default-export-with-component.ts.mdx',
'web-components/button-story-default-export-with-component.js.mdx',
'html/button-story-default-export.js.mdx',
'html/button-story-default-export.ts.mdx',
@@ -69,6 +70,7 @@ Use the _named_ exports of a CSF file to define your componentβs stories. We r
'web-components/button-story.js.mdx',
'web-components/button-story.ts.mdx',
'svelte/button-story.js.mdx',
+ 'svelte/button-story.ts.mdx',
'html/button-story.js.mdx',
'html/button-story.ts.mdx',
'solid/button-story.js.mdx',
@@ -117,6 +119,7 @@ You can rename any particular story you need. For instance, to give it a more ac
'web-components/button-story-rename-story.js.mdx',
'web-components/button-story-rename-story.ts.mdx',
'svelte/button-story-rename-story.js.mdx',
+ 'svelte/button-story-rename-story.ts.mdx',
'html/button-story-rename-story.js.mdx',
'html/button-story-rename-story.ts.mdx',
'solid/button-story-rename-story.js.mdx',
@@ -146,6 +149,7 @@ A story is a function that describes how to render a component. You can have mul
'web-components/button-story-with-emojis.js.mdx',
'web-components/button-story-with-emojis.ts.mdx',
'svelte/button-story-with-emojis.js.mdx',
+ 'svelte/button-story-with-emojis.ts.mdx',
'html/button-story-with-emojis.js.mdx',
'html/button-story-with-emojis.ts.mdx',
'solid/button-story-with-emojis.js.mdx',
@@ -177,6 +181,7 @@ Refine this pattern by introducing `args` for your component's stories. It reduc
'web-components/button-story-using-args.js.mdx',
'web-components/button-story-using-args.ts.mdx',
'svelte/button-story-using-args.js.mdx',
+ 'svelte/button-story-using-args.ts.mdx',
'html/button-story-using-args.js.mdx',
'html/button-story-using-args.ts.mdx',
'solid/button-story-using-args.js.mdx',
@@ -206,6 +211,7 @@ Whatβs more, you can import `args` to reuse when writing stories for other com
'web-components/button-group-story.js.mdx',
'web-components/button-group-story.ts.mdx',
'svelte/button-group-story.js.mdx',
+ 'svelte/button-group-story.ts.mdx',
'solid/button-group-story.js.mdx',
'solid/button-group-story.ts.mdx',
]}
@@ -252,6 +258,7 @@ Storybook's `play` function and the [`@storybook/addon-interactions`](https://st
'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',
]}
@@ -279,6 +286,7 @@ For instance, suppose you wanted to test your Button component against a differe
'web-components/button-story-with-blue-args.js.mdx',
'web-components/button-story-with-blue-args.ts.mdx',
'svelte/button-story-with-blue-args.js.mdx',
+ 'svelte/button-story-with-blue-args.ts.mdx',
'html/button-story-with-blue-args.js.mdx',
'html/button-story-with-blue-args.ts.mdx',
'solid/button-story-with-blue-args.js.mdx',
@@ -310,6 +318,7 @@ A simple example is adding padding to a componentβs stories. Accomplish this u
'web-components/button-story-component-decorator.js.mdx',
'web-components/button-story-component-decorator.ts.mdx',
'svelte/button-story-component-decorator.js.mdx',
+ 'svelte/button-story-component-decorator.ts.mdx',
'html/button-story-component-decorator.js.mdx',
'html/button-story-component-decorator.ts.mdx',
'solid/button-story-component-decorator.js.mdx',
diff --git a/docs/writing-stories/loaders.md b/docs/writing-stories/loaders.md
index f33ddab5aac1..7f54d92e2dec 100644
--- a/docs/writing-stories/loaders.md
+++ b/docs/writing-stories/loaders.md
@@ -26,6 +26,7 @@ Loaders are helpful when you need to load story data externally (e.g., from a re
'web-components/loader-story.js.mdx',
'web-components/loader-story.ts.mdx',
'svelte/loader-story.js.mdx',
+ 'svelte/loader-story.ts.mdx',
'solid/loader-story.js.mdx',
'solid/loader-story.ts.mdx',
]}
diff --git a/docs/writing-stories/parameters.md b/docs/writing-stories/parameters.md
index 6c53b544b087..bf2c350a1735 100644
--- a/docs/writing-stories/parameters.md
+++ b/docs/writing-stories/parameters.md
@@ -44,6 +44,7 @@ We can set the parameters for all stories of a component using the `parameters`
'web-components/button-story-with-blue-args.js.mdx',
'web-components/button-story-with-blue-args.ts.mdx',
'svelte/button-story-with-blue-args.js.mdx',
+ 'svelte/button-story-with-blue-args.ts.mdx',
'solid/button-story-with-blue-args.js.mdx',
'solid/button-story-with-blue-args.ts.mdx',
]}
diff --git a/docs/writing-tests/accessibility-testing.md b/docs/writing-tests/accessibility-testing.md
index 630196b797cf..edf2e2b3c994 100644
--- a/docs/writing-tests/accessibility-testing.md
+++ b/docs/writing-tests/accessibility-testing.md
@@ -70,6 +70,7 @@ Storybook's a11y addon runs [Axe](https://github.com/dequelabs/axe-core) on the
'vue/component-story-with-accessibility.3.js.mdx',
'vue/component-story-with-accessibility.3.ts.mdx',
'svelte/component-story-with-accessibility.js.mdx',
+ 'svelte/component-story-with-accessibility.ts.mdx',
'web-components/component-story-with-accessibility.js.mdx',
'web-components/component-story-with-accessibility.ts.mdx',
]}
@@ -134,6 +135,7 @@ Customize the a11y ruleset at the story level by updating your story to include
'vue/storybook-addon-a11y-story-config.js.mdx',
'vue/storybook-addon-a11y-story-config.ts.mdx',
'svelte/storybook-addon-a11y-story-config.js.mdx',
+ 'svelte/storybook-addon-a11y-story-config.ts.mdx',
'web-components/storybook-addon-a11y-story-config.js.mdx',
'web-components/storybook-addon-a11y-story-config.ts.mdx',
]}
@@ -157,6 +159,7 @@ Disable accessibility testing for stories or components by adding the following
'vue/storybook-addon-a11y-disable.js.mdx',
'vue/storybook-addon-a11y-disable.ts.mdx',
'svelte/storybook-addon-a11y-disable.js.mdx',
+ 'svelte/storybook-addon-a11y-disable.ts.mdx',
'web-components/storybook-addon-a11y-disable.js.mdx',
'web-components/storybook-addon-a11y-disable.ts.mdx',
]}
diff --git a/docs/writing-tests/importing-stories-in-tests.md b/docs/writing-tests/importing-stories-in-tests.md
index 1aee2b6ee297..35a57c415a2b 100644
--- a/docs/writing-tests/importing-stories-in-tests.md
+++ b/docs/writing-tests/importing-stories-in-tests.md
@@ -82,6 +82,7 @@ For example, if you were working on a login component and wanted to test the inv
'vue/component-test-with-testing-library.js.mdx',
'angular/component-test-with-testing-library.ts.mdx',
'svelte/component-test-with-testing-library.js.mdx',
+ 'svelte/component-test-with-testing-library.ts.mdx',
'preact/component-test-with-testing-library.js.mdx',
]}
/>
@@ -108,6 +109,7 @@ An example of an end-to-end test with Cypress and Storybook is testing a login c
'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',
]}
usesCsf3
csf2Path="writing-tests/importing-stories-in-tests#snippet-login-form-with-play-function"
@@ -154,6 +156,7 @@ A real-life scenario of user flow testing with Playwright would be how to test a
'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',
]}
usesCsf3
csf2Path="writing-tests/importing-stories-in-tests#snippet-login-form-with-play-function"
diff --git a/docs/writing-tests/interaction-testing.md b/docs/writing-tests/interaction-testing.md
index 7ec58314f753..6defd119ba5a 100644
--- a/docs/writing-tests/interaction-testing.md
+++ b/docs/writing-tests/interaction-testing.md
@@ -71,6 +71,7 @@ The test itself is defined inside a `play` function connected to a story. Here's
'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',
]}