Merge pull request #40 from Logging-Stuff/select

Select

Author: ariflogs

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

@@ -8,6 +8,7 @@ import {
   Button,
   Checkbox,
   Menu,
+  Select,
   Tabs,
   TabsContent,
   TabsPanels,
@@ -43,11 +44,18 @@ export default function page() {
       </div>
 
       <div className="space-x-4">
-        <RadioGroup>
-          <RadioGroup.Item value="1">Option 1</RadioGroup.Item>
-          <RadioGroup.Item value="2">Option 2</RadioGroup.Item>
-          <RadioGroup.Item value="3">Option 3</RadioGroup.Item>
-        </RadioGroup>
+        <Select>
+          <Select.Trigger>
+            <Select.Value placeholder="Select an option" />
+          </Select.Trigger>
+          <Select.Content>
+            <Select.Group>
+              <Select.Item value="1">Option 1</Select.Item>
+              <Select.Item value="2">Option 2</Select.Item>
+              <Select.Item value="3">Option 3</Select.Item>
+            </Select.Group>
+          </Select.Content>
+        </Select>
       </div>
 
       <div className="flex items-center space-x-4">

app/global.css

@@ -4,6 +4,18 @@
 
 :root {
   --muted: #606067;
+  --background: #fff;
+  --foreground: #000;
+  --primary-50: #fffef0;
+  --primary-100: #fffac2;
+  --primary-200: #fff299;
+  --primary-300: #ffe766;
+  --primary-400: #ffdb33;
+  --primary-500: #ffcc00;
+  --primary-600: #ffb700;
+  --primary-700: #ff9f00;
+  --primary-800: #e68a00;
+  --primary-900: #b36b00;
 }
 
 .text-outlined {

components/SideNav.tsx

@@ -5,9 +5,9 @@ import Link from "next/link";
 export default function SideNav() {
   return (
     <div
-      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`}
+      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`}
     >
-      <nav className="flex flex-col items-start pr-6 space-y-4">
+      <nav className="flex flex-col items-start pr-6 pb-16 space-y-4">
         {navConfig.sideNavItems.map((item) => (
           <div key={item.title}>
             <Text as="h6">{item.title}</Text>

config/components.ts

@@ -57,6 +57,10 @@ export const componentConfig: {
       name: "radio",
       filePath: "packages/ui/Form/Radio.tsx",
     },
+    select: {
+      name: "select",
+      filePath: "packages/ui/Form/Select.tsx",
+    },
     text: {
       name: "text",
       filePath: "packages/ui/Text/Text.tsx",
@@ -212,6 +216,11 @@ export const componentConfig: {
       filePath: "preview/components/radio-style-sizes.tsx",
       preview: lazy(() => import("@/preview/components/radio-style-sizes")),
     },
+    "select-style-default": {
+      name: "select-style-default",
+      filePath: "preview/components/select-style-default.tsx",
+      preview: lazy(() => import("@/preview/components/select-style-default")),
+    },
     "textarea-style-default": {
       name: "textarea-style-default",
       filePath: "preview/components/textarea-style-default.tsx",

config/navigation.ts

@@ -12,7 +12,7 @@ export const navConfig: INavigationConfig = {
   sideNavItems: [
     {
       title: "Getting Started",
-      children: [{ title: "Introduction", href: "/docs" }],
+      children: [{ title: "Introduction", href: "/docs", tag: "Updated" }],
     },
     {
       title: "Components",
@@ -23,11 +23,12 @@ export const navConfig: INavigationConfig = {
         { title: "Badge", href: `${componentsRoute}/badge` },
         { title: "Button", href: `${componentsRoute}/button` },
         { title: "Card", href: `${componentsRoute}/card` },
-        { title: "Checkbox", href: `${componentsRoute}/checkbox`, tag: "New" },
+        { title: "Checkbox", href: `${componentsRoute}/checkbox` },
         { title: "Dialog", href: `${componentsRoute}/dialog` },
         { title: "Input", href: `${componentsRoute}/input` },
         { title: "Menu", href: `${componentsRoute}/menu` },
-        { title: "Radio", href: `${componentsRoute}/radio`, tag: "New" },
+        { title: "Radio", href: `${componentsRoute}/radio` },
+        { title: "Select", href: `${componentsRoute}/select`, tag: "New" },
         { title: "Tab", href: `${componentsRoute}/tab` },
         { title: "Textarea", href: `${componentsRoute}/textarea` },
         { title: "Text", href: `${componentsRoute}/text` },

content/docs/components/select.mdx

@@ -0,0 +1,34 @@
+---
+title: Select
+description: Let your users pick what they want.
+lastUpdated: 1 Mar, 2024
+links:
+  api_reference: https://www.radix-ui.com/primitives/docs/components/select#api-reference
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Form/Select.tsx
+---
+
+<ComponentShowcase name="select-style-default" />
+<br />
+<br />
+
+## Installation
+
+#### 1. Install dependencies:
+
+```sh
+npm install @radix-ui/react-select class-variance-authority
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="select" />
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="select-style-default" />

content/docs/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: Getting Started
 description: This guide will help you get started with RetroUI, a retro styled UI library based on Tailwind CSS.
-lastUpdated: 08 Oct, 2024
+lastUpdated: 1 Mar, 2024
 ---
 
 ### 1. Add the fonts
@@ -32,40 +32,78 @@ Save the fonts in `global.css`:
 
 <br />
 
-### 2. Add the theme to your tailwind.config.js file.
+### 2. Add your theme.
+
+Save your theme as CSS variables in `global.css`:
+
+```css
+:root {
+  --muted: #606067;
+  --background: #fff;
+  --foreground: #000;
+  --primary-50: #fffef0;
+  --primary-100: #fffac2;
+  --primary-200: #fff299;
+  --primary-300: #ffe766;
+  --primary-400: #ffdb33;
+  --primary-500: #ffcc00;
+  --primary-600: #ffb700;
+  --primary-700: #ff9f00;
+  --primary-800: #e68a00;
+  --primary-900: #b36b00;
+}
+```
+
+<br />
+
+Connect your theme to Tailwind in `tailwind.config.ts`:
 
 ```ts
 import type { Config } from "tailwindcss";
 
-const config = {
+const config: Config = {
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./packages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./preview/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
   theme: {
     extend: {
+      textColor: {
+        muted: "var(--muted)",
+      },
       fontFamily: {
         head: ["var(--font-head)"],
         sans: ["var(--font-sans)"],
       },
       boxShadow: {
         xs: "1px 1px 0 0 #000",
+        sm: "2px 2px 0 0 #000",
         md: "3px 3px 0 0 #000",
-        "3xl": "10px 10px 0 0 #000",
       },
       colors: {
+        background: "var(--background)",
+        foreground: "var(--foreground)",
         primary: {
-          50: "#FFFEF0",
-          100: "#FFFAC2",
-          200: "#FFF299",
-          300: "#FFE766",
-          400: "#FFDB33",
-          500: "#FFCC00",
-          600: "#FFB700",
-          700: "#FF9F00",
-          800: "#E68A00",
-          900: "#B36B00",
+          50: "var(--primary-50)",
+          100: "var(--primary-100)",
+          200: "var(--primary-200)",
+          300: "var(--primary-300)",
+          400: "var(--primary-400)",
+          500: "var(--primary-500)",
+          600: "var(--primary-600)",
+          700: "var(--primary-700)",
+          800: "var(--primary-800)",
+          900: "var(--primary-900)",
         },
       },
     },
   },
+  plugins: [require("tailwindcss-animate")],
 };
+
 export default config;
 ```
 

package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-radio-group": "^1.2.3",
+    "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

packages/ui/Form/Select.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown } from "lucide-react";
+import React from "react";
+
+const Select = SelectPrimitive.Root;
+
+const SelectTrigger = ({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.SelectTriggerProps) => {
+  return (
+    <SelectPrimitive.Trigger
+      className={cn(
+        "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",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDown className="ml-2 h-4 w-4" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+};
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectIcon = SelectPrimitive.Icon;
+
+const SelectContent = ({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: SelectPrimitive.SelectContentProps) => {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        className={cn(
+          "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",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectPrimitive.Viewport
+          className={cn(
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+};
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectItem = ({
+  className,
+  children,
+  ...props
+}: SelectPrimitive.SelectItemProps) => (
+  <SelectPrimitive.Item
+    className={cn(
+      "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",
+      className
+    )}
+    {...props}
+  >
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4 text-foreground" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+  </SelectPrimitive.Item>
+);
+const SelectLabel = SelectPrimitive.Label;
+const SelectSeparator = SelectPrimitive.Separator;
+
+const SelectObj = Object.assign(Select, {
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Icon: SelectIcon,
+  Content: SelectContent,
+  Group: SelectGroup,
+  Item: SelectItem,
+  Label: SelectLabel,
+  Separator: SelectSeparator,
+});
+
+export { SelectObj as Select };

packages/ui/Form/index.tsx

@@ -2,3 +2,4 @@ export * from "./Input";
 export * from "./Textarea";
 export * from "./Checkbox";
 export * from "./Radio";
+export * from "./Select";