Storybook Abstract Addon

A abstract design reference tool

Installation

  yarn add storybook-addon-abstract --dev

addons.js

import 'storybook-addon-abstract/register'

Usage

MDX format

import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'
import { WithAbstract } from 'storybook-addon-abstract'

<Meta title="Example" />

<Preview>
  <Story name="default">
    <WithAbstract abstractId="c53e8159-2e24-4118-b02b-6fe4b3a3afee">
      <h1>Hello World</h1>
    </WithAbstract>
  </Story>
</Preview>

CSF format

import { WithAbstract } from 'storybook-addon-abstract'

export const helloWorld = () => (
  <WithAbstract abstractId="c53e8159-2e24-4118-b02b-6fe4b3a3afee">
    <h1>Hello World</h1>
  </WithAbstract>
)