From 3ca5edf4dc7e9c1d2006e47da44c600c2f0e59f6 Mon Sep 17 00:00:00 2001 From: Jan-Henrik Bruhn Date: Sat, 20 Dec 2025 23:03:38 +0100 Subject: [PATCH] fix: Run prettier formatting on all components MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Applied prettier auto-formatting to all component and utility files - Fixed semicolons, commas, and indentation throughout codebase - No functional changes, only code style improvements 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 --- src/components/AppHeader.tsx | 2 +- src/components/FileUpload.tsx | 350 +++++++++++------------ src/components/PatternInfo.tsx | 117 ++++---- src/components/ProgressMonitor.tsx | 430 +++++++++++++++-------------- src/components/SkeletonLoader.tsx | 4 +- src/components/ui/alert-dialog.tsx | 38 +-- src/components/ui/alert.tsx | 22 +- src/components/ui/badge.tsx | 18 +- src/components/ui/button.tsx | 20 +- src/components/ui/card.tsx | 26 +- src/components/ui/dialog.tsx | 38 +-- src/components/ui/popover.tsx | 20 +- src/components/ui/progress.tsx | 14 +- src/components/ui/separator.tsx | 12 +- src/components/ui/skeleton.tsx | 6 +- src/components/ui/tooltip.tsx | 18 +- src/lib/utils.ts | 6 +- 17 files changed, 577 insertions(+), 564 deletions(-) diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx index 236a799..86eb809 100644 --- a/src/components/AppHeader.tsx +++ b/src/components/AppHeader.tsx @@ -167,7 +167,7 @@ export function AppHeader() { "gap-1.5 flex-shrink-0", machineErrorMessage || pyodideError ? "animate-pulse hover:animate-none" - : "invisible pointer-events-none" + : "invisible pointer-events-none", )} title="Click to view error details" aria-label="View error details" diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index e0004b8..010f815 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -233,188 +233,188 @@ export function FileUpload() { - {resumeAvailable && resumeFileName && ( -
-

- Cached: "{resumeFileName}" -

-
- )} - - {isLoading && } - - {!isLoading && pesData && ( -
- -
- )} - -
- - - - {pesData && - canUploadPattern(machineStatus) && - !patternUploaded && - uploadProgress < 100 && ( - - )} -
- - {/* Pyodide initialization progress indicator - shown when initializing or waiting */} - {!pyodideReady && pyodideProgress > 0 && ( -
-
- - {isLoading && !pyodideReady - ? "Please wait - initializing Python environment..." - : pyodideLoadingStep || "Initializing Python environment..."} - - - {pyodideProgress.toFixed(0)}% - + {resumeAvailable && resumeFileName && ( +
+

+ Cached: "{resumeFileName}" +

- -

- {isLoading && !pyodideReady - ? "File dialog will open automatically when ready" - : "This only happens once on first use"} -

-
- )} - - {/* Error/warning messages with smooth transition - placed after buttons */} -
- {pesData && !canUploadPattern(machineStatus) && ( - - - Cannot upload while {getMachineStateCategory(machineStatus)} - - )} - {pesData && boundsCheck.error && ( - - - Pattern too large: {boundsCheck.error} - - - )} -
+ {isLoading && } - {isUploading && uploadProgress < 100 && ( -
-
- - Uploading - - - {uploadProgress > 0 - ? uploadProgress.toFixed(1) + "%" - : "Starting..."} - + {!isLoading && pesData && ( +
+
- + + + + {pesData && + canUploadPattern(machineStatus) && + !patternUploaded && + uploadProgress < 100 && ( + + )}
- )} + + {/* Pyodide initialization progress indicator - shown when initializing or waiting */} + {!pyodideReady && pyodideProgress > 0 && ( +
+
+ + {isLoading && !pyodideReady + ? "Please wait - initializing Python environment..." + : pyodideLoadingStep || "Initializing Python environment..."} + + + {pyodideProgress.toFixed(0)}% + +
+ +

+ {isLoading && !pyodideReady + ? "File dialog will open automatically when ready" + : "This only happens once on first use"} +

+
+ )} + + {/* Error/warning messages with smooth transition - placed after buttons */} +
+ {pesData && !canUploadPattern(machineStatus) && ( + + + Cannot upload while {getMachineStateCategory(machineStatus)} + + + )} + + {pesData && boundsCheck.error && ( + + + Pattern too large: {boundsCheck.error} + + + )} +
+ + {isUploading && uploadProgress < 100 && ( +
+
+ + Uploading + + + {uploadProgress > 0 + ? uploadProgress.toFixed(1) + "%" + : "Starting..."} + +
+ +
+ )} ); diff --git a/src/components/PatternInfo.tsx b/src/components/PatternInfo.tsx index 04256ac..a8fcc20 100644 --- a/src/components/PatternInfo.tsx +++ b/src/components/PatternInfo.tsx @@ -23,10 +23,18 @@ export function PatternInfo({
- Size + + Size + - {((pesData.bounds.maxX - pesData.bounds.minX) / 10).toFixed(1)} x{" "} - {((pesData.bounds.maxY - pesData.bounds.minY) / 10).toFixed(1)} mm + {((pesData.bounds.maxX - pesData.bounds.minX) / 10).toFixed( + 1, + )}{" "} + x{" "} + {((pesData.bounds.maxY - pesData.bounds.minY) / 10).toFixed( + 1, + )}{" "} + mm
@@ -45,7 +53,8 @@ export function PatternInfo({ {pesData.penStitches?.stitches.length.toLocaleString() || pesData.stitchCount.toLocaleString()} {pesData.penStitches && - pesData.penStitches.stitches.length !== pesData.stitchCount && ( + pesData.penStitches.stitches.length !== + pesData.stitchCount && (
{pesData.uniqueColors.slice(0, 8).map((color, idx) => { - // Primary metadata: brand and catalog number - const primaryMetadata = [ - color.brand, - color.catalogNumber ? `#${color.catalogNumber}` : null, - ] - .filter(Boolean) - .join(" "); + // Primary metadata: brand and catalog number + const primaryMetadata = [ + color.brand, + color.catalogNumber ? `#${color.catalogNumber}` : null, + ] + .filter(Boolean) + .join(" "); - // Secondary metadata: chart and description - const secondaryMetadata = [color.chart, color.description] - .filter(Boolean) - .join(" "); + // Secondary metadata: chart and description + const secondaryMetadata = [color.chart, color.description] + .filter(Boolean) + .join(" "); - const metadata = [primaryMetadata, secondaryMetadata] - .filter(Boolean) - .join(" • "); + const metadata = [primaryMetadata, secondaryMetadata] + .filter(Boolean) + .join(" • "); - // Show which thread blocks use this color in PatternSummaryCard - const threadNumbers = color.threadIndices - .map((i) => i + 1) - .join(", "); - const tooltipText = showThreadBlocks - ? metadata - ? `Color ${idx + 1}: ${color.hex} - ${metadata}` - : `Color ${idx + 1}: ${color.hex}` - : metadata - ? `Color ${idx + 1}: ${color.hex}\n${metadata}\nUsed in thread blocks: ${threadNumbers}` - : `Color ${idx + 1}: ${color.hex}\nUsed in thread blocks: ${threadNumbers}`; + // Show which thread blocks use this color in PatternSummaryCard + const threadNumbers = color.threadIndices + .map((i) => i + 1) + .join(", "); + const tooltipText = showThreadBlocks + ? metadata + ? `Color ${idx + 1}: ${color.hex} - ${metadata}` + : `Color ${idx + 1}: ${color.hex}` + : metadata + ? `Color ${idx + 1}: ${color.hex}\n${metadata}\nUsed in thread blocks: ${threadNumbers}` + : `Color ${idx + 1}: ${color.hex}\nUsed in thread blocks: ${threadNumbers}`; - return ( - + return ( + + +
+ + +

{tooltipText}

+ + + ); + })} + {pesData.uniqueColors.length > 8 && ( + -
+
+ +{pesData.uniqueColors.length - 8} +
- -

{tooltipText}

+ +

+ {pesData.uniqueColors.length - 8} more{" "} + {pesData.uniqueColors.length - 8 === 1 ? "color" : "colors"} +

- ); - })} - {pesData.uniqueColors.length > 8 && ( - - -
- +{pesData.uniqueColors.length - 8} -
- - -

- {pesData.uniqueColors.length - 8} more{" "} - {pesData.uniqueColors.length - 8 === 1 ? "color" : "colors"} -

- - - )} + )}
diff --git a/src/components/ProgressMonitor.tsx b/src/components/ProgressMonitor.tsx index 1c9be6a..793afe6 100644 --- a/src/components/ProgressMonitor.tsx +++ b/src/components/ProgressMonitor.tsx @@ -17,7 +17,13 @@ import { canResumeSewing, } from "../utils/machineStateHelpers"; import { calculatePatternTime } from "../utils/timeCalculation"; -import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"; +import { + Card, + CardHeader, + CardTitle, + CardDescription, + CardContent, +} from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Progress } from "@/components/ui/progress"; @@ -170,246 +176,246 @@ export function ProgressMonitor() {
- - {/* Pattern Info */} - {patternInfo && ( -
-
- - Total Stitches - - - {totalStitches.toLocaleString()} - -
-
- - Total Time - - - {totalMinutes} min - -
-
- - Speed - - - {patternInfo.speed} spm - -
-
- )} - - {/* Progress Bar */} - {sewingProgress && ( -
- - -
+ {/* Pattern Info */} + {patternInfo && ( +
- Current Stitch + Total Stitches - {sewingProgress.currentStitch.toLocaleString()} /{" "} {totalStitches.toLocaleString()}
- Time + Total Time - {elapsedMinutes} / {totalMinutes} min + {totalMinutes} min + +
+
+ + Speed + + + {patternInfo.speed} spm
-
- )} + )} - {/* Color Blocks */} - {colorBlocks.length > 0 && ( -
-

- Color Blocks -

-
-
- {colorBlocks.map((block, index) => { - const isCompleted = currentStitch >= block.endStitch; - const isCurrent = index === currentBlockIndex; + {/* Progress Bar */} + {sewingProgress && ( +
+ - // Calculate progress within current block - let blockProgress = 0; - if (isCurrent) { - blockProgress = - ((currentStitch - block.startStitch) / block.stitchCount) * - 100; - } else if (isCompleted) { - blockProgress = 100; - } +
+
+ + Current Stitch + + + {sewingProgress.currentStitch.toLocaleString()} /{" "} + {totalStitches.toLocaleString()} + +
+
+ + Time + + + {elapsedMinutes} / {totalMinutes} min + +
+
+
+ )} - return ( -
-
- {/* Color swatch */} -
+ {/* Color Blocks */} + {colorBlocks.length > 0 && ( +
+

+ Color Blocks +

+
+
+ {colorBlocks.map((block, index) => { + const isCompleted = currentStitch >= block.endStitch; + const isCurrent = index === currentBlockIndex; - {/* Thread info */} -
-
- Thread {block.colorIndex + 1} - {(block.threadBrand || - block.threadChart || - block.threadDescription || - block.threadCatalogNumber) && ( - - {" "} - ( - {(() => { - // Primary metadata: brand and catalog number - const primaryMetadata = [ - block.threadBrand, - block.threadCatalogNumber - ? `#${block.threadCatalogNumber}` - : null, - ] - .filter(Boolean) - .join(" "); + // Calculate progress within current block + let blockProgress = 0; + if (isCurrent) { + blockProgress = + ((currentStitch - block.startStitch) / + block.stitchCount) * + 100; + } else if (isCompleted) { + blockProgress = 100; + } - // Secondary metadata: chart and description - const secondaryMetadata = [ - block.threadChart, - block.threadDescription, - ] - .filter(Boolean) - .join(" "); + return ( +
+
+ {/* Color swatch */} +
- return [primaryMetadata, secondaryMetadata] - .filter(Boolean) - .join(" • "); - })()} - ) - - )} -
-
- {block.stitchCount.toLocaleString()} stitches + {/* Thread info */} +
+
+ Thread {block.colorIndex + 1} + {(block.threadBrand || + block.threadChart || + block.threadDescription || + block.threadCatalogNumber) && ( + + {" "} + ( + {(() => { + // Primary metadata: brand and catalog number + const primaryMetadata = [ + block.threadBrand, + block.threadCatalogNumber + ? `#${block.threadCatalogNumber}` + : null, + ] + .filter(Boolean) + .join(" "); + + // Secondary metadata: chart and description + const secondaryMetadata = [ + block.threadChart, + block.threadDescription, + ] + .filter(Boolean) + .join(" "); + + return [primaryMetadata, secondaryMetadata] + .filter(Boolean) + .join(" • "); + })()} + ) + + )} +
+
+ {block.stitchCount.toLocaleString()} stitches +
+ + {/* Status icon */} + {isCompleted ? ( + + ) : isCurrent ? ( + + ) : ( + + )}
- {/* Status icon */} - {isCompleted ? ( - - ) : isCurrent ? ( - - ) : ( - )}
- - {/* Progress bar for current block */} - {isCurrent && ( - - )} -
- ); - })} + ); + })} +
+ {/* Gradient overlay to indicate more content below - only on desktop and when not at bottom */} + {showGradient && ( +
+ )}
- {/* Gradient overlay to indicate more content below - only on desktop and when not at bottom */} - {showGradient && ( -
- )}
+ )} + + {/* Action buttons */} +
+ {/* Resume has highest priority when available */} + {canResumeSewing(machineStatus) && ( + + )} + + {/* Start Sewing - primary action, takes more space */} + {canStartSewing(machineStatus) && !canResumeSewing(machineStatus) && ( + + )} + + {/* Start Mask Trace - secondary action */} + {canStartMaskTrace(machineStatus) && ( + + )}
- )} - - {/* Action buttons */} -
- {/* Resume has highest priority when available */} - {canResumeSewing(machineStatus) && ( - - )} - - {/* Start Sewing - primary action, takes more space */} - {canStartSewing(machineStatus) && !canResumeSewing(machineStatus) && ( - - )} - - {/* Start Mask Trace - secondary action */} - {canStartMaskTrace(machineStatus) && ( - - )} -
); diff --git a/src/components/SkeletonLoader.tsx b/src/components/SkeletonLoader.tsx index a69a655..3da170d 100644 --- a/src/components/SkeletonLoader.tsx +++ b/src/components/SkeletonLoader.tsx @@ -16,9 +16,7 @@ export function SkeletonLoader({ circle: "rounded-full", }; - return ( - - ); + return ; } export function PatternCanvasSkeleton() { diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx index 935eecf..5284517 100644 --- a/src/components/ui/alert-dialog.tsx +++ b/src/components/ui/alert-dialog.tsx @@ -1,13 +1,13 @@ -import * as React from "react" -import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" +import * as React from "react"; +import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"; -import { cn } from "@/lib/utils" -import { buttonVariants } from "@/components/ui/button" +import { cn } from "@/lib/utils"; +import { buttonVariants } from "@/components/ui/button"; function AlertDialog({ ...props }: React.ComponentProps) { - return + return ; } function AlertDialogTrigger({ @@ -15,7 +15,7 @@ function AlertDialogTrigger({ }: React.ComponentProps) { return ( - ) + ); } function AlertDialogPortal({ @@ -23,7 +23,7 @@ function AlertDialogPortal({ }: React.ComponentProps) { return ( - ) + ); } function AlertDialogOverlay({ @@ -35,11 +35,11 @@ function AlertDialogOverlay({ data-slot="alert-dialog-overlay" className={cn( "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", - className + className, )} {...props} /> - ) + ); } function AlertDialogContent({ @@ -53,12 +53,12 @@ function AlertDialogContent({ data-slot="alert-dialog-content" className={cn( "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", - className + className, )} {...props} /> - ) + ); } function AlertDialogHeader({ @@ -71,7 +71,7 @@ function AlertDialogHeader({ className={cn("flex flex-col gap-2 text-center sm:text-left", className)} {...props} /> - ) + ); } function AlertDialogFooter({ @@ -83,11 +83,11 @@ function AlertDialogFooter({ data-slot="alert-dialog-footer" className={cn( "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", - className + className, )} {...props} /> - ) + ); } function AlertDialogTitle({ @@ -100,7 +100,7 @@ function AlertDialogTitle({ className={cn("text-lg font-semibold", className)} {...props} /> - ) + ); } function AlertDialogDescription({ @@ -113,7 +113,7 @@ function AlertDialogDescription({ className={cn("text-muted-foreground text-sm", className)} {...props} /> - ) + ); } function AlertDialogAction({ @@ -125,7 +125,7 @@ function AlertDialogAction({ className={cn(buttonVariants(), className)} {...props} /> - ) + ); } function AlertDialogCancel({ @@ -137,7 +137,7 @@ function AlertDialogCancel({ className={cn(buttonVariants({ variant: "outline" }), className)} {...props} /> - ) + ); } export { @@ -152,4 +152,4 @@ export { AlertDialogDescription, AlertDialogAction, AlertDialogCancel, -} +}; diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx index 1421354..aa7de24 100644 --- a/src/components/ui/alert.tsx +++ b/src/components/ui/alert.tsx @@ -1,7 +1,7 @@ -import * as React from "react" -import { cva, type VariantProps } from "class-variance-authority" +import * as React from "react"; +import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; const alertVariants = cva( "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", @@ -16,8 +16,8 @@ const alertVariants = cva( defaultVariants: { variant: "default", }, - } -) + }, +); function Alert({ className, @@ -31,7 +31,7 @@ function Alert({ className={cn(alertVariants({ variant }), className)} {...props} /> - ) + ); } function AlertTitle({ className, ...props }: React.ComponentProps<"div">) { @@ -40,11 +40,11 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) { data-slot="alert-title" className={cn( "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", - className + className, )} {...props} /> - ) + ); } function AlertDescription({ @@ -56,11 +56,11 @@ function AlertDescription({ data-slot="alert-description" className={cn( "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", - className + className, )} {...props} /> - ) + ); } -export { Alert, AlertTitle, AlertDescription } +export { Alert, AlertTitle, AlertDescription }; diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx index fd3a406..55f8352 100644 --- a/src/components/ui/badge.tsx +++ b/src/components/ui/badge.tsx @@ -1,8 +1,8 @@ -import * as React from "react" -import { Slot } from "@radix-ui/react-slot" -import { cva, type VariantProps } from "class-variance-authority" +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 badgeVariants = cva( "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", @@ -22,8 +22,8 @@ const badgeVariants = cva( defaultVariants: { variant: "default", }, - } -) + }, +); function Badge({ className, @@ -32,7 +32,7 @@ function Badge({ ...props }: React.ComponentProps<"span"> & VariantProps & { asChild?: boolean }) { - const Comp = asChild ? Slot : "span" + const Comp = asChild ? Slot : "span"; return ( - ) + ); } -export { Badge, badgeVariants } +export { Badge, badgeVariants }; diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index fad5e69..51bc4ae 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -1,8 +1,8 @@ -import * as React from "react" -import { Slot } from "@radix-ui/react-slot" -import { cva, type VariantProps } from "class-variance-authority" +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 gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", @@ -33,8 +33,8 @@ const buttonVariants = cva( variant: "default", size: "default", }, - } -) + }, +); function Button({ className, @@ -44,9 +44,9 @@ function Button({ ...props }: React.ComponentProps<"button"> & VariantProps & { - asChild?: boolean + asChild?: boolean; }) { - const Comp = asChild ? Slot : "button" + const Comp = asChild ? Slot : "button"; return ( - ) + ); } -export { Button, buttonVariants } +export { Button, buttonVariants }; diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index 681ad98..4f88024 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"; function Card({ className, ...props }: React.ComponentProps<"div">) { return ( @@ -8,11 +8,11 @@ function Card({ className, ...props }: React.ComponentProps<"div">) { data-slot="card" className={cn( "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", - className + className, )} {...props} /> - ) + ); } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { @@ -21,11 +21,11 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) { data-slot="card-header" className={cn( "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", - className + className, )} {...props} /> - ) + ); } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { @@ -35,7 +35,7 @@ function CardTitle({ className, ...props }: React.ComponentProps<"div">) { className={cn("leading-none font-semibold", className)} {...props} /> - ) + ); } function CardDescription({ className, ...props }: React.ComponentProps<"div">) { @@ -45,7 +45,7 @@ function CardDescription({ className, ...props }: React.ComponentProps<"div">) { className={cn("text-muted-foreground text-sm", className)} {...props} /> - ) + ); } function CardAction({ className, ...props }: React.ComponentProps<"div">) { @@ -54,11 +54,11 @@ function CardAction({ className, ...props }: React.ComponentProps<"div">) { data-slot="card-action" className={cn( "col-start-2 row-span-2 row-start-1 self-start justify-self-end", - className + className, )} {...props} /> - ) + ); } function CardContent({ className, ...props }: React.ComponentProps<"div">) { @@ -68,7 +68,7 @@ function CardContent({ className, ...props }: React.ComponentProps<"div">) { className={cn("px-6", className)} {...props} /> - ) + ); } function CardFooter({ className, ...props }: React.ComponentProps<"div">) { @@ -78,7 +78,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) { className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...props} /> - ) + ); } export { @@ -89,4 +89,4 @@ export { CardAction, CardDescription, CardContent, -} +}; diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx index 60cc10e..a701d5b 100644 --- a/src/components/ui/dialog.tsx +++ b/src/components/ui/dialog.tsx @@ -1,31 +1,31 @@ -import * as React from "react" -import * as DialogPrimitive from "@radix-ui/react-dialog" -import { XIcon } from "lucide-react" +import * as React from "react"; +import * as DialogPrimitive from "@radix-ui/react-dialog"; +import { XIcon } from "lucide-react"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; function Dialog({ ...props }: React.ComponentProps) { - return + return ; } function DialogTrigger({ ...props }: React.ComponentProps) { - return + return ; } function DialogPortal({ ...props }: React.ComponentProps) { - return + return ; } function DialogClose({ ...props }: React.ComponentProps) { - return + return ; } function DialogOverlay({ @@ -37,11 +37,11 @@ function DialogOverlay({ data-slot="dialog-overlay" className={cn( "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", - className + className, )} {...props} /> - ) + ); } function DialogContent({ @@ -50,7 +50,7 @@ function DialogContent({ showCloseButton = true, ...props }: React.ComponentProps & { - showCloseButton?: boolean + showCloseButton?: boolean; }) { return ( @@ -59,7 +59,7 @@ function DialogContent({ data-slot="dialog-content" className={cn( "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg", - className + className, )} {...props} > @@ -75,7 +75,7 @@ function DialogContent({ )} - ) + ); } function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { @@ -85,7 +85,7 @@ function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { className={cn("flex flex-col gap-2 text-center sm:text-left", className)} {...props} /> - ) + ); } function DialogFooter({ className, ...props }: React.ComponentProps<"div">) { @@ -94,11 +94,11 @@ function DialogFooter({ className, ...props }: React.ComponentProps<"div">) { data-slot="dialog-footer" className={cn( "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", - className + className, )} {...props} /> - ) + ); } function DialogTitle({ @@ -111,7 +111,7 @@ function DialogTitle({ className={cn("text-lg leading-none font-semibold", className)} {...props} /> - ) + ); } function DialogDescription({ @@ -124,7 +124,7 @@ function DialogDescription({ className={cn("text-muted-foreground text-sm", className)} {...props} /> - ) + ); } export { @@ -138,4 +138,4 @@ export { DialogPortal, DialogTitle, DialogTrigger, -} +}; diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx index 01e468b..5d6f78d 100644 --- a/src/components/ui/popover.tsx +++ b/src/components/ui/popover.tsx @@ -1,20 +1,20 @@ -"use client" +"use client"; -import * as React from "react" -import * as PopoverPrimitive from "@radix-ui/react-popover" +import * as React from "react"; +import * as PopoverPrimitive from "@radix-ui/react-popover"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; function Popover({ ...props }: React.ComponentProps) { - return + return ; } function PopoverTrigger({ ...props }: React.ComponentProps) { - return + return ; } function PopoverContent({ @@ -31,18 +31,18 @@ function PopoverContent({ sideOffset={sideOffset} className={cn( "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", - className + className, )} {...props} /> - ) + ); } function PopoverAnchor({ ...props }: React.ComponentProps) { - return + return ; } -export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } +export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }; diff --git a/src/components/ui/progress.tsx b/src/components/ui/progress.tsx index e7a416c..e435637 100644 --- a/src/components/ui/progress.tsx +++ b/src/components/ui/progress.tsx @@ -1,9 +1,9 @@ -"use client" +"use client"; -import * as React from "react" -import * as ProgressPrimitive from "@radix-ui/react-progress" +import * as React from "react"; +import * as ProgressPrimitive from "@radix-ui/react-progress"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; function Progress({ className, @@ -15,7 +15,7 @@ function Progress({ data-slot="progress" className={cn( "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", - className + className, )} {...props} > @@ -25,7 +25,7 @@ function Progress({ style={{ transform: `translateX(-${100 - (value || 0)}%)` }} /> - ) + ); } -export { Progress } +export { Progress }; diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx index bb3ad74..b246f3a 100644 --- a/src/components/ui/separator.tsx +++ b/src/components/ui/separator.tsx @@ -1,7 +1,7 @@ -import * as React from "react" -import * as SeparatorPrimitive from "@radix-ui/react-separator" +import * as React from "react"; +import * as SeparatorPrimitive from "@radix-ui/react-separator"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; function Separator({ className, @@ -16,11 +16,11 @@ function Separator({ orientation={orientation} className={cn( "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", - className + className, )} {...props} /> - ) + ); } -export { Separator } +export { Separator }; diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx index 32ea0ef..0168998 100644 --- a/src/components/ui/skeleton.tsx +++ b/src/components/ui/skeleton.tsx @@ -1,4 +1,4 @@ -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; function Skeleton({ className, ...props }: React.ComponentProps<"div">) { return ( @@ -7,7 +7,7 @@ function Skeleton({ className, ...props }: React.ComponentProps<"div">) { className={cn("bg-accent animate-pulse rounded-md", className)} {...props} /> - ) + ); } -export { Skeleton } +export { Skeleton }; diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx index 715bf76..b572cd3 100644 --- a/src/components/ui/tooltip.tsx +++ b/src/components/ui/tooltip.tsx @@ -1,7 +1,7 @@ -import * as React from "react" -import * as TooltipPrimitive from "@radix-ui/react-tooltip" +import * as React from "react"; +import * as TooltipPrimitive from "@radix-ui/react-tooltip"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; function TooltipProvider({ delayDuration = 0, @@ -13,7 +13,7 @@ function TooltipProvider({ delayDuration={delayDuration} {...props} /> - ) + ); } function Tooltip({ @@ -23,13 +23,13 @@ function Tooltip({ - ) + ); } function TooltipTrigger({ ...props }: React.ComponentProps) { - return + return ; } function TooltipContent({ @@ -45,7 +45,7 @@ function TooltipContent({ sideOffset={sideOffset} className={cn( "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance", - className + className, )} {...props} > @@ -53,7 +53,7 @@ function TooltipContent({ - ) + ); } -export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } +export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; diff --git a/src/lib/utils.ts b/src/lib/utils.ts index d084cca..365058c 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -1,6 +1,6 @@ -import { type ClassValue, clsx } from "clsx" -import { twMerge } from "tailwind-merge" +import { type ClassValue, clsx } from "clsx"; +import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)) + return twMerge(clsx(inputs)); }