【Next.js】Storybookを導入してみた

.storybook/main.js
1const path = require("path");
2const SRC_PATH = path.join(__dirname, '../src');
3
4module.exports = {
5  stories: ['../src/**/*.stories.tsx'],
6  addons: [
7    '@storybook/addon-a11y',
8    '@storybook/addon-actions',
9    '@storybook/addon-knobs',
10    '@storybook/addon-links',
11  ],
12  webpackFinal: async(config, {configType}) => {
13    config.module.rules.push({
14      test: /\.(ts|tsx)$/,
15      include: [SRC_PATH],
16        use: [
17          {
18            loader: require.resolve('babel-loader'),
19            options: {
20              presets: [['react-app', { flow: false, typescript: true }]],
21            }
22          },
23          { loader: require.resolve('react-docgen-typescript-loader') }
24        ]
25    });
26    config.resolve.extensions.push('.ts', '.tsx');
27    return config;
28  }
29};

.storybook/preview.js
1import { addDecorator } from '@storybook/react';
2import { withInfo } from '@storybook/addon-info';
3import { withKnobs } from '@storybook/addon-knobs';
4import { withA11y } from '@storybook/addon-a11y';
5
6addDecorator(withInfo);
7addDecorator(withKnobs);
8addDecorator(withA11y);

src/components/Button.tsx
1import * as React from "react";
2
3interface Props {
4  text:string;
5}
6
7type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & Props;
8
9const Button: React.FC<ButtonProps> = (props:ButtonProps) => {
10  const { text } = props;
11
12  return (
13    <button {...props}>{text}</button>
14  );
15};
16
17export default Button;

src/components/Button.stories.tsx
1import { Meta } from "@storybook/react/types-6-0";
2import React from "react";
3import Button from "./Button";
4
5export default {
6  title: "Button",
7  component: Button,
8} as Meta;
9
10export const Default = (): JSX.Element => <Button text="test" />;
11

package.json
1"scripts": {
2    "storybook": "start-storybook -p 6006",
3    "build:storybook": "build-storybook -o build/storybook"
4  }