From 17bebdde92e94ad2fad00e5b10317548b8ff876b Mon Sep 17 00:00:00 2001 From: William Luke Date: Wed, 24 Jan 2024 11:01:49 +0300 Subject: [PATCH] chore(shadcn): update components --- src/components/ui/accordion.tsx | 8 +-- src/components/ui/badge.tsx | 12 ++-- src/components/ui/button.tsx | 24 +++---- src/components/ui/calendar.tsx | 11 +-- src/components/ui/card.tsx | 46 ++++++------ src/components/ui/command.tsx | 2 +- src/components/ui/dialog.tsx | 16 +++-- src/components/ui/form.tsx | 113 +++++++++++++++--------------- src/components/ui/input.tsx | 13 ++-- src/components/ui/radio-group.tsx | 26 +++---- src/components/ui/scroll-area.tsx | 2 +- src/components/ui/select.tsx | 45 +++++++++++- src/components/ui/separator.tsx | 4 +- src/components/ui/sheet.tsx | 60 ++++++++-------- src/components/ui/table.tsx | 7 +- src/components/ui/tabs.tsx | 2 - src/components/ui/toast.tsx | 64 ++++++++--------- src/components/ui/use-toast.ts | 2 +- 18 files changed, 249 insertions(+), 208 deletions(-) diff --git a/src/components/ui/accordion.tsx b/src/components/ui/accordion.tsx index 2021145..3d5eeca 100644 --- a/src/components/ui/accordion.tsx +++ b/src/components/ui/accordion.tsx @@ -44,15 +44,13 @@ const AccordionContent = React.forwardRef< >(({ className, children, ...props }, ref) => ( -
{children}
+
{children}
 )) + AccordionContent.displayName = AccordionPrimitive.Content.displayName export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index 73a080d..d24dfe9 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -1,7 +1,7 @@ -import { cva, type VariantProps } from "class-variance-authority"; -import * as React from "react"; +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" -import { cn } from "~/lib/utils"; +import { cn } from "~/lib/utils" 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", @@ -25,7 +25,7 @@ const badgeVariants = cva( variant: "default", }, } -); +) export interface BadgeProps extends React.HTMLAttributes, @@ -34,7 +34,7 @@ export interface BadgeProps function Badge({ className, variant, ...props }: BadgeProps) { return (
- ); + ) } -export { Badge, badgeVariants }; +export { Badge, badgeVariants } diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 98b6571..67be7f0 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -1,11 +1,11 @@ -import { Slot } from "@radix-ui/react-slot"; -import { cva, type VariantProps } from "class-variance-authority"; -import * as React from "react"; +import * as React from "react" +import { Slot } from "@radix-ui/react-slot" +import { cva, type VariantProps } from "class-variance-authority" -import { cn } from "~/lib/utils"; +import { cn } from "~/lib/utils" const buttonVariants = cva( - "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", + "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", { variants: { variant: { @@ -32,26 +32,26 @@ const buttonVariants = cva( size: "default", }, } -); +) export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { - asChild?: boolean; + asChild?: boolean } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : "button"; + const Comp = asChild ? Slot : "button" return ( - ); + ) } -); -Button.displayName = "Button"; +) +Button.displayName = "Button" -export { Button, buttonVariants }; +export { Button, buttonVariants } diff --git a/src/components/ui/calendar.tsx b/src/components/ui/calendar.tsx index 41ba630..5209321 100644 --- a/src/components/ui/calendar.tsx +++ b/src/components/ui/calendar.tsx @@ -34,25 +34,26 @@ function Calendar({ head_cell: "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]", row: "flex w-full mt-2", - cell: "text-center text-sm p-0 relative [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", + cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20", day: cn( buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0 font-normal aria-selected:opacity-100" ), + day_range_end: "day-range-end", day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", day_today: "bg-accent text-accent-foreground", - day_outside: "text-muted-foreground opacity-50", + day_outside: + "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30", day_disabled: "text-muted-foreground opacity-50", day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground", day_hidden: "invisible", - ...classNames, }} components={{ - IconLeft: ({ ..._props }) => , - IconRight: ({ ..._props }) => , + IconLeft: ({}) => , + IconRight: ({}) => , }} {...props} /> diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index f11a728..901efad 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -1,6 +1,6 @@ -import * as React from "react"; +import * as React from "react" -import { cn } from "~/lib/utils"; +import { cn } from "~/lib/utils" const Card = React.forwardRef< HTMLDivElement, @@ -9,13 +9,13 @@ const Card = React.forwardRef<
-)); -Card.displayName = "Card"; +)) +Card.displayName = "Card" const CardHeader = React.forwardRef< HTMLDivElement, @@ -26,8 +26,8 @@ const CardHeader = React.forwardRef< className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} /> -)); -CardHeader.displayName = "CardHeader"; +)) +CardHeader.displayName = "CardHeader" const CardTitle = React.forwardRef< HTMLParagraphElement, @@ -35,11 +35,14 @@ const CardTitle = React.forwardRef< >(({ className, ...props }, ref) => (

-)); -CardTitle.displayName = "CardTitle"; +)) +CardTitle.displayName = "CardTitle" const CardDescription = React.forwardRef< HTMLParagraphElement, @@ -50,16 +53,16 @@ const CardDescription = React.forwardRef< className={cn("text-sm text-muted-foreground", className)} {...props} /> -)); -CardDescription.displayName = "CardDescription"; +)) +CardDescription.displayName = "CardDescription" const CardContent = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => (
-)); -CardContent.displayName = "CardContent"; +)) +CardContent.displayName = "CardContent" const CardFooter = React.forwardRef< HTMLDivElement, @@ -67,17 +70,10 @@ const CardFooter = React.forwardRef< >(({ className, ...props }, ref) => (
-)); -CardFooter.displayName = "CardFooter"; +)) +CardFooter.displayName = "CardFooter" -export { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -}; +export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx index 547a73e..c7c82ff 100644 --- a/src/components/ui/command.tsx +++ b/src/components/ui/command.tsx @@ -21,7 +21,7 @@ const Command = React.forwardRef< )) Command.displayName = CommandPrimitive.displayName -type CommandDialogProps = DialogProps +interface CommandDialogProps extends DialogProps {} const CommandDialog = ({ children, ...props }: CommandDialogProps) => { return ( diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx index 59695ab..f940d2e 100644 --- a/src/components/ui/dialog.tsx +++ b/src/components/ui/dialog.tsx @@ -8,6 +8,9 @@ const Dialog = DialogPrimitive.Root const DialogTrigger = DialogPrimitive.Trigger +const DialogPortal = DialogPrimitive.Portal + +const DialogClose = DialogPrimitive.Close const DialogOverlay = React.forwardRef< React.ElementRef, @@ -16,7 +19,7 @@ const DialogOverlay = React.forwardRef< , React.ComponentPropsWithoutRef >(({ className, children, ...props }, ref) => ( - + Close - + )) DialogContent.displayName = DialogPrimitive.Content.displayName @@ -68,7 +71,7 @@ const DialogFooter = ({ }: React.HTMLAttributes) => (
= FieldPath > = { - name: TName; -}; + name: TName +} const FormFieldContext = React.createContext( {} as FormFieldContextValue -); +) const FormField = < TFieldValues extends FieldValues = FieldValues, @@ -36,21 +36,21 @@ const FormField = < - ); -}; + ) +} const useFormField = () => { - const fieldContext = React.useContext(FormFieldContext); - const itemContext = React.useContext(FormItemContext); - const { getFieldState, formState } = useFormContext(); + const fieldContext = React.useContext(FormFieldContext) + const itemContext = React.useContext(FormItemContext) + const { getFieldState, formState } = useFormContext() - const fieldState = getFieldState(fieldContext.name, formState); + const fieldState = getFieldState(fieldContext.name, formState) if (!fieldContext) { - throw new Error("useFormField should be used within "); + throw new Error("useFormField should be used within ") } - const { id } = itemContext; + const { id } = itemContext return { id, @@ -59,36 +59,36 @@ const useFormField = () => { formDescriptionId: `${id}-form-item-description`, formMessageId: `${id}-form-item-message`, ...fieldState, - }; -}; + } +} type FormItemContextValue = { - id: string; -}; + id: string +} const FormItemContext = React.createContext( {} as FormItemContextValue -); +) const FormItem = React.forwardRef< HTMLDivElement, React.HTMLAttributes >(({ className, ...props }, ref) => { - const id = React.useId(); + const id = React.useId() return ( -
+
- ); -}); -FormItem.displayName = "FormItem"; + ) +}) +FormItem.displayName = "FormItem" const FormLabel = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => { - const { error, formItemId } = useFormField(); + const { error, formItemId } = useFormField() return (