@pantoia/ui 0.6.0 → 0.7.0

package/README.md

@@ -19,21 +19,17 @@ npx @pantoia/ui diff          복사한 소스와 배포본의 차이
 
 ## 개발
 
-호스트에는 Docker만 있으면 된다.
+Node 20.11 이상이 필요하다.
 
 ```
 git clone git@github.com:pantoia/pantoia-ui.git
 cd pantoia-ui
-docker compose up -d dev
+npm install
 ```
 
-편집기는 `.devcontainer/devcontainer.json`으로 컨테이너 안에서 연다.
-
 ```
-docker compose up -d dev                        실행
-docker compose down                             종료
-docker compose exec dev npm run verify          typecheck, check, lint, test
-docker compose exec dev npm pack                tarball
+npm run verify   typecheck, check, lint, test
+npm pack         tarball
 ```
 
 ## 구조

package/agents/pantoia-ui.md

@@ -25,6 +25,9 @@ init은 컴포넌트를 저장할 위치와 전역 CSS 파일을 묻고 `compone
 다크 모드는 `.dark` 클래스로 켠다. `html`이나 `body`에 `.dark`를 두면 그 안의 토큰이 모두 바뀐다.
 next-themes를 쓸 때는 `attribute="class"`로 둔다.
 
+React Router 프레임워크 모드는 `react-router.config.ts`에 `future: { unstable_optimizeDeps: true }`를 더한다.
+없으면 개발 서버에서 처음 여는 route마다 페이지가 새로고침된다.
+
 ## 쓰는 법
 
 컴포넌트는 폴더 이름으로 가져온다.
@@ -44,6 +47,7 @@ import { Field, FieldLabel, FieldHelp } from '@pantoia/ui/field'
 기본은 패키지로 쓰는 것이다. 동작이나 마크업을 프로젝트에 맞게 바꿔야 할 때만 복사한다.
 
 제어 속성은 Base UI 규약을 따른다. `value`와 `defaultValue`, `onValueChange`를 짝으로 쓴다.
+고르지 않은 상태는 `null`이다. Select, RadioGroup, Combobox, NumberField가 같다.
 컴포넌트마다의 속성과 이벤트는 https://design.pantoia.com 의 각 페이지에 있다.
 
 ## 디자인 규칙
@@ -183,6 +187,9 @@ Tooltip과 Popover        짧은 설명이면 Tooltip, 안에서 조작하면 Po
 
 Field는 라벨, 도움말, 오류 메시지를 입력 컨트롤에 묶는다. Input, Textarea, NumberField, Select, Combobox와 함께 쓴다.
 
+Select는 고른 항목의 `SelectItemText`나 글자를 트리거에 보인다. `SelectItem`을 다른 컴포넌트로 감싸면 `items`로 라벨을 넘긴다.
+Combobox 항목이 `{ value, label }`이 아닌 객체면 `itemToStringLabel`로 `ComboboxInput`에 보일 글자를 정한다.
+
 앱에 한 번만 두는 것이 2개다.
 
 ```tsx

package/field/index.tsx

@@ -6,13 +6,13 @@ import { Label } from '../label'
 import { tv } from '../tv'
 
 export const field = tv({
-  base: 'group flex flex-wrap gap-x-2 gap-y-tight',
+  base: 'group flex gap-x-2 gap-y-tight',
 
   variants: {
     layout: {
       stack: 'flex-col',
-      inline: 'flex-row items-center',
-      split: 'flex-row items-center justify-between',
+      inline: 'flex-row flex-wrap content-start items-center',
+      split: 'flex-row flex-wrap content-start items-center justify-between',
     },
   },
 
@@ -39,7 +39,7 @@ export function FieldLabel({ render = <Label />, className, ...rest }: FieldLabe
 }
 
 const fieldHelp = tv({
-  base: 'basis-full text-caption text-fg-subtle'
+  base: 'w-full text-caption text-fg-subtle'
     + ' group-has-disabled:text-fg-disabled',
 })
 
@@ -57,7 +57,7 @@ export type FieldErrorProps = Omit<FieldPrimitive.Error.Props, 'className'> & {
 }
 
 const fieldError = tv({
-  base: 'basis-full text-caption text-fg-danger'
+  base: 'w-full text-caption text-fg-danger'
     + ' flex items-start gap-tight',
 })
 
@@ -79,7 +79,7 @@ export function FieldError({ items, match = true, render = <p />, className, chi
 }
 
 const fieldPending = tv({
-  base: 'basis-full text-caption text-fg-subtle'
+  base: 'w-full text-caption text-fg-subtle'
     + ' flex items-start gap-tight',
 })
 
@@ -97,7 +97,7 @@ export function FieldPending({ className, children, ...rest }: FieldPendingProps
 }
 
 const fieldSuccess = tv({
-  base: 'basis-full text-caption text-fg-success'
+  base: 'w-full text-caption text-fg-success'
     + ' flex items-start gap-tight',
 })
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantoia/ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Pantoia Design System",
   "homepage": "https://design.pantoia.com",
   "repository": {
@@ -48,9 +48,7 @@
     "check": "tsx scripts/check.ts",
     "lint": "oxlint --deny-warnings",
     "test": "vitest run",
-    "verify": "npm run typecheck && npm run check && npm run lint && npm run test",
-    "dev:up": "docker compose up -d dev",
-    "dev:down": "docker compose down"
+    "verify": "npm run typecheck && npm run check && npm run lint && npm run test"
   },
   "dependencies": {
     "@base-ui/react": "^1.8.0",

package/radio-group/index.tsx

@@ -46,7 +46,7 @@ export const radioGroupItem = tv({
   defaultVariants: { color: 'neutral' },
 })
 
-export type RadioGroupProps = Omit<RadioGroupPrimitive.Props<string>, 'className'> & {
+export type RadioGroupProps = Omit<RadioGroupPrimitive.Props<string | null>, 'className'> & {
   color?: RadioColor
   className?: string
 }
@@ -56,7 +56,7 @@ const radioGroup = tv({ base: 'flex flex-col gap-3' })
 export function RadioGroup({ color = 'neutral', className, ...rest }: RadioGroupProps) {
   return (
     <ColorContext value={color}>
-      <RadioGroupPrimitive<string> {...rest} className={radioGroup({ className })} />
+      <RadioGroupPrimitive<string | null> {...rest} className={radioGroup({ className })} />
     </ColorContext>
   )
 }

package/select/index.tsx

@@ -51,12 +51,16 @@ function findItemText(children: ReactNode): { label: ReactNode } | undefined {
   return found
 }
 
+function plainText(children: ReactNode) {
+  return typeof children === 'string' || typeof children === 'number' ? children : undefined
+}
+
 function collectItems(children: ReactNode, items: Record<string, ReactNode>) {
   Children.forEach(children, child => {
     if (!isValidElement<ItemElementProps>(child)) return
     if (child.type === SelectItem && child.props.value !== undefined) {
-      const text = findItemText(child.props.children)
-      if (text) items[child.props.value] = text.label
+      const label = findItemText(child.props.children)?.label ?? plainText(child.props.children)
+      if (label !== undefined) items[child.props.value] = label
       return
     }
     collectItems(child.props.children, items)
@@ -67,9 +71,9 @@ function collectItems(children: ReactNode, items: Record<string, ReactNode>) {
 export type SelectProps = Omit<ComponentProps<typeof SelectPrimitive.Trigger>, 'className' | 'value' | 'defaultValue'>
   & Pick<SelectPrimitive.Root.Props<string>, 'open' | 'defaultOpen' | 'onOpenChange' | 'items' | 'name' | 'required' | 'readOnly' | 'modal' | 'form'>
   & {
-    value?: string
-    defaultValue?: string
-    onValueChange?: (value: string, eventDetails: SelectPrimitive.Root.ChangeEventDetails) => void
+    value?: string | null
+    defaultValue?: string | null
+    onValueChange?: (value: string | null, eventDetails: SelectPrimitive.Root.ChangeEventDetails) => void
     placeholder?: string
     surface?: 'bare' | 'well'
     size?: 'sm' | 'md' | 'lg'
@@ -118,7 +122,7 @@ export function Select({
     <SelectPrimitive.Root<string>
       value={value}
       defaultValue={defaultValue}
-      onValueChange={(next, eventDetails) => onValueChange?.(next ?? '', eventDetails)}
+      onValueChange={onValueChange}
       open={open}
       defaultOpen={defaultOpen}
       onOpenChange={(next, eventDetails) => {