Storybook with Next.js & Slice Machine

Prismic Administrative Support FAQs
1

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

Storybook Support

Storybook is now optional, the default option for developing components with mock data is Slice Simulator. Slice Machine will still continue to create Stories automatically for your components if you wish to continue using Storybook.

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.

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.

// .storybook/main.js
const glob = require("glob");
const getStoriesPaths = () => {
  return [
    ".slicemachine/assets/**/*.stories.@(js|jsx|ts|tsx|svelte)",
    "customtypes/**/*.stories.@(js|jsx|ts|tsx|svelte)",
  ].reduce((acc, p) => (glob.sync(p).length ? [...acc, `../${p}`] : acc), []);
};

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.

{
  "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 either the npm or yarn command below:

npm

npm run storybook

yarn

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.

const glob = require("glob");
const getStoriesPaths = () => {
  return [
    ".slicemachine/assets/**/*.stories.@(js|jsx|ts|tsx|svelte)",
    "customtypes/**/*.stories.@(js|jsx|ts|tsx|svelte)",
  ].reduce((acc, p) => (glob.sync(p).length ? [...acc, `../${p}`] : acc), []);
};

module.exports = {
  stories: [...getStoriesPaths(), "../styles/globals.css"]
}