Merge branch 'main' of github.com:ariflogs/retroui

ariflogs · ariflogs · commit f891aa722400 · 2024-12-02T01:24:29.000+06:00
diff --git a/app/(sink)/demo/components/page.tsx b/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>
   );
 }
diff --git a/config/components.ts b/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",
diff --git a/config/navigation.ts b/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` },
       ],
     },
     {
diff --git a/content/docs/components/menu.mdx b/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" />
diff --git a/package.json b/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",
diff --git a/packages/ui/Buttons/Button.tsx b/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}
     >
diff --git a/packages/ui/Cards/Card.tsx b/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;
diff --git a/packages/ui/Menu/Menu.tsx b/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 };
diff --git a/packages/ui/Menu/index.ts b/packages/ui/Menu/index.ts
@@ -0,0 +1 @@
+export * from "./Menu";
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
@@ -8,3 +8,4 @@ export * from "./Avatars";
 export * from "./Badges";
 export * from "./Tabs";
 export * from "./Dialog";
+export * from "./Menu";
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/preview/components/avatar-style-circle-sizes.tsx b/preview/components/avatar-style-circle-sizes.tsx
diff --git a/preview/components/menu-style-default.tsx b/preview/components/menu-style-default.tsx
