TUTORIAL BASED ON STORYBOOK v5, ON v6 EVERYTHING STORYBOOK-RELATED WORKS OUT OF THE BOX!

다음은 NextJS+TypeScript+TailwindCSS+Storybook 조합을 시작하고 실행하기 위한 간단한 가이드입니다. 이 특정 문제를 처리하는 방법에 대한 특정 가이드가 예기치 않게 부족했기 때문에 원래 예상했던 것보다 훨씬 더 많은 시간이 걸렸습니다. 시나리오와 원하는 대로 모든 것을 설정하기 위해 조회해야 하는 정보의 희소성.

NEXTJS 설정

yarn create next-app
그게 다야. 완료. 완전한 기능을 갖춘 NextJS 앱은 공식 스타터 키트를 사용하여 생성됩니다.

TAILWINDCSS 설정

yarn add -D tailwindcss postcss-preset-env - TailwindCSS 라이브러리 및 몇 가지 유용한 PostCSS polyfill을 설치합니다

.

npx tailwind init를 사용하여 tailwind.config.js 파일을 생성합니다.

방금 생성한 TailwindCSS 구성 파일을 편집하여 기본 제공 CSS 제거 프로세스를 활성화하고 구성합니다. (이 프로젝트에 TypeScript를 사용할 것임을 이미 알고 있으므로 여기에서 ".tsx'"확장자를 어떻게 사용하고 있는지 확인하십시오.)

module.exports = {
  purge: ['./components/**/*.tsx', './pages/**/*.tsx'],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

다음과 같이 최소한의 방법으로 PostCSS를 구성하기 위해 생성postcss.config.js

module.exports = {
  plugins: [
    "tailwindcss", 
    "postcss-preset-env"
  ]
};

/styles/index.css를 만들고 postcss-import에 친숙한 @import 지시문을 사용하여 채웁니다(@tailwind 대신)

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

타이프스크립트 설정

yarn add --dev typescript @types/react @types/node

touch tsconfig.json

yarn next NextJS를 시작하면 새로 생성된 tsconfig.json을 자동으로 인식하고 유효한 구성 json을 여기에 삽입합니다

/pages/_app.tsx 파일 만들기

import React from "react";
import "../styles/index.css"; // <- applied everywhere in the NextJS application scope

const MyApp = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

export default MyApp;

스토리북 설정

yarn add @storybook/react babel-loader @babel/core awesome-typescript-loader react-docgen-typescript-loader -D

mkdir .storybook

cp ./tsconfig.json ./.storybook/

Storybook-TypeScript 통합에 맞게 편집/.storybook/tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react"            // <- important!
  },
  "exclude": ["node_modules"],
  "include": [                // <- important!
    "../types.d.ts",
      "../next-env.d.ts",
      "../**/*.stories.ts",
      "../**/*.stories.tsx"
    ]
  }

/.storybook/main.js를 만들고 다음 구성을 자유롭게 복사하십시오.

const path = require("path");

module.exports = {
  stories: ["../components/**/**/*.stories.tsx"],
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve("awesome-typescript-loader"),
          options: {
            configFileName: path.resolve(__dirname, "./tsconfig.json"),
          },
        },
        /* 
          ** OPTIONAL ** 

          Basically a webpack loader  used to                
          generate docgen information from TypeScript React components. 
The primary use case is to get the prop types 
table populated in the Storybook Info Addon.
        */
        {
          loader: require.resolve("react-docgen-typescript-loader"),
          options: {
            tsconfigPath: path.resolve(__dirname, "./tsconfig.json"),
          },
        },
      ],
    });

    config.resolve.extensions.push(".ts", ".tsx");

    return config;
  },
};

/.storybook/preview.js를 만들고 다음과 같이 스타일시트를 가져오는 데 사용합니다.

// The preview application is essentially just your stories with 
// a framework-agnostic 'router'. 
// It renders whichever story the manager application tells it to render.
// In this case we just use it to import the stylesheet and inject it 
// in the context of our stories

import "../styles/index.css";

객체 기반 형식을 사용하도록 업데이트postcss.config.js합니다. 종속성을 해결하는 동안 Storybook의 웹팩 프로세스에서 발생할 수 있는 모든 문제를 해결하기 위해 이것은 매우 중요합니다!

module.exports = {
  plugins: {
    tailwindcss: {}, 
    "postcss-preset-env": {}
  }
};

완료

이제 이 강력한 도구 세트를 사용하여 자신의 구성 요소 폴더(예: /components/button/1-button.stories.tsx )에 구성 요소 스토리를 만들 수 있습니다.

P.S.: If you wish to organize your Storybook stories using a different folder structure, you'll need to do no more than editing the stories property inside the exported configuration in /.storybook/main.js using your desired glob patterns