@xonic0506/sonic-ui 0.0.0-stage → 0.2.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.
- package/AI-RULES.md +18 -0
- package/DESIGN.md +652 -0
- package/LICENSE +21 -0
- package/README.md +124 -2
- package/dist/components/alert-dialog.d.ts +16 -0
- package/dist/components/alert-dialog.js +46 -0
- package/dist/components/avatar.d.ts +10 -0
- package/dist/components/avatar.js +27 -0
- package/dist/components/badge.d.ts +8 -0
- package/dist/components/badge.js +77 -0
- package/dist/components/button.d.ts +18 -0
- package/dist/components/button.js +49 -0
- package/dist/components/card.d.ts +24 -0
- package/dist/components/card.js +15 -0
- package/dist/components/checkbox.d.ts +30 -0
- package/dist/components/checkbox.js +48 -0
- package/dist/components/dialog.d.ts +39 -0
- package/dist/components/dialog.js +52 -0
- package/dist/components/empty-state.d.ts +11 -0
- package/dist/components/empty-state.js +17 -0
- package/dist/components/error-state.d.ts +12 -0
- package/dist/components/error-state.js +24 -0
- package/dist/components/field.d.ts +13 -0
- package/dist/components/field.js +33 -0
- package/dist/components/input.d.ts +8 -0
- package/dist/components/input.js +16 -0
- package/dist/components/menu.d.ts +33 -0
- package/dist/components/menu.js +44 -0
- package/dist/components/popover.d.ts +26 -0
- package/dist/components/popover.js +50 -0
- package/dist/components/popup-styles.d.ts +3 -0
- package/dist/components/popup-styles.js +5 -0
- package/dist/components/progress.d.ts +16 -0
- package/dist/components/progress.js +27 -0
- package/dist/components/radio-group.d.ts +20 -0
- package/dist/components/radio-group.js +40 -0
- package/dist/components/select.d.ts +30 -0
- package/dist/components/select.js +66 -0
- package/dist/components/separator.d.ts +7 -0
- package/dist/components/separator.js +14 -0
- package/dist/components/skeleton.d.ts +8 -0
- package/dist/components/skeleton.js +22 -0
- package/dist/components/state-layout.d.ts +11 -0
- package/dist/components/state-layout.js +31 -0
- package/dist/components/switch.d.ts +12 -0
- package/dist/components/switch.js +24 -0
- package/dist/components/tabs.d.ts +31 -0
- package/dist/components/tabs.js +41 -0
- package/dist/components/text.d.ts +10 -0
- package/dist/components/text.js +39 -0
- package/dist/components/textarea.d.ts +6 -0
- package/dist/components/textarea.js +20 -0
- package/dist/components/toast.d.ts +24 -0
- package/dist/components/toast.js +62 -0
- package/dist/components/tooltip.d.ts +11 -0
- package/dist/components/tooltip.js +19 -0
- package/dist/index.d.ts +24 -0
- package/dist/index.js +26 -0
- package/dist/lib/cn.d.ts +1 -0
- package/dist/lib/cn.js +19 -0
- package/dist/styles.css +3 -0
- package/dist/tailwind.css +72 -0
- package/lint/design-rules.js +25 -0
- package/package.json +62 -4
package/AI-RULES.md
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
# AI-RULES — sonic-ui를 쓰는 프로젝트의 AI 작업 규칙
|
|
2
|
+
|
|
3
|
+
이 파일은 sonic-ui를 설치한 프로젝트에서 Claude가 따를 규칙이에요. 프로젝트의 CLAUDE.md에 아래 두 줄을 넣어 불러와요.
|
|
4
|
+
|
|
5
|
+
```md
|
|
6
|
+
@node_modules/@xonic0506/sonic-ui/DESIGN.md
|
|
7
|
+
@node_modules/@xonic0506/sonic-ui/AI-RULES.md
|
|
8
|
+
```
|
|
9
|
+
|
|
10
|
+
## 규칙
|
|
11
|
+
|
|
12
|
+
1. **DESIGN.md가 기준이에요.** 색, 간격, radius, 글자, 모션은 DESIGN.md의 토큰만 써요. 임의의 값(`p-[7px]`, `#3355ff`, `text-[15px]`)과 Tailwind 기본 팔레트(`bg-blue-500`)는 쓰지 않아요.
|
|
13
|
+
2. **UI는 sonic-ui 컴포넌트로 조립해요.** DESIGN.md §7 Core 목록(Button, Input, Select, Dialog, Menu, Toast, Badge 등)에 있는 역할은 직접 만들지 않아요. 없는 역할이 필요하면 먼저 사용자에게 알려요(라이브러리에 추가할지 판단이 필요해요).
|
|
14
|
+
3. **frontend-design은 제한해서 써요.** 레이아웃과 문구 판단에만 참고하고, 새 색·새 폰트·새 토큰 제안은 따르지 않아요. 컴포넌트를 구현할 때는 쓰지 않아요.
|
|
15
|
+
4. **데이터 화면은 4가지 상태를 모두 만들어요.** 정상, 로딩, 빈 상태, 에러. Figma에 4가지가 없으면 디자인부터 요청해요(DESIGN.md §8).
|
|
16
|
+
5. **Domain 컴포넌트는 프로젝트에 둬요.** 도메인 타입, API 호출, 비즈니스 규칙을 아는 컴포넌트는 sonic-ui에 넣지 않아요. 같은 형태를 두 번째 프로젝트에서 복사하게 되면 Pattern 승격을 제안해요(DESIGN.md §7).
|
|
17
|
+
6. **작업 흐름:** 페이지 요청 → DESIGN.md 기준 Figma 디자인 → Figma 기준 코딩. Figma 컴포넌트는 DESIGN.md §11 매핑표의 코드 컴포넌트로 옮겨요.
|
|
18
|
+
7. **덮어쓰기는 className으로만 해요.** 쓰는 쪽 Tailwind 클래스가 sonic-ui 기본 스타일을 이겨요(layer 순서 때문). sonic-ui 내부 클래스(`sn:*`)를 쓰는 쪽 코드에서 쓰지 않아요.
|