This package provides a zero-config installation of storybook for use by apps developed by coko.

Get started

Remove any previous installation of storybook-related packages to avoid conflicts.

yarn add --dev @coko/storybook

You should now have access to a script named coko-storybook.
You can run it directly, or add it your package.json for convenience.

// package.json
{
  "scripts": {
    "storybook": "coko-storybook"
  }
}

The script will look for a folder in your root directory called stories, and for files with names that end with stories.js. See the configuration section to find out how to override defaults.

Configuration

Changing the port

The storybook app is set to open on port 5000 by default.
You can change that via the STORYBOOK_PORT environment variable.

Changing the existing configuration

All overrides in your app need to exist under a folder named .storybook inside your project's root folder. There are two files you can use to extend / adjust current behaviour.

main.js

Just export an object with your changes. It's worth noting that the object here will not completely replace the existing configuration, but will be merged with the defaults.

For example, you can change the stories folder, and the rest of the config will remain the same:

// .storybook/main.js
module.exports = {
  stories: ['./mycustomfolder/**/*.stories.js'],
}

preview.js

This file is particularly useful for adding decorators around the rendered components in your stories. This package already takes care of the theme being provided for you (just make sure that the theme file's location is app/theme.js). Note that if you add a custom preview file, it will run after the default preview file has run. So it doesn't replace it, but extends it.

If you want to add another decorator to your components for some reason:

// .storybook/preview.js
import React from 'react'
import { addDecorator } from '@coko/storybook'

addDecorator(storyFn => <div my-attribute="decor">{storyFn()}</div>)