Merge pull request #31 from Logging-Stuff/menu

@coderabbitai

Author: ariflogs

.github/workflows/deploy.yml

@@ -24,8 +24,8 @@ jobs:
 
       - name: Build and push to DockerHub
         run: |
-          docker build -t devarifhossain/retroui:1.0.7 ./
-          docker push devarifhossain/retroui:1.0.7
+          docker build -t devarifhossain/retroui:1.0.8 ./
+          docker push devarifhossain/retroui:1.0.8
     
       - name: Set up SSH
         uses: webfactory/ssh-agent@v0.9.0

app/(marketing)/page.tsx

@@ -8,6 +8,7 @@ import {
   Textarea,
 } from "@/packages/ui";
 import AccordionStyleDefault from "@/preview/components/accordion-style-default";
+import AvatarStyleCircleSizes from "@/preview/components/avatar-style-circle-sizes";
 import BadgeStyleVariants from "@/preview/components/badge-style-variants";
 import { GithubIcon, MessageCircle } from "lucide-react";
 import Image from "next/image";
@@ -64,10 +65,13 @@ export default function Home() {
           Our components look both old school and modern! ✨
         </Text>
 
-        <div className="grid gap-4 grid-cols-2 lg:grid-cols-4 mb-8">
+        <div className="grid gap-8 grid-cols-1 lg:grid-cols-2 mb-8">
           <div className="space-y-4">
             <Text as="h4">Button</Text>
-            <Button>Click Me</Button>
+            <div className="flex space-x-4">
+              <Button>Click Me</Button>
+              <Button variant="outline">Click Me</Button>
+            </div>
           </div>
           <div className="space-y-4">
             <Text as="h4">Badge</Text>
@@ -77,22 +81,20 @@ export default function Home() {
           </div>
           <div className="space-y-4">
             <Text as="h4">Avatar</Text>
-            <Avatar />
+            <AvatarStyleCircleSizes />
+          </div>
+          <div className="space-y-4">
+            <Text as="h4">Basic Card</Text>
+            <BasicCard />
           </div>
           <div className="space-y-4">
             <Text as="h4">Input</Text>
             <Input />
           </div>
-        </div>
-        <div className="grid gap-8 grid-cols-1 lg:grid-cols-3">
           <div className="space-y-4">
             <Text as="h4">Textarea</Text>
             <Textarea />
           </div>
-          <div className="space-y-4">
-            <Text as="h4">Basic Card</Text>
-            <BasicCard />
-          </div>
           <div className="space-y-4">
             <Text as="h4">Accordion</Text>
             <AccordionStyleDefault />

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

@@ -6,6 +6,7 @@ import {
   Avatar,
   Badge,
   Button,
+  Menu,
   Tabs,
   TabsContent,
   TabsPanels,
@@ -99,6 +100,21 @@ export default function page() {
           </div>
         </Alert>
       </div>
+
+      <div>
+        <Menu>
+          <Menu.Trigger asChild>
+            <Button>Menu</Button>
+          </Menu.Trigger>
+          <Menu.Content className="min-w-36">
+            <Menu.Item>Menu Item 1</Menu.Item>
+            <Menu.Item>Menu Item 2</Menu.Item>
+            <Menu.Item>Menu Item 3</Menu.Item>
+          </Menu.Content>
+        </Menu>
+      </div>
+
+      <div className="h-36"></div>
     </div>
   );
 }

config/components.ts

@@ -26,14 +26,19 @@ export const componentConfig = {
       name: "card",
       filePath: "packages/ui/Cards/Card.tsx",
     },
-    text: {
-      name: "text",
-      filePath: "packages/ui/Text/Text.tsx",
-    },
+
     dialog: {
       name: "dialog",
       filePath: "packages/ui/Dialog/Dialog.tsx",
     },
+    menu: {
+      name: "menu",
+      filePath: "packages/ui/Menu/Menu.tsx",
+    },
+    text: {
+      name: "text",
+      filePath: "packages/ui/Text/Text.tsx",
+    },
   },
   examples: {
     "accordion-style-default": {
@@ -134,6 +139,11 @@ export const componentConfig = {
       filePath: "preview/components/input-style-default.tsx",
       preview: lazy(() => import("@/preview/components/input-style-default")),
     },
+    "menu-style-default": {
+      name: "menu-style-default",
+      filePath: "preview/components/menu-style-default.tsx",
+      preview: lazy(() => import("@/preview/components/menu-style-default")),
+    },
     "textarea-style-default": {
       name: "textarea-style-default",
       filePath: "preview/components/textarea-style-default.tsx",

config/navigation.ts

@@ -22,11 +22,12 @@ export const navConfig: INavigationConfig = {
         { title: "Badge", href: `${componentsRoute}/badge` },
         { title: "Button", href: `${componentsRoute}/button` },
         { title: "Card", href: `${componentsRoute}/card` },
+        { title: "Dialog", href: `${componentsRoute}/dialog` },
         { title: "Input", href: `${componentsRoute}/input` },
+        { title: "Menu", href: `${componentsRoute}/menu` },
         { title: "Tab", href: `${componentsRoute}/tab` },
         { title: "Textarea", href: `${componentsRoute}/textarea` },
         { title: "Text", href: `${componentsRoute}/text` },
-        { title: "Dialog", href: `${componentsRoute}/dialog` },
       ],
     },
     {

content/docs/components/menu.mdx

@@ -0,0 +1,35 @@
+---
+title: Menu
+description: Show your users a list of actions they can take. 📋
+lastUpdated: 19 Oct, 2024
+links:
+  api_reference: https://www.radix-ui.com/primitives/docs/components/dropdown-menu#api-reference
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/packages/ui/Menu/Menu.tsx
+---
+
+<ComponentShowcase name="menu-style-default" />
+<br />
+<br />
+
+## Installation
+
+#### 1. Install dependencies:
+
+```sh
+npm install @radix-ui/react-dropdown-menu
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="menu" />
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="menu-style-default" />

infra/docker-compose.prod.yml

@@ -1,6 +1,6 @@
 services:
   web:
-    image: devarifhossain/retroui:1.0.7
+    image: devarifhossain/retroui:1.0.8
     container_name: retroui
     expose:
       - "3000"

package.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-visually-hidden": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",

packages/ui/Buttons/Button.tsx

@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils";
 import { cva, VariantProps } from "class-variance-authority";
 import React, { ButtonHTMLAttributes } from "react";
 
-const buttonVariants = cva("font-head transition-all", {
+const buttonVariants = cva("font-head transition-all outline-none", {
   variants: {
     variant: {
       default:
@@ -39,6 +39,7 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
     forwardedRef
   ) => (
     <button
+      ref={forwardedRef}
       className={cn(buttonVariants({ variant, size }), className)}
       {...props}
     >

packages/ui/Cards/Card.tsx

@@ -1,7 +1,6 @@
 import { cn } from "@/lib/utils";
 import { HTMLAttributes } from "react";
 import { Text } from "../Text";
-import { Content } from "next/font/google";
 
 interface ICardProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;

packages/ui/Menu/Menu.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+import React, { ComponentPropsWithoutRef, HTMLAttributes } from "react";
+
+const Menu = DropdownMenu.Root;
+const Trigger = DropdownMenu.Trigger;
+
+interface IMenuContent
+  extends ComponentPropsWithoutRef<typeof DropdownMenu.Content> {}
+
+const Content = ({ className, ...props }: IMenuContent) => (
+  <DropdownMenu.Portal>
+    <DropdownMenu.Content
+      side="bottom"
+      align="start"
+      className={cn(
+        "bg-white border-2 border-black shadow-md absolute top-2 min-w-20",
+        className
+      )}
+      {...props}
+    />
+  </DropdownMenu.Portal>
+);
+
+const MenuItem = React.forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof DropdownMenu.Item>
+>(({ className, ...props }, ref) => (
+  <DropdownMenu.Item
+    ref={ref}
+    className={cn(
+      "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",
+      className
+    )}
+    {...props}
+  />
+));
+MenuItem.displayName = "MenuItem";
+
+const MenuComponent = Object.assign(Menu, {
+  Trigger,
+  Content,
+  Item: MenuItem,
+});
+
+export { MenuComponent as Menu };

packages/ui/Menu/index.ts

@@ -0,0 +1 @@
+export * from "./Menu";

packages/ui/index.ts

@@ -8,3 +8,4 @@ export * from "./Avatars";
 export * from "./Badges";
 export * from "./Tabs";
 export * from "./Dialog";
+export * from "./Menu";