19 lines
3 KiB
JavaScript
19 lines
3 KiB
JavaScript
import{M as c}from"./chunk-PCJTTTQV-d59198dd.js";import{p as a,j as o}from"./jsx-runtime-539b76a3.js";import{u as i}from"./index-297ebefe.js";import"./iframe-3fdd9734.js";import"../sb-preview/runtime.js";import"./extends-b40c5bac.js";import"./_commonjsHelpers-725317a4.js";import"./index-d475d2ea.js";import"./index-d37d4223.js";import"./index-1a79a776.js";import"./index-356e4a49.js";function p(r={}){const{wrapper:s}=Object.assign({},i(),r.components);return s?o.jsx(s,{...r,children:o.jsx(n,{})}):n();function n(){const e=Object.assign({p:"p",img:"img",h1:"h1",h2:"h2",a:"a",code:"code",pre:"pre"},i(),r.components);return o.jsxs(o.Fragment,{children:[o.jsx(c,{title:"Contributing/Writing stories",parameters:{...a}}),`
|
|
`,o.jsx(e.p,{children:o.jsx(e.img,{src:"https://graphics.thomsonreuters.com/style-assets/images/logos/reuters-graphics-logo/svg/graphics-logo-color-dark.svg",alt:""})}),`
|
|
`,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/svelte/writing-stories/introduction",target:"_blank",rel:"nofollow noopener noreferrer",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"})," file next to your component like this:"]}),`
|
|
`,o.jsx(e.pre,{children:o.jsx(e.code,{children:`src/
|
|
components/
|
|
YourComponent/
|
|
YourComponent.svelte
|
|
YourComponent.stories.svelte
|
|
`})}),`
|
|
`,o.jsx(e.p,{children:"Your component's story page will then have at least one story that shows how it can be used."}),`
|
|
`,o.jsx(e.h2,{id:"how-do-i-write-stories",children:"How do I write stories?"}),`
|
|
`,o.jsx(e.p,{children:"Read through the recipes docs for some common examples of how you may want to write and customise your stories."}),`
|
|
`,o.jsx(e.p,{children:`If you're comparing the recipes to Storybook's own docs, note that all the examples use "Svelte Native" story format. (Storybook is technically a React-first tool that's been retrofit to also support a number of other frameworks, including Svelte.)`})]})}}const m=()=>{throw new Error("Docs-only story")};m.parameters={docsOnly:!0};const t={title:"Contributing/Writing stories",parameters:{...a},tags:["stories-mdx"],includeStories:["__page"]};t.parameters=t.parameters||{};t.parameters.docs={...t.parameters.docs||{},page:p};const v=["__page"];export{v as __namedExportsOrder,m as __page,t as default};
|
|
//# sourceMappingURL=writing-component-stories.stories-1c4fd217.js.map
|