Storybook

Prerequisites

• Ensure Storybook is already set up in your project.
• Install Reablocks in your project (if you haven't already) using npm.

Create or Update the preview.jsx File

The preview.jsx file in your .storybook directory allows you to customize how stories are rendered in Storybook. If you don't have this file yet, you'll need to create it to incorporate the ThemeProvider.

• Navigate to Your .storybook Folder.
• Create or Edit preview.jsx.

Structuring the preview.jsx file in Storybook with Reablocks

When incorporating Reablocks into Storybook, one of the key steps is ensuring your design tokens are applied across all stories. This is efficiently achieved by using the ThemeProvider as a decorator within your .storybook/preview.jsx file. Below is an example showcasing how we typically structure this file:

• Import Required Modules: Start by importing the necessary modules, including the DocsContainer from Storybook's addon-docs, the ThemeProvider from Reablocks, and your theme file.

import { DocsContainer } from '@storybook/addon-docs';
import { ThemeProvider } from 'reablocks';
import { theme } from '[INSERT_PATH_TO_YOUR_THEME]';

• Set Up Decorators: Decorators are utilized to wrap stories for global style or functionality application. Here, we use the ThemeProvider to ensure that your design tokens are applied to every story.

export const decorators = [
  Story => (
    <ThemeProvider value={theme}>
      <Story />
    </ThemeProvider>
  )
];

• Configure Global Parameters: Define global parameters to adjust the Storybook environment according to your needs. This configuration includes setting the layout, customizing the documentation container to include the ThemeProvider, and hiding the no-controls warning.

export const parameters = {
  layout: 'centered',
  docs: {
    container: ({ context, children }) => (
      <DocsContainer context={context}>
        <ThemeProvider value={theme}>
          {children}
        </ThemeProvider>
      </DocsContainer>
    )
  },
  controls: {
    hideNoControlsWarning: true
  }
};

Complete Example

Putting it all together, your .storybook/preview.jsx file will look something like this:

import { DocsContainer } from '@storybook/addon-docs';
import { ThemeProvider } from 'reablocks';
import { theme } from '[INSERT_PATH_TO_YOUR_THEME]';
 
export const decorators = [
  Story => (
    <ThemeProvider value={theme}>
      <Story />
    </ThemeProvider>
  )
];
 
export const parameters = {
  layout: 'centered',
  docs: {
    container: ({ context, children }) => (
      <DocsContainer context={context}>
        <ThemeProvider value={theme}>
          {children}
        </ThemeProvider>
      </DocsContainer>
    )
  },
  controls: {
    hideNoControlsWarning: true
  }
};