storybook/docs/snippets/react/list-story-template.ts.mdx
2022-07-15 11:09:15 -07:00

54 lines
1.1 KiB
Plaintext

```ts
// List.stories.ts|tsx
import React from 'react';
import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
import { List } from './List';
import { ListItem } from './ListItem';
//👇 Imports a specific story from ListItem stories
import { Unchecked } from './ListItem.stories';
export default {
/* 👇 The title prop is optional.
* Seehttps://storybook.js.org/docs/7.0/react/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'List',
component: List,
} as ComponentMeta<typeof List>;
//👇 The ListTemplate construct will be spread to the existing stories.
const ListTemplate: ComponentStoryObj<typeof List> = {
render: ({ items, ...args }) => {
return (
<List>
{items.map((item) => (
<ListItem {...item} />
))}
</List>
);
},
};
export const Empty = {
...ListTemplate,
args: {
items: [],
},
};
export const OneItem = {
...ListTemplate,
args: {
items: [
{
...Unchecked.args,
},
],
},
};
```