Nauseating Pumpkin Mush

    @jfrk/storybook-addon-code
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    storybook-addon-code

    React Storybook code addon

    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

    1. clike (withCode(YourCFile, 'clike'))
    2. css (withCode(YourCssFile, 'css'))
    3. html (withCode(YourHtmlFile, 'html'))
    4. js | javascript (withCode(YourJavascriptFile, 'js'))
    5. markup (withCode(YourMarkupFile, 'js'))
    6. mathml (withCode(YourMatHmlFile, 'mathml'))
    7. sass (withCode(YourSassFile, 'sass'))
    8. svg (withCode(YourSvgFile, 'svg'))
    9. ts (withCode(YourTsFile, 'ts'))
    10. typescript (withCode(YourTypescriptFile, 'typescript'))
    11. xml (withCode(YourXmlFile, 'xml'))

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

    Install

    npm i @jfrk/storybook-addon-code

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    2.01 MB

    Total Files

    14

    Last publish

    Collaborators

    • jeanfredrik