Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs: Svelte CSF snippets #29546

Merged
merged 15 commits into from
Nov 15, 2024
Merged

Docs: Svelte CSF snippets #29546

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
6bee07d
Docs: Svelte CSF snippets
jonniebigodes Nov 5, 2024
1242147
Minor polish to the examples
jonniebigodes Nov 5, 2024
4b58748
Updates to the CSF api snippets
jonniebigodes Nov 5, 2024
9775de1
update "writing stories" docs and snippets for svelte csf
JReinhold Nov 12, 2024
ca66a62
simplify decorators
JReinhold Nov 12, 2024
506e786
more svelte snippet changes
JReinhold Nov 12, 2024
be6a7bf
Starting to address feedback on MDX snippets
jonniebigodes Nov 12, 2024
44d7d1b
more svelte snippet fixes
JReinhold Nov 13, 2024
7980aac
Merge branch 'docs_adjust_svelte_snippets_v5' of github.com:storybook…
JReinhold Nov 13, 2024
79b5b17
add complex args for svelte csf
JReinhold Nov 13, 2024
8fd06ac
more svelte csf snippet fixes
JReinhold Nov 13, 2024
b47f5d2
Fixes the MDX examples
jonniebigodes Nov 13, 2024
8fbaea1
Remove Svelte conditional rendering on pages without template
jonniebigodes Nov 13, 2024
a43d99b
Merge branch 'next' into docs_adjust_svelte_snippets_v5
jonniebigodes Nov 14, 2024
f922ed1
Merge branch 'next' into docs_adjust_svelte_snippets_v5
jonniebigodes Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 15 additions & 4 deletions docs/_snippets/button-group-story.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,11 @@ export const Pair: Story = {
};
```

```js filename="ButtonGroup.stories.js" renderer="svelte" language="js"
```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
<!-- TK if pattern is possible -->
```

```js filename="ButtonGroup.stories.js" renderer="svelte" language="js" tabTitle="CSF"
jonniebigodes marked this conversation as resolved.
Show resolved Hide resolved
import ButtonGroup from '../ButtonGroup.svelte';

//👇 Imports the Button stories
Expand All @@ -178,7 +182,11 @@ export const Pair = {
};
```

```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts-4-9"
```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
<!-- TK if pattern is possible -->
```

```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
import type { Meta, StoryObj } from '@storybook/svelte';

import ButtonGroup from './ButtonGroup.svelte';
Expand All @@ -201,7 +209,11 @@ export const Pair: Story = {
};
```

```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts"
```svelte filename="ButtonGroup.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
<!-- TK if pattern is possible -->
jonniebigodes marked this conversation as resolved.
Show resolved Hide resolved
```

```ts filename="ButtonGroup.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
import type { Meta, StoryObj } from '@storybook/svelte';

import ButtonGroup from './ButtonGroup.svelte';
Expand Down Expand Up @@ -350,4 +362,3 @@ export const Pair: Story = {
},
};
```

69 changes: 58 additions & 11 deletions docs/_snippets/button-story-component-args-primary.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,27 @@ export default meta;
type Story = StoryObj<typeof Button>;
```

```js filename="Button.stories.js" renderer="svelte" language="js"
```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';

import Button from './Button.svelte';

const { Story } = defineMeta({
component: Button,
//👇 Creates specific argTypes
argTypes: {
backgroundColor: { control: 'color' },
},
args: {
//👇 Now all Button stories will be primary.
primary: true,
},
});
</script>
```

```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
import Button from './Button.svelte';

export default {
Expand All @@ -150,19 +170,27 @@ export default {
};
```

```html renderer="svelte" language="ts" tabTitle="native-format"
{/* Button.stories.svelte */}

<script>
import { Meta } from '@storybook/addon-svelte-csf';
```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
jonniebigodes marked this conversation as resolved.
Show resolved Hide resolved
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';

import Button from './Button.svelte';
</script>

<Meta title="Button" component={Button} args={{ primary: true, }} />
const { Story } = defineMeta({
component: Button,
//👇 Creates specific argTypes
argTypes: {
backgroundColor: { control: 'color' },
},
args: {
//👇 Now all Button stories will be primary.
primary: true,
},
});
</script>
```

```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
import type { Meta } from '@storybook/svelte';

import Button from './Button.svelte';
Expand All @@ -182,7 +210,27 @@ const meta = {
export default meta;
```

```ts filename="Button.stories.ts" renderer="svelte" language="ts"
```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
jonniebigodes marked this conversation as resolved.
Show resolved Hide resolved
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';

import Button from './Button.svelte';

const { Story } = defineMeta({
component: Button,
//👇 Creates specific argTypes
argTypes: {
backgroundColor: { control: 'color' },
},
args: {
//👇 Now all Button stories will be primary.
primary: true,
},
});
</script>
```

```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
import type { Meta } from '@storybook/svelte';

import Button from './Button.svelte';
Expand Down Expand Up @@ -289,4 +337,3 @@ const meta: Meta = {

export default meta;
```

65 changes: 46 additions & 19 deletions docs/_snippets/button-story-component-decorator.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,7 +190,23 @@ const meta: Meta<typeof Button> = {
export default meta;
```

```js filename="Button.stories.js" renderer="svelte" language="js"
```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';

import Button from './Button.svelte';
import MarginDecorator from './MarginDecorator.svelte';

const { Story } = defineMeta({
component: Button,
decorators: [() => ({
Component: MarginDecorator,
})],
});
</script>
```

```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
import Button from './Button.svelte';
import MarginDecorator from './MarginDecorator.svelte';

Expand All @@ -200,27 +216,23 @@ export default {
};
```

```html renderer="svelte" language="ts" tabTitle="native-format"
{/* Button.stories.svelte */}

<script>
import { Meta, Template } from '@storybook/addon-svelte-csf';
```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';

import Button from './Button.svelte';
import MarginDecorator from './MarginDecorator.svelte';

import Button from './Button.svelte';
const { Story } = defineMeta({
component: Button,
decorators: [() => ({
Component: MarginDecorator,
})],
});
</script>

<meta title="Button" component="{Button}" />

<template let:args>
<MarginDecorator>
{/*👇 Your component here */}
</MarginDecorator>
</template>
```

```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
import type { Meta } from '@storybook/svelte';

import Button from './Button.svelte';
Expand All @@ -229,12 +241,28 @@ import MarginDecorator from './MarginDecorator.svelte';
const meta = {
component: Button,
decorators: [() => MarginDecorator],
};
} satisfies Meta<typeof YourComponent>;
jonniebigodes marked this conversation as resolved.
Show resolved Hide resolved

export default meta;
```

```ts filename="Button.stories.ts" renderer="svelte" language="ts"
```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';

import Button from './Button.svelte';
import MarginDecorator from './MarginDecorator.svelte';

const { Story } = defineMeta({
component: Button,
decorators: [() => ({
Component: MarginDecorator,
})],
});
</script>
```

```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
import type { Meta } from '@storybook/svelte';

import Button from './Button.svelte';
Expand Down Expand Up @@ -309,4 +337,3 @@ type Story = StoryObj;

export const Example: Story = {};
```

95 changes: 94 additions & 1 deletion docs/_snippets/button-story-controls-primary-variant.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,34 @@ export const Primary: Story = {
};
```

```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';

import Button from './Button.svelte';

const { Story } = defineMeta({
component: Button,
});
</script>

<Story name="Primary" args={{ variant: 'primary' }} />
```

```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
import Button from './Button.svelte';

export default {
component: Button,
};

export const Primary = {
args: {
variant: 'primary',
},
};
```

```js filename="Button.stories.js|jsx" renderer="common" language="js"
import { Button } from './Button';

Expand All @@ -31,6 +59,39 @@ export const Primary = {
};
```

```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';

import Button from './Button.svelte';

const { Story } = defineMeta({
component: Button,
});
</script>

<Story name="Primary" args={{ variant: 'primary' }} />
```

```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
import type { Meta, StoryObj } from '@storybook/svelte';

import Button from './Button.svelte';

const meta = {
component: Button,
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;
jonniebigodes marked this conversation as resolved.
Show resolved Hide resolved

export const Primary: Story = {
args: {
variant: 'primary',
},
};
```

```ts filename="Button.stories.ts|tsx" renderer="common" language="ts-4-9"
// Replace your-framework with the name of your framework
import type { Meta, StoryObj } from '@storybook/your-framework';
Expand All @@ -51,6 +112,39 @@ export const Primary: Story = {
};
```

```svelte filename="Button.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';

import Button from './Button.svelte';

const { Story } = defineMeta({
component: Button,
});
</script>

<Story name="Primary" args={{ variant: 'primary' }} />
```

```ts filename="Button.stories.ts" renderer="svelte" language="ts" tabTitle="CSF"
import type { Meta, StoryObj } from '@storybook/svelte';

import Button from './Button.svelte';

const meta: Meta<typeof Button> = {
component: Button,
};

export default meta;
type Story = StoryObj<typeof Button>;

export const Primary: Story = {
args: {
variant: 'primary',
},
};
```

```ts filename="Button.stories.ts|tsx" renderer="common" language="ts"
// Replace your-framework with the name of your framework
import type { Meta, StoryObj } from '@storybook/your-framework';
Expand Down Expand Up @@ -99,4 +193,3 @@ export const Primary: Story = {
},
};
```

Loading
Loading