Storybook

Beta

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

Package versions

These docs use the following package versions:

  • prismic-reactjs: v1.3
  • @prismicio/client: v5

The docs will soon be updated to use the latest versions of these packages. If you wish to use the latest versions today, you can update your project by following the migration guides for each package.

Learn how to use Storybook to develop components with mock data.


What is Storybook?

Storybook is a UI component explorer for front-end developers. Slice Machine and Storybook combine the mock data and the Next.js component so you can develop your component and preview how it will looks without having to publish content in the CMS repository, thus speeding up your development process.


Install Storybook

Open a new terminal window and run the following command inside your Slice Machine project.

Copy
npx storybook init

What does this command do?

  • Installs @react/storybook and other dependencies.
  • Register stories.

Update the main.js file

Navigate to .storybook/main.js and add the following config to get the paths for your Slices that Slice Machine automatically generates.

Copy
// .storybook/main.js
const { getStoriesPaths } = require('slice-machine-ui/helpers/storybook')

module.exports = {
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
    ...getStoriesPaths()
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  "framework": "@storybook/react"
}

Update your sm.json

You need to add a storybook field in your sm.json file to direct to the port in which Storybook is running. In the example below we're directing to http://localhost:6006/, Storybook will tell you what port it's running on when you install it.

Copy
{
  "apiEndpoint": "https://mon29test.prismic.io/api/v2",
  "libraries": [
    "@/slices"
  ],
  "storybook": "http://localhost:6006",
  "_latest": "0.1.0"
}

Run Storybook

Finally, if Storybook isn't launched yet, open a new terminal window and launch it. You will be automatically prompted to a new browser tab. You'll already be able to see your Slices or Stories in the left-hand navigation.

To open Storybook manually, run:

  • npm
  • yarn
Copy
npm run storybook
Copy
yarn run storybook

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.


Using Global CSS

To use Global CSS files like this with the Storybook you need to declare it in the Storybook settings file located ../.storybook/main.js. Here you'll need to add the path to your CSS file, you can see what this file should look like with the path to your CSS below.

Copy
const { getStoriesPaths } = require('slice-machine-ui/helpers/storybook')
module.exports = {
  stories: [...getStoriesPaths(), "../styles/globals.css"]
}

Related Articles


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.