storybook-addon-code

storybook-addon-code

A Storybook addon enabling to show off code samples in the Storybook panel for your stories in Storybook.

Getting Started

npm i --save-dev storybook-addon-code

Usage

Create a file called addons.js in your storybook config.

Add following content to it:

import * as CodeAddon from '../src/register';
CodeAddon.setTabs(
    [{ label: 'Sass', type: 'sass' }, {label: 'TypeScript', type: 'typescript'}]
);

setTab function accept and object like {label: 'Sass', type:'sass'} or if you want to have multiple tabs you can pass an array with multiple objects. The label will pe displayed in the Storybook panel.

Then write your stories like this:

import { storiesOf } from '@storybook/react';
import withCode from 'storybook-addon-code';
import Button from './Button';

const styleFile = require('raw-loader!./style.scss');
const typescriptFile  = require('./test.tsx');

storiesOf('Button', module)
  .addDecorator(withCode(typescriptFile, 'typescript'))
  .addDecorator(withCode(styleFile, 'sass'))
  .add('with text', () =>
      <Button onClick={action('clicked')}>Hello Button</Button>
    )

Available list of format's for withCode function

• clike (withCode(YourCFile, 'clike'))
• css (withCode(YourCssFile, 'css'))
• html (withCode(YourHtmlFile, 'html'))
• js | javascript (withCode(YourJavascriptFile, 'js'))
• markup (withCode(YourMarkupFile, 'js'))
• mathml (withCode(YourMatHmlFile, 'mathml'))
• sass (withCode(YourSassFile, 'sass'))
• svg (withCode(YourSvgFile, 'svg'))
• ts (withCode(YourTsFile, 'ts'))
• typescript (withCode(YourTypescriptFile, 'typescript'))
• xml (withCode(YourXmlFile, 'xml'))

Have a look at this example stories to learn more about the withCode API