Merge pull request #44 from Logging-Stuff/install-guide

New Install guide

Author: ariflogs

.github/workflows/deploy.yml

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

CONTRIBUTING.md

@@ -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 "@/packages/ui";
+import { Text } from "@/components/ui";
 import { Metadata } from "next";
 import { MoveRightIcon, MoveUpRightIcon } from "lucide-react";
 
@@ -47,8 +47,8 @@ export default function page({ params }: IProps) {
   return (
     <div className="space-y-12 py-8">
       <div className="border-b border-black pb-6">
-        <Text as="h2">{doc.title}</Text>
-        <p className="text-lg text-muted">{doc.description}</p>
+        <Text as="h1">{doc.title}</Text>
+        <p className="text-lg text-muted mt-2">{doc.description}</p>
         {doc.links && (
           <div className="flex space-x-4 text-sm mt-4">
             {doc.links?.api_reference && (

app/(docs)/docs/[[...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 "@/packages/ui";
+import { Avatar, Badge, Button, Text } from "@/components/ui";
 import { Metadata } from "next";
 import { MoveRightIcon, MoveUpRightIcon } from "lucide-react";
 import Image from "next/image";

app/(marketing)/blogs/[slug]/page.tsx

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

app/(marketing)/blogs/page.tsx

@@ -8,7 +8,7 @@ import {
   Card,
   Avatar,
   Badge,
-} from "@/packages/ui";
+} from "@/components/ui";
 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";
@@ -73,8 +73,10 @@ export default async function Home() {
               </Badge>
             </Link>
 
-            <Text as="h1">Make your projects</Text>
-            <Text as="h1" className="text-outlined">
+            <Text as="h1" className="text-5xl lg:text-6xl">
+              Make your projects
+            </Text>
+            <Text as="h1" className="text-5xl lg:text-6xl text-outlined">
               stand out!
             </Text>
 

app/(marketing)/page.tsx

@@ -15,9 +15,9 @@ import {
   TabsPanels,
   TabsTrigger,
   TabsTriggerList,
-} from "@/packages/ui";
-import { Card } from "@/packages/ui/Cards/Card";
-import { RadioGroup } from "@/packages/ui/Form/Radio";
+} from "@/components/ui";
+import { Card } from "@/components/ui/Cards/Card";
+import { RadioGroup } from "@/components/ui/Form/Radio";
 import BadgeStyleVariants from "@/preview/components/badge-style-variants";
 import TestimonialCard from "@/preview/components/card-style-testimonial";
 import { CheckCircle } from "lucide-react";

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

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { cn } from "@/lib/utils";
-import { Button } from "@/packages/ui";
+import { Button } from "@/components/ui";
 
 interface ICodeBlock extends React.HTMLAttributes<HTMLPreElement> {}
 

components/CodeBlock.tsx

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

components/HamburgerMenu.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Button, Text, Input } from "@/packages/ui";
+import { Button, Text, Input } from "@/components/ui";
 import { useState } from "react";
 
 const INIT = "INIT";

components/JoinNewsletter.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Text } from "@/packages/ui";
+import { Alert, Badge, Card, Text } from "@/components/ui";
 import { useMDXComponent } from "next-contentlayer/hooks";
 import React, { AnchorHTMLAttributes, HTMLAttributes } from "react";
 import { ComponentShowcase } from "./ComponentShowcase";
@@ -9,7 +9,8 @@ import { ComponentSource } from "./ComponentSource";
 import { CodeBlock } from "./CodeBlock";
 import Link from "next/link";
 import { ComponentInstall } from "./ComponentInstall";
-import { TabGroup } from "@headlessui/react";
+import Image from "next/image";
+import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
 
 const components = (type: "doc" | "blog") => ({
   h1: (props: HTMLAttributes<HTMLHeadingElement>) => (
@@ -89,6 +90,16 @@ const components = (type: "doc" | "blog") => ({
       {children}
     </code>
   ),
+  TabGroup,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+  Link,
+  Badge,
+  Image,
+  Card,
+  Alert,
   ComponentShowcase,
   ComponentSource,
   ComponentInstall,

components/MDX.tsx

@@ -1,5 +1,5 @@
 import { navConfig } from "@/config/navigation";
-import { Badge, Text } from "@/packages/ui";
+import { Badge, Text } from "@/components/ui";
 import Link from "next/link";
 
 export default function SideNav() {

components/SideNav.tsx

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

components/Testimonial.tsx

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

components/TopNav.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 "../Text";
+import { Text } from "@/components/ui/Text";
 
 const alertVariants = cva("relative w-full border-2 border-black p-4", {
   variants: {

packages/ui/Accordions/Accordion.tsx renamed to components/ui/Accordions/Accordion.tsx

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

packages/ui/Accordions/index.ts renamed to components/ui/Accordions/index.ts

@@ -2,7 +2,7 @@
 
 import { cn } from "@/lib/utils";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import React, { ComponentPropsWithoutRef, HTMLAttributes } from "react";
+import React, { ComponentPropsWithoutRef } from "react";
 
 const Menu = DropdownMenu.Root;
 const Trigger = DropdownMenu.Trigger;

packages/ui/Alerts/Alert.tsx renamed to components/ui/Alerts/Alert.tsx

@@ -8,7 +8,7 @@ const textVariants = cva("font-head", {
       p: "font-sans text-base",
       li: "font-sans text-base",
       a: "font-sans text-base hover:underline underline-offset-2 decoration-primary-500",
-      h1: "text-5xl lg:text-6xl font-bold",
+      h1: "text-4xl lg:text-5xl font-bold",
       h2: "text-3xl lg:text-4xl font-semibold",
       h3: "text-2xl font-medium",
       h4: "text-xl font-normal",

packages/ui/Alerts/index.ts renamed to components/ui/Alerts/index.ts

@@ -21,59 +21,59 @@ export const componentConfig: {
     accordion: {
       name: "accordion",
       dependencies: ["@radix-ui/react-accordion", "lucide-react"],
-      filePath: "packages/ui/Accordions/Accordion.tsx",
+      filePath: "components/ui/Accordions/Accordion.tsx",
     },
     alert: {
       name: "alert",
-      filePath: "packages/ui/Alerts/Alert.tsx",
+      filePath: "components/ui/Alerts/Alert.tsx",
     },
     avatar: {
       name: "avatar",
-      filePath: "packages/ui/Avatars/Avatar.tsx",
+      filePath: "components/ui/Avatars/Avatar.tsx",
     },
     badge: {
       name: "badge",
-      filePath: "packages/ui/Badges/Badge.tsx",
+      filePath: "components/ui/Badges/Badge.tsx",
     },
     button: {
       name: "button",
-      filePath: "packages/ui/Buttons/Button.tsx",
+      filePath: "components/ui/Buttons/Button.tsx",
     },
     card: {
       name: "card",
-      filePath: "packages/ui/Cards/Card.tsx",
+      filePath: "components/ui/Cards/Card.tsx",
     },
     checkbox: {
       name: "checkbox",
-      filePath: "packages/ui/Form/Checkbox.tsx",
+      filePath: "components/ui/Form/Checkbox.tsx",
     },
     dialog: {
       name: "dialog",
-      filePath: "packages/ui/Dialog/Dialog.tsx",
+      filePath: "components/ui/Dialog/Dialog.tsx",
     },
     input: {
       name: "input",
-      filePath: "packages/ui/Form/Input.tsx",
+      filePath: "components/ui/Form/Input.tsx",
     },
     menu: {
       name: "menu",
-      filePath: "packages/ui/Menu/Menu.tsx",
+      filePath: "components/ui/Menu/Menu.tsx",
     },
     radio: {
       name: "radio",
-      filePath: "packages/ui/Form/Radio.tsx",
+      filePath: "components/ui/Form/Radio.tsx",
     },
     select: {
       name: "select",
-      filePath: "packages/ui/Form/Select.tsx",
+      filePath: "components/ui/Form/Select.tsx",
     },
     switch: {
       name: "switch",
-      filePath: "packages/ui/Form/Switch.tsx",
+      filePath: "components/ui/Form/Switch.tsx",
     },
     text: {
       name: "text",
-      filePath: "packages/ui/Text/Text.tsx",
+      filePath: "components/ui/Text/Text.tsx",
     },
   },
   examples: {

packages/ui/Avatars/Avatar.tsx renamed to components/ui/Avatars/Avatar.tsx

@@ -12,7 +12,14 @@ export const navConfig: INavigationConfig = {
   sideNavItems: [
     {
       title: "Getting Started",
-      children: [{ title: "Introduction", href: "/docs", tag: "Updated" }],
+      children: [
+        { title: "Introduction", href: "/docs", tag: "Updated" },
+        {
+          title: "Installation",
+          href: "/docs/install",
+          tag: "New",
+        },
+      ],
     },
     {
       title: "Components",