import type { ReactNode } from "react"; import { FoxButton } from "../core/components/fox-button"; /** * 컴포넌트 예제 하나. 사이드바의 "컴포넌트" 분류에 항목으로 뜬다. */ export interface ComponentExample { /** 해시 링크와 React key에 쓰이는 식별자. kebab-case. */ id: string; /** 사이드바에 표시할 이름. */ name: string; /** 한 줄 설명 (선택). */ description?: string; /** * 이 컴포넌트가 가질 수 있는 상태들. variant·size·disabled처럼 **눈으로 비교해야 하는 * 조합을 빠짐없이** 넣는다 — 예제가 곧 회귀 확인 수단이다. */ variants: { label: string; node: ReactNode }[]; } // 예제용 아이콘 — 시안의 실제 아이콘이 아니라 자리 확인용 도형이다. // `currentColor`로 그려야 버튼이 계열별로 색을 입힐 수 있다(슬롯이 `color`를 내려준다). // 크기는 슬롯이 `form-icon-*` 토큰으로 정하므로 100%로 채우기만 한다. function DemoIcon() { return ( <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true"> <path d="M6 3l5 5-5 5" /> </svg> ); } /** * 컴포넌트를 만들 때마다 여기에 한 항목씩 추가한다. 사이드바·본문은 이 배열만 보고 * 그리므로 다른 파일을 고칠 필요가 없다. */ export const COMPONENT_EXAMPLES: ComponentExample[] = [ { id: "fox-button", name: "FoxButton", description: "Figma 시안(관리자페이지 node 390:439)을 토큰만으로 옮겼습니다. 너비는 내용에 따라 가변이고 높이만 고정입니다. hover·pressed는 마우스를 올리거나 눌러 확인하세요. error 계열은 시안 미정이라 비어 있습니다.", variants: [ { label: "계열 (type) — hover·pressed 확인 가능", node: ( <> <FoxButton size="md" label="default" /> <FoxButton size="md" type="primary" label="primary" /> <FoxButton size="md" type="secondary" label="secondary" /> <FoxButton size="md" type="error" label="error (시안 미정)" /> </> ), }, { label: "크기 (size)", node: ( <> <FoxButton size="lg" label="lg" /> <FoxButton size="md" label="md" /> <FoxButton size="sm" label="sm" /> <FoxButton size="xsm" label="xsm" /> </> ), }, { label: "아이콘", node: ( <> <FoxButton size="md" label="leading" leadingIcon={<DemoIcon />} /> <FoxButton size="md" label="trailing" trailingIcon={<DemoIcon />} /> <FoxButton size="md" label="both" leadingIcon={<DemoIcon />} trailingIcon={<DemoIcon />} /> </> ), }, { label: "상태 — disabled / loading (둘 다 클릭이 막힌다)", node: ( <> <FoxButton size="md" label="normal" onAction={() => undefined} /> <FoxButton size="md" label="disabled" disabled /> <FoxButton size="md" label="loading" loading /> <FoxButton size="md" label="loading + icon" loading leadingIcon={<DemoIcon />} /> </> ), }, { label: "fullWidth", node: <FoxButton size="md" label="fullWidth" fullWidth />, }, { label: "htmlType — 폼 안에서의 역할", node: ( <> <FoxButton size="md" label="button (기본)" /> <FoxButton size="md" label="submit" htmlType="submit" /> <FoxButton size="md" label="reset" htmlType="reset" /> </> ), }, { label: "hidden — 렌더되지 않는다(아래는 비어 있는 것이 정상)", node: <FoxButton size="md" label="hidden" hidden />, }, ], }, ];