diff --git a/docs/components/button.md b/docs/components/button.md index 8982d71..d782bda 100644 --- a/docs/components/button.md +++ b/docs/components/button.md @@ -11,7 +11,7 @@ | 구현 상태 | HM 스타일 적용 완료 (`hm-*` class 없음) | | 기준일 | 2026-10-08 (Role × Appearance 계약·현재 Story 대조) | | 기반 | shadcn/ui Button (CVA, Radix `Slot`) | -| 대표 Story | `Components/Form/Button` → `All` (이름 "Button") | +| 대표 Story | `Components/Form/Button` → `All` (이름 "Button", 사이드바 `버튼`, Toggle Button 예제 포함) | | 보류 | Brand label Text Border 두께(EXPERIMENTAL, 미적용), Focus(ui_viz TBD) | ## 2. 적용 근거 @@ -150,7 +150,8 @@ CVA 구조, `data-slot`, `asChild`(Radix `Slot`), `className` 확장, focus-visi ## 11. Storybook - 대표 Story `All`("Button")이 기본 sidebar의 유일한 Button 항목이다 → 1뎁스. -- `All`의 구역: Sizes → Variants → States(2026-11-09 Overview 제거; 단독 Overview 버튼은 Sizes의 Brand Medium과 같아 통합). 기본 버튼·크기·허용 조합·Brand/Standard 상태를 보여준다. Red Solid와 Outline은 Variants와 Standard States에도 포함되며, 삭제·취소 세트와 Long Label은 verification Story에서 따로 확인한다. 2026-11-12 비교형 레이아웃: 상단은 Sizes | Variants 두 섹션이 좌우 반반(미리보기 1080px 이상, 미만은 세로)이며, 각 섹션은 그룹당 한 행(왼쪽 고정 폭 그룹명 + 가로 버튼 행, 640px 이하에서는 그룹명이 위)이다. 하단 States는 Brand | Standard Solid | Standard Outline 3열(미리보기 1250px 이상, 890px 이상은 2열, 미만은 1열)이고, 각 열은 행=상태(Brand·Standard 모두 Default/Hover/Pressed/Disabled 4개), 열=Variants와 같은 순서의 컬러인 매트릭스다. 실제 포인터 상태를 확인하는 Interact 버튼은 verification Story "Brand States"에만 있다. 열은 매트릭스 폭 비율로 전체 폭을 나눠 쓰고 매트릭스는 열 시작에 놓인다. 버튼 사이 간격은 Sizes·Variants·States 모두 가로·세로 8px로 같다. 1열에서 표가 화면보다 넓으면 표 영역 안에서만 가로 스크롤한다. 레이아웃만 바꿨고 버튼 스타일·상태 표현은 그대로다. +- 2026-11-13 현재 `All`의 구역: Brand | Standard Solid | Standard Outline 세 섹션(H2, 공통 제목 → 콘텐츠 12px). 각 섹션 안에 Sizes(H3 → 8px → Small / Medium / Large)와 States(H3 → 8px → 행 Default/Hover/Pressed/Disabled × 해당 Treatment 컬러 매트릭스)가 24px 간격으로 온다. 페이지 단위 Sizes·Variants·States 제목은 없다(컬러 조합은 매트릭스 열과 verification `Roles`에서 확인). 미리보기 1400px 이상에서 같은 너비 3열, 미만은 Brand → Solid → Outline 1열(섹션 간격 28px)이다. 2026-11-13: 매트릭스가 자기 열보다 넓으면(390px에서 420px Standard Solid) 세 Treatment가 함께 상태별 세로 배치(상태 이름 12/16/400 보조색 → 4px → 버튼 줄, 버튼 간격 8px·줄바꿈, 상태 간 12px)로 바뀌어 표 내부·페이지 가로 스크롤이 없다. 버튼 크기·상태·색상과 props는 그대로다. 표 하단에는 독립 H2 "Toggle Button" 한 섹션(./toggle-examples, 기존 Toggle 대표 화면과 같은 예시)이 버튼 열과 36px 간격으로 오며, 그룹 H3 Variants / States(Off / On, Disabled) · Groups(단독, 단일 선택, 다중 선택 — 연결 그룹 예시, 이 페이지에서는 "연결 그룹 · " 접두어 생략) · Sizes(Small, Medium, Large — 2026-11-13 Default 라벨을 Button과 같은 Medium으로, 글자 토글은 prop 값 대신 예시 문구 "알림") 3개를 버튼과 같이 미리보기 1400px 이상에서 같은 너비 3열(Brand / Standard Solid / Standard Outline 열과 같은 위치), 미만은 1열(그룹 간 24px)로 놓는다(2026-11-13). 그룹 라벨은 버튼과 같은 규칙(들여쓰기 0, H3 → 8px)이고, 각 행은 States 매트릭스와 같은 형식(왼쪽 라벨 14/20/500 보조색 → 8px → 컨트롤, 행 간 8px, 그룹 안 컨트롤 시작선 정렬)이다. 버튼 매트릭스가 세로 배치로 바뀌면 Toggle 행도 함께 세로 배치(라벨 12/16/400 → 4px → 컨트롤, 행 간 12px)로 바뀐다. 버튼 스타일·상태 표현·매트릭스 구조는 그대로다. 아래 2026-11-12 설명은 이전 배치 기록이다. +- `All`의 구역(2026-11-12 기록): Sizes → Variants → States(2026-11-09 Overview 제거; 단독 Overview 버튼은 Sizes의 Brand Medium과 같아 통합). 기본 버튼·크기·허용 조합·Brand/Standard 상태를 보여준다. Red Solid와 Outline은 Variants와 Standard States에도 포함되며, 삭제·취소 세트와 Long Label은 verification Story에서 따로 확인한다. 2026-11-12 비교형 레이아웃: 상단은 Sizes | Variants 두 섹션이 좌우 반반(미리보기 1080px 이상, 미만은 세로)이며, 각 섹션은 그룹당 한 행(왼쪽 고정 폭 그룹명 + 가로 버튼 행, 640px 이하에서는 그룹명이 위)이다. 하단 States는 Brand | Standard Solid | Standard Outline 3열(미리보기 1250px 이상, 890px 이상은 2열, 미만은 1열)이고, 각 열은 행=상태(Brand·Standard 모두 Default/Hover/Pressed/Disabled 4개), 열=Variants와 같은 순서의 컬러인 매트릭스다. 실제 포인터 상태를 확인하는 Interact 버튼은 verification Story "Brand States"에만 있다. 열은 매트릭스 폭 비율로 전체 폭을 나눠 쓰고 매트릭스는 열 시작에 놓인다. 버튼 사이 간격은 Sizes·Variants·States 모두 가로·세로 8px로 같다. 1열에서 표가 화면보다 넓으면 표 영역 안에서만 가로 스크롤한다. 레이아웃만 바꿨고 버튼 스타일·상태 표현은 그대로다. - verification(`tags: ["verification"]`, 기본 sidebar 제외): `Roles`, `Sizes`, `States`("Brand States"), `StandardStates`, `LongLabel`, `KoreanLabels`, `IconTextNarrow`, `Destructive`, `Playground`(HM 전용), `Compatibility`(ghost/link, default/outline 별칭). Controls는 조합별 선택을 제한하지 않으므로 §6.1의 허용 조합을 직접 지킨다. Verification은 기술 점검용이며 운영 화면의 사용 위치·세트 규칙은 §5가 우선한다. - 대표 경로/ID: `Components/Form/Button → All` (`components-form-button--all`), `Components/Overlay/Dialog → All` (`components-overlay-dialog--all`), `Components/Overlay/Alert Dialog → All` (`components-overlay-alert-dialog--all`), `Patterns/Data/Filter Bar → Filter Bar` (`patterns-data-filter-bar--all`). 삭제 세트 점검 ID는 `components-form-button--destructive`(verification)다. - 운영 규칙은 `프로젝트-지침.md` §6.3, §7 참조. diff --git a/docs/components/calendar.md b/docs/components/calendar.md index 4425ac1..83a9cbc 100644 --- a/docs/components/calendar.md +++ b/docs/components/calendar.md @@ -10,7 +10,7 @@ | 구현 상태 | 구현 완료 (현재 HM 규격) | | 기준일 | 2026-10-02 | | 기반 | shadcn/ui Calendar = **react-day-picker v10** | -| 대표 Story | `Components/Search & Date/Calendar` → `All` (이름 "Calendar") | +| 대표 Story | `Components/Search & Date/Date Picker` → `All`의 "Calendar · …" 섹션(사이드바 `날짜 선택`). 기존 `Components/Search & Date/Calendar` → `All`(`components-search-date-calendar--all`)은 URL 직접 접근용으로 유지(사이드바 숨김) | | 보류 | 아래 §11 | ## 2. 적용 근거 diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md index f837ade..1d9d318 100644 --- a/docs/components/checkbox.md +++ b/docs/components/checkbox.md @@ -11,7 +11,7 @@ | 구현 상태 | 구현 완료 (현재 HM 규격) | | 기준일 | 2026-10-02 | | 기반 | shadcn/ui Checkbox (Radix `Checkbox`) | -| 대표 Story | `Components/Form/Checkbox` → `All` (이름 "Checkbox") | +| 대표 Story | `Components/Form/Selection Controls` → `All`의 상태 매트릭스 Checkbox 열(Default·Hover·Focus·Disabled·Validation)과 Variants의 Indeterminate(사이드바 `선택 컨트롤`, `components-form-selection-controls--all`). 기존 `Components/Form/Checkbox` → `All`(`components-form-checkbox--all`)은 URL 직접 접근용으로 유지(사이드바 숨김) | | 보류 | 아래 §11 | ## 2. 적용 근거 @@ -100,7 +100,7 @@ Radix 구조·ARIA(`role=checkbox`, `aria-checked`)·키보드, `data-slot`, `cn ## 9. Storybook -- 대표 Story `All`("Checkbox"): States `unchecked`, `checked`, `indeterminate`, `hover`, `focus`, `disabled`(PC 3열 × 2행)와 Validation `error`. Overview·Usage 구역은 2026-11-09에 없앴고 `long`(Long Label) 예시는 숨김 verification Story `LongLabel`로 옮겼다. 옵션 Label은 Story에서만 `--hm-label-text`를 `--foreground`로 덮어 기본 텍스트 색으로 보이며(공용 Label은 그대로, 비활성 Checkbox 옆 Label은 `peer-disabled`로 보조색 유지), 예시 제목은 보조색이다. Focus는 `play`로 실제 focus. `indeterminate`는 controlled 예시를 겸해 클릭하면 checked가 된다(Radix, 2026-10-22 별도 `interactive` 구역 통합). `hover`는 Unchecked·Checked를 Storybook 전용 `data-sb-hover`(`.storybook/pseudo-states.ts`)로 고정해 보여 준다. Checkbox API가 아니며 소비 코드에 붙이지 않는다. +- 숨김 기존 `All`("Checkbox", URL 직접 접근용; 사이드바 대표는 Selection Controls, §표 참고): States `unchecked`, `checked`, `indeterminate`, `hover`, `focus`, `disabled`(PC 3열 × 2행)와 Validation `error`. Overview·Usage 구역은 2026-11-09에 없앴고 `long`(Long Label) 예시는 숨김 verification Story `LongLabel`로 옮겼다. 옵션 Label은 Story에서만 `--hm-label-text`를 `--foreground`로 덮어 기본 텍스트 색으로 보이며(공용 Label은 그대로, 비활성 Checkbox 옆 Label은 `peer-disabled`로 보조색 유지), 예시 제목은 보조색이다. Focus는 `play`로 실제 focus. `indeterminate`는 controlled 예시를 겸해 클릭하면 checked가 된다(Radix, 2026-10-22 별도 `interactive` 구역 통합). `hover`는 Unchecked·Checked를 Storybook 전용 `data-sb-hover`(`.storybook/pseudo-states.ts`)로 고정해 보여 준다. Checkbox API가 아니며 소비 코드에 붙이지 않는다. - verification: `Unchecked`, `Checked`, `Indeterminate`, `Disabled`, `Error`, `LongLabel`("Long Label"), `Playground`. ## 10. 사용자 확정 결정 diff --git a/docs/components/combobox.md b/docs/components/combobox.md index b52ed16..17b191c 100644 --- a/docs/components/combobox.md +++ b/docs/components/combobox.md @@ -102,8 +102,8 @@ Popover: Portal, collision, Escape, 바깥 클릭 닫힘, trigger focus 복귀. ## 10. Storybook -- 대표 Story `All`("Combobox"): Overview(Placeholder + search, Remix는 disabled option), Sizes(Medium, 같은 size의 Select / Combobox 비교), States(Selected(controlled), Disabled), Usage(Long option). Label은 Story 조합이다. 대표 화면은 선택값 표시(`value = …`)를 숨기며 숨김 `Controlled`는 유지한다. -- 2026-11-12 폼 요소 전시 통일(Input·Select 기준): Sizes(`Default`, `Medium`)·States(`Selected`, `Disabled`)는 상태명을 콤보박스 Label 자리에 한 번만 표시하고 반복되던 H3 상태명·필드 Label(`프레임워크`, `선택됨 (controlled)`, `비활성`)을 없앴다. 접근성 이름은 Trigger의 `aria-label="프레임워크 (상태명)"`(보이는 상태명 포함, 팝업·목록 이름에도 쓰임). 두 섹션은 Input과 같은 그리드(최대 1120px, 최대 3열·열 최소 240px, 좁으면 2→1열, 공통 들여쓰기)를 쓴다. Usage(Long option, Select / Combobox 비교)와 verification Story, Combobox·토큰·API는 변경 없다. +- 대표 Story `All`("Combobox"): Sizes(Large·Medium), States(Selected(controlled), Disabled), Usage(Long option, 같은 size의 Select / Combobox 비교). Overview 구역은 없다. Label은 Story 조합이다. 대표 화면은 선택값 표시(`value = …`)를 숨기며 숨김 `Controlled`는 유지한다. +- 2026-11-12 폼 요소 전시 통일(Input·Select 기준): Sizes(`Default`, `Medium`; 2026-11-13 기본 크기가 실제 large라 `Default` 라벨을 `Large`로 정정)·States(`Selected`, `Disabled`)는 상태명을 콤보박스 Label 자리에 한 번만 표시하고 반복되던 H3 상태명·필드 Label(`프레임워크`, `선택됨 (controlled)`, `비활성`)을 없앴다. 접근성 이름은 Trigger의 `aria-label="프레임워크 (상태명)"`(보이는 상태명 포함, 팝업·목록 이름에도 쓰임). 두 섹션은 Input과 같은 그리드(최대 1120px, 최대 3열·열 최소 240px, 좁으면 2→1열, 공통 들여쓰기)를 쓴다. Usage(Long option, Select / Combobox 비교)와 verification Story, Combobox·토큰·API는 변경 없다. - verification: `Empty`, `Controlled`, `Long Option`. ## 11. 사용자 확정 결정 / 보류 diff --git a/docs/components/date-picker.md b/docs/components/date-picker.md index 25478f4..b08eeb2 100644 --- a/docs/components/date-picker.md +++ b/docs/components/date-picker.md @@ -12,7 +12,7 @@ | 구현 상태 | 구현 완료 (single-date, 현재 HM 규격) | | 기준일 | 2026-10-02 | | 기반 | `Popover`(public API) + `Calendar`(public API) 조합. shadcn 공식 Date Picker는 예시 조합이다 | -| 대표 Story | `Components/Search & Date/Date Picker` → `All` (이름 "Date Picker") | +| 대표 Story | `Components/Search & Date/Date Picker` → `All` (이름 "Date Picker", 사이드바 `날짜 선택`, Calendar 예제 포함) | | 보류 | 아래 §11 | ## 2. 적용 근거 @@ -91,7 +91,7 @@ Popover: Portal, collision 처리, Escape, 바깥 클릭 닫힘, trigger focus ## 9. Storybook - 대표 Story `All`("Date Picker"): Empty, Selected(`2026.10.06`), 기본 형식(`2026.01.09`)/custom override, Controlled(대표 화면은 값 표시 숨김, 숨김 `Controlled`는 표시), Medium, Disabled dates(5일 이전·일요일), Disabled를 한 페이지에 둔다. Label은 Story 조합이며 `today`는 Calendar prop으로 2026-10-02에 고정. -- 2026-11-12 폼 요소 전시 통일(Input·Select 기준): Sizes(`Default`, `Medium`)·States(`Selected`, `Controlled`, `Disabled dates`, `Disabled`)는 상태명을 날짜 선택 Label 자리에 한 번만 표시하고 반복되던 H3 상태명·필드 Label을 없앴다. 접근성 이름은 Trigger의 `aria-label="시작일|마감일|날짜 (상태명)"`(보이는 상태명 포함). `Disabled dates`의 규칙 문구 "5일 이전과 일요일은 선택 불가"는 Trigger 아래 도움말(12/18/400 secondary)로 옮기고 `aria-describedby`로 연결했다. 두 섹션은 Input과 같은 그리드(최대 1120px, 최대 3열·열 최소 240px, 좁으면 2→1열, 공통 들여쓰기)를 쓴다. Usage(형식 2종)와 verification Story, DatePicker·토큰·API는 변경 없다. Storybook 사이드바 표시명은 `날짜 선택`(Story ID 변경 없음). +- 2026-11-12 폼 요소 전시 통일(Input·Select 기준): Sizes(`Default`, `Medium`; 2026-11-13 기본 크기가 실제 large라 `Default` 라벨을 `Large`로 정정, Usage Default format의 Label에서 H3와 반복되던 "기본 형식 · " 제거)·States(`Selected`, `Controlled`, `Disabled dates`, `Disabled`)는 상태명을 날짜 선택 Label 자리에 한 번만 표시하고 반복되던 H3 상태명·필드 Label을 없앴다. 접근성 이름은 Trigger의 `aria-label="시작일|마감일|날짜 (상태명)"`(보이는 상태명 포함). `Disabled dates`의 규칙 문구 "5일 이전과 일요일은 선택 불가"는 Trigger 아래 도움말(12/18/400 secondary)로 옮기고 `aria-describedby`로 연결했다. 두 섹션은 Input과 같은 그리드(최대 1120px, 최대 3열·열 최소 240px, 좁으면 2→1열, 공통 들여쓰기)를 쓴다. Usage(형식 2종)와 verification Story, DatePicker·토큰·API는 변경 없다. Storybook 사이드바 표시명은 `날짜 선택`(Story ID 변경 없음). - verification: `Empty`, `Selected`, `Controlled`. ## 10. 사용자 확정 결정 diff --git a/docs/components/input.md b/docs/components/input.md index a92285e..1b44641 100644 --- a/docs/components/input.md +++ b/docs/components/input.md @@ -86,6 +86,7 @@ native `` 동작 전체(`type`, `file:` 스타일 class, `placeholder`), - 대표 Story `All`("Input"): Sizes(Small / Medium / Large 비교) → States(`focus`, `disabled`, `readonly`) → Validation(`error`, `error-message`). Focus는 `play` 함수로 실제 focus를 준다. 2026-10-22 Overview(`default`, size 생략 = Large)는 Sizes의 Large와 같아 대표 화면에서 뺐고, 크기별 수치 목록·설명은 숨김 `Sizes`("Compare Sizes")에 남겼다. size 생략 시 Large(§5)는 그대로다. - 2026-11-12 대표 화면 정리: States·Validation도 Sizes처럼 상태명(Focus / Disabled / Readonly / Error / Error Message)을 입력창 Label 자리에 한 번만 표시하고, 반복되던 `Project name` Label과 별도 그룹 제목은 없앴다. 입력 필드의 접근성 이름은 `aria-label="Project name (상태명)"`으로 유지한다(보이는 상태명 포함). 세 섹션은 같은 그리드(최대 1120px, 최대 3열·열 최소 240px, 좁으면 2→1열)를 쓰며 Validation 2개는 States 앞 두 열과 정렬된다. Story 전시만 바뀌었고 Input 컴포넌트·토큰·API·verification Story는 변경 없다. +- 2026-11-13: States의 Disabled를 Focus·Validation과 같은 Medium(34px)으로 맞췄다. Readonly는 컴포넌트 규칙(텍스트만, size와 무관하게 Large 수치)이라 42px 그대로다. Input 기본값·크기 정책은 변경 없음. - verification(`tags: ["verification"]`): `Default`, `Focus`, `Error`, `InvalidFocus`, `ErrorMessage`, `Required`, `Disabled`, `Readonly`, `Sizes`("Compare Sizes"), `Small`, `Medium`, `Large`, `Playground`(HM 전용). - Error Message·Required 표시는 Story 안의 조합 예시이며 Input 컴포넌트의 일부가 아니다. - sidebar는 `All` 하나만 보이는 1뎁스. 운영 규칙은 지침 §6.3, §7 참조. diff --git a/docs/components/radio-group.md b/docs/components/radio-group.md index d6fe9ce..b5ac667 100644 --- a/docs/components/radio-group.md +++ b/docs/components/radio-group.md @@ -9,7 +9,7 @@ | 구현 상태 | 구현 완료 (현재 HM 규격) | | 기준일 | 2026-10-02 | | 기반 | shadcn/ui Radio Group (Radix `RadioGroup`) | -| 대표 Story | `Components/Form/Radio Group` → `All` (이름 "Radio Group") | +| 대표 Story | `Components/Form/Selection Controls` → `All`의 상태 매트릭스 Radio Group 열(Default·Hover·Focus·Disabled 항목/그룹·Validation)과 Variants의 Vertical·Horizontal(사이드바 `선택 컨트롤`, `components-form-selection-controls--all`). 기존 `Components/Form/Radio Group` → `All`(`components-form-radio-group--all`)은 URL 직접 접근용으로 유지(사이드바 숨김) Focus 칸의 링은 Storybook 전용 `data-sb-focus`(`.storybook/pseudo-states.ts`, 2026-11-13)로 고정해 보여 주며 실제 Tab 포커스 동작은 같다. | | 보류 | 아래 §11 | ## 2. 적용 근거 @@ -57,7 +57,7 @@ shadcn `size-4 border-input text-primary shadow-xs dark:` class 제거 → theme ## 9. Storybook -대표 Story `All`: Variants(`vertical`, `horizontal`; 2026-11-09 Overview 제거로 Vertical이 Variants 첫 항목), States(`hover`, `focus`, `disabled-item`, `disabled-group`), Validation(`error`). Focus는 `play`로 실제 focus. `hover`는 첫 항목을 Storybook 전용 `data-sb-hover`로 고정해 보여 주며 RadioGroupItem API가 아니다. verification: `Vertical`, `Horizontal`, `Disabled`, `Error`. +숨김 기존 `All`(URL 직접 접근용; 사이드바 대표는 Selection Controls, §표 참고): Variants(`vertical`, `horizontal`; 2026-11-09 Overview 제거로 Vertical이 Variants 첫 항목), States(`hover`, `focus`, `disabled-item`, `disabled-group`), Validation(`error`). Focus는 `play`로 실제 focus. `hover`는 첫 항목을 Storybook 전용 `data-sb-hover`로 고정해 보여 주며 RadioGroupItem API가 아니다. verification: `Vertical`, `Horizontal`, `Disabled`, `Error`. ## 10. 사용자 확정 결정 diff --git a/docs/components/switch.md b/docs/components/switch.md index 286d2e6..f9d35a1 100644 --- a/docs/components/switch.md +++ b/docs/components/switch.md @@ -9,7 +9,7 @@ | 구현 상태 | 구현 완료 (현재 HM 규격) | | 기준일 | 2026-10-02 | | 기반 | shadcn/ui Switch (Radix `Switch`) | -| 대표 Story | `Components/Form/Switch` → `All` (이름 "Switch") | +| 대표 Story | `Components/Form/Selection Controls` → `All`의 상태 매트릭스 Switch 열(Default·Hover·Focus·Disabled, Validation 없음)(사이드바 `선택 컨트롤`, `components-form-selection-controls--all`). 기존 `Components/Form/Switch` → `All`(`components-form-switch--all`)은 URL 직접 접근용으로 유지(사이드바 숨김) Focus 칸의 링은 Storybook 전용 `data-sb-focus`(`.storybook/pseudo-states.ts`, 2026-11-13)로 고정해 보여 주며 실제 Tab 포커스 동작은 같다. | | 보류 | 아래 §11 | ## 2. 적용 근거 @@ -56,7 +56,7 @@ shadcn의 `h-[1.15rem] w-8`, `border`, `shadow-xs`, `dark:` class 제거 → the ## 9. Storybook -대표 Story `All`: States 한 구역에 `off`, `on`, `hover`, `focus`, `disabled`(2026-11-09 Overview 제거, PC 5열; 2026-10-22 `interactive` 구역 제거, 모든 예시가 실제 클릭으로 토글). `hover`는 Off·On을 Storybook 전용 `data-sb-hover`로 고정해 보여 주며 Switch API가 아니다. Focus는 `play`로 실제 focus. verification: `Off`, `On`, `Disabled`. +숨김 기존 `All`(URL 직접 접근용; 사이드바 대표는 Selection Controls, §표 참고): States 한 구역에 `off`, `on`, `hover`, `focus`, `disabled`(2026-11-09 Overview 제거, PC 5열; 2026-10-22 `interactive` 구역 제거, 모든 예시가 실제 클릭으로 토글). `hover`는 Off·On을 Storybook 전용 `data-sb-hover`로 고정해 보여 주며 Switch API가 아니다. Focus는 `play`로 실제 focus. verification: `Off`, `On`, `Disabled`. ## 10. 사용자 확정 결정 diff --git a/docs/components/toggle.md b/docs/components/toggle.md index 2e5ec8c..8d6c2b6 100644 --- a/docs/components/toggle.md +++ b/docs/components/toggle.md @@ -9,7 +9,7 @@ | 구현 상태 | 구현 완료 (현재 HM 규격) | | 기준일 | 2026-10-02 | | 기반 | shadcn/ui Toggle (Radix `Toggle`) | -| 대표 Story | `Components/Form/Toggle` → `All` (이름 "Toggle") | +| 대표 Story | `Components/Form/Button` → `All`의 "Toggle Button" 섹션(H3 Variants / States · Groups · Sizes, 사이드바 `버튼`). 기존 `Components/Form/Toggle` → `All`(`components-form-toggle--all`)은 URL 직접 접근용으로 유지(사이드바 숨김) | | 보류 | 아래 §11 | ## 2. 적용 근거 @@ -69,9 +69,9 @@ Radix 구조·`aria-pressed`·`data-state`·Enter/Space·controlled/uncontrolled ## 9. Storybook -- 대표 Story `All`("Toggle"): Variants(Off/On, default·outline)와 States(Disabled off/on), 단독 · 연결 그룹(단독 Toggle, `spacing=0` ToggleGroup 단일·다중 선택), Sizes(2026-11-09 Overview를 Variants로 바꾸고 PC 3열 기준으로 재배치). 2026-10-22 Icon-only·icon + text 예시는 숨김 `IconOnly`로만 확인하고, Controlled(`pressed` 표시)·className 확장 예시는 대표 화면에서 제거했다. `pressed` / `onPressedChange`와 `className` 확장 API(§5)는 그대로다. +- 대표 Story `All`("Toggle"): Variants(Off/On, default·outline)와 States(Disabled: Off/On — 2026-11-13 행 라벨과 반복되던 "Disabled" 글자 제거), 단독 · 연결 그룹(단독 Toggle, `spacing=0` ToggleGroup 단일·다중 선택), Sizes(2026-11-09 Overview를 Variants로 바꾸고 PC 3열 기준으로 재배치). 2026-10-22 Icon-only·icon + text 예시는 숨김 `IconOnly`로만 확인하고, Controlled(`pressed` 표시)·className 확장 예시는 대표 화면에서 제거했다. `pressed` / `onPressedChange`와 `className` 확장 API(§5)는 그대로다. - 2026-11-12 폼 요소 전시 통일: 나란히 놓인 토글 간격을 Button Story와 같은 8px로 맞췄다(Off/On·Disabled·Sizes·숨김 `IconOnly`, 기존 12px). `단독` 예시는 열 너비로 늘어나지 않고 Toggle 자체 너비를 유지한다. 상단 Variants·States는 기존 3열 중 두 칸 배치 대신 2열로 바꿔 전체 폭을 각 행의 한 줄 폭 비율(324:234, 최소 max-content)로 나눈다. 미리보기 폭 1000px 이상(브라우저 1280px + LNB 180px 포함)에서 Variants 4개가 한 줄로 유지되고, 그 미만은 1열로 쌓여 자연스럽게 줄바꿈한다. 이 때문에 States 시작 위치는 아래 `단독 · 연결 그룹` 3열과 맞추지 않는다. Toggle·토큰·API는 변경 없다. -- verification: `States`, `Icon Only`, `Disabled`. +- verification: `Toggle`(기존 `All`, 사이드바 숨김), `States`, `Icon Only`, `Disabled`, `Content Nodes`. ## 10. 사용자 확정 결정 diff --git a/src/components/button.stories.tsx b/src/components/button.stories.tsx index 2ec50b1..84e6990 100644 --- a/src/components/button.stories.tsx +++ b/src/components/button.stories.tsx @@ -1,8 +1,9 @@ -import { useState, type ReactNode } from "react" +import { createContext, useCallback, useContext, useId, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from "react" import { DownloadIcon } from "lucide-react" import type { Meta, StoryObj } from "@storybook/react-vite" import { Button, type ButtonAppearance } from "@hm-design/ui" import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page" +import { ToggleSections } from "./toggle-examples" // Story structure follows ui_viz (implementations/web/storybook/Button.stories.jsx): // one representative "Button" Story shows kinds, sizes and states on a single screen; the same sections also exist @@ -231,52 +232,96 @@ function DestructiveBoard() { // Group label: the StateBoard H3 style (14/20/500, secondary). `data-sb-board` gives the block the common one-step section indent. const groupLabel = "m-0 text-sm font-medium text-muted-foreground" -// Sizes / Variants (top, side by side): one row per group, label on a fixed 128px left column so every group title and first -// button line up. At 640px and below the label moves above its buttons. Buttons keep the page-wide 8px gap, across and between -// rows (same as the States matrices), and wrap only when too narrow. -function GroupRows({ groups }: { groups: { id: string; label: string; children: ReactNode }[] }) { +// 2026-11-13 (user request): one column per treatment, Sizes and States inside it. Each block is its H3 label (StateBoard H3 +// style), 8px, then the specimens; Sizes and States are 24px apart. The blocks stay on the section edge (no data-sb-board +// indent) so the 420px Standard Solid matrix fits an equal third at the 1400px breakpoint without an inner scroll. +function GroupBlock({ id, label, children }: { id: string; label: string; children: ReactNode }) { return ( -
- {groups.map(({ id, label, children }) => ( -
-

{label}

-
{children}
-
- ))} -
- ) -} - -// States (bottom): Brand | Standard Solid | Standard Outline columns, title on top, all tops aligned. The columns use the -// whole width, shared in proportion to their matrices (about 301 / 420 / 338px, never narrower than the matrix); each matrix -// keeps its 8px button gap and sits at the start of its column. 3 columns from a 1250px preview (the three need about 1106px -// of content plus the page margins), 2 columns (Brand + Solid, then Outline) from 890px, 1 column below; a 1-column matrix -// wider than the screen scrolls in its own box only (the page never scrolls sideways). -function GroupColumns({ groups }: { groups: { id: string; label: string; children: ReactNode }[] }) { - return ( -
- {groups.map(({ id, label, children }) => ( -
-

{label}

- {children} -
- ))} -
+
+

{label}

+ {children} +
) } // States: one matrix per treatment, rows = Default / Hover / Pressed / Disabled (standardStates, the same 4 rows for Brand; -// the live Interact button stays on the verification "Brand States"), columns = that treatment's colors in the Variants order. -// Columns follow their buttons (auto table layout). 4px cell padding gives the same 8px gap as Sizes / Variants between -// buttons, rows, the state label and the color header; the outer edge keeps none (pl-0 / last:pr-0) so the three matrices -// fit one row at 1440px. Buttons sit centered under their color and are never resized. +// the live Interact button stays on the verification "Brand States"), columns = that treatment's colors in the roles order. +// Columns follow their buttons (auto table layout). 4px cell padding gives the same 8px gap as Sizes between buttons, rows, +// the state label and the color header; the outer edge keeps none (pl-0 / last:pr-0). Buttons sit centered under their color +// and are never resized. Matrix widths: Brand 301px, Standard Solid 420px, Standard Outline 338px. +// 2026-11-13 (user request, no inner scroll on narrow screens): when a matrix is wider than its column (the 420px Standard Solid +// matrix in a 358px column at 390px), every treatment switches together to the stacked layout: one row per state, its label +// above the buttons, which wrap with the same 8px gap. Each matrix measures its own table (the auto-layout width it needs) and +// reports whether it fits; MatrixFitProvider stacks all of them while any does not, so the three treatments keep one layout. +// Storybook presentation only: the buttons, their props and states are unchanged. +// Stacked layout state names (2026-11-13, user request): one step below the H3 "States" label (14/20/500) so the two levels +// read apart — 12/16/400, same secondary color. Only these names change; the common H2 / H3 styles are untouched. +const stackedStateLabel = "text-xs font-normal text-muted-foreground" + +const MatrixFit = createContext<{ stacked: boolean; report: (id: string, overflow: boolean) => void }>({ stacked: false, report: () => {} }) + +function MatrixFitProvider({ children }: { children: ReactNode }) { + const [overflowing, setOverflowing] = useState>(() => new Set()) + const report = useCallback((id: string, overflow: boolean) => { + setOverflowing((current) => { + if (current.has(id) === overflow) return current + const next = new Set(current) + if (overflow) next.add(id) + else next.delete(id) + return next + }) + }, []) + const value = useMemo(() => ({ stacked: overflowing.size > 0, report }), [overflowing, report]) + return {children} +} + function StateMatrix({ appearance, states }: { appearance: ButtonAppearance; states: readonly (readonly [string, Record])[] }) { const colors = rolesFor(appearance) + const { stacked, report } = useContext(MatrixFit) + const frame = useRef(null) + // The table's own width, kept while the stacked layout is shown (no table to measure then). + const tableWidth = useRef(0) + const labelId = useId() + useLayoutEffect(() => { + const element = frame.current + if (!element) return + const check = () => { + const table = element.querySelector("table") + if (table) tableWidth.current = table.offsetWidth + report(appearance, tableWidth.current > element.clientWidth) + } + const observer = new ResizeObserver(check) + observer.observe(element) + check() + // The labels may get wider once the web font has loaded. + void document.fonts?.ready.then(check) + return () => { + observer.disconnect() + report(appearance, false) + } + }, [appearance, report]) + if (stacked) { + return ( +
+ {states.map(([state, props], index) => ( +
+ + {state} + +
+ {colors.map(([variant, color]) => ( + + ))} +
+
+ ))} +
+ ) + } return ( -
+
@@ -311,8 +356,16 @@ function StateMatrix({ appearance, states }: { appearance: ButtonAppearance; sta ) } -// Representative Story: the common Story page (Sizes → Variants → States). +// The Toggle Button section of the representative page, in the same stacked / matrix form as the state matrices. +function ToggleButtonSection() { + const { stacked } = useContext(MatrixFit) + return +} + +// Representative Story: the common Story page, one section per treatment (Brand | Standard Solid | Standard Outline). // The former Overview button was the default Brand Medium button already shown under Sizes, so Overview is merged into Sizes. +// 2026-11-13 (user request): the Variants section and the page-level Sizes / States titles are removed; each treatment section +// (H2, common title → content 12px) holds its own Sizes and States (H3). The verification "Roles" Story keeps the role rows. // Named after the component, as in ui_viz. It is the only Button entry in the default sidebar, so Storybook shows Button as a single 1-depth item. export const All: Story = { name: "Button", @@ -320,45 +373,37 @@ export const All: Story = { render: () => ( - {/* Sizes | Variants on one row from a 1080px preview (1280px screen with the 180px LNB), sharing the whole width in two - equal halves (never narrower than their rows). Narrower previews stack the two sections. */} - - - ({ - id: `sizes-${appearance}`, - label, - children: sizes.map(([size, sizeLabel]) => ( - - )), - }))} - /> - - - ({ - id: `roles-${appearance}`, - label, - children: rolesFor(appearance).map(([variant, color]) => ( - - )), - }))} - /> - - - - ({ - id: `${appearance}-states`, - label, - children: , - }))} - /> - + {/* Equal-width columns from a 1400px preview (the 420px Standard Solid matrix fits a third: 3 × 420 + 2 × 24 plus the page + margins and the scrollbar); below that Brand → Standard Solid → Standard Outline in one column, 28px apart (the + common section gap of StorySectionGrid). */} + + + {appearances.map(([appearance, label]) => ( + +
+ +
+ {sizes.map(([size, sizeLabel]) => ( + + ))} +
+ + + + +
+ + ))} + + {/* 2026-11-13 (user request): Toggle Button joins the Button page ("버튼") after the treatment columns, from + ./toggle-examples unchanged; the Toggle Stories keep their IDs and direct URLs but are hidden from the sidebar. + `flat`: one "Toggle Button" H2 section, 36px below the columns above, with 3 equal group columns (Variants / States, + Groups, Sizes) from 1400px like the treatments, each row in the States matrix form (label left, 8px rhythm). + Inside MatrixFitProvider so its rows switch to the stacked form together with the matrices. */} + + ), } diff --git a/src/components/calendar-examples.tsx b/src/components/calendar-examples.tsx new file mode 100644 index 0000000..c70481e --- /dev/null +++ b/src/components/calendar-examples.tsx @@ -0,0 +1,82 @@ +import { useState, type ReactNode } from "react" +import type { DateRange } from "react-day-picker" +import { Calendar } from "@hm-design/ui" +import { StateBoard } from "@/components/story-board" +import { StorySection } from "@/components/story-page" + +// Shared Calendar specimens (Storybook only). Used by the Calendar Stories (verification) and by the Date Picker representative +// page, which shows Date Picker and Calendar under one sidebar item ("날짜 선택"). +// Each mode uses real, clickable calendars. `today` is pinned to 2026-10-02 so the Story looks the same on any day; this uses +// react-day-picker's own `today` prop, not an HM state. Korean is the Calendar default locale. + +const today = new Date(2026, 9, 2) +const month = new Date(2026, 9, 1) + +const box = (node: ReactNode) =>
{node}
+ +// `showValue={false}` hides the value readout on the representative page; the verification Stories keep it. +export function Single({ showValue = true }: { showValue?: boolean }) { + const [date, setDate] = useState(new Date(2026, 9, 15)) + return ( +
+ {box()} + {showValue ? {`선택: ${date ? date.toLocaleDateString("ko-KR") : "없음"}`} : null} +
+ ) +} + +export function DisabledDates() { + const [date, setDate] = useState() + return box( + + ) +} + +export function Range() { + const [range, setRange] = useState({ from: new Date(2026, 9, 8), to: new Date(2026, 9, 14) }) + return box() +} + +function TwoMonths() { + return box() +} + +// Same 3-column track as the Form pages (1 column on narrow screens). Each cell is a one-specimen StateBoard so subtitles and +// specimen tops line up; the wide Two months specimen takes two tracks (the full row on narrow screens). +const Grid = ({ children }: { children: ReactNode }) => ( +
{children}
+) +const Cell = ({ id, label, wide, children }: { id: string; label: string; wide?: boolean; children: ReactNode }) => ( +
+ +
+) + +// The Calendar sections of a representative page. `titlePrefix` names the component in each section title and `idPrefix` +// keeps the specimen ids (data-overview-state) unique when the sections share a page with other components. +export function CalendarSections({ titlePrefix, idPrefix = "" }: { titlePrefix?: string; idPrefix?: string }) { + const title = (name: string) => (titlePrefix ? `${titlePrefix} · ${name}` : name) + return ( + <> + + + + + + + + + + + + + + ) +} diff --git a/src/components/calendar.stories.tsx b/src/components/calendar.stories.tsx index 205df44..95f20fb 100644 --- a/src/components/calendar.stories.tsx +++ b/src/components/calendar.stories.tsx @@ -1,88 +1,26 @@ -import { useState, type ReactNode } from "react" import type { Meta, StoryObj } from "@storybook/react-vite" -import type { DateRange } from "react-day-picker" -import { Calendar } from "@hm-design/ui" -import { StateBoard } from "@/components/story-board" -import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page" +import { StoryPage, StoryPageHeader } from "@/components/story-page" +import { CalendarSections, DisabledDates, Range, Single } from "./calendar-examples" -// The representative "Calendar" Story shows each mode with real, clickable calendars; the same specimens also exist as Stories -// tagged `verification` (hidden from the sidebar). `today` is pinned to 2026-10-02 so the Story looks the same on any day; this -// uses react-day-picker's own `today` prop, not an HM state. Korean is the Calendar default locale. - -const today = new Date(2026, 9, 2) -const month = new Date(2026, 9, 1) - -const box = (node: ReactNode) =>
{node}
- -// `showValue={false}` hides the value readout on the representative page; the verification Stories keep it. -function Single({ showValue = true }: { showValue?: boolean }) { - const [date, setDate] = useState(new Date(2026, 9, 15)) - return ( -
- {box()} - {showValue ? {`선택: ${date ? date.toLocaleDateString("ko-KR") : "없음"}`} : null} -
- ) -} - -function DisabledDates() { - const [date, setDate] = useState() - return box( - - ) -} - -function Range() { - const [range, setRange] = useState({ from: new Date(2026, 9, 8), to: new Date(2026, 9, 14) }) - return box() -} - -function TwoMonths() { - return box() -} - -// Same 3-column track as the Form pages (1 column on narrow screens). Each cell is a one-specimen StateBoard so subtitles, dividers and -// specimen tops line up; the wide Two months specimen takes two tracks (the full row on narrow screens). -const Grid = ({ children }: { children: ReactNode }) => ( -
{children}
-) -const Cell = ({ id, label, wide, children }: { id: string; label: string; wide?: boolean; children: ReactNode }) => ( -
- -
-) +// The Calendar specimens live in ./calendar-examples and are also shown on the Date Picker representative page ("날짜 선택"), +// the single sidebar item for both. Every Story here keeps its ID and direct URL but is hidden from the sidebar +// (tag `verification`). // No `component`: Calendar props are a union of selection modes, so Stories without args would not type-check. const meta = { title: "Components/Search & Date/Calendar", parameters: { layout: "padded" } } satisfies Meta export default meta type Story = StoryObj -// Representative Story: the common Story page; the sections group the same specimens. +// Former representative Story: kept for its ID and direct URL; hidden from the sidebar (tag `verification`) since the Date +// Picker page shows the same sections. export const All: Story = { + tags: ["verification"], name: "Calendar", parameters: { layout: "fullscreen", controls: { disable: true } }, render: () => ( - - - - - - - - - - - - + ), } diff --git a/src/components/checkbox-examples.tsx b/src/components/checkbox-examples.tsx new file mode 100644 index 0000000..f8a4951 --- /dev/null +++ b/src/components/checkbox-examples.tsx @@ -0,0 +1,107 @@ +import { useId, useState, type ReactNode } from "react" +import { Checkbox, Label } from "@hm-design/ui" +import { StateBoard, type BoardState } from "@/components/story-board" +import { StorySection } from "@/components/story-page" + +// Shared Checkbox specimens (Storybook only). Used by the Checkbox Stories (verification) and by the Selection Controls +// representative page ("선택 컨트롤"), which shows Checkbox, Radio Group and Switch under one sidebar item. +// Current HM Checkbox. ui-viz has no Checkbox spec, so it was reference only. +// The option label is the HM Label; its foreground role for Checkbox options is still TBD in ui_viz. + +// Story-only Label color. The shared Label sets `color: var(--hm-label-text)` from an unlayered theme rule, so a utility +// like `text-foreground` loses to it; overriding the Label's own token on the element works. Option labels use the default +// text color; a Label next to a disabled Checkbox (`peer-disabled`) keeps the secondary color. State titles are untouched. +export const optionLabel = "[--hm-label-text:var(--foreground)] peer-disabled:[--hm-label-text:var(--hm-sem-fg-secondary)]" + +export function Option({ label, children }: { label: string; children: (id: string) => ReactNode }) { + const id = useId() + return ( +
+ {children(id)} + +
+ ) +} + +// Representative-page layout (Storybook presentation only): 3 equal columns on PC (iframe width 1000px and up), shrinking +// to fit below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so StateBoard's +// auto-fill grid cannot leave an empty or stretched track. +// `className` replaces the track (the Selection Controls page passes its shared 4-column grid). +function StateGrid({ states, className }: { states: BoardState[]; className?: string }) { + return ( +
+ {states.map((state) => ( + + ))} +
+ ) +} + +// The wrapping Long Label example (former Usage section of the representative page), also used by the hidden `LongLabel` Story. +export function LongLabelExample() { + return ( +
+
+ + +
+
+ ) +} + +// Starts indeterminate; a click makes it checked (Radix), so the Indeterminate example is also the interactive one. +// Exported for the Selection Controls page's Variants section. +export function Controlled() { + const [checked, setChecked] = useState("indeterminate") + return ( + + ) +} + +// The Checkbox sections of a representative page. `titlePrefix` names the component in each section title and `idPrefix` +// keeps the specimen ids (data-overview-state) unique when the sections share a page with other components. `gridClassName` +// gives every section of a shared page one column track (Selection Controls); without it the Checkbox page keeps its own. +export function CheckboxSections({ titlePrefix, idPrefix = "", gridClassName }: { titlePrefix?: string; idPrefix?: string; gridClassName?: string }) { + const title = (name: string) => (titlePrefix ? `${titlePrefix} · ${name}` : name) + return ( + <> + + {(id) => } }, + { id: `${idPrefix}checked`, label: "Checked", children: }, + { id: `${idPrefix}indeterminate`, label: "Indeterminate", children: }, + { + id: `${idPrefix}hover`, + label: "Hover", + // data-sb-hover pins :hover (Storybook only, .storybook/pseudo-states.ts). + children: ( +
+ + +
+ ), + }, + { id: `${idPrefix}focus`, label: "Focus", children: }, + { + id: `${idPrefix}disabled`, + label: "Disabled", + children: ( +
+ + +
+ ), + }, + ]} + /> + + + {(id) => } }]} /> + + + ) +} diff --git a/src/components/checkbox.stories.tsx b/src/components/checkbox.stories.tsx index 038ced0..f4f0a67 100644 --- a/src/components/checkbox.stories.tsx +++ b/src/components/checkbox.stories.tsx @@ -1,61 +1,11 @@ -import { useId, useState, type ReactNode } from "react" import type { Meta, StoryObj } from "@storybook/react-vite" -import { Checkbox, Label } from "@hm-design/ui" -import { StateBoard, type BoardState } from "@/components/story-board" -import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page" +import { Checkbox } from "@hm-design/ui" +import { StoryPage, StoryPageHeader } from "@/components/story-page" +import { CheckboxSections, LongLabelExample, Option } from "./checkbox-examples" -// Current HM Checkbox. ui-viz has no Checkbox spec, so it was reference only. -// The option label is the HM Label; its foreground role for Checkbox options is still TBD in ui_viz. - -// Story-only Label color. The shared Label sets `color: var(--hm-label-text)` from an unlayered theme rule, so a utility -// like `text-foreground` loses to it; overriding the Label's own token on the element works. Option labels use the default -// text color; a Label next to a disabled Checkbox (`peer-disabled`) keeps the secondary color. State titles are untouched. -const optionLabel = "[--hm-label-text:var(--foreground)] peer-disabled:[--hm-label-text:var(--hm-sem-fg-secondary)]" - -function Option({ label, children }: { label: string; children: (id: string) => ReactNode }) { - const id = useId() - return ( -
- {children(id)} - -
- ) -} - -// Representative-page layout (Storybook presentation only): 3 equal columns on PC (iframe width 1000px and up), shrinking -// to fit below that. Each specimen sits in its own single-column StateBoard (min larger than any column), so StateBoard's -// auto-fill grid cannot leave an empty or stretched track. -function StateGrid({ states }: { states: BoardState[] }) { - return ( -
- {states.map((state) => ( - - ))} -
- ) -} - -// The wrapping Long Label example (former Usage section of the representative page), also used by the hidden `LongLabel` Story. -function LongLabelExample() { - return ( -
-
- - -
-
- ) -} - -// Starts indeterminate; a click makes it checked (Radix), so the Indeterminate example is also the interactive one. -function Controlled() { - const [checked, setChecked] = useState("indeterminate") - return ( - - ) -} +// Current HM Checkbox. The specimens live in ./checkbox-examples and are also shown on the Selection Controls representative +// page ("선택 컨트롤", Checkbox / Radio Group / Switch), the single sidebar item for the three. Every Story here keeps its ID and +// direct URL but is hidden from the sidebar (tag `verification`). const meta = { title: "Components/Form/Checkbox", @@ -73,46 +23,16 @@ const meta = { export default meta type Story = StoryObj +// Former representative Story: kept for its ID and direct URL; hidden from the sidebar (tag `verification`) since the Selection +// Controls page shows the same sections. export const All: Story = { + tags: ["verification"], name: "Checkbox", parameters: { layout: "fullscreen", controls: { disable: true } }, render: () => ( - - {(id) => } }, - { id: "checked", label: "Checked", children: }, - { id: "indeterminate", label: "Indeterminate", children: }, - { - id: "hover", - label: "Hover", - // data-sb-hover pins :hover (Storybook only, .storybook/pseudo-states.ts). - children: ( -
- - -
- ), - }, - { id: "focus", label: "Focus", children: }, - { - id: "disabled", - label: "Disabled", - children: ( -
- - -
- ), - }, - ]} - /> - - - {(id) => } }]} /> - + ), play: async ({ canvasElement }) => { diff --git a/src/components/combobox.stories.tsx b/src/components/combobox.stories.tsx index 82f9bdf..1130165 100644 --- a/src/components/combobox.stories.tsx +++ b/src/components/combobox.stories.tsx @@ -1,7 +1,6 @@ import { useState, type ReactNode } from "react" import type { Meta, StoryObj } from "@storybook/react-vite" import { Combobox, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, type ComboboxOption } from "@hm-design/ui" -import { StateBoard } from "@/components/story-board" import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page" // Combobox is a Popover + Command composition (search + single choice); Select stays for short lists without search. @@ -106,17 +105,6 @@ function SelectComparison() { ) } -// Same 3-column track as the Form pages (1 column on narrow screens). Each cell is a one-specimen StateBoard so subtitles, dividers and -// fields line up; sections with fewer specimens leave the remaining tracks empty. A wide cell takes two tracks (the full row on narrow screens). -const Grid = ({ children }: { children: ReactNode }) => ( -
{children}
-) -const Cell = ({ id, label, wide, children }: { id: string; label: string; wide?: boolean; children: ReactNode }) => ( -
- -
-) - // Sizes / States (2026-11-12): the Input / Select field grid with the common section indent — up to 3 tracks of at least 240px // within 1120px, narrower widths drop to 2 / 1 columns. Each cell is one field whose Label is the state name. const fieldColumns = @@ -151,7 +139,7 @@ export const All: Story = { }, + { id: "empty", render: }, { id: "medium", render: }, ]} /> @@ -165,10 +153,10 @@ export const All: Story = { /> - - - - +
+
+
+
), diff --git a/src/components/date-picker-story.css b/src/components/date-picker-story.css new file mode 100644 index 0000000..180d562 --- /dev/null +++ b/src/components/date-picker-story.css @@ -0,0 +1,99 @@ +.sb-page.sb-date-picker { + --sb-page-section-gap: 24px; + --sb-date-picker-field-max: 358px; + /* 276px Calendar plus the existing 1px border on each side. */ + --sb-date-picker-calendar-width: 278px; + --sb-date-picker-column-gap: 16px; +} + +.sb-date-picker > .sb-page-inner { + container: date-picker-story / inline-size; +} + +.sb-date-picker-fields { + display: grid; + grid-template-columns: minmax(0, var(--sb-date-picker-field-max)); + align-items: start; + gap: var(--sb-date-picker-column-gap); +} + +.sb-date-picker-fields--usage > * { + max-width: 320px; +} + +.sb-date-picker .sb-date-picker-calendars { + column-gap: var(--sb-date-picker-column-gap); +} + +.sb-date-picker-calendars .sb-calendar-example-grid { + grid-template-columns: minmax(0, 1fr); + gap: var(--sb-date-picker-column-gap); +} + +.sb-date-picker-calendars .sb-calendar-example-grid > * { + overflow-x: auto; +} + +.sb-date-picker-calendars .sb-calendar-example-wide { + grid-column: 1 / -1; + justify-self: start; + width: fit-content; + max-width: 100%; +} + +/* Two field tracks fit after the Storybook indent. */ +@container date-picker-story (min-width: 512px) { + .sb-date-picker-fields { + grid-template-columns: repeat(2, minmax(0, var(--sb-date-picker-field-max))); + } +} + +@container date-picker-story (min-width: 588px) { + .sb-date-picker-calendars .sb-calendar-example-grid:has(.sb-calendar-example-wide) { + grid-template-columns: repeat(2, var(--sb-date-picker-calendar-width)); + } +} + +/* Four calendar-width tracks + three 16px gaps + the 16px Storybook indent. */ +@container date-picker-story (min-width: 1176px) { + .sb-date-picker-fields, + .sb-date-picker .sb-date-picker-calendars { + grid-template-columns: repeat(4, minmax(var(--sb-date-picker-calendar-width), var(--sb-date-picker-field-max))); + } + + /* Subgrids align the group headings and first specimen row without flattening either section. */ + .sb-date-picker .sb-date-picker-calendars { + row-gap: 0; + padding-left: var(--sb-page-indent); + } + + .sb-date-picker-calendars > .sb-page-section, + .sb-date-picker-calendars .sb-page-section-body, + .sb-date-picker-calendars .sb-calendar-example-grid { + display: grid; + grid-template: subgrid / subgrid; + } + + .sb-date-picker-calendars > .sb-page-section:first-child { + grid-area: 1 / 1 / span 3 / span 2; + } + + .sb-date-picker-calendars > .sb-page-section:last-child { + grid-area: 1 / 3 / span 2; + } + + .sb-date-picker-calendars .sb-page-section-body { + grid-area: 2 / 1 / -1 / -1; + } + + .sb-date-picker .sb-date-picker-calendars .sb-page-section-body > .sb-calendar-example-grid { + grid-area: 1 / 1 / -1 / -1; + grid-template-columns: subgrid; + padding-left: 0; + row-gap: 0; + } + + .sb-date-picker-calendars .sb-calendar-example-wide { + margin-top: var(--sb-date-picker-column-gap); + } +} diff --git a/src/components/date-picker.stories.tsx b/src/components/date-picker.stories.tsx index 81d038b..7c639cb 100644 --- a/src/components/date-picker.stories.tsx +++ b/src/components/date-picker.stories.tsx @@ -1,8 +1,9 @@ import { useState, type ReactNode } from "react" import type { Meta, StoryObj } from "@storybook/react-vite" import { DatePicker } from "@hm-design/ui" -import { StateBoard } from "@/components/story-board" -import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page" +import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page" +import { CalendarSections } from "./calendar-examples" +import "./date-picker-story.css" // DatePicker is a Popover + Calendar composition packaged as a component (value handling, trigger text, close on select). // The representative Story shows real pickers; the same specimens also exist as Stories tagged `verification` (hidden from the @@ -46,19 +47,14 @@ function Selected({ state }: { state?: string }) { ) } -function DefaultFormat() { +function FormatExample({ id, triggerId, label, children }: { id: string; triggerId: string; label: string; children: ReactNode }) { return ( - - - - ) -} - -function CustomFormat() { - return ( - - date.toLocaleDateString("ko-KR")} calendarProps={calendarProps} /> - +
+

+ +

+ {children} +
) } @@ -113,32 +109,14 @@ function Disabled({ state }: { state?: string }) { ) } -// Same 3-column track as the Form pages (1 column on narrow screens). Each cell is a one-specimen StateBoard so subtitles, dividers and -// fields line up; sections with fewer specimens leave the remaining tracks empty. -const Grid = ({ children }: { children: ReactNode }) => ( -
{children}
-) -const Cell = ({ id, label, children }: { id: string; label: string; children: ReactNode }) => ( -
- -
-) - -// Sizes / States (2026-11-12): the Input / Select field grid with the common section indent — up to 3 tracks of at least 240px -// within 1120px, narrower widths drop to 2 / 1 columns. Each cell is one field whose Label is the state name. -const fieldColumns = - "grid max-w-[1120px] items-start gap-6 [grid-template-columns:repeat(auto-fill,minmax(max(240px,calc((100%_-_48px)/3)),1fr))]" - function FieldRow({ fields }: { fields: { id: string; render: ReactNode }[] }) { return ( -
-
- {fields.map(({ id, render }) => ( -
- {render} -
- ))} -
+
+ {fields.map(({ id, render }) => ( +
+ {render} +
+ ))}
) } @@ -148,16 +126,18 @@ export default meta type Story = StoryObj // Representative Story: the common Story page; the sections group the same specimens. +// 2026-11-13 (user request): it also shows the Calendar sections from ./calendar-examples (titles "Calendar · …"), so +// "날짜 선택" is the one sidebar item for both; the Calendar Stories keep their IDs and direct URLs but are hidden from the sidebar. export const All: Story = { name: "Date Picker", parameters: { layout: "fullscreen", controls: { disable: true } }, render: () => ( - + }, + { id: "empty", render: }, { id: "medium", render: }, ]} /> @@ -173,11 +153,18 @@ export const All: Story = { /> - - - - +
+ + + + + date.toLocaleDateString("ko-KR")} calendarProps={calendarProps} /> + +
+ + + ), } diff --git a/src/components/input.stories.tsx b/src/components/input.stories.tsx index e86c3f7..6a37a38 100644 --- a/src/components/input.stories.tsx +++ b/src/components/input.stories.tsx @@ -163,7 +163,9 @@ export const All: Story = { diff --git a/src/components/radio-group-examples.tsx b/src/components/radio-group-examples.tsx new file mode 100644 index 0000000..8127e96 --- /dev/null +++ b/src/components/radio-group-examples.tsx @@ -0,0 +1,118 @@ +import { Label, RadioGroup, RadioGroupItem } from "@hm-design/ui" +import type { CSSProperties } from "react" +import { StateBoard, type BoardState } from "@/components/story-board" +import { StorySection } from "@/components/story-page" + +// Shared Radio Group specimens (Storybook only). Used by the Radio Group Stories (verification) and by the Selection Controls +// representative page ("선택 컨트롤"), which shows Checkbox, Radio Group and Switch under one sidebar item. +// Current HM Radio Group. ui-viz has no Radio spec, so it was reference only. + +// Story-only Label color. The shared Label sets `color: var(--hm-label-text)` from an unlayered theme rule, so a utility +// like `text-foreground` loses to it; overriding the Label's own token on the element works. Option labels use the default +// text color; a Label next to a disabled item (`peer-disabled`) keeps the secondary color. State titles are untouched. +const optionLabel = "[--hm-label-text:var(--foreground)] peer-disabled:[--hm-label-text:var(--hm-sem-fg-secondary)]" + +// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), shrinking to +// fit below that (`min` is the narrowest column). Each specimen sits in its own single-column StateBoard (min larger than +// any column), so StateBoard's auto-fill grid cannot leave an empty track. Full class names are listed so Tailwind sees them. +const specimenColumns = { + 2: "min-[1000px]:grid-cols-2", + 4: "min-[1000px]:grid-cols-4", +} as const + +// `className` replaces the track (the Selection Controls page passes its shared 4-column grid); `spans` gives a specimen +// cell more than one track there. +function SpecimenGrid({ states, columns, min = 220, className, spans }: { states: BoardState[]; columns: keyof typeof specimenColumns; min?: number; className?: string; spans?: Record }) { + return ( +
+ {states.map((state) => + spans?.[state.id] ? ( +
+ +
+ ) : ( + + ), + )} +
+ ) +} + +export function Group({ + prefix, + defaultValue = "a", + disabled, + disabledItem, + invalid, + orientation, + hoverItem, + focusItem, +}: { + prefix: string + defaultValue?: string + disabled?: boolean + disabledItem?: string + invalid?: boolean + orientation?: "horizontal" | "vertical" + // Pins :hover on one item with the Storybook-only data-sb-hover attribute (.storybook/pseudo-states.ts). + hoverItem?: string + // Pins :focus-visible (the focus ring) on one item with the Storybook-only data-sb-focus attribute (2026-11-13). + focusItem?: string +}) { + return ( + // The group name is a readable Korean name; `prefix` stays an internal id prefix only (screen readers no longer read it). + + {["a", "b", "c"].map((v) => ( +
+ + +
+ ))} + + ) +} + +// The Radio Group sections of a representative page. `titlePrefix` names the component in each section title and `idPrefix` +// keeps the specimen ids (data-overview-state) unique when the sections share a page with other components. `gridClassName` +// gives every section of a shared page one column track (Selection Controls); without it the Radio Group page keeps its own. +// In the shared track the Horizontal group takes 2 tracks from 1000px and the whole row below that, so its 3 options stay on +// one line (the horizontal group wraps, flex-wrap, when its cell is narrower than the row). +export function RadioGroupSections({ titlePrefix, idPrefix = "", gridClassName }: { titlePrefix?: string; idPrefix?: string; gridClassName?: string }) { + const title = (name: string) => (titlePrefix ? `${titlePrefix} · ${name}` : name) + return ( + <> + {/* Overview is merged into Variants: its Vertical example is the first Variants item. */} + + }, + { id: `${idPrefix}horizontal`, label: "Horizontal", children: }, + ]} + /> + + + }, + { id: `${idPrefix}focus`, label: "Focus", children: }, + { id: `${idPrefix}disabled-item`, label: "Disabled · 항목", children: }, + { id: `${idPrefix}disabled-group`, label: "Disabled · 그룹", children: }, + ]} + /> + + + {/* Same 4-column track as States, so the Error example keeps the width of one States column. */} + }]} /> + + + ) +} diff --git a/src/components/radio-group.stories.tsx b/src/components/radio-group.stories.tsx index 559fc9b..59eecbc 100644 --- a/src/components/radio-group.stories.tsx +++ b/src/components/radio-group.stories.tsx @@ -1,66 +1,11 @@ import type { Meta, StoryObj } from "@storybook/react-vite" -import { Label, RadioGroup, RadioGroupItem } from "@hm-design/ui" -import type { CSSProperties } from "react" -import { StateBoard, type BoardState } from "@/components/story-board" -import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page" +import { RadioGroup } from "@hm-design/ui" +import { StoryPage, StoryPageHeader } from "@/components/story-page" +import { Group, RadioGroupSections } from "./radio-group-examples" -// Current HM Radio Group. ui-viz has no Radio spec, so it was reference only. - -// Story-only Label color. The shared Label sets `color: var(--hm-label-text)` from an unlayered theme rule, so a utility -// like `text-foreground` loses to it; overriding the Label's own token on the element works. Option labels use the default -// text color; a Label next to a disabled item (`peer-disabled`) keeps the secondary color. State titles are untouched. -const optionLabel = "[--hm-label-text:var(--foreground)] peer-disabled:[--hm-label-text:var(--hm-sem-fg-secondary)]" - -// Representative-page layout (Storybook presentation only): equal columns on PC (iframe width 1000px and up), shrinking to -// fit below that (`min` is the narrowest column). Each specimen sits in its own single-column StateBoard (min larger than -// any column), so StateBoard's auto-fill grid cannot leave an empty track. Full class names are listed so Tailwind sees them. -const specimenColumns = { - 2: "min-[1000px]:grid-cols-2", - 4: "min-[1000px]:grid-cols-4", -} as const - -function SpecimenGrid({ states, columns, min = 220 }: { states: BoardState[]; columns: keyof typeof specimenColumns; min?: number }) { - return ( -
- {states.map((state) => ( - - ))} -
- ) -} - -function Group({ - prefix, - defaultValue = "a", - disabled, - disabledItem, - invalid, - orientation, - hoverItem, -}: { - prefix: string - defaultValue?: string - disabled?: boolean - disabledItem?: string - invalid?: boolean - orientation?: "horizontal" | "vertical" - // Pins :hover on one item with the Storybook-only data-sb-hover attribute (.storybook/pseudo-states.ts). - hoverItem?: string -}) { - return ( - - {["a", "b", "c"].map((v) => ( -
- - -
- ))} - - ) -} +// Current HM Radio Group. The specimens live in ./radio-group-examples and are also shown on the Selection Controls +// representative page ("선택 컨트롤", Checkbox / Radio Group / Switch), the single sidebar item for the three. Every Story here +// keeps its ID and direct URL but is hidden from the sidebar (tag `verification`). const meta = { title: "Components/Form/Radio Group", @@ -78,38 +23,16 @@ const meta = { export default meta type Story = StoryObj +// Former representative Story: kept for its ID and direct URL; hidden from the sidebar (tag `verification`) since the Selection +// Controls page shows the same sections. export const All: Story = { + tags: ["verification"], name: "Radio Group", parameters: { layout: "fullscreen", controls: { disable: true } }, render: () => ( - {/* Overview is merged into Variants: its Vertical example is the first Variants item. */} - - }, - { id: "horizontal", label: "Horizontal", children: }, - ]} - /> - - - }, - { id: "focus", label: "Focus", children: }, - { id: "disabled-item", label: "Disabled · 항목", children: }, - { id: "disabled-group", label: "Disabled · 그룹", children: }, - ]} - /> - - - {/* Same 4-column track as States, so the Error example keeps the width of one States column. */} - }]} /> - + ), play: async ({ canvasElement }) => { diff --git a/src/components/selection-controls-story.css b/src/components/selection-controls-story.css new file mode 100644 index 0000000..a2d6204 --- /dev/null +++ b/src/components/selection-controls-story.css @@ -0,0 +1,23 @@ +.sb-selection-sections > .sb-page-section:first-child { + margin-top: 0; +} + +@container (width >= 720px) { + .sb-selection-controls .sb-selection-sections { + display: grid; + grid-template-columns: max-content repeat(3, minmax(max-content, 1fr)); + column-gap: 24px; + } + + .sb-selection-sections > .sb-page-section, + .sb-selection-sections > .sb-page-section > .sb-page-section-body, + .sb-selection-sections .sb-selection-grid { + display: grid; + grid-column: 1 / -1; + grid-template-columns: subgrid; + } + + .sb-selection-sections > .sb-page-section > .sb-page-section-header { + grid-column: 1 / -1; + } +} diff --git a/src/components/selection-controls.stories.tsx b/src/components/selection-controls.stories.tsx new file mode 100644 index 0000000..1fd9630 --- /dev/null +++ b/src/components/selection-controls.stories.tsx @@ -0,0 +1,234 @@ +import type { Meta, StoryObj } from "@storybook/react-vite" +import type { CSSProperties, ReactNode } from "react" +import { Checkbox, Switch } from "@hm-design/ui" +import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page" +import { Controlled, Option } from "./checkbox-examples" +import { Group } from "./radio-group-examples" +import { Option as SwitchOption } from "./switch-examples" +import "./selection-controls-story.css" + +// Selection Controls ("선택 컨트롤", 2026-11-13): one representative page for the form on/off and choice controls Checkbox, +// Radio Group and Switch, which share the option Label, state and Disabled arrangement. Storybook presentation only: no new +// component, prop or API; the specimens are the components' public API with the ./-examples parts (Option, Group, +// Controlled). The former Checkbox / Radio Group / Switch representative Stories keep their IDs and direct URLs but are +// hidden from the sidebar (tag `verification`), as are their own verification Stories. +// 2026-11-13 (user request, state comparison matrix): the six " ·
" sections are replaced by one state +// matrix (rows Default / Hover / Focus / Disabled / Validation, columns Checkbox / Radio Group / Switch) and one Variants +// section for what is not a common state (Checkbox Indeterminate, Radio Group Vertical / Horizontal; Switch has none). + +const meta = { title: "Components/Form/Selection Controls", parameters: { layout: "padded" } } satisfies Meta +export default meta +type Story = StoryObj + +// Labels follow the Button page matrix: H3 / row and column headers 14/20/500 secondary (StateBoard H3 style); the per-cell +// state names of the stacked layout and the sub-specimen captions one step below, 12/16/400 secondary. +const groupLabel = "m-0 text-sm font-medium text-muted-foreground" +const caption = "text-xs font-normal text-muted-foreground" + +const states = [ + ["default", "Default"], + ["hover", "Hover"], + ["focus", "Focus"], + ["disabled", "Disabled"], + ["validation", "Validation"], +] as const +type StateKey = (typeof states)[number][0] + +// Two specimens of one cell side by side (Unchecked / Checked, Off / On, 항목 / 그룹); they wrap only in the stacked layout. +function Pair({ children }: { children: ReactNode }) { + return
{children}
+} + +// A specimen with its own small caption (Radio Group Disabled 항목 / 그룹, the Variants). +function Captioned({ id, label, children }: { id?: string; label: string; children: ReactNode }) { + return ( +
+ + {label} + + {children} +
+ ) +} + +// Only states each component implements; Switch has no Validation state, so its cell shows "—". +// Hover pins :hover with the Storybook-only data-sb-hover attribute (.storybook/pseudo-states.ts). Radio Group ids use the +// "sc-" prefix so they never collide with another Group on the page. +const columns: { id: string; label: string; cells: Partial> }[] = [ + { + id: "checkbox", + label: "Checkbox", + cells: { + default: ( + + + + + ), + hover: ( + + + + + ), + focus: , + disabled: ( + + + + + ), + validation: , + }, + }, + { + id: "radio-group", + label: "Radio Group", + cells: { + default: , + hover: , + // 2026-11-13: the ring is pinned on Option A (data-sb-focus); only the Checkbox specimen holds the page focus. + focus: , + disabled: ( + + + + + + + + + ), + // 2026-11-13 (user request): no option selected, so the Error row shows no green selected mark. + validation: , + }, + }, + { + id: "switch", + label: "Switch", + cells: { + default: ( + + {(id) => } + {(id) => } + + ), + hover: ( + + {(id) => } + {(id) => } + + ), + focus: {(id) => }, + disabled: ( + + {(id) => } + {(id) => } + + ), + }, + }, +] + +// One DOM for both layouts, rendered once in component order (Checkbox → Radio Group → Switch, each Default → Validation), +// the stacked layout's reading order. In the matrix each component block becomes display: contents, +// so its header and cells use the same tracks as Variants. +const matrixPosition = "@min-[720px]:[grid-row:var(--sc-row)] @min-[720px]:[grid-column:var(--sc-col)]" +const place = (row: number, col: number) => ({ "--sc-row": row, "--sc-col": col }) as CSSProperties + +function StateMatrix() { + return ( +
+ {/* Row headers: the matrix only; in the stacked layout each cell names its own state. */} + {states.map(([key, label], r) => ( +
+ {label} +
+ ))} + {columns.map((column, c) => ( +
+

+ {column.label} +

+ {states.map(([key, label], r) => { + const content = column.cells[key] + if (!content) { + return ( +
+ — + {`${column.label} ${label}: 해당 상태 없음`} +
+ ) + } + return ( +
+ + {label} + + {content} +
+ ) + })} +
+ ))} +
+ ) +} + +function Variants() { + return ( +
+
+

Checkbox

+ + + +
+
+

Radio Group

+ + + + + + + + +
+
+ ) +} + +// Named after the group, so Storybook shows it as a single 1-depth item ("선택 컨트롤"). +export const All: Story = { + name: "Selection Controls", + parameters: { layout: "fullscreen", controls: { disable: true } }, + render: () => ( + + +
+
+ + + + + + +
+
+ + ), + play: async ({ canvasElement }) => { + // Only one element can hold focus, so the page focuses the Checkbox Focus specimen. The Radio Group and Switch Focus + // specimens pin the same ring utilities with data-sb-focus, including in the optimized Storybook build. + // preventScroll: the page opens at its top, not at the focused specimen. + canvasElement.querySelector('[data-overview-state="checkbox-focus"] [role="checkbox"]')?.focus({ preventScroll: true }) + }, +} diff --git a/src/components/slider-story.css b/src/components/slider-story.css new file mode 100644 index 0000000..3d2d247 --- /dev/null +++ b/src/components/slider-story.css @@ -0,0 +1,57 @@ +.sb-slider-layout .sb-page-section:first-child { + margin-top: 0; +} + +.sb-slider-layout .sb-page-section-body { + display: grid; + align-items: start; + gap: 24px; + grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); + padding-inline-start: var(--sb-page-indent); +} + +@media (min-width: 1000px) { + .sb-slider-layout { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + grid-template-rows: max-content max-content 1fr; + column-gap: 24px; + padding-inline-start: var(--sb-page-indent); + } + + .sb-slider-layout .sb-page-section-header { + margin-inline-start: calc(-1 * var(--sb-page-indent)); + } + + /* The vertical specimen spans the last two rows so the horizontal examples set the start of States. */ + .sb-slider-layout #slider-variants { + display: grid; + grid-area: 1 / 1 / 4 / -1; + grid-template: subgrid / subgrid; + } + + .sb-slider-layout #slider-variants > .sb-page-section-header { + grid-column: 1 / -1; + } + + .sb-slider-layout #slider-variants > .sb-page-section-body { + grid-area: 2 / 1 / 4 / -1; + grid-template: subgrid / subgrid; + row-gap: 0; + padding-inline-start: 0; + } + + .sb-slider-layout [data-overview-state="vertical"] { + grid-area: 1 / 4 / 3 / 5; + } + + .sb-slider-layout #slider-states { + grid-area: 3 / 1 / 4 / 2; + align-self: start; + } + + .sb-slider-layout #slider-states > .sb-page-section-body { + grid-template-columns: minmax(0, 1fr); + padding-inline-start: 0; + } +} diff --git a/src/components/slider.stories.tsx b/src/components/slider.stories.tsx index 047b606..018a78a 100644 --- a/src/components/slider.stories.tsx +++ b/src/components/slider.stories.tsx @@ -1,39 +1,41 @@ import { useState, type ReactNode } from "react" import type { Meta, StoryObj } from "@storybook/react-vite" import { Slider } from "@hm-design/ui" -import { StateBoard } from "@/components/story-board" import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page" +import "./slider-story.css" // The representative Story shows each Slider mode with real, draggable controls; the same specimens also exist as Stories tagged // `verification` (hidden from the sidebar). The value label is the Story's composition (Slider has no built-in label). // Names (`aria-label`) are provided by the consumer. -function Labeled({ label, children, valueText }: { label: string; children: ReactNode; valueText: string }) { +function Labeled({ id, label, children, valueText }: { id?: string; label: string; children: ReactNode; valueText?: string }) { + const Example = id ? "section" : "div" + const Label = id ? "h3" : "span" return ( -
-
- {label} - {valueText} + +
+ + {valueText !== undefined && {valueText}}
{children} -
+ ) } -function Single() { +function Single({ example = false }: { example?: boolean }) { const [value, setValue] = useState([40]) return ( - + ) } -function Range() { +function Range({ example = false }: { example?: boolean }) { const [value, setValue] = useState([25, 75]) return ( - - + + ) } @@ -41,7 +43,7 @@ function Range() { function Step() { const [value, setValue] = useState([50]) return ( - + ) @@ -59,47 +61,31 @@ function Vertical() { ) } -const sections = [ - { id: "single", label: "Single", node: }, - { id: "range", label: "Range", node: }, - { id: "step", label: "Step", node: }, - { id: "disabled", label: "Disabled", node: }, - { id: "vertical", label: "Vertical", node: }, -] - const meta = { title: "Components/Form/Slider", component: Slider, parameters: { layout: "padded" } } satisfies Meta export default meta type Story = StoryObj -// Representative-page layout (Storybook presentation only): 4 equal columns on PC (iframe width 1000px and up), shrinking to -// fit below that (200px minimum per column). Each specimen sits in its own single-column StateBoard (min larger than any -// column), so StateBoard's auto-fill grid cannot leave an empty or stretched track. A section with fewer than 4 specimens -// keeps the same column width and leaves the remaining tracks empty. -function SpecimenGrid({ ids }: { ids: string[] }) { - return ( -
- {ids.map((id) => { - const s = sections.find((section) => section.id === id)! - return - })} -
- ) -} - -// Representative Story: the common Story page; the sections group the same specimens. -// Overview is merged into Variants (Single is its first item). `Vertical` centers its Slider in its column. export const All: Story = { name: "Slider", parameters: { layout: "fullscreen", controls: { disable: true } }, render: () => ( - - - - - - +
+ + + + + + + + + + + + + +
), } diff --git a/src/components/switch-examples.tsx b/src/components/switch-examples.tsx new file mode 100644 index 0000000..5271ab4 --- /dev/null +++ b/src/components/switch-examples.tsx @@ -0,0 +1,76 @@ +import { useId, type ReactNode } from "react" +import { Label, Switch } from "@hm-design/ui" +import { StateBoard, type BoardState } from "@/components/story-board" +import { StorySection } from "@/components/story-page" + +// Shared Switch specimens (Storybook only). Used by the Switch Stories (verification) and by the Selection Controls +// representative page ("선택 컨트롤"), which shows Checkbox, Radio Group and Switch under one sidebar item. + +// Story-only Label color. The shared Label sets `color: var(--hm-label-text)` from an unlayered theme rule, so a utility +// like `text-foreground` loses to it; overriding the Label's own token on the element works. Option labels use the default +// text color; a Label next to a disabled Switch (`peer-disabled`) keeps the secondary color. State titles are untouched. +const optionLabel = "[--hm-label-text:var(--foreground)] peer-disabled:[--hm-label-text:var(--hm-sem-fg-secondary)]" + +export function Option({ label, children }: { label: string; children: (id: string) => ReactNode }) { + const id = useId() + return ( +
+ {children(id)} + +
+ ) +} + +// Representative-page layout (Storybook presentation only): 5 equal columns on PC (iframe width 1000px and up), shrinking +// to fit below that (150px minimum per column). Each specimen sits in its own single-column StateBoard (min larger than +// any column), so StateBoard's auto-fill grid cannot leave an empty or stretched track. +// `className` replaces the track (the Selection Controls page passes its shared 4-column grid). +function StateGrid({ states, className }: { states: BoardState[]; className?: string }) { + return ( +
+ {states.map((state) => ( + + ))} +
+ ) +} + +// The Switch sections of a representative page. `titlePrefix` names the component in each section title and `idPrefix` +// keeps the specimen ids (data-overview-state) unique when the sections share a page with other components. `gridClassName` +// gives every section of a shared page one column track (Selection Controls); without it the Switch page keeps its own. +export function SwitchSections({ titlePrefix, idPrefix = "", gridClassName }: { titlePrefix?: string; idPrefix?: string; gridClassName?: string }) { + const title = (name: string) => (titlePrefix ? `${titlePrefix} · ${name}` : name) + return ( + + {(id) => } }, + { id: `${idPrefix}on`, label: "On", children: }, + { + id: `${idPrefix}hover`, + label: "Hover", + // data-sb-hover pins :hover (Storybook only, .storybook/pseudo-states.ts). + children: ( +
+ + +
+ ), + }, + { id: `${idPrefix}focus`, label: "Focus", children: }, + { + id: `${idPrefix}disabled`, + label: "Disabled", + children: ( +
+ + +
+ ), + }, + ]} + /> + + ) +} diff --git a/src/components/switch.stories.tsx b/src/components/switch.stories.tsx index 09c85cb..6742d10 100644 --- a/src/components/switch.stories.tsx +++ b/src/components/switch.stories.tsx @@ -1,36 +1,11 @@ -import { useId, type ReactNode } from "react" import type { Meta, StoryObj } from "@storybook/react-vite" -import { Label, Switch } from "@hm-design/ui" -import { StateBoard, type BoardState } from "@/components/story-board" -import { StoryPage, StoryPageHeader, StorySection } from "@/components/story-page" +import { Switch } from "@hm-design/ui" +import { StoryPage, StoryPageHeader } from "@/components/story-page" +import { Option, SwitchSections } from "./switch-examples" -// Story-only Label color. The shared Label sets `color: var(--hm-label-text)` from an unlayered theme rule, so a utility -// like `text-foreground` loses to it; overriding the Label's own token on the element works. Option labels use the default -// text color; a Label next to a disabled Switch (`peer-disabled`) keeps the secondary color. State titles are untouched. -const optionLabel = "[--hm-label-text:var(--foreground)] peer-disabled:[--hm-label-text:var(--hm-sem-fg-secondary)]" - -function Option({ label, children }: { label: string; children: (id: string) => ReactNode }) { - const id = useId() - return ( -
- {children(id)} - -
- ) -} - -// Representative-page layout (Storybook presentation only): 5 equal columns on PC (iframe width 1000px and up), shrinking -// to fit below that (150px minimum per column). Each specimen sits in its own single-column StateBoard (min larger than -// any column), so StateBoard's auto-fill grid cannot leave an empty or stretched track. -function StateGrid({ states }: { states: BoardState[] }) { - return ( -
- {states.map((state) => ( - - ))} -
- ) -} +// Current HM Switch. The specimens live in ./switch-examples and are also shown on the Selection Controls representative page +// ("선택 컨트롤", Checkbox / Radio Group / Switch), the single sidebar item for the three. Every Story here keeps its ID and +// direct URL but is hidden from the sidebar (tag `verification`). const meta = { title: "Components/Form/Switch", @@ -48,42 +23,16 @@ const meta = { export default meta type Story = StoryObj +// Former representative Story: kept for its ID and direct URL; hidden from the sidebar (tag `verification`) since the Selection +// Controls page shows the same sections. export const All: Story = { + tags: ["verification"], name: "Switch", parameters: { layout: "fullscreen", controls: { disable: true } }, render: () => ( - - {(id) => } }, - { id: "on", label: "On", children: }, - { - id: "hover", - label: "Hover", - // data-sb-hover pins :hover (Storybook only, .storybook/pseudo-states.ts). - children: ( -
- - -
- ), - }, - { id: "focus", label: "Focus", children: }, - { - id: "disabled", - label: "Disabled", - children: ( -
- - -
- ), - }, - ]} - /> - + ), play: async ({ canvasElement }) => { diff --git a/src/components/toggle-examples.tsx b/src/components/toggle-examples.tsx new file mode 100644 index 0000000..8c775ae --- /dev/null +++ b/src/components/toggle-examples.tsx @@ -0,0 +1,194 @@ +import { BoldIcon, ItalicIcon, StarIcon } from "lucide-react" +import { Toggle, ToggleGroup, ToggleGroupItem } from "@hm-design/ui" +import { StateBoard, type BoardState } from "@/components/story-board" +import { StorySection, StorySectionGrid } from "@/components/story-page" + +// Shared Toggle specimens (Storybook only). Used by the Toggle Stories (verification) and by the Button representative page, +// which shows Button and Toggle Button under one sidebar item ("버튼"). +// Toggle is a persistent pressed-state control. The sections show each state with real, clickable toggles; the same +// specimens also exist as Stories tagged `verification` (hidden from the sidebar). Icon-only toggles carry an `aria-label`. +// 2026-11-12: toggles side by side keep the Button Story's 8px gap (was 12px). + +export function OffOn() { + return ( +
+ Off + On + Outline off + + Outline on + +
+ ) +} + +export function WithIcon() { + return ( +
+ + + + + + + + + 즐겨찾기 + +
+ ) +} + +const toggleSizes = ["sm", "default", "lg"] as const + +function SizeRow({ size }: { size: (typeof toggleSizes)[number] }) { + return ( +
+ {/* 2026-11-13: the text-only toggle shows sample text instead of the size prop value (the row label names the size). */} + + 즐겨찾기 + 알림 +
+ ) +} + +function Sizes() { + return ( + // 3 equal columns on PC (iframe width 1000px and up): sm / default / lg; fewer columns below that (240px minimum). + // Same common indent as the group boards of the page (.sb-page-indent). +
+ {toggleSizes.map((size) => )} +
+ ) +} + +export function Disabled() { + return ( +
+ Off + + On + +
+ ) +} + +const block = (state: BoardState) => + +// Representative-page layout (Storybook presentation only). StateBoard's own auto-fill grid cannot give equal columns that +// fill a cell, so each specimen sits in its own single-column StateBoard (min larger than any column) inside a grid. +function SpecimenGrid({ states }: { states: BoardState[] }) { + return ( +
+ {states.map(block)} +
+ ) +} + +// The 단독 / 연결 그룹 specimens, shared by the Toggle page and the Button page. `short` (Button page, 2026-11-13 user +// request): under its "Groups" H3 the labels drop "연결 그룹 · " so the left label column stays narrow; the Toggle page keeps them. +const groupSpecimens = (idPrefix: string, short?: boolean): BoardState[] => [ + // The flex wrapper keeps the Toggle at its own width; as a direct grid child of the board it stretched to the column. + { id: `${idPrefix}single-toggle`, label: "단독", children:
알림
}, + { id: `${idPrefix}group-single`, label: short ? "단일 선택" : "연결 그룹 · 단일 선택", children: 왼쪽가운데오른쪽 }, + { id: `${idPrefix}group-multiple`, label: short ? "다중 선택" : "연결 그룹 · 다중 선택", children: 굵게기울임 }, +] + +// Button page (2026-11-13, user request): one "Toggle Button" H2 section with 3 equal columns — Variants / States, Groups, +// Sizes — laid out like the Button States matrix above (button.stories.tsx StateMatrix). Each column is a Button group block +// (GroupBlock: H3 14/20/500 secondary on the section edge, 8px to its rows). Each row is its label on the left, in the +// matrix row-label style (14/20/500 secondary, one line), 8px, then the controls; rows are 8px apart and the controls of a +// group start on one line (the label column takes the widest label). `stacked` (the Button matrices' stacked layout, shared +// through the Button page's MatrixFit) switches every group with them to the stacked form: the label above (12/16/400 +// secondary, the stacked state name), 4px, then the controls; rows 12px apart. Storybook presentation only. +const rowLabel = "text-sm font-medium text-muted-foreground whitespace-nowrap" +const stackedLabel = "text-xs font-normal text-muted-foreground" + +function ButtonPageGroup({ id, label, items, stacked }: { id: string; label: string; items: BoardState[]; stacked?: boolean }) { + return ( +
+

{label}

+
+ {items.map((item) => ( +
+ + {item.label} + + {item.children} +
+ ))} +
+
+ ) +} + +// Same size names as the Button Sizes (Small / Medium / Large); `default` is the medium size. +const sizeLabels = { sm: "Small", default: "Medium", lg: "Large" } as const + +// Same columns as the Button treatments above: 3 equal columns from a 1400px preview, one column below that. +function ButtonPageToggleSection({ title, idPrefix, stacked }: { title: string; idPrefix: string; stacked?: boolean }) { + return ( + // pt-2: 8px on top of the 28px section gap, so Toggle Button sits 36px below the Button columns. +
+ +
+ }, + { id: `${idPrefix}disabled`, label: "Disabled", children: }, + ]} + /> + + ({ id: `${idPrefix}size-${size}`, label: sizeLabels[size], children: }))} + /> +
+ +
+ ) +} + +// The Toggle sections of a representative page. `titlePrefix` names the component in each section title and `idPrefix` +// keeps the specimen ids (data-overview-state) unique when the sections share a page with other components. +// On PC (iframe width 1000px and up) Variants and States share the whole width in 2 columns, in proportion to the width their +// one-line row needs (324 / 234px incl. the 16px indent), never narrower than that row (max-content), so the 4 Variants toggles +// stay on one line (2026-11-12; they wrapped in the former 3 equal columns at a 1100px preview). Below that the sections stack +// and the toggle rows wrap naturally. +// `flat` (Button page, 2026-11-13): one "Toggle Button" section (`titlePrefix`) in 3 equal columns, ButtonPageToggleSection; +// `stacked` follows the Button matrices' stacked layout. The Toggle page (no `flat`) keeps the separate sections below. +export function ToggleSections({ titlePrefix, idPrefix = "", flat, stacked }: { titlePrefix?: string; idPrefix?: string; flat?: boolean; stacked?: boolean }) { + if (flat) return + const title = (name: string) => (titlePrefix ? `${titlePrefix} · ${name}` : name) + return ( + <> + {/* Each class stays a whole token next to spaces, so Tailwind's source scan still finds the arbitrary grid-cols value. */} + + + {block({ id: `${idPrefix}offon`, label: "Off / On", children: })} + + + {block({ id: `${idPrefix}disabled`, label: "Disabled", children: })} + + + {/* With `titlePrefix` the 단독 · 연결 그룹 title reads "단독/연결 그룹" (no second "·" after the prefix). */} + + + + + + + + ) +} diff --git a/src/components/toggle.stories.tsx b/src/components/toggle.stories.tsx index 70dfdeb..b952e04 100644 --- a/src/components/toggle.stories.tsx +++ b/src/components/toggle.stories.tsx @@ -1,127 +1,27 @@ import type { Meta, StoryObj } from "@storybook/react-vite" -import { BoldIcon, ItalicIcon, StarIcon } from "lucide-react" -import { Toggle, ToggleGroup, ToggleGroupItem } from "@hm-design/ui" -import { StateBoard, type BoardState } from "@/components/story-board" -import { StoryPage, StoryPageHeader, StorySection, StorySectionGrid } from "@/components/story-page" +import { StarIcon } from "lucide-react" +import { Toggle } from "@hm-design/ui" +import { StoryPage, StoryPageHeader } from "@/components/story-page" +import { Disabled, OffOn, ToggleSections, WithIcon } from "./toggle-examples" -// Toggle is a persistent pressed-state control. The representative Story shows each state with real, clickable toggles; the same -// specimens also exist as Stories tagged `verification` (hidden from the sidebar). Icon-only toggles carry an `aria-label`. -// 2026-11-12: toggles side by side keep the Button Story's 8px gap (was 12px). - -function OffOn() { - return ( -
- Off - On - Outline off - - Outline on - -
- ) -} - -function WithIcon() { - return ( -
- - - - - - - - - 즐겨찾기 - -
- ) -} - -function Sizes() { - return ( - // 3 equal columns on PC (iframe width 1000px and up): sm / default / lg; fewer columns below that (240px minimum). - // Same common indent as the group boards of the page (.sb-page-indent). -
- {(["sm", "default", "lg"] as const).map((size) => ( -
- - 즐겨찾기 - {size} -
- ))} -
- ) -} - -function Disabled() { - return ( -
- Disabled off - - Disabled on - -
- ) -} - -const sections = [ - { id: "offon", label: "Off / On", node: }, - { id: "disabled", label: "Disabled", node: }, -] +// Toggle is a persistent pressed-state control. The specimens live in ./toggle-examples and are also shown on the Button +// representative page ("버튼", Toggle Button section), the single sidebar item for both. Every Story here keeps its ID and +// direct URL but is hidden from the sidebar (tag `verification`). const meta = { title: "Components/Form/Toggle", component: Toggle, parameters: { layout: "padded" } } satisfies Meta export default meta type Story = StoryObj -// Representative-page layout (Storybook presentation only). StateBoard's own auto-fill grid cannot give equal columns that -// fill a cell, so each specimen sits in its own single-column StateBoard (min larger than any column) inside a grid. -const specimen = (id: string): BoardState => { - const s = sections.find((section) => section.id === id)! - return { id: s.id, label: s.label, children: s.node } -} -function SpecimenGrid({ states }: { states: BoardState[] }) { - return ( -
- {states.map((state) => ( - - ))} -
- ) -} - -// Representative Story: the common Story page; the sections group the same specimens. -// Overview is renamed Variants. On PC (iframe width 1000px and up) Variants and States share the whole width in 2 columns, -// in proportion to the width their one-line row needs (324 / 234px incl. the 16px indent), never narrower than that row -// (max-content), so the 4 Variants toggles stay on one line (2026-11-12; they wrapped in the former 3 equal columns at a -// 1100px preview). Below that the sections stack and the toggle rows wrap naturally. +// Former representative Story: kept for its ID and direct URL; hidden from the sidebar (tag `verification`) since the Button +// page shows the same sections. export const All: Story = { + tags: ["verification"], name: "Toggle", parameters: { layout: "fullscreen", controls: { disable: true } }, render: () => ( - - - - - - - - - - 알림
}, - { id: "group-single", label: "연결 그룹 · 단일 선택", children: 왼쪽가운데오른쪽 }, - { id: "group-multiple", label: "연결 그룹 · 다중 선택", children: 굵게기울임 }, - ]} - /> - - - - + ), }