Merge pull request #39 from Logging-Stuff/radio

✅ Radio

Author: ariflogs

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

@@ -15,6 +15,7 @@ import {
   TabsTriggerList,
 } from "@/packages/ui";
 import { Card } from "@/packages/ui/Cards/Card";
+import { RadioGroup } from "@/packages/ui/Form/Radio";
 import BadgeStyleVariants from "@/preview/components/badge-style-variants";
 import TestimonialCard from "@/preview/components/card-style-testimonial";
 import { CheckCircle } from "lucide-react";
@@ -41,6 +42,14 @@ export default function page() {
         <Checkbox size="lg" />
       </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>
+      </div>
+
       <div className="flex items-center space-x-4">
         <Avatar>
           <Avatar.Image src="/images/avatar.jpeg" alt="Arif Logs" />

config/components.ts

@@ -1,6 +1,21 @@
 import { lazy } from "react";
 
-export const componentConfig = {
+export const componentConfig: {
+  core: {
+    [key: string]: {
+      name: string;
+      filePath: string;
+      preview?: React.LazyExoticComponent<() => JSX.Element>;
+    };
+  };
+  examples: {
+    [key: string]: {
+      name: string;
+      filePath: string;
+      preview: React.LazyExoticComponent<() => JSX.Element>;
+    };
+  };
+} = {
   core: {
     accordion: {
       name: "accordion",
@@ -38,6 +53,10 @@ export const componentConfig = {
       name: "menu",
       filePath: "packages/ui/Menu/Menu.tsx",
     },
+    radio: {
+      name: "radio",
+      filePath: "packages/ui/Form/Radio.tsx",
+    },
     text: {
       name: "text",
       filePath: "packages/ui/Text/Text.tsx",
@@ -163,9 +182,11 @@ export const componentConfig = {
       filePath: "preview/components/checkbox-style-sizes.tsx",
       preview: lazy(() => import("@/preview/components/checkbox-style-sizes")),
     },
-    "dropdown-style-default": {
-      name: "dropdown-style-default",
-    },
+    // "dropdown-style-default": {
+    //   name: "dropdown-style-default",
+    //   filePath: "preview/components/dropdown-style-default.tsx",
+    //   preview: lazy(() => import("@/preview/components/dropdown-style-default")),
+    // },
     "input-style-default": {
       name: "input-style-default",
       filePath: "preview/components/input-style-default.tsx",
@@ -176,6 +197,21 @@ export const componentConfig = {
       filePath: "preview/components/menu-style-default.tsx",
       preview: lazy(() => import("@/preview/components/menu-style-default")),
     },
+    "radio-style-default": {
+      name: "radio-style-default",
+      filePath: "preview/components/radio-style-default.tsx",
+      preview: lazy(() => import("@/preview/components/radio-style-default")),
+    },
+    "radio-style-variants": {
+      name: "radio-style-variants",
+      filePath: "preview/components/radio-style-variants.tsx",
+      preview: lazy(() => import("@/preview/components/radio-style-variants")),
+    },
+    "radio-style-sizes": {
+      name: "radio-style-sizes",
+      filePath: "preview/components/radio-style-sizes.tsx",
+      preview: lazy(() => import("@/preview/components/radio-style-sizes")),
+    },
     "textarea-style-default": {
       name: "textarea-style-default",
       filePath: "preview/components/textarea-style-default.tsx",

config/navigation.ts

@@ -27,6 +27,7 @@ export const navConfig: INavigationConfig = {
         { title: "Dialog", href: `${componentsRoute}/dialog` },
         { title: "Input", href: `${componentsRoute}/input` },
         { title: "Menu", href: `${componentsRoute}/menu` },
+        { title: "Radio", href: `${componentsRoute}/radio`, tag: "New" },
         { title: "Tab", href: `${componentsRoute}/tab` },
         { title: "Textarea", href: `${componentsRoute}/textarea` },
         { title: "Text", href: `${componentsRoute}/text` },

content/docs/components/radio.mdx

@@ -0,0 +1,42 @@
+---
+title: Radio
+description: Sometimes you need to pick multiple options! That's where the Radio component comes into play.
+lastUpdated: 20 Feb, 2024
+links:
+  api_reference: https://www.radix-ui.com/primitives/docs/components/radio-group#api-reference
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Form/Radio.tsx
+---
+
+<ComponentShowcase name="radio-style-default" />
+<br />
+<br />
+
+## Installation
+
+#### 1. Install dependencies:
+
+```sh
+npm install @radix-ui/react-radio-group class-variance-authority
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="radio" />
+<br />
+<br />
+
+## Examples
+
+### Variants
+
+<ComponentShowcase name="radio-style-variants" />
+<br />
+<br />
+
+### Sizes
+
+<ComponentShowcase name="radio-style-sizes" />
+<br />
+<br />

package.json

@@ -15,6 +15,7 @@
     "@radix-ui/react-checkbox": "^1.1.4",
     "@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-visually-hidden": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

packages/ui/Form/Checkbox.tsx

@@ -6,7 +6,7 @@ import { Check } from "lucide-react";
 const checkboxVariants = cva("border-black border-2", {
   variants: {
     variant: {
-      default: " data-[state=checked]:bg-primary-400",
+      default: " data-[state=checked]:bg-primary-500",
       outline: "",
       solid: "data-[state=checked]:bg-black *:text-white",
     },

packages/ui/Form/Radio.tsx

@@ -0,0 +1,82 @@
+import { cn } from "@/lib/utils";
+import * as RadioPrimitive from "@radix-ui/react-radio-group";
+import { cva, VariantProps } from "class-variance-authority";
+
+const radioVariants = cva("border-black border-2", {
+  variants: {
+    variant: {
+      default: "",
+      outline: "",
+      solid: "",
+    },
+    size: {
+      sm: "h-4 w-4",
+      md: "h-5 w-5",
+      lg: "h-6 w-6",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+  },
+});
+
+const radioIndicatorVariants = cva("flex ", {
+  variants: {
+    variant: {
+      default: "bg-primary-500 border-2 border-black",
+      outline: "border-2 border-black",
+      solid: "bg-black",
+    },
+    size: {
+      sm: "h-2 w-2",
+      md: "h-2.5 w-2.5",
+      lg: "h-3.5 w-3.5",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+  },
+});
+
+interface RadioGroupProps
+  extends React.ComponentProps<typeof RadioPrimitive.Root> {}
+
+export const RadioGroupRoot = ({ className, ...props }: RadioGroupProps) => (
+  <RadioPrimitive.Root className={cn("grid gap-2", className)} {...props} />
+);
+
+interface RadioProps
+  extends React.ComponentProps<typeof RadioPrimitive.Item>,
+    VariantProps<typeof radioVariants> {}
+
+export const RadioItem = ({
+  children,
+  className,
+  size,
+  variant,
+  ...props
+}: RadioProps) => (
+  <RadioPrimitive.Item
+    {...props}
+    className={cn(
+      radioVariants({
+        size,
+        variant,
+      }),
+      className
+    )}
+  >
+    <RadioPrimitive.Indicator className="flex justify-center items-center">
+      <span className={radioIndicatorVariants({ size, variant })}></span>
+    </RadioPrimitive.Indicator>
+    {children}
+  </RadioPrimitive.Item>
+);
+
+const RadioComponent = Object.assign(RadioGroupRoot, {
+  Item: RadioItem,
+});
+
+export { RadioComponent as RadioGroup };

packages/ui/Form/index.tsx

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