chore: add and run prettier

2024-03-26 13:02:26 +01:00
parent e9349992f8
commit 083c57d0ca
27 changed files with 430 additions and 379 deletions
--- a/remix/app/components/ConfigForm.tsx
+++ b/remix/app/components/ConfigForm.tsx
@@ -4,22 +4,22 @@ import {
  Help,
  Line,
  TextInput,
-} from "@contentstack/venus-components";
-import { ChangeEvent, useState } from "react";
-import { ImageVaultDAMConfig } from "~/utils/imagevault";
+} from "@contentstack/venus-components"
+import { ChangeEvent, useState } from "react"
+import { ImageVaultDAMConfig } from "~/utils/imagevault"

-import type { IInstallationData } from "@contentstack/app-sdk/dist/src/types";
+import type { IInstallationData } from "@contentstack/app-sdk/dist/src/types"

 export type ConfigFormProps = {
-  values: Partial<ImageVaultDAMConfig>;
-  setInstallationData: (data: IInstallationData) => void;
-};
+  values: Partial<ImageVaultDAMConfig>
+  setInstallationData: (data: IInstallationData) => void
+}

 export default function ConfigForm({
  values,
  setInstallationData,
 }: ConfigFormProps) {
-  const [finalValues, setFinalValues] = useState(values);
+  const [finalValues, setFinalValues] = useState(values)

  return (
    <div style={{ display: "grid", gap: "18px", margin: "18px" }}>
@@ -37,7 +37,7 @@ export default function ConfigForm({
            setFinalValues((prev) => ({
              ...prev,
              baseUrl: evt.target.value,
-            }));
+            }))

            setInstallationData({
              configuration: {
@@ -45,7 +45,7 @@ export default function ConfigForm({
                baseUrl: evt.target.value,
              },
              serverConfiguration: {},
-            });
+            })
          }}
          required={true}
          willBlurOnEsc={true}
@@ -76,7 +76,7 @@ export default function ConfigForm({
            setFinalValues((prev) => ({
              ...prev,
              formatId: evt.target.value,
-            }));
+            }))

            setInstallationData({
              configuration: {
@@ -84,7 +84,7 @@ export default function ConfigForm({
                formatId: evt.target.value,
              },
              serverConfiguration: {},
-            });
+            })
          }}
        />
      </Field>
@@ -109,7 +109,7 @@ export default function ConfigForm({
            setFinalValues((prev) => ({
              ...prev,
              imageVaultUrl: evt.target.value,
-            }));
+            }))

            setInstallationData({
              configuration: {
@@ -117,10 +117,10 @@ export default function ConfigForm({
                imageVaultUrl: evt.target.value,
              },
              serverConfiguration: {},
-            });
+            })
          }}
        />
      </Field>
    </div>
-  );
+  )
 }
--- a/remix/app/components/Disclaimer.tsx
+++ b/remix/app/components/Disclaimer.tsx
@@ -8,5 +8,5 @@ export default function Disclaimer() {
        save the entry at least once with a title before choosing an image.
      </p>
    </div>
-  );
+  )
 }
--- a/remix/app/components/FullSizeImage.tsx
+++ b/remix/app/components/FullSizeImage.tsx
@@ -1,4 +1,4 @@
-import { ModalBody, ModalHeader } from "@contentstack/venus-components";
+import { ModalBody, ModalHeader } from "@contentstack/venus-components"

 export default function FullSizeImage({
  title,
@@ -7,11 +7,11 @@ export default function FullSizeImage({
  alt,
  aspectRatio,
 }: {
-  title: string;
-  onClose: () => void;
-  imageUrl: string;
-  alt: string;
-  aspectRatio: number;
+  title: string
+  onClose: () => void
+  imageUrl: string
+  alt: string
+  aspectRatio: number
 }) {
  return (
    <>
@@ -37,5 +37,5 @@ export default function FullSizeImage({
        />
      </ModalBody>
    </>
-  );
+  )
 }
--- a/remix/app/components/ImageEditModal.tsx
+++ b/remix/app/components/ImageEditModal.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, ChangeEvent } from "react";
+import { useState, useEffect, ChangeEvent } from "react"
 import {
  ModalFooter,
  ModalBody,
@@ -8,59 +8,59 @@ import {
  Field as FieldComponent,
  FieldLabel,
  TextInput,
-} from "@contentstack/venus-components";
+} from "@contentstack/venus-components"

-import type { InsertResponse } from "~/types/imagevault";
+import type { InsertResponse } from "~/types/imagevault"

 type ImageEditModalProps = {
-  fieldData: InsertResponse;
-  setData: (data: InsertResponse) => void;
-  closeModal: () => void;
-};
+  fieldData: InsertResponse
+  setData: (data: InsertResponse) => void
+  closeModal: () => void
+}

 export default function ImageEditModal({
  fieldData,
  closeModal,
  setData,
 }: ImageEditModalProps) {
-  const [altText, setAltText] = useState("");
-  const [caption, setCaption] = useState("");
+  const [altText, setAltText] = useState("")
+  const [caption, setCaption] = useState("")

-  const assetUrl = fieldData.MediaConversions[0].Url;
+  const assetUrl = fieldData.MediaConversions[0].Url

  useEffect(() => {
    if (fieldData.Metadata && fieldData.Metadata.length) {
      const altText = fieldData.Metadata.find((meta) =>
        meta.Name.includes("AltText_")
-      )?.Value;
+      )?.Value

      const caption = fieldData.Metadata.find((meta) =>
        meta.Name.includes("Title_")
-      )?.Value;
+      )?.Value

-      setAltText(altText ?? "");
-      setCaption(caption ?? "");
+      setAltText(altText ?? "")
+      setCaption(caption ?? "")
    }
-  }, [fieldData.Metadata]);
+  }, [fieldData.Metadata])

  function handleSave() {
-    const metaData = fieldData.Metadata ?? [];
+    const metaData = fieldData.Metadata ?? []

    const newMetadata = metaData.map((meta) => {
      if (meta.Name.includes("AltText_")) {
-        return { ...meta, Value: altText };
+        return { ...meta, Value: altText }
      }
      if (meta.Name.includes("Title_")) {
-        return { ...meta, Value: caption };
+        return { ...meta, Value: caption }
      }
-      return meta;
-    });
+      return meta
+    })

    setData({
      ...fieldData,
      Metadata: newMetadata,
-    });
-    closeModal();
+    })
+    closeModal()
  }

  return (
@@ -120,5 +120,5 @@ export default function ImageEditModal({
        </ButtonGroup>
      </ModalFooter>
    </>
-  );
+  )
 }
--- a/remix/app/components/ImageVaultDAM.tsx
+++ b/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>
-  );
+  )
 }
--- a/remix/app/components/InvalidConfig.tsx
+++ b/remix/app/components/InvalidConfig.tsx
@@ -7,5 +7,5 @@ export default function InvalidConfig() {
        to run correctly.
      </p>
    </div>
-  );
+  )
 }