Wemeet Design System

설치

pnpm install
pnpm run storybook


# component generation
pnpm run generate:component / 컴포넌트 및 스토리 생성
pnpm run generate:story / 스토리 생성

프로젝트 구조

roouty-design-system/
├── .storybook/          # Storybook 설정
├── src/
│   ├── assets/          # 아이콘
│   ├── components/      # UI 컴포넌트
│   ├── componentDirectory  # 컴포넌트 디렉토리 (camel case, ex: labelBadge)
│   │   ├── index.tsx       # 컴포넌트
│   │   ├── styles.css.ts   # 컴포넌트 스타일
│   │   ├── types.ts     # 컴포넌트 타입
│   ├── constants/       # 스타일, token
│   ├── hooks/           # Hooks
│   ├── providers/       # Context Providers
│   ├── stories/         # Story
│   ├── types/          # TypeScript
│   └── main.ts
└── package.json

코드 컨벤션

interface
    - 타입명 맨 앞에 I 추가
    ex) IButton

type
    - 타입명 맨 앞에 T 추가
    ex) TButton

style
    - 변수명은 camel case로, 변수명 맨 뒤에 Style 추가
    ex) const buttonStyle = style(~~~)