@greenberry/storybook-template

Storybook template

This is a template project. To use this in a new project follow the instructions in first steps.

First steps

• Fork this repository
  • Click the plus button on the left side of the screen
  • Click fork
  • Provide the name for the fork
• Clone the forked repository to your machine
• Update name property package.json to reflect your project. Ensure it begins with @greenberry to make it private
• Set this template repo as upstream so you can rebase for updates
  • Inside your local repository run the following command;
  • git remote add upstream [e-mail]:greenberrynl/storybook.git
  • Do a fetch git fetch upstream master

File structure

src/
  constants/
    myConstants.js   <-- Global constants are used in multiple places or exposed to the world
  components/
    MyComponent/
      index.js       <-- The component
      index.story.js <-- The component's story
      index.spec.js  <-- (Optional) Component unit tests
      utils.js       <-- (Optional) Local utils are only used by this component
      utils.spec.js  <-- Tests of local utils
      constants.js   <-- (Optional) Local constants
      assets/        <-- Assets and resources used by the component can be put here
        image.svg
  utils/             <-- Global utils are used by multiple components
    myUtil/
      index.js       <-- The util
      index.spec.js  <-- The util tests
      constants.js   <-- (Optional) Local constants

Story format

Example

import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { text } from '@storybook/addon-knobs';

import Button from './index';

storiesOf('UI|Button', module)
  .addParameters({ options: { selectedPanel: 'storybook/actions/panel' } })
  .add(
    'with text',
    () => <Button onClick={action('onClick')}>Hello Button</Button>,
    { info: 'Describe your components usage here' }
  )

Testing

For running test we use Jest a test running framework created by Facebook. By using "Storyshots" we are able to automatically generate snapshots for each story. This means that all the cases/states visualised inside Storybook are automatically tests and verified.

For learning more about Jest consult their documentation

Running tests

yarn test

Update outdated snapshots

yarn test -u

Publishing

To use the latest changes we will need to publish the a new version to the NPM registry for this we will use Yarn.

yarn publish

When running the publish command a "hook" will be fired triggering the prepublish command configured in the package.json. This will prompt you to specify a new version. For versioning we use Semver. So given a version number MAJOR.MINOR.PATCH(1.0.0), increment the:

• MAJOR version when you make incompatible API changes,
• MINOR version when you add functionality in a backwards compatible manner, and
• PATCH version when you make backwards compatible bug fixes.

Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format.

When you are not signed in to NPM yet, you will be prompted to sign in after which it will start uploading the package.

Addons

By default, Storybook comes with a way to list stories and visualize them. Addons implement extra features for Storybooks to make them more useful. Addons in this project;

• A11y
• Actions
• Backgrounds
• Dark theme
• Info
• Knobs
• Storyshots
• Viewport