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