Adding a Storybook


These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.

Creating a Storybook for your Slice Machine project is helpful to keep track of all the interesting UI states of your components, and their use cases for your team to see. It also helps you test them in isolation.

This short guide will help you bootstrap a Storybook for your project.

Before starting

In order for the Storybook to work you will need to have created at least one a Slice/Component using the prismic sm --create-slice command before being able to run your Storybook. Learn how to do so here.

Install Storybook

Prismic CLI version

You will need the 3.8.3-beta.0 version of the Prismic CLI, check by running:

prismic --version

You can go to that version by running the following command:

npm install --global prismic-cli@3.8.3-beta.0

If you run into any problems try uninstalling and reinstalling the CLI.

The following command will install Storybook, register stories, and add all the necessary configurations to preview your local Slices in the Storybook. This configuration includes creating a .storybook folder with enough information to match the stories that will be created in your Slice folders.

// .storybook/main.js
module.exports = {
  // update this line if you create another slices folder/path
  stories: ["../slices/**/*.stories.[tj]s"]

Run this inside your Slice Machine project:

prismic sm --add-storybook

Afterwards, run Storybook. Once you run this command you will be automatically prompted to a new browser tab. You'll already be able to see your Slices/Stories in the left hand navigation.

To open Storybook manually, run:

  • npm
  • yarn
npm run storybook
yarn run storybook

Viewing you Storybook

After running the Storybook command it should automatically open the route to view your Slices. If it doesn't open automatically, the command will give you information on which localhost port is in use. Make sure the storybook property of your sm.json file matches this port. You'll be greeted by a screen much like the one below.

Component code and it's preview in Storybook

Editing your mock Data

When you're done installing Storybook the next thing you'll want to do is to actually add to, or edit your components & mock data. Thankfully Slice Machine has made the process of modelling and mocking your component data locally a smooth experience. Learn more about The Slice Builder now.

The *.stories.js file

Quoting the Storybook official docs: A story captures the rendered state of a UI component. You can browse the stories in the UI and see the code behind them in files that end with .stories.js or .stories.ts. The stories are written in Component Story Format (CSF) an ES6 modules-based standard for writing component examples.