Theming

We provide a custom theme for storybook

Usage

// .storybook/manager.js

import { addons } from '@storybook/manager-api'
import theme from '@toptal/davinci-storybook-theme'

addons.setConfig({
  theme,
  // optional
  brandTitle: 'Project name',
})

Customization

All styles are customizable. For details, check the official documentation.

Custom Storybook Components

This library brings several custom components that are related to Docs Page (@storybook/addon-docs). They were especially created for extending default @storybook/addon-docs functionality.

Page

This component might be used to replace a default Page component. It was especially created to support a consistent shape of Docs Page.

The current shape is:

  <Title />
  <Subtitle />
  <Description />
  <PrimatyDocsStory />
  <ArgsTable story={PRIMARY_STORY} />
  <Stories />

To start using Page component, you need to define a page option in docs section of parameters.

Example of preview.js:

import { Page } from '@toptal/davinci-storybook-theme'

export const parameters = {
  docs: {
    page: Page,
  },
}

DocsStory

A custom DocsStory component that might be used separately (for example: in MDX files). It is not override but extends the default DocsStory component from @storybook/addon-docs package

Example of usage in MDX files:

import { DocsStory } from '@toptal/davinci-storybook-theme'

## Primary Example
<DocsStory id='example-button--primary' />

NOTE: DocsStory only works on pages that are linked to stories, that means that is required for it to work