diff --git a/src/custom/docs/components/header/CodeCopy.tsx b/src/custom/docs/components/header/CodeCopy.tsx index 713e2bc..25d5e0b 100644 --- a/src/custom/docs/components/header/CodeCopy.tsx +++ b/src/custom/docs/components/header/CodeCopy.tsx @@ -1,32 +1,40 @@ -'use client' -import React from "react" +"use client"; +import React from "react"; -import {Button, cn} from 'src' -import { Check, Copy } from "lucide-react" -export const CodeCopy = (props: {textToCopy: string, className?: string}) => { +import { Button, cn } from "src"; +import { Check, Copy } from "lucide-react"; +export const CodeCopy = (props: { textToCopy: string; className?: string }) => { + const [copied, setHasCopied] = React.useState(false); - const [copied, setHasCopied] = React.useState(false) - - return
- {props.textToCopy} + return ( +
+ {props.textToCopy} - -
-} +
+ ); +}; diff --git a/src/shadcn/ui/calendar.tsx b/src/shadcn/ui/calendar.tsx index 5fdc4c2..e814911 100644 --- a/src/shadcn/ui/calendar.tsx +++ b/src/shadcn/ui/calendar.tsx @@ -27,7 +27,7 @@ function Calendar({ nav: "space-x-1 flex items-center", nav_button: cn( buttonVariants({ variant: "outline" }), - "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100" + "h-7 w-7 bg-background p-0 opacity-50 hover:opacity-100" ), nav_button_previous: "absolute left-1", nav_button_next: "absolute right-1", @@ -60,8 +60,8 @@ function Calendar({ ...classNames, }} components={{ - IconLeft: ({ ...props }) => , - IconRight: ({ ...props }) => , + IconLeft: ({ ...props }) => , + IconRight: ({ ...props }) => , }} {...props} /> diff --git a/src/shadcn/ui/command.tsx b/src/shadcn/ui/command.tsx index 78a4ace..798e4e7 100644 --- a/src/shadcn/ui/command.tsx +++ b/src/shadcn/ui/command.tsx @@ -28,8 +28,8 @@ interface CommandDialogProps extends DialogProps {} const CommandDialog = ({ children, ...props }: CommandDialogProps) => { return ( - - + + {children} @@ -41,12 +41,12 @@ const CommandInput = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( -
- +
+ ((props, ref) => ( )); @@ -117,8 +117,8 @@ const CommandItem = React.forwardRef< {} @@ -11,15 +11,15 @@ const Input = React.forwardRef( - ) + ); } -) -Input.displayName = "Input" +); +Input.displayName = "Input"; -export { Input } +export { Input }; diff --git a/src/shadcn/ui/multi-select.tsx b/src/shadcn/ui/multi-select.tsx index b316762..50bbd32 100644 --- a/src/shadcn/ui/multi-select.tsx +++ b/src/shadcn/ui/multi-select.tsx @@ -1,17 +1,17 @@ -"use client" +"use client"; -import React from "react" -import { CaretSortIcon, CheckIcon, Cross2Icon } from "@radix-ui/react-icons" -import * as PopoverPrimitive from "@radix-ui/react-popover" +import React from "react"; +import { CaretSortIcon, CheckIcon, Cross2Icon } from "@radix-ui/react-icons"; +import * as PopoverPrimitive from "@radix-ui/react-popover"; import { Primitive, type ComponentPropsWithoutRef, -} from "@radix-ui/react-primitive" -import { useControllableState } from "@radix-ui/react-use-controllable-state" -import { createPortal } from "react-dom" +} from "@radix-ui/react-primitive"; +import { useControllableState } from "@radix-ui/react-use-controllable-state"; +import { createPortal } from "react-dom"; -import { cn } from "src" -import { Badge } from "src" +import { cn } from "src"; +import { Badge } from "src"; import { Command, CommandEmpty, @@ -20,66 +20,61 @@ import { CommandItem, CommandList, CommandSeparator, -} from "src" -import { - Tooltip, - TooltipContent, - TooltipProvider, - TooltipTrigger, -} from "src" +} from "src"; +import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "src"; export interface MultiSelectOptionItem { - value: string - label?: React.ReactNode + value: string; + label?: React.ReactNode; } interface MultiSelectContextValue { - value: string[] + value: string[]; - open: boolean + open: boolean; - onSelect(value: string, item: MultiSelectOptionItem): void + onSelect(value: string, item: MultiSelectOptionItem): void; - onDeselect(value: string, item: MultiSelectOptionItem): void + onDeselect(value: string, item: MultiSelectOptionItem): void; - onSearch?(keyword: string | undefined): void + onSearch?(keyword: string | undefined): void; - filter?: boolean | ((keyword: string, current: string) => boolean) + filter?: boolean | ((keyword: string, current: string) => boolean); - disabled?: boolean + disabled?: boolean; - maxCount?: number + maxCount?: number; - itemCache: Map + itemCache: Map; } const MultiSelectContext = React.createContext< MultiSelectContextValue | undefined ->(undefined) +>(undefined); const useMultiSelect = () => { - const context = React.useContext(MultiSelectContext) + const context = React.useContext(MultiSelectContext); if (!context) { - throw new Error("useMultiSelect must be used within MultiSelectProvider") + throw new Error("useMultiSelect must be used within MultiSelectProvider"); } - return context -} + return context; +}; type MultiSelectProps = React.ComponentPropsWithoutRef< typeof PopoverPrimitive.Root > & { - value?: string[] - onValueChange?(value: string[], items: MultiSelectOptionItem[]): void - onSelect?(value: string, item: MultiSelectOptionItem): void - onDeselect?(value: string, item: MultiSelectOptionItem): void - defaultValue?: string[] - onSearch?(keyword: string | undefined): void - filter?: boolean | ((keyword: string, current: string) => boolean) - disabled?: boolean - maxCount?: number -} + value?: string[]; + onValueChange?(value: string[], items: MultiSelectOptionItem[]): void; + onSelect?(value: string, item: MultiSelectOptionItem): void; + onDeselect?(value: string, item: MultiSelectOptionItem): void; + defaultValue?: string[]; + onSearch?(keyword: string | undefined): void; + filter?: boolean | ((keyword: string, current: string) => boolean); + disabled?: boolean; + maxCount?: number; +}; const MultiSelect: React.FC = ({ value: valueProp, @@ -98,60 +93,60 @@ const MultiSelect: React.FC = ({ }) => { const itemCache = React.useRef( new Map() - ).current + ).current; const handleValueChange = React.useCallback( (state: string[]) => { if (onValueChangeProp) { - const items = state.map((value) => itemCache.get(value)!) + const items = state.map((value) => itemCache.get(value)!); - onValueChangeProp(state, items) + onValueChangeProp(state, items); } }, [onValueChangeProp] - ) + ); const [value, setValue] = useControllableState({ prop: valueProp, defaultProp: defaultValue, onChange: handleValueChange, - }) + }); const [open, setOpen] = useControllableState({ prop: openProp, defaultProp: defaultOpen, onChange: onOpenChange, - }) + }); const handleSelect = React.useCallback( (value: string, item: MultiSelectOptionItem) => { setValue((prev) => { if (prev?.includes(value)) { - return prev + return prev; } - onSelectProp?.(value, item) + onSelectProp?.(value, item); - return prev ? [...prev, value] : [value] - }) + return prev ? [...prev, value] : [value]; + }); }, [onSelectProp, setValue] - ) + ); const handleDeselect = React.useCallback( (value: string, item: MultiSelectOptionItem) => { setValue((prev) => { if (!prev || !prev.includes(value)) { - return prev + return prev; } - onDeselectProp?.(value, item) + onDeselectProp?.(value, item); - return prev.filter((v) => v !== value) - }) + return prev.filter((v) => v !== value); + }); }, [onDeselectProp, setValue] - ) + ); const contextValue = React.useMemo(() => { return { @@ -164,7 +159,7 @@ const MultiSelect: React.FC = ({ onSelect: handleSelect, onDeselect: handleDeselect, itemCache, - } + }; }, [ value, open, @@ -174,7 +169,7 @@ const MultiSelect: React.FC = ({ maxCount, handleSelect, handleDeselect, - ]) + ]); return ( @@ -184,26 +179,26 @@ const MultiSelect: React.FC = ({ onOpenChange={setOpen} /> - ) -} + ); +}; -MultiSelect.displayName = "MultiSelect" +MultiSelect.displayName = "MultiSelect"; -type MultiSelectTriggerElement = React.ElementRef +type MultiSelectTriggerElement = React.ElementRef; interface MultiSelectTriggerProps extends ComponentPropsWithoutRef {} const PreventClick = (e: React.MouseEvent | React.TouchEvent) => { - e.preventDefault() - e.stopPropagation() -} + e.preventDefault(); + e.stopPropagation(); +}; const MultiSelectTrigger = React.forwardRef< MultiSelectTriggerElement, MultiSelectTriggerProps >(({ className, children, ...props }, forwardedRef) => { - const { disabled } = useMultiSelect() + const { disabled } = useMultiSelect(); return ( @@ -212,7 +207,7 @@ const MultiSelectTrigger = React.forwardRef< data-disabled={disabled} {...props} className={cn( - "flex h-full min-h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring [&>span]:line-clamp-1", + "flex h-full min-h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring [&>span]:line-clamp-1", disabled ? "cursor-not-allowed opacity-50" : "cursor-text", className )} @@ -220,19 +215,19 @@ const MultiSelectTrigger = React.forwardRef< onTouchStart={disabled ? PreventClick : props.onTouchStart} > {children} - +
- ) -}) + ); +}); -MultiSelectTrigger.displayName = "MultiSelectTrigger" +MultiSelectTrigger.displayName = "MultiSelectTrigger"; interface MultiSelectValueProps extends ComponentPropsWithoutRef { - placeholder?: string - maxDisplay?: number - maxItemLength?: number + placeholder?: string; + maxDisplay?: number; + maxItemLength?: number; } const MultiSelectValue = React.forwardRef< @@ -243,23 +238,23 @@ const MultiSelectValue = React.forwardRef< { className, placeholder, maxDisplay, maxItemLength, ...props }, forwardRef ) => { - const { value, itemCache, onDeselect } = useMultiSelect() - const [firstRendered, setFirstRendered] = React.useState(false) + const { value, itemCache, onDeselect } = useMultiSelect(); + const [firstRendered, setFirstRendered] = React.useState(false); const renderRemain = - maxDisplay && value.length > maxDisplay ? value.length - maxDisplay : 0 - const renderItems = renderRemain ? value.slice(0, maxDisplay) : value + maxDisplay && value.length > maxDisplay ? value.length - maxDisplay : 0; + const renderItems = renderRemain ? value.slice(0, maxDisplay) : value; React.useLayoutEffect(() => { - setFirstRendered(true) - }, []) + setFirstRendered(true); + }, []); if (!value.length || !firstRendered) { return ( - + {placeholder} - ) + ); } return ( @@ -273,71 +268,71 @@ const MultiSelectValue = React.forwardRef< ref={forwardRef} > {renderItems.map((value) => { - const item = itemCache.get(value) + const item = itemCache.get(value); - const content = item?.label || value + const content = item?.label || value; const child = maxItemLength && typeof content === "string" && content.length > maxItemLength ? `${content.slice(0, maxItemLength)}...` - : content + : content; const el = ( { - e.preventDefault() - e.stopPropagation() - onDeselect(value, item!) + e.preventDefault(); + e.stopPropagation(); + onDeselect(value, item!); }} > {child} - + - ) + ); if (child !== content) { return ( - {el} + {el} {content} - ) + ); } - return el + return el; })} {renderRemain ? ( - + +{renderRemain} ) : null}
- ) + ); } -) +); const MultiSelectSearch = React.forwardRef< React.ElementRef, ComponentPropsWithoutRef >((props, ref) => { - const { onSearch } = useMultiSelect() + const { onSearch } = useMultiSelect(); - return -}) + return ; +}); -MultiSelectSearch.displayName = "MultiSelectSearch" +MultiSelectSearch.displayName = "MultiSelectSearch"; const MultiSelectList = React.forwardRef< React.ElementRef, @@ -349,10 +344,10 @@ const MultiSelectList = React.forwardRef< className={cn("py-1 px-0 max-h-[unset]", className)} {...props} /> - ) -}) + ); +}); -MultiSelectList.displayName = "MultiSelectList" +MultiSelectList.displayName = "MultiSelectList"; interface MultiSelectContentProps extends ComponentPropsWithoutRef {} @@ -361,25 +356,25 @@ const MultiSelectContent = React.forwardRef< React.ElementRef, MultiSelectContentProps >(({ className, children, ...props }, ref) => { - const context = useMultiSelect() + const context = useMultiSelect(); - const fragmentRef = React.useRef() + const fragmentRef = React.useRef(); if (!fragmentRef.current && typeof window !== "undefined") { - fragmentRef.current = document.createDocumentFragment() + fragmentRef.current = document.createDocumentFragment(); } if (!context.open) { return fragmentRef.current ? createPortal({children}, fragmentRef.current) - : null + : null; } return ( - ) -}) + ); +}); type MultiSelectItemProps = ComponentPropsWithoutRef & Partial & { - onSelect?: (value: string, item: MultiSelectOptionItem) => void - onDeselect?: (value: string, item: MultiSelectOptionItem) => void - } + onSelect?: (value: string, item: MultiSelectOptionItem) => void; + onDeselect?: (value: string, item: MultiSelectOptionItem) => void; + }; const MultiSelectItem = React.forwardRef< React.ElementRef, @@ -443,7 +438,7 @@ const MultiSelectItem = React.forwardRef< onSelect, onDeselect, itemCache, - } = useMultiSelect() + } = useMultiSelect(); const item = React.useMemo(() => { return value @@ -452,31 +447,31 @@ const MultiSelectItem = React.forwardRef< label: label || (typeof children === "string" ? children : undefined), } - : undefined - }, [value, label, children]) + : undefined; + }, [value, label, children]); - const selected = Boolean(value && contextValue.includes(value)) + const selected = Boolean(value && contextValue.includes(value)); React.useEffect(() => { if (value) { - itemCache.set(value, item!) + itemCache.set(value, item!); } - }, [selected, value, item]) + }, [selected, value, item]); const disabled = Boolean( disabledProp || (!selected && maxCount && contextValue.length >= maxCount) - ) + ); const handleClick = () => { if (selected) { - onDeselectProp?.(value!, item!) - onDeselect(value!, item!) + onDeselectProp?.(value!, item!); + onDeselect(value!, item!); } else { - itemCache.set(value!, item!) - onSelectProp?.(value!, item!) - onSelect(value!, item!) + itemCache.set(value!, item!); + onSelectProp?.(value!, item!); + onSelect(value!, item!); } - } + }; return ( - + {children || label || value} - {selected ? : null} + {selected ? : null} - ) + ); } -) +); const MultiSelectGroup = React.forwardRef< React.ElementRef, ComponentPropsWithoutRef >((props, forwardRef) => { - return -}) + return ; +}); -MultiSelectGroup.displayName = "MultiSelectGroup" +MultiSelectGroup.displayName = "MultiSelectGroup"; const MultiSelectSeparator = React.forwardRef< React.ElementRef, ComponentPropsWithoutRef >((props, forwardRef) => { - return -}) + return ; +}); -MultiSelectSeparator.displayName = "MultiSelectSeparator" +MultiSelectSeparator.displayName = "MultiSelectSeparator"; const MultiSelectEmpty = React.forwardRef< React.ElementRef, @@ -525,19 +520,19 @@ const MultiSelectEmpty = React.forwardRef< {children} - ) -}) + ); +}); -MultiSelectEmpty.displayName = "MultiSelectEmpty" +MultiSelectEmpty.displayName = "MultiSelectEmpty"; export interface MultiSelectOptionSeparator { - type: "separator" + type: "separator"; } export interface MultiSelectOptionGroup { - heading?: React.ReactNode - value?: string - children: MultiSelectOption[] + heading?: React.ReactNode; + value?: string; + children: MultiSelectOption[]; } export type MultiSelectOption = @@ -546,16 +541,16 @@ export type MultiSelectOption = "value" | "label" | "disabled" | "onSelect" | "onDeselect" > | MultiSelectOptionSeparator - | MultiSelectOptionGroup + | MultiSelectOptionGroup; const renderMultiSelectOptions = (list: MultiSelectOption[]) => { return list.map((option, index) => { if ("type" in option) { if (option.type === "separator") { - return + return ; } - return null + return null; } if ("children" in option) { @@ -567,16 +562,16 @@ const renderMultiSelectOptions = (list: MultiSelectOption[]) => { > {renderMultiSelectOptions(option.children)} - ) + ); } return ( {option.label} - ) - }) -} + ); + }); +}; export { MultiSelect, @@ -590,4 +585,4 @@ export { MultiSelectSeparator, MultiSelectEmpty, renderMultiSelectOptions, -} +}; diff --git a/src/shadcn/ui/select.tsx b/src/shadcn/ui/select.tsx index a46e0b8..400cc84 100644 --- a/src/shadcn/ui/select.tsx +++ b/src/shadcn/ui/select.tsx @@ -1,21 +1,21 @@ -"use client" +"use client"; -import * as React from "react" +import * as React from "react"; import { CaretSortIcon, CheckIcon, ChevronDownIcon, ChevronUpIcon, -} from "@radix-ui/react-icons" -import * as SelectPrimitive from "@radix-ui/react-select" +} from "@radix-ui/react-icons"; +import * as SelectPrimitive from "@radix-ui/react-select"; -import { cn } from "src/utils" +import { cn } from "src/utils"; -const Select = SelectPrimitive.Root +const Select = SelectPrimitive.Root; -const SelectGroup = SelectPrimitive.Group +const SelectGroup = SelectPrimitive.Group; -const SelectValue = SelectPrimitive.Value +const SelectValue = SelectPrimitive.Value; const SelectTrigger = React.forwardRef< React.ElementRef, @@ -24,18 +24,18 @@ const SelectTrigger = React.forwardRef< span]:line-clamp-1", + "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className )} {...props} > {children} - + -)) -SelectTrigger.displayName = SelectPrimitive.Trigger.displayName +)); +SelectTrigger.displayName = SelectPrimitive.Trigger.displayName; const SelectScrollUpButton = React.forwardRef< React.ElementRef, @@ -51,8 +51,8 @@ const SelectScrollUpButton = React.forwardRef< > -)) -SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName +)); +SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName; const SelectScrollDownButton = React.forwardRef< React.ElementRef, @@ -68,9 +68,9 @@ const SelectScrollDownButton = React.forwardRef< > -)) +)); SelectScrollDownButton.displayName = - SelectPrimitive.ScrollDownButton.displayName + SelectPrimitive.ScrollDownButton.displayName; const SelectContent = React.forwardRef< React.ElementRef, @@ -101,8 +101,8 @@ const SelectContent = React.forwardRef< -)) -SelectContent.displayName = SelectPrimitive.Content.displayName +)); +SelectContent.displayName = SelectPrimitive.Content.displayName; const SelectLabel = React.forwardRef< React.ElementRef, @@ -113,8 +113,8 @@ const SelectLabel = React.forwardRef< className={cn("px-2 py-1.5 text-sm font-semibold", className)} {...props} /> -)) -SelectLabel.displayName = SelectPrimitive.Label.displayName +)); +SelectLabel.displayName = SelectPrimitive.Label.displayName; const SelectItem = React.forwardRef< React.ElementRef, @@ -128,15 +128,15 @@ const SelectItem = React.forwardRef< )} {...props} > - + - + {children} -)) -SelectItem.displayName = SelectPrimitive.Item.displayName +)); +SelectItem.displayName = SelectPrimitive.Item.displayName; const SelectSeparator = React.forwardRef< React.ElementRef, @@ -147,8 +147,8 @@ const SelectSeparator = React.forwardRef< className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} /> -)) -SelectSeparator.displayName = SelectPrimitive.Separator.displayName +)); +SelectSeparator.displayName = SelectPrimitive.Separator.displayName; export { Select, @@ -161,4 +161,4 @@ export { SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, -} +}; diff --git a/src/shadcn/ui/textarea.tsx b/src/shadcn/ui/textarea.tsx index db8618d..d4ad44d 100644 --- a/src/shadcn/ui/textarea.tsx +++ b/src/shadcn/ui/textarea.tsx @@ -1,6 +1,6 @@ -import * as React from "react" +import * as React from "react"; -import { cn } from "src/utils" +import { cn } from "src/utils"; export interface TextareaProps extends React.TextareaHTMLAttributes {} @@ -10,15 +10,15 @@ const Textarea = React.forwardRef( return (