StoryBook - Installation on Next with Typescript

About

To develop React Component in isolation with Hot Reloading, you can add a React storybook to your development environment.

This is short installation of a React Storybook on:

Version

Version of the package used in this installation

  • NextJs: 9.3.5
  • React: 16.13.1
  • typescript: ^3.8.3
  • @storybook/react: ^5.3.18

Steps

The configuration was done following this Storybook TypeScript Doc with th default preset (even if next use babel, the ts-loader preset just works).

Install Storybook for React

npx -p @storybook/cli sb init 
  • This has add the following package
"@babel/core": "^7.9.0",
"babel-loader": "^8.1.0",
"@storybook/addon-actions": "^5.3.18",
"@storybook/addon-links": "^5.3.18",
"@storybook/addons": "^5.3.18",
"@storybook/react": "^5.3.18",

Add Typescript support

  • Typescript (Using the preset works like a charm)
yarn add -D @storybook/preset-typescript ts-loader fork-ts-checker-webpack-plugin
  • then add @storybook/preset-typescript in the add-on property in [main.js](../.storybook/main.js)
module.exports = {
  stories: ['../stories/**/*.stories.(ts|tsx|js|jsx|mdx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/preset-typescript'
  ],
};

Add-ons

  • Add the docs add-on DocsPage to get the props
 
yarn add @storybook/addon-docs --dev
  • Add the knobs
yarn add @storybook/addon-knobs --dev
  • Update the config file
module.exports = {
  stories: ['../stories/**/*.stories.(ts|tsx|js|jsx|mdx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links', {
      name: "@storybook/addon-docs",
      options: {
        configureJSX: true,
      },
    },
    '@storybook/preset-typescript',
    '@storybook/addon-knobs/register'
  ],
};

Parameters

parameters - No idea what it's for but yeah, it was in the addon-docs doc

import { addParameters } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

addParameters({
    docs: {
        container: DocsContainer,
        page: DocsPage,
    },
});

Powered by ComboStrap