From 69c11714dfe0d431b10479ca3afd52dadf52ab35 Mon Sep 17 00:00:00 2001 From: Krr0ptioN Date: Mon, 19 Aug 2024 23:40:05 +0300 Subject: [PATCH] chore: adding all of the shadcn components --- libs/ui/components/src/accordion.tsx | 58 ++ libs/ui/components/src/alert-dialog.tsx | 141 +++ libs/ui/components/src/alert.tsx | 59 ++ libs/ui/components/src/aspect-ratio.tsx | 7 + libs/ui/components/src/avatar.tsx | 50 + libs/ui/components/src/badge.tsx | 36 + libs/ui/components/src/breadcrumb.tsx | 115 +++ libs/ui/components/src/calendar.tsx | 66 ++ libs/ui/components/src/card.tsx | 79 ++ libs/ui/components/src/carousel.tsx | 262 +++++ libs/ui/components/src/chart.tsx | 365 +++++++ libs/ui/components/src/checkbox.tsx | 30 + libs/ui/components/src/collapsible.tsx | 11 + libs/ui/components/src/command.tsx | 155 +++ libs/ui/components/src/context-menu.tsx | 200 ++++ libs/ui/components/src/dialog.tsx | 122 +++ libs/ui/components/src/drawer.tsx | 118 +++ libs/ui/components/src/dropdown-menu.tsx | 200 ++++ libs/ui/components/src/form.tsx | 178 ++++ libs/ui/components/src/hover-card.tsx | 29 + libs/ui/components/src/index.ts | 47 +- libs/ui/components/src/input-otp.tsx | 71 ++ libs/ui/components/src/input.tsx | 25 + libs/ui/components/src/label.tsx | 26 + libs/ui/components/src/menubar.tsx | 236 +++++ libs/ui/components/src/navigation-menu.tsx | 128 +++ libs/ui/components/src/pagination.tsx | 117 +++ libs/ui/components/src/popover.tsx | 31 + libs/ui/components/src/progress.tsx | 28 + libs/ui/components/src/radio-group.tsx | 44 + libs/ui/components/src/resizable.tsx | 45 + libs/ui/components/src/scroll-area.tsx | 48 + libs/ui/components/src/select.tsx | 160 +++ libs/ui/components/src/separator.tsx | 31 + libs/ui/components/src/sheet.tsx | 140 +++ libs/ui/components/src/skeleton.tsx | 15 + libs/ui/components/src/slider.tsx | 28 + libs/ui/components/src/sonner.tsx | 31 + libs/ui/components/src/switch.tsx | 29 + libs/ui/components/src/table.tsx | 117 +++ libs/ui/components/src/tabs.tsx | 55 + libs/ui/components/src/textarea.tsx | 24 + libs/ui/components/src/toast.tsx | 129 +++ libs/ui/components/src/toaster.tsx | 35 + libs/ui/components/src/toggle-group.tsx | 61 ++ libs/ui/components/src/toggle.tsx | 45 + libs/ui/components/src/tooltip.tsx | 30 + libs/ui/components/src/use-toast.ts | 194 ++++ package.json | 38 + yarn.lock | 1063 +++++++++++++++++++- 50 files changed, 5344 insertions(+), 8 deletions(-) create mode 100644 libs/ui/components/src/accordion.tsx create mode 100644 libs/ui/components/src/alert-dialog.tsx create mode 100644 libs/ui/components/src/alert.tsx create mode 100644 libs/ui/components/src/aspect-ratio.tsx create mode 100644 libs/ui/components/src/avatar.tsx create mode 100644 libs/ui/components/src/badge.tsx create mode 100644 libs/ui/components/src/breadcrumb.tsx create mode 100644 libs/ui/components/src/calendar.tsx create mode 100644 libs/ui/components/src/card.tsx create mode 100644 libs/ui/components/src/carousel.tsx create mode 100644 libs/ui/components/src/chart.tsx create mode 100644 libs/ui/components/src/checkbox.tsx create mode 100644 libs/ui/components/src/collapsible.tsx create mode 100644 libs/ui/components/src/command.tsx create mode 100644 libs/ui/components/src/context-menu.tsx create mode 100644 libs/ui/components/src/dialog.tsx create mode 100644 libs/ui/components/src/drawer.tsx create mode 100644 libs/ui/components/src/dropdown-menu.tsx create mode 100644 libs/ui/components/src/form.tsx create mode 100644 libs/ui/components/src/hover-card.tsx create mode 100644 libs/ui/components/src/input-otp.tsx create mode 100644 libs/ui/components/src/input.tsx create mode 100644 libs/ui/components/src/label.tsx create mode 100644 libs/ui/components/src/menubar.tsx create mode 100644 libs/ui/components/src/navigation-menu.tsx create mode 100644 libs/ui/components/src/pagination.tsx create mode 100644 libs/ui/components/src/popover.tsx create mode 100644 libs/ui/components/src/progress.tsx create mode 100644 libs/ui/components/src/radio-group.tsx create mode 100644 libs/ui/components/src/resizable.tsx create mode 100644 libs/ui/components/src/scroll-area.tsx create mode 100644 libs/ui/components/src/select.tsx create mode 100644 libs/ui/components/src/separator.tsx create mode 100644 libs/ui/components/src/sheet.tsx create mode 100644 libs/ui/components/src/skeleton.tsx create mode 100644 libs/ui/components/src/slider.tsx create mode 100644 libs/ui/components/src/sonner.tsx create mode 100644 libs/ui/components/src/switch.tsx create mode 100644 libs/ui/components/src/table.tsx create mode 100644 libs/ui/components/src/tabs.tsx create mode 100644 libs/ui/components/src/textarea.tsx create mode 100644 libs/ui/components/src/toast.tsx create mode 100644 libs/ui/components/src/toaster.tsx create mode 100644 libs/ui/components/src/toggle-group.tsx create mode 100644 libs/ui/components/src/toggle.tsx create mode 100644 libs/ui/components/src/tooltip.tsx create mode 100644 libs/ui/components/src/use-toast.ts diff --git a/libs/ui/components/src/accordion.tsx b/libs/ui/components/src/accordion.tsx new file mode 100644 index 0000000..8f58635 --- /dev/null +++ b/libs/ui/components/src/accordion.tsx @@ -0,0 +1,58 @@ +"use client" + +import * as React from "react" +import * as AccordionPrimitive from "@radix-ui/react-accordion" +import { ChevronDown } from "lucide-react" + +import { cn } from "@goran/ui-common" + +const Accordion = AccordionPrimitive.Root + +const AccordionItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AccordionItem.displayName = "AccordionItem" + +const AccordionTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + svg]:rotate-180", + className + )} + {...props} + > + {children} + + + +)) +AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName + +const AccordionContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + +
{children}
+
+)) + +AccordionContent.displayName = AccordionPrimitive.Content.displayName + +export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/libs/ui/components/src/alert-dialog.tsx b/libs/ui/components/src/alert-dialog.tsx new file mode 100644 index 0000000..2506ac3 --- /dev/null +++ b/libs/ui/components/src/alert-dialog.tsx @@ -0,0 +1,141 @@ +"use client" + +import * as React from "react" +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" + +import { cn } from "@goran/ui-common" +import { buttonVariants } from "@goran/ui-components/ui/button" + +const AlertDialog = AlertDialogPrimitive.Root + +const AlertDialogTrigger = AlertDialogPrimitive.Trigger + +const AlertDialogPortal = AlertDialogPrimitive.Portal + +const AlertDialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName + +const AlertDialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + +)) +AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName + +const AlertDialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogHeader.displayName = "AlertDialogHeader" + +const AlertDialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +AlertDialogFooter.displayName = "AlertDialogFooter" + +const AlertDialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName + +const AlertDialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogDescription.displayName = + AlertDialogPrimitive.Description.displayName + +const AlertDialogAction = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName + +const AlertDialogCancel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName + +export { + AlertDialog, + AlertDialogPortal, + AlertDialogOverlay, + AlertDialogTrigger, + AlertDialogContent, + AlertDialogHeader, + AlertDialogFooter, + AlertDialogTitle, + AlertDialogDescription, + AlertDialogAction, + AlertDialogCancel, +} diff --git a/libs/ui/components/src/alert.tsx b/libs/ui/components/src/alert.tsx new file mode 100644 index 0000000..82258ca --- /dev/null +++ b/libs/ui/components/src/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@goran/ui-common" + +const alertVariants = cva( + "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/libs/ui/components/src/aspect-ratio.tsx b/libs/ui/components/src/aspect-ratio.tsx new file mode 100644 index 0000000..d6a5226 --- /dev/null +++ b/libs/ui/components/src/aspect-ratio.tsx @@ -0,0 +1,7 @@ +"use client" + +import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" + +const AspectRatio = AspectRatioPrimitive.Root + +export { AspectRatio } diff --git a/libs/ui/components/src/avatar.tsx b/libs/ui/components/src/avatar.tsx new file mode 100644 index 0000000..0336081 --- /dev/null +++ b/libs/ui/components/src/avatar.tsx @@ -0,0 +1,50 @@ +"use client" + +import * as React from "react" +import * as AvatarPrimitive from "@radix-ui/react-avatar" + +import { cn } from "@goran/ui-common" + +const Avatar = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +Avatar.displayName = AvatarPrimitive.Root.displayName + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarImage.displayName = AvatarPrimitive.Image.displayName + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName + +export { Avatar, AvatarImage, AvatarFallback } diff --git a/libs/ui/components/src/badge.tsx b/libs/ui/components/src/badge.tsx new file mode 100644 index 0000000..9ed06f3 --- /dev/null +++ b/libs/ui/components/src/badge.tsx @@ -0,0 +1,36 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@goran/ui-common" + +const badgeVariants = cva( + "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", + { + variants: { + variant: { + default: + "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", + secondary: + "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", + destructive: + "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", + outline: "text-foreground", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ) +} + +export { Badge, badgeVariants } diff --git a/libs/ui/components/src/breadcrumb.tsx b/libs/ui/components/src/breadcrumb.tsx new file mode 100644 index 0000000..49fc0ff --- /dev/null +++ b/libs/ui/components/src/breadcrumb.tsx @@ -0,0 +1,115 @@ +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { ChevronRight, MoreHorizontal } from "lucide-react" + +import { cn } from "@goran/ui-common" + +const Breadcrumb = React.forwardRef< + HTMLElement, + React.ComponentPropsWithoutRef<"nav"> & { + separator?: React.ReactNode + } +>(({ ...props }, ref) =>