diff --git a/services/frontend/src/components/ui/accordion.tsx b/services/frontend/src/components/ui/accordion.tsx index 597ef3c..952c369 100644 --- a/services/frontend/src/components/ui/accordion.tsx +++ b/services/frontend/src/components/ui/accordion.tsx @@ -1,7 +1,6 @@ -import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion" - -import { cn } from "@/lib/utils" -import { ChevronDownIcon, ChevronUpIcon } from "lucide-react" +import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"; +import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"; +import { cn } from "@/lib/utils"; function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) { return ( @@ -10,7 +9,7 @@ function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) { className={cn("flex w-full flex-col", className)} {...props} /> - ) + ); } function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) { @@ -20,7 +19,7 @@ function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) { className={cn("not-last:border-b", className)} {...props} /> - ) + ); } function AccordionTrigger({ @@ -34,16 +33,22 @@ function AccordionTrigger({ data-slot="accordion-trigger" className={cn( "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", - className + className, )} {...props} > {children} - - + + - ) + ); } function AccordionContent({ @@ -60,13 +65,13 @@ function AccordionContent({
{children}
- ) + ); } -export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } +export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }; diff --git a/services/frontend/src/components/ui/alert-dialog.tsx b/services/frontend/src/components/ui/alert-dialog.tsx index 0ee2c5f..243fafd 100644 --- a/services/frontend/src/components/ui/alert-dialog.tsx +++ b/services/frontend/src/components/ui/alert-dialog.tsx @@ -1,25 +1,24 @@ -"use client" +"use client"; -import * as React from "react" -import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog" - -import { cn } from "@/lib/utils" -import { Button } from "@/components/ui/button" +import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"; +import type * as React from "react"; +import { Button } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) { - return + return ; } function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) { return ( - ) + ); } function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) { return ( - ) + ); } function AlertDialogOverlay({ @@ -31,11 +30,11 @@ function AlertDialogOverlay({ data-slot="alert-dialog-overlay" className={cn( "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", - className + className, )} {...props} /> - ) + ); } function AlertDialogContent({ @@ -43,7 +42,7 @@ function AlertDialogContent({ size = "default", ...props }: AlertDialogPrimitive.Popup.Props & { - size?: "default" | "sm" + size?: "default" | "sm"; }) { return ( @@ -53,12 +52,12 @@ function AlertDialogContent({ data-size={size} className={cn( "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", - className + className, )} {...props} /> - ) + ); } function AlertDialogHeader({ @@ -70,11 +69,11 @@ function AlertDialogHeader({ data-slot="alert-dialog-header" className={cn( "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", - className + className, )} {...props} /> - ) + ); } function AlertDialogFooter({ @@ -86,11 +85,11 @@ function AlertDialogFooter({ data-slot="alert-dialog-footer" className={cn( "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", - className + className, )} {...props} /> - ) + ); } function AlertDialogMedia({ @@ -102,11 +101,11 @@ function AlertDialogMedia({ data-slot="alert-dialog-media" className={cn( "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", - className + className, )} {...props} /> - ) + ); } function AlertDialogTitle({ @@ -118,11 +117,11 @@ function AlertDialogTitle({ data-slot="alert-dialog-title" className={cn( "font-heading text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", - className + className, )} {...props} /> - ) + ); } function AlertDialogDescription({ @@ -134,11 +133,11 @@ function AlertDialogDescription({ data-slot="alert-dialog-description" className={cn( "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", - className + className, )} {...props} /> - ) + ); } function AlertDialogAction({ @@ -151,7 +150,7 @@ function AlertDialogAction({ className={cn(className)} {...props} /> - ) + ); } function AlertDialogCancel({ @@ -168,7 +167,7 @@ function AlertDialogCancel({ render={ - ) + ); } function CarouselNext({ @@ -207,7 +208,7 @@ function CarouselNext({ size = "icon-sm", ...props }: React.ComponentProps) { - const { orientation, scrollNext, canScrollNext } = useCarousel() + const { orientation, scrollNext, canScrollNext } = useCarousel(); return ( - ) + ); } export { - type CarouselApi, Carousel, + type CarouselApi, CarouselContent, CarouselItem, - CarouselPrevious, CarouselNext, + CarouselPrevious, useCarousel, -} +}; diff --git a/services/frontend/src/components/ui/chart.tsx b/services/frontend/src/components/ui/chart.tsx index 7c2dc84..82cce52 100644 --- a/services/frontend/src/components/ui/chart.tsx +++ b/services/frontend/src/components/ui/chart.tsx @@ -1,42 +1,42 @@ -"use client" +"use client"; -import * as React from "react" -import * as RechartsPrimitive from "recharts" -import type { TooltipValueType } from "recharts" +import * as React from "react"; +import type { TooltipValueType } from "recharts"; +import * as RechartsPrimitive from "recharts"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; // Format: { THEME_NAME: CSS_SELECTOR } -const THEMES = { light: "", dark: ".dark" } as const +const THEMES = { light: "", dark: ".dark" } as const; -const INITIAL_DIMENSION = { width: 320, height: 200 } as const -type TooltipNameType = number | string +const INITIAL_DIMENSION = { width: 320, height: 200 } as const; +type TooltipNameType = number | string; export type ChartConfig = Record< string, { - label?: React.ReactNode - icon?: React.ComponentType + label?: React.ReactNode; + icon?: React.ComponentType; } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ) -> +>; type ChartContextProps = { - config: ChartConfig -} + config: ChartConfig; +}; -const ChartContext = React.createContext(null) +const ChartContext = React.createContext(null); function useChart() { - const context = React.useContext(ChartContext) + const context = React.useContext(ChartContext); if (!context) { - throw new Error("useChart must be used within a ") + throw new Error("useChart must be used within a "); } - return context + return context; } function ChartContainer({ @@ -47,17 +47,17 @@ function ChartContainer({ initialDimension = INITIAL_DIMENSION, ...props }: React.ComponentProps<"div"> & { - config: ChartConfig + config: ChartConfig; children: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer - >["children"] + >["children"]; initialDimension?: { - width: number - height: number - } + width: number; + height: number; + }; }) { - const uniqueId = React.useId() - const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}` + const uniqueId = React.useId(); + const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`; return ( @@ -66,7 +66,7 @@ function ChartContainer({ data-chart={chartId} className={cn( "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", - className + className, )} {...props} > @@ -78,43 +78,39 @@ function ChartContainer({ - ) + ); } const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( - ([, config]) => config.theme ?? config.color - ) + ([, config]) => config.theme ?? config.color, + ); if (!colorConfig.length) { - return null + return null; } - return ( - ; +}; + +const ChartTooltip = RechartsPrimitive.Tooltip; function ChartTooltipContent({ active, @@ -132,11 +128,11 @@ function ChartTooltipContent({ labelKey, }: React.ComponentProps & React.ComponentProps<"div"> & { - hideLabel?: boolean - hideIndicator?: boolean - indicator?: "line" | "dot" | "dashed" - nameKey?: string - labelKey?: string + hideLabel?: boolean; + hideIndicator?: boolean; + indicator?: "line" | "dot" | "dashed"; + nameKey?: string; + labelKey?: string; } & Omit< RechartsPrimitive.DefaultTooltipContentProps< TooltipValueType, @@ -144,34 +140,34 @@ function ChartTooltipContent({ >, "accessibilityLayer" >) { - const { config } = useChart() + const { config } = useChart(); const tooltipLabel = React.useMemo(() => { if (hideLabel || !payload?.length) { - return null + return null; } - const [item] = payload - const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}` - const itemConfig = getPayloadConfigFromPayload(config, item, key) + const [item] = payload; + const key = `${labelKey ?? item?.dataKey ?? item?.name ?? "value"}`; + const itemConfig = getPayloadConfigFromPayload(config, item, key); const value = !labelKey && typeof label === "string" ? (config[label]?.label ?? label) - : itemConfig?.label + : itemConfig?.label; if (labelFormatter) { return (
{labelFormatter(value, payload)}
- ) + ); } if (!value) { - return null + return null; } - return
{value}
+ return
{value}
; }, [ label, labelFormatter, @@ -180,36 +176,36 @@ function ChartTooltipContent({ labelClassName, config, labelKey, - ]) + ]); if (!active || !payload?.length) { - return null + return null; } - const nestLabel = payload.length === 1 && indicator !== "dot" + const nestLabel = payload.length === 1 && indicator !== "dot"; return (
{!nestLabel ? tooltipLabel : null}
{payload .filter((item) => item.type !== "none") - .map((item, index) => { - const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}` - const itemConfig = getPayloadConfigFromPayload(config, item, key) - const indicatorColor = color ?? item.payload?.fill ?? item.color + .map((item) => { + const key = `${nameKey ?? item.name ?? item.dataKey ?? "value"}`; + const itemConfig = getPayloadConfigFromPayload(config, item, key); + const indicatorColor = color ?? item.payload?.fill ?? item.color; return (
svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", - indicator === "dot" && "items-center" + indicator === "dot" && "items-center", )} > {formatter && item?.value !== undefined && item.name ? ( @@ -229,7 +225,7 @@ function ChartTooltipContent({ "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", "my-0.5": nestLabel && indicator === "dashed", - } + }, )} style={ { @@ -243,7 +239,7 @@ function ChartTooltipContent({
@@ -263,14 +259,14 @@ function ChartTooltipContent({ )}
- ) + ); })}
- ) + ); } -const ChartLegend = RechartsPrimitive.Legend +const ChartLegend = RechartsPrimitive.Legend; function ChartLegendContent({ className, @@ -279,13 +275,13 @@ function ChartLegendContent({ verticalAlign = "bottom", nameKey, }: React.ComponentProps<"div"> & { - hideIcon?: boolean - nameKey?: string + hideIcon?: boolean; + nameKey?: string; } & RechartsPrimitive.DefaultLegendContentProps) { - const { config } = useChart() + const { config } = useChart(); if (!payload?.length) { - return null + return null; } return ( @@ -293,20 +289,20 @@ function ChartLegendContent({ className={cn( "flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", - className + className, )} > {payload .filter((item) => item.type !== "none") - .map((item, index) => { - const key = `${nameKey ?? item.dataKey ?? "value"}` - const itemConfig = getPayloadConfigFromPayload(config, item, key) + .map((item) => { + const key = `${nameKey ?? item.dataKey ?? "value"}`; + const itemConfig = getPayloadConfigFromPayload(config, item, key); return (
svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground" + "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground", )} > {itemConfig?.icon && !hideIcon ? ( @@ -321,19 +317,19 @@ function ChartLegendContent({ )} {itemConfig?.label}
- ) + ); })}
- ) + ); } function getPayloadConfigFromPayload( config: ChartConfig, payload: unknown, - key: string + key: string, ) { if (typeof payload !== "object" || payload === null) { - return undefined + return undefined; } const payloadPayload = @@ -341,15 +337,15 @@ function getPayloadConfigFromPayload( typeof payload.payload === "object" && payload.payload !== null ? payload.payload - : undefined + : undefined; - let configLabelKey: string = key + let configLabelKey: string = key; if ( key in payload && typeof payload[key as keyof typeof payload] === "string" ) { - configLabelKey = payload[key as keyof typeof payload] as string + configLabelKey = payload[key as keyof typeof payload] as string; } else if ( payloadPayload && key in payloadPayload && @@ -357,17 +353,17 @@ function getPayloadConfigFromPayload( ) { configLabelKey = payloadPayload[ key as keyof typeof payloadPayload - ] as string + ] as string; } - return configLabelKey in config ? config[configLabelKey] : config[key] + return configLabelKey in config ? config[configLabelKey] : config[key]; } export { ChartContainer, - ChartTooltip, - ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, -} + ChartTooltip, + ChartTooltipContent, +}; diff --git a/services/frontend/src/components/ui/checkbox.tsx b/services/frontend/src/components/ui/checkbox.tsx index 4fcd847..57a2e2d 100644 --- a/services/frontend/src/components/ui/checkbox.tsx +++ b/services/frontend/src/components/ui/checkbox.tsx @@ -1,9 +1,8 @@ -"use client" +"use client"; -import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox" - -import { cn } from "@/lib/utils" -import { CheckIcon } from "lucide-react" +import { Checkbox as CheckboxPrimitive } from "@base-ui/react/checkbox"; +import { CheckIcon } from "lucide-react"; +import { cn } from "@/lib/utils"; function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) { return ( @@ -11,7 +10,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) { data-slot="checkbox" className={cn( "peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", - className + className, )} {...props} > @@ -19,11 +18,10 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) { data-slot="checkbox-indicator" className="grid place-content-center text-current transition-none [&>svg]:size-3.5" > - + - ) + ); } -export { Checkbox } +export { Checkbox }; diff --git a/services/frontend/src/components/ui/collapsible.tsx b/services/frontend/src/components/ui/collapsible.tsx index 488fb33..e321d34 100644 --- a/services/frontend/src/components/ui/collapsible.tsx +++ b/services/frontend/src/components/ui/collapsible.tsx @@ -1,21 +1,21 @@ -"use client" +"use client"; -import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible" +import { Collapsible as CollapsiblePrimitive } from "@base-ui/react/collapsible"; function Collapsible({ ...props }: CollapsiblePrimitive.Root.Props) { - return + return ; } function CollapsibleTrigger({ ...props }: CollapsiblePrimitive.Trigger.Props) { return ( - ) + ); } function CollapsibleContent({ ...props }: CollapsiblePrimitive.Panel.Props) { return ( - ) + ); } -export { Collapsible, CollapsibleTrigger, CollapsibleContent } +export { Collapsible, CollapsibleContent, CollapsibleTrigger }; diff --git a/services/frontend/src/components/ui/combobox.tsx b/services/frontend/src/components/ui/combobox.tsx index 39e2b93..0144401 100644 --- a/services/frontend/src/components/ui/combobox.tsx +++ b/services/frontend/src/components/ui/combobox.tsx @@ -1,22 +1,21 @@ -"use client" +"use client"; -import * as React from "react" -import { Combobox as ComboboxPrimitive } from "@base-ui/react" - -import { cn } from "@/lib/utils" -import { Button } from "@/components/ui/button" +import { Combobox as ComboboxPrimitive } from "@base-ui/react"; +import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react"; +import * as React from "react"; +import { Button } from "@/components/ui/button"; import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, -} from "@/components/ui/input-group" -import { ChevronDownIcon, XIcon, CheckIcon } from "lucide-react" +} from "@/components/ui/input-group"; +import { cn } from "@/lib/utils"; -const Combobox = ComboboxPrimitive.Root +const Combobox = ComboboxPrimitive.Root; function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) { - return + return ; } function ComboboxTrigger({ @@ -33,7 +32,7 @@ function ComboboxTrigger({ {children} - ) + ); } function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) { @@ -46,7 +45,7 @@ function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) { > - ) + ); } function ComboboxInput({ @@ -57,8 +56,8 @@ function ComboboxInput({ showClear = false, ...props }: ComboboxPrimitive.Input.Props & { - showTrigger?: boolean - showClear?: boolean + showTrigger?: boolean; + showClear?: boolean; }) { return ( @@ -81,7 +80,7 @@ function ComboboxInput({ {children} - ) + ); } function ComboboxContent({ @@ -110,12 +109,15 @@ function ComboboxContent({ - ) + ); } function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) { @@ -124,11 +126,11 @@ function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) { data-slot="combobox-list" className={cn( "no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1 overflow-y-auto overscroll-contain p-1 data-empty:p-0", - className + className, )} {...props} /> - ) + ); } function ComboboxItem({ @@ -141,7 +143,7 @@ function ComboboxItem({ data-slot="combobox-item" className={cn( "relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", - className + className, )} {...props} > @@ -154,7 +156,7 @@ function ComboboxItem({ - ) + ); } function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) { @@ -164,7 +166,7 @@ function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) { className={cn(className)} {...props} /> - ) + ); } function ComboboxLabel({ @@ -177,13 +179,13 @@ function ComboboxLabel({ className={cn("px-2 py-1.5 text-xs text-muted-foreground", className)} {...props} /> - ) + ); } function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) { return ( - ) + ); } function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) { @@ -192,11 +194,11 @@ function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) { data-slot="combobox-empty" className={cn( "hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex", - className + className, )} {...props} /> - ) + ); } function ComboboxSeparator({ @@ -209,7 +211,7 @@ function ComboboxSeparator({ className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} /> - ) + ); } function ComboboxChips({ @@ -222,11 +224,11 @@ function ComboboxChips({ data-slot="combobox-chips" className={cn( "flex min-h-8 flex-wrap items-center gap-1 rounded-lg border border-input bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50 has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 has-data-[slot=combobox-chip]:px-1 dark:bg-input/30 dark:has-aria-invalid:border-destructive/50 dark:has-aria-invalid:ring-destructive/40", - className + className, )} {...props} /> - ) + ); } function ComboboxChip({ @@ -235,14 +237,14 @@ function ComboboxChip({ showRemove = true, ...props }: ComboboxPrimitive.Chip.Props & { - showRemove?: boolean + showRemove?: boolean; }) { return ( @@ -257,7 +259,7 @@ function ComboboxChip({ )} - ) + ); } function ComboboxChipsInput({ @@ -270,28 +272,28 @@ function ComboboxChipsInput({ className={cn("min-w-16 flex-1 outline-none", className)} {...props} /> - ) + ); } function useComboboxAnchor() { - return React.useRef(null) + return React.useRef(null); } export { Combobox, - ComboboxInput, - ComboboxContent, - ComboboxList, - ComboboxItem, - ComboboxGroup, - ComboboxLabel, - ComboboxCollection, - ComboboxEmpty, - ComboboxSeparator, - ComboboxChips, ComboboxChip, + ComboboxChips, ComboboxChipsInput, + ComboboxCollection, + ComboboxContent, + ComboboxEmpty, + ComboboxGroup, + ComboboxInput, + ComboboxItem, + ComboboxLabel, + ComboboxList, + ComboboxSeparator, ComboboxTrigger, ComboboxValue, useComboboxAnchor, -} +}; diff --git a/services/frontend/src/components/ui/command.tsx b/services/frontend/src/components/ui/command.tsx index 37fb2d9..9e96c92 100644 --- a/services/frontend/src/components/ui/command.tsx +++ b/services/frontend/src/components/ui/command.tsx @@ -1,21 +1,17 @@ -"use client" +"use client"; -import * as React from "react" -import { Command as CommandPrimitive } from "cmdk" - -import { cn } from "@/lib/utils" +import { Command as CommandPrimitive } from "cmdk"; +import { CheckIcon, SearchIcon } from "lucide-react"; +import type * as React from "react"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, -} from "@/components/ui/dialog" -import { - InputGroup, - InputGroupAddon, -} from "@/components/ui/input-group" -import { SearchIcon, CheckIcon } from "lucide-react" +} from "@/components/ui/dialog"; +import { InputGroup, InputGroupAddon } from "@/components/ui/input-group"; +import { cn } from "@/lib/utils"; function Command({ className, @@ -26,11 +22,11 @@ function Command({ data-slot="command" className={cn( "flex size-full flex-col overflow-hidden rounded-xl! bg-popover p-1 text-popover-foreground", - className + className, )} {...props} /> - ) + ); } function CommandDialog({ @@ -41,11 +37,11 @@ function CommandDialog({ showCloseButton = false, ...props }: Omit, "children"> & { - title?: string - description?: string - className?: string - showCloseButton?: boolean - children: React.ReactNode + title?: string; + description?: string; + className?: string; + showCloseButton?: boolean; + children: React.ReactNode; }) { return ( @@ -56,14 +52,14 @@ function CommandDialog({ {children} - ) + ); } function CommandInput({ @@ -77,7 +73,7 @@ function CommandInput({ data-slot="command-input" className={cn( "w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", - className + className, )} {...props} /> @@ -86,7 +82,7 @@ function CommandInput({
- ) + ); } function CommandList({ @@ -98,11 +94,11 @@ function CommandList({ data-slot="command-list" className={cn( "no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none", - className + className, )} {...props} /> - ) + ); } function CommandEmpty({ @@ -115,7 +111,7 @@ function CommandEmpty({ className={cn("py-6 text-center text-sm", className)} {...props} /> - ) + ); } function CommandGroup({ @@ -127,11 +123,11 @@ function CommandGroup({ data-slot="command-group" className={cn( "overflow-hidden p-1 text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium **:[[cmdk-group-heading]]:text-muted-foreground", - className + className, )} {...props} /> - ) + ); } function CommandSeparator({ @@ -144,7 +140,7 @@ function CommandSeparator({ className={cn("-mx-1 h-px bg-border", className)} {...props} /> - ) + ); } function CommandItem({ @@ -157,14 +153,14 @@ function CommandItem({ data-slot="command-item" className={cn( "group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground", - className + className, )} {...props} > {children} - ) + ); } function CommandShortcut({ @@ -176,21 +172,21 @@ function CommandShortcut({ data-slot="command-shortcut" className={cn( "ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground", - className + className, )} {...props} /> - ) + ); } export { Command, CommandDialog, - CommandInput, - CommandList, CommandEmpty, CommandGroup, + CommandInput, CommandItem, - CommandShortcut, + CommandList, CommandSeparator, -} + CommandShortcut, +}; diff --git a/services/frontend/src/components/ui/context-menu.tsx b/services/frontend/src/components/ui/context-menu.tsx index 9c0eb98..2a0732a 100644 --- a/services/frontend/src/components/ui/context-menu.tsx +++ b/services/frontend/src/components/ui/context-menu.tsx @@ -1,19 +1,18 @@ -"use client" +"use client"; -import * as React from "react" -import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu" - -import { cn } from "@/lib/utils" -import { ChevronRightIcon, CheckIcon } from "lucide-react" +import { ContextMenu as ContextMenuPrimitive } from "@base-ui/react/context-menu"; +import { CheckIcon, ChevronRightIcon } from "lucide-react"; +import type * as React from "react"; +import { cn } from "@/lib/utils"; function ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) { - return + return ; } function ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) { return ( - ) + ); } function ContextMenuTrigger({ @@ -26,7 +25,7 @@ function ContextMenuTrigger({ className={cn("select-none", className)} {...props} /> - ) + ); } function ContextMenuContent({ @@ -52,18 +51,21 @@ function ContextMenuContent({ > - ) + ); } function ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) { return ( - ) + ); } function ContextMenuLabel({ @@ -71,7 +73,7 @@ function ContextMenuLabel({ inset, ...props }: ContextMenuPrimitive.GroupLabel.Props & { - inset?: boolean + inset?: boolean; }) { return ( - ) + ); } function ContextMenuItem({ @@ -92,8 +94,8 @@ function ContextMenuItem({ variant = "default", ...props }: ContextMenuPrimitive.Item.Props & { - inset?: boolean - variant?: "default" | "destructive" + inset?: boolean; + variant?: "default" | "destructive"; }) { return ( - ) + ); } function ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) { return ( - ) + ); } function ContextMenuSubTrigger({ @@ -121,7 +123,7 @@ function ContextMenuSubTrigger({ children, ...props }: ContextMenuPrimitive.SubmenuTrigger.Props & { - inset?: boolean + inset?: boolean; }) { return ( {children} - ) + ); } function ContextMenuSubContent({ @@ -149,7 +151,7 @@ function ContextMenuSubContent({ side="right" {...props} /> - ) + ); } function ContextMenuCheckboxItem({ @@ -159,7 +161,7 @@ function ContextMenuCheckboxItem({ inset, ...props }: ContextMenuPrimitive.CheckboxItem.Props & { - inset?: boolean + inset?: boolean; }) { return ( - + {children} - ) + ); } function ContextMenuRadioGroup({ @@ -191,7 +192,7 @@ function ContextMenuRadioGroup({ data-slot="context-menu-radio-group" {...props} /> - ) + ); } function ContextMenuRadioItem({ @@ -200,7 +201,7 @@ function ContextMenuRadioItem({ inset, ...props }: ContextMenuPrimitive.RadioItem.Props & { - inset?: boolean + inset?: boolean; }) { return ( - + {children} - ) + ); } function ContextMenuSeparator({ @@ -233,7 +233,7 @@ function ContextMenuSeparator({ className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} /> - ) + ); } function ContextMenuShortcut({ @@ -245,27 +245,27 @@ function ContextMenuShortcut({ data-slot="context-menu-shortcut" className={cn( "ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground", - className + className, )} {...props} /> - ) + ); } export { ContextMenu, - ContextMenuTrigger, - ContextMenuContent, - ContextMenuItem, ContextMenuCheckboxItem, - ContextMenuRadioItem, + ContextMenuContent, + ContextMenuGroup, + ContextMenuItem, ContextMenuLabel, + ContextMenuPortal, + ContextMenuRadioGroup, + ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, - ContextMenuGroup, - ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, - ContextMenuRadioGroup, -} + ContextMenuTrigger, +}; diff --git a/services/frontend/src/components/ui/dialog.tsx b/services/frontend/src/components/ui/dialog.tsx index 014f5aa..7992fb0 100644 --- a/services/frontend/src/components/ui/dialog.tsx +++ b/services/frontend/src/components/ui/dialog.tsx @@ -1,26 +1,25 @@ -"use client" +"use client"; -import * as React from "react" -import { Dialog as DialogPrimitive } from "@base-ui/react/dialog" - -import { cn } from "@/lib/utils" -import { Button } from "@/components/ui/button" -import { XIcon } from "lucide-react" +import { Dialog as DialogPrimitive } from "@base-ui/react/dialog"; +import { XIcon } from "lucide-react"; +import type * as React from "react"; +import { Button } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; function Dialog({ ...props }: DialogPrimitive.Root.Props) { - return + return ; } function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) { - return + return ; } function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) { - return + return ; } function DialogClose({ ...props }: DialogPrimitive.Close.Props) { - return + return ; } function DialogOverlay({ @@ -32,11 +31,11 @@ function DialogOverlay({ data-slot="dialog-overlay" className={cn( "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", - className + className, )} {...props} /> - ) + ); } function DialogContent({ @@ -45,7 +44,7 @@ function DialogContent({ showCloseButton = true, ...props }: DialogPrimitive.Popup.Props & { - showCloseButton?: boolean + showCloseButton?: boolean; }) { return ( @@ -54,7 +53,7 @@ function DialogContent({ data-slot="dialog-content" className={cn( "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", - className + className, )} {...props} > @@ -70,14 +69,13 @@ function DialogContent({ /> } > - + Close )} - ) + ); } function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { @@ -87,7 +85,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { className={cn("flex flex-col gap-2", className)} {...props} /> - ) + ); } function DialogFooter({ @@ -96,14 +94,14 @@ function DialogFooter({ children, ...props }: React.ComponentProps<"div"> & { - showCloseButton?: boolean + showCloseButton?: boolean; }) { return (
@@ -114,7 +112,7 @@ function DialogFooter({ )}
- ) + ); } function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) { @@ -123,11 +121,11 @@ function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) { data-slot="dialog-title" className={cn( "font-heading text-base leading-none font-medium", - className + className, )} {...props} /> - ) + ); } function DialogDescription({ @@ -139,11 +137,11 @@ function DialogDescription({ data-slot="dialog-description" className={cn( "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", - className + className, )} {...props} /> - ) + ); } export { @@ -157,4 +155,4 @@ export { DialogPortal, DialogTitle, DialogTrigger, -} +}; diff --git a/services/frontend/src/components/ui/direction.tsx b/services/frontend/src/components/ui/direction.tsx index d8cf134..0926874 100644 --- a/services/frontend/src/components/ui/direction.tsx +++ b/services/frontend/src/components/ui/direction.tsx @@ -1,6 +1,6 @@ -"use client" +"use client"; export { DirectionProvider, useDirection, -} from "@base-ui/react/direction-provider" +} from "@base-ui/react/direction-provider"; diff --git a/services/frontend/src/components/ui/drawer.tsx b/services/frontend/src/components/ui/drawer.tsx index bde74ac..2014c81 100644 --- a/services/frontend/src/components/ui/drawer.tsx +++ b/services/frontend/src/components/ui/drawer.tsx @@ -1,27 +1,27 @@ -"use client" +"use client"; -import * as React from "react" -import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer" +import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer"; +import * as React from "react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; type DrawerContextProps = { - hasSnapPoints: boolean - modal: DrawerPrimitive.Root.Props["modal"] - showSwipeHandle: boolean - swipeDirection: NonNullable -} + hasSnapPoints: boolean; + modal: DrawerPrimitive.Root.Props["modal"]; + showSwipeHandle: boolean; + swipeDirection: NonNullable; +}; -const DrawerContext = React.createContext(null) +const DrawerContext = React.createContext(null); function useDrawer() { - const context = React.useContext(DrawerContext) + const context = React.useContext(DrawerContext); if (!context) { - throw new Error("useDrawer must be used within a Drawer.") + throw new Error("useDrawer must be used within a Drawer."); } - return context + return context; } function Drawer({ @@ -31,13 +31,13 @@ function Drawer({ swipeDirection = "down", ...props }: DrawerPrimitive.Root.Props & { - showSwipeHandle?: boolean + showSwipeHandle?: boolean; }) { - const hasSnapPoints = snapPoints != null && snapPoints.length > 0 + const hasSnapPoints = snapPoints != null && snapPoints.length > 0; const contextValue = React.useMemo( () => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }), - [hasSnapPoints, modal, showSwipeHandle, swipeDirection] - ) + [hasSnapPoints, modal, showSwipeHandle, swipeDirection], + ); return ( @@ -49,19 +49,19 @@ function Drawer({ {...props} /> - ) + ); } function DrawerTrigger({ ...props }: DrawerPrimitive.Trigger.Props) { - return + return ; } function DrawerPortal({ ...props }: DrawerPrimitive.Portal.Props) { - return + return ; } function DrawerClose({ ...props }: DrawerPrimitive.Close.Props) { - return + return ; } function DrawerOverlay({ @@ -73,11 +73,11 @@ function DrawerOverlay({ data-slot="drawer-overlay" className={cn( "fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute", - className + className, )} {...props} /> - ) + ); } function DrawerSwipeHandle({ @@ -90,11 +90,11 @@ function DrawerSwipeHandle({ aria-hidden="true" className={cn( "relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing", - className + className, )} {...props} /> - ) + ); } function DrawerContent({ @@ -102,9 +102,9 @@ function DrawerContent({ children, ...props }: DrawerPrimitive.Popup.Props) { - const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer() + const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer(); const swipeAxis = - swipeDirection === "down" || swipeDirection === "up" ? "y" : "x" + swipeDirection === "down" || swipeDirection === "up" ? "y" : "x"; return ( @@ -145,7 +145,7 @@ function DrawerContent({ "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]", // Direction: right. "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]", - className + className, )} {...props} > @@ -153,7 +153,7 @@ function DrawerContent({ {children} @@ -161,7 +161,7 @@ function DrawerContent({ - ) + ); } function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) { @@ -170,11 +170,11 @@ function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) { data-slot="drawer-header" className={cn( "flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left", - className + className, )} {...props} /> - ) + ); } function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) { @@ -184,7 +184,7 @@ function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) { className={cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className)} {...props} /> - ) + ); } function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) { @@ -193,11 +193,11 @@ function DrawerTitle({ className, ...props }: DrawerPrimitive.Title.Props) { data-slot="drawer-title" className={cn( "font-heading text-base font-medium text-foreground", - className + className, )} {...props} /> - ) + ); } function DrawerDescription({ @@ -210,19 +210,19 @@ function DrawerDescription({ className={cn("text-sm text-balance text-muted-foreground", className)} {...props} /> - ) + ); } export { Drawer, - DrawerPortal, - DrawerOverlay, - DrawerSwipeHandle, - DrawerTrigger, DrawerClose, DrawerContent, - DrawerHeader, - DrawerFooter, - DrawerTitle, DrawerDescription, -} + DrawerFooter, + DrawerHeader, + DrawerOverlay, + DrawerPortal, + DrawerSwipeHandle, + DrawerTitle, + DrawerTrigger, +}; diff --git a/services/frontend/src/components/ui/dropdown-menu.tsx b/services/frontend/src/components/ui/dropdown-menu.tsx index 9d5ebbd..72c563f 100644 --- a/services/frontend/src/components/ui/dropdown-menu.tsx +++ b/services/frontend/src/components/ui/dropdown-menu.tsx @@ -1,21 +1,20 @@ -"use client" +"use client"; -import * as React from "react" -import { Menu as MenuPrimitive } from "@base-ui/react/menu" - -import { cn } from "@/lib/utils" -import { ChevronRightIcon, CheckIcon } from "lucide-react" +import { Menu as MenuPrimitive } from "@base-ui/react/menu"; +import { CheckIcon, ChevronRightIcon } from "lucide-react"; +import type * as React from "react"; +import { cn } from "@/lib/utils"; function DropdownMenu({ ...props }: MenuPrimitive.Root.Props) { - return + return ; } function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) { - return + return ; } function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) { - return + return ; } function DropdownMenuContent({ @@ -41,16 +40,19 @@ function DropdownMenuContent({ > - ) + ); } function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) { - return + return ; } function DropdownMenuLabel({ @@ -58,7 +60,7 @@ function DropdownMenuLabel({ inset, ...props }: MenuPrimitive.GroupLabel.Props & { - inset?: boolean + inset?: boolean; }) { return ( - ) + ); } function DropdownMenuItem({ @@ -79,8 +81,8 @@ function DropdownMenuItem({ variant = "default", ...props }: MenuPrimitive.Item.Props & { - inset?: boolean - variant?: "default" | "destructive" + inset?: boolean; + variant?: "default" | "destructive"; }) { return ( - ) + ); } function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) { - return + return ; } function DropdownMenuSubTrigger({ @@ -106,7 +108,7 @@ function DropdownMenuSubTrigger({ children, ...props }: MenuPrimitive.SubmenuTrigger.Props & { - inset?: boolean + inset?: boolean; }) { return ( {children} - ) + ); } function DropdownMenuSubContent({ @@ -135,14 +137,17 @@ function DropdownMenuSubContent({ return ( - ) + ); } function DropdownMenuCheckboxItem({ @@ -152,7 +157,7 @@ function DropdownMenuCheckboxItem({ inset, ...props }: MenuPrimitive.CheckboxItem.Props & { - inset?: boolean + inset?: boolean; }) { return ( - + {children} - ) + ); } function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) { @@ -185,7 +189,7 @@ function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) { data-slot="dropdown-menu-radio-group" {...props} /> - ) + ); } function DropdownMenuRadioItem({ @@ -194,7 +198,7 @@ function DropdownMenuRadioItem({ inset, ...props }: MenuPrimitive.RadioItem.Props & { - inset?: boolean + inset?: boolean; }) { return ( @@ -211,13 +215,12 @@ function DropdownMenuRadioItem({ data-slot="dropdown-menu-radio-item-indicator" > - + {children} - ) + ); } function DropdownMenuSeparator({ @@ -230,7 +233,7 @@ function DropdownMenuSeparator({ className={cn("-mx-1 my-1 h-px bg-border", className)} {...props} /> - ) + ); } function DropdownMenuShortcut({ @@ -242,27 +245,27 @@ function DropdownMenuShortcut({ data-slot="dropdown-menu-shortcut" className={cn( "ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", - className + className, )} {...props} /> - ) + ); } export { DropdownMenu, - DropdownMenuPortal, - DropdownMenuTrigger, + DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, - DropdownMenuLabel, DropdownMenuItem, - DropdownMenuCheckboxItem, + DropdownMenuLabel, + DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, - DropdownMenuSubTrigger, DropdownMenuSubContent, -} + DropdownMenuSubTrigger, + DropdownMenuTrigger, +}; diff --git a/services/frontend/src/components/ui/empty.tsx b/services/frontend/src/components/ui/empty.tsx index b23187b..ba3a183 100644 --- a/services/frontend/src/components/ui/empty.tsx +++ b/services/frontend/src/components/ui/empty.tsx @@ -1,6 +1,6 @@ -import { cva, type VariantProps } from "class-variance-authority" +import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; function Empty({ className, ...props }: React.ComponentProps<"div">) { return ( @@ -8,11 +8,11 @@ function Empty({ className, ...props }: React.ComponentProps<"div">) { data-slot="empty" className={cn( "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance", - className + className, )} {...props} /> - ) + ); } function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) { @@ -22,7 +22,7 @@ function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) { className={cn("flex max-w-sm flex-col items-center gap-2", className)} {...props} /> - ) + ); } const emptyMediaVariants = cva( @@ -37,8 +37,8 @@ const emptyMediaVariants = cva( defaultVariants: { variant: "default", }, - } -) + }, +); function EmptyMedia({ className, @@ -52,7 +52,7 @@ function EmptyMedia({ className={cn(emptyMediaVariants({ variant, className }))} {...props} /> - ) + ); } function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) { @@ -61,11 +61,11 @@ function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) { data-slot="empty-title" className={cn( "font-heading text-sm font-medium tracking-tight", - className + className, )} {...props} /> - ) + ); } function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) { @@ -74,11 +74,11 @@ function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) { data-slot="empty-description" className={cn( "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", - className + className, )} {...props} /> - ) + ); } function EmptyContent({ className, ...props }: React.ComponentProps<"div">) { @@ -87,18 +87,18 @@ function EmptyContent({ className, ...props }: React.ComponentProps<"div">) { data-slot="empty-content" className={cn( "flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance", - className + className, )} {...props} /> - ) + ); } export { Empty, - EmptyHeader, - EmptyTitle, - EmptyDescription, EmptyContent, + EmptyDescription, + EmptyHeader, EmptyMedia, -} + EmptyTitle, +}; diff --git a/services/frontend/src/components/ui/field.tsx b/services/frontend/src/components/ui/field.tsx index 2bc5bb6..4ea170c 100644 --- a/services/frontend/src/components/ui/field.tsx +++ b/services/frontend/src/components/ui/field.tsx @@ -1,11 +1,10 @@ -"use client" +"use client"; -import { useMemo } from "react" -import { cva, type VariantProps } from "class-variance-authority" - -import { cn } from "@/lib/utils" -import { Label } from "@/components/ui/label" -import { Separator } from "@/components/ui/separator" +import { cva, type VariantProps } from "class-variance-authority"; +import { useMemo } from "react"; +import { Label } from "@/components/ui/label"; +import { Separator } from "@/components/ui/separator"; +import { cn } from "@/lib/utils"; function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) { return ( @@ -13,11 +12,11 @@ function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) { data-slot="field-set" className={cn( "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", - className + className, )} {...props} /> - ) + ); } function FieldLegend({ @@ -31,11 +30,11 @@ function FieldLegend({ data-variant={variant} className={cn( "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", - className + className, )} {...props} /> - ) + ); } function FieldGroup({ className, ...props }: React.ComponentProps<"div">) { @@ -44,11 +43,11 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) { data-slot="field-group" className={cn( "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", - className + className, )} {...props} /> - ) + ); } const fieldVariants = cva( @@ -66,23 +65,22 @@ const fieldVariants = cva( defaultVariants: { orientation: "vertical", }, - } -) + }, +); function Field({ className, orientation = "vertical", ...props -}: React.ComponentProps<"div"> & VariantProps) { +}: React.ComponentProps<"fieldset"> & VariantProps) { return ( -
- ) + ); } function FieldContent({ className, ...props }: React.ComponentProps<"div">) { @@ -91,11 +89,11 @@ function FieldContent({ className, ...props }: React.ComponentProps<"div">) { data-slot="field-content" className={cn( "group/field-content flex flex-1 flex-col gap-0.5 leading-snug", - className + className, )} {...props} /> - ) + ); } function FieldLabel({ @@ -108,11 +106,11 @@ function FieldLabel({ className={cn( "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", - className + className, )} {...props} /> - ) + ); } function FieldTitle({ className, ...props }: React.ComponentProps<"div">) { @@ -121,11 +119,11 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) { data-slot="field-label" className={cn( "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50", - className + className, )} {...props} /> - ) + ); } function FieldDescription({ className, ...props }: React.ComponentProps<"p">) { @@ -136,11 +134,11 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) { "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", - className + className, )} {...props} /> - ) + ); } function FieldSeparator({ @@ -148,7 +146,7 @@ function FieldSeparator({ className, ...props }: React.ComponentProps<"div"> & { - children?: React.ReactNode + children?: React.ReactNode; }) { return (
@@ -170,7 +168,7 @@ function FieldSeparator({ )}
- ) + ); } function FieldError({ @@ -179,37 +177,39 @@ function FieldError({ errors, ...props }: React.ComponentProps<"div"> & { - errors?: Array<{ message?: string } | undefined> + errors?: Array<{ message?: string } | undefined>; }) { const content = useMemo(() => { if (children) { - return children + return children; } if (!errors?.length) { - return null + return null; } const uniqueErrors = [ ...new Map(errors.map((error) => [error?.message, error])).values(), - ] + ]; - if (uniqueErrors?.length == 1) { - return uniqueErrors[0]?.message + if (uniqueErrors?.length === 1) { + return uniqueErrors[0]?.message; } return (
    {uniqueErrors.map( (error, index) => - error?.message &&
  • {error.message}
    • + error?.message && ( +
  • {error.message}
    • + ), )}
- ) - }, [children, errors]) + ); + }, [children, errors]); if (!content) { - return null + return null; } return ( @@ -221,18 +221,18 @@ function FieldError({ > {content}
- ) + ); } export { Field, - FieldLabel, + FieldContent, FieldDescription, FieldError, FieldGroup, + FieldLabel, FieldLegend, FieldSeparator, FieldSet, - FieldContent, FieldTitle, -} +}; diff --git a/services/frontend/src/components/ui/hover-card.tsx b/services/frontend/src/components/ui/hover-card.tsx index 58a477c..1fb3627 100644 --- a/services/frontend/src/components/ui/hover-card.tsx +++ b/services/frontend/src/components/ui/hover-card.tsx @@ -1,17 +1,17 @@ -"use client" +"use client"; -import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card" +import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; function HoverCard({ ...props }: PreviewCardPrimitive.Root.Props) { - return + return ; } function HoverCardTrigger({ ...props }: PreviewCardPrimitive.Trigger.Props) { return ( - ) + ); } function HoverCardContent({ @@ -39,13 +39,13 @@ function HoverCardContent({ data-slot="hover-card-content" className={cn( "z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", - className + className, )} {...props} /> - ) + ); } -export { HoverCard, HoverCardTrigger, HoverCardContent } +export { HoverCard, HoverCardContent, HoverCardTrigger }; diff --git a/services/frontend/src/components/ui/input-group.tsx b/services/frontend/src/components/ui/input-group.tsx index da8f1dd..776225a 100644 --- a/services/frontend/src/components/ui/input-group.tsx +++ b/services/frontend/src/components/ui/input-group.tsx @@ -1,25 +1,23 @@ -"use client" +"use client"; -import * as React from "react" -import { cva, type VariantProps } from "class-variance-authority" +import { cva, type VariantProps } from "class-variance-authority"; +import type * as React from "react"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Textarea } from "@/components/ui/textarea"; +import { cn } from "@/lib/utils"; -import { cn } from "@/lib/utils" -import { Button } from "@/components/ui/button" -import { Input } from "@/components/ui/input" -import { Textarea } from "@/components/ui/textarea" - -function InputGroup({ className, ...props }: React.ComponentProps<"div">) { +function InputGroup({ className, ...props }: React.ComponentProps<"fieldset">) { return ( -
[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", - className + className, )} {...props} /> - ) + ); } const inputGroupAddonVariants = cva( @@ -40,8 +38,8 @@ const inputGroupAddonVariants = cva( defaultVariants: { align: "inline-start", }, - } -) + }, +); function InputGroupAddon({ className, @@ -50,19 +48,27 @@ function InputGroupAddon({ }: React.ComponentProps<"div"> & VariantProps) { return (
{ if ((e.target as HTMLElement).closest("button")) { - return + return; + } + e.currentTarget.parentElement?.querySelector("input")?.focus(); + }} + onKeyDown={(e) => { + if (e.key === "Enter" || e.key === " ") { + if ((e.target as HTMLElement).closest("button")) { + return; + } + e.currentTarget.parentElement?.querySelector("input")?.focus(); } - e.currentTarget.parentElement?.querySelector("input")?.focus() }} {...props} /> - ) + ); } const inputGroupButtonVariants = cva( @@ -80,8 +86,8 @@ const inputGroupButtonVariants = cva( defaultVariants: { size: "xs", }, - } -) + }, +); function InputGroupButton({ className, @@ -91,7 +97,7 @@ function InputGroupButton({ ...props }: Omit, "size" | "type"> & VariantProps & { - type?: "button" | "submit" | "reset" + type?: "button" | "submit" | "reset"; }) { return (
- ) + ); } function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) { @@ -75,13 +74,12 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) { - ) + ); } -export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } +export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot }; diff --git a/services/frontend/src/components/ui/input.tsx b/services/frontend/src/components/ui/input.tsx index 7d21bab..3f9abd5 100644 --- a/services/frontend/src/components/ui/input.tsx +++ b/services/frontend/src/components/ui/input.tsx @@ -1,7 +1,7 @@ -import * as React from "react" -import { Input as InputPrimitive } from "@base-ui/react/input" +import { Input as InputPrimitive } from "@base-ui/react/input"; +import type * as React from "react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; function Input({ className, type, ...props }: React.ComponentProps<"input">) { return ( @@ -10,11 +10,11 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) { data-slot="input" className={cn( "h-8 w-full min-w-0 rounded-lg border border-input bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", - className + className, )} {...props} /> - ) + ); } -export { Input } +export { Input }; diff --git a/services/frontend/src/components/ui/item.tsx b/services/frontend/src/components/ui/item.tsx index 0f872ee..d012959 100644 --- a/services/frontend/src/components/ui/item.tsx +++ b/services/frontend/src/components/ui/item.tsx @@ -1,23 +1,21 @@ -import * as React from "react" -import { mergeProps } from "@base-ui/react/merge-props" -import { useRender } from "@base-ui/react/use-render" -import { cva, type VariantProps } from "class-variance-authority" +import { mergeProps } from "@base-ui/react/merge-props"; +import { useRender } from "@base-ui/react/use-render"; +import { cva, type VariantProps } from "class-variance-authority"; +import type * as React from "react"; +import { Separator } from "@/components/ui/separator"; +import { cn } from "@/lib/utils"; -import { cn } from "@/lib/utils" -import { Separator } from "@/components/ui/separator" - -function ItemGroup({ className, ...props }: React.ComponentProps<"div">) { +function ItemGroup({ className, ...props }: React.ComponentProps<"ul">) { return ( -
- ) + ); } function ItemSeparator({ @@ -31,7 +29,7 @@ function ItemSeparator({ className={cn("my-2", className)} {...props} /> - ) + ); } const itemVariants = cva( @@ -53,8 +51,8 @@ const itemVariants = cva( variant: "default", size: "default", }, - } -) + }, +); function Item({ className, @@ -69,7 +67,7 @@ function Item({ { className: cn(itemVariants({ variant, size, className })), }, - props + props, ), render, state: { @@ -77,7 +75,7 @@ function Item({ variant, size, }, - }) + }); } const itemMediaVariants = cva( @@ -94,8 +92,8 @@ const itemMediaVariants = cva( defaultVariants: { variant: "default", }, - } -) + }, +); function ItemMedia({ className, @@ -109,7 +107,7 @@ function ItemMedia({ className={cn(itemMediaVariants({ variant, className }))} {...props} /> - ) + ); } function ItemContent({ className, ...props }: React.ComponentProps<"div">) { @@ -118,11 +116,11 @@ function ItemContent({ className, ...props }: React.ComponentProps<"div">) { data-slot="item-content" className={cn( "flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none", - className + className, )} {...props} /> - ) + ); } function ItemTitle({ className, ...props }: React.ComponentProps<"div">) { @@ -131,11 +129,11 @@ function ItemTitle({ className, ...props }: React.ComponentProps<"div">) { data-slot="item-title" className={cn( "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4", - className + className, )} {...props} /> - ) + ); } function ItemDescription({ className, ...props }: React.ComponentProps<"p">) { @@ -144,11 +142,11 @@ function ItemDescription({ className, ...props }: React.ComponentProps<"p">) { data-slot="item-description" className={cn( "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", - className + className, )} {...props} /> - ) + ); } function ItemActions({ className, ...props }: React.ComponentProps<"div">) { @@ -158,7 +156,7 @@ function ItemActions({ className, ...props }: React.ComponentProps<"div">) { className={cn("flex items-center gap-2", className)} {...props} /> - ) + ); } function ItemHeader({ className, ...props }: React.ComponentProps<"div">) { @@ -167,11 +165,11 @@ function ItemHeader({ className, ...props }: React.ComponentProps<"div">) { data-slot="item-header" className={cn( "flex basis-full items-center justify-between gap-2", - className + className, )} {...props} /> - ) + ); } function ItemFooter({ className, ...props }: React.ComponentProps<"div">) { @@ -180,22 +178,22 @@ function ItemFooter({ className, ...props }: React.ComponentProps<"div">) { data-slot="item-footer" className={cn( "flex basis-full items-center justify-between gap-2", - className + className, )} {...props} /> - ) + ); } export { Item, - ItemMedia, - ItemContent, ItemActions, + ItemContent, + ItemDescription, + ItemFooter, ItemGroup, + ItemHeader, + ItemMedia, ItemSeparator, ItemTitle, - ItemDescription, - ItemHeader, - ItemFooter, -} +}; diff --git a/services/frontend/src/components/ui/kbd.tsx b/services/frontend/src/components/ui/kbd.tsx index ff93b53..44df653 100644 --- a/services/frontend/src/components/ui/kbd.tsx +++ b/services/frontend/src/components/ui/kbd.tsx @@ -1,4 +1,4 @@ -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; function Kbd({ className, ...props }: React.ComponentProps<"kbd">) { return ( @@ -6,11 +6,11 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) { data-slot="kbd" className={cn( "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3", - className + className, )} {...props} /> - ) + ); } function KbdGroup({ className, ...props }: React.ComponentProps<"div">) { @@ -20,7 +20,7 @@ function KbdGroup({ className, ...props }: React.ComponentProps<"div">) { className={cn("inline-flex items-center gap-1", className)} {...props} /> - ) + ); } -export { Kbd, KbdGroup } +export { Kbd, KbdGroup }; diff --git a/services/frontend/src/components/ui/label.tsx b/services/frontend/src/components/ui/label.tsx index 74da65c..389fd31 100644 --- a/services/frontend/src/components/ui/label.tsx +++ b/services/frontend/src/components/ui/label.tsx @@ -1,20 +1,24 @@ -"use client" +"use client"; -import * as React from "react" +import type * as React from "react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; -function Label({ className, ...props }: React.ComponentProps<"label">) { +function Label({ + className, + htmlFor: _htmlFor, + ...props +}: React.ComponentProps<"label">) { return ( -
- ) + ); } function SidebarTrigger({ @@ -256,7 +254,7 @@ function SidebarTrigger({ onClick, ...props }: React.ComponentProps) { - const { toggleSidebar } = useSidebar() + const { toggleSidebar } = useSidebar(); return ( - ) + ); } function SidebarRail({ className, ...props }: React.ComponentProps<"button">) { - const { toggleSidebar } = useSidebar() + const { toggleSidebar } = useSidebar(); return (