Socket
Socket
Sign inDemoInstall

@toptal/davinci-storybook-theme

Package Overview
Dependencies
3
Maintainers
1
Versions
702
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@toptal/davinci-storybook-theme

Custom theme for storybook


Version published
Weekly downloads
1.5K
decreased by-11.35%
Maintainers
1
Created
Weekly downloads
 

Readme

Source

Theming

We provide a custom theme for storybook

Usage

// .storybook/manager.js

import { addons } from '@storybook/addons'
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

Keywords

FAQs

Last updated on 29 Apr 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc