```js // MyComponent.stories.js import MyComponent from './MyComponent.svelte'; import someData from './data.json'; export default { /* 👇 The title prop is optional. * See https://storybook.js.org/docs/7.0/svelte/configure/overview#configure-story-loading * to learn how to generate automatic titles */ title: 'MyComponent', component: MyComponent, includeStories: ['SimpleStory', 'ComplexStory'], // 👈 Storybook loads these stories excludeStories: /.*Data$/, // 👈 Storybook ignores anything that contains Data }; export const simpleData = { foo: 1, bar: 'baz' }; export const complexData = { foo: 1, foobar: { bar: 'baz', baz: someData } }; /* *👇 Render functions are a framework specific feature to allow you control on how the component renders. * See https://storybook.js.org/docs/7.0/svelte/api/csf * to learn how to use render functions. */ export const SimpleStory = { render: (args) => ({ Component: MyComponent, props: args, }), args: { data: simpleData, }, }; export const ComplexStory = { render: (args) => ({ Component: MyComponent, props: args, }), args: { data: complexData, }, }; ```