chore: add and run prettier

remix/app/components/ImageVaultDAM.tsx

@@ -1,34 +1,34 @@
-import { useCallback, useEffect, useState } from "react";
-import { flushSync } from "react-dom";
+import { useCallback, useEffect, useState } from "react"
+import { flushSync } from "react-dom"
 
 import {
   AssetCardVertical,
   Button,
   FieldLabel,
   cbModal,
-} from "@contentstack/venus-components";
-import ImageEditModal from "./ImageEditModal";
-import FullSizeImage from "./FullSizeImage";
-import { isInsertResponse, openImageVault } from "~/utils/imagevault";
+} from "@contentstack/venus-components"
+import ImageEditModal from "./ImageEditModal"
+import FullSizeImage from "./FullSizeImage"
+import { isInsertResponse, openImageVault } from "~/utils/imagevault"
 
-import type { CbModalProps } from "@contentstack/venus-components/build/components/Modal/Modal";
-import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation";
-import type { InsertResponse } from "~/types/imagevault";
+import type { CbModalProps } from "@contentstack/venus-components/build/components/Modal/Modal"
+import type UiLocation from "@contentstack/app-sdk/dist/src/uiLocation"
+import type { InsertResponse } from "~/types/imagevault"
 import type {
   EntryDataPublishDetails,
   ImageVaultDAMConfig,
-} from "~/utils/imagevault";
-import type { Lang } from "~/types/lang";
+} from "~/utils/imagevault"
+import type { Lang } from "~/types/lang"
 
 export type ImageVaultDAMProps = {
-  sdk: UiLocation;
-  config: ImageVaultDAMConfig;
-  initialData: InsertResponse | null;
-};
+  sdk: UiLocation
+  config: ImageVaultDAMConfig
+  initialData: InsertResponse | null
+}
 
 type DAMButtonProps = {
-  onClick: () => void;
-};
+  onClick: () => void
+}
 
 function DAMButton({ onClick }: DAMButtonProps) {
   return (
@@ -45,27 +45,27 @@ function DAMButton({ onClick }: DAMButtonProps) {
         Choose a file
       </Button>
     </div>
-  );
+  )
 }
 
 type MediaProps = {
-  media: InsertResponse;
-  onDelete: () => void;
-  onEdit: () => void;
-};
+  media: InsertResponse
+  onDelete: () => void
+  onEdit: () => void
+}
 
 function Media({ media, onDelete, onEdit }: MediaProps) {
   // MediaConversions is an array but will only contain one object
   const { Url, Height, FormatHeight, Width, FormatWidth, Name, AspectRatio } =
-    media.MediaConversions[0];
+    media.MediaConversions[0]
 
-  const assetUrl = Url;
-  const title = media.Name;
-  const width = FormatWidth || Width;
-  const height = FormatHeight || Height;
+  const assetUrl = Url
+  const title = media.Name
+  const width = FormatWidth || Width
+  const height = FormatHeight || Height
   const alt =
     media.Metadata?.find((meta) => meta.Name.includes("AltText_"))?.Value ||
-    Name;
+    Name
 
   return (
     <div key={Url} style={{ fontFamily: "Inter" }}>
@@ -91,7 +91,7 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
                   title={Name}
                   aspectRatio={AspectRatio}
                 />
-              );
+              )
             },
             modalProps: {
               size: "max",
@@ -106,12 +106,12 @@ function Media({ media, onDelete, onEdit }: MediaProps) {
                 overlay: {},
               },
             },
-          };
-          cbModal(cbModalProps);
+          }
+          cbModal(cbModalProps)
         }}
       />
     </div>
-  );
+  )
 }
 
 export default function ImageVaultDAM({
@@ -119,42 +119,42 @@ export default function ImageVaultDAM({
   config,
   initialData,
 }: ImageVaultDAMProps) {
-  const [media, setMedia] = useState<InsertResponse | null>(initialData);
+  const [media, setMedia] = useState<InsertResponse | null>(initialData)
 
-  const field = sdk.location.CustomField?.field;
-  const frame = sdk.location.CustomField?.frame;
-  const entry = sdk.location.CustomField?.entry;
-  const stack = sdk.location.CustomField?.stack;
+  const field = sdk.location.CustomField?.field
+  const frame = sdk.location.CustomField?.frame
+  const entry = sdk.location.CustomField?.entry
+  const stack = sdk.location.CustomField?.stack
 
   const updateFrameHeight = useCallback(() => {
     if (frame?.updateHeight) {
       // We need to recalculate the height of the iframe when an image is added.
       // Cannot use flushSync inside useEffect.
-      setTimeout(() => frame.updateHeight(document.body.scrollHeight), 0);
+      setTimeout(() => frame.updateHeight(document.body.scrollHeight), 0)
     }
-  }, [frame]);
+  }, [frame])
 
   const handleMedia = useCallback(
     (result?: InsertResponse) => {
       if (field && result) {
         flushSync(() => {
-          setMedia(result);
-          field.setData(result);
-          document.body.style.overflow = "hidden";
-        });
+          setMedia(result)
+          field.setData(result)
+          document.body.style.overflow = "hidden"
+        })
       }
 
-      updateFrameHeight();
+      updateFrameHeight()
     },
     [field, updateFrameHeight]
-  );
+  )
 
   useEffect(() => {
-    updateFrameHeight();
-  }, [updateFrameHeight]);
+    updateFrameHeight()
+  }, [updateFrameHeight])
 
   const handleEdit = useCallback(() => {
-    const fieldData = field?.getData() as InsertResponse;
+    const fieldData = field?.getData() as InsertResponse
     if (isInsertResponse(fieldData)) {
       cbModal({
         // @ts-expect-error: Component is badly typed
@@ -168,12 +168,12 @@ export default function ImageVaultDAM({
         modalProps: {
           size: "max",
         },
-      });
+      })
     }
-  }, [field, handleMedia]);
+  }, [field, handleMedia])
 
   if (!field || !frame || !entry || !stack) {
-    return <p>Initializing custom field...</p>;
+    return <p>Initializing custom field...</p>
   }
 
   const entryData: EntryDataPublishDetails = {
@@ -186,7 +186,7 @@ export default function ImageVaultDAM({
       entry.getField("title").getData().toString() ||
       `Untitled (${entry.content_type.uid})`,
     uid: entry._data.uid,
-  };
+  }
 
   return (
     <div>
@@ -200,8 +200,8 @@ export default function ImageVaultDAM({
         <Media
           media={media}
           onDelete={() => {
-            setMedia(null);
-            handleMedia();
+            setMedia(null)
+            handleMedia()
           }}
           onEdit={handleEdit}
         />
@@ -212,10 +212,10 @@ export default function ImageVaultDAM({
               config,
               entryData,
               onSuccess: handleMedia,
-            });
+            })
           }}
         />
       )}
     </div>
-  );
+  )
 }