Skip to content

Commit f4c07d6

Browse files
ariflogsariflogs
committed
✅ select
1 parent 386f116 commit f4c07d6

File tree

13 files changed

+484
-11
lines changed

13 files changed

+484
-11
lines changed

‎app/(sink)/demo/components/page.tsx

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
Button,
99
Checkbox,
1010
Menu,
11+
Select,
1112
Tabs,
1213
TabsContent,
1314
TabsPanels,
@@ -43,11 +44,18 @@ export default function page() {
4344
</div>
4445

4546
<div className="space-x-4">
46-
<RadioGroup>
47-
<RadioGroup.Item value="1">Option 1</RadioGroup.Item>
48-
<RadioGroup.Item value="2">Option 2</RadioGroup.Item>
49-
<RadioGroup.Item value="3">Option 3</RadioGroup.Item>
50-
</RadioGroup>
47+
<Select>
48+
<Select.Trigger>
49+
<Select.Value placeholder="Select an option" />
50+
</Select.Trigger>
51+
<Select.Content>
52+
<Select.Group>
53+
<Select.Item value="1">Option 1</Select.Item>
54+
<Select.Item value="2">Option 2</Select.Item>
55+
<Select.Item value="3">Option 3</Select.Item>
56+
</Select.Group>
57+
</Select.Content>
58+
</Select>
5159
</div>
5260

5361
<div className="flex items-center space-x-4">

‎app/global.css

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44

55
:root {
66
--muted: #606067;
7+
--background: "#fff";
8+
--foreground: "#000";
79
}
810

911
.text-outlined {

‎components/SideNav.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@ import Link from "next/link";
55
export default function SideNav() {
66
return (
77
<div
8-
className={`fixed right-auto border-r-2 border-black h-full transition-transform transform md:translate-x-0 w-64 bg-white flex md:justify-start justify-center py-14 md:py-8`}
8+
className={`fixed right-auto border-r-2 border-black h-full overflow-y-scroll transition-transform transform md:translate-x-0 w-64 bg-white flex flex-col justify-center md:justify-start py-14 md:py-8`}
99
>
10-
<nav className="flex flex-col items-start pr-6 space-y-4">
10+
<nav className="flex flex-col items-start pr-6 h-full pb-24 overflow-scroll space-y-4">
1111
{navConfig.sideNavItems.map((item) => (
1212
<div key={item.title}>
1313
<Text as="h6">{item.title}</Text>

‎config/components.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,10 @@ export const componentConfig: {
5757
name: "radio",
5858
filePath: "packages/ui/Form/Radio.tsx",
5959
},
60+
select: {
61+
name: "select",
62+
filePath: "packages/ui/Form/Select.tsx",
63+
},
6064
text: {
6165
name: "text",
6266
filePath: "packages/ui/Text/Text.tsx",
@@ -212,6 +216,11 @@ export const componentConfig: {
212216
filePath: "preview/components/radio-style-sizes.tsx",
213217
preview: lazy(() => import("@/preview/components/radio-style-sizes")),
214218
},
219+
"select-style-default": {
220+
name: "select-style-default",
221+
filePath: "preview/components/select-style-default.tsx",
222+
preview: lazy(() => import("@/preview/components/select-style-default")),
223+
},
215224
"textarea-style-default": {
216225
name: "textarea-style-default",
217226
filePath: "preview/components/textarea-style-default.tsx",

‎config/navigation.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,14 @@ export const navConfig: INavigationConfig = {
2323
{ title: "Badge", href: `${componentsRoute}/badge` },
2424
{ title: "Button", href: `${componentsRoute}/button` },
2525
{ title: "Card", href: `${componentsRoute}/card` },
26-
{ title: "Checkbox", href: `${componentsRoute}/checkbox`, tag: "New" },
26+
{ title: "Checkbox", href: `${componentsRoute}/checkbox` },
2727
{ title: "Dialog", href: `${componentsRoute}/dialog` },
2828
{ title: "Input", href: `${componentsRoute}/input` },
2929
{ title: "Menu", href: `${componentsRoute}/menu` },
30-
{ title: "Radio", href: `${componentsRoute}/radio`, tag: "New" },
30+
{ title: "Radio", href: `${componentsRoute}/radio` },
31+
{ title: "Radio", href: `${componentsRoute}/radio` },
32+
{ title: "Radio", href: `${componentsRoute}/radio` },
33+
{ title: "Select", href: `${componentsRoute}/select`, tag: "New" },
3134
{ title: "Tab", href: `${componentsRoute}/tab` },
3235
{ title: "Textarea", href: `${componentsRoute}/textarea` },
3336
{ title: "Text", href: `${componentsRoute}/text` },

‎content/docs/components/select.mdx

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
title: Select
3+
description: Let your users pick what they want.
4+
lastUpdated: 1 Mar, 2024
5+
links:
6+
api_reference: https://www.radix-ui.com/primitives/docs/components/select#api-reference
7+
source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Form/Select.tsx
8+
---
9+
10+
<ComponentShowcase name="select-style-default" />
11+
<br />
12+
<br />
13+
14+
## Installation
15+
16+
#### 1. Install dependencies:
17+
18+
```sh
19+
npm install @radix-ui/react-select class-variance-authority
20+
```
21+
22+
<br />
23+
24+
#### 2. Copy the code 👇 into your project:
25+
26+
<ComponentSource name="select" />
27+
<br />
28+
<br />
29+
30+
## Examples
31+
32+
### Default
33+
34+
<ComponentShowcase name="select-style-default" />

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@radix-ui/react-dialog": "^1.1.2",
1717
"@radix-ui/react-dropdown-menu": "^2.1.2",
1818
"@radix-ui/react-radio-group": "^1.2.3",
19+
"@radix-ui/react-select": "^2.1.6",
1920
"@radix-ui/react-visually-hidden": "^1.1.0",
2021
"class-variance-authority": "^0.7.0",
2122
"clsx": "^2.1.1",

‎packages/ui/Form/Select.tsx

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
"use client";
2+
3+
import { cn } from "@/lib/utils";
4+
import * as SelectPrimitive from "@radix-ui/react-select";
5+
import { Check, ChevronDown } from "lucide-react";
6+
import React from "react";
7+
8+
const Select = SelectPrimitive.Root;
9+
10+
const SelectTrigger = ({
11+
className,
12+
children,
13+
...props
14+
}: SelectPrimitive.SelectTriggerProps) => {
15+
return (
16+
<SelectPrimitive.Trigger
17+
className={cn(
18+
"flex h-10 min-w-40 items-center shadow-md justify-between border-2 border-input border-black bg-transparent px-4 py-2 ring-offset-background placeholder:text-muted-foreground focus:outline-none disabled:cursor-not-allowed disabled:opacity-50",
19+
className
20+
)}
21+
{...props}
22+
>
23+
{children}
24+
<SelectPrimitive.Icon asChild>
25+
<ChevronDown className="ml-2 h-4 w-4" />
26+
</SelectPrimitive.Icon>
27+
</SelectPrimitive.Trigger>
28+
);
29+
};
30+
31+
const SelectValue = SelectPrimitive.Value;
32+
33+
const SelectIcon = SelectPrimitive.Icon;
34+
35+
const SelectContent = ({
36+
className,
37+
children,
38+
position = "popper",
39+
...props
40+
}: SelectPrimitive.SelectContentProps) => {
41+
return (
42+
<SelectPrimitive.Portal>
43+
<SelectPrimitive.Content
44+
className={cn(
45+
"relative z-50 min-w-[8rem] overflow-hidden border border-black bg-white text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
46+
position === "popper" &&
47+
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
48+
className
49+
)}
50+
position={position}
51+
{...props}
52+
>
53+
<SelectPrimitive.Viewport
54+
className={cn(
55+
position === "popper" &&
56+
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
57+
)}
58+
>
59+
{children}
60+
</SelectPrimitive.Viewport>
61+
</SelectPrimitive.Content>
62+
</SelectPrimitive.Portal>
63+
);
64+
};
65+
66+
const SelectGroup = SelectPrimitive.Group;
67+
68+
const SelectItem = ({
69+
className,
70+
children,
71+
...props
72+
}: SelectPrimitive.SelectItemProps) => (
73+
<SelectPrimitive.Item
74+
className={cn(
75+
"relative flex w-full cursor-default select-none items-center py-1.5 px-2 outline-none hover:bg-primary-400 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
76+
className
77+
)}
78+
{...props}
79+
>
80+
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
81+
82+
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
83+
<SelectPrimitive.ItemIndicator>
84+
<Check className="h-4 w-4 text-foreground" />
85+
</SelectPrimitive.ItemIndicator>
86+
</span>
87+
</SelectPrimitive.Item>
88+
);
89+
const SelectLabel = SelectPrimitive.Label;
90+
const SelectSeparator = SelectPrimitive.Separator;
91+
92+
const SelectObj = Object.assign(Select, {
93+
Trigger: SelectTrigger,
94+
Value: SelectValue,
95+
Icon: SelectIcon,
96+
Content: SelectContent,
97+
Group: SelectGroup,
98+
Item: SelectItem,
99+
Label: SelectLabel,
100+
Separator: SelectSeparator,
101+
});
102+
103+
export { SelectObj as Select };

‎packages/ui/Form/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ export * from "./Input";
22
export * from "./Textarea";
33
export * from "./Checkbox";
44
export * from "./Radio";
5+
export * from "./Select";

‎packages/ui/Menu/Menu.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ const MenuItem = React.forwardRef<
3131
<DropdownMenu.Item
3232
ref={ref}
3333
className={cn(
34-
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-primary-400 hover:text-white focus:bg-primary-400 focus:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
34+
"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-primary-400 focus:bg-primary-400 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
3535
className
3636
)}
3737
{...props}

0 commit comments

Comments
 (0)