스토리북 사용법

1. npx storybook init
2. npm i -D vite-tsconfig-paths
   • 만약 Vite 프로젝트에서 TypeScript를 사용하고 있고, paths 옵션을 사용하여 모듈을 참조하려면 vite-tsconfig-paths 패키지를 설치하여 설정해야 합니다.
   • .storybook>main.ts에 아래 코드 추가

 docs: {
        autodocs: "tag",
    },
    viteFinal: async (config) => {
        config.plugins?.push(
            tsconfigPaths({
                projects: [
                    path.resolve(path.dirname(__dirname), "tsconfig.json"),
                ],
            })
        );
        return config;
    },

1. 라이브러리 설치

• clsx 라이브러리 사용
  • 컴포넌트의 클래스 이름을 동적으로 결합하고 관리하는 과정을 단순화
  • 객체나 배열을 입력으로 받아, 조건부로 클래스 이름을 생성
• tailwind-merge 라이브러리 사용
  • 스타일 충돌 없이 JS에서 Tailwind CSS 클래스들을 병합할 수 있게 해주는 유틸 함수
  • 충돌하는 클래스 명만 덮어쓰고 다른 것들은 그대로 남겨둠
• class-variance-authority 라이브러리 사용
  • tailwind의 동적 스타일링에 도움을 주는 라이브러리

4. components>만들 컴포넌트 폴더>index.ts와 index.stories.tsx 파일 생성
   • index.stories.tsx에 아래와 같이 코드 넣기

import type { Meta, StoryObj } from "@storybook/react";
import { Button } from ".";

const meta: Meta<typeof Button> = {
    title: "Components/Button",
    component: Button,
    parameters: {
        layout: "centered",
    },
    tags: ["autodocs"],
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Default: Story = {
    args: {
        children: "Click me",
    },
};

5. utils폴더의 index.tsx에 아래의 코드넣기

import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export const cn = (...classes: ClassValue[]) => twMerge(clsx(classes));

6. .vscode>setting.json: tailwindCSS.experimental.classRegex 코드 추가

{
    "powermode.explosions.duration": 1000,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.organizeImports": true
    },
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "tailwindCSS.experimental.classRegex": [
        ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
        ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"]`)"]
    ]
}

reference:https://github.com/CodeWithGionatha-Labs/hanna-simple-ui

Library final build

1. npm i -D vite-plugin-dts

2. package.json 에 코드 추가

    "files": [
       "dist"
   ],
   "main": "dist/hanna-simple-ui-umd.cjs",
   "module": "dist/hanna-simple-ui.js",
   "exports": {
       ".": {
           "import": "./dist/hanna-simple-ui.js",
           "require": "./dist/hanna-simple-ui-umd.cjs"
       }
   },