fix: components target path

.github/workflows/deploy.yml

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

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

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

components/ui/Form/Input.tsx → components/ui/Input.tsx

@@ -10,7 +10,6 @@ export const Input: React.FC<InputProps> = ({
   className = "",
   ...props
 }) => {
-  console.log(props);
   return (
     <input
       type={type}

components/ui/index.ts

@@ -1,11 +1,18 @@
-export * from "./Buttons";
-export * from "./Form";
+export * from "./Button";
+export * from "./Input";
+export * from "./Textarea";
+export * from "./Checkbox";
+export * from "./Radio";
+export * from "./Select";
+export * from "./Switch";
+export * from "./Label";
+export * from "./Input";
 export * from "./Text";
-export * from "./Accordions";
-export * from "./Alerts";
-export * from "./Cards";
-export * from "./Avatars";
-export * from "./Badges";
-export * from "./Tabs";
+export * from "./Accordion";
+export * from "./Alert";
+export * from "./Card";
+export * from "./Avatar";
+export * from "./Badge";
+export * from "./Tab";
 export * from "./Dialog";
 export * from "./Menu";

config/components.ts

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

content/docs/components/checkbox.mdx

@@ -4,7 +4,7 @@ description: Let users confirm or reject an option.
 lastUpdated: 13 Feb, 2024
 links:
   api_reference: https://www.radix-ui.com/primitives/docs/components/checkbox#api-reference
-  source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Form/Checkbox.tsx
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Checkbox.tsx
 ---
 
 <ComponentShowcase name="checkbox-style-default" />

content/docs/components/radio.mdx

@@ -4,7 +4,7 @@ description: Sometimes you need to pick multiple options! That's where the Radio
 lastUpdated: 20 Feb, 2024
 links:
   api_reference: https://www.radix-ui.com/primitives/docs/components/radio-group#api-reference
-  source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Form/Radio.tsx
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Radio.tsx
 ---
 
 <ComponentShowcase name="radio-style-default" />

content/docs/components/select.mdx

@@ -4,7 +4,7 @@ description: Let your users pick what they want.
 lastUpdated: 1 Mar, 2024
 links:
   api_reference: https://www.radix-ui.com/primitives/docs/components/select#api-reference
-  source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Form/Select.tsx
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Select.tsx
 ---
 
 <ComponentShowcase name="select-style-default" />

content/docs/components/switch.mdx

@@ -4,7 +4,7 @@ description: Let users to turn on or off your marketing emails or notifications.
 lastUpdated: 20 Feb, 2024
 links:
   api_reference: https://www.radix-ui.com/primitives/docs/components/switch#api-reference
-  source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Form/switch.tsx
+  source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/switch.tsx
 ---
 
 <ComponentShowcase name="switch-style-default" />

content/docs/install/nextjs.mdx

@@ -54,7 +54,7 @@ npm install class-variance-authority
 After installing the component in your project, you can then simply import it like this:
 
 ```tsx
-import { Button } from "@/components/ui/Button";
+import { Button } from "@/components/retroui/Button";
 
 export default function ButtonExample() {
   return <Button>Click Me!</Button>;

public/r/accordion.json

@@ -10,9 +10,10 @@
   ],
   "files": [
     {
-      "path": "components/ui/Accordions/Accordion.tsx",
+      "path": "components/ui/Accordion.tsx",
       "content": "\"use client\";\n\nimport * as React from \"react\";\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\";\nimport { ChevronDown } from \"lucide-react\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Accordion = AccordionPrimitive.Root;\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"border-2 border-black shadow-md hover:shadow-sm data-[state=open]:shadow-sm transition-all overflow-hidden\",\n      className\n    )}\n    {...props}\n  />\n));\nAccordionItem.displayName = AccordionPrimitive.Item.displayName;\n\nconst AccordionHeader = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Header className=\"flex\">\n    <AccordionPrimitive.Trigger\n      ref={ref}\n      className={cn(\n        \"flex flex-1 items-start justify-between px-4 py-2 font-head text-black cursor-pointer focus:outline-none [&[data-state=open]>svg]:rotate-180\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronDown className=\"h-4 w-4 shrink-0 transition-transform duration-200\" />\n    </AccordionPrimitive.Trigger>\n  </AccordionPrimitive.Header>\n));\nAccordionHeader.displayName = AccordionPrimitive.Header.displayName;\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"overflow-hidden px-4 py-2 font-body bg-white text-gray-700 transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n    {...props}\n  >\n    <div className={cn(\"pb-4 pt-0\", className)}>{children}</div>\n  </AccordionPrimitive.Content>\n));\n\nAccordionContent.displayName = AccordionPrimitive.Content.displayName;\n\nconst AccordionComponent = Object.assign(Accordion, {\n  Item: AccordionItem,\n  Header: AccordionHeader,\n  Content: AccordionContent,\n});\n\nexport { AccordionComponent as Accordion };\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": "components/retroui/Accordion.tsx"
     }
   ]
 }

public/r/alert.json

@@ -9,9 +9,10 @@
   ],
   "files": [
     {
-      "path": "components/ui/Alerts/Alert.tsx",
+      "path": "components/ui/Alert.tsx",
       "content": "import { HtmlHTMLAttributes } from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Text } from \"@/components/ui/Text\";\n\nconst alertVariants = cva(\"relative w-full border-2 border-black p-4\", {\n  variants: {\n    variant: {\n      default: \"bg-primary-300 text-foreground\",\n      solid: \"bg-black text-white\",\n    },\n    status: {\n      error: \"bg-red-300 text-red-800 border-red-800\",\n      success: \"bg-green-300 text-green-800 border-green-800\",\n      warning: \"bg-yellow-300 text-yellow-800 border-yellow-800\",\n      info: \"bg-blue-300 text-blue-800 border-blue-800\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n\ninterface IAlertProps\n  extends HtmlHTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof alertVariants> {}\n\nconst Alert = ({ className, variant, status, ...props }: IAlertProps) => (\n  <div\n    role=\"alert\"\n    className={cn(alertVariants({ variant, status }), className)}\n    {...props}\n  />\n);\nAlert.displayName = \"Alert\";\n\ninterface IAlertTitleProps extends HtmlHTMLAttributes<HTMLHeadingElement> {}\nconst AlertTitle = ({ className, ...props }: IAlertTitleProps) => (\n  <Text as=\"h5\" className={cn(className)} {...props} />\n);\nAlertTitle.displayName = \"AlertTitle\";\n\ninterface IAlertDescriptionProps\n  extends HtmlHTMLAttributes<HTMLParagraphElement> {}\nconst AlertDescription = ({ className, ...props }: IAlertDescriptionProps) => (\n  <div className={cn(\"text-muted\", className)} {...props} />\n);\n\nAlertDescription.displayName = \"AlertDescription\";\n\nconst AlertComponent = Object.assign(Alert, {\n  Title: AlertTitle,\n  Description: AlertDescription,\n});\n\nexport { AlertComponent as Alert };\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": "components/retroui/Alert.tsx"
     }
   ]
 }

public/r/avatar.json

@@ -9,9 +9,10 @@
   ],
   "files": [
     {
-      "path": "components/ui/Avatars/Avatar.tsx",
+      "path": "components/ui/Avatar.tsx",
       "content": "import * as React from \"react\";\nimport * as AvatarPrimitive from \"@radix-ui/react-avatar\";\n\nimport { cn } from \"@/lib/utils\";\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Root\n    ref={ref}\n    className={cn(\n      \"relative flex h-14 w-14 border-2 border-black rounded-full overflow-hidden\",\n      className\n    )}\n    {...props}\n  />\n));\nAvatar.displayName = \"Avatar\";\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn(\"aspect-square h-full w-full\", className)}\n    {...props}\n  />\n));\nAvatarImage.displayName = \"Avatar.Image\";\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn(\n      \"flex h-full w-full items-center justify-center rounded-full bg-muted bg-primary-400\",\n      className\n    )}\n    {...props}\n  />\n));\nAvatarFallback.displayName = \"Avatar.Fallback\";\n\nconst AvatarComponent = Object.assign(Avatar, {\n  Image: AvatarImage,\n  Fallback: AvatarFallback,\n});\n\nexport { AvatarComponent as Avatar };\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": "components/retroui/Avatar.tsx"
     }
   ]
 }

public/r/badge.json

@@ -9,9 +9,10 @@
   ],
   "files": [
     {
-      "path": "components/ui/Badges/Badge.tsx",
+      "path": "components/ui/Badge.tsx",
       "content": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { HTMLAttributes } from \"react\";\n\nconst badgeVariants = cva(\"font-semibold \", {\n  variants: {\n    variant: {\n      default: \"bg-gray-200 text-gray-700\",\n      outline: \"outline outline-2 outline-black text-black\",\n      solid: \"bg-black text-white\",\n      surface: \"outline outline-2 bg-primary-300 text-black\",\n    },\n    size: {\n      sm: \"px-2 py-1 text-xs\",\n      md: \"px-2.5 py-1.5 text-sm\",\n      lg: \"px-3 py-2 text-base\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface ButtonProps\n  extends HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {}\n\nexport function Badge({\n  children,\n  size = \"md\",\n  variant = \"default\",\n  className = \"\",\n  ...props\n}: ButtonProps) {\n  return (\n    <span\n      className={cn(badgeVariants({ variant, size }), className)}\n      {...props}\n    >\n      {children}\n    </span>\n  );\n}\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": "components/retroui/Badge.tsx"
     }
   ]
 }

public/r/button.json

@@ -9,9 +9,10 @@
   ],
   "files": [
     {
-      "path": "components/ui/Buttons/Button.tsx",
+      "path": "components/ui/Button.tsx",
       "content": "import { cn } from \"@/lib/utils\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport React, { ButtonHTMLAttributes } from \"react\";\n\nconst buttonVariants = cva(\"font-head transition-all outline-none\", {\n  variants: {\n    variant: {\n      default:\n        \"shadow-md hover:shadow-xs bg-primary-400 text-black border-2 border-black hover:bg-primary-500\",\n      outline:\n        \"shadow-md hover:shadow-xs bg-transparent text-black border-2 border-black\",\n      link: \"bg-transparent text-black hover:underline\",\n    },\n    size: {\n      sm: \"px-4 py-1 text-sm\",\n      md: \"px-6 py-2 text-base\",\n      lg: \"px-8 py-3 text-lg\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n    variant: \"default\",\n  },\n});\n\nexport interface IButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {}\n\nexport const Button = React.forwardRef<HTMLButtonElement, IButtonProps>(\n  (\n    {\n      children,\n      size = \"md\",\n      className = \"\",\n      variant = \"default\",\n      ...props\n    }: IButtonProps,\n    forwardedRef\n  ) => (\n    <button\n      ref={forwardedRef}\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n    >\n      {children}\n    </button>\n  )\n);\n\nButton.displayName = \"Button\";\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": "components/retroui/Button.tsx"
     }
   ]
 }

public/r/card.json

@@ -6,9 +6,10 @@
   "description": "A customizable card component to visualize your content. 📝",
   "files": [
     {
-      "path": "components/ui/Cards/Card.tsx",
+      "path": "components/ui/Card.tsx",
       "content": "import { cn } from \"@/lib/utils\";\nimport { HTMLAttributes } from \"react\";\nimport { Text } from \"@/components/ui/Text\";\n\ninterface ICardProps extends HTMLAttributes<HTMLDivElement> {\n  className?: string;\n}\n\nconst Card = ({ className, ...props }: ICardProps) => {\n  return (\n    <div\n      className={cn(\n        \"inline-block border-2 border-black shadow-md cursor-pointer transition-all hover:shadow-xs\",\n        className\n      )}\n      {...props}\n    />\n  );\n};\n\nconst CardHeader = ({ className, ...props }: ICardProps) => {\n  return (\n    <div\n      className={cn(\"flex flex-col justify-start p-4\", className)}\n      {...props}\n    />\n  );\n};\n\nconst CardTitle = ({ className, ...props }: ICardProps) => {\n  return <Text as=\"h3\" className={cn(\"mb-2\", className)} {...props} />;\n};\n\nconst CardDescription = ({ className, ...props }: ICardProps) => (\n  <p className={cn(\"text-muted\", className)} {...props} />\n);\n\nconst CardContent = ({ className, ...props }: ICardProps) => {\n  return <div className={cn(\"p-4\", className)} {...props} />;\n};\n\nconst CardComponent = Object.assign(Card, {\n  Header: CardHeader,\n  Title: CardTitle,\n  Description: CardDescription,\n  Content: CardContent,\n});\n\nexport { CardComponent as Card };\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": "components/retroui/Card.tsx"
     }
   ]
 }

public/r/checkbox.json

@@ -11,9 +11,10 @@
   ],
   "files": [
     {
-      "path": "components/ui/Form/Checkbox.tsx",
+      "path": "components/ui/Checkbox.tsx",
       "content": "import { cn } from \"@/lib/utils\";\nimport * as CheckboxPrimitive from \"@radix-ui/react-checkbox\";\nimport { cva, VariantProps } from \"class-variance-authority\";\nimport { Check } from \"lucide-react\";\n\nconst checkboxVariants = cva(\"border-black border-2\", {\n  variants: {\n    variant: {\n      default: \" data-[state=checked]:bg-primary-500\",\n      outline: \"\",\n      solid: \"data-[state=checked]:bg-black *:text-white\",\n    },\n    size: {\n      sm: \"h-4 w-4\",\n      md: \"h-5 w-5\",\n      lg: \"h-6 w-6\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\ninterface CheckboxProps\n  extends React.ComponentProps<typeof CheckboxPrimitive.Root>,\n    VariantProps<typeof checkboxVariants> {}\n\nexport const Checkbox = ({\n  className,\n  size,\n  variant,\n  ...props\n}: CheckboxProps) => (\n  <CheckboxPrimitive.Root\n    className={cn(\n      checkboxVariants({\n        size,\n        variant,\n      }),\n      className\n    )}\n    {...props}\n  >\n    <CheckboxPrimitive.Indicator className=\"h-full w-full\">\n      <Check className=\"h-full w-full\" />\n    </CheckboxPrimitive.Indicator>\n  </CheckboxPrimitive.Root>\n);\n",
-      "type": "registry:component"
+      "type": "registry:component",
+      "target": "components/retroui/Checkbox.tsx"
     }
   ]
 }