We provide a custom theme for storybook
// .storybook/manager.js
import { addons } from '@storybook/addons'
import theme from '@toptal/davinci-storybook-theme'
addons.setConfig({
theme,
// optional
brandTitle: 'Project name',
})
All styles are customizable. For details, check the official documentation.
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.
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,
},
}
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