Revert "Upgrade linter and formatter to Ultracite" (#1226)

components/elements/web-preview.tsx

@@ -1,22 +1,22 @@
-"use client";
+'use client';
 
-import { ChevronDownIcon } from "lucide-react";
-import type { ComponentProps, ReactNode } from "react";
-import { createContext, useContext, useState } from "react";
-import { Button } from "@/components/ui/button";
+import { Button } from '@/components/ui/button';
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-import { Input } from "@/components/ui/input";
+} from '@/components/ui/collapsible';
+import { Input } from '@/components/ui/input';
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { cn } from "@/lib/utils";
+} from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
+import { ChevronDownIcon } from 'lucide-react';
+import type { ComponentProps, ReactNode } from 'react';
+import { createContext, useContext, useState } from 'react';
 
 export type WebPreviewContextValue = {
   url: string;
@@ -30,12 +30,12 @@ const WebPreviewContext = createContext<WebPreviewContextValue | null>(null);
 const useWebPreview = () => {
   const context = useContext(WebPreviewContext);
   if (!context) {
-    throw new Error("WebPreview components must be used within a WebPreview");
+    throw new Error('WebPreview components must be used within a WebPreview');
   }
   return context;
 };
 
-export type WebPreviewProps = ComponentProps<"div"> & {
+export type WebPreviewProps = ComponentProps<'div'> & {
   defaultUrl?: string;
   onUrlChange?: (url: string) => void;
 };
@@ -43,7 +43,7 @@ export type WebPreviewProps = ComponentProps<"div"> & {
 export const WebPreview = ({
   className,
   children,
-  defaultUrl = "",
+  defaultUrl = '',
   onUrlChange,
   ...props
 }: WebPreviewProps) => {
@@ -66,8 +66,8 @@ export const WebPreview = ({
     <WebPreviewContext.Provider value={contextValue}>
       <div
         className={cn(
-          "flex size-full flex-col rounded-lg border bg-card",
-          className
+          'flex size-full flex-col rounded-lg border bg-card',
+          className,
         )}
         {...props}
       >
@@ -77,7 +77,7 @@ export const WebPreview = ({
   );
 };
 
-export type WebPreviewNavigationProps = ComponentProps<"div">;
+export type WebPreviewNavigationProps = ComponentProps<'div'>;
 
 export const WebPreviewNavigation = ({
   className,
@@ -85,7 +85,7 @@ export const WebPreviewNavigation = ({
   ...props
 }: WebPreviewNavigationProps) => (
   <div
-    className={cn("flex items-center gap-1 border-b p-2", className)}
+    className={cn('flex items-center gap-1 border-b p-2', className)}
     {...props}
   >
     {children}
@@ -135,7 +135,7 @@ export const WebPreviewUrl = ({
   const { url, setUrl } = useWebPreview();
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === "Enter") {
+    if (event.key === 'Enter') {
       const target = event.target as HTMLInputElement;
       setUrl(target.value);
     }
@@ -154,7 +154,7 @@ export const WebPreviewUrl = ({
   );
 };
 
-export type WebPreviewBodyProps = ComponentProps<"iframe"> & {
+export type WebPreviewBodyProps = ComponentProps<'iframe'> & {
   loading?: ReactNode;
 };
 
@@ -169,7 +169,7 @@ export const WebPreviewBody = ({
   return (
     <div className="flex-1">
       <iframe
-        className={cn("size-full", className)}
+        className={cn('size-full', className)}
         sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
         src={(src ?? url) || undefined}
         title="Preview"
@@ -180,9 +180,9 @@ export const WebPreviewBody = ({
   );
 };
 
-export type WebPreviewConsoleProps = ComponentProps<"div"> & {
+export type WebPreviewConsoleProps = ComponentProps<'div'> & {
   logs?: Array<{
-    level: "log" | "warn" | "error";
+    level: 'log' | 'warn' | 'error';
     message: string;
     timestamp: Date;
   }>;
@@ -198,7 +198,7 @@ export const WebPreviewConsole = ({
 
   return (
     <Collapsible
-      className={cn("border-t bg-muted/50 font-mono text-sm", className)}
+      className={cn('border-t bg-muted/50 font-mono text-sm', className)}
       onOpenChange={setConsoleOpen}
       open={consoleOpen}
       {...props}
@@ -211,16 +211,16 @@ export const WebPreviewConsole = ({
           Console
           <ChevronDownIcon
             className={cn(
-              "h-4 w-4 transition-transform duration-200",
-              consoleOpen && "rotate-180"
+              'h-4 w-4 transition-transform duration-200',
+              consoleOpen && 'rotate-180',
             )}
           />
         </Button>
       </CollapsibleTrigger>
       <CollapsibleContent
         className={cn(
-          "px-4 pb-4",
-          "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 outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in"
+          'px-4 pb-4',
+          '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 outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in',
         )}
       >
         <div className="max-h-48 space-y-1 overflow-y-auto">
@@ -230,16 +230,16 @@ export const WebPreviewConsole = ({
             logs.map((log, index) => (
               <div
                 className={cn(
-                  "text-xs",
-                  log.level === "error" && "text-destructive",
-                  log.level === "warn" && "text-yellow-600",
-                  log.level === "log" && "text-foreground"
+                  'text-xs',
+                  log.level === 'error' && 'text-destructive',
+                  log.level === 'warn' && 'text-yellow-600',
+                  log.level === 'log' && 'text-foreground',
                 )}
                 key={`${log.timestamp.getTime()}-${index}`}
               >
                 <span className="text-muted-foreground">
                   {log.timestamp.toLocaleTimeString()}
-                </span>{" "}
+                </span>{' '}
                 {log.message}
               </div>
             ))