V0 integration

.github/workflows/deploy.yml

@@ -4,18 +4,18 @@ on:
   release:
     types:
       - published
-    
+
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
 
     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"
+      #     ssh ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} "cd /root/retroui && git pull && docker compose -f ./infra/docker-compose.prod.yml up web --build -d"

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "semi": true,
+  "printWidth": 80
+}

CONTRIBUTING.md

@@ -37,15 +37,15 @@ 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() {
   return <div>This is your component.</div>;
 }
 ```
 
-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";

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";
 

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";

app/(marketing)/blogs/page.tsx

@@ -1,5 +1,5 @@
 import { allBlogs } from "@/.contentlayer/generated";
-import { Card, Text } from "@/components/ui";
+import { Card, Text } from "@/components/retroui";
 import Image from "next/image";
 import Link from "next/link";
 import React from "react";

app/(marketing)/page.tsx

@@ -8,7 +8,7 @@ import {
   Card,
   Avatar,
   Badge,
-} from "@/components/ui";
+} from "@/components/retroui";
 import AccordionStyleDefault from "@/preview/components/accordion-style-default";
 import AlertStyleDefaultIcon from "@/preview/components/alert-style-with-icon";
 import AvatarStyleCircle from "@/preview/components/avatar-style-circle-sizes";
@@ -32,7 +32,7 @@ async function getContributors(): Promise<
       headers: {
         "Content-Type": "application/json",
       },
-    }
+    },
   );
 
   const contributorsList = await request.json();
@@ -47,7 +47,7 @@ async function getContributors(): Promise<
         avatar: c.avatar_url,
         username: c.login,
         url: c.html_url,
-      })
+      }),
     ),
   ];
 }

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

@@ -15,8 +15,8 @@ import {
   TabsPanels,
   TabsTrigger,
   TabsTriggerList,
-} from "@/components/ui";
-import { Card } from "@/components/ui/Card";
+} from "@/components/retroui";
+import { Card } from "@/components/retroui/Card";
 import BadgeStyleVariants from "@/preview/components/badge-style-variants";
 import TestimonialCard from "@/preview/components/card-style-testimonial";
 import { CheckCircle } from "lucide-react";

app/global.css

@@ -74,8 +74,11 @@
 
 .text-outlined {
   letter-spacing: 2px;
-  text-shadow: 0px 0px 0 var(--color-primary), 0px 0px 0 var(--color-primary),
-    4px 4px 0 var(--color-primary), 4px 4px 0 var(--color-primary);
+  text-shadow:
+    0px 0px 0 var(--color-primary),
+    0px 0px 0 var(--color-primary),
+    4px 4px 0 var(--color-primary),
+    4px 4px 0 var(--color-primary);
 }
 
 /* Syntax Highlighting stuff */

app/robots.ts

@@ -1,11 +1,11 @@
-import type { MetadataRoute } from 'next'
- 
+import type { MetadataRoute } from "next";
+
 export default function robots(): MetadataRoute.Robots {
   return {
     rules: {
-      userAgent: '*',
-      allow: '/',
+      userAgent: "*",
+      allow: "/",
     },
-    sitemap: 'https://retroui.dev/sitemap.xml',
-  }
-}   
+    sitemap: "https://retroui.dev/sitemap.xml",
+  };
+}

components/CodeBlock.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui";
+import { Button } from "@/components/retroui";
 
 interface ICodeBlock extends React.HTMLAttributes<HTMLPreElement> {}
 
@@ -33,7 +33,7 @@ export function CodeBlock({ className, children, ...props }: ICodeBlock) {
       <pre
         className={cn(
           "overflow-x-auto rounded-sm bg-[#282A36] mt-3 mb-6 p-4",
-          className
+          className,
         )}
         {...props}
       >

components/ComponentShowcase.tsx

@@ -1,7 +1,7 @@
 import { componentConfig } from "@/config";
 import { TabGroup, TabList, TabPanels, TabPanel, Tab } from "@headlessui/react";
 import React, { HTMLAttributes } from "react";
-import { Button } from "./ui";
+import { Button } from "./retroui";
 
 interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {
   name: keyof typeof componentConfig.examples;

components/HamburgerMenu.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import SideNav from "./SideNav";
 import { AlignJustify, X } from "lucide-react";
-import { Button } from "@/components/ui";
+import { Button } from "@/components/retroui";
 
 export default function HamburgerMenu() {
   const [isOpen, setIsOpen] = useState(false);

components/JoinNewsletter.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Text, Input } from "@/components/ui";
+import { Button, Text, Input } from "@/components/retroui";
 import { useState } from "react";
 
 const INIT = "INIT";
@@ -79,7 +79,7 @@ export function JoinNewsletter() {
 
     // build body
     const formBody = `userGroup=${encodeURIComponent(
-      formStyles.userGroup
+      formStyles.userGroup,
     )}&email=${encodeURIComponent(email)}&mailingLists=`;
 
     // API request to add user to newsletter
@@ -108,7 +108,7 @@ export function JoinNewsletter() {
         // check for cloudflare error
         if (error.message === "Failed to fetch") {
           setErrorMessage(
-            "Too many signups, please try again in a little while"
+            "Too many signups, please try again in a little while",
           );
         } else if (error.message) {
           setErrorMessage(error.message);

components/MDX.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Alert, Badge, Card, Text } from "@/components/ui";
+import { Alert, Badge, Card, Text } from "@/components/retroui";
 import { useMDXComponent } from "next-contentlayer/hooks";
 import React, { AnchorHTMLAttributes, HTMLAttributes } from "react";
 import { ComponentShowcase } from "./ComponentShowcase";
@@ -83,7 +83,7 @@ const components = (type: "doc" | "blog") => ({
     <code
       className={cn(
         "relative rounded-sm bg-[#282A36] p-1 text-primary text-sm",
-        className
+        className,
       )}
       {...props}
     >

components/SideNav.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { navConfig } from "@/config/navigation";
-import { Badge, Text } from "@/components/ui";
+import { Badge, Text } from "@/components/retroui";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 

components/Testimonial.tsx

@@ -1,4 +1,4 @@
-import { Text, Card, Avatar } from "@/components/ui";
+import { Text, Card, Avatar } from "@/components/retroui";
 
 interface TestimonialCardProps {
   quote: string;

components/TopNav.tsx

@@ -3,7 +3,7 @@ import Link from "next/link";
 import Image from "next/image";
 import { GithubIcon } from "lucide-react";
 import HamburgerMenu from "./HamburgerMenu";
-import { Button, Text } from "@/components/ui";
+import { Button, Text } from "@/components/retroui";
 import { navConfig } from "@/config/navigation";
 
 export default function TopNav() {

components/index.ts

@@ -1,2 +1,2 @@
 export * from "./ComponentShowcase";
-export * from "./JoinNewsletter";
+export * from "./JoinNewsletter";

components/ui/Accordion.tsx → components/retroui/Accordion.tsx

@@ -16,7 +16,7 @@ const AccordionItem = React.forwardRef<
     ref={ref}
     className={cn(
       "border-2 border-black shadow-md hover:shadow-sm data-[state=open]:shadow-sm transition-all overflow-hidden",
-      className
+      className,
     )}
     {...props}
   />
@@ -32,7 +32,7 @@ const AccordionHeader = React.forwardRef<
       ref={ref}
       className={cn(
         "flex flex-1 items-start justify-between px-4 py-2 font-head text-black cursor-pointer focus:outline-hidden [&[data-state=open]>svg]:rotate-180",
-        className
+        className,
       )}
       {...props}
     >

components/ui/Alert.tsx → components/retroui/Alert.tsx

@@ -2,7 +2,7 @@ import { HtmlHTMLAttributes } from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
-import { Text } from "@/components/ui/Text";
+import { Text } from "@/components/retroui/Text";
 
 const alertVariants = cva("relative w-full border-2 border-black p-4", {
   variants: {

components/ui/Avatar.tsx → components/retroui/Avatar.tsx

@@ -11,7 +11,7 @@ const Avatar = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex h-14 w-14 border-2 border-black rounded-full overflow-hidden",
-      className
+      className,
     )}
     {...props}
   />
@@ -38,7 +38,7 @@ const AvatarFallback = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-full w-full items-center justify-center rounded-full bg-muted bg-primary",
-      className
+      className,
     )}
     {...props}
   />

components/ui/Button.tsx → components/retroui/Button.tsx

@@ -25,7 +25,7 @@ const buttonVariants = cva(
       size: "md",
       variant: "default",
     },
-  }
+  },
 );
 
 export interface IButtonProps
@@ -41,7 +41,7 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
       variant = "default",
       ...props
     }: IButtonProps,
-    forwardedRef
+    forwardedRef,
   ) => (
     <button
       ref={forwardedRef}
@@ -50,7 +50,7 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(
     >
       {children}
     </button>
-  )
+  ),
 );
 
 Button.displayName = "Button";

components/ui/Card.tsx → components/retroui/Card.tsx

@@ -11,7 +11,7 @@ const Card = ({ className, ...props }: ICardProps) => {
     <div
       className={cn(
         "inline-block border-2 border-black shadow-md transition-all hover:shadow-xs",
-        className
+        className,
       )}
       {...props}
     />

components/ui/Checkbox.tsx → components/retroui/Checkbox.tsx

@@ -38,7 +38,7 @@ export const Checkbox = ({
         size,
         variant,
       }),
-      className
+      className,
     )}
     {...props}
   >