Skip to content

Commit

Permalink
groups refactor wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@malangcat
malangcat committed Jan 14, 2025
1 parent c8b053f commit 51ebba5
Show file tree
Hide file tree
Showing 34 changed files with 565 additions and 346 deletions.
10 changes: 5 additions & 5 deletions docs/components/example/index.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,10 +139,10 @@
"segmented-control-long-label-fixed-width": "import { SegmentedControl, SegmentedControlSegment } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlLongLabelFixedWidth() {\n return (\n <SegmentedControl defaultValue=\"price\" style={{ width: \"600px\" }} aria-label=\"정렬 기준\">\n <SegmentedControlSegment value=\"price\">가격 높은 순</SegmentedControlSegment>\n <SegmentedControlSegment value=\"discount\">할인율 높은 순</SegmentedControlSegment>\n <SegmentedControlSegment value=\"popularity\">인기 많은 순</SegmentedControlSegment>\n </SegmentedControl>\n );\n}",
"segmented-control-long-label": "import { SegmentedControl, SegmentedControlSegment } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlLongLabel() {\n return (\n <SegmentedControl defaultValue=\"price\" aria-label=\"정렬 기준\">\n <SegmentedControlSegment value=\"price\">가격 높은 순</SegmentedControlSegment>\n <SegmentedControlSegment value=\"discount\">할인율 높은 순</SegmentedControlSegment>\n <SegmentedControlSegment value=\"popularity\">인기 많은 순</SegmentedControlSegment>\n </SegmentedControl>\n );\n}",
"segmented-control-preview": "import { SegmentedControl, SegmentedControlSegment } from \"seed-design/ui/segmented-control\";\n\nexport default function SegmentedControlPreview() {\n return (\n <SegmentedControl defaultValue=\"Hot\" aria-label=\"Sort by\">\n <SegmentedControlSegment value=\"Hot\">Hot</SegmentedControlSegment>\n <SegmentedControlSegment value=\"New\">New</SegmentedControlSegment>\n </SegmentedControl>\n );\n}",
"select-box-check-preview": "import { SelectBoxCheck, SelectBoxCheckGroup } from \"seed-design/ui/select-box\";\n\nexport default function SelectBoxCheckPreview() {\n return (\n <SelectBoxCheckGroup>\n <SelectBoxCheck label=\"Apple\" defaultChecked />\n <SelectBoxCheck label=\"Melon\" description=\"Elit cupidatat dolore fugiat enim veniam culpa.\" />\n <SelectBoxCheck label=\"Mango\" />\n </SelectBoxCheckGroup>\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<FormValues>({\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 <form className=\"flex flex-col gap-3 w-96\" onSubmit={handleSubmit(onValid)} onReset={onReset}>\n <SelectBoxCheckGroup>\n {POSSIBLE_FRUIT_VALUES.map((name) => {\n const {\n field: { value, ...restProps },\n fieldState: { invalid },\n } = useController({ name, control });\n\n return (\n <SelectBoxCheck\n key={name}\n label={name}\n checked={value}\n inputProps={restProps}\n invalid={invalid}\n />\n );\n })}\n </SelectBoxCheckGroup>\n <div className=\"flex gap-2\">\n <ActionButton type=\"submit\" className=\"grow\">\n 제출\n </ActionButton>\n <ActionButton type=\"button\" variant=\"neutralWeak\" onClick={() => setValue(\"mango\", true)}>\n mango 선택\n </ActionButton>\n <ActionButton type=\"reset\" variant=\"neutralWeak\">\n 초기화\n </ActionButton>\n </div>\n </form>\n );\n}",
"select-box-radio-preview": "import { SelectBoxRadioGroup, SelectBoxRadio } from \"seed-design/ui/select-box\";\n\nexport default function SelectBoxRadioPreview() {\n return (\n <SelectBoxRadioGroup defaultValue=\"apple\" aria-label=\"Fruit\">\n <SelectBoxRadio value=\"apple\" label=\"Apple\" />\n <SelectBoxRadio\n value=\"melon\"\n label=\"Melon\"\n description=\"Elit cupidatat dolore fugiat enim veniam culpa.\"\n />\n <SelectBoxRadio value=\"mango\" label=\"Mango\" />\n </SelectBoxRadioGroup>\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<FormValues>({\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 <div>\n <form className=\"flex flex-col gap-3 w-96\" onSubmit={handleSubmit(onValid)} onReset={onReset}>\n <SelectBoxRadioGroup aria-label=\"Fruit\" {...field}>\n {POSSIBLE_FRUIT_VALUES.map((value) => (\n <SelectBoxRadio key={value} value={value} label={value} />\n ))}\n </SelectBoxRadioGroup>\n <div className=\"flex gap-2\">\n <ActionButton type=\"submit\" className=\"grow\">\n 제출\n </ActionButton>\n <ActionButton\n type=\"button\"\n variant=\"neutralWeak\"\n onClick={() => setValue(\"fruit\", \"mango\")}\n >\n mango 선택\n </ActionButton>\n <ActionButton type=\"reset\" variant=\"neutralWeak\">\n 초기화\n </ActionButton>\n </div>\n </form>\n </div>\n );\n}",
"select-box-check-preview": "import { CheckSelectBox, CheckSelectBoxGroup } from \"seed-design/ui/select-box\";\n\nexport default function CheckSelectBoxPreview() {\n return (\n <CheckSelectBoxGroup>\n <CheckSelectBox label=\"Apple\" defaultChecked />\n <CheckSelectBox label=\"Melon\" description=\"Elit cupidatat dolore fugiat enim veniam culpa.\" />\n <CheckSelectBox label=\"Mango\" />\n </CheckSelectBoxGroup>\n );\n}",
"select-box-check-react-hook-form": "import { useForm, useController } from \"react-hook-form\";\nimport { CheckSelectBox, CheckSelectBoxGroup } 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 CheckSelectBoxReactHookForm() {\n const { handleSubmit, reset, setValue, control } = useForm<FormValues>({\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 <form className=\"flex flex-col gap-3 w-96\" onSubmit={handleSubmit(onValid)} onReset={onReset}>\n <CheckSelectBoxGroup>\n {POSSIBLE_FRUIT_VALUES.map((name) => {\n const {\n field: { value, ...restProps },\n fieldState: { invalid },\n } = useController({ name, control });\n\n return (\n <CheckSelectBox\n key={name}\n label={name}\n checked={value}\n inputProps={restProps}\n invalid={invalid}\n />\n );\n })}\n </CheckSelectBoxGroup>\n <div className=\"flex gap-2\">\n <ActionButton type=\"submit\" className=\"grow\">\n 제출\n </ActionButton>\n <ActionButton type=\"button\" variant=\"neutralWeak\" onClick={() => setValue(\"mango\", true)}>\n mango 선택\n </ActionButton>\n <ActionButton type=\"reset\" variant=\"neutralWeak\">\n 초기화\n </ActionButton>\n </div>\n </form>\n );\n}",
"select-box-radio-preview": "import { RadioSelectBoxGroup, RadioSelectBox } from \"seed-design/ui/select-box\";\n\nexport default function RadioSelectBoxPreview() {\n return (\n <RadioSelectBoxGroup defaultValue=\"apple\" aria-label=\"Fruit\">\n <RadioSelectBox value=\"apple\" label=\"Apple\" />\n <RadioSelectBox\n value=\"melon\"\n label=\"Melon\"\n description=\"Elit cupidatat dolore fugiat enim veniam culpa.\"\n />\n <RadioSelectBox value=\"mango\" label=\"Mango\" />\n </RadioSelectBoxGroup>\n );\n}",
"select-box-radio-react-hook-form": "import { useForm, useController } from \"react-hook-form\";\nimport { RadioSelectBox, RadioSelectBoxGroup } 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 RadioSelectBoxReactHookForm() {\n const { handleSubmit, reset, setValue, control } = useForm<FormValues>({\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 <div>\n <form className=\"flex flex-col gap-3 w-96\" onSubmit={handleSubmit(onValid)} onReset={onReset}>\n <RadioSelectBoxGroup aria-label=\"Fruit\" {...field}>\n {POSSIBLE_FRUIT_VALUES.map((value) => (\n <RadioSelectBox key={value} value={value} label={value} />\n ))}\n </RadioSelectBoxGroup>\n <div className=\"flex gap-2\">\n <ActionButton type=\"submit\" className=\"grow\">\n 제출\n </ActionButton>\n <ActionButton\n type=\"button\"\n variant=\"neutralWeak\"\n onClick={() => setValue(\"fruit\", \"mango\")}\n >\n mango 선택\n </ActionButton>\n <ActionButton type=\"reset\" variant=\"neutralWeak\">\n 초기화\n </ActionButton>\n </div>\n </form>\n </div>\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 <Flex gap=\"s4\" alignItems=\"center\">\n <Skeleton radius=\"full\" width=\"s12\" height=\"s12\" />\n <Flex flexDirection=\"column\" gap=\"s2\">\n <Skeleton radius=\"8\" height=\"s4\" width=\"250px\" />\n <Skeleton radius=\"8\" height=\"s4\" width=\"250px\" />\n </Flex>\n </Flex>\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 <Flex gap=\"s4\" alignItems=\"center\">\n <Skeleton radius=\"0\" width=\"s12\" height=\"s12\" />\n <Skeleton radius=\"8\" width=\"s12\" height=\"s12\" />\n <Skeleton radius=\"16\" width=\"s12\" height=\"s12\" />\n <Skeleton radius=\"full\" width=\"s12\" height=\"s12\" />\n </Flex>\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 <Flex direction=\"column\" gap=\"s4\">\n <ActionButton\n onClick={() =>\n adapter.create({\n timeout: 5000,\n onClose: () => {},\n render: () => <Snackbar message=\"알림 메세지\" actionLabel=\"확인\" onAction={() => {}} />,\n })\n }\n >\n 실행\n </ActionButton>\n <SnackbarAvoidOverlap>\n <Flex\n width=\"full\"\n height=\"s16\"\n background=\"bg.dangerWeak\"\n justifyContent=\"center\"\n alignItems=\"center\"\n >\n Snackbar가 이 영역과 겹치지 않게 조정됩니다. 스크롤은 무시합니다.\n </Flex>\n </SnackbarAvoidOverlap>\n </Flex>\n );\n}\n\nexport default function SnackbarPreview() {\n return (\n <SnackbarProvider>\n <Component />\n </SnackbarProvider>\n );\n}",
Expand Down Expand Up @@ -201,4 +201,4 @@
"toggle-button-preview": "import { useState } from \"react\";\nimport { ToggleButton } from \"seed-design/ui/toggle-button\";\n\nexport default function ToggleButtonPreview() {\n const [pressed, setPressed] = useState(false);\n\n return (\n <ToggleButton pressed={pressed} onPressedChange={setPressed}>\n {pressed ? \"선택됨\" : \"미선택\"}\n </ToggleButton>\n );\n}",
"toggle-button-small": "import { useState } from \"react\";\nimport { ToggleButton } from \"seed-design/ui/toggle-button\";\n\nexport default function ToggleButtonSmall() {\n const [pressed, setPressed] = useState(false);\n\n return (\n <ToggleButton size=\"small\" pressed={pressed} onPressedChange={setPressed}>\n {pressed ? \"선택됨\" : \"미선택\"}\n </ToggleButton>\n );\n}",
"toggle-button-xsmall": "import { useState } from \"react\";\nimport { ToggleButton } from \"seed-design/ui/toggle-button\";\n\nexport default function ToggleButtonXsmall() {\n const [pressed, setPressed] = useState(false);\n\n return (\n <ToggleButton size=\"xsmall\" pressed={pressed} onPressedChange={setPressed}>\n {pressed ? \"선택됨\" : \"미선택\"}\n </ToggleButton>\n );\n}"
}
}
14 changes: 7 additions & 7 deletions docs/components/example/select-box-check-preview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import { SelectBoxCheck, SelectBoxCheckGroup } from "seed-design/ui/select-box";
import { CheckSelectBox, CheckSelectBoxGroup } from "seed-design/ui/select-box";

export default function SelectBoxCheckPreview() {
export default function CheckSelectBoxPreview() {
return (
<SelectBoxCheckGroup>
<SelectBoxCheck label="Apple" defaultChecked />
<SelectBoxCheck label="Melon" description="Elit cupidatat dolore fugiat enim veniam culpa." />
<SelectBoxCheck label="Mango" />
</SelectBoxCheckGroup>
<CheckSelectBoxGroup>
<CheckSelectBox label="Apple" defaultChecked />
<CheckSelectBox label="Melon" description="Elit cupidatat dolore fugiat enim veniam culpa." />
<CheckSelectBox label="Mango" />
</CheckSelectBoxGroup>
);
}
10 changes: 5 additions & 5 deletions docs/components/example/select-box-check-react-hook-form.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
"use client";

import { useForm, useController } from "react-hook-form";
import { SelectBoxCheck, SelectBoxCheckGroup } from "seed-design/ui/select-box";
import { CheckSelectBox, CheckSelectBoxGroup } 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() {
export default function CheckSelectBoxReactHookForm() {
const { handleSubmit, reset, setValue, control } = useForm<FormValues>({
defaultValues: {
apple: false,
Expand All @@ -32,15 +32,15 @@ export default function SelectBoxCheckReactHookForm() {

return (
<form className="flex flex-col gap-3 w-96" onSubmit={handleSubmit(onValid)} onReset={onReset}>
<SelectBoxCheckGroup>
<CheckSelectBoxGroup>
{POSSIBLE_FRUIT_VALUES.map((name) => {
const {
field: { value, ...restProps },
fieldState: { invalid },
} = useController({ name, control });

return (
<SelectBoxCheck
<CheckSelectBox
key={name}
label={name}
checked={value}
Expand All @@ -49,7 +49,7 @@ export default function SelectBoxCheckReactHookForm() {
/>
);
})}
</SelectBoxCheckGroup>
</CheckSelectBoxGroup>
<div className="flex gap-2">
<ActionButton type="submit" className="grow">
제출
Expand Down
14 changes: 7 additions & 7 deletions docs/components/example/select-box-radio-preview.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
"use client";

import { SelectBoxRadioGroup, SelectBoxRadio } from "seed-design/ui/select-box";
import { RadioSelectBoxGroup, RadioSelectBox } from "seed-design/ui/select-box";

export default function SelectBoxRadioPreview() {
export default function RadioSelectBoxPreview() {
return (
<SelectBoxRadioGroup defaultValue="apple" aria-label="Fruit">
<SelectBoxRadio value="apple" label="Apple" />
<SelectBoxRadio
<RadioSelectBoxGroup defaultValue="apple" aria-label="Fruit">
<RadioSelectBox value="apple" label="Apple" />
<RadioSelectBox
value="melon"
label="Melon"
description="Elit cupidatat dolore fugiat enim veniam culpa."
/>
<SelectBoxRadio value="mango" label="Mango" />
</SelectBoxRadioGroup>
<RadioSelectBox value="mango" label="Mango" />
</RadioSelectBoxGroup>
);
}
10 changes: 5 additions & 5 deletions docs/components/example/select-box-radio-react-hook-form.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
"use client";

import { useForm, useController } from "react-hook-form";
import { SelectBoxRadio, SelectBoxRadioGroup } from "seed-design/ui/select-box";
import { RadioSelectBox, RadioSelectBoxGroup } from "seed-design/ui/select-box";
import { ActionButton } from "seed-design/ui/action-button";
import { useCallback, type FormEvent } from "react";

Expand All @@ -11,7 +11,7 @@ interface FormValues {
fruit: (typeof POSSIBLE_FRUIT_VALUES)[number];
}

export default function SelectBoxRadioReactHookForm() {
export default function RadioSelectBoxReactHookForm() {
const { handleSubmit, reset, setValue, control } = useForm<FormValues>({
defaultValues: {
fruit: "melon",
Expand All @@ -34,11 +34,11 @@ export default function SelectBoxRadioReactHookForm() {
return (
<div>
<form className="flex flex-col gap-3 w-96" onSubmit={handleSubmit(onValid)} onReset={onReset}>
<SelectBoxRadioGroup aria-label="Fruit" {...field}>
<RadioSelectBoxGroup aria-label="Fruit" {...field}>
{POSSIBLE_FRUIT_VALUES.map((value) => (
<SelectBoxRadio key={value} value={value} label={value} />
<RadioSelectBox key={value} value={value} label={value} />
))}
</SelectBoxRadioGroup>
</RadioSelectBoxGroup>
<div className="flex gap-2">
<ActionButton type="submit" className="grow">
제출
Expand Down
8 changes: 4 additions & 4 deletions docs/content/docs/react/components/select-boxes/select-box-check.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ title: Select Box Check

## Props

### `SelectBoxCheckGroup`
### `CheckSelectBoxGroup`

`SelectBoxCheckGroup`은 `SelectBoxCheck` 간 간격을 설정하는 목적으로만 사용돼요.
`CheckSelectBoxGroup`은 `CheckSelectBox` 간 간격을 설정하는 목적으로만 사용돼요.

### `SelectBoxCheck`
### `CheckSelectBox`

<ReactTypeTable
path="./registry/ui/select-box.tsx"
name="SelectBoxCheckProps"
name="CheckSelectBoxProps"
/>

## 예제
Expand Down
Loading

0 comments on commit 51ebba5

Please sign in to comment.