import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Guides/Installation/Storybook" />

# Installation: Storybook

This guide applies to Storybook setups that document Preply components libraries, and assumes you have read and followed the steps outlined in the [Installation: Libaries](/story/guides-installation-libraries--page) guide.

## Packages

You need to install `@preply/ds-web-root` which provides a single entry point to instantiate all the necessary resources in Storybook docs. Additionally, we need to add `@preply/ds-web-lib` to `devDependencies` as well.

```
yarn add --dev @preply/ds-web-root @preply/ds-web/lib
```

## Configure Storybook

We need to add `<RootProvider/>` to Storybook's decorators.

How to achieve this will depend on your Storybook is configured.

In case your Storybook uses a `config.js` file to do so, add a decorater with `RootProvider`.

```javascript
import { RootProvider } from '@preply/ds-web-root';

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

addDecorator(withDSProvider);
```

In case you are using a `preview.ts` file, you will need to export `decorators` from there. You can define your decorators in a separator `tsx` file, such as `decorators.tsx`.

```tsx
// 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];
```

See also: [Storybook's official docs](https://storybook.js.org/docs/react/writing-stories/decorators).
