@whitespace/storybook-addon-code

Storybook Addon Code

This addon for Storybook allows you to display the source code for your components. It uses highlight.js for syntax highlighting. Available languages are listed here.

NOTE: This addon can only be used with the new Component Story Format (CSF) introduced in Storybook 5.2.

Getting Started

npm i --save-dev @whitespace/storybook-addon-code

Register addon

Create a file called addons.js in your storybook config and add the following content:

import registerAddonCode from '@whitespace/storybook-addon-code/register';

registerAddonCode({
  tabs: [
    { label: 'Twig', lang: 'twig' },
    { label: 'Sass', lang: 'scss' },
    { label: 'JavaScript', lang: 'javascript', matchFiles: 'js' },
  ],
});

tabs should be an array with objects for each tab you want to add to the addon panel. Each object can contain these properties:

• label: The displayed label on the tab.
• lang: The language as defined by highlight.js. Available languages are listed here
• matchFiles: Optional. Defaults to the same value as lang. Can be a string representing the file extension for files that should be included. Can also be a regular expression to test the filename against. Can also be function that receives the filename and returns true or false.

Add the Webpack loader

Update or create webpack.config.js inside your .storybook directory by adding require.resolve('@whitespace/storybook-addon-code/loader') as a pre-loader to .stories.js files as shown below.

module.exports = async ({ config, mode }) => {
  // ...

  config.module.rules.push({
    test: /\.stories\.jsx?$/,
    loaders: [
      /*
      This loader should be first in the list unless you
      want tranfromations from other loaders to affect
      what’s shown in the code tabs
      */
      require.resolve('@whitespace/storybook-addon-code/loader'),
      // ...
    ],
    enforce: 'pre',
  });

  // ...

  // Return the altered config
  return config;
};

Usage

The imported files inside the .stories.js file that matches the registered tabs will be extracted automatically. Install and use null-loader to include files that are not required by the actual stories file.

import Component from './button.twig';
import '!!null-loader!./button.scss';

export default {
  title: 'Example button',
};

export const withUrl = () =>
  Component({
    text: 'Lorem ipsum',
    url: '#',
  });

export const withoutUrl = () =>
  Component({
    text: 'Lorem ipsum',
  });