Upgrade linter and formatter to Ultracite (#1224)

components/document-preview.tsx

@@ -1,32 +1,32 @@
-'use client';
+"use client";
 
+import equal from "fast-deep-equal";
 import {
-  memo,
   type MouseEvent,
+  memo,
   useCallback,
   useEffect,
   useMemo,
   useRef,
-} from 'react';
-import type { ArtifactKind, UIArtifact } from './artifact';
-import { FileIcon, FullscreenIcon, ImageIcon, LoaderIcon } from './icons';
-import { cn, fetcher } from '@/lib/utils';
-import type { Document } from '@/lib/db/schema';
-import { InlineDocumentSkeleton } from './document-skeleton';
-import useSWR from 'swr';
-import { Editor } from './text-editor';
-import { DocumentToolCall, DocumentToolResult } from './document';
-import { CodeEditor } from './code-editor';
-import { useArtifact } from '@/hooks/use-artifact';
-import equal from 'fast-deep-equal';
-import { SpreadsheetEditor } from './sheet-editor';
-import { ImageEditor } from './image-editor';
+} from "react";
+import useSWR from "swr";
+import { useArtifact } from "@/hooks/use-artifact";
+import type { Document } from "@/lib/db/schema";
+import { cn, fetcher } from "@/lib/utils";
+import type { ArtifactKind, UIArtifact } from "./artifact";
+import { CodeEditor } from "./code-editor";
+import { DocumentToolCall, DocumentToolResult } from "./document";
+import { InlineDocumentSkeleton } from "./document-skeleton";
+import { FileIcon, FullscreenIcon, ImageIcon, LoaderIcon } from "./icons";
+import { ImageEditor } from "./image-editor";
+import { SpreadsheetEditor } from "./sheet-editor";
+import { Editor } from "./text-editor";
 
-interface DocumentPreviewProps {
+type DocumentPreviewProps = {
   isReadonly: boolean;
   result?: any;
   args?: any;
-}
+};
 
 export function DocumentPreview({
   isReadonly,
@@ -36,7 +36,7 @@ export function DocumentPreview({
   const { artifact, setArtifact } = useArtifact();
 
   const { data: documents, isLoading: isDocumentsFetching } = useSWR<
-    Array<Document>
+    Document[]
   >(result ? `/api/document?id=${result.id}` : null, fetcher);
 
   const previewDocument = useMemo(() => documents?.[0], [documents]);
@@ -46,8 +46,8 @@ export function DocumentPreview({
     const boundingBox = hitboxRef.current?.getBoundingClientRect();
 
     if (artifact.documentId && boundingBox) {
-      setArtifact((artifact) => ({
-        ...artifact,
+      setArtifact((currentArtifact) => ({
+        ...currentArtifact,
         boundingBox: {
           left: boundingBox.x,
           top: boundingBox.y,
@@ -62,9 +62,9 @@ export function DocumentPreview({
     if (result) {
       return (
         <DocumentToolResult
-          type="create"
-          result={{ id: result.id, title: result.title, kind: result.kind }}
           isReadonly={isReadonly}
+          result={{ id: result.id, title: result.title, kind: result.kind }}
+          type="create"
         />
       );
     }
@@ -72,9 +72,9 @@ export function DocumentPreview({
     if (args) {
       return (
         <DocumentToolCall
-          type="create"
           args={{ title: args.title, kind: args.kind }}
           isReadonly={isReadonly}
+          type="create"
         />
       );
     }
@@ -86,18 +86,20 @@ export function DocumentPreview({
 
   const document: Document | null = previewDocument
     ? previewDocument
-    : artifact.status === 'streaming'
+    : artifact.status === "streaming"
       ? {
           title: artifact.title,
           kind: artifact.kind,
           content: artifact.content,
           id: artifact.documentId,
           createdAt: new Date(),
-          userId: 'noop',
+          userId: "noop",
         }
       : null;
 
-  if (!document) return <LoadingSkeleton artifactKind={artifact.kind} />;
+  if (!document) {
+    return <LoadingSkeleton artifactKind={artifact.kind} />;
+  }
 
   return (
     <div className="relative w-full cursor-pointer">
@@ -107,9 +109,9 @@ export function DocumentPreview({
         setArtifact={setArtifact}
       />
       <DocumentHeader
-        title={document.title}
+        isStreaming={artifact.status === "streaming"}
         kind={document.kind}
-        isStreaming={artifact.status === 'streaming'}
+        title={document.title}
       />
       <DocumentContent document={document} />
     </div>
@@ -129,7 +131,7 @@ const LoadingSkeleton = ({ artifactKind }: { artifactKind: ArtifactKind }) => (
         <FullscreenIcon />
       </div>
     </div>
-    {artifactKind === 'image' ? (
+    {artifactKind === "image" ? (
       <div className="overflow-y-scroll rounded-b-2xl border border-t-0 bg-muted dark:border-zinc-700">
         <div className="h-[257px] w-full animate-pulse bg-muted-foreground/20" />
       </div>
@@ -149,7 +151,7 @@ const PureHitboxLayer = ({
   hitboxRef: React.RefObject<HTMLDivElement>;
   result: any;
   setArtifact: (
-    updaterFn: UIArtifact | ((currentArtifact: UIArtifact) => UIArtifact),
+    updaterFn: UIArtifact | ((currentArtifact: UIArtifact) => UIArtifact)
   ) => void;
 }) => {
   const handleClick = useCallback(
@@ -157,7 +159,7 @@ const PureHitboxLayer = ({
       const boundingBox = event.currentTarget.getBoundingClientRect();
 
       setArtifact((artifact) =>
-        artifact.status === 'streaming'
+        artifact.status === "streaming"
           ? { ...artifact, isVisible: true }
           : {
               ...artifact,
@@ -171,19 +173,19 @@ const PureHitboxLayer = ({
                 width: boundingBox.width,
                 height: boundingBox.height,
               },
-            },
+            }
       );
     },
-    [setArtifact, result],
+    [setArtifact, result]
   );
 
   return (
     <div
-      className="absolute top-0 left-0 z-10 size-full rounded-xl"
-      ref={hitboxRef}
-      onClick={handleClick}
-      role="presentation"
       aria-hidden="true"
+      className="absolute top-0 left-0 z-10 size-full rounded-xl"
+      onClick={handleClick}
+      ref={hitboxRef}
+      role="presentation"
     >
       <div className="flex w-full items-center justify-end p-4">
         <div className="absolute top-[13px] right-[9px] rounded-md p-2 hover:bg-zinc-100 dark:hover:bg-zinc-700">
@@ -195,7 +197,9 @@ const PureHitboxLayer = ({
 };
 
 const HitboxLayer = memo(PureHitboxLayer, (prevProps, nextProps) => {
-  if (!equal(prevProps.result, nextProps.result)) return false;
+  if (!equal(prevProps.result, nextProps.result)) {
+    return false;
+  }
   return true;
 });
 
@@ -215,7 +219,7 @@ const PureDocumentHeader = ({
           <div className="animate-spin">
             <LoaderIcon />
           </div>
-        ) : kind === 'image' ? (
+        ) : kind === "image" ? (
           <ImageIcon />
         ) : (
           <FileIcon />
@@ -228,8 +232,12 @@ const PureDocumentHeader = ({
 );
 
 const DocumentHeader = memo(PureDocumentHeader, (prevProps, nextProps) => {
-  if (prevProps.title !== nextProps.title) return false;
-  if (prevProps.isStreaming !== nextProps.isStreaming) return false;
+  if (prevProps.title !== nextProps.title) {
+    return false;
+  }
+  if (prevProps.isStreaming !== nextProps.isStreaming) {
+    return false;
+  }
 
   return true;
 });
@@ -238,46 +246,48 @@ const DocumentContent = ({ document }: { document: Document }) => {
   const { artifact } = useArtifact();
 
   const containerClassName = cn(
-    'h-[257px] overflow-y-scroll border rounded-b-2xl dark:bg-muted border-t-0 dark:border-zinc-700',
+    "h-[257px] overflow-y-scroll rounded-b-2xl border border-t-0 dark:border-zinc-700 dark:bg-muted",
     {
-      'p-4 sm:px-14 sm:py-16': document.kind === 'text',
-      'p-0': document.kind === 'code',
-    },
+      "p-4 sm:px-14 sm:py-16": document.kind === "text",
+      "p-0": document.kind === "code",
+    }
   );
 
   const commonProps = {
-    content: document.content ?? '',
+    content: document.content ?? "",
     isCurrentVersion: true,
     currentVersionIndex: 0,
     status: artifact.status,
-    saveContent: () => {},
+    saveContent: () => null,
     suggestions: [],
   };
 
+  const handleSaveContent = () => null;
+
   return (
     <div className={containerClassName}>
-      {document.kind === 'text' ? (
-        <Editor {...commonProps} onSaveContent={() => {}} />
-      ) : document.kind === 'code' ? (
+      {document.kind === "text" ? (
+        <Editor {...commonProps} onSaveContent={handleSaveContent} />
+      ) : document.kind === "code" ? (
         <div className="relative flex w-full flex-1">
           <div className="absolute inset-0">
-            <CodeEditor {...commonProps} onSaveContent={() => {}} />
+            <CodeEditor {...commonProps} onSaveContent={handleSaveContent} />
           </div>
         </div>
-      ) : document.kind === 'sheet' ? (
+      ) : document.kind === "sheet" ? (
         <div className="relative flex size-full flex-1 p-4">
           <div className="absolute inset-0">
             <SpreadsheetEditor {...commonProps} />
           </div>
         </div>
-      ) : document.kind === 'image' ? (
+      ) : document.kind === "image" ? (
         <ImageEditor
-          title={document.title}
-          content={document.content ?? ''}
-          isCurrentVersion={true}
+          content={document.content ?? ""}
           currentVersionIndex={0}
-          status={artifact.status}
+          isCurrentVersion={true}
           isInline={true}
+          status={artifact.status}
+          title={document.title}
         />
       ) : null}
     </div>