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.

Learn how to create a Storybook for your Next.js components for easy fast automatic documentation.


What is Storybook?

Storybook is a UI component explorer for frontend 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
prismic sm --add-storybook

What does this Command do?

  • Install @react/storybook.
  • Register stories.
  • Add all the necessary configurations to preview your local Slices in the Storybook, including a .storybook folder with information to match the stories created in your Slice folders.
Copy
// .storybook/main.js
module.exports = {
  // update this line if you create another slices folder/path
  stories: ["../slices/**/*.stories.[tj]s"]
}

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 on http://localhost:8888. 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
module.exports = {
  stories: ["../slices/**/*.stories.[tj]s", "../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.