@bigtablet/design-system 0.1.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +107 -0
  2. package/package.json +26 -13
package/README.md ADDED
@@ -0,0 +1,107 @@
1
+ # Bigtablet Design System
2
+
3
+ Bigtablet의 공통 UI 컴포넌트 라이브러리입니다.
4
+ Storybook 기반으로 컴포넌트 개발 및 문서화를 진행하며,
5
+ `Chromatic`을 통해 미리보기와 시각적 테스트,
6
+ `npm`을 통해 실제 프로젝트 배포를 관리합니다.
7
+
8
+ ---
9
+
10
+ ## Tech Stack
11
+
12
+ | 구분 | 기술 |
13
+ |-----------------|---------------------|
14
+ | Framework | React 19 |
15
+ | Styling | SCSS (모듈 단위 스타일 분리) |
16
+ | Documentation | Storybook 8 |
17
+ | Preview Hosting | Chromatic |
18
+ | Build | tsup |
19
+ | Package Manager | pnpm |
20
+ | CI/CD | GitHub Actions |
21
+
22
+ ---
23
+
24
+ ## 프로젝트 구조
25
+ ```bash
26
+ src/
27
+ ├── ui/
28
+ │ ├── form/ # TextField, Checkbox, Switch, Radio, FileInput
29
+ │ ├── feedback/ # Alert, Toast, Loading
30
+ │ ├── navigation/ # Sidebar, Pagination
31
+ │ ├── overlay/ # Modal
32
+ │ ├── display/ # Card
33
+ │ ├── general/ # Button, Select
34
+ │ └── styles/ # variables, typography 등 글로벌 스타일
35
+ └── index.ts # 컴포넌트 export 집약
36
+ ```
37
+
38
+ ---
39
+
40
+ ## 🧩 Storybook 로컬 실행
41
+
42
+ ```bash
43
+ pnpm install
44
+ pnpm storybook
45
+ ```
46
+ 브라우저에서 http://localhost:6006 접속.
47
+
48
+ ---
49
+
50
+ ## Storybook 배포 (Chromatic)
51
+
52
+ ### Chromatic Dashboard
53
+ - 관리용 빌드 페이지: https://www.chromatic.com/build?appId=690c033dff711a9fd70fc757
54
+ - 실제 공개 Storybook:
55
+ - 빌드 상세 페이지 내 “View build” 버튼 클릭 →
56
+ 예시: https://bigtablet-design-system-abcdef.chromatic.com
57
+
58
+ ## Chromatic 배포 방식
59
+ - **main** 브랜치에 push하면 자동으로 Chromatic이 Storybook을 빌드 후 배포.
60
+ - GitHub Actions 워크플로우 파일: **.github/workflows/stotybook.yml** 참고
61
+
62
+ ## CHROMATIC_TOKEN은 GitHub Secrets에 등록되어 있어야 합니다.
63
+ 발급: Chromatic → Manage → Project Token → Copy
64
+
65
+ ## pnpm 배포
66
+
67
+ 자동 배포 (GitHub Actions)
68
+
69
+ package.json의 버전을 업데이트 후,
70
+ v0.2.0 같은 태그를 push하면 자동으로 배포됩니다.
71
+
72
+ ```bash
73
+ pnpm version patch # or minor / major
74
+ git push --follow-tags
75
+ ```
76
+
77
+ Actions 파일: .github/workflows/publish.yml
78
+
79
+ PNPM_TOKEN은 npm Access Token을 GitHub Secrets에 등록해야 합니다.
80
+
81
+ ## 개발 가이드
82
+
83
+ ### 새 컴포넌트 생성
84
+ 1. src/ui/<category>/<component> 폴더 생성
85
+ 2. index.tsx + style.scss + stories.tsx 작성
86
+ 3. src/index.ts에서 export 추가
87
+
88
+ ### Storybook 작성 가이드
89
+ • title 경로 구조: Components/<Category>/<Component>
90
+ • 기본 args, variant, docs description 포함 권장
91
+
92
+ ⸻
93
+
94
+ ### 빌드
95
+ ```bash
96
+ pnpm build
97
+ ```
98
+
99
+ - 결과물: dist/
100
+ - ESM + CJS + Type Definitions + CSS 포함
101
+
102
+ ## 주로 발생하는 에러
103
+
104
+ | 문제 | 원인 / 해결책 |
105
+ |---------------------------------------|-------------------------------------------------------|
106
+ | Chromatic 에러: “Found only one commit” | Actions에서 fetch-depth: 0 추가 필요 |
107
+ | npm 404 오류 | npm Organization 이름이 다를 수 있음. package.json의 "name" 확인 |
package/package.json CHANGED
@@ -1,16 +1,19 @@
1
1
  {
2
2
  "name": "@bigtablet/design-system",
3
- "version": "0.1.0",
3
+ "version": "1.0.0",
4
4
  "description": "Bigtablet Design System UI Components",
5
5
  "type": "module",
6
6
  "main": "dist/index.cjs",
7
7
  "module": "dist/index.js",
8
8
  "types": "dist/index.d.ts",
9
+ "style": "dist/index.css",
9
10
  "exports": {
10
11
  ".": {
11
12
  "import": "./dist/index.js",
12
- "require": "./dist/index.cjs"
13
- }
13
+ "require": "./dist/index.cjs",
14
+ "default": "./dist/index.js"
15
+ },
16
+ "./styles.css": "./dist/index.css"
14
17
  },
15
18
  "files": [
16
19
  "dist",
@@ -18,9 +21,17 @@
18
21
  "LICENSE"
19
22
  ],
20
23
  "sideEffects": [
21
- "**/*.scss",
22
- "**/*.css"
24
+ "dist/index.css"
23
25
  ],
26
+ "scripts": {
27
+ "build": "tsup",
28
+ "dev": "tsup --watch",
29
+ "storybook": "storybook dev -p 6006",
30
+ "build:sb": "storybook build",
31
+ "prepublishOnly": "pnpm run build",
32
+ "test": "echo \"no tests yet\"",
33
+ "chromatic": "npx chromatic --project-token=chpt_2f758912f0dde5c --build-script-name=build:sb"
34
+ },
24
35
  "keywords": [
25
36
  "design-system",
26
37
  "react",
@@ -29,6 +40,7 @@
29
40
  ],
30
41
  "author": "sangmin",
31
42
  "license": "MIT",
43
+ "packageManager": "pnpm@10.20.0",
32
44
  "peerDependencies": {
33
45
  "lucide-react": ">=0.552.0",
34
46
  "react": "^19",
@@ -36,18 +48,26 @@
36
48
  "react-toastify": ">=11.0.5"
37
49
  },
38
50
  "devDependencies": {
51
+ "@changesets/cli": "^2.29.7",
52
+ "@semantic-release/changelog": "^6.0.3",
53
+ "@semantic-release/git": "^10.0.1",
54
+ "@semantic-release/github": "^12.0.1",
55
+ "@semantic-release/npm": "^13.1.1",
39
56
  "@storybook/addon-essentials": "8.6.14",
40
57
  "@storybook/react": "8.6.14",
41
58
  "@storybook/react-vite": "8.6.14",
42
59
  "@types/node": "^24",
43
60
  "@types/react": "^19",
44
61
  "@types/react-dom": "^19",
62
+ "chromatic": "^13.3.3",
45
63
  "esbuild-sass-plugin": "^3",
64
+ "gh-pages": "^6.3.0",
46
65
  "lucide-react": "^0.552.0",
47
66
  "react": "19.2.0",
48
67
  "react-dom": "19.2.0",
49
68
  "react-toastify": "^11.0.5",
50
69
  "sass-embedded": "^1.93.3",
70
+ "semantic-release": "^25.0.1",
51
71
  "storybook": "8.6.14",
52
72
  "tsup": "^8.5.0",
53
73
  "typescript": "^5",
@@ -55,12 +75,5 @@
55
75
  },
56
76
  "publishConfig": {
57
77
  "access": "public"
58
- },
59
- "scripts": {
60
- "build": "tsup",
61
- "dev": "tsup --watch",
62
- "storybook": "storybook dev -p 6006",
63
- "build:sb": "storybook build",
64
- "test": "echo \"no tests yet\""
65
78
  }
66
- }
79
+ }