From 04462981a97e232b543be7603028bc61905d0482 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Tue, 31 Oct 2023 16:31:30 +0900 Subject: [PATCH 1/5] =?UTF-8?q?:tada:=20Select=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + pnpm-lock.yaml | 57 +++++++++- src/components/ui/Select/Select.stories.tsx | 43 +++++++ src/components/ui/Select/Select.tsx | 120 ++++++++++++++++++++ src/components/ui/Select/index.tsx | 3 + 5 files changed, 223 insertions(+), 2 deletions(-) create mode 100644 src/components/ui/Select/Select.stories.tsx create mode 100644 src/components/ui/Select/Select.tsx create mode 100644 src/components/ui/Select/index.tsx diff --git a/package.json b/package.json index d5ee5cde..51695b3c 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@radix-ui/react-dropdown-menu": "^2.0.6", "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-label": "^2.0.2", + "@radix-ui/react-select": "^2.0.0", "@radix-ui/react-slot": "^1.0.2", "@radix-ui/react-switch": "^1.0.3", "@tanstack/react-query": "^5.0.0", @@ -25,6 +26,7 @@ "class-variance-authority": "^0.7.0", "classnames": "^2.3.2", "clsx": "^2.0.0", + "lucide-react": "^0.291.0", "next": "13.5.6", "next-themes": "^0.2.1", "react": "^18", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dc8f4090..a2f306a5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,9 @@ dependencies: '@radix-ui/react-label': specifier: ^2.0.2 version: 2.0.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-select': + specifier: ^2.0.0 + version: 2.0.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) '@radix-ui/react-slot': specifier: ^1.0.2 version: 1.0.2(@types/react@18.0.0)(react@18.0.0) @@ -38,6 +41,9 @@ dependencies: clsx: specifier: ^2.0.0 version: 2.0.0 + lucide-react: + specifier: ^0.291.0 + version: 0.291.0(react@18.0.0) next: specifier: 13.5.6 version: 13.5.6(@babel/core@7.23.2)(react-dom@18.0.0)(react@18.0.0) @@ -2175,7 +2181,6 @@ packages: resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==} dependencies: '@babel/runtime': 7.23.2 - dev: true /@radix-ui/primitive@1.0.1: resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==} @@ -2728,6 +2733,47 @@ packages: react-remove-scroll: 2.5.5(@types/react@18.0.0)(react@18.0.0) dev: true + /@radix-ui/react-select@2.0.0(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0): + resolution: {integrity: sha512-RH5b7af4oHtkcHS7pG6Sgv5rk5Wxa7XI8W5gvB1N/yiuDGZxko1ynvOiVhFM7Cis2A8zxF9bTOUVbRDzPepe6w==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + dependencies: + '@babel/runtime': 7.23.2 + '@radix-ui/number': 1.0.1 + '@radix-ui/primitive': 1.0.1 + '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-direction': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-popper': 1.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@radix-ui/react-slot': 1.0.2(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-previous': 1.0.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-visually-hidden': 1.0.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0) + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + aria-hidden: 1.2.3 + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + react-remove-scroll: 2.5.5(@types/react@18.0.0)(react@18.0.0) + dev: false + /@radix-ui/react-separator@1.0.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0)(react@18.0.0): resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==} peerDependencies: @@ -2981,7 +3027,6 @@ packages: '@types/react-dom': 18.0.0 react: 18.0.0 react-dom: 18.0.0(react@18.0.0) - dev: true /@radix-ui/rect@1.0.1: resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==} @@ -9026,6 +9071,14 @@ packages: yallist: 4.0.0 dev: true + /lucide-react@0.291.0(react@18.0.0): + resolution: {integrity: sha512-79jHlT9Je2PXSvXIBGDkItCK7In2O9iKnnSJ/bJxvIBOFaX2Ex0xEcC4fRS/g0F2uQGFejjmn2qWhwdc5wicMQ==} + peerDependencies: + react: ^16.5.1 || ^17.0.0 || ^18.0.0 + dependencies: + react: 18.0.0 + dev: false + /lz-string@1.5.0: resolution: {integrity: sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==} hasBin: true diff --git a/src/components/ui/Select/Select.stories.tsx b/src/components/ui/Select/Select.stories.tsx new file mode 100644 index 00000000..4d5ded9a --- /dev/null +++ b/src/components/ui/Select/Select.stories.tsx @@ -0,0 +1,43 @@ +import type { Meta, StoryObj } from '@storybook/react' +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectTrigger, + SelectValue, +} from './Select' + +const meta = { + title: 'UI/Select', + component: Select, + tags: ['autodocs'], + argTypes: {}, +} satisfies Meta + +export default meta +type Story = StoryObj + +export const Normal: Story = { + args: {}, + render: () => { + return ( + + ) + }, +} diff --git a/src/components/ui/Select/Select.tsx b/src/components/ui/Select/Select.tsx new file mode 100644 index 00000000..f4905781 --- /dev/null +++ b/src/components/ui/Select/Select.tsx @@ -0,0 +1,120 @@ +'use client' + +import * as React from 'react' +import * as SelectPrimitive from '@radix-ui/react-select' +import { Check, ChevronDown } from 'lucide-react' +import { cn } from '@/utils' + +const Select = SelectPrimitive.Root + +const SelectGroup = SelectPrimitive.Group + +const SelectValue = SelectPrimitive.Value + +const SelectTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + {children} + + + + +)) +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName + +const SelectContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, position = 'popper', ...props }, ref) => ( + + + + {children} + + + +)) +SelectContent.displayName = SelectPrimitive.Content.displayName + +const SelectLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectLabel.displayName = SelectPrimitive.Label.displayName + +const SelectItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + + {children} + +)) +SelectItem.displayName = SelectPrimitive.Item.displayName + +const SelectSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +SelectSeparator.displayName = SelectPrimitive.Separator.displayName + +export { + Select, + SelectGroup, + SelectValue, + SelectTrigger, + SelectContent, + SelectLabel, + SelectItem, + SelectSeparator, +} diff --git a/src/components/ui/Select/index.tsx b/src/components/ui/Select/index.tsx new file mode 100644 index 00000000..da0623d8 --- /dev/null +++ b/src/components/ui/Select/index.tsx @@ -0,0 +1,3 @@ +import { Select } from './Select' + +export default Select From 67641fa9371c81dea1d0554667a7a7df47251f2d Mon Sep 17 00:00:00 2001 From: doggopawer Date: Tue, 31 Oct 2023 16:37:31 +0900 Subject: [PATCH 2/5] =?UTF-8?q?=E2=9C=A8=20Select=20=EB=B0=B0=EA=B2=BD?= =?UTF-8?q?=EC=83=89=20=EC=86=8D=EC=84=B1=20tailwind=20=EC=BB=A4=EC=8A=A4?= =?UTF-8?q?=ED=85=80=20=EC=86=8D=EC=84=B1=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Select/Select.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ui/Select/Select.tsx b/src/components/ui/Select/Select.tsx index f4905781..aad2d4f1 100644 --- a/src/components/ui/Select/Select.tsx +++ b/src/components/ui/Select/Select.tsx @@ -80,7 +80,7 @@ const SelectItem = React.forwardRef< Date: Wed, 1 Nov 2023 16:37:38 +0900 Subject: [PATCH 3/5] =?UTF-8?q?:fire:=20SelectSperator=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Select/Select.tsx | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/components/ui/Select/Select.tsx b/src/components/ui/Select/Select.tsx index aad2d4f1..98b618ff 100644 --- a/src/components/ui/Select/Select.tsx +++ b/src/components/ui/Select/Select.tsx @@ -96,18 +96,6 @@ const SelectItem = React.forwardRef< )) SelectItem.displayName = SelectPrimitive.Item.displayName -const SelectSeparator = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) -SelectSeparator.displayName = SelectPrimitive.Separator.displayName - export { Select, SelectGroup, @@ -116,5 +104,4 @@ export { SelectContent, SelectLabel, SelectItem, - SelectSeparator, } From f6d0acd835e1b2b334f7d892ec6c7ea29a529a34 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Wed, 1 Nov 2023 17:38:05 +0900 Subject: [PATCH 4/5] =?UTF-8?q?:fire:=20SelectLabel=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Select/Select.stories.tsx | 2 -- src/components/ui/Select/Select.tsx | 13 ------------- 2 files changed, 15 deletions(-) diff --git a/src/components/ui/Select/Select.stories.tsx b/src/components/ui/Select/Select.stories.tsx index 4d5ded9a..dad27c12 100644 --- a/src/components/ui/Select/Select.stories.tsx +++ b/src/components/ui/Select/Select.stories.tsx @@ -4,7 +4,6 @@ import { SelectContent, SelectGroup, SelectItem, - SelectLabel, SelectTrigger, SelectValue, } from './Select' @@ -29,7 +28,6 @@ export const Normal: Story = { - Fruits Apple Banana Blueberry diff --git a/src/components/ui/Select/Select.tsx b/src/components/ui/Select/Select.tsx index 98b618ff..759bd730 100644 --- a/src/components/ui/Select/Select.tsx +++ b/src/components/ui/Select/Select.tsx @@ -61,18 +61,6 @@ const SelectContent = React.forwardRef< )) SelectContent.displayName = SelectPrimitive.Content.displayName -const SelectLabel = React.forwardRef< - React.ElementRef, - React.ComponentPropsWithoutRef ->(({ className, ...props }, ref) => ( - -)) -SelectLabel.displayName = SelectPrimitive.Label.displayName - const SelectItem = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef @@ -102,6 +90,5 @@ export { SelectValue, SelectTrigger, SelectContent, - SelectLabel, SelectItem, } From f9a2576047b24d8f480658d6abd7c26cc157c513 Mon Sep 17 00:00:00 2001 From: doggopawer Date: Wed, 1 Nov 2023 17:43:47 +0900 Subject: [PATCH 5/5] =?UTF-8?q?:tada:=20SelectItem=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/ui/Select/Select.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/ui/Select/Select.tsx b/src/components/ui/Select/Select.tsx index 759bd730..81eea9c8 100644 --- a/src/components/ui/Select/Select.tsx +++ b/src/components/ui/Select/Select.tsx @@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<