Storybook Addon Asset Code
An addon to Storybook that allows for display of asset files in assorted languages.
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 },
],
}
);