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 6 commits
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
128 changes: 122 additions & 6 deletions docs/_snippets/button-group-story.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
```ts filename="ButtonGroup.stories.ts" renderer="angular" language="ts"
````ts filename="ButtonGroup.stories.ts" renderer="angular" language="ts"
jonniebigodes marked this conversation as resolved.
Show resolved Hide resolved
import type { Meta, StoryObj } from '@storybook/angular';

import { moduleMetadata } from '@storybook/angular';
Expand Down Expand Up @@ -48,7 +48,7 @@ export const Pair = {
orientation: 'horizontal',
},
};
```
````

```ts filename="ButtonGroup.stories.ts|tsx" renderer="react" language="ts-4-9"
import type { Meta, StoryObj } from '@storybook/react';
Expand Down Expand Up @@ -160,7 +160,46 @@ 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"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';

import ButtonGroup from './ButtonGroup.svelte';

//👇 Imports the Button stories
import * as ButtonStories from './Button.stories.svelte';

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

<Story
name="Primary"
args={{
buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
orientation: 'horizontal',
}}
/>

<Story
name="Secondary"
args={{
backgroundColor: '#ff0',
label: '😄👍😍💯',
}}
/>

<Story
name="Tertiary"
args={{
backgroundColor:'#ff0',
label: '📚📕📈🤓',
}}
/>
```

```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 +217,46 @@ 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"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';

import ButtonGroup from './ButtonGroup.svelte';

//👇 Imports the Button stories
import * as ButtonStories from './Button.stories.svelte';

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

<Story
name="Primary"
args={{
buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
orientation: 'horizontal',
}}
/>

<Story
name="Secondary"
args={{
backgroundColor: '#ff0',
label: '😄👍😍💯',
}}
/>

<Story
name="Tertiary"
args={{
backgroundColor:'#ff0',
label: '📚📕📈🤓',
}}
/>
```

```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 +279,46 @@ 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"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';

import ButtonGroup from './ButtonGroup.svelte';

//👇 Imports the Button stories
import * as ButtonStories from './Button.stories.svelte';

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

<Story
name="Primary"
args={{
buttons: [{ ...ButtonStories.Primary.args }, { ...ButtonStories.Secondary.args }],
orientation: 'horizontal',
}}
/>

<Story
name="Secondary"
args={{
backgroundColor: '#ff0',
label: '😄👍😍💯',
}}
/>

<Story
name="Tertiary"
args={{
backgroundColor:'#ff0',
label: '📚📕📈🤓',
}}
/>
```

```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 +467,3 @@ export const Pair: Story = {
},
};
```

23 changes: 0 additions & 23 deletions docs/_snippets/button-story-click-handler-simplificated.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,28 +119,6 @@ export const Text = {
};
```

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

<script>
import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
import Button from './Button.svelte';
</script>

{/*
See https://storybook.js.org/docs/essentials/actions#action-argtype-annotation
to learn how to set up argTypes for actions
*/}

<Meta title="Button" component={Button} argTypes={{ onClick: { action: "onClick" }, }} />

<template let:args>
<button {...args} on:click="{args.onClick}" />
</template>

<Story name="Text" args={{ label: 'Hello' }}/>
```

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

Expand Down Expand Up @@ -262,4 +240,3 @@ export const Text: Story = {
args: {},
};
```

17 changes: 0 additions & 17 deletions docs/_snippets/button-story-click-handler.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -149,22 +149,6 @@ export const Text = {
};
```

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

<script>
import { Meta, Story } from '@storybook/addon-svelte-csf';
import { action } from '@storybook/addon-actions';
import Button from './Button.svelte';
</script>

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

<Story name="Text"> <Button text="Hello" on:click={action('clicked')}/> </Story>
```

```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9"
import type { Meta, StoryObj } from '@storybook/svelte';
import { action } from '@storybook/addon-actions';
Expand Down Expand Up @@ -323,4 +307,3 @@ export const Text: Story = {
render: () => html`<custom-button label="Hello" @click=${action('clicked')}></custom-button>`,
};
```

73 changes: 59 additions & 14 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 @@ -52,7 +52,6 @@ const meta = {
} satisfies Meta<typeof Button>;

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

```ts filename="Button.stories.ts|tsx" renderer="react" language="ts"
Expand Down Expand Up @@ -93,7 +92,7 @@ export default {
```

```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts-4-9"
import type { Meta, StoryObj } from 'storybook-solidjs';
import type { Meta } from 'storybook-solidjs';

import { Button } from './Button';

Expand All @@ -110,7 +109,6 @@ const meta = {
} satisfies Meta<typeof Button>;

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

```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts"
Expand All @@ -134,7 +132,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 +168,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 +208,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 +335,3 @@ const meta: Meta = {

export default meta;
```

Loading