![[create-react-app] Storybook](/assets/images/category/react/background.avif)
Contents
Outline
In this blog post, I will introduce how to install and use Storybook in the React project based on TypeScript created by create-react-app.
Create a React project based on TypeScript using CRA
In order to use Storybook in the React project based on TypeScript created by CRA(create-react-app), run the following command to create a React project based on TypeScript.
npx create-react-app storybook_example --template=typescript
Install Storybook
In order to use Storybook in the React project based on TypeScript, you need to install Storybook. Run the following command to install Storybook.
# cd storybook_example
npm install --save-dev storybook
Initialize Storybook
In order to use Storybook, you need to initialize Storybook and install the necessary libraries. Run the following command to initialize Storybook.
npx storybook init
Then, the following screen will appear asking if you want to install the library required for ESLint.
. ✓
• Adding Storybook support to your "Create React App" based project
✔ Getting the correct version of 12 packages
? We have detected that you're using ESLint. Storybook provides a plugin that gives the best experience with Storybook and helps follow best practices: https://github.com/storybookjs/eslint-plugin-storybook#readme
Would you like to install it? › (Y/n)
In this blog post, I pressed y to install the library required for ESLint. Then, you can see the required libraries are installed and Storybook is automatically configured.
info => Serving static files from ././public at /
info => Starting manager..
info Addon-docs: using MDX2
info => Loading Webpack configuration from `node_modules/react-scripts`
info => Removing existing JavaScript and TypeScript rules.
info => Modifying Create React App rules.
info => Using default Webpack5 setup
<i> [webpack-dev-middleware] wait until bundle finished
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.
babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.
No issues found.
<i> [webpack-dev-middleware] wait until bundle finished: /runtime~main.iframe.bundle.js
<i> [webpack-dev-middleware] wait until bundle finished: /vendors-node_modules_pmmmwh_react-refresh-webpack-plugin_client_ErrorOverlayEntry_js-node_mod-e1efac.iframe.bundle.js
<i> [webpack-dev-middleware] wait until bundle finished: /main.iframe.bundle.js
No issues found.
If there is no problem to install the reuiqred libraries and configure Storybook automatically, you can see the tutorial of Storybook is executed as follows.
You can press Start your 3 minute tour for the tutorial, but in this blog post, I pressed Skip tour to skip the tutorial.
If you install Storybook without any problem, you can see the package.json file is modified as follows.
{
...
"scripts": {
...
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build"
},
"eslintConfig": {
"extends": [
...
"plugin:storybook/recommended"
]
},
...
"devDependencies": {
"@storybook/addon-essentials": "^7.3.2",
"@storybook/addon-interactions": "^7.3.2",
"@storybook/addon-links": "^7.3.2",
"@storybook/addon-onboarding": "^1.0.8",
"@storybook/blocks": "^7.3.2",
"@storybook/preset-create-react-app": "^7.3.2",
"@storybook/react": "^7.3.2",
"@storybook/react-webpack5": "^7.3.2",
"@storybook/testing-library": "^0.2.0",
"babel-plugin-named-exports-order": "^0.0.2",
"eslint-plugin-storybook": "^0.6.13",
"prop-types": "^15.8.1",
"storybook": "^7.3.2",
"webpack": "^5.88.2"
}
}
Also, you can see the following directories and files are created for Storybook.
./.storybook/...:Storybookconfiguration files../src/stories/...:Storybooksample codes.
Run Storybook
After installing Storybook the Storybook development server is started automatically and you can see the Storybook is executed. When you close the Storybook development server, you need to run the following command to start the Storybook development server again.
npm run storybook
Then, the Storybook development server is started. Then, the browser is opened automatically with http://localhost:6006/ and you can see the following screen.
The screen content is the ./src/stories/Configure.mdx file.
Check Storybook
When you press the Button > Docs menu on the left side of the Storybook, you can see the screen as follows.
The screen content is the ./src/stories/Button.stories.ts file.
Check sample code
Let’s see the sample code to understand how to use Storybook. The Button component(./src/stories/Button.tsx) is as follows.
import React from 'react';
import './button.css';
interface ButtonProps {
primary?: boolean;
backgroundColor?: string;
size?: 'small' | 'medium' | 'large';
label: string;
onClick?: () => void;
}
export const Button = ({
primary = false,
size = 'medium',
backgroundColor,
label,
...props
}: ButtonProps) => {
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
return (
<button
type="button"
className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
style=
{...props}
>
{label}
</button>
);
};
The Button component has Props such as primary, backgroundColor, etc. Next, let’s check the contents of the Storybook file(./src/stories/Button.stories.ts).
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
const meta = {
title: 'Example/Button',
component: Button,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
backgroundColor: { control: 'color' },
},
} satisfies Meta<typeof Button>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
primary: true,
label: 'Button',
},
};
export const Secondary: Story = {
args: {
label: 'Button',
},
};
export const Large: Story = {
args: {
size: 'large',
label: 'Button',
},
};
export const Small: Story = {
args: {
size: 'small',
label: 'Button',
},
};
First, prepare the information required for the Storybook screen configuration.
import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './Button';
const meta = {
title: 'Example/Button',
component: Button,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
backgroundColor: { control: 'color' },
},
} satisfies Meta<typeof Button>;
export default meta;
type Story = StoryObj<typeof meta>;
...
The meta is used to set the basic information to be displayed in Storybook. The title set in meta is the name to be displayed in the left menu of Storybook, and you can create a group by / by modifying the title option. In the example code, you can see that it is displayed as Button under the Example group.
The component option in meta specifies the component to be displayed in Storybook. In the example, the Button component is specified.
The tags: ['autodocs'] option is a new feature that automatically creates a document. If you set this value, you can see that the Docs is automatically created under the Example/Button menu as shown in the screenshot above, and you can see the contents of the Storybook file in the document.
After setting the information required for the Storybook screen configuration as above, you can write the Story by changing or setting the Props of the component as follows.
...
export const Primary: Story = {
args: {
primary: true,
label: 'Button',
},
};
export const Secondary: Story = {
args: {
label: 'Button',
},
};
export const Large: Story = {
args: {
size: 'large',
label: 'Button',
},
};
export const Small: Story = {
args: {
size: 'small',
label: 'Button',
},
};
The Story written like the above is shown under the Docs menu of the left menu as follows.
These Story will help other developers to see how the Props are changed and how they are shown, and make it easy for them to use the components.
Completed
Done! we’ve seen how to install and use Storybook in the React project based on TypeScript created by create-react-app. Storybook is a very useful tool for developing and testing components in React projects. Also, Storybook can be used for CDD(Component Driven Development) in React projects, so I hope you can put it in your project and use it.
Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!
App promotion
Deku.Deku created the applications with Flutter.If you have interested, please try to download them for free.
