From 744d6bd995e17c69a3b34d41c6862943b9a332bf Mon Sep 17 00:00:00 2001 From: Joo Chanhwi <56245920+te6-in@users.noreply.github.com> Date: Tue, 3 Dec 2024 17:24:59 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20Select=20Box=20=EA=B0=84=20=EA=B0=84?= =?UTF-8?q?=EA=B2=A9=20=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/example/index.json | 4 +- .../select-box-check-group-preview.tsx | 15 ++++++ .../example/select-box-check-preview.tsx | 5 -- .../select-box-radio-group-preview.tsx | 2 +- .../select-boxes/select-box-check-group.mdx | 22 ++++++++ .../select-boxes/select-box-check.mdx | 16 ------ docs/public/__registry__/ui/index.json | 4 +- .../ui/select-box-check-group.json | 14 ++++++ .../__registry__/ui/select-box-check.json | 14 ------ .../ui/select-box-radio-group.json | 2 +- docs/registry/registry-ui.ts | 4 +- ...x-check.tsx => select-box-check-group.tsx} | 16 +++++- docs/registry/ui/select-box-radio-group.tsx | 11 +++- docs/stories/SelectBoxCheck.stories.tsx | 34 ------------- docs/stories/SelectBoxCheckGroup.stories.tsx | 50 +++++++++++++++++++ docs/stories/SelectBoxRadioGroup.stories.tsx | 11 +--- .../preset/src/select-box.recipe.ts | 30 +++++++---- packages/recipe/lib/selectBox.d.ts | 2 +- packages/recipe/lib/selectBox.mjs | 4 ++ .../artifacts/components/\bselect-box.yaml" | 10 ++-- packages/stylesheet/selectBox.css | 14 ++++-- .../vars/src/component/select-box.vars.ts | 12 +++-- 22 files changed, 184 insertions(+), 112 deletions(-) create mode 100644 docs/components/example/select-box-check-group-preview.tsx delete mode 100644 docs/components/example/select-box-check-preview.tsx create mode 100644 docs/content/docs/react/components/select-boxes/select-box-check-group.mdx delete mode 100644 docs/content/docs/react/components/select-boxes/select-box-check.mdx create mode 100644 docs/public/__registry__/ui/select-box-check-group.json delete mode 100644 docs/public/__registry__/ui/select-box-check.json rename docs/registry/ui/{select-box-check.tsx => select-box-check-group.tsx} (83%) delete mode 100644 docs/stories/SelectBoxCheck.stories.tsx create mode 100644 docs/stories/SelectBoxCheckGroup.stories.tsx diff --git a/docs/components/example/index.json b/docs/components/example/index.json index 47f702cd1..622c143fd 100644 --- a/docs/components/example/index.json +++ b/docs/components/example/index.json @@ -113,8 +113,8 @@ "segmented-control-long-label-fixed-width": "import { SegmentedControl, Segment } 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, Segment } 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, Segment } 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 } from \"seed-design/ui/select-box-check\";\n\nexport default function SelectBoxRadioGroupPreview() {\n return ;\n}", - "select-box-radio-group-preview": "import { SelectBoxRadioGroup, SelectBoxRadio } from \"seed-design/ui/select-box-radio-group\";\n\nexport default function SelectBoxRadioGroupPreview() {\n return (\n \n \n \n \n \n );\n}", + "select-box-check-group-preview": "import { SelectBoxCheck, SelectBoxCheckGroup } from \"@/registry/ui/select-box-check-group\";\n\nexport default function SelectBoxCheckGroupPreview() {\n return (\n \n \n \n \n \n );\n}", + "select-box-radio-group-preview": "import { SelectBoxRadioGroup, SelectBoxRadio } from \"seed-design/ui/select-box-radio-group\";\n\nexport default function SelectBoxRadioGroupPreview() {\n return (\n \n \n \n \n \n );\n}", "skeleton-wave-activity": "import type { ActivityComponentType } from \"@stackflow/react/future\";\nimport type * as React from \"react\";\n\nimport Layout from \"@/components/stackflow/ActivityLayout\";\nimport { Skeleton } from \"seed-design/ui/skeleton\";\nimport {\n useSkeletonDuration,\n useIsRealLoading,\n useSkeletonLoading,\n useSkeletonTimingFunction,\n useSkeletonInitTransitionDuration,\n useSkeletonGradient,\n} from \"@/stores/skeleton\";\n\ndeclare module \"@stackflow/config\" {\n interface Register {\n SkeletonWave: unknown;\n }\n}\n\nconst Fallback = () => {\n return (\n
\n \n
\n \n \n \n
\n
\n );\n};\n\nconst SkeletonWaveActivity: ActivityComponentType<\"SkeletonWave\"> = () => {\n const isLoading = useSkeletonLoading();\n const isRealLoading = useIsRealLoading();\n const animationDuration = useSkeletonDuration();\n const animationTiming = useSkeletonTimingFunction();\n const initTransitionDuration = useSkeletonInitTransitionDuration();\n const gradient = useSkeletonGradient();\n\n return (\n \n \n {isLoading ? isRealLoading && :
content
}\n \n \n );\n};\n\nexport default SkeletonWaveActivity;\n\nSkeletonWaveActivity.displayName = \"SkeletonWaveActivity\";", "switch-disabled": "import { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchDisabled() {\n return (\n
\n \n \n
\n );\n}", "switch-medium": "import { useState } from \"react\";\nimport { Switch } from \"seed-design/ui/switch\";\n\nexport default function SwitchMedium() {\n const [isChecked, setIsChecked] = useState(false);\n\n return (\n \n );\n}", diff --git a/docs/components/example/select-box-check-group-preview.tsx b/docs/components/example/select-box-check-group-preview.tsx new file mode 100644 index 000000000..c6ce210a4 --- /dev/null +++ b/docs/components/example/select-box-check-group-preview.tsx @@ -0,0 +1,15 @@ +import { SelectBoxCheck, SelectBoxCheckGroup } from "@/registry/ui/select-box-check-group"; + +export default function SelectBoxCheckGroupPreview() { + return ( + + + + + + ); +} 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 ad09e3f0d..000000000 --- a/docs/components/example/select-box-check-preview.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { SelectBoxCheck } from "seed-design/ui/select-box-check"; - -export default function SelectBoxRadioGroupPreview() { - return ; -} diff --git a/docs/components/example/select-box-radio-group-preview.tsx b/docs/components/example/select-box-radio-group-preview.tsx index 570e80d9c..40faeef73 100644 --- a/docs/components/example/select-box-radio-group-preview.tsx +++ b/docs/components/example/select-box-radio-group-preview.tsx @@ -2,7 +2,7 @@ import { SelectBoxRadioGroup, SelectBoxRadio } from "seed-design/ui/select-box-r export default function SelectBoxRadioGroupPreview() { return ( - + + +## 설치 + + + +## Props + +### `SelectBoxCheckGroup` + +`SelectBoxCheckGroup`은 받는 prop이 없어요. `SelectBoxCheck` 간 간격을 설정하는 목적으로만 사용돼요. + +### `SelectBoxCheck` + + 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 b881d97db..000000000 --- a/docs/content/docs/react/components/select-boxes/select-box-check.mdx +++ /dev/null @@ -1,16 +0,0 @@ ---- -title: Select Box Check ---- - - - -## 설치 - - - -## Props - - diff --git a/docs/public/__registry__/ui/index.json b/docs/public/__registry__/ui/index.json index 664836e9e..6bf29c2f4 100644 --- a/docs/public/__registry__/ui/index.json +++ b/docs/public/__registry__/ui/index.json @@ -140,13 +140,13 @@ ] }, { - "name": "select-box-check", + "name": "select-box-check-group", "dependencies": [ "@seed-design/react-checkbox", "@daangn/react-monochrome-icon" ], "files": [ - "ui:select-box-check.tsx" + "ui:select-box-check-group.tsx" ] }, { diff --git a/docs/public/__registry__/ui/select-box-check-group.json b/docs/public/__registry__/ui/select-box-check-group.json new file mode 100644 index 000000000..ecd7d0bc8 --- /dev/null +++ b/docs/public/__registry__/ui/select-box-check-group.json @@ -0,0 +1,14 @@ +{ + "name": "select-box-check-group", + "dependencies": [ + "@seed-design/react-checkbox", + "@daangn/react-monochrome-icon" + ], + "registries": [ + { + "name": "select-box-check-group.tsx", + "type": "ui", + "content": "\"use client\";\n\nimport {\n type UseCheckboxProps,\n useCheckbox,\n} from \"@seed-design/react-checkbox\";\nimport {\n checkbox,\n type CheckboxVariantProps,\n} from \"@seed-design/recipe/checkbox\";\nimport {\n type SelectBoxVariantProps,\n selectBox,\n} from \"@seed-design/recipe/selectBox\";\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/checkbox.css\";\nimport \"@seed-design/stylesheet/selectBox.css\";\nimport {\n IconCheckmarkFatFill,\n IconMinusFatFill,\n} from \"@daangn/react-monochrome-icon\";\n\nexport const SelectBoxCheckGroup = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes\n>(({ className, children, ...otherProps }, ref) => {\n const classNames = selectBox();\n\n return (\n
\n {children}\n
\n );\n});\nSelectBoxCheckGroup.displayName = \"SelectBoxCheckGroup\";\n\nexport interface SelectBoxCheckProps\n extends SelectBoxVariantProps,\n Pick,\n Omit {\n label: string;\n description?: string;\n}\n\ntype ReactSelectBoxCheck = Assign<\n Omit, \"children\">,\n SelectBoxCheckProps\n>;\n\nexport const SelectBoxCheck = React.forwardRef<\n HTMLInputElement,\n ReactSelectBoxCheck\n>(({ className, label, description, indeterminate, ...otherProps }, ref) => {\n const { rootProps, restProps, hiddenInputProps, controlProps, stateProps } =\n useCheckbox(otherProps);\n\n const checkClassNames = checkbox({\n size: \"large\",\n variant: \"square\",\n indeterminate,\n });\n const selectBoxClassNames = selectBox();\n\n return (\n \n \n
\n {label}\n {description && (\n {description}\n )}\n
\n \n {!indeterminate ? (\n \n ) : (\n \n )}\n \n \n );\n});\nSelectBoxCheck.displayName = \"SelectBoxCheck\";\n" + } + ] +} \ No newline at end of file diff --git a/docs/public/__registry__/ui/select-box-check.json b/docs/public/__registry__/ui/select-box-check.json deleted file mode 100644 index d4d1011b7..000000000 --- a/docs/public/__registry__/ui/select-box-check.json +++ /dev/null @@ -1,14 +0,0 @@ -{ - "name": "select-box-check", - "dependencies": [ - "@seed-design/react-checkbox", - "@daangn/react-monochrome-icon" - ], - "registries": [ - { - "name": "select-box-check.tsx", - "type": "ui", - "content": "\"use client\";\n\nimport {\n type UseCheckboxProps,\n useCheckbox,\n} from \"@seed-design/react-checkbox\";\nimport {\n checkbox,\n type CheckboxVariantProps,\n} from \"@seed-design/recipe/checkbox\";\nimport {\n type SelectBoxVariantProps,\n selectBox,\n} from \"@seed-design/recipe/selectBox\";\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/checkbox.css\";\nimport \"@seed-design/stylesheet/selectBox.css\";\nimport {\n IconCheckmarkFatFill,\n IconMinusFatFill,\n} from \"@daangn/react-monochrome-icon\";\n\nexport interface SelectBoxCheckProps\n extends SelectBoxVariantProps,\n Pick,\n Omit {\n label: string;\n description?: string;\n}\n\ntype ReactSelectBoxCheck = Assign<\n Omit, \"children\">,\n SelectBoxCheckProps\n>;\n\nexport const SelectBoxCheck = React.forwardRef<\n HTMLInputElement,\n ReactSelectBoxCheck\n>(({ className, label, description, indeterminate, ...otherProps }, ref) => {\n const { rootProps, restProps, hiddenInputProps, controlProps, stateProps } =\n useCheckbox(otherProps);\n\n const checkClassNames = checkbox({\n size: \"large\",\n variant: \"square\",\n indeterminate,\n });\n const selectBoxClassNames = selectBox();\n\n return (\n \n \n
\n {label}\n {description && (\n {description}\n )}\n
\n \n {!indeterminate ? (\n \n ) : (\n \n )}\n \n \n );\n});\nSelectBoxCheck.displayName = \"SelectBoxCheck\";\n" - } - ] -} \ No newline at end of file diff --git a/docs/public/__registry__/ui/select-box-radio-group.json b/docs/public/__registry__/ui/select-box-radio-group.json index 4110e9246..a01769ce3 100644 --- a/docs/public/__registry__/ui/select-box-radio-group.json +++ b/docs/public/__registry__/ui/select-box-radio-group.json @@ -7,7 +7,7 @@ { "name": "select-box-radio-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 { radio } from \"@seed-design/recipe/radio\";\nimport {\n type SelectBoxVariantProps,\n selectBox,\n} from \"@seed-design/recipe/selectBox\";\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/radio.css\";\nimport \"@seed-design/stylesheet/selectBox.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 Omit {}\n\ntype ReactSelectBoxRadioGroupProps = Assign<\n React.HTMLAttributes,\n SelectBoxRadioGroupProps\n>;\n\nexport const SelectBoxRadioGroup = React.forwardRef<\n HTMLDivElement,\n ReactSelectBoxRadioGroupProps\n>(({ className, children, ...otherProps }, ref) => {\n const api = useRadioGroup(otherProps);\n const {\n rootProps: { \"aria-labelledby\": _, ...rootProps },\n restProps,\n } = api;\n\n return (\n
\n {/*
\n {label}\n
*/}\n \n {children}\n \n
\n );\n});\nSelectBoxRadioGroup.displayName = \"SelectBoxRadioGroup\";\n\nexport interface SelectBoxRadioProps\n extends SelectBoxVariantProps,\n Omit {\n label: string;\n description?: string;\n}\n\ntype ReactSelectBoxRadio = Assign<\n Omit, \"children\">,\n SelectBoxRadioProps\n>;\n\nexport const SelectBoxRadio = React.forwardRef<\n HTMLInputElement,\n ReactSelectBoxRadio\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 radioClassNames = radio({ size: \"large\" });\n const selectBoxClassNames = selectBox();\n\n return (\n \n \n
\n {label}\n {description && (\n {description}\n )}\n
\n \n
\n
\n \n );\n});\nSelectBoxRadio.displayName = \"SelectBoxRadio\";\n" + "content": "\"use client\";\n\nimport {\n useRadioGroup,\n type UseRadioGroupProps,\n type RadioItemProps,\n} from \"@seed-design/react-radio-group\";\nimport { radio } from \"@seed-design/recipe/radio\";\nimport {\n type SelectBoxVariantProps,\n selectBox,\n} from \"@seed-design/recipe/selectBox\";\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/radio.css\";\nimport \"@seed-design/stylesheet/selectBox.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 Omit {}\n\ntype ReactSelectBoxRadioGroupProps = Assign<\n React.HTMLAttributes,\n SelectBoxRadioGroupProps\n>;\n\nexport const SelectBoxRadioGroup = React.forwardRef<\n HTMLDivElement,\n ReactSelectBoxRadioGroupProps\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 = selectBox();\n\n return (\n \n {/*
\n {label}\n
*/}\n \n {children}\n \n \n );\n});\nSelectBoxRadioGroup.displayName = \"SelectBoxRadioGroup\";\n\nexport interface SelectBoxRadioProps\n extends SelectBoxVariantProps,\n Omit {\n label: string;\n description?: string;\n}\n\ntype ReactSelectBoxRadio = Assign<\n Omit, \"children\">,\n SelectBoxRadioProps\n>;\n\nexport const SelectBoxRadio = React.forwardRef<\n HTMLInputElement,\n ReactSelectBoxRadio\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 radioClassNames = radio({ size: \"large\" });\n const selectBoxClassNames = selectBox();\n\n return (\n \n \n
\n {label}\n {description && (\n {description}\n )}\n
\n \n
\n
\n \n );\n});\nSelectBoxRadio.displayName = \"SelectBoxRadio\";\n" } ] } \ No newline at end of file diff --git a/docs/registry/registry-ui.ts b/docs/registry/registry-ui.ts index b3c8389c6..25ce56a16 100644 --- a/docs/registry/registry-ui.ts +++ b/docs/registry/registry-ui.ts @@ -90,12 +90,12 @@ export const registryUI: RegistryUI = [ files: ["ui:expand-button.tsx"], }, { - name: "select-box-check", + name: "select-box-check-group", dependencies: [ "@seed-design/react-checkbox", "@daangn/react-monochrome-icon", ], - files: ["ui:select-box-check.tsx"], + files: ["ui:select-box-check-group.tsx"], }, { name: "select-box-radio-group", diff --git a/docs/registry/ui/select-box-check.tsx b/docs/registry/ui/select-box-check-group.tsx similarity index 83% rename from docs/registry/ui/select-box-check.tsx rename to docs/registry/ui/select-box-check-group.tsx index 99773521e..7bd2cf8c0 100644 --- a/docs/registry/ui/select-box-check.tsx +++ b/docs/registry/ui/select-box-check-group.tsx @@ -25,6 +25,20 @@ import { IconMinusFatFill, } from "@daangn/react-monochrome-icon"; +export const SelectBoxCheckGroup = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, children, ...otherProps }, ref) => { + const classNames = selectBox(); + + return ( +
+ {children} +
+ ); +}); +SelectBoxCheckGroup.displayName = "SelectBoxCheckGroup"; + export interface SelectBoxCheckProps extends SelectBoxVariantProps, Pick, @@ -54,7 +68,7 @@ export const SelectBoxCheck = React.forwardRef< return (