@pantoia/ui 0.7.0 → 0.7.1
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/agents/pantoia-ui.md +51 -41
- package/package.json +1 -1
package/agents/pantoia-ui.md
CHANGED
|
@@ -10,6 +10,13 @@ React 디자인 시스템이다. Base UI 위에 스타일을 얹고 Tailwind CSS
|
|
|
10
10
|
|
|
11
11
|
## 설치
|
|
12
12
|
|
|
13
|
+
```
|
|
14
|
+
Node 20.11 이상
|
|
15
|
+
react 19
|
|
16
|
+
react-dom 19
|
|
17
|
+
tailwindcss 4.0 이상. Tabs의 스크롤바 모양은 4.3부터
|
|
18
|
+
```
|
|
19
|
+
|
|
13
20
|
```sh
|
|
14
21
|
npx @pantoia/ui init
|
|
15
22
|
```
|
|
@@ -30,24 +37,23 @@ React Router 프레임워크 모드는 `react-router.config.ts`에 `future: { un
|
|
|
30
37
|
|
|
31
38
|
## 쓰는 법
|
|
32
39
|
|
|
33
|
-
컴포넌트는
|
|
40
|
+
컴포넌트는 `add`로 프로젝트에 복사해서 쓴다. `components.json`의 `path` 아래에 `<이름>/index.tsx`로 들어가고, 함께 필요한 파일도 복사된다.
|
|
34
41
|
|
|
35
|
-
```
|
|
36
|
-
|
|
37
|
-
import { Field, FieldLabel, FieldHelp } from '@pantoia/ui/field'
|
|
42
|
+
```sh
|
|
43
|
+
npx @pantoia/ui add button field
|
|
38
44
|
```
|
|
39
45
|
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
패키지로 쓴다 import해서 쓴다. 버전을 올리면 고친 내용이 따라온다
|
|
44
|
-
복사해서 쓴다 npx @pantoia/ui add로 소스를 가져와 프로젝트 안에서 고친다
|
|
46
|
+
```tsx
|
|
47
|
+
import { Button } from '@/components/ui/button'
|
|
48
|
+
import { Field, FieldLabel, FieldHelp } from '@/components/ui/field'
|
|
45
49
|
```
|
|
46
50
|
|
|
47
|
-
|
|
51
|
+
import 경로는 저장 위치와 프로젝트의 경로 별칭을 따른다. 위는 저장 위치가 `components/ui`이고 별칭이 `@/`인 예다.
|
|
52
|
+
`@pantoia/ui/<이름>`에서 컴포넌트를 import하지 않는다. Tailwind가 `node_modules`를 검사하지 않아서 스타일이 빠진다.
|
|
48
53
|
|
|
49
54
|
제어 속성은 Base UI 규약을 따른다. `value`와 `defaultValue`, `onValueChange`를 짝으로 쓴다.
|
|
50
55
|
고르지 않은 상태는 `null`이다. Select, RadioGroup, Combobox, NumberField가 같다.
|
|
56
|
+
Select와 RadioGroup의 state는 `useState<string | null>`로 둔다. 문자열만 받는 setter를 `onValueChange`에 넘기면 타입 오류가 난다.
|
|
51
57
|
컴포넌트마다의 속성과 이벤트는 https://design.pantoia.com 의 각 페이지에 있다.
|
|
52
58
|
|
|
53
59
|
## 디자인 규칙
|
|
@@ -123,6 +129,8 @@ px 직접 지정 간격과 둥글기는 토큰으로 쓴다
|
|
|
123
129
|
@utility raised { @apply bg-bg-panel shadow-s2; }
|
|
124
130
|
```
|
|
125
131
|
|
|
132
|
+
토큰 이름을 더했으면 저장 위치의 `tv.ts`에 있는 `twMergeConfig`의 그룹 목록에도 더한다. 빠지면 className으로 덮어쓸 때 겹치는 클래스가 함께 남는다.
|
|
133
|
+
|
|
126
134
|
색 역할을 더하려면 팔레트 10단계를 양쪽 모드에 적고, 토큰 6개를 만든다.
|
|
127
135
|
|
|
128
136
|
```
|
|
@@ -143,34 +151,34 @@ className 그 한 곳만 바뀐다
|
|
|
143
151
|
|
|
144
152
|
`variant`는 tailwind-variants로 만든 스타일 축이다. `-`는 축이 없다는 뜻이다.
|
|
145
153
|
|
|
146
|
-
| 컴포넌트 |
|
|
154
|
+
| 컴포넌트 | add | 하위 컴포넌트 | variant |
|
|
147
155
|
|---|---|---|---|
|
|
148
|
-
| Accordion |
|
|
149
|
-
| AlertDialog |
|
|
150
|
-
| Badge |
|
|
151
|
-
| Button |
|
|
152
|
-
| Callout |
|
|
153
|
-
| Checkbox |
|
|
154
|
-
| Combobox |
|
|
155
|
-
| CommandPalette |
|
|
156
|
-
| Dialog |
|
|
157
|
-
| Drawer |
|
|
158
|
-
| DropdownMenu |
|
|
159
|
-
| Field |
|
|
160
|
-
| Input |
|
|
161
|
-
| Kbd |
|
|
162
|
-
| Label |
|
|
163
|
-
| NumberField |
|
|
164
|
-
| Popover |
|
|
165
|
-
| RadioGroup |
|
|
166
|
-
| Select |
|
|
167
|
-
| Switch |
|
|
168
|
-
| Table |
|
|
169
|
-
| Tabs |
|
|
170
|
-
| Textarea |
|
|
171
|
-
| Toast |
|
|
172
|
-
| Toggle |
|
|
173
|
-
| Tooltip |
|
|
156
|
+
| Accordion | accordion | Accordion, AccordionItem, AccordionTrigger, AccordionContent | - |
|
|
157
|
+
| AlertDialog | alert-dialog | AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogTitle, AlertDialogDescription, AlertDialogHeader, AlertDialogFooter, AlertDialogAction, AlertDialogCancel | - |
|
|
158
|
+
| Badge | badge | Badge | color, shape |
|
|
159
|
+
| Button | button | Button | color, emphasis, size, shape |
|
|
160
|
+
| Callout | callout | Callout | color |
|
|
161
|
+
| Checkbox | checkbox | CheckboxGroup, Checkbox | color |
|
|
162
|
+
| Combobox | combobox | Combobox, ComboboxAnchor, ComboboxInput, ComboboxTrigger, ComboboxCancel, ComboboxContent, ComboboxViewport, ComboboxCollection, ComboboxItem, ComboboxItemText, ComboboxItemDescription, ComboboxGroup, ComboboxEmpty, ComboboxSeparator | surface, size |
|
|
163
|
+
| CommandPalette | command-palette | CommandPalette | - |
|
|
164
|
+
| Dialog | dialog | Dialog, DialogTrigger, DialogClose, DialogContent, DialogTitle, DialogDescription, DialogHeader, DialogFooter | size |
|
|
165
|
+
| Drawer | drawer | Drawer, DrawerTrigger, DrawerClose, DrawerContent, DrawerHeader, DrawerTitle, DrawerDescription | side |
|
|
166
|
+
| DropdownMenu | dropdown-menu | DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent | color |
|
|
167
|
+
| Field | field | Field, FieldLabel, FieldHelp, FieldError, FieldPending, FieldSuccess | layout |
|
|
168
|
+
| Input | input | Input | surface, size |
|
|
169
|
+
| Kbd | kbd | Kbd | - |
|
|
170
|
+
| Label | label | Label | - |
|
|
171
|
+
| NumberField | number-field | NumberField | surface, size, readonly |
|
|
172
|
+
| Popover | popover | Popover, PopoverTrigger, PopoverAnchor, PopoverClose, PopoverContent | - |
|
|
173
|
+
| RadioGroup | radio-group | RadioGroup, RadioGroupItem, RadioGroupItemLabel, RadioGroupItemDescription | color |
|
|
174
|
+
| Select | select | Select, SelectGroup, SelectItem, SelectItemText, SelectItemDescription, SelectSeparator | surface, size |
|
|
175
|
+
| Switch | switch | Switch | color |
|
|
176
|
+
| Table | table | Table, TableHeader, TableHeadCell, TableBody, TableRow, TableCell | fixed, mono |
|
|
177
|
+
| Tabs | tabs | Tabs, TabsList, TabsTrigger, TabsContent | - |
|
|
178
|
+
| Textarea | textarea | Textarea | surface, size |
|
|
179
|
+
| Toast | toast | Toast | - |
|
|
180
|
+
| Toggle | toggle | Toggle | surface |
|
|
181
|
+
| Tooltip | tooltip | TooltipProvider, Tooltip, TooltipTrigger, TooltipContent | - |
|
|
174
182
|
|
|
175
183
|
컴포넌트를 고를 때 헷갈리는 짝은 이렇다.
|
|
176
184
|
|
|
@@ -190,14 +198,16 @@ Field는 라벨, 도움말, 오류 메시지를 입력 컨트롤에 묶는다. I
|
|
|
190
198
|
Select는 고른 항목의 `SelectItemText`나 글자를 트리거에 보인다. `SelectItem`을 다른 컴포넌트로 감싸면 `items`로 라벨을 넘긴다.
|
|
191
199
|
Combobox 항목이 `{ value, label }`이 아닌 객체면 `itemToStringLabel`로 `ComboboxInput`에 보일 글자를 정한다.
|
|
192
200
|
|
|
193
|
-
앱에 한 번만 두는 것이 2개다.
|
|
201
|
+
앱에 한 번만 두는 것이 2개다. 플로팅 요소가 페이지의 z-index에 가려지지 않게 앱은 `isolate`로 감싼다.
|
|
194
202
|
|
|
195
203
|
```tsx
|
|
196
|
-
import { Toast, toast } from '
|
|
197
|
-
import { TooltipProvider } from '
|
|
204
|
+
import { Toast, toast } from '@/components/ui/toast'
|
|
205
|
+
import { TooltipProvider } from '@/components/ui/tooltip'
|
|
198
206
|
|
|
199
207
|
<TooltipProvider>
|
|
200
|
-
<
|
|
208
|
+
<div className="isolate">
|
|
209
|
+
<App />
|
|
210
|
+
</div>
|
|
201
211
|
<Toast />
|
|
202
212
|
</TooltipProvider>
|
|
203
213
|
```
|