import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-D-oZzXNK.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-8vvjMMnP.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,p:`p`,pre:`pre`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Guides/Installation/Storybook`}),`
`,(0,c.jsx)(t.h1,{id:`installation-storybook`,children:`Installation: Storybook`}),`
`,(0,c.jsxs)(t.p,{children:[`This guide applies to Storybook setups that document Preply components libraries, and assumes you have read and followed the steps outlined in the `,(0,c.jsx)(t.a,{href:`/story/guides-installation-libraries--page`,children:`Installation: Libaries`}),` guide.`]}),`
`,(0,c.jsx)(t.h2,{id:`packages`,children:`Packages`}),`
`,(0,c.jsxs)(t.p,{children:[`You need to install `,(0,c.jsx)(t.code,{children:`@preply/ds-web-root`}),` which provides a single entry point to instantiate all the necessary resources in Storybook docs. Additionally, we need to add `,(0,c.jsx)(t.code,{children:`@preply/ds-web-lib`}),` to `,(0,c.jsx)(t.code,{children:`devDependencies`}),` as well.`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{children:`yarn add --dev @preply/ds-web-root @preply/ds-web/lib
`})}),`
`,(0,c.jsx)(t.h2,{id:`configure-storybook`,children:`Configure Storybook`}),`
`,(0,c.jsxs)(t.p,{children:[`We need to add `,(0,c.jsx)(t.code,{children:`<RootProvider/>`}),` to Storybook's decorators.`]}),`
`,(0,c.jsx)(t.p,{children:`How to achieve this will depend on your Storybook is configured.`}),`
`,(0,c.jsxs)(t.p,{children:[`In case your Storybook uses a `,(0,c.jsx)(t.code,{children:`config.js`}),` file to do so, add a decorater with `,(0,c.jsx)(t.code,{children:`RootProvider`}),`.`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-javascript`,children:`import { RootProvider } from '@preply/ds-web-root';

function withDSProvider(storyFn) {
    return (
        <RootProvider target={window.document.body} theme="tokyo-ui">
            {storyFn()}
        </RootProvider>
    );
}

addDecorator(withDSProvider);
`})}),`
`,(0,c.jsxs)(t.p,{children:[`In case you are using a `,(0,c.jsx)(t.code,{children:`preview.ts`}),` file, you will need to export `,(0,c.jsx)(t.code,{children:`decorators`}),` from there. You can define your decorators in a separator `,(0,c.jsx)(t.code,{children:`tsx`}),` file, such as `,(0,c.jsx)(t.code,{children:`decorators.tsx`}),`.`]}),`
`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`// decorators.ts
import { RootProvider } from '@preply/ds-web-root';

export const withProviders = Story => (
    ...
    <RootProvider target={document.body} theme="tokyo-ui">
        ...
        <Story />
    </RootProviderBeta>
    ...
);

// preview.ts
import { withProviders } from './decorators';

export const decorators = [withProviders];
`})}),`
`,(0,c.jsxs)(t.p,{children:[`See also: `,(0,c.jsx)(t.a,{href:`https://storybook.js.org/docs/react/writing-stories/decorators`,rel:`nofollow`,children:`Storybook's official docs`}),`.`]})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};