How to add custom fonts and viewports in storybook?

Hi devs,

In this article, we will discuss how to add and customize our Storybook dashboard with:

• Custom font
• Custom viewport

Step-by-Step Guide

Step 1: Setting Up Custom Viewports

To add custom viewports, you need to define them in your Storybook configuration. This allows you to simulate different screen sizes and resolutions. Here’s how you can do it:

Define Custom Viewports: Create a customViewports object with your desired viewports. Each viewport should have a name and styles for width and height.

const customViewports = {
  Mac: {
    name: 'Mac',
    styles: {
      width: '1728px',
      height: '868px',
    },
  },
  Windows: {
    name: 'Windows',
    styles: {
      width: '1280px',
      height: '559px',
    },
  },
  'Business Desktop': {
    name: 'Business Desktop',
    styles: {
      width: '3840px',
      height: '2160px',
    },
  },
  'Minimized Windows': {
    name: 'Minimized Windows',
    styles: {
      width: '1024px',
      height: '768px',
    },
  },
};

• Add Viewports to Parameters: Integrate the customViewports into your Storybook’s parameters.

const parameters = {
  viewport: {
    viewports: { ...customViewports },
  },
};

Step 2: Customizing Fonts

• To customize fonts in your Storybook, you can define global types and use a theme provider. This allows you to switch between different fonts easily.

Define Fonts: Create a Font object with your font options.

const Font = {
  FELLIX: 'fellix',
  ROBOTO: 'roboto',
};

• Set Up Global Types: Define globalTypes to manage the font settings. This includes a description, default value, and toolbar configuration.

const globalTypes = {
  font: {
    description: 'Global font for components',
    defaultValue: Font.ROBOTO,
    toolbar: {
      title: 'Fonts',
      items: [
        { value: Font.FELLIX, title: 'Fellix' },
        { value: Font.ROBOTO, title: 'Roboto' },
      ],
      dynamicTitle: true,
    },
  },
};

• Create a Theme Provider: Use a theme provider to apply the selected font globally. This involves creating a withThemeProvider decorator.

const withThemeProvider = (Story, storyContext) => {
  const { globals } = storyContext;
  const currentFont = globals.font;

  return (
    <ThemeProvider theme={currentTheme} font={currentFont}>
      <GlobalStyles />
      <Story />
    </ThemeProvider>
  );
};

• Add the Decorator: Finally, add the withThemeProvider decorator to your Storybook configuration.

export const decorators = [withThemeProvider];

Conclusion

By following these steps, you can easily add and customize your Storybook dashboard with custom fonts and viewports. This will help you create a more tailored and visually appealing development environment.

Please do not forget export variables -

export { decorators, globalTypes, parameters };

Happy coding! 🚀