From d46fc3ddff2a06553f6b239eb8a0a361157a8b62 Mon Sep 17 00:00:00 2001 From: ariflogs Date: Thu, 7 Nov 2024 18:13:24 +0600 Subject: [PATCH 1/4] =?UTF-8?q?core=20menu=20component=20=E2=9C=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/(sink)/demo/components/page.tsx | 21 +++ package.json | 1 + packages/ui/Buttons/Button.tsx | 3 +- packages/ui/Cards/Card.tsx | 1 - packages/ui/Menu/Menu.tsx | 41 ++++++ packages/ui/Menu/index.ts | 1 + packages/ui/index.ts | 1 + pnpm-lock.yaml | 190 ++++++++++++++++++++++++++++ 8 files changed, 257 insertions(+), 2 deletions(-) create mode 100644 packages/ui/Menu/Menu.tsx create mode 100644 packages/ui/Menu/index.ts diff --git a/app/(sink)/demo/components/page.tsx b/app/(sink)/demo/components/page.tsx index dbaaa0a..b29c5b7 100644 --- 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,26 @@ export default function page() { + +
+ + + + + {/* + + */} + + Menu Item 1 + Menu Item 2 + Menu Item 3 + + +
+ +
); } diff --git a/package.json b/package.json index ec926f7..a64cc8c 100644 --- 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 index 924b767..2ac1fe1 100644 --- 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( forwardedRef ) => ( - {/* - - */} Menu Item 1 Menu Item 2 diff --git a/config/components.ts b/config/components.ts index 475c616..f55a60d 100644 --- 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 index 8591864..c3e9425 100644 --- 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 new file mode 100644 index 0000000..71e3e2b --- /dev/null +++ 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 +--- + + +
+
+ +## Installation + +#### 1. Install dependencies: + +```sh +npm install @radix-ui/react-dropdown-menu +``` + +
+ +#### 2. Copy the code 👇 into your project: + + + +
+
+ +## Examples + +### Default + + diff --git a/packages/ui/Menu/Menu.tsx b/packages/ui/Menu/Menu.tsx index 9f84a20..471273c 100644 --- a/packages/ui/Menu/Menu.tsx +++ b/packages/ui/Menu/Menu.tsx @@ -27,7 +27,7 @@ const Content = ({ className, ...props }: IMenuContent) => ( const MenuItem = (props: any) => ( ); diff --git a/preview/components/menu-style-default.tsx b/preview/components/menu-style-default.tsx new file mode 100644 index 0000000..97f63f1 --- /dev/null +++ b/preview/components/menu-style-default.tsx @@ -0,0 +1,16 @@ +import { Button, Menu } from "@/packages/ui"; + +export default function MenuDefault() { + return ( + + + + + + Menu Item 1 + Menu Item 2 + Menu Item 3 + + + ); +} From ae6b7c86579807cf7b4f9ad9e3c9360836a9b056 Mon Sep 17 00:00:00 2001 From: ariflogs Date: Thu, 7 Nov 2024 22:26:31 +0600 Subject: [PATCH 3/4] v1.0.8 --- .github/workflows/deploy.yml | 4 ++-- app/(marketing)/page.tsx | 20 ++++++++++--------- infra/docker-compose.prod.yml | 2 +- .../components/avatar-style-circle-sizes.tsx | 2 +- 4 files changed, 15 insertions(+), 13 deletions(-) diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 0a9b785..29a5954 100644 --- a/.github/workflows/deploy.yml +++ b/.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 diff --git a/app/(marketing)/page.tsx b/app/(marketing)/page.tsx index 1d44b31..66a510d 100644 --- a/app/(marketing)/page.tsx +++ b/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! ✨ -
+
Button - +
+ + +
Badge @@ -77,22 +81,20 @@ export default function Home() {
Avatar - + +
+
+ Basic Card +
Input
-
-
Textarea