From bb96a69097b5e26e9d3ccbb4040ab4236edadbea Mon Sep 17 00:00:00 2001 From: malangcat Date: Wed, 15 Jan 2025 17:39:22 +0900 Subject: [PATCH] refactor: group component compose pattern --- .../example/check-select-box-preview.tsx | 19 +++ .../check-select-box-react-hook-form.tsx | 79 ++++++++++++ docs/components/example/index.json | 8 +- .../example/radio-select-box-preview.tsx | 20 +++ .../radio-select-box-react-hook-form.tsx | 67 ++++++++++ .../example/select-box-check-preview.tsx | 11 -- .../select-box-check-react-hook-form.tsx | 66 ---------- .../example/select-box-radio-preview.tsx | 17 --- .../select-box-radio-react-hook-form.tsx | 60 --------- .../docs/react/components/control-chip.mdx | 18 ++- .../select-box/check-select-box.mdx | 24 ++++ .../{select-boxes => select-box}/meta.json | 2 +- .../select-box/radio-select-box.mdx | 31 +++++ .../select-boxes/select-box-check.mdx | 28 ----- .../select-boxes/select-box-radio.mdx | 31 ----- docs/public/__registry__/ui/control-chip.json | 2 +- .../__registry__/ui/reaction-button.json | 2 +- .../__registry__/ui/select-box-group.json | 4 +- docs/public/__registry__/ui/select-box.json | 2 +- .../components/action-sheet-button.json | 50 -------- .../components/action-sheet-item copy.json | 50 -------- .../rootage/components/select-box-group.json | 16 --- docs/public/rootage/index.json | 3 - docs/public/rootage/parsed.json | 33 ----- docs/registry/ui/control-chip.tsx | 118 ++++++++++++++++-- docs/registry/ui/select-box.tsx | 85 +++++++------ ...stories.tsx => CheckSelectBox.stories.tsx} | 40 +++--- ...stories.tsx => RadioSelectBox.stories.tsx} | 14 +-- .../qvism-preset/src/recipes/select-box.ts | 3 +- packages/react/package.json | 10 ++ .../react/src/components/Columns/Columns.tsx | 9 +- .../ControlChip/ControlChip.namespace.ts | 1 + .../components/ControlChip/ControlChip.tsx | 21 ++-- .../react/src/components/ControlChip/index.ts | 1 + .../SelectBox/CheckSelectBox.namespace.ts | 18 +++ .../components/SelectBox/CheckSelectBox.tsx | 79 ++++++++++++ .../SelectBox/RadioSelectBox.namespace.ts | 18 +++ ...{SelextBoxRadio.tsx => RadioSelectBox.tsx} | 34 ++--- .../SelectBox/SelectBoxCheck.namespace.ts | 18 --- .../SelectBox/SelectBoxRadio.namespace.ts | 18 --- .../components/SelectBox/SelextBoxCheck.tsx | 72 ----------- .../react/src/components/SelectBox/index.ts | 72 +++++------ packages/react/src/primitive.ts | 2 + packages/react/src/vars.ts | 1 + .../rootage/components/select-box-group.yaml | 10 -- packages/stylesheet/selectBoxGroup.css | 1 - packages/vars/lib/component/index.d.ts | 1 - packages/vars/lib/component/index.mjs | 1 - 48 files changed, 652 insertions(+), 638 deletions(-) create mode 100644 docs/components/example/check-select-box-preview.tsx create mode 100644 docs/components/example/check-select-box-react-hook-form.tsx create mode 100644 docs/components/example/radio-select-box-preview.tsx create mode 100644 docs/components/example/radio-select-box-react-hook-form.tsx delete mode 100644 docs/components/example/select-box-check-preview.tsx delete mode 100644 docs/components/example/select-box-check-react-hook-form.tsx delete mode 100644 docs/components/example/select-box-radio-preview.tsx delete mode 100644 docs/components/example/select-box-radio-react-hook-form.tsx create mode 100644 docs/content/docs/react/components/select-box/check-select-box.mdx rename docs/content/docs/react/components/{select-boxes => select-box}/meta.json (63%) create mode 100644 docs/content/docs/react/components/select-box/radio-select-box.mdx delete mode 100644 docs/content/docs/react/components/select-boxes/select-box-check.mdx delete mode 100644 docs/content/docs/react/components/select-boxes/select-box-radio.mdx delete mode 100644 docs/public/rootage/components/action-sheet-button.json delete mode 100644 docs/public/rootage/components/action-sheet-item copy.json delete mode 100644 docs/public/rootage/components/select-box-group.json rename docs/stories/{SelectBoxCheck.stories.tsx => CheckSelectBox.stories.tsx} (52%) rename docs/stories/{SelectBoxRadio.stories.tsx => RadioSelectBox.stories.tsx} (74%) create mode 100644 packages/react/src/components/SelectBox/CheckSelectBox.namespace.ts create mode 100644 packages/react/src/components/SelectBox/CheckSelectBox.tsx create mode 100644 packages/react/src/components/SelectBox/RadioSelectBox.namespace.ts rename packages/react/src/components/SelectBox/{SelextBoxRadio.tsx => RadioSelectBox.tsx} (54%) delete mode 100644 packages/react/src/components/SelectBox/SelectBoxCheck.namespace.ts delete mode 100644 packages/react/src/components/SelectBox/SelectBoxRadio.namespace.ts delete mode 100644 packages/react/src/components/SelectBox/SelextBoxCheck.tsx create mode 100644 packages/react/src/primitive.ts create mode 100644 packages/react/src/vars.ts delete mode 100644 packages/rootage/components/select-box-group.yaml diff --git a/docs/components/example/check-select-box-preview.tsx b/docs/components/example/check-select-box-preview.tsx new file mode 100644 index 000000000..9dc29d0df --- /dev/null +++ b/docs/components/example/check-select-box-preview.tsx @@ -0,0 +1,19 @@ +"use client"; + +import { Stack } from "@seed-design/react"; +import { CheckSelectBox, CheckSelectBoxGroup } from "seed-design/ui/select-box"; + +export default function CheckSelectBoxPreview() { + return ( + + + + + + + + ); +} diff --git a/docs/components/example/check-select-box-react-hook-form.tsx b/docs/components/example/check-select-box-react-hook-form.tsx new file mode 100644 index 000000000..69e33a9cd --- /dev/null +++ b/docs/components/example/check-select-box-react-hook-form.tsx @@ -0,0 +1,79 @@ +"use client"; + +import { Column, Columns, Stack } from "@seed-design/react"; +import { useCallback, type FormEvent } from "react"; +import { useController, useForm } from "react-hook-form"; +import { ActionButton } from "seed-design/ui/action-button"; +import { CheckSelectBox, CheckSelectBoxGroup } from "seed-design/ui/select-box"; + +const POSSIBLE_FRUIT_VALUES = ["apple", "melon", "mango"] as const; + +type FormValues = Record<(typeof POSSIBLE_FRUIT_VALUES)[number], boolean>; + +export default function CheckSelectBoxReactHookForm() { + const { handleSubmit, reset, setValue, control } = useForm({ + defaultValues: { + apple: false, + melon: true, + mango: false, + }, + }); + + const onValid = useCallback((data: FormValues) => { + window.alert(JSON.stringify(data, null, 2)); + }, []); + + const onReset = useCallback( + (event: FormEvent) => { + event.preventDefault(); + reset(); + }, + [reset], + ); + + return ( +
+ + + + {POSSIBLE_FRUIT_VALUES.map((name) => { + const { + field: { value, ...restProps }, + fieldState: { invalid }, + } = useController({ name, control }); + + return ( + + ); + })} + + + + + 제출 + + + setValue("mango", true)} + > + mango 선택 + + + + + 초기화 + + + + +
+ ); +} diff --git a/docs/components/example/index.json b/docs/components/example/index.json index 2c5150375..194dcfb16 100644 --- a/docs/components/example/index.json +++ b/docs/components/example/index.json @@ -58,6 +58,8 @@ "callout-with-icon": "import { IconCalendarFill } from \"@daangn/react-monochrome-icon\";\nimport { Callout } from \"seed-design/ui/callout\";\n\nexport default function CalloutWithIcon() {\n return (\n }\n description=\"기능에 대한 안내 또는 유익한 내용을 전달해요. 콜아웃은 꼭 필요한 경우에만 절제하여 사용해요.\"\n />\n );\n}", "callout-with-link-label": "import { Callout, DismissibleCallout } from \"seed-design/ui/callout\";\n\nexport default function CalloutWithLinkLabel() {\n return (\n
\n \n \n
\n );\n}", "callout-with-title-text": "import { ActionableCallout, Callout, DismissibleCallout } from \"seed-design/ui/callout\";\n\nexport default function CalloutWithTitleText() {\n return (\n
\n \n \n \n
\n );\n}", + "check-select-box-preview": "import { Stack } from \"@seed-design/react\";\nimport { CheckSelectBox, CheckSelectBoxGroup } from \"seed-design/ui/select-box\";\n\nexport default function CheckSelectBoxPreview() {\n return (\n \n \n \n \n \n \n \n );\n}", + "check-select-box-react-hook-form": "import { Column, Columns, Stack } from \"@seed-design/react\";\nimport { useCallback, type FormEvent } from \"react\";\nimport { useController, useForm } from \"react-hook-form\";\nimport { ActionButton } from \"seed-design/ui/action-button\";\nimport { CheckSelectBox, CheckSelectBoxGroup } from \"seed-design/ui/select-box\";\n\nconst POSSIBLE_FRUIT_VALUES = [\"apple\", \"melon\", \"mango\"] as const;\n\ntype FormValues = Record<(typeof POSSIBLE_FRUIT_VALUES)[number], boolean>;\n\nexport default function CheckSelectBoxReactHookForm() {\n const { handleSubmit, reset, setValue, control } = useForm({\n defaultValues: {\n apple: false,\n melon: true,\n mango: false,\n },\n });\n\n const onValid = useCallback((data: FormValues) => {\n window.alert(JSON.stringify(data, null, 2));\n }, []);\n\n const onReset = useCallback(\n (event: FormEvent) => {\n event.preventDefault();\n reset();\n },\n [reset],\n );\n\n return (\n
\n \n \n \n {POSSIBLE_FRUIT_VALUES.map((name) => {\n const {\n field: { value, ...restProps },\n fieldState: { invalid },\n } = useController({ name, control });\n\n return (\n \n );\n })}\n \n \n \n \n 제출\n \n \n setValue(\"mango\", true)}\n >\n mango 선택\n \n \n \n \n 초기화\n \n \n \n \n
\n );\n}", "checkbox-disabled": "import { Checkbox } from \"seed-design/ui/checkbox\";\n\nexport default function CheckboxDisabled() {\n return (\n
\n \n \n \n \n
\n );\n}", "checkbox-indeterminate": "import { Checkbox } from \"seed-design/ui/checkbox\";\n\nexport default function CheckboxIndeterminate() {\n return ;\n}", "checkbox-long-text": "import { Checkbox } from \"seed-design/ui/checkbox\";\n\nexport default function CheckboxLongText() {\n return (\n
\n \n \n
\n );\n}", @@ -129,6 +131,8 @@ "progress-circle-preview": "import { ProgressCircle } from \"seed-design/ui/progress-circle\";\n\nexport default function ProgressCirclePreview() {\n return ;\n}", "progress-circle-small": "import { ProgressCircle } from \"seed-design/ui/progress-circle\";\n\nexport default function ProgressCirclePreview() {\n return ;\n}", "progress-circle-static-white": "import { ProgressCircle } from \"seed-design/ui/progress-circle\";\n\nexport default function ProgressCircleStaticWhite() {\n return (\n \n \n \n );\n}", + "radio-select-box-preview": "import { Stack } from \"@seed-design/react\";\nimport { RadioSelectBoxItem, RadioSelectBoxRoot } from \"seed-design/ui/select-box\";\n\nexport default function RadioSelectBoxPreview() {\n return (\n \n \n \n \n \n \n \n );\n}", + "radio-select-box-react-hook-form": "import { Column, Columns, Stack } from \"@seed-design/react\";\nimport { useCallback, type FormEvent } from \"react\";\nimport { useController, useForm } from \"react-hook-form\";\nimport { ActionButton } from \"seed-design/ui/action-button\";\nimport { RadioSelectBoxItem, RadioSelectBoxRoot } from \"seed-design/ui/select-box\";\n\nconst POSSIBLE_FRUIT_VALUES = [\"apple\", \"melon\", \"mango\"] as const;\n\ninterface FormValues {\n fruit: (typeof POSSIBLE_FRUIT_VALUES)[number];\n}\n\nexport default function RadioSelectBoxReactHookForm() {\n const { handleSubmit, reset, setValue, control } = useForm({\n defaultValues: {\n fruit: \"melon\",\n },\n });\n const { field } = useController({ name: \"fruit\", control });\n\n const onValid = useCallback((data: FormValues) => {\n window.alert(JSON.stringify(data, null, 2));\n }, []);\n\n const onReset = useCallback(\n (event: FormEvent) => {\n event.preventDefault();\n reset();\n },\n [reset],\n );\n\n return (\n
\n \n \n \n {POSSIBLE_FRUIT_VALUES.map((value) => (\n \n ))}\n \n \n \n \n 제출\n \n \n setValue(\"fruit\", \"mango\")}\n >\n mango 선택\n \n \n \n \n 초기화\n \n \n \n \n
\n );\n}", "reaction-button-disabled": "import { IconFaceSmileCircleFill } from \"@daangn/react-monochrome-icon\";\nimport { ReactionButton } from \"seed-design/ui/reaction-button\";\n\nexport default function ReactionButtonDisabled() {\n return (\n } disabled>\n 비활성\n \n );\n}", "reaction-button-loading": "import { IconFaceSmileCircleFill } from \"@daangn/react-monochrome-icon\";\nimport { useState } from \"react\";\nimport { ReactionButton } from \"seed-design/ui/reaction-button\";\n\nexport default function ReactionButtonLoading() {\n const [pressed, setPressed] = useState(false);\n const [loading, setLoading] = useState(false);\n\n function handleToggle() {\n setLoading(true);\n setTimeout(() => {\n setLoading(false);\n setPressed((prev) => !prev);\n }, 2000);\n }\n\n // 이벤트 핸들링이 필요할 수 있으므로 loading은 disabled를 포함하지 않습니다. 이벤트 발생을 원하지 않는 경우, disabled 속성을 추가해주세요.\n return (\n }\n loading={loading}\n pressed={pressed}\n onPressedChange={handleToggle}\n >\n 시간이 걸리는 토글\n \n );\n}", "reaction-button-preview": "import { IconFaceSmileCircleFill } from \"@daangn/react-monochrome-icon\";\nimport { ReactionButton } from \"seed-design/ui/reaction-button\";\n\nexport default function ReactionButtonPreview() {\n return (\n } count={1}>\n 도움돼요\n \n );\n}", @@ -139,10 +143,6 @@ "segmented-control-long-label-fixed-width": "import { SegmentedControl, SegmentedControlSegment } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlLongLabelFixedWidth() {\n return (\n \n 가격 높은 순\n 할인율 높은 순\n 인기 많은 순\n \n );\n}", "segmented-control-long-label": "import { SegmentedControl, SegmentedControlSegment } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlLongLabel() {\n return (\n \n 가격 높은 순\n 할인율 높은 순\n 인기 많은 순\n \n );\n}", "segmented-control-preview": "import { SegmentedControl, SegmentedControlSegment } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlPreview() {\n return (\n \n Hot\n New\n \n );\n}", - "select-box-check-preview": "import { SelectBoxCheck, SelectBoxCheckGroup } from \"seed-design/ui/select-box\";\n\nexport default function SelectBoxCheckPreview() {\n return (\n \n \n \n \n \n );\n}", - "select-box-check-react-hook-form": "import { useForm, useController } from \"react-hook-form\";\nimport { SelectBoxCheck, SelectBoxCheckGroup } from \"seed-design/ui/select-box\";\nimport { ActionButton } from \"seed-design/ui/action-button\";\nimport { useCallback, type FormEvent } from \"react\";\n\nconst POSSIBLE_FRUIT_VALUES = [\"apple\", \"melon\", \"mango\"] as const;\n\ntype FormValues = Record<(typeof POSSIBLE_FRUIT_VALUES)[number], boolean>;\n\nexport default function SelectBoxCheckReactHookForm() {\n const { handleSubmit, reset, setValue, control } = useForm({\n defaultValues: {\n apple: false,\n melon: true,\n mango: false,\n },\n });\n\n const onValid = useCallback((data: FormValues) => {\n window.alert(JSON.stringify(data, null, 2));\n }, []);\n\n const onReset = useCallback(\n (event: FormEvent) => {\n event.preventDefault();\n reset();\n },\n [reset],\n );\n\n return (\n
\n \n {POSSIBLE_FRUIT_VALUES.map((name) => {\n const {\n field: { value, ...restProps },\n fieldState: { invalid },\n } = useController({ name, control });\n\n return (\n \n );\n })}\n \n
\n \n 제출\n \n setValue(\"mango\", true)}>\n mango 선택\n \n \n 초기화\n \n
\n
\n );\n}", - "select-box-radio-preview": "import { SelectBoxRadioGroup, SelectBoxRadio } from \"seed-design/ui/select-box\";\n\nexport default function SelectBoxRadioPreview() {\n return (\n \n \n \n \n \n );\n}", - "select-box-radio-react-hook-form": "import { useForm, useController } from \"react-hook-form\";\nimport { SelectBoxRadio, SelectBoxRadioGroup } from \"seed-design/ui/select-box\";\nimport { ActionButton } from \"seed-design/ui/action-button\";\nimport { useCallback, type FormEvent } from \"react\";\n\nconst POSSIBLE_FRUIT_VALUES = [\"apple\", \"melon\", \"mango\"] as const;\n\ninterface FormValues {\n fruit: (typeof POSSIBLE_FRUIT_VALUES)[number];\n}\n\nexport default function SelectBoxRadioReactHookForm() {\n const { handleSubmit, reset, setValue, control } = useForm({\n defaultValues: {\n fruit: \"melon\",\n },\n });\n const { field } = useController({ name: \"fruit\", control });\n\n const onValid = useCallback((data: FormValues) => {\n window.alert(JSON.stringify(data, null, 2));\n }, []);\n\n const onReset = useCallback(\n (event: FormEvent) => {\n event.preventDefault();\n reset();\n },\n [reset],\n );\n\n return (\n
\n
\n \n {POSSIBLE_FRUIT_VALUES.map((value) => (\n \n ))}\n \n
\n \n 제출\n \n setValue(\"fruit\", \"mango\")}\n >\n mango 선택\n \n \n 초기화\n \n
\n
\n
\n );\n}", "skeleton-preview": "import { Flex } from \"seed-design/ui/layout\";\nimport { Skeleton } from \"seed-design/ui/skeleton\";\n\nexport default function SkeletonPreview() {\n return (\n \n \n \n \n \n \n \n );\n}", "skeleton-radius": "import { Skeleton } from \"seed-design/ui/skeleton\";\nimport { Flex } from \"seed-design/ui/layout\";\n\nexport default function SkeletonRadius() {\n return (\n \n \n \n \n \n \n );\n}", "snackbar-avoid-overlap": "import { Flex } from \"@/registry/ui/layout\";\nimport { ActionButton } from \"seed-design/ui/action-button\";\nimport {\n Snackbar,\n SnackbarAvoidOverlap,\n SnackbarProvider,\n useSnackbarAdapter,\n} from \"seed-design/ui/snackbar\";\n\nfunction Component() {\n const adapter = useSnackbarAdapter();\n\n return (\n \n \n adapter.create({\n timeout: 5000,\n onClose: () => {},\n render: () => {}} />,\n })\n }\n >\n 실행\n \n \n \n Snackbar가 이 영역과 겹치지 않게 조정됩니다. 스크롤은 무시합니다.\n \n \n \n );\n}\n\nexport default function SnackbarPreview() {\n return (\n \n \n \n );\n}", diff --git a/docs/components/example/radio-select-box-preview.tsx b/docs/components/example/radio-select-box-preview.tsx new file mode 100644 index 000000000..8dfde5388 --- /dev/null +++ b/docs/components/example/radio-select-box-preview.tsx @@ -0,0 +1,20 @@ +"use client"; + +import { Stack } from "@seed-design/react"; +import { RadioSelectBoxItem, RadioSelectBoxRoot } from "seed-design/ui/select-box"; + +export default function RadioSelectBoxPreview() { + return ( + + + + + + + + ); +} diff --git a/docs/components/example/radio-select-box-react-hook-form.tsx b/docs/components/example/radio-select-box-react-hook-form.tsx new file mode 100644 index 000000000..23ed210a7 --- /dev/null +++ b/docs/components/example/radio-select-box-react-hook-form.tsx @@ -0,0 +1,67 @@ +"use client"; + +import { Column, Columns, Stack } from "@seed-design/react"; +import { useCallback, type FormEvent } from "react"; +import { useController, useForm } from "react-hook-form"; +import { ActionButton } from "seed-design/ui/action-button"; +import { RadioSelectBoxItem, RadioSelectBoxRoot } from "seed-design/ui/select-box"; + +const POSSIBLE_FRUIT_VALUES = ["apple", "melon", "mango"] as const; + +interface FormValues { + fruit: (typeof POSSIBLE_FRUIT_VALUES)[number]; +} + +export default function RadioSelectBoxReactHookForm() { + const { handleSubmit, reset, setValue, control } = useForm({ + defaultValues: { + fruit: "melon", + }, + }); + const { field } = useController({ name: "fruit", control }); + + const onValid = useCallback((data: FormValues) => { + window.alert(JSON.stringify(data, null, 2)); + }, []); + + const onReset = useCallback( + (event: FormEvent) => { + event.preventDefault(); + reset(); + }, + [reset], + ); + + return ( +
+ + + + {POSSIBLE_FRUIT_VALUES.map((value) => ( + + ))} + + + + + 제출 + + + setValue("fruit", "mango")} + > + mango 선택 + + + + + 초기화 + + + + +
+ ); +} diff --git a/docs/components/example/select-box-check-preview.tsx b/docs/components/example/select-box-check-preview.tsx deleted file mode 100644 index f2b43f941..000000000 --- a/docs/components/example/select-box-check-preview.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { SelectBoxCheck, SelectBoxCheckGroup } from "seed-design/ui/select-box"; - -export default function SelectBoxCheckPreview() { - return ( - - - - - - ); -} diff --git a/docs/components/example/select-box-check-react-hook-form.tsx b/docs/components/example/select-box-check-react-hook-form.tsx deleted file mode 100644 index a18251f03..000000000 --- a/docs/components/example/select-box-check-react-hook-form.tsx +++ /dev/null @@ -1,66 +0,0 @@ -"use client"; - -import { useForm, useController } from "react-hook-form"; -import { SelectBoxCheck, SelectBoxCheckGroup } from "seed-design/ui/select-box"; -import { ActionButton } from "seed-design/ui/action-button"; -import { useCallback, type FormEvent } from "react"; - -const POSSIBLE_FRUIT_VALUES = ["apple", "melon", "mango"] as const; - -type FormValues = Record<(typeof POSSIBLE_FRUIT_VALUES)[number], boolean>; - -export default function SelectBoxCheckReactHookForm() { - const { handleSubmit, reset, setValue, control } = useForm({ - defaultValues: { - apple: false, - melon: true, - mango: false, - }, - }); - - const onValid = useCallback((data: FormValues) => { - window.alert(JSON.stringify(data, null, 2)); - }, []); - - const onReset = useCallback( - (event: FormEvent) => { - event.preventDefault(); - reset(); - }, - [reset], - ); - - return ( -
- - {POSSIBLE_FRUIT_VALUES.map((name) => { - const { - field: { value, ...restProps }, - fieldState: { invalid }, - } = useController({ name, control }); - - return ( - - ); - })} - -
- - 제출 - - setValue("mango", true)}> - mango 선택 - - - 초기화 - -
-
- ); -} diff --git a/docs/components/example/select-box-radio-preview.tsx b/docs/components/example/select-box-radio-preview.tsx deleted file mode 100644 index 9f4288dd5..000000000 --- a/docs/components/example/select-box-radio-preview.tsx +++ /dev/null @@ -1,17 +0,0 @@ -"use client"; - -import { SelectBoxRadioGroup, SelectBoxRadio } from "seed-design/ui/select-box"; - -export default function SelectBoxRadioPreview() { - return ( - - - - - - ); -} diff --git a/docs/components/example/select-box-radio-react-hook-form.tsx b/docs/components/example/select-box-radio-react-hook-form.tsx deleted file mode 100644 index a9a218e90..000000000 --- a/docs/components/example/select-box-radio-react-hook-form.tsx +++ /dev/null @@ -1,60 +0,0 @@ -"use client"; - -import { useForm, useController } from "react-hook-form"; -import { SelectBoxRadio, SelectBoxRadioGroup } from "seed-design/ui/select-box"; -import { ActionButton } from "seed-design/ui/action-button"; -import { useCallback, type FormEvent } from "react"; - -const POSSIBLE_FRUIT_VALUES = ["apple", "melon", "mango"] as const; - -interface FormValues { - fruit: (typeof POSSIBLE_FRUIT_VALUES)[number]; -} - -export default function SelectBoxRadioReactHookForm() { - const { handleSubmit, reset, setValue, control } = useForm({ - defaultValues: { - fruit: "melon", - }, - }); - const { field } = useController({ name: "fruit", control }); - - const onValid = useCallback((data: FormValues) => { - window.alert(JSON.stringify(data, null, 2)); - }, []); - - const onReset = useCallback( - (event: FormEvent) => { - event.preventDefault(); - reset(); - }, - [reset], - ); - - return ( -
-
- - {POSSIBLE_FRUIT_VALUES.map((value) => ( - - ))} - -
- - 제출 - - setValue("fruit", "mango")} - > - mango 선택 - - - 초기화 - -
-
-
- ); -} diff --git a/docs/content/docs/react/components/control-chip.mdx b/docs/content/docs/react/components/control-chip.mdx index c4ba4209b..4e80d9f55 100644 --- a/docs/content/docs/react/components/control-chip.mdx +++ b/docs/content/docs/react/components/control-chip.mdx @@ -8,9 +8,23 @@ title: Control Chip -## Props (Toggle) +## Props - +### ControlChip.Button + + + +### ControlChip.Toggle + + + +### ControlChip.RadioRoot + + + +### ControlChip.RadioItem + + ## 예제 diff --git a/docs/content/docs/react/components/select-box/check-select-box.mdx b/docs/content/docs/react/components/select-box/check-select-box.mdx new file mode 100644 index 000000000..b4424399c --- /dev/null +++ b/docs/content/docs/react/components/select-box/check-select-box.mdx @@ -0,0 +1,24 @@ +--- +title: Check Select Box +--- + + + +## 설치 + + + +## Props + +### `CheckSelectBox` + + + +## 예제 + +### React Hook Form + + diff --git a/docs/content/docs/react/components/select-boxes/meta.json b/docs/content/docs/react/components/select-box/meta.json similarity index 63% rename from docs/content/docs/react/components/select-boxes/meta.json rename to docs/content/docs/react/components/select-box/meta.json index ead8e27d3..827097f5c 100644 --- a/docs/content/docs/react/components/select-boxes/meta.json +++ b/docs/content/docs/react/components/select-box/meta.json @@ -1,5 +1,5 @@ { - "title": "Select Boxes", + "title": "Select Box", "pages": ["..."], "defaultOpen": true } diff --git a/docs/content/docs/react/components/select-box/radio-select-box.mdx b/docs/content/docs/react/components/select-box/radio-select-box.mdx new file mode 100644 index 000000000..65592fa56 --- /dev/null +++ b/docs/content/docs/react/components/select-box/radio-select-box.mdx @@ -0,0 +1,31 @@ +--- +title: Radio Select Box +--- + + + +## 설치 + + + +## Props + +### `RadioSelectBoxRoot` + + + +### `RadioSelectBoxItem` + + + +## 예제 + +### React Hook Form + + diff --git a/docs/content/docs/react/components/select-boxes/select-box-check.mdx b/docs/content/docs/react/components/select-boxes/select-box-check.mdx deleted file mode 100644 index c516065ad..000000000 --- a/docs/content/docs/react/components/select-boxes/select-box-check.mdx +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: Select Box Check ---- - - - -## 설치 - - - -## Props - -### `SelectBoxCheckGroup` - -`SelectBoxCheckGroup`은 `SelectBoxCheck` 간 간격을 설정하는 목적으로만 사용돼요. - -### `SelectBoxCheck` - - - -## 예제 - -### React Hook Form - - diff --git a/docs/content/docs/react/components/select-boxes/select-box-radio.mdx b/docs/content/docs/react/components/select-boxes/select-box-radio.mdx deleted file mode 100644 index 3cff34c9c..000000000 --- a/docs/content/docs/react/components/select-boxes/select-box-radio.mdx +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Select Box Radio ---- - - - -## 설치 - - - -## Props - -### `SelectBoxRadioGroup` - - - -### `SelectBoxRadio` - - - -## 예제 - -### React Hook Form - - diff --git a/docs/public/__registry__/ui/control-chip.json b/docs/public/__registry__/ui/control-chip.json index 92485e1a2..ae63d9118 100644 --- a/docs/public/__registry__/ui/control-chip.json +++ b/docs/public/__registry__/ui/control-chip.json @@ -7,7 +7,7 @@ { "name": "control-chip.tsx", "type": "ui", - "content": "\"use client\";\n\nimport { ControlChip as SeedControlChip } from \"@seed-design/react\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/controlChip.css\";\n\nexport interface ControlChipToggleProps extends SeedControlChip.RootProps {\n prefixIcon?: React.ReactNode;\n\n suffixIcon?: React.ReactNode;\n\n count?: number;\n}\n\nexport const ControlChipToggle = React.forwardRef<\n HTMLLabelElement,\n ControlChipToggleProps\n>(\n (\n {\n children,\n prefixIcon,\n suffixIcon,\n count,\n layout = \"withText\",\n ...otherProps\n },\n ref,\n ) => {\n return (\n \n {layout === \"withText\" ? (\n <>\n {prefixIcon && }\n {children}\n {count && {count}}\n {suffixIcon && }\n \n ) : (\n \n )}\n \n );\n },\n);\nControlChipToggle.displayName = \"ControlChip.Toggle\";\n\nexport const ControlChip = Object.assign(\n () => {\n console.warn(\n \"ControlChip is a base component and should not be rendered. Use ControlChip.Toggle or ControlChip.Radio instead.\",\n );\n },\n {\n Toggle: ControlChipToggle,\n },\n);\n\n/**\n * This file is generated snippet from the Seed Design.\n * You can extend the functionality from this snippet if needed.\n */\n" + "content": "\"use client\";\n\nimport { ControlChip as SeedControlChip } from \"@seed-design/react\";\nimport { Checkbox, RadioGroup } from \"@seed-design/react/primitive\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/controlChip.css\";\n\nexport interface ToggleControlChipProps\n extends SeedControlChip.RootBaseProps,\n Checkbox.RootProps {\n prefixIcon?: React.ReactNode;\n\n suffixIcon?: React.ReactNode;\n\n count?: number;\n\n inputProps?: React.InputHTMLAttributes;\n\n rootRef?: React.Ref;\n}\n\nexport const ToggleControlChip = React.forwardRef<\n HTMLInputElement,\n ToggleControlChipProps\n>(\n (\n {\n children,\n prefixIcon,\n suffixIcon,\n count,\n size,\n layout = \"withText\",\n inputProps,\n rootRef,\n ...otherProps\n },\n ref,\n ) => {\n return (\n \n \n {layout === \"withText\" ? (\n <>\n {prefixIcon && }\n {children}\n {count && {count}}\n {suffixIcon && }\n \n ) : (\n \n )}\n \n \n \n );\n },\n);\nToggleControlChip.displayName = \"ControlChip.Toggle\";\n\nexport interface ButtonControlChipProps extends SeedControlChip.RootProps {\n prefixIcon?: React.ReactNode;\n\n suffixIcon?: React.ReactNode;\n}\n\nexport const ButtonControlChip = React.forwardRef<\n HTMLButtonElement,\n ButtonControlChipProps\n>(\n (\n { children, prefixIcon, suffixIcon, layout = \"withText\", ...otherProps },\n ref,\n ) => {\n return (\n \n {layout === \"withText\" ? (\n <>\n {prefixIcon && }\n {children}\n {suffixIcon && }\n \n ) : (\n \n )}\n \n );\n },\n);\nButtonControlChip.displayName = \"ControlChip.Button\";\n\nexport interface RadioControlChipRootProps extends RadioGroup.RootProps {}\n\nexport const RadioControlChipRoot = RadioGroup.Root;\n\nexport interface RadioControlChipItemProps\n extends SeedControlChip.RootBaseProps,\n RadioGroup.ItemProps {\n prefixIcon?: React.ReactNode;\n\n suffixIcon?: React.ReactNode;\n\n count?: number;\n\n inputProps?: React.InputHTMLAttributes;\n\n rootRef?: React.Ref;\n}\n\nexport const RadioControlChipItem = React.forwardRef<\n HTMLInputElement,\n RadioControlChipItemProps\n>(\n (\n {\n children,\n prefixIcon,\n suffixIcon,\n count,\n size,\n layout = \"withText\",\n inputProps,\n rootRef,\n ...otherProps\n },\n ref,\n ) => {\n return (\n \n \n {layout === \"withText\" ? (\n <>\n {prefixIcon && }\n {children}\n {count && {count}}\n {suffixIcon && }\n \n ) : (\n \n )}\n \n \n \n );\n },\n);\nRadioControlChipItem.displayName = \"ControlChip.RadioItem\";\n\nexport const ControlChip = Object.assign(\n () => {\n console.warn(\n \"ControlChip is a base component and should not be rendered. Use ControlChip.Toggle or ControlChip.Radio instead.\",\n );\n },\n {\n Toggle: ToggleControlChip,\n Button: ButtonControlChip,\n RadioRoot: RadioControlChipRoot,\n RadioItem: RadioControlChipItem,\n },\n);\n\n/**\n * This file is generated snippet from the Seed Design.\n * You can extend the functionality from this snippet if needed.\n */\n" } ] } \ No newline at end of file diff --git a/docs/public/__registry__/ui/reaction-button.json b/docs/public/__registry__/ui/reaction-button.json index 3aa7a3280..1c30cd144 100644 --- a/docs/public/__registry__/ui/reaction-button.json +++ b/docs/public/__registry__/ui/reaction-button.json @@ -7,7 +7,7 @@ { "name": "reaction-button.tsx", "type": "ui", - "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/reactionButton.css\";\n\nimport { ReactionButton as SeedReactionButton } from \"@seed-design/react\";\nimport * as React from \"react\";\nimport { ProgressCircle } from \"./progress-circle\";\n\nexport interface ReactionButtonProps extends SeedReactionButton.RootProps {\n prefixIcon?: React.ReactNode;\n\n count?: number;\n}\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/reaction-button\n */\nexport const ReactionButton = React.forwardRef<\n React.ElementRef,\n ReactionButtonProps\n>(({ loading = false, prefixIcon, count, children, ...otherProps }, ref) => {\n return (\n \n {prefixIcon && }\n {children}\n {count}\n {loading ? (\n \n \n \n ) : null}\n \n );\n});\nReactionButton.displayName = \"ReactionButton\";\n\n/**\n * This file is generated snippet from the Seed Design.\n * You can extend the functionality from this snippet if needed.\n */\n" + "content": "\"use client\";\n\nimport \"@seed-design/stylesheet/reactionButton.css\";\n\nimport { ReactionButton as SeedReactionButton } from \"@seed-design/react\";\nimport * as React from \"react\";\nimport { ProgressCircle } from \"./progress-circle\";\n\nexport interface ReactionButtonProps extends SeedReactionButton.RootProps {\n prefixIcon?: React.ReactNode;\n\n count?: number;\n}\n\n/**\n * @see https://v3.seed-design.io/docs/react/components/reaction-button\n */\nexport const ReactionButton = React.forwardRef<\n React.ElementRef,\n ReactionButtonProps\n>(({ loading = false, prefixIcon, count, children, ...otherProps }, ref) => {\n return (\n \n {prefixIcon && }\n {children}\n {count !== undefined && (\n {count}\n )}\n {loading ? (\n \n \n \n ) : null}\n \n );\n});\nReactionButton.displayName = \"ReactionButton\";\n\n/**\n * This file is generated snippet from the Seed Design.\n * You can extend the functionality from this snippet if needed.\n */\n" } ] } \ No newline at end of file diff --git a/docs/public/__registry__/ui/select-box-group.json b/docs/public/__registry__/ui/select-box-group.json index b40d7de99..98630bd3a 100644 --- a/docs/public/__registry__/ui/select-box-group.json +++ b/docs/public/__registry__/ui/select-box-group.json @@ -9,7 +9,7 @@ { "name": "select-box-group.tsx", "type": "ui", - "content": "\"use client\";\n\nimport {\n useRadioGroup,\n type UseRadioGroupProps,\n type RadioItemProps,\n} from \"@seed-design/react-radio-group\";\nimport {\n useCheckbox,\n type UseCheckboxProps,\n} from \"@seed-design/react-checkbox\";\nimport {\n type SelectBoxGroupVariantProps,\n selectBoxGroup,\n} from \"@seed-design/recipe/selectBoxGroup\";\nimport { IconCheckmarkFatFill } from \"@daangn/react-monochrome-icon\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport type { Assign } from \"../util/types\";\nimport { visuallyHidden } from \"../util/visuallyHidden\";\n\nimport \"@seed-design/stylesheet/selectBoxGroup.css\";\n\nconst SelectBoxRadioGroupContext = React.createContext<{\n api: ReturnType;\n} | null>(null);\n\nconst useSelectBoxContext = () => {\n const context = React.useContext(SelectBoxRadioGroupContext);\n if (!context)\n throw new Error(\n \"SelectBoxRadio cannot be rendered outside the SelectBoxRadioGroup\",\n );\n\n return context;\n};\n\nexport interface SelectBoxRadioGroupProps\n extends Assign, UseRadioGroupProps> {}\n\nexport const SelectBoxRadioGroup = React.forwardRef<\n HTMLDivElement,\n SelectBoxRadioGroupProps\n>(({ className, children, ...otherProps }, ref) => {\n const api = useRadioGroup(otherProps);\n const {\n rootProps: { \"aria-labelledby\": _, ...rootProps },\n restProps,\n } = api;\n\n const classNames = selectBoxGroup();\n\n return (\n \n {/*
\n {label}\n
*/}\n \n {children}\n \n \n );\n});\nSelectBoxRadioGroup.displayName = \"SelectBoxRadioGroup\";\n\nexport interface SelectBoxRadioProps\n extends SelectBoxGroupVariantProps,\n Assign<\n Omit, \"children\">,\n RadioItemProps\n > {\n label: string;\n description?: string;\n}\n\nexport const SelectBoxRadio = React.forwardRef<\n HTMLInputElement,\n SelectBoxRadioProps\n>(({ className, label, description, ...otherProps }, ref) => {\n const { api } = useSelectBoxContext();\n const { getItemProps } = api;\n const { rootProps, restProps, hiddenInputProps, controlProps, stateProps } =\n getItemProps(otherProps);\n\n const classNames = selectBoxGroup();\n\n return (\n \n \n
\n {label}\n {description && (\n {description}\n )}\n
\n
\n
\n
\n \n );\n});\nSelectBoxRadio.displayName = \"SelectBoxRadio\";\n\nexport interface SelectBoxCheckGroupProps\n extends React.HTMLAttributes {}\n\nexport const SelectBoxCheckGroup = React.forwardRef<\n HTMLDivElement,\n SelectBoxCheckGroupProps\n>(({ className, children, ...otherProps }, ref) => {\n const classNames = selectBoxGroup();\n\n return (\n
\n {children}\n
\n );\n});\nSelectBoxCheckGroup.displayName = \"SelectBoxCheckGroup\";\n\nexport interface SelectBoxCheckProps\n extends SelectBoxGroupVariantProps,\n Assign<\n Omit, \"children\">,\n UseCheckboxProps\n > {\n label: string;\n description?: string;\n}\n\nexport const SelectBoxCheck = React.forwardRef<\n HTMLInputElement,\n SelectBoxCheckProps\n>(({ className, label, description, ...otherProps }, ref) => {\n const { rootProps, restProps, hiddenInputProps, controlProps, stateProps } =\n useCheckbox(otherProps);\n\n const classNames = selectBoxGroup();\n\n return (\n \n \n
\n {label}\n {description && (\n {description}\n )}\n
\n
\n \n
\n \n );\n});\nSelectBoxCheck.displayName = \"SelectBoxCheck\";\n" + "content": "\"use client\";\n\nimport {\n useRadioGroup,\n type UseRadioGroupProps,\n type RadioItemProps,\n} from \"@seed-design/react-radio-group\";\nimport {\n useCheckbox,\n type UseCheckboxProps,\n} from \"@seed-design/react-checkbox\";\nimport {\n type SelectBoxGroupVariantProps,\n selectBoxGroup,\n} from \"@seed-design/recipe/selectBoxGroup\";\nimport { IconCheckmarkFatFill } from \"@daangn/react-monochrome-icon\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\n\nimport type { Assign } from \"../util/types\";\nimport { visuallyHidden } from \"../util/visuallyHidden\";\n\nimport \"@seed-design/stylesheet/selectBoxGroup.css\";\n\nconst RadioSelectBoxGroupContext = React.createContext<{\n api: ReturnType;\n} | null>(null);\n\nconst useSelectBoxContext = () => {\n const context = React.useContext(RadioSelectBoxGroupContext);\n if (!context)\n throw new Error(\n \"RadioSelectBox cannot be rendered outside the RadioSelectBoxGroup\",\n );\n\n return context;\n};\n\nexport interface RadioSelectBoxGroupProps\n extends Assign, UseRadioGroupProps> {}\n\nexport const RadioSelectBoxGroup = React.forwardRef<\n HTMLDivElement,\n RadioSelectBoxGroupProps\n>(({ className, children, ...otherProps }, ref) => {\n const api = useRadioGroup(otherProps);\n const {\n rootProps: { \"aria-labelledby\": _, ...rootProps },\n restProps,\n } = api;\n\n const classNames = selectBoxGroup();\n\n return (\n \n {/*
\n {label}\n
*/}\n \n {children}\n \n
\n );\n});\nRadioSelectBoxGroup.displayName = \"RadioSelectBoxGroup\";\n\nexport interface RadioSelectBoxProps\n extends SelectBoxGroupVariantProps,\n Assign<\n Omit, \"children\">,\n RadioItemProps\n > {\n label: string;\n description?: string;\n}\n\nexport const RadioSelectBox = React.forwardRef<\n HTMLInputElement,\n RadioSelectBoxProps\n>(({ className, label, description, ...otherProps }, ref) => {\n const { api } = useSelectBoxContext();\n const { getItemProps } = api;\n const { rootProps, restProps, hiddenInputProps, controlProps, stateProps } =\n getItemProps(otherProps);\n\n const classNames = selectBoxGroup();\n\n return (\n \n \n
\n {label}\n {description && (\n {description}\n )}\n
\n
\n
\n
\n \n );\n});\nRadioSelectBox.displayName = \"RadioSelectBox\";\n\nexport interface CheckSelectBoxGroupProps\n extends React.HTMLAttributes {}\n\nexport const CheckSelectBoxGroup = React.forwardRef<\n HTMLDivElement,\n CheckSelectBoxGroupProps\n>(({ className, children, ...otherProps }, ref) => {\n const classNames = selectBoxGroup();\n\n return (\n
\n {children}\n
\n );\n});\nCheckSelectBoxGroup.displayName = \"CheckSelectBoxGroup\";\n\nexport interface CheckSelectBoxProps\n extends SelectBoxGroupVariantProps,\n Assign<\n Omit, \"children\">,\n UseCheckboxProps\n > {\n label: string;\n description?: string;\n}\n\nexport const CheckSelectBox = React.forwardRef<\n HTMLInputElement,\n CheckSelectBoxProps\n>(({ className, label, description, ...otherProps }, ref) => {\n const { rootProps, restProps, hiddenInputProps, controlProps, stateProps } =\n useCheckbox(otherProps);\n\n const classNames = selectBoxGroup();\n\n return (\n \n \n
\n {label}\n {description && (\n {description}\n )}\n
\n
\n \n
\n \n );\n});\nCheckSelectBox.displayName = \"CheckSelectBox\";\n" }, { "name": "types.ts", @@ -22,4 +22,4 @@ "content": "import type { CSSProperties } from \"react\";\n\nexport const visuallyHidden: CSSProperties = {\n border: 0,\n clip: \"rect(0 0 0 0)\",\n height: \"1px\",\n margin: \"-1px\",\n overflow: \"hidden\",\n padding: 0,\n position: \"absolute\",\n whiteSpace: \"nowrap\",\n width: \"1px\",\n};\n" } ] -} \ No newline at end of file +} diff --git a/docs/public/__registry__/ui/select-box.json b/docs/public/__registry__/ui/select-box.json index 095a5d9be..56c35beda 100644 --- a/docs/public/__registry__/ui/select-box.json +++ b/docs/public/__registry__/ui/select-box.json @@ -8,7 +8,7 @@ { "name": "select-box.tsx", "type": "ui", - "content": "\"use client\";\n\nimport { IconCheckmarkFatFill } from \"@daangn/react-monochrome-icon\";\nimport {\n SelectBoxCheck as SeedSelectBoxCheck,\n SelectBoxRadio as SeedSelectBoxRadio,\n} from \"@seed-design/react\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/selectBox.css\";\nimport \"@seed-design/stylesheet/selectBoxGroup.css\";\n\nexport interface SelectBoxRadioGroupProps\n extends SeedSelectBoxRadio.GroupProps {}\n\nexport const SelectBoxRadioGroup = React.forwardRef<\n HTMLDivElement,\n SelectBoxRadioGroupProps\n>((props, ref) => {\n if (!props[\"aria-label\"] && !props[\"aria-labelledby\"]) {\n console.warn(\n \"SelectBoxRadioGroup component requires either an `aria-label` or `aria-labelledby` attribute.\",\n );\n }\n\n return ;\n});\n\nexport interface SelectBoxRadioProps extends SeedSelectBoxRadio.RootProps {\n label: string;\n\n description?: string;\n\n inputProps?: React.InputHTMLAttributes;\n\n rootRef?: React.Ref;\n}\n\nexport const SelectBoxRadio = React.forwardRef<\n HTMLInputElement,\n SelectBoxRadioProps\n>(({ label, description, inputProps, rootRef, ...otherProps }, ref) => {\n return (\n \n \n \n {label}\n {description && (\n \n {description}\n \n )}\n \n \n \n \n \n }\n />\n \n \n );\n});\nSelectBoxRadio.displayName = \"SelectBoxRadio\";\n\nexport interface SelectBoxCheckGroupProps\n extends SeedSelectBoxCheck.GroupProps {}\n\nexport const SelectBoxCheckGroup = SeedSelectBoxCheck.Group;\n\nexport interface SelectBoxCheckProps extends SeedSelectBoxCheck.RootProps {\n label: string;\n\n description?: string;\n\n inputProps?: React.InputHTMLAttributes;\n\n rootRef?: React.Ref;\n}\n\nexport const SelectBoxCheck = React.forwardRef<\n HTMLInputElement,\n SelectBoxCheckProps\n>(({ label, description, inputProps, rootRef, ...otherProps }, ref) => {\n return (\n \n \n \n {label}\n {description && (\n \n {description}\n \n )}\n \n \n } />\n \n \n );\n});\nSelectBoxCheck.displayName = \"SelectBoxCheck\";\n" + "content": "\"use client\";\n\nimport { IconCheckmarkFatFill } from \"@daangn/react-monochrome-icon\";\nimport {\n CheckSelectBox as SeedCheckSelectBox,\n RadioSelectBox as SeedRadioSelectBox,\n} from \"@seed-design/react\";\nimport * as React from \"react\";\n\nimport \"@seed-design/stylesheet/selectBox.css\";\nimport \"@seed-design/stylesheet/selectBoxGroup.css\";\n\nexport interface RadioSelectBoxRootProps extends SeedRadioSelectBox.RootProps {}\n\nexport const RadioSelectBoxRoot = React.forwardRef<\n HTMLDivElement,\n RadioSelectBoxRootProps\n>((props, ref) => {\n if (!props[\"aria-label\"] && !props[\"aria-labelledby\"]) {\n console.warn(\n \"RadioSelectBoxRoot component requires either an `aria-label` or `aria-labelledby` attribute.\",\n );\n }\n\n return ;\n});\n\nexport interface RadioSelectBoxItemProps extends SeedRadioSelectBox.ItemProps {\n label: string;\n\n description?: string;\n\n inputProps?: React.InputHTMLAttributes;\n\n rootRef?: React.Ref;\n}\n\nexport const RadioSelectBoxItem = React.forwardRef<\n HTMLInputElement,\n RadioSelectBoxItemProps\n>(({ label, description, inputProps, rootRef, ...otherProps }, ref) => {\n return (\n \n \n \n {label}\n {description && (\n \n {description}\n \n )}\n \n \n \n \n \n }\n />\n \n \n );\n});\nRadioSelectBoxItem.displayName = \"RadioSelectBoxItem\";\n\nexport interface CheckSelectBoxProps extends SeedCheckSelectBox.RootProps {\n label: string;\n\n description?: string;\n\n inputProps?: React.InputHTMLAttributes;\n\n rootRef?: React.Ref;\n}\n\nexport const CheckSelectBox = React.forwardRef<\n HTMLInputElement,\n CheckSelectBoxProps\n>(({ label, description, inputProps, rootRef, ...otherProps }, ref) => {\n return (\n \n \n \n {label}\n {description && (\n \n {description}\n \n )}\n \n \n } />\n \n \n );\n});\nCheckSelectBox.displayName = \"CheckSelectBox\";\n\nexport interface CheckSelectBoxGroupProps\n extends SeedCheckSelectBox.GroupProps {}\n\nexport const CheckSelectBoxGroup = SeedCheckSelectBox.Group;\n" } ] } \ No newline at end of file diff --git a/docs/public/rootage/components/action-sheet-button.json b/docs/public/rootage/components/action-sheet-button.json deleted file mode 100644 index 7d2ac97ab..000000000 --- a/docs/public/rootage/components/action-sheet-button.json +++ /dev/null @@ -1,50 +0,0 @@ -{ - "kind": "ComponentSpec", - "metadata": { - "id": "action-sheet-button", - "name": "Action Sheet Button" - }, - "data": { - "base": { - "enabled": { - "root": { - "color": "$color.bg.neutral-weak", - "minHeight": "54px", - "paddingX": "$unit.s4", - "paddingY": "$unit.s4", - "strokeBottomWidth": "1px", - "strokeColor": "$color.stroke.neutral", - "gap": "$unit.s3" - }, - "prefixIcon": { - "size": "22px" - }, - "label": { - "fontSize": "$font-size.s5", - "lineHeight": "$line-height.s5", - "fontWeight": "$font-weight.regular" - } - } - }, - "tone=neutral": { - "enabled": { - "prefixIcon": { - "color": "$color.fg.neutral" - }, - "label": { - "color": "$color.fg.neutral" - } - } - }, - "tone=danger": { - "enabled": { - "prefixIcon": { - "color": "$color.fg.danger" - }, - "label": { - "color": "$color.fg.danger" - } - } - } - } -} \ No newline at end of file diff --git a/docs/public/rootage/components/action-sheet-item copy.json b/docs/public/rootage/components/action-sheet-item copy.json deleted file mode 100644 index a372e6d5c..000000000 --- a/docs/public/rootage/components/action-sheet-item copy.json +++ /dev/null @@ -1,50 +0,0 @@ -{ - "kind": "ComponentSpec", - "metadata": { - "id": "action-sheet-item", - "name": "Action Sheet Item" - }, - "data": { - "base": { - "enabled": { - "root": { - "color": "$color.bg.neutral-weak", - "minHeight": "54px", - "paddingX": "$unit.s4", - "paddingY": "$unit.s4", - "strokeBottomWidth": "1px", - "strokeColor": "$color.stroke.neutral", - "gap": "$unit.s3" - }, - "prefixIcon": { - "size": "22px" - }, - "label": { - "fontSize": "$font-size.s5", - "lineHeight": "$line-height.s5", - "fontWeight": "$font-weight.regular" - } - } - }, - "tone=neutral": { - "enabled": { - "prefixIcon": { - "color": "$color.fg.neutral" - }, - "label": { - "color": "$color.fg.neutral" - } - } - }, - "tone=danger": { - "enabled": { - "prefixIcon": { - "color": "$color.fg.danger" - }, - "label": { - "color": "$color.fg.danger" - } - } - } - } -} \ No newline at end of file diff --git a/docs/public/rootage/components/select-box-group.json b/docs/public/rootage/components/select-box-group.json deleted file mode 100644 index 776cc0427..000000000 --- a/docs/public/rootage/components/select-box-group.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "kind": "ComponentSpec", - "metadata": { - "id": "select-box-group", - "name": "Select Box Group" - }, - "data": { - "base": { - "enabled": { - "root": { - "gap": "$unit.s3" - } - } - } - } -} \ No newline at end of file diff --git a/docs/public/rootage/index.json b/docs/public/rootage/index.json index 4e476bc8c..bdf01f4c2 100644 --- a/docs/public/rootage/index.json +++ b/docs/public/rootage/index.json @@ -77,9 +77,6 @@ { "path": "/components/select-box.json" }, - { - "path": "/components/select-box-group.json" - }, { "path": "/components/skeleton.json" }, diff --git a/docs/public/rootage/parsed.json b/docs/public/rootage/parsed.json index 94de30d00..ce8d8d4c0 100644 --- a/docs/public/rootage/parsed.json +++ b/docs/public/rootage/parsed.json @@ -18820,39 +18820,6 @@ } ] }, - { - "id": "select-box-group", - "name": "Select Box Group", - "data": [ - { - "key": {}, - "state": [ - { - "key": [ - "enabled" - ], - "slot": [ - { - "key": "root", - "property": [ - { - "key": "gap", - "value": { - "type": "token", - "group": [ - "unit" - ], - "key": "s3" - } - } - ] - } - ] - } - ] - } - ] - }, { "id": "select-box", "name": "Select Box", diff --git a/docs/registry/ui/control-chip.tsx b/docs/registry/ui/control-chip.tsx index 3e9e4a9a7..864032a5f 100644 --- a/docs/registry/ui/control-chip.tsx +++ b/docs/registry/ui/control-chip.tsx @@ -1,21 +1,28 @@ "use client"; import { ControlChip as SeedControlChip } from "@seed-design/react"; +import { Checkbox, RadioGroup } from "@seed-design/react/primitive"; import * as React from "react"; import "@seed-design/stylesheet/controlChip.css"; -export interface ControlChipToggleProps extends SeedControlChip.RootProps { +export interface ToggleControlChipProps + extends SeedControlChip.RootBaseProps, + Checkbox.RootProps { prefixIcon?: React.ReactNode; suffixIcon?: React.ReactNode; count?: number; + + inputProps?: React.InputHTMLAttributes; + + rootRef?: React.Ref; } -export const ControlChipToggle = React.forwardRef< - HTMLLabelElement, - ControlChipToggleProps +export const ToggleControlChip = React.forwardRef< + HTMLInputElement, + ToggleControlChipProps >( ( { @@ -23,10 +30,48 @@ export const ControlChipToggle = React.forwardRef< prefixIcon, suffixIcon, count, + size, layout = "withText", + inputProps, + rootRef, ...otherProps }, ref, + ) => { + return ( + + + {layout === "withText" ? ( + <> + {prefixIcon && } + {children} + {count && {count}} + {suffixIcon && } + + ) : ( + + )} + + + + ); + }, +); +ToggleControlChip.displayName = "ControlChip.Toggle"; + +export interface ButtonControlChipProps extends SeedControlChip.RootProps { + prefixIcon?: React.ReactNode; + + suffixIcon?: React.ReactNode; +} + +export const ButtonControlChip = React.forwardRef< + HTMLButtonElement, + ButtonControlChipProps +>( + ( + { children, prefixIcon, suffixIcon, layout = "withText", ...otherProps }, + ref, ) => { return ( @@ -34,7 +79,6 @@ export const ControlChipToggle = React.forwardRef< <> {prefixIcon && } {children} - {count && {count}} {suffixIcon && } ) : ( @@ -44,7 +88,64 @@ export const ControlChipToggle = React.forwardRef< ); }, ); -ControlChipToggle.displayName = "ControlChip.Toggle"; +ButtonControlChip.displayName = "ControlChip.Button"; + +export interface RadioControlChipRootProps extends RadioGroup.RootProps {} + +export const RadioControlChipRoot = RadioGroup.Root; + +export interface RadioControlChipItemProps + extends SeedControlChip.RootBaseProps, + RadioGroup.ItemProps { + prefixIcon?: React.ReactNode; + + suffixIcon?: React.ReactNode; + + count?: number; + + inputProps?: React.InputHTMLAttributes; + + rootRef?: React.Ref; +} + +export const RadioControlChipItem = React.forwardRef< + HTMLInputElement, + RadioControlChipItemProps +>( + ( + { + children, + prefixIcon, + suffixIcon, + count, + size, + layout = "withText", + inputProps, + rootRef, + ...otherProps + }, + ref, + ) => { + return ( + + + {layout === "withText" ? ( + <> + {prefixIcon && } + {children} + {count && {count}} + {suffixIcon && } + + ) : ( + + )} + + + + ); + }, +); +RadioControlChipItem.displayName = "ControlChip.RadioItem"; export const ControlChip = Object.assign( () => { @@ -53,7 +154,10 @@ export const ControlChip = Object.assign( ); }, { - Toggle: ControlChipToggle, + Toggle: ToggleControlChip, + Button: ButtonControlChip, + RadioRoot: RadioControlChipRoot, + RadioItem: RadioControlChipItem, }, ); diff --git a/docs/registry/ui/select-box.tsx b/docs/registry/ui/select-box.tsx index c0b573079..59477661b 100644 --- a/docs/registry/ui/select-box.tsx +++ b/docs/registry/ui/select-box.tsx @@ -2,31 +2,30 @@ import { IconCheckmarkFatFill } from "@daangn/react-monochrome-icon"; import { - SelectBoxCheck as SeedSelectBoxCheck, - SelectBoxRadio as SeedSelectBoxRadio, + CheckSelectBox as SeedCheckSelectBox, + RadioSelectBox as SeedRadioSelectBox, } from "@seed-design/react"; import * as React from "react"; import "@seed-design/stylesheet/selectBox.css"; import "@seed-design/stylesheet/selectBoxGroup.css"; -export interface SelectBoxRadioGroupProps - extends SeedSelectBoxRadio.GroupProps {} +export interface RadioSelectBoxRootProps extends SeedRadioSelectBox.RootProps {} -export const SelectBoxRadioGroup = React.forwardRef< +export const RadioSelectBoxRoot = React.forwardRef< HTMLDivElement, - SelectBoxRadioGroupProps + RadioSelectBoxRootProps >((props, ref) => { if (!props["aria-label"] && !props["aria-labelledby"]) { console.warn( - "SelectBoxRadioGroup component requires either an `aria-label` or `aria-labelledby` attribute.", + "RadioSelectBoxRoot component requires either an `aria-label` or `aria-labelledby` attribute.", ); } - return ; + return ; }); -export interface SelectBoxRadioProps extends SeedSelectBoxRadio.RootProps { +export interface RadioSelectBoxItemProps extends SeedRadioSelectBox.ItemProps { label: string; description?: string; @@ -36,41 +35,36 @@ export interface SelectBoxRadioProps extends SeedSelectBoxRadio.RootProps { rootRef?: React.Ref; } -export const SelectBoxRadio = React.forwardRef< +export const RadioSelectBoxItem = React.forwardRef< HTMLInputElement, - SelectBoxRadioProps + RadioSelectBoxItemProps >(({ label, description, inputProps, rootRef, ...otherProps }, ref) => { return ( - - - - {label} + + + + {label} {description && ( - + {description} - + )} - - - + + } /> - - + + ); }); -SelectBoxRadio.displayName = "SelectBoxRadio"; +RadioSelectBoxItem.displayName = "RadioSelectBoxItem"; -export interface SelectBoxCheckGroupProps - extends SeedSelectBoxCheck.GroupProps {} - -export const SelectBoxCheckGroup = SeedSelectBoxCheck.Group; - -export interface SelectBoxCheckProps extends SeedSelectBoxCheck.RootProps { +export interface CheckSelectBoxProps extends SeedCheckSelectBox.RootProps { label: string; description?: string; @@ -80,25 +74,30 @@ export interface SelectBoxCheckProps extends SeedSelectBoxCheck.RootProps { rootRef?: React.Ref; } -export const SelectBoxCheck = React.forwardRef< +export const CheckSelectBox = React.forwardRef< HTMLInputElement, - SelectBoxCheckProps + CheckSelectBoxProps >(({ label, description, inputProps, rootRef, ...otherProps }, ref) => { return ( - - - - {label} + + + + {label} {description && ( - + {description} - + )} - - - } /> - - + + + } /> + + ); }); -SelectBoxCheck.displayName = "SelectBoxCheck"; +CheckSelectBox.displayName = "CheckSelectBox"; + +export interface CheckSelectBoxGroupProps + extends SeedCheckSelectBox.GroupProps {} + +export const CheckSelectBoxGroup = SeedCheckSelectBox.Group; diff --git a/docs/stories/SelectBoxCheck.stories.tsx b/docs/stories/CheckSelectBox.stories.tsx similarity index 52% rename from docs/stories/SelectBoxCheck.stories.tsx rename to docs/stories/CheckSelectBox.stories.tsx index 54c0698d9..74c16a296 100644 --- a/docs/stories/SelectBoxCheck.stories.tsx +++ b/docs/stories/CheckSelectBox.stories.tsx @@ -1,36 +1,46 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { SelectBoxCheck, SelectBoxCheckGroup } from "seed-design/ui/select-box"; import { selectBoxGroupVariantMap } from "@seed-design/recipe/selectBoxGroup"; +import { CheckSelectBox } from "seed-design/ui/select-box"; import { SeedThemeDecorator } from "./components/decorator"; import { VariantTable } from "./components/variant-table"; -const Component = () => { - return ( - - - - - - ); -}; - const meta = { - component: SelectBoxCheckGroup, + component: CheckSelectBox, decorators: [SeedThemeDecorator], -} satisfies Meta; +} satisfies Meta; export default meta; type Story = StoryObj; +const conditionMap = { + checked: { + false: { + defaultChecked: false, + }, + true: { + defaultChecked: true, + }, + }, +}; + const CommonStoryTemplate: Story = { args: { defaultValue: "dolor", + label: "sint", + description: "sint", }, - render: function Render(args) { - return ; + render: (args) => { + return ( + + ); }, }; diff --git a/docs/stories/SelectBoxRadio.stories.tsx b/docs/stories/RadioSelectBox.stories.tsx similarity index 74% rename from docs/stories/SelectBoxRadio.stories.tsx rename to docs/stories/RadioSelectBox.stories.tsx index 02ab8270d..ff2262168 100644 --- a/docs/stories/SelectBoxRadio.stories.tsx +++ b/docs/stories/RadioSelectBox.stories.tsx @@ -1,29 +1,29 @@ import type { Meta, StoryObj } from "@storybook/react"; -import { SelectBoxRadio, SelectBoxRadioGroup } from "seed-design/ui/select-box"; import { selectBoxGroupVariantMap } from "@seed-design/recipe/selectBoxGroup"; +import { RadioSelectBoxItem, RadioSelectBoxRoot } from "seed-design/ui/select-box"; +import { useState } from "react"; import { SeedThemeDecorator } from "./components/decorator"; import { VariantTable } from "./components/variant-table"; -import { useState } from "react"; const Component = () => { const values = ["dolor", "magna", "sint"]; const [value, setValue] = useState(values[0]); return ( - + {values.map((value) => ( - + ))} - + ); }; const meta = { - component: SelectBoxRadioGroup, + component: RadioSelectBoxRoot, decorators: [SeedThemeDecorator], -} satisfies Meta; +} satisfies Meta; export default meta; diff --git a/packages/qvism-preset/src/recipes/select-box.ts b/packages/qvism-preset/src/recipes/select-box.ts index c759b840d..3fa53a86d 100644 --- a/packages/qvism-preset/src/recipes/select-box.ts +++ b/packages/qvism-preset/src/recipes/select-box.ts @@ -1,4 +1,4 @@ -import { selectBoxGroup as groupVars, selectBox as vars } from "@seed-design/vars/component"; +import { selectBox as vars } from "@seed-design/vars/component"; import { defineRecipe } from "../utils/define-recipe"; import { active, checked, pseudo } from "../utils/pseudo"; @@ -9,7 +9,6 @@ export const selectBoxGroup = defineRecipe({ root: { display: "flex", flexDirection: "column", - gap: groupVars.base.enabled.root.gap, width: "100%", }, }, diff --git a/packages/react/package.json b/packages/react/package.json index ec262c9c9..4a0e63343 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -13,6 +13,16 @@ "require": "./lib/index.js", "import": "./lib/index.mjs" }, + "./vars": { + "types": "./lib/vars.d.ts", + "require": "./lib/vars.js", + "import": "./lib/vars.mjs" + }, + "./primitive": { + "types": "./lib/primitive.d.ts", + "require": "./lib/primitive.js", + "import": "./lib/primitive.mjs" + }, "./package.json": "./package.json" }, "main": "./lib/index.js", diff --git a/packages/react/src/components/Columns/Columns.tsx b/packages/react/src/components/Columns/Columns.tsx index b9a37e28b..aff803fcb 100644 --- a/packages/react/src/components/Columns/Columns.tsx +++ b/packages/react/src/components/Columns/Columns.tsx @@ -16,18 +16,19 @@ export const Columns = React.forwardRef((props, re ); }); -export interface ColumnProps extends Omit { - width: BoxProps["width"] | "content"; +export interface ColumnProps extends Omit { + width?: BoxProps["width"] | "content"; } // TODO: do we need fractional width support? export const Column = React.forwardRef((props, ref) => { - const { display = "block", width, ...otherProps } = props; + const { width, ...otherProps } = props; return ( {} + extends ControlChipRootBaseProps, + React.HTMLAttributes {} -export const ControlChipRoot = withProvider( - CheckboxPrimitive.Root, +export const ControlChipRoot = withProvider( + Primitive.button, "root", ); -ControlChipRoot.displayName = "ControlChip"; export interface ControlChipLabelProps extends PrimitiveProps, diff --git a/packages/react/src/components/ControlChip/index.ts b/packages/react/src/components/ControlChip/index.ts index d5fdbda9d..9e2dbb81e 100644 --- a/packages/react/src/components/ControlChip/index.ts +++ b/packages/react/src/components/ControlChip/index.ts @@ -9,6 +9,7 @@ export { type ControlChipIconProps, type ControlChipLabelProps, type ControlChipPrefixIconProps, + type ControlChipRootBaseProps, type ControlChipRootProps, type ControlChipSuffixIconProps, } from "./ControlChip"; diff --git a/packages/react/src/components/SelectBox/CheckSelectBox.namespace.ts b/packages/react/src/components/SelectBox/CheckSelectBox.namespace.ts new file mode 100644 index 000000000..046ecbe3c --- /dev/null +++ b/packages/react/src/components/SelectBox/CheckSelectBox.namespace.ts @@ -0,0 +1,18 @@ +export { + CheckSelectBoxContent as Content, + CheckSelectBoxControl as Control, + CheckSelectBoxDescription as Description, + CheckSelectBoxGroup as Group, + CheckSelectBoxHiddenInput as HiddenInput, + CheckSelectBoxIcon as Icon, + CheckSelectBoxLabel as Label, + CheckSelectBoxRoot as Root, + type CheckSelectBoxContentProps as ContentProps, + type CheckSelectBoxControlProps as ControlProps, + type CheckSelectBoxDescriptionProps as DescriptionProps, + type CheckSelectBoxGroupProps as GroupProps, + type CheckSelectBoxHiddenInputProps as HiddenInputProps, + type CheckSelectBoxIconProps as IconProps, + type CheckSelectBoxLabelProps as LabelProps, + type CheckSelectBoxRootProps as RootProps, +} from "./CheckSelectBox"; diff --git a/packages/react/src/components/SelectBox/CheckSelectBox.tsx b/packages/react/src/components/SelectBox/CheckSelectBox.tsx new file mode 100644 index 000000000..c8ee87317 --- /dev/null +++ b/packages/react/src/components/SelectBox/CheckSelectBox.tsx @@ -0,0 +1,79 @@ +import { Checkbox as CheckboxPrimitive, useCheckboxContext } from "@seed-design/react-checkbox"; +import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive"; +import { selectBox } from "@seed-design/recipe/selectBox"; +import { selectBoxGroup } from "@seed-design/recipe/selectBoxGroup"; +import { createStyleContext } from "../../utils/createStyleContext"; +import { createWithStateProps } from "../../utils/createWithStateProps"; +import { Icon, type IconProps } from "../private/Icon"; +import { forwardRef } from "react"; + +const { withProvider: withGroupProvider } = createStyleContext(selectBoxGroup); +const { withProvider, withContext } = createStyleContext(selectBox); +const withStateProps = createWithStateProps([useCheckboxContext]); + +export interface CheckSelectBoxGroupProps + extends PrimitiveProps, + React.HTMLAttributes {} + +/** + * CheckSelectBoxGroup is a simple div wrapper for future extensibility. + * It does not have spacing by default, nesting under it is recommended. + */ +export const CheckSelectBoxGroup = withGroupProvider( + forwardRef((props, ref) => ( + + )), + "root", +); + +export interface CheckSelectBoxRootProps extends CheckboxPrimitive.RootProps {} + +export const CheckSelectBoxRoot = withProvider( + CheckboxPrimitive.Root, + "root", +); + +export interface CheckSelectBoxContentProps + extends PrimitiveProps, + React.HTMLAttributes {} + +export const CheckSelectBoxContent = withContext( + withStateProps(Primitive.div), + "content", +); + +export interface CheckSelectBoxLabelProps + extends PrimitiveProps, + React.HTMLAttributes {} + +export const CheckSelectBoxLabel = withContext( + withStateProps(Primitive.span), + "label", +); + +export interface CheckSelectBoxDescriptionProps + extends PrimitiveProps, + React.HTMLAttributes {} + +export const CheckSelectBoxDescription = withContext< + HTMLSpanElement, + CheckSelectBoxDescriptionProps +>(withStateProps(Primitive.span), "description"); + +export interface CheckSelectBoxControlProps extends CheckboxPrimitive.ControlProps {} + +export const CheckSelectBoxControl = withContext( + CheckboxPrimitive.Control, + "checkboxControl", +); + +export interface CheckSelectBoxIconProps extends IconProps {} + +export const CheckSelectBoxIcon = withContext( + withStateProps(Icon), + "checkboxIcon", +); + +export interface CheckSelectBoxHiddenInputProps extends CheckboxPrimitive.HiddenInputProps {} + +export const CheckSelectBoxHiddenInput = CheckboxPrimitive.HiddenInput; diff --git a/packages/react/src/components/SelectBox/RadioSelectBox.namespace.ts b/packages/react/src/components/SelectBox/RadioSelectBox.namespace.ts new file mode 100644 index 000000000..3d0534de6 --- /dev/null +++ b/packages/react/src/components/SelectBox/RadioSelectBox.namespace.ts @@ -0,0 +1,18 @@ +export { + RadioSelectBoxContent as Content, + RadioSelectBoxControl as Control, + RadioSelectBoxDescription as Description, + RadioSelectBoxHiddenInput as HiddenInput, + RadioSelectBoxIcon as Icon, + RadioSelectBoxItem as Item, + RadioSelectBoxLabel as Label, + RadioSelectBoxRoot as Root, + type RadioSelectBoxContentProps as ContentProps, + type RadioSelectBoxControlProps as ControlProps, + type RadioSelectBoxDescriptionProps as DescriptionProps, + type RadioSelectBoxHiddenInputProps as HiddenInputProps, + type RadioSelectBoxIconProps as IconProps, + type RadioSelectBoxItemProps as ItemProps, + type RadioSelectBoxLabelProps as LabelProps, + type RadioSelectBoxRootProps as RootProps, +} from "./RadioSelectBox"; diff --git a/packages/react/src/components/SelectBox/SelextBoxRadio.tsx b/packages/react/src/components/SelectBox/RadioSelectBox.tsx similarity index 54% rename from packages/react/src/components/SelectBox/SelextBoxRadio.tsx rename to packages/react/src/components/SelectBox/RadioSelectBox.tsx index 1bff07e63..775efe715 100644 --- a/packages/react/src/components/SelectBox/SelextBoxRadio.tsx +++ b/packages/react/src/components/SelectBox/RadioSelectBox.tsx @@ -13,61 +13,61 @@ const { withProvider: withGroupProvider } = createStyleContext(selectBoxGroup); const { withProvider, withContext } = createStyleContext(selectBox); const withStateProps = createWithStateProps([useRadioGroupItemContext]); -export interface SelectBoxRadioGroupProps extends RadioGroupPrimitive.RootProps {} +export interface RadioSelectBoxRootProps extends RadioGroupPrimitive.RootProps {} -export const SelectBoxRadioGroup = withGroupProvider( +export const RadioSelectBoxRoot = withGroupProvider( RadioGroupPrimitive.Root, "root", ); -export interface SelectBoxRadioRootProps extends RadioGroupPrimitive.ItemProps {} +export interface RadioSelectBoxItemProps extends RadioGroupPrimitive.ItemProps {} -export const SelectBoxRadioRoot = withProvider( +export const RadioSelectBoxItem = withProvider( RadioGroupPrimitive.Item, "root", ); -export interface SelectBoxRadioContentProps +export interface RadioSelectBoxContentProps extends PrimitiveProps, React.HTMLAttributes {} -export const SelectBoxRadioContent = withContext( +export const RadioSelectBoxContent = withContext( withStateProps(Primitive.div), "content", ); -export interface SelectBoxRadioLabelProps +export interface RadioSelectBoxLabelProps extends PrimitiveProps, React.HTMLAttributes {} -export const SelectBoxRadioLabel = withContext( +export const RadioSelectBoxLabel = withContext( withStateProps(Primitive.span), "label", ); -export interface SelectBoxRadioDescriptionProps +export interface RadioSelectBoxDescriptionProps extends PrimitiveProps, React.HTMLAttributes {} -export const SelectBoxRadioDescription = withContext< +export const RadioSelectBoxDescription = withContext< HTMLSpanElement, - SelectBoxRadioDescriptionProps + RadioSelectBoxDescriptionProps >(withStateProps(Primitive.span), "description"); -export interface SelectBoxRadioControlProps extends RadioGroupPrimitive.ItemControlProps {} +export interface RadioSelectBoxControlProps extends RadioGroupPrimitive.ItemControlProps {} -export const SelectBoxRadioControl = withContext( +export const RadioSelectBoxControl = withContext( RadioGroupPrimitive.ItemControl, "radioControl", ); -export interface SelectBoxRadioIconProps extends IconProps {} +export interface RadioSelectBoxIconProps extends IconProps {} -export const SelectBoxRadioIcon = withContext( +export const RadioSelectBoxIcon = withContext( withStateProps(Icon), "radioIcon", ); -export interface SelectBoxRadioHiddenInputProps extends RadioGroupPrimitive.ItemHiddenInputProps {} +export interface RadioSelectBoxHiddenInputProps extends RadioGroupPrimitive.ItemHiddenInputProps {} -export const SelectBoxRadioHiddenInput = RadioGroupPrimitive.ItemHiddenInput; +export const RadioSelectBoxHiddenInput = RadioGroupPrimitive.ItemHiddenInput; diff --git a/packages/react/src/components/SelectBox/SelectBoxCheck.namespace.ts b/packages/react/src/components/SelectBox/SelectBoxCheck.namespace.ts deleted file mode 100644 index 8a6bca256..000000000 --- a/packages/react/src/components/SelectBox/SelectBoxCheck.namespace.ts +++ /dev/null @@ -1,18 +0,0 @@ -export { - SelectBoxCheckContent as Content, - SelectBoxCheckControl as Control, - SelectBoxCheckDescription as Description, - SelectBoxCheckGroup as Group, - SelectBoxCheckHiddenInput as HiddenInput, - SelectBoxCheckIcon as Icon, - SelectBoxCheckLabel as Label, - SelectBoxCheckRoot as Root, - type SelectBoxCheckContentProps as ContentProps, - type SelectBoxCheckControlProps as ControlProps, - type SelectBoxCheckDescriptionProps as DescriptionProps, - type SelectBoxCheckGroupProps as GroupProps, - type SelectBoxCheckHiddenInputProps as HiddenInputProps, - type SelectBoxCheckIconProps as IconProps, - type SelectBoxCheckLabelProps as LabelProps, - type SelectBoxCheckRootProps as RootProps, -} from "./SelextBoxCheck"; diff --git a/packages/react/src/components/SelectBox/SelectBoxRadio.namespace.ts b/packages/react/src/components/SelectBox/SelectBoxRadio.namespace.ts deleted file mode 100644 index a2fc10775..000000000 --- a/packages/react/src/components/SelectBox/SelectBoxRadio.namespace.ts +++ /dev/null @@ -1,18 +0,0 @@ -export { - SelectBoxRadioContent as Content, - SelectBoxRadioControl as Control, - SelectBoxRadioDescription as Description, - SelectBoxRadioGroup as Group, - SelectBoxRadioHiddenInput as HiddenInput, - SelectBoxRadioIcon as Icon, - SelectBoxRadioLabel as Label, - SelectBoxRadioRoot as Root, - type SelectBoxRadioContentProps as ContentProps, - type SelectBoxRadioControlProps as ControlProps, - type SelectBoxRadioDescriptionProps as DescriptionProps, - type SelectBoxRadioGroupProps as GroupProps, - type SelectBoxRadioHiddenInputProps as HiddenInputProps, - type SelectBoxRadioIconProps as IconProps, - type SelectBoxRadioLabelProps as LabelProps, - type SelectBoxRadioRootProps as RootProps, -} from "./SelextBoxRadio"; diff --git a/packages/react/src/components/SelectBox/SelextBoxCheck.tsx b/packages/react/src/components/SelectBox/SelextBoxCheck.tsx deleted file mode 100644 index ac499d117..000000000 --- a/packages/react/src/components/SelectBox/SelextBoxCheck.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import { Checkbox as CheckboxPrimitive, useCheckboxContext } from "@seed-design/react-checkbox"; -import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive"; -import { selectBox } from "@seed-design/recipe/selectBox"; -import { selectBoxGroup } from "@seed-design/recipe/selectBoxGroup"; -import { createStyleContext } from "../../utils/createStyleContext"; -import { createWithStateProps } from "../../utils/createWithStateProps"; -import { Icon, type IconProps } from "../private/Icon"; - -const { withProvider: withGroupProvider } = createStyleContext(selectBoxGroup); -const { withProvider, withContext } = createStyleContext(selectBox); -const withStateProps = createWithStateProps([useCheckboxContext]); - -export interface SelectBoxCheckGroupProps - extends PrimitiveProps, - React.HTMLAttributes {} - -export const SelectBoxCheckGroup = withGroupProvider( - Primitive.div, - "root", -); - -export interface SelectBoxCheckRootProps extends CheckboxPrimitive.RootProps {} - -export const SelectBoxCheckRoot = withProvider( - CheckboxPrimitive.Root, - "root", -); - -export interface SelectBoxCheckContentProps - extends PrimitiveProps, - React.HTMLAttributes {} - -export const SelectBoxCheckContent = withContext( - withStateProps(Primitive.div), - "content", -); - -export interface SelectBoxCheckLabelProps - extends PrimitiveProps, - React.HTMLAttributes {} - -export const SelectBoxCheckLabel = withContext( - withStateProps(Primitive.span), - "label", -); - -export interface SelectBoxCheckDescriptionProps - extends PrimitiveProps, - React.HTMLAttributes {} - -export const SelectBoxCheckDescription = withContext< - HTMLSpanElement, - SelectBoxCheckDescriptionProps ->(withStateProps(Primitive.span), "description"); - -export interface SelectBoxCheckControlProps extends CheckboxPrimitive.ControlProps {} - -export const SelectBoxCheckControl = withContext( - CheckboxPrimitive.Control, - "checkboxControl", -); - -export interface SelectBoxCheckIconProps extends IconProps {} - -export const SelectBoxCheckIcon = withContext( - withStateProps(Icon), - "checkboxIcon", -); - -export interface SelectBoxCheckHiddenInputProps extends CheckboxPrimitive.HiddenInputProps {} - -export const SelectBoxCheckHiddenInput = CheckboxPrimitive.HiddenInput; diff --git a/packages/react/src/components/SelectBox/index.ts b/packages/react/src/components/SelectBox/index.ts index 39655bfa5..ee8c5c368 100644 --- a/packages/react/src/components/SelectBox/index.ts +++ b/packages/react/src/components/SelectBox/index.ts @@ -1,40 +1,40 @@ export { - SelectBoxCheckContent, - SelectBoxCheckControl, - SelectBoxCheckDescription, - SelectBoxCheckGroup, - SelectBoxCheckHiddenInput, - SelectBoxCheckIcon, - SelectBoxCheckLabel, - SelectBoxCheckRoot, - type SelectBoxCheckContentProps, - type SelectBoxCheckControlProps, - type SelectBoxCheckDescriptionProps, - type SelectBoxCheckGroupProps, - type SelectBoxCheckHiddenInputProps, - type SelectBoxCheckIconProps, - type SelectBoxCheckLabelProps, - type SelectBoxCheckRootProps, -} from "./SelextBoxCheck"; + CheckSelectBoxContent, + CheckSelectBoxControl, + CheckSelectBoxDescription, + CheckSelectBoxGroup, + CheckSelectBoxHiddenInput, + CheckSelectBoxIcon, + CheckSelectBoxLabel, + CheckSelectBoxRoot, + type CheckSelectBoxContentProps, + type CheckSelectBoxControlProps, + type CheckSelectBoxDescriptionProps, + type CheckSelectBoxGroupProps, + type CheckSelectBoxHiddenInputProps, + type CheckSelectBoxIconProps, + type CheckSelectBoxLabelProps, + type CheckSelectBoxRootProps, +} from "./CheckSelectBox"; export { - SelectBoxRadioContent, - SelectBoxRadioControl, - SelectBoxRadioDescription, - SelectBoxRadioGroup, - SelectBoxRadioHiddenInput, - SelectBoxRadioIcon, - SelectBoxRadioLabel, - SelectBoxRadioRoot, - type SelectBoxRadioContentProps, - type SelectBoxRadioControlProps, - type SelectBoxRadioDescriptionProps, - type SelectBoxRadioGroupProps, - type SelectBoxRadioHiddenInputProps, - type SelectBoxRadioIconProps, - type SelectBoxRadioLabelProps, - type SelectBoxRadioRootProps, -} from "./SelextBoxRadio"; + RadioSelectBoxContent, + RadioSelectBoxControl, + RadioSelectBoxDescription, + RadioSelectBoxHiddenInput, + RadioSelectBoxIcon, + RadioSelectBoxItem, + RadioSelectBoxLabel, + RadioSelectBoxRoot, + type RadioSelectBoxContentProps, + type RadioSelectBoxControlProps, + type RadioSelectBoxDescriptionProps, + type RadioSelectBoxHiddenInputProps, + type RadioSelectBoxIconProps, + type RadioSelectBoxItemProps, + type RadioSelectBoxLabelProps, + type RadioSelectBoxRootProps, +} from "./RadioSelectBox"; -export * as SelectBoxCheck from "./SelectBoxCheck.namespace"; -export * as SelectBoxRadio from "./SelectBoxRadio.namespace"; +export * as CheckSelectBox from "./CheckSelectBox.namespace"; +export * as RadioSelectBox from "./RadioSelectBox.namespace"; diff --git a/packages/react/src/primitive.ts b/packages/react/src/primitive.ts new file mode 100644 index 000000000..e926ff40f --- /dev/null +++ b/packages/react/src/primitive.ts @@ -0,0 +1,2 @@ +export * from "@seed-design/react-checkbox"; +export * from "@seed-design/react-radio-group"; diff --git a/packages/react/src/vars.ts b/packages/react/src/vars.ts new file mode 100644 index 000000000..c827d87b6 --- /dev/null +++ b/packages/react/src/vars.ts @@ -0,0 +1 @@ +export * from "@seed-design/vars"; diff --git a/packages/rootage/components/select-box-group.yaml b/packages/rootage/components/select-box-group.yaml deleted file mode 100644 index dc1b480ab..000000000 --- a/packages/rootage/components/select-box-group.yaml +++ /dev/null @@ -1,10 +0,0 @@ -# yaml-language-server: $schema=./schema.json -kind: ComponentSpec -metadata: - id: select-box-group - name: Select Box Group -data: - base: - enabled: - root: - gap: $unit.s3 diff --git a/packages/stylesheet/selectBoxGroup.css b/packages/stylesheet/selectBoxGroup.css index 97a9fb669..5dffaf29e 100644 --- a/packages/stylesheet/selectBoxGroup.css +++ b/packages/stylesheet/selectBoxGroup.css @@ -1,6 +1,5 @@ .selectBoxGroup__root { display: flex; flex-direction: column; - gap: var(--seed-v3-unit-s3); width: 100% } \ No newline at end of file diff --git a/packages/vars/lib/component/index.d.ts b/packages/vars/lib/component/index.d.ts index d26d6ad67..9fe429bf0 100644 --- a/packages/vars/lib/component/index.d.ts +++ b/packages/vars/lib/component/index.d.ts @@ -23,7 +23,6 @@ export { vars as radio } from "./radio"; export { vars as reactionButton } from "./reaction-button"; export { vars as segment } from "./segment"; export { vars as segmentedControl } from "./segmented-control"; -export { vars as selectBoxGroup } from "./select-box-group"; export { vars as selectBox } from "./select-box"; export { vars as skeleton } from "./skeleton"; export { vars as snackbar } from "./snackbar"; diff --git a/packages/vars/lib/component/index.mjs b/packages/vars/lib/component/index.mjs index a1e4e4c1b..7534cde06 100644 --- a/packages/vars/lib/component/index.mjs +++ b/packages/vars/lib/component/index.mjs @@ -23,7 +23,6 @@ export { vars as radio } from "./radio.mjs"; export { vars as reactionButton } from "./reaction-button.mjs"; export { vars as segment } from "./segment.mjs"; export { vars as segmentedControl } from "./segmented-control.mjs"; -export { vars as selectBoxGroup } from "./select-box-group.mjs"; export { vars as selectBox } from "./select-box.mjs"; export { vars as skeleton } from "./skeleton.mjs"; export { vars as snackbar } from "./snackbar.mjs";