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:

nextJs
and Typescript

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

Add React Storybook - Storybook/react Github Repository

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,
    },
});