Nextjs + Storybook

プロジェクトメモ帳の初期化

npx sb init --builder webpack5

nextjs v 11から、webpack 5を使用してパフォーマンスを向上
ショートカット

.storybook/main.js

const path = require("path");

module.exports = {
	stories: ["../**/*.stories.@(js|jsx|ts|tsx)"],
	addons: [
		"@storybook/addon-links",
		"@storybook/addon-essentials",
		"@storybook/addon-postcss",
	],
	framework: "@storybook/react",
	webpackFinal: async (config) => {
		config.resolve.alias = {
			...config.resolve.alias,
          	// 절대 경로 추가
			components: path.resolve(__dirname, "../components"),
			styles: path.resolve(__dirname, "../styles"),
			pages: path.resolve(__dirname, "../pages"),
		};
		return config;
	},
};

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "components/*": [
        "components/*"
      ],
      "pages/*": [
        "pages/*"
      ],
      "styles/*": [
        "styles/*"
      ]
    },
    ...
  },
  ...
}

絶対パスをサポートするように設定

ストーリーファイルの作成

import { ComponentStory, ComponentMeta } from "@storybook/react";

import Modal from ".";

export default {
	// 분류 및 작명
	title: "Components/Modal",
  	// 렌더링 타켓
	component: Modal,
  	// 공통 args
	args: {
		title: "제목 입니다",
	},
} as ComponentMeta<typeof Modal>;

// 기본 템플릿
const Template: ComponentStory<typeof Modal> = (args) => (
	<Modal {...args}>MODAL 입니다</Modal>
);

// 템플릿 활용해서 상황별 args 추가
export const FullModal = Template.bind({});
FullModal.args = {
	show: true,
	onClose: () => console.log("닫기"),
	size: "full",
};

export const MiniModal = Template.bind({});
MiniModal.args = {
	...FullModal.args,
	size: "mini",
};

開発中のモデル構成部品を使用

結果

yarn storybook

argsに渡される値を変更することで、ユーザーはすぐに値を確認できます.
DOCSをさらに利用するためにはMDXを記述する必要がある
MDXでドキュメントを記録することをお勧めします!

import { Canvas, Meta, Story } from "@storybook/addon-docs";

import Modal from ".";
Modal.displayName = "Modal";

<Meta title="MDX/Modal" component={Modal} />

export const Template = (args) => <Modal {...args} />;

# Modal

We can drop it in a `Canvas` to get a code snippet:

<Canvas>
	<Story
		name="negative"
		args={{
			title: "제목 입니다",
			show: true,
			size: "mini",
			onClose: () => console.log("닫기"),
		}}
	>
		{Template.bind({})}
	</Story>
</Canvas>