From 8a982281b50638df384ad0e75c9aa1a94d631196 Mon Sep 17 00:00:00 2001 From: ariflogs Date: Fri, 11 Apr 2025 22:16:05 +0600 Subject: [PATCH 1/2] moved components from ui -> retroui --- .github/workflows/deploy.yml | 12 +- .prettierrc | 5 + CONTRIBUTING.md | 4 +- README.md | 2 +- app/(docs)/docs/[[...slug]]/page.tsx | 2 +- app/(marketing)/blogs/[slug]/page.tsx | 4 +- app/(marketing)/blogs/page.tsx | 2 +- app/(marketing)/page.tsx | 6 +- app/(sink)/demo/components/page.tsx | 4 +- app/global.css | 7 +- app/layout.tsx | 2 +- app/robots.ts | 14 +- app/sitemap.ts | 4 +- components/CodeBlock.tsx | 4 +- components/ComponentShowcase.tsx | 4 +- components/HamburgerMenu.tsx | 2 +- components/JoinNewsletter.tsx | 6 +- components/MDX.tsx | 4 +- components/SideNav.tsx | 2 +- components/Testimonial.tsx | 2 +- components/TopNav.tsx | 2 +- components/index.ts | 2 +- components/{ui => retroui}/Accordion.tsx | 4 +- components/{ui => retroui}/Alert.tsx | 2 +- components/{ui => retroui}/Avatar.tsx | 4 +- components/{ui => retroui}/Badge.tsx | 0 components/{ui => retroui}/BasicCard.tsx | 0 components/{ui => retroui}/Button.tsx | 6 +- components/{ui => retroui}/Card.tsx | 2 +- components/{ui => retroui}/Checkbox.tsx | 2 +- components/{ui => retroui}/Dialog.tsx | 12 +- components/{ui => retroui}/IconButton.tsx | 0 components/{ui => retroui}/Input.tsx | 0 components/{ui => retroui}/Label.tsx | 2 +- components/{ui => retroui}/Login.tsx | 0 components/{ui => retroui}/Menu.tsx | 4 +- components/{ui => retroui}/ProductCard.tsx | 0 components/{ui => retroui}/Progress.tsx | 2 +- components/{ui => retroui}/Radio.tsx | 2 +- components/{ui => retroui}/Select.tsx | 8 +- components/{ui => retroui}/Switch.tsx | 4 +- components/{ui => retroui}/Tab.tsx | 2 +- components/{ui => retroui}/Text.tsx | 0 components/retroui/Textarea.tsx | 17 + components/{ui => retroui}/index.ts | 0 components/ui/Textarea.tsx | 17 - config/components.ts | 60 +- content/blogs/top-5-react-ui-library.mdx | 10 +- content/docs/components/accordion.mdx | 4 +- content/docs/components/alert.mdx | 2 +- content/docs/components/avatar.mdx | 2 +- content/docs/components/badge.mdx | 2 +- content/docs/components/button.mdx | 6 +- content/docs/components/card.mdx | 5 +- content/docs/components/checkbox.mdx | 4 +- content/docs/components/dialog.mdx | 6 +- content/docs/components/input.mdx | 3 +- content/docs/components/menu.mdx | 4 +- content/docs/components/progress.mdx | 9 +- content/docs/components/radio.mdx | 4 +- content/docs/components/select.mdx | 4 +- content/docs/components/switch.mdx | 4 +- content/docs/components/text.mdx | 2 +- content/docs/index.mdx | 18 +- content/docs/install/index.mdx | 21 +- content/docs/install/nextjs.mdx | 17 +- contentlayer.config.ts | 4 +- lib/registry.ts | 2 +- package.json | 3 +- pnpm-lock.yaml | 8747 +++++++++++------ postcss.config.mjs | 2 +- .../components/accordion-style-default.tsx | 2 +- preview/components/alert-style-all-status.tsx | 2 +- preview/components/alert-style-default.tsx | 2 +- preview/components/alert-style-solid.tsx | 2 +- preview/components/alert-style-with-icon.tsx | 2 +- .../avatar-style-circle-fallbacks.tsx | 2 +- .../components/avatar-style-circle-sizes.tsx | 2 +- preview/components/avatar-style-circle.tsx | 2 +- preview/components/badge-style-default.tsx | 2 +- preview/components/badge-style-rounded.tsx | 2 +- preview/components/badge-style-sizes.tsx | 2 +- preview/components/badge-style-variants.tsx | 2 +- preview/components/button-style-default.tsx | 2 +- preview/components/button-style-link.tsx | 2 +- preview/components/button-style-outline.tsx | 2 +- preview/components/button-style-secondary.tsx | 2 +- preview/components/button-style-with-icon.tsx | 2 +- preview/components/card-style-commerce.tsx | 3 +- preview/components/card-style-default.tsx | 2 +- preview/components/card-style-testimonial.tsx | 4 +- preview/components/checkbox-style-default.tsx | 3 +- preview/components/checkbox-style-sizes.tsx | 2 +- .../components/checkbox-style-variants.tsx | 2 +- preview/components/dialog-style-default.tsx | 4 +- .../components/dialog-style-width-variant.tsx | 4 +- .../components/dialog-style-with-footer.tsx | 4 +- preview/components/dialog-style-with-form.tsx | 5 +- preview/components/input-style-error.tsx | 3 +- preview/components/input-style-with-label.tsx | 2 +- preview/components/menu-style-default.tsx | 3 +- preview/components/progress-style-default.tsx | 2 +- preview/components/radio-style-default.tsx | 2 +- preview/components/radio-style-sizes.tsx | 2 +- preview/components/radio-style-variants.tsx | 2 +- preview/components/select-style-default.tsx | 2 +- preview/components/switch-style-default.tsx | 2 +- preview/components/switch-style-disabled.tsx | 2 +- preview/components/text-headings.tsx | 2 +- preview/components/typography-p.tsx | 2 +- public/r/accordion-style-default.json | 4 +- public/r/accordion.json | 4 +- public/r/alert-style-all-status.json | 4 +- public/r/alert-style-default.json | 4 +- public/r/alert-style-solid.json | 4 +- public/r/alert-style-with-icon.json | 4 +- public/r/alert.json | 4 +- public/r/avatar-style-circle-sizes.json | 4 +- public/r/avatar-style-circle.json | 4 +- public/r/avatar-style-fallbacks.json | 4 +- public/r/avatar.json | 4 +- public/r/badge-style-default.json | 4 +- public/r/badge-style-sizes.json | 4 +- public/r/badge-style-variants.json | 4 +- public/r/badge.json | 2 +- public/r/button-style-default.json | 20 +- public/r/button-style-link.json | 4 +- public/r/button-style-outline.json | 17 + public/r/button-style-secondary.json | 4 +- public/r/button-style-with-icon.json | 4 +- public/r/button.json | 4 +- public/r/card-style-commerce.json | 4 +- public/r/card-style-default.json | 4 +- public/r/card-style-testimonial.json | 4 +- public/r/card.json | 4 +- public/r/checkbox-style-default.json | 4 +- public/r/checkbox-style-toggle.json | 4 +- public/r/checkbox.json | 4 +- public/r/dialog-style-default.json | 4 +- public/r/dialog-style-width-variant.json | 4 +- public/r/dialog-style-with-footer.json | 4 +- public/r/dialog-style-with-form.json | 4 +- public/r/dialog.json | 4 +- public/r/input-style-default.json | 2 +- public/r/input-style-error.json | 4 +- public/r/input-style-with-label.json | 4 +- public/r/input.json | 2 +- public/r/label.json | 4 +- public/r/menu-style-default.json | 4 +- public/r/menu.json | 4 +- public/r/progress-style-default.json | 4 +- public/r/radio-style-default.json | 4 +- public/r/radio-style-sizes.json | 4 +- public/r/radio-style-variants.json | 4 +- public/r/radio.json | 4 +- public/r/select-style-default.json | 4 +- public/r/select.json | 4 +- public/r/switch-style-default.json | 4 +- public/r/switch-style-disabled.json | 4 +- public/r/switch.json | 4 +- public/r/tab-style-default.json | 2 +- public/r/tab.json | 4 +- public/r/text-headings.json | 4 +- public/r/text.json | 2 +- public/r/textarea-style-default.json | 2 +- public/r/textarea.json | 4 +- public/r/typography-p.json | 4 +- registry.json | 1910 ++-- 168 files changed, 7084 insertions(+), 4295 deletions(-) create mode 100644 .prettierrc rename components/{ui => retroui}/Accordion.tsx (98%) rename components/{ui => retroui}/Alert.tsx (97%) rename components/{ui => retroui}/Avatar.tsx (97%) rename components/{ui => retroui}/Badge.tsx (100%) rename components/{ui => retroui}/BasicCard.tsx (100%) rename components/{ui => retroui}/Button.tsx (98%) rename components/{ui => retroui}/Card.tsx (98%) rename components/{ui => retroui}/Checkbox.tsx (98%) rename components/{ui => retroui}/Dialog.tsx (99%) rename components/{ui => retroui}/IconButton.tsx (100%) rename components/{ui => retroui}/Input.tsx (100%) rename components/{ui => retroui}/Label.tsx (97%) rename components/{ui => retroui}/Login.tsx (100%) rename components/{ui => retroui}/Menu.tsx (97%) rename components/{ui => retroui}/ProductCard.tsx (100%) rename components/{ui => retroui}/Progress.tsx (97%) rename components/{ui => retroui}/Radio.tsx (99%) rename components/{ui => retroui}/Select.tsx (97%) rename components/{ui => retroui}/Switch.tsx (93%) rename components/{ui => retroui}/Tab.tsx (98%) rename components/{ui => retroui}/Text.tsx (100%) create mode 100644 components/retroui/Textarea.tsx rename components/{ui => retroui}/index.ts (100%) delete mode 100644 components/ui/Textarea.tsx create mode 100644 public/r/button-style-outline.json diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 8b50a49..383c979 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -4,7 +4,7 @@ on: release: types: - published - + jobs: build-and-deploy: runs-on: ubuntu-latest @@ -12,10 +12,10 @@ jobs: steps: - name: Check out the repository uses: actions/checkout@v4 - + - name: Setup Docker Buildx uses: docker/setup-buildx-action@v3 - + - name: DockerHub login uses: docker/login-action@v3 with: @@ -26,7 +26,7 @@ jobs: run: | docker build -t devarifhossain/retroui:1.1.9 ./ docker push devarifhossain/retroui:1.1.9 - + # - name: Set up SSH # uses: webfactory/ssh-agent@v0.9.0 # with: @@ -35,7 +35,7 @@ jobs: # - name: Add VPS to known_hosts # run: | # ssh-keyscan -H ${{ secrets.VPS_HOST }} >> ~/.ssh/known_hosts - + # - name: Deploy to VPS # run: | - # ssh ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} "cd /root/retroui && git pull && docker compose -f ./infra/docker-compose.prod.yml up web --build -d" \ No newline at end of file + # ssh ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} "cd /root/retroui && git pull && docker compose -f ./infra/docker-compose.prod.yml up web --build -d" diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..7935eb2 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "tabWidth": 2, + "semi": true, + "printWidth": 80 +} diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 25b826a..8cb1a4e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -37,7 +37,7 @@ Thank you for your interest in contributing to RetroUI 🙏. I hope this guide t ## Adding a New Component -1. Create the main component in `/components/ui/NewComponent/NewComponent.tsx` +1. Create the main component in `/components/retroui/NewComponent/NewComponent.tsx` ```ts export function NewComponent() { @@ -45,7 +45,7 @@ export function NewComponent() { } ``` -2. Export your component in `/components/ui/NewComponent/index.ts` and `/components/ui/index.ts` +2. Export your component in `/components/retroui/NewComponent/index.ts` and `/components/retroui/index.ts` ```ts export * from "./NewComponent"; diff --git a/README.md b/README.md index 609c949..151ad3d 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ RetroUI is a retro-styled Tailwind CSS component library for modern web apps. ### [Why Another UI Library?](https://www.youtube.com/watch?v=7goHwy6k3gU) -### [Documentation](https://retroui.dev/docs) +### [Documentation](https://retroui.vercel.app/docs) ### [Contributing Guide](./CONTRIBUTING.md) diff --git a/app/(docs)/docs/[[...slug]]/page.tsx b/app/(docs)/docs/[[...slug]]/page.tsx index 0fd1f35..a83fb41 100644 --- a/app/(docs)/docs/[[...slug]]/page.tsx +++ b/app/(docs)/docs/[[...slug]]/page.tsx @@ -3,7 +3,7 @@ import { allDocs } from "contentlayer/generated"; import { notFound } from "next/navigation"; import { format } from "date-fns"; import MDX from "@/components/MDX"; -import { Text } from "@/components/ui"; +import { Text } from "@/components/retroui/Text"; import { Metadata } from "next"; import { MoveRightIcon, MoveUpRightIcon } from "lucide-react"; diff --git a/app/(marketing)/blogs/[slug]/page.tsx b/app/(marketing)/blogs/[slug]/page.tsx index 204a7e7..682f2c1 100644 --- a/app/(marketing)/blogs/[slug]/page.tsx +++ b/app/(marketing)/blogs/[slug]/page.tsx @@ -3,7 +3,7 @@ import { allBlogs } from "contentlayer/generated"; import { notFound } from "next/navigation"; import { format } from "date-fns"; import MDX from "@/components/MDX"; -import { Avatar, Badge, Button, Text } from "@/components/ui"; +import { Avatar, Badge, Button, Text } from "@/components/retroui"; import { Metadata } from "next"; import { MoveRightIcon, MoveUpRightIcon } from "lucide-react"; import Image from "next/image"; @@ -94,7 +94,7 @@ export default function page({ params }: IProps) { - ) + ), ); Button.displayName = "Button"; diff --git a/components/ui/Card.tsx b/components/retroui/Card.tsx similarity index 98% rename from components/ui/Card.tsx rename to components/retroui/Card.tsx index 7decfae..4a90db3 100644 --- a/components/ui/Card.tsx +++ b/components/retroui/Card.tsx @@ -11,7 +11,7 @@ const Card = ({ className, ...props }: ICardProps) => {
diff --git a/components/ui/Checkbox.tsx b/components/retroui/Checkbox.tsx similarity index 98% rename from components/ui/Checkbox.tsx rename to components/retroui/Checkbox.tsx index 46324b1..b39c5f1 100644 --- a/components/ui/Checkbox.tsx +++ b/components/retroui/Checkbox.tsx @@ -38,7 +38,7 @@ export const Checkbox = ({ size, variant, }), - className + className, )} {...props} > diff --git a/components/ui/Dialog.tsx b/components/retroui/Dialog.tsx similarity index 99% rename from components/ui/Dialog.tsx rename to components/retroui/Dialog.tsx index 5811b72..ed02988 100644 --- a/components/ui/Dialog.tsx +++ b/components/retroui/Dialog.tsx @@ -27,7 +27,7 @@ const overlayVariants = cva( defaultVariants: { variant: "default", }, - } + }, ); interface IDialogBackgroupProps @@ -45,7 +45,7 @@ const DialogBackdrop = React.forwardRef( {...props} /> ); - } + }, ); DialogBackdrop.displayName = "DialogBackdrop"; @@ -80,7 +80,7 @@ const dialogVariants = cva( defaultVariants: { size: "auto", }, - } + }, ); interface IDialogContentProps @@ -114,7 +114,7 @@ const DialogContent = React.forwardRef( ); - } + }, ); DialogContent.displayName = "DialogContent"; @@ -146,7 +146,7 @@ const dialogFooterVariants = cva( defaultVariants: { position: "fixed", }, - } + }, ); export interface IDialogFooterProps @@ -186,7 +186,7 @@ const dialogHeaderVariants = cva( variant: "default", position: "static", }, - } + }, ); const DialogHeaderDefaultLayout = ({ children }: { children: ReactNode }) => { diff --git a/components/ui/IconButton.tsx b/components/retroui/IconButton.tsx similarity index 100% rename from components/ui/IconButton.tsx rename to components/retroui/IconButton.tsx diff --git a/components/ui/Input.tsx b/components/retroui/Input.tsx similarity index 100% rename from components/ui/Input.tsx rename to components/retroui/Input.tsx diff --git a/components/ui/Label.tsx b/components/retroui/Label.tsx similarity index 97% rename from components/ui/Label.tsx rename to components/retroui/Label.tsx index 7fed06a..0fe73f0 100644 --- a/components/ui/Label.tsx +++ b/components/retroui/Label.tsx @@ -5,7 +5,7 @@ import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; const labelVariants = cva( - "leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" + "leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", ); const Label = ({ diff --git a/components/ui/Login.tsx b/components/retroui/Login.tsx similarity index 100% rename from components/ui/Login.tsx rename to components/retroui/Login.tsx diff --git a/components/ui/Menu.tsx b/components/retroui/Menu.tsx similarity index 97% rename from components/ui/Menu.tsx rename to components/retroui/Menu.tsx index f2b5e1d..dc026df 100644 --- a/components/ui/Menu.tsx +++ b/components/retroui/Menu.tsx @@ -17,7 +17,7 @@ const Content = ({ className, ...props }: IMenuContent) => ( align="start" className={cn( "bg-white border-2 border-black shadow-md absolute top-2 min-w-20", - className + className, )} {...props} /> @@ -32,7 +32,7 @@ const MenuItem = React.forwardRef< ref={ref} className={cn( "relative flex cursor-default select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden transition-colors hover:bg-primary focus:bg-primary data-disabled:pointer-events-none data-disabled:opacity-50", - className + className, )} {...props} /> diff --git a/components/ui/ProductCard.tsx b/components/retroui/ProductCard.tsx similarity index 100% rename from components/ui/ProductCard.tsx rename to components/retroui/ProductCard.tsx diff --git a/components/ui/Progress.tsx b/components/retroui/Progress.tsx similarity index 97% rename from components/ui/Progress.tsx rename to components/retroui/Progress.tsx index bdc74d4..cf4d8cc 100644 --- a/components/ui/Progress.tsx +++ b/components/retroui/Progress.tsx @@ -13,7 +13,7 @@ const Progress = React.forwardRef< ref={ref} className={cn( "relative h-4 w-full overflow-hidden bg-background border-2 border-black", - className + className, )} {...props} > diff --git a/components/ui/Radio.tsx b/components/retroui/Radio.tsx similarity index 99% rename from components/ui/Radio.tsx rename to components/retroui/Radio.tsx index 9923a35..a52f36f 100644 --- a/components/ui/Radio.tsx +++ b/components/retroui/Radio.tsx @@ -65,7 +65,7 @@ export const RadioItem = ({ size, variant, }), - className + className, )} > diff --git a/components/ui/Select.tsx b/components/retroui/Select.tsx similarity index 97% rename from components/ui/Select.tsx rename to components/retroui/Select.tsx index 5e2d6b5..3677ffd 100644 --- a/components/ui/Select.tsx +++ b/components/retroui/Select.tsx @@ -16,7 +16,7 @@ const SelectTrigger = ({ @@ -45,7 +45,7 @@ const SelectContent = ({ "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 + className, )} position={position} {...props} @@ -53,7 +53,7 @@ const SelectContent = ({ {children} @@ -73,7 +73,7 @@ const SelectItem = ({ diff --git a/components/ui/Switch.tsx b/components/retroui/Switch.tsx similarity index 93% rename from components/ui/Switch.tsx rename to components/retroui/Switch.tsx index f86fd75..d52d67e 100644 --- a/components/ui/Switch.tsx +++ b/components/retroui/Switch.tsx @@ -9,13 +9,13 @@ const Switch = ({ className, ...props }: SwitchPrimitives.SwitchProps) => ( diff --git a/components/ui/Tab.tsx b/components/retroui/Tab.tsx similarity index 98% rename from components/ui/Tab.tsx rename to components/retroui/Tab.tsx index f635f49..27d3d47 100644 --- a/components/ui/Tab.tsx +++ b/components/retroui/Tab.tsx @@ -36,7 +36,7 @@ const TabsTrigger = ({ children, className, ...props }: ITabsTrigger) => { diff --git a/components/ui/Text.tsx b/components/retroui/Text.tsx similarity index 100% rename from components/ui/Text.tsx rename to components/retroui/Text.tsx diff --git a/components/retroui/Textarea.tsx b/components/retroui/Textarea.tsx new file mode 100644 index 0000000..77cb522 --- /dev/null +++ b/components/retroui/Textarea.tsx @@ -0,0 +1,17 @@ +import React from "react"; + +export function Textarea({ + type = "text", + placeholder = "Enter text...", + className = "", + ...props +}) { + return ( +