import{j as o}from"./index-bIIEL2MP.js";import{useMDXComponents as r}from"./index-CO-0pc0F.js";import{M as s}from"./index-Z-6k0Xrj.js";import{p as i}from"./docsPage-CT2vyZOj.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";function n(t){const e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...r(),...t.components};return o.jsxs(o.Fragment,{children:[o.jsx(s,{title:"Contributing/Writing stories",parameters:{...i}}),`
`,o.jsx(e.h1,{id:"writing-component-stories",children:"Writing component stories"}),`
`,o.jsx(e.p,{children:'As well as writing your component, you should also document how to use it using Storybook "stories."'}),`
`,o.jsx(e.h2,{id:"whats-a-story",children:"What's a story?"}),`
`,o.jsxs(e.p,{children:["Paraphrasing ",o.jsx(e.a,{href:"https://storybook.js.org/docs/get-started/whats-a-story",rel:"nofollow",children:"Storybook's definition"}),": A story captures the rendered state of a Svelte component, given certain props. Translation: It's a demo of what your component can do."]}),`
`,o.jsx(e.p,{children:'In Storybook, you create a story page for your component, which can itself contain several "stories" or demos of how your component works.'}),`
`,o.jsxs(e.p,{children:["To make a story page, you'll create a ",o.jsx(e.code,{children:"*.stories.svelte"})," and a ",o.jsx(e.code,{children:"*.mdx"})," file next to your component like this:"]}),`
`,o.jsx(e.pre,{children:o.jsx(e.code,{children:`src/
  components/
    YourComponent/
      YourComponent.mdx
      YourComponent.svelte
      YourComponent.stories.svelte
`})}),`
`,o.jsxs(e.p,{children:["The ",o.jsx(e.code,{children:"*.stories.svelte"})," component is where you will define the stories or specific demos of your component. The ",o.jsx(e.code,{children:"*.mdx"})," file is where you can write extended documentation about your component."]}),`
`,o.jsx(e.h2,{id:"how-do-i-write-stories",children:"How do I write stories?"}),`
`,o.jsxs(e.p,{children:["Read more about writing stories using the Svelte component story format (CSF) ",o.jsx(e.a,{href:"https://github.com/storybookjs/addon-svelte-csf?tab=readme-ov-file#-usage",rel:"nofollow",children:"here"})," and writing accompanying MDX docs ",o.jsx(e.a,{href:"https://storybook.js.org/docs/writing-docs/mdx",rel:"nofollow",children:"here"}),"."]})]})}function x(t={}){const{wrapper:e}={...r(),...t.components};return e?o.jsx(e,{...t,children:o.jsx(n,{...t})}):n(t)}const f=[];export{f as __namedExportsOrder,x as default};