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: Add CSF 4 (experimental) snippets #30269

Draft
wants to merge 4 commits into
base: docs-csf-4
Choose a base branch
from
Draft

Docs: Add CSF 4 (experimental) snippets #30269

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6825384
Add CSF 4 snippets
kylegach Jan 15, 2025
619f909
Fix incorrect API
kylegach Jan 17, 2025
c95eb0d
Merge branch 'docs-csf-4' into docs-csf-4-snippets
kylegach Jan 22, 2025
5d7b457
Changes per latest discussions
kylegach Jan 22, 2025
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
255 changes: 175 additions & 80 deletions docs/_snippets/tags-in-meta-and-story.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,93 @@
```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This diff is unfortunately hard to read. There are two required steps that aren't react-specific:

  1. common snippets must be placed before the react ones
  2. Add tabTitle="CSF 3" to common snippets

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tags-in-preview.md diff is much easier to understand.

import { Button } from './Button';

export default {
component: Button,
/*
* All stories in this file will have these tags applied:
* - autodocs
* - dev (implicit default, inherited from preview)
* - test (implicit default, inherited from preview)
*/
tags: ['autodocs'],
};

export const ExperimentalFeatureStory = {
/*
* This particular story will have these tags applied:
* - experimental
* - autodocs (inherited from meta)
* - dev (inherited from meta)
* - test (inherited from meta)
*/
tags: ['experimental'],
};
```

```ts filename="Button.stories.ts" renderer="common" language="ts-4-9" tabTitle="CSF 3"
// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';

import { Button } from './Button';

const meta = {
component: Button,
/*
* All stories in this file will have these tags applied:
* - autodocs
* - dev (implicit default, inherited from preview)
* - test (implicit default, inherited from preview)
*/
tags: ['autodocs'],
} satisfies Meta<typeof Button>;

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

export const ExperimentalFeatureStory: Story = {
/*
* This particular story will have these tags applied:
* - experimental
* - autodocs (inherited from meta)
* - dev (inherited from meta)
* - test (inherited from meta)
*/
tags: ['experimental'],
};
```

```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';

import { Button } from './Button';

const meta: Meta<typeof Button> = {
component: Button,
/*
* All stories in this file will have these tags applied:
* - autodocs
* - dev (implicit default, inherited from preview)
* - test (implicit default, inherited from preview)
*/
tags: ['autodocs'],
};

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

export const ExperimentalFeatureStory: Story = {
/*
* This particular story will have these tags applied:
* - experimental
* - autodocs (inherited from meta)
* - dev (inherited from meta)
* - test (inherited from meta)
*/
tags: ['experimental'],
};
```

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

Expand Down Expand Up @@ -29,38 +119,46 @@ export const ExperimentalFeatureStory: Story = {
};
```

```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
<script module>
import { defineMeta } from '@storybook/addon-svelte-csf';
```ts filename="Button.stories.js|ts" renderer="react" language="ts" tabTitle="CSF Factory 🧪"
// Learn how to set up subpath imports: TK
import config from '#.storybook/preview.ts';

import Button from './Button.svelte';
import { Button } from './Button';

const { Story } = defineMeta({
component: Button,
/*
* All stories in this file will have these tags applied:
* - autodocs
* - dev (implicit default, inherited from preview)
* - test (implicit default, inherited from preview)
*/
tags: ['autodocs'],
});
</script>
const meta = config.meta({
component: Button,
/*
* All stories in this file will have these tags applied:
* - autodocs
* - dev (implicit default, inherited from preview)
* - test (implicit default, inherited from preview)
*/
tags: ['autodocs'],
});

<!--
This particular story will have these tags applied:
- experimental
- autodocs (inherited from meta)
- dev (inherited from meta)
- test (inherited from meta)
-->
<Story name="ExperimentalFeatureStory" tags={['experimental']} />
export default meta;

export const ExperimentalFeatureStory = meta.story({
/*
* This particular story will have these tags applied:
* - experimental
* - autodocs (inherited from meta)
* - dev (inherited from meta)
* - test (inherited from meta)
*/
tags: ['experimental'],
});
```

```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
import Button from './Button.svelte';
<!-- js & ts-4-9 (when applicable) still needed while providing both CSF 3 & 4 -->
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the time being, we will need react versions of whatever languages are available for other renderers. In this case that means js, ts, and ts-4-9.

I left this comment in there for an easy find/replace once we only have CSF 4 snippets.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you think this is too much of a burden, I can try to adjust the snippets logic to only require one language for the CSF 4 snippets. But I anticipate that being quite tricky, and I'd rather do the "dumb" solution.


export default {
```js filename="Button.stories.js|ts" renderer="react" language="js" tabTitle="CSF Factory 🧪"
// Learn how to set up subpath imports: TK
import config from '#.storybook/preview.ts';

import { Button } from './Button';

const meta = config.meta({
component: Button,
/*
* All stories in this file will have these tags applied:
Expand All @@ -69,9 +167,11 @@ export default {
* - test (implicit default, inherited from preview)
*/
tags: ['autodocs'],
};
});

export const ExperimentalFeatureStory = {
export default meta;

export const ExperimentalFeatureStory = meta.story({
/*
* This particular story will have these tags applied:
* - experimental
Expand All @@ -80,13 +180,16 @@ export const ExperimentalFeatureStory = {
* - test (inherited from meta)
*/
tags: ['experimental'],
};
});
```

```js filename="Button.stories.js" renderer="common" language="js"
```ts filename="Button.stories.js|ts" renderer="react" language="ts-4-9" tabTitle="CSF Factory 🧪"
// Learn how to set up subpath imports: TK
import config from '#.storybook/preview.ts';

import { Button } from './Button';

export default {
const meta = config.meta({
component: Button,
/*
* All stories in this file will have these tags applied:
Expand All @@ -95,9 +198,11 @@ export default {
* - test (implicit default, inherited from preview)
*/
tags: ['autodocs'],
};
});

export const ExperimentalFeatureStory = {
export default meta;

export const ExperimentalFeatureStory = meta.story({
/*
* This particular story will have these tags applied:
* - experimental
Expand All @@ -106,10 +211,10 @@ export const ExperimentalFeatureStory = {
* - test (inherited from meta)
*/
tags: ['experimental'],
};
});
```

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

Expand Down Expand Up @@ -137,12 +242,10 @@ export const ExperimentalFeatureStory = {
<Story name="ExperimentalFeatureStory" tags={['experimental']} />
```

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

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

const meta = {
export default {
component: Button,
/*
* All stories in this file will have these tags applied:
Expand All @@ -151,12 +254,9 @@ const meta = {
* - test (implicit default, inherited from preview)
*/
tags: ['autodocs'],
} satisfies Meta<typeof Button>;

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

export const ExperimentalFeatureStory: Story = {
export const ExperimentalFeatureStory = {
/*
* This particular story will have these tags applied:
* - experimental
Expand All @@ -168,11 +268,38 @@ export const ExperimentalFeatureStory: Story = {
};
```

```ts filename="Button.stories.ts" renderer="common" language="ts-4-9"
// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';
```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';
import Button from './Button.svelte';

const { Story } = defineMeta({
component: Button,
/*
* All stories in this file will have these tags applied:
* - autodocs
* - dev (implicit default, inherited from preview)
* - test (implicit default, inherited from preview)
*/
tags: ['autodocs'],
});
</script>

<!--
This particular story will have these tags applied:
- experimental
- autodocs (inherited from meta)
- dev (inherited from meta)
- test (inherited from meta)
-->
<Story name="ExperimentalFeatureStory" tags={['experimental']} />
```

```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,
Expand Down Expand Up @@ -259,38 +386,6 @@ export const ExperimentalFeatureStory: Story = {
};
```

```ts filename="Button.stories.ts" renderer="common" language="ts"
// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
import type { Meta, StoryObj } from '@storybook/your-framework';

import { Button } from './Button';

const meta: Meta<typeof Button> = {
component: Button,
/*
* All stories in this file will have these tags applied:
* - autodocs
* - dev (implicit default, inherited from preview)
* - test (implicit default, inherited from preview)
*/
tags: ['autodocs'],
};

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

export const ExperimentalFeatureStory: Story = {
/*
* This particular story will have these tags applied:
* - experimental
* - autodocs (inherited from meta)
* - dev (inherited from meta)
* - test (inherited from meta)
*/
tags: ['experimental'],
};
```

```js filename="Button.stories.js" renderer="web-components" language="js"
export default {
title: 'Button',
Expand Down
42 changes: 40 additions & 2 deletions docs/_snippets/tags-in-preview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
```js filename=".storybook/preview.js" renderer="common" language="js"
```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
export default {
// ...rest of preview
/*
Expand All @@ -11,7 +11,7 @@ export default {
};
```

```ts filename=".storybook/preview.ts" renderer="common" language="ts"
```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
// Replace your-renderer with the renderer you are using (e.g., react, vue3)
import type { Preview } from '@storybook/your-renderer';

Expand All @@ -28,3 +28,41 @@ const preview: Preview = {

export default preview;
```

```ts filename=".storybook/preview.js|ts" renderer="react" language="ts" tabTitle="CSF Factory 🧪"
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
import { definePreview } from '@storybook/your-framework/preview';

const config definePreview({
// ...rest of preview
/*
* All stories in your project will have these tags applied:
* - autodocs
* - dev (implicit default)
* - test (implicit default)
*/
tags: ['autodocs'],
});

export default config;
```

<!-- js & ts-4-9 (when applicable) still needed while providing both CSF 3 & 4 -->

```js filename=".storybook/preview.js|ts" renderer="react" language="js" tabTitle="CSF Factory 🧪"
// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
import { definePreview } from '@storybook/your-framework/preview';

const config definePreview({
// ...rest of preview
/*
* All stories in your project will have these tags applied:
* - autodocs
* - dev (implicit default)
* - test (implicit default)
*/
tags: ['autodocs'],
});

export default config;
```
Loading