From 57a09d3666fa1fe064de79eda52ab983afbe0ed9 Mon Sep 17 00:00:00 2001 From: Jack Weilage Date: Sun, 30 Jul 2023 17:00:35 -0700 Subject: [PATCH 01/10] Remove old `.mdx.mdx` + `.native-format.mdx` files --- docs/snippets/svelte/badge-story.mdx.mdx | 76 ------------------- ...ck-handler-simplificated.native-format.mdx | 21 ----- ...tton-story-click-handler.native-format.mdx | 15 ---- ...utton-story-component-args-primary.mdx.mdx | 22 ------ ...y-component-args-primary.native-format.mdx | 11 --- .../button-story-component-decorator.mdx.mdx | 12 --- ...tory-component-decorator.native-format.mdx | 19 ----- .../svelte/button-story-decorator.mdx.mdx | 25 ------ .../button-story-default-docs-code.mdx.mdx | 45 ----------- ...-story-default-docs-code.native-format.mdx | 24 ------ .../button-story-using-args.native-format.mdx | 22 ------ ...story-with-addon-example.native-format.mdx | 16 ---- .../svelte/button-story-with-args.mdx.mdx | 26 ------- .../button-story-with-args.native-format.mdx | 22 ------ .../button-story-with-blue-args.mdx.mdx | 24 ------ ...ton-story-with-blue-args.native-format.mdx | 13 ---- .../svelte/button-story-with-emojis.mdx.mdx | 43 ----------- ...button-story-with-emojis.native-format.mdx | 21 ----- docs/snippets/svelte/button-story.mdx.mdx | 27 ------- .../svelte/button-story.native-format.mdx | 15 ---- .../checkbox-story-csf.native-format.mdx | 19 ----- docs/snippets/svelte/checkbox-story.mdx.mdx | 55 -------------- ...tory-custom-args-complex.native-format.mdx | 24 ------ .../component-story-figma-integration.mdx.mdx | 36 --------- .../component-story-mdx-story-by-name.mdx.mdx | 23 ------ .../component-story-static-asset-cdn.mdx.mdx | 25 ------ ...t-story-static-asset-cdn.native-format.mdx | 20 ----- ...ent-story-static-asset-with-import.mdx.mdx | 29 ------- ...static-asset-with-import.native-format.mdx | 24 ------ ...-story-static-asset-without-import.mdx.mdx | 21 ----- ...tic-asset-without-import.native-format.mdx | 17 ----- ...component-story-with-accessibility.mdx.mdx | 51 ------------- docs/snippets/svelte/histogram-story.mdx.mdx | 30 -------- .../list-story-expanded.native-format.mdx | 37 --------- .../list-story-starter.native-format.mdx | 19 ----- docs/snippets/svelte/loader-story.mdx.mdx | 34 --------- .../login-form-with-play-function.mdx.mdx | 53 ------------- .../mdx-canvas-multiple-stories.mdx.mdx | 48 ------------ ...nt-story-basic-and-props.native-format.mdx | 16 ---- ...omponent-story-configure-viewports.mdx.mdx | 37 --------- ...tory-configure-viewports.native-format.mdx | 21 ----- .../my-component-story-use-globaltype.mdx.mdx | 38 ---------- .../my-component-with-env-variables.mdx.mdx | 27 ------- ...onent-with-env-variables.native-format.mdx | 17 ----- .../svelte/page-story-slots.native-format.mdx | 19 ----- .../storybook-addon-a11y-disable.mdx.mdx | 30 -------- .../storybook-addon-a11y-story-config.mdx.mdx | 45 ----------- ...fully-customize-controls.native-format.mdx | 29 ------- .../your-component-with-decorator.mdx.mdx | 13 ---- ...component-with-decorator.native-format.mdx | 19 ----- docs/snippets/svelte/your-component.mdx.mdx | 20 ----- .../svelte/your-component.native-format.mdx | 19 ----- 52 files changed, 1414 deletions(-) delete mode 100644 docs/snippets/svelte/badge-story.mdx.mdx delete mode 100644 docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx delete mode 100644 docs/snippets/svelte/button-story-click-handler.native-format.mdx delete mode 100644 docs/snippets/svelte/button-story-component-args-primary.mdx.mdx delete mode 100644 docs/snippets/svelte/button-story-component-args-primary.native-format.mdx delete mode 100644 docs/snippets/svelte/button-story-component-decorator.mdx.mdx delete mode 100644 docs/snippets/svelte/button-story-component-decorator.native-format.mdx delete mode 100644 docs/snippets/svelte/button-story-decorator.mdx.mdx delete mode 100644 docs/snippets/svelte/button-story-default-docs-code.mdx.mdx delete mode 100644 docs/snippets/svelte/button-story-default-docs-code.native-format.mdx delete mode 100644 docs/snippets/svelte/button-story-using-args.native-format.mdx delete mode 100644 docs/snippets/svelte/button-story-with-addon-example.native-format.mdx delete mode 100644 docs/snippets/svelte/button-story-with-args.mdx.mdx delete mode 100644 docs/snippets/svelte/button-story-with-args.native-format.mdx delete mode 100644 docs/snippets/svelte/button-story-with-blue-args.mdx.mdx delete mode 100644 docs/snippets/svelte/button-story-with-blue-args.native-format.mdx delete mode 100644 docs/snippets/svelte/button-story-with-emojis.mdx.mdx delete mode 100644 docs/snippets/svelte/button-story-with-emojis.native-format.mdx delete mode 100644 docs/snippets/svelte/button-story.mdx.mdx delete mode 100644 docs/snippets/svelte/button-story.native-format.mdx delete mode 100644 docs/snippets/svelte/checkbox-story-csf.native-format.mdx delete mode 100644 docs/snippets/svelte/checkbox-story.mdx.mdx delete mode 100644 docs/snippets/svelte/component-story-custom-args-complex.native-format.mdx delete mode 100644 docs/snippets/svelte/component-story-figma-integration.mdx.mdx delete mode 100644 docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx delete mode 100644 docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx delete mode 100644 docs/snippets/svelte/component-story-static-asset-cdn.native-format.mdx delete mode 100644 docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx delete mode 100644 docs/snippets/svelte/component-story-static-asset-with-import.native-format.mdx delete mode 100644 docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx delete mode 100644 docs/snippets/svelte/component-story-static-asset-without-import.native-format.mdx delete mode 100644 docs/snippets/svelte/component-story-with-accessibility.mdx.mdx delete mode 100644 docs/snippets/svelte/histogram-story.mdx.mdx delete mode 100644 docs/snippets/svelte/list-story-expanded.native-format.mdx delete mode 100644 docs/snippets/svelte/list-story-starter.native-format.mdx delete mode 100644 docs/snippets/svelte/loader-story.mdx.mdx delete mode 100644 docs/snippets/svelte/login-form-with-play-function.mdx.mdx delete mode 100644 docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx delete mode 100644 docs/snippets/svelte/my-component-story-basic-and-props.native-format.mdx delete mode 100644 docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx delete mode 100644 docs/snippets/svelte/my-component-story-configure-viewports.native-format.mdx delete mode 100644 docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx delete mode 100644 docs/snippets/svelte/my-component-with-env-variables.mdx.mdx delete mode 100644 docs/snippets/svelte/my-component-with-env-variables.native-format.mdx delete mode 100644 docs/snippets/svelte/page-story-slots.native-format.mdx delete mode 100644 docs/snippets/svelte/storybook-addon-a11y-disable.mdx.mdx delete mode 100644 docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx delete mode 100644 docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx delete mode 100644 docs/snippets/svelte/your-component-with-decorator.mdx.mdx delete mode 100644 docs/snippets/svelte/your-component-with-decorator.native-format.mdx delete mode 100644 docs/snippets/svelte/your-component.mdx.mdx delete mode 100644 docs/snippets/svelte/your-component.native-format.mdx diff --git a/docs/snippets/svelte/badge-story.mdx.mdx b/docs/snippets/svelte/badge-story.mdx.mdx deleted file mode 100644 index f30d432b4d38..000000000000 --- a/docs/snippets/svelte/badge-story.mdx.mdx +++ /dev/null @@ -1,76 +0,0 @@ -```md - - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; - -import Badge from './Badge.svelte'; - - - -# Badge - -Let's define a story for our `Badge` component: - - ({ - Component: Badge, - props: args, - })} /> - -We can drop it in a `Canvas` to get a code snippet: - - - ({ - Component: Badge, - props: args, - })} /> - - -We can even preview multiple Stories in a block. This -gets rendered as a group but defines individual stories -with unique URLs, which is great for review and testing. - - - ({ - Component: Badge, - props: args, - })} /> - ({ - Component: Badge, - props: args, - })} /> - ({ - Component: Badge, - props: args, - })} /> - -``` diff --git a/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx b/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx deleted file mode 100644 index 6edaa0d3f921..000000000000 --- a/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx +++ /dev/null @@ -1,21 +0,0 @@ -```html - - - - - - - - - - - -``` diff --git a/docs/snippets/svelte/button-story-click-handler.native-format.mdx b/docs/snippets/svelte/button-story-click-handler.native-format.mdx deleted file mode 100644 index 8e9c20c40bff..000000000000 --- a/docs/snippets/svelte/button-story-click-handler.native-format.mdx +++ /dev/null @@ -1,15 +0,0 @@ -```html - - - - - - - +``` diff --git a/docs/snippets/svelte/button-story-auto-docs.ts.mdx b/docs/snippets/svelte/button-story-auto-docs.ts.mdx new file mode 100644 index 000000000000..26248d745aff --- /dev/null +++ b/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 = { + component: Button, + //πŸ‘‡ Enables auto-generated documentation for the component story + tags: ['autodocs'], + argTypes: { + backgroundColor: { control: 'color' }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Primary: Story = { + args: { + primary: true, + label: 'Button', + }, +}; + +export const Secondary: Story = { + args: { + ...Primary.args, + primary: false, + }, +}; +``` diff --git a/docs/snippets/svelte/button-story-click-handler-args.ts.mdx b/docs/snippets/svelte/button-story-click-handler-args.ts.mdx new file mode 100644 index 000000000000..ea5b6cb9e04f --- /dev/null +++ b/docs/snippets/svelte/button-story-click-handler-args.ts.mdx @@ -0,0 +1,32 @@ +```ts +// Button.stories.ts + +import type { Meta, StoryObj } from '@storybook/svelte'; + +import Button from './Button.svelte'; + +import { action } from '@storybook/addon-actions'; + +const meta: Meta = { + component: Button, +}; + +export default meta; +type Story = StoryObj; + +export const Text: Story = { + render: ({ label, click }) => ({ + Component: Button, + props: { + label, + }, + on: { + click, + }, + }), + args: { + label: 'Hello', + click: action('clicked'), + }, +}; +``` diff --git a/docs/snippets/svelte/button-story-click-handler-simplificated.ts.mdx b/docs/snippets/svelte/button-story-click-handler-simplificated.ts.mdx new file mode 100644 index 000000000000..65c3e34d3ba8 --- /dev/null +++ b/docs/snippets/svelte/button-story-click-handler-simplificated.ts.mdx @@ -0,0 +1,18 @@ +```ts +// Button.stories.ts + +import type { Meta, StoryObj } from '@storybook/svelte'; + +import Button from './Button.svelte'; + +const meta: Meta = { + component: Button, +}; + +export default meta; +type Story = StoryObj; + +export const Text: Story = { + args: {}, +}; +``` diff --git a/docs/snippets/svelte/button-story-click-handler.ts.mdx b/docs/snippets/svelte/button-story-click-handler.ts.mdx new file mode 100644 index 000000000000..cac8b8067aa0 --- /dev/null +++ b/docs/snippets/svelte/button-story-click-handler.ts.mdx @@ -0,0 +1,28 @@ +```ts +// Button.stories.ts + +import type { Meta, StoryObj } from '@storybook/svelte'; + +import Button from './Button.svelte'; + +import { action } from '@storybook/addon-actions'; + +const meta: Meta = { + component: Button, +}; + +export default meta; +type Story = StoryObj; + +export const Text: Story = { + render: () => ({ + Component: Button, + props: { + label: 'Hello', + }, + on: { + click: action('clicked'), + }, + }), +}; +``` diff --git a/docs/snippets/svelte/button-story-component-args-primary.ts.mdx b/docs/snippets/svelte/button-story-component-args-primary.ts.mdx new file mode 100644 index 000000000000..2b5e54a6ea2d --- /dev/null +++ b/docs/snippets/svelte/button-story-component-args-primary.ts.mdx @@ -0,0 +1,21 @@ +```ts +// Button.stories.ts + +import type { Meta } from '@storybook/svelte'; + +import Button from './Button.svelte'; + +const meta: Meta = { + component: Button, + //πŸ‘‡ Creates specific argTypes + argTypes: { + backgroundColor: { control: 'color' }, + }, + args: { + //πŸ‘‡ Now all Button stories will be primary. + primary: true, + }, +}; + +export default meta; +``` diff --git a/docs/snippets/svelte/button-story-component-decorator.ts.mdx b/docs/snippets/svelte/button-story-component-decorator.ts.mdx new file mode 100644 index 000000000000..93a4aeb34025 --- /dev/null +++ b/docs/snippets/svelte/button-story-component-decorator.ts.mdx @@ -0,0 +1,33 @@ +```ts +// Button.stories.ts + +import type { Meta } from '@storybook/svelte'; + +import Button from './Button.svelte'; +import MarginDecorator from './MarginDecorator.svelte'; + +const meta: Meta = { + component: Button, + decorators: [() => MarginDecorator], +}; + +export default meta; + +// Your stories here. + +// Don't forget to use the component you're testing and not the MarginDecorator component +``` + +```html + + +
+ +
+ + +``` diff --git a/docs/snippets/svelte/button-story-decorator.ts.mdx b/docs/snippets/svelte/button-story-decorator.ts.mdx new file mode 100644 index 000000000000..22ba3a40c092 --- /dev/null +++ b/docs/snippets/svelte/button-story-decorator.ts.mdx @@ -0,0 +1,19 @@ +```ts +// Button.stories.ts + +import { Meta, StoryObj } from '@storybook/svelte'; + +import Button from './Button.svelte'; +import MarginDecorator from './MarginDecorator.svelte'; + +const meta: Meta = { + component: Button, +}; + +export default meta; +type Story = StoryObj; + +export const Primary: Story = { + decorators: [() => MarginDecorator], +}; +``` diff --git a/docs/snippets/svelte/button-story-default-docs-code.ts.mdx b/docs/snippets/svelte/button-story-default-docs-code.ts.mdx new file mode 100644 index 000000000000..2eb10588d5ca --- /dev/null +++ b/docs/snippets/svelte/button-story-default-docs-code.ts.mdx @@ -0,0 +1,48 @@ +```ts +// Button.stories.ts + +import type { Meta, StoryObj } from '@storybook/svelte'; + +import Button from './Button.svelte'; + +const meta: Meta = { + /* πŸ‘‡ The title prop is optional. + * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', + component: Button, + //πŸ‘‡ Creates specific argTypes + argTypes: { + backgroundColor: { control: 'color' }, + }, +}; + +export default meta; +type Story = StoryObj; + +//πŸ‘‡ Some function to demonstrate the behavior +const someFunction = (someValue) => { + return `i am a ${someValue}`; +}; + +export const ExampleStory: Story = (args) => { + //πŸ‘‡ Destructure the label from the args object + const { label } = args; + + //πŸ‘‡ Assigns the function result to a variable and pass it as a prop into the component + const functionResult = someFunction(label); + return { + Component: Button, + props: { + ...args, + label: functionResult, + }, + }; +}; +ExampleStory.args = { + primary: true, + size: 'small', + label: 'button', +}; +``` diff --git a/docs/snippets/svelte/button-story-default-export-with-component.ts.mdx b/docs/snippets/svelte/button-story-default-export-with-component.ts.mdx new file mode 100644 index 000000000000..d0bf35d7af69 --- /dev/null +++ b/docs/snippets/svelte/button-story-default-export-with-component.ts.mdx @@ -0,0 +1,13 @@ +```ts +// Button.stories.ts + +import type { Meta } from '@storybook/svelte'; + +import Button from './Button.svelte'; + +const meta: Meta = { + component: Button, +}; + +export default meta; +``` diff --git a/docs/snippets/svelte/button-story-rename-story.ts.mdx b/docs/snippets/svelte/button-story-rename-story.ts.mdx new file mode 100644 index 000000000000..ad254c10b73d --- /dev/null +++ b/docs/snippets/svelte/button-story-rename-story.ts.mdx @@ -0,0 +1,30 @@ +```ts +// Button.stories.ts + +import type { Meta, StoryObj } from '@storybook/svelte'; + +import Button from './Button.svelte'; + +const meta: Meta = { + component: Button, +}; + +export default meta; +type Story = StoryObj; + +/* + *πŸ‘‡ 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: Story = ({ + name: 'I am the primary', + render: () => ({ + Component: Button, + props: { + primary: true, + label: 'Button', + }, + }), +}; +``` diff --git a/docs/snippets/svelte/button-story-using-args.ts.mdx b/docs/snippets/svelte/button-story-using-args.ts.mdx new file mode 100644 index 000000000000..edcd9995e364 --- /dev/null +++ b/docs/snippets/svelte/button-story-using-args.ts.mdx @@ -0,0 +1,36 @@ +```ts +// Button.stories.ts + +import type { Meta, StoryObj } from '@storybook/svelte'; + +import Button from './Button.svelte'; + +//πŸ‘‡This default export determines where your story goes in the story list +const meta: Meta = { + component: Button, +}; + +export default meta; +type Story = StoryObj; + +export const Primary: Story = { + args: { + backgroundColor: '#ff0', + label: 'Button', + }, +}; + +export const Secondary: Story = { + args: { + ...Primary.args, + label: 'πŸ˜„πŸ‘πŸ˜πŸ’―', + }, +}; + +export const Tertiary: Story = { + args: { + ...Primary.args, + label: 'πŸ“šπŸ“•πŸ“ˆπŸ€“', + }, +}; +``` diff --git a/docs/snippets/svelte/button-story-with-addon-example.ts.mdx b/docs/snippets/svelte/button-story-with-addon-example.ts.mdx new file mode 100644 index 000000000000..aecf1ea989f9 --- /dev/null +++ b/docs/snippets/svelte/button-story-with-addon-example.ts.mdx @@ -0,0 +1,27 @@ +```ts +// Button.stories.ts + +import type { Meta, StoryObj } from '@storybook/svelte'; + +import Button from './Button.svelte'; + +//πŸ‘‡This default export determines where your story goes in the story list +const meta: Meta = { + /* πŸ‘‡ The title prop is optional. + * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading + * to learn how to generate automatic titles + */ + title: 'Button', + //πŸ‘‡ Creates specific parameters for the story + parameters: { + myAddon: { + data: 'this data is passed to the addon', + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Basic = {}; +``` diff --git a/docs/snippets/svelte/button-story-with-blue-args.ts.mdx b/docs/snippets/svelte/button-story-with-blue-args.ts.mdx new file mode 100644 index 000000000000..4e2960f81120 --- /dev/null +++ b/docs/snippets/svelte/button-story-with-blue-args.ts.mdx @@ -0,0 +1,23 @@ +```ts +// Button.stories.ts + +import type { Meta } from '@storybook/svelte'; + +import Button from './Button.svelte'; + +const meta: Meta = { + component: Button, + //πŸ‘‡ Creates specific parameters for the story + parameters: { + backgrounds: { + values: [ + { name: 'red', value: '#f00' }, + { name: 'green', value: '#0f0' }, + { name: 'blue', value: '#00f' }, + ], + }, + }, +}; + +export default meta; +``` diff --git a/docs/snippets/svelte/button-story-with-emojis.ts.mdx b/docs/snippets/svelte/button-story-with-emojis.ts.mdx new file mode 100644 index 000000000000..8bcc1bd7c66a --- /dev/null +++ b/docs/snippets/svelte/button-story-with-emojis.ts.mdx @@ -0,0 +1,49 @@ +```ts +// Button.stories.ts + +import type { Meta, StoryObj } from '@storybook/svelte'; + +import Button from './Button.svelte'; + +const meta: Meta = { + component: Button, +}; + +export default meta; +type Story = StoryObj; + +/* + *πŸ‘‡ 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: Story = { + render: () => ({ + Component: Button, + props: { + backgroundColor: '#ff0', + label: 'Button', + }, + }), +}; + +export const Secondary: Story = { + render: () => ({ + Component: Button, + props: { + backgroundColor: '#ff0', + label: 'πŸ˜„πŸ‘πŸ˜πŸ’―', + }, + }), +}; + +export const Tertiary: Story = { + render: () => ({ + Component: Button, + props: { + backgroundColor: '#ff0', + label: 'πŸ“šπŸ“•πŸ“ˆπŸ€“', + }, + }), +}; +``` diff --git a/docs/snippets/svelte/component-story-custom-args-complex.ts.mdx b/docs/snippets/svelte/component-story-custom-args-complex.ts.mdx new file mode 100644 index 000000000000..eb0a45d9a1db --- /dev/null +++ b/docs/snippets/svelte/component-story-custom-args-complex.ts.mdx @@ -0,0 +1,46 @@ +```ts +// YourComponent.stories.ts + +import type { Meta, StoryObj } from '@storybook/svelte'; + +import YourComponent from './YourComponent.svelte'; + +const meta: Meta = { + component: YourComponent, + //πŸ‘‡ Creates specific argTypes + argTypes: { + propertyA: { + options: ['Item One', 'Item Two', 'Item Three'], + control: { type: 'select' }, // Automatically inferred when 'options' is defined + }, + propertyB: { + options: ['Another Item One', 'Another Item Two', 'Another Item Three'], + }, + }, +}; + +export default meta; +type Story = StoryObj; + +const someFunction = (valuePropertyA, valuePropertyB) => { + // Do some logic here +}; + +export const ExampleStory: Story = { + render: ({ propertyA, propertyB }) => { + //πŸ‘‡ Assigns the function result to a variable + const someFunctionResult = someFunction(propertyA, propertyB); + return { + Component: YourComponent, + props: { + ...args, + someProperty: someFunctionResult, + }, + }; + }, + args: { + propertyA: 'Item One', + propertyB: 'Another Item One', + }, +}; +``` diff --git a/docs/snippets/svelte/component-story-figma-integration.ts.mdx b/docs/snippets/svelte/component-story-figma-integration.ts.mdx new file mode 100644 index 000000000000..210d61c28e4e --- /dev/null +++ b/docs/snippets/svelte/component-story-figma-integration.ts.mdx @@ -0,0 +1,27 @@ +```ts +// MyComponent.stories.ts + +import type { Meta, StoryObj } from '@storybook/svelte'; + +import { withDesign } from 'storybook-addon-designs'; + +import MyComponent from './MyComponent.svelte'; + +// More on default export: https://storybook.js.org/docs/svelte/writing-stories/introduction#default-export +const meta: Meta = { + component: MyComponent, + decorators: [withDesign], +}; + +export default meta; +type Story = StoryObj; + +export const Example: Story = { + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/Sample-File', + }, + }, +}; +``` diff --git a/docs/snippets/svelte/component-story-static-asset-cdn.ts.mdx b/docs/snippets/svelte/component-story-static-asset-cdn.ts.mdx new file mode 100644 index 000000000000..3b21d2eed894 --- /dev/null +++ b/docs/snippets/svelte/component-story-static-asset-cdn.ts.mdx @@ -0,0 +1,24 @@ +```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 WithAnImage: Story = { + render: () => ({ + Component: MyComponent, + props: { + src: 'https://storybook.js.org/images/placeholders/350x150.png', + alt: 'My CDN placeholder', + }, + }), +}; +``` diff --git a/docs/snippets/svelte/component-story-static-asset-with-import.ts.mdx b/docs/snippets/svelte/component-story-static-asset-with-import.ts.mdx new file mode 100644 index 000000000000..0860fae48492 --- /dev/null +++ b/docs/snippets/svelte/component-story-static-asset-with-import.ts.mdx @@ -0,0 +1,28 @@ +```ts +//MyComponent.stories.ts + +import type { Meta, StoryObj } from '@storybook/svelte'; + +import MyComponent from './MyComponent.svelte'; + +import imageFile from './static/image.png'; + +const meta: Meta = { + component: MyComponent, +}; + +export default meta; +type Story = StoryObj; + +const image = { + src: imageFile, + alt: 'my image', +}; + +export const WithAnImage: Story = { + render: () => ({ + Component: MyComponent, + props: image, + }), +}; +``` diff --git a/docs/snippets/svelte/component-story-static-asset-without-import.ts.mdx b/docs/snippets/svelte/component-story-static-asset-without-import.ts.mdx new file mode 100644 index 000000000000..cfc54fb20623 --- /dev/null +++ b/docs/snippets/svelte/component-story-static-asset-without-import.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; + +// Assume image.png is located in the "public" directory. +export const WithAnImage: Story = { + render: () => ({ + Component: MyComponent, + props: { + src: '/image.png', + alt: 'my image', + }, + }), +}; +``` diff --git a/docs/snippets/svelte/component-story-with-accessibility.ts.mdx b/docs/snippets/svelte/component-story-with-accessibility.ts.mdx new file mode 100644 index 000000000000..c66dc1afb6e3 --- /dev/null +++ b/docs/snippets/svelte/component-story-with-accessibility.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 = { + component: Button, + argTypes: { + backgroundColor: { control: 'color' }, + }, +}; + +export default meta; +type Story = StoryObj; + +// 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.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.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/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.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/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.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.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.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.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/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.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.ts.mdx b/docs/snippets/svelte/storybook-addon-a11y-story-config.ts.mdx new file mode 100644 index 000000000000..a2516ffa6464 --- /dev/null +++ b/docs/snippets/svelte/storybook-addon-a11y-story-config.ts.mdx @@ -0,0 +1,38 @@ +```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 ExampleStory: Story = { + parameters: { + a11y: { + element: '#storybook-root', + config: { + rules: [ + { + // The autocomplete rule will not run based on the CSS selector provided + id: 'autocomplete-valid', + selector: '*:not([autocomplete="nope"])', + }, + { + // Setting the enabled option to false will disable checks for this particular rule on all stories. + id: 'image-alt', + enabled: false, + }, + ], + }, + options: {}, + manual: true, + }, + }, +}; +``` 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..117e3f9a2568 --- /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.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 + + +
+ +
+ + +``` From 7ab285627612a0e1139b09d03d1fc5280b306d19 Mon Sep 17 00:00:00 2001 From: Jack Weilage Date: Sun, 30 Jul 2023 21:06:18 -0700 Subject: [PATCH 04/10] Clean up formatting --- docs/snippets/svelte/button-group-story.js.mdx | 2 +- .../svelte/button-story-with-addon-example.js.mdx | 12 +----------- 2 files changed, 2 insertions(+), 12 deletions(-) diff --git a/docs/snippets/svelte/button-group-story.js.mdx b/docs/snippets/svelte/button-group-story.js.mdx index 9304e1bfda12..79ce2098574f 100644 --- a/docs/snippets/svelte/button-group-story.js.mdx +++ b/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'; diff --git a/docs/snippets/svelte/button-story-with-addon-example.js.mdx b/docs/snippets/svelte/button-story-with-addon-example.js.mdx index 94c9985a9e4b..4d6b272dce0d 100644 --- a/docs/snippets/svelte/button-story-with-addon-example.js.mdx +++ b/docs/snippets/svelte/button-story-with-addon-example.js.mdx @@ -17,15 +17,5 @@ export default { }, }; -/* - *πŸ‘‡ 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 Basic = { - render: (args) => ({ - Component: Button, - props: args, - }), -}; +export const Basic = {}; ``` From c559d4750985b53e368595fff3e1c45c64ade17b Mon Sep 17 00:00:00 2001 From: Jack Weilage Date: Sun, 30 Jul 2023 21:06:34 -0700 Subject: [PATCH 05/10] Add a forgotten snippet --- .../button-story-click-handler-simplificated.js.mdx | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 docs/snippets/svelte/button-story-click-handler-simplificated.js.mdx diff --git a/docs/snippets/svelte/button-story-click-handler-simplificated.js.mdx b/docs/snippets/svelte/button-story-click-handler-simplificated.js.mdx new file mode 100644 index 000000000000..28381dd8cd36 --- /dev/null +++ b/docs/snippets/svelte/button-story-click-handler-simplificated.js.mdx @@ -0,0 +1,13 @@ +```js +// Button.stories.js + +import Button from './Button.svelte'; + +export default { + component: Button, +} + +export const Text = { + args: {}, +}; +``` From c5a9c2121e000783944e2c0d5e477f3bc7e7a99b Mon Sep 17 00:00:00 2001 From: Jack Weilage Date: Sun, 30 Jul 2023 21:08:05 -0700 Subject: [PATCH 06/10] Reference new Svelte + Typescript snippets --- docs/addons/addons-api.md | 1 + docs/api/csf.md | 7 +++++++ docs/configure/images-and-assets.md | 3 +++ docs/essentials/controls.md | 1 + docs/essentials/toolbars-and-globals.md | 2 ++ docs/essentials/viewport.md | 1 + docs/sharing/design-integrations.md | 1 + docs/writing-docs/autodocs.md | 1 + docs/writing-stories/args.md | 3 +++ docs/writing-stories/build-pages-with-storybook.md | 5 +++++ docs/writing-stories/decorators.md | 4 ++++ docs/writing-stories/introduction.md | 9 +++++++++ docs/writing-stories/loaders.md | 1 + docs/writing-stories/parameters.md | 1 + docs/writing-tests/accessibility-testing.md | 3 +++ docs/writing-tests/importing-stories-in-tests.md | 3 +++ docs/writing-tests/interaction-testing.md | 1 + 17 files changed, 47 insertions(+) diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md index 787bcbe4fdd8..a4b7081cf6aa 100644 --- a/docs/addons/addons-api.md +++ b/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', ]} diff --git a/docs/api/csf.md b/docs/api/csf.md index 76388000ed3e..2c0ca62ad820 100644 --- 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/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', diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md index 8325aed14f6e..7b4a0c071ada 100644 --- 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 index 5266c0760f02..159fc767a377 100644 --- a/docs/essentials/controls.md +++ b/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', diff --git a/docs/essentials/toolbars-and-globals.md b/docs/essentials/toolbars-and-globals.md index bd10a38499e2..367872713e94 100644 --- a/docs/essentials/toolbars-and-globals.md +++ b/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', diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md index d2742b73b81b..abe5cb54227d 100644 --- 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 index cf2e5ac4934c..b5659dcd0a95 100644 --- a/docs/sharing/design-integrations.md +++ b/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', 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', ]} From d2b555fdcb4f954530574a50b3c98d04a1b99ad9 Mon Sep 17 00:00:00 2001 From: Jack Weilage Date: Sun, 30 Jul 2023 21:20:57 -0700 Subject: [PATCH 07/10] Remove unreferenced snippets. --- .../button-component-with-proptypes.js.mdx | 24 ---------- .../button-component-with-proptypes.ts.mdx | 24 ---------- .../svelte/button-implementation.js.mdx | 37 -------------- .../svelte/button-implementation.ts.mdx | 37 -------------- .../button-story-default-docs-code.js.mdx | 43 ----------------- .../button-story-default-docs-code.ts.mdx | 48 ------------------- 6 files changed, 213 deletions(-) delete mode 100644 docs/snippets/svelte/button-component-with-proptypes.js.mdx delete mode 100644 docs/snippets/svelte/button-component-with-proptypes.ts.mdx delete mode 100644 docs/snippets/svelte/button-implementation.js.mdx delete mode 100644 docs/snippets/svelte/button-implementation.ts.mdx delete mode 100644 docs/snippets/svelte/button-story-default-docs-code.js.mdx delete mode 100644 docs/snippets/svelte/button-story-default-docs-code.ts.mdx diff --git a/docs/snippets/svelte/button-component-with-proptypes.js.mdx b/docs/snippets/svelte/button-component-with-proptypes.js.mdx deleted file mode 100644 index 62e2f815bb9f..000000000000 --- a/docs/snippets/svelte/button-component-with-proptypes.js.mdx +++ /dev/null @@ -1,24 +0,0 @@ -```html -// Button.svelte - - - - -``` diff --git a/docs/snippets/svelte/button-implementation.ts.mdx b/docs/snippets/svelte/button-implementation.ts.mdx deleted file mode 100644 index ae9201e370cd..000000000000 --- a/docs/snippets/svelte/button-implementation.ts.mdx +++ /dev/null @@ -1,37 +0,0 @@ -```html - - - - - -``` diff --git a/docs/snippets/svelte/button-story-default-docs-code.js.mdx b/docs/snippets/svelte/button-story-default-docs-code.js.mdx deleted file mode 100644 index d2d43713b669..000000000000 --- a/docs/snippets/svelte/button-story-default-docs-code.js.mdx +++ /dev/null @@ -1,43 +0,0 @@ -```js -// Button.stories.js - -import Button from './Button.svelte'; - -export default { - /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', - component: Button, - //πŸ‘‡ Creates specific argTypes - argTypes: { - backgroundColor: { control: 'color' }, - }, -}; - -//πŸ‘‡ Some function to demonstrate the behavior -const someFunction = (someValue) => { - return `i am a ${someValue}`; -}; - -export const ExampleStory = (args) => { - //πŸ‘‡ Destructure the label from the args object - const { label } = args; - - //πŸ‘‡ Assigns the function result to a variable and pass it as a prop into the component - const functionResult = someFunction(label); - return { - Component: Button, - props: { - ...args, - label: functionResult, - }, - }; -}; -ExampleStory.args = { - primary: true, - size: 'small', - label: 'button', -}; -``` diff --git a/docs/snippets/svelte/button-story-default-docs-code.ts.mdx b/docs/snippets/svelte/button-story-default-docs-code.ts.mdx deleted file mode 100644 index 2eb10588d5ca..000000000000 --- a/docs/snippets/svelte/button-story-default-docs-code.ts.mdx +++ /dev/null @@ -1,48 +0,0 @@ -```ts -// Button.stories.ts - -import type { Meta, StoryObj } from '@storybook/svelte'; - -import Button from './Button.svelte'; - -const meta: Meta = { - /* πŸ‘‡ The title prop is optional. - * See https://storybook.js.org/docs/svelte/configure/overview#configure-story-loading - * to learn how to generate automatic titles - */ - title: 'Button', - component: Button, - //πŸ‘‡ Creates specific argTypes - argTypes: { - backgroundColor: { control: 'color' }, - }, -}; - -export default meta; -type Story = StoryObj; - -//πŸ‘‡ Some function to demonstrate the behavior -const someFunction = (someValue) => { - return `i am a ${someValue}`; -}; - -export const ExampleStory: Story = (args) => { - //πŸ‘‡ Destructure the label from the args object - const { label } = args; - - //πŸ‘‡ Assigns the function result to a variable and pass it as a prop into the component - const functionResult = someFunction(label); - return { - Component: Button, - props: { - ...args, - label: functionResult, - }, - }; -}; -ExampleStory.args = { - primary: true, - size: 'small', - label: 'button', -}; -``` From 9b10e49bd342c81f911ef969afafe8c54b5a2ad9 Mon Sep 17 00:00:00 2001 From: Jack Weilage Date: Wed, 2 Aug 2023 10:22:38 -0700 Subject: [PATCH 08/10] Revert "Remove old `.mdx.mdx` + `.native-format.mdx` files" This reverts commit 57a09d3666fa1fe064de79eda52ab983afbe0ed9. --- docs/snippets/svelte/badge-story.mdx.mdx | 76 +++++++++++++++++++ ...ck-handler-simplificated.native-format.mdx | 21 +++++ ...tton-story-click-handler.native-format.mdx | 15 ++++ ...utton-story-component-args-primary.mdx.mdx | 22 ++++++ ...y-component-args-primary.native-format.mdx | 11 +++ .../button-story-component-decorator.mdx.mdx | 12 +++ ...tory-component-decorator.native-format.mdx | 19 +++++ .../svelte/button-story-decorator.mdx.mdx | 25 ++++++ .../button-story-default-docs-code.mdx.mdx | 45 +++++++++++ ...-story-default-docs-code.native-format.mdx | 24 ++++++ .../button-story-using-args.native-format.mdx | 22 ++++++ ...story-with-addon-example.native-format.mdx | 16 ++++ .../svelte/button-story-with-args.mdx.mdx | 26 +++++++ .../button-story-with-args.native-format.mdx | 22 ++++++ .../button-story-with-blue-args.mdx.mdx | 24 ++++++ ...ton-story-with-blue-args.native-format.mdx | 13 ++++ .../svelte/button-story-with-emojis.mdx.mdx | 43 +++++++++++ ...button-story-with-emojis.native-format.mdx | 21 +++++ docs/snippets/svelte/button-story.mdx.mdx | 27 +++++++ .../svelte/button-story.native-format.mdx | 15 ++++ .../checkbox-story-csf.native-format.mdx | 19 +++++ docs/snippets/svelte/checkbox-story.mdx.mdx | 55 ++++++++++++++ ...tory-custom-args-complex.native-format.mdx | 24 ++++++ .../component-story-figma-integration.mdx.mdx | 36 +++++++++ .../component-story-mdx-story-by-name.mdx.mdx | 23 ++++++ .../component-story-static-asset-cdn.mdx.mdx | 25 ++++++ ...t-story-static-asset-cdn.native-format.mdx | 20 +++++ ...ent-story-static-asset-with-import.mdx.mdx | 29 +++++++ ...static-asset-with-import.native-format.mdx | 24 ++++++ ...-story-static-asset-without-import.mdx.mdx | 21 +++++ ...tic-asset-without-import.native-format.mdx | 17 +++++ ...component-story-with-accessibility.mdx.mdx | 51 +++++++++++++ docs/snippets/svelte/histogram-story.mdx.mdx | 30 ++++++++ .../list-story-expanded.native-format.mdx | 37 +++++++++ .../list-story-starter.native-format.mdx | 19 +++++ docs/snippets/svelte/loader-story.mdx.mdx | 34 +++++++++ .../login-form-with-play-function.mdx.mdx | 53 +++++++++++++ .../mdx-canvas-multiple-stories.mdx.mdx | 48 ++++++++++++ ...nt-story-basic-and-props.native-format.mdx | 16 ++++ ...omponent-story-configure-viewports.mdx.mdx | 37 +++++++++ ...tory-configure-viewports.native-format.mdx | 21 +++++ .../my-component-story-use-globaltype.mdx.mdx | 38 ++++++++++ .../my-component-with-env-variables.mdx.mdx | 27 +++++++ ...onent-with-env-variables.native-format.mdx | 17 +++++ .../svelte/page-story-slots.native-format.mdx | 19 +++++ .../storybook-addon-a11y-disable.mdx.mdx | 30 ++++++++ .../storybook-addon-a11y-story-config.mdx.mdx | 45 +++++++++++ ...fully-customize-controls.native-format.mdx | 29 +++++++ .../your-component-with-decorator.mdx.mdx | 13 ++++ ...component-with-decorator.native-format.mdx | 19 +++++ docs/snippets/svelte/your-component.mdx.mdx | 20 +++++ .../svelte/your-component.native-format.mdx | 19 +++++ 52 files changed, 1414 insertions(+) create mode 100644 docs/snippets/svelte/badge-story.mdx.mdx create mode 100644 docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx create mode 100644 docs/snippets/svelte/button-story-click-handler.native-format.mdx create mode 100644 docs/snippets/svelte/button-story-component-args-primary.mdx.mdx create mode 100644 docs/snippets/svelte/button-story-component-args-primary.native-format.mdx create mode 100644 docs/snippets/svelte/button-story-component-decorator.mdx.mdx create mode 100644 docs/snippets/svelte/button-story-component-decorator.native-format.mdx create mode 100644 docs/snippets/svelte/button-story-decorator.mdx.mdx create mode 100644 docs/snippets/svelte/button-story-default-docs-code.mdx.mdx create mode 100644 docs/snippets/svelte/button-story-default-docs-code.native-format.mdx create mode 100644 docs/snippets/svelte/button-story-using-args.native-format.mdx create mode 100644 docs/snippets/svelte/button-story-with-addon-example.native-format.mdx create mode 100644 docs/snippets/svelte/button-story-with-args.mdx.mdx create mode 100644 docs/snippets/svelte/button-story-with-args.native-format.mdx create mode 100644 docs/snippets/svelte/button-story-with-blue-args.mdx.mdx create mode 100644 docs/snippets/svelte/button-story-with-blue-args.native-format.mdx create mode 100644 docs/snippets/svelte/button-story-with-emojis.mdx.mdx create mode 100644 docs/snippets/svelte/button-story-with-emojis.native-format.mdx create mode 100644 docs/snippets/svelte/button-story.mdx.mdx create mode 100644 docs/snippets/svelte/button-story.native-format.mdx create mode 100644 docs/snippets/svelte/checkbox-story-csf.native-format.mdx create mode 100644 docs/snippets/svelte/checkbox-story.mdx.mdx create mode 100644 docs/snippets/svelte/component-story-custom-args-complex.native-format.mdx create mode 100644 docs/snippets/svelte/component-story-figma-integration.mdx.mdx create mode 100644 docs/snippets/svelte/component-story-mdx-story-by-name.mdx.mdx create mode 100644 docs/snippets/svelte/component-story-static-asset-cdn.mdx.mdx create mode 100644 docs/snippets/svelte/component-story-static-asset-cdn.native-format.mdx create mode 100644 docs/snippets/svelte/component-story-static-asset-with-import.mdx.mdx create mode 100644 docs/snippets/svelte/component-story-static-asset-with-import.native-format.mdx create mode 100644 docs/snippets/svelte/component-story-static-asset-without-import.mdx.mdx create mode 100644 docs/snippets/svelte/component-story-static-asset-without-import.native-format.mdx create mode 100644 docs/snippets/svelte/component-story-with-accessibility.mdx.mdx create mode 100644 docs/snippets/svelte/histogram-story.mdx.mdx create mode 100644 docs/snippets/svelte/list-story-expanded.native-format.mdx create mode 100644 docs/snippets/svelte/list-story-starter.native-format.mdx create mode 100644 docs/snippets/svelte/loader-story.mdx.mdx create mode 100644 docs/snippets/svelte/login-form-with-play-function.mdx.mdx create mode 100644 docs/snippets/svelte/mdx-canvas-multiple-stories.mdx.mdx create mode 100644 docs/snippets/svelte/my-component-story-basic-and-props.native-format.mdx create mode 100644 docs/snippets/svelte/my-component-story-configure-viewports.mdx.mdx create mode 100644 docs/snippets/svelte/my-component-story-configure-viewports.native-format.mdx create mode 100644 docs/snippets/svelte/my-component-story-use-globaltype.mdx.mdx create mode 100644 docs/snippets/svelte/my-component-with-env-variables.mdx.mdx create mode 100644 docs/snippets/svelte/my-component-with-env-variables.native-format.mdx create mode 100644 docs/snippets/svelte/page-story-slots.native-format.mdx create mode 100644 docs/snippets/svelte/storybook-addon-a11y-disable.mdx.mdx create mode 100644 docs/snippets/svelte/storybook-addon-a11y-story-config.mdx.mdx create mode 100644 docs/snippets/svelte/table-story-fully-customize-controls.native-format.mdx create mode 100644 docs/snippets/svelte/your-component-with-decorator.mdx.mdx create mode 100644 docs/snippets/svelte/your-component-with-decorator.native-format.mdx create mode 100644 docs/snippets/svelte/your-component.mdx.mdx create mode 100644 docs/snippets/svelte/your-component.native-format.mdx diff --git a/docs/snippets/svelte/badge-story.mdx.mdx b/docs/snippets/svelte/badge-story.mdx.mdx new file mode 100644 index 000000000000..f30d432b4d38 --- /dev/null +++ b/docs/snippets/svelte/badge-story.mdx.mdx @@ -0,0 +1,76 @@ +```md + + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + +import Badge from './Badge.svelte'; + + + +# Badge + +Let's define a story for our `Badge` component: + + ({ + Component: Badge, + props: args, + })} /> + +We can drop it in a `Canvas` to get a code snippet: + + + ({ + Component: Badge, + props: args, + })} /> + + +We can even preview multiple Stories in a block. This +gets rendered as a group but defines individual stories +with unique URLs, which is great for review and testing. + + + ({ + Component: Badge, + props: args, + })} /> + ({ + Component: Badge, + props: args, + })} /> + ({ + Component: Badge, + props: args, + })} /> + +``` diff --git a/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx b/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx new file mode 100644 index 000000000000..6edaa0d3f921 --- /dev/null +++ b/docs/snippets/svelte/button-story-click-handler-simplificated.native-format.mdx @@ -0,0 +1,21 @@ +```html + + + + + + + + + + + +``` diff --git a/docs/snippets/svelte/button-story-click-handler.native-format.mdx b/docs/snippets/svelte/button-story-click-handler.native-format.mdx new file mode 100644 index 000000000000..8e9c20c40bff --- /dev/null +++ b/docs/snippets/svelte/button-story-click-handler.native-format.mdx @@ -0,0 +1,15 @@ +```html + + + + + + +