Storybook Addon Asset Code

An addon to Storybook that allows for display of asset files in assorted languages.

Framework Support

Why

In building out component libraries, there may arise a need to display more assets than default Storybook story allows. This addon will allow you to pass in any file contents as a string and display them in a formatted manner.

Getting Started

Install:

npm i -D storybook-addon-asset-code

Then, add following content to .storybook/addons.js

import 'storybook-addon-asset-code/register';

In the .storybook/config.js file, import the withCode decorator.

import { withAssetCode } from 'storybook-addon-asset-code';
 
addDecorator(withAssetCode);

Now, you can use the assetcode parameter to add a note to each story. This parameter accepts an array of objects that contain the asset language and a string of the file contents.

Supported langages and keys can be found here.

raw-loader is installed with this package in order to load the file contents as a string.

Note: Using a !! before a request will disable all loaders specified in the configuration. This will allow for the contents to be passed as a string.

import cssFile from '!!raw-loader!./button.css';
 
storiesOf('Button', module).add(
  'Default',
  () => {
    return <Button>Hello Button</Button>
  },
  {
    assetcode: [
      { css: cssFile },
    ],
  }
);