feat: Contentstack <-> ImageVault integration

remix/.eslintrc.cjs

@@ -0,0 +1,90 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+  ignorePatterns: ['build/**/*', 'node_modules/**/*', 'public/**/*'],
+
+  // Base config
+  extends: ['eslint:recommended'],
+
+  overrides: [
+    // React
+    {
+      files: ['**/*.{js,jsx,ts,tsx}'],
+      plugins: ['react', 'jsx-a11y'],
+      rules: {
+        'react/jsx-uses-vars': 'error',
+        'react/jsx-uses-react': 'error',
+      },
+      extends: [
+        'plugin:react/recommended',
+        'plugin:react/jsx-runtime',
+        'plugin:react-hooks/recommended',
+        'plugin:jsx-a11y/recommended',
+      ],
+      settings: {
+        react: {
+          version: 'detect',
+        },
+        formComponents: ['Form'],
+        linkComponents: [
+          { name: 'Link', linkAttribute: 'to' },
+          { name: 'NavLink', linkAttribute: 'to' },
+        ],
+        'import/resolver': {
+          typescript: {
+            project: './remix/tsconfig.json',
+          },
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ['**/*.{ts,tsx}'],
+      plugins: ['@typescript-eslint', 'import'],
+      parser: '@typescript-eslint/parser',
+      settings: {
+        'import/internal-regex': '^~/',
+        'import/resolver': {
+          node: {
+            extensions: ['.ts', '.tsx'],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        'plugin:import/recommended',
+        'plugin:import/typescript',
+      ],
+    },
+
+    // Node
+    {
+      files: ['.eslintrc.cjs'],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

remix/app/components/ConfigForm.tsx

@@ -0,0 +1,126 @@
+import {
+  Field,
+  FieldLabel,
+  Help,
+  Line,
+  TextInput,
+} from "@contentstack/venus-components";
+import { ChangeEvent, useState } from "react";
+import { ImageVaultDAMConfig } from "~/utils/imagevault";
+
+import type { IInstallationData } from "@contentstack/app-sdk/dist/src/types";
+
+export type ConfigFormProps = {
+  values: Partial<ImageVaultDAMConfig>;
+  setInstallationData: (data: IInstallationData) => void;
+};
+
+export default function ConfigForm({
+  values,
+  setInstallationData,
+}: ConfigFormProps) {
+  const [finalValues, setFinalValues] = useState(values);
+
+  return (
+    <div style={{ display: "grid", gap: "18px", margin: "18px" }}>
+      <Field style={{}}>
+        <FieldLabel version="v2" htmlFor="baseUrl">
+          Base url for contentstack
+        </FieldLabel>
+        <Help text="Including the region. Used as publishing source on ImageVault" />
+        <TextInput
+          id="baseUrl"
+          name="baseUrl"
+          type="url"
+          value={finalValues.baseUrl}
+          onChange={(evt: ChangeEvent<HTMLInputElement>) => {
+            setFinalValues((prev) => ({
+              ...prev,
+              baseUrl: evt.target.value,
+            }));
+
+            setInstallationData({
+              configuration: {
+                ...finalValues,
+                baseUrl: evt.target.value,
+              },
+              serverConfiguration: {},
+            });
+          }}
+          required={true}
+          willBlurOnEsc={true}
+          placeholder="Base url for Contentstack....."
+          version="v2"
+          width="large"
+        />
+      </Field>
+
+      <Line type="dashed" />
+
+      <Field>
+        <FieldLabel version="v2" htmlFor="formatId">
+          Format Id for images
+        </FieldLabel>
+        <Help text="Images are fetched with a certain format. This should be an id from ImageVault" />
+        <TextInput
+          id="formatId"
+          name="formatId"
+          type="number"
+          value={finalValues?.formatId}
+          required={true}
+          willBlurOnEsc={true}
+          placeholder="Id for selected format..."
+          version="v2"
+          width="large"
+          onChange={(evt: ChangeEvent<HTMLInputElement>) => {
+            setFinalValues((prev) => ({
+              ...prev,
+              formatId: evt.target.value,
+            }));
+
+            setInstallationData({
+              configuration: {
+                ...finalValues,
+                formatId: evt.target.value,
+              },
+              serverConfiguration: {},
+            });
+          }}
+        />
+      </Field>
+
+      <Line type="dashed" />
+
+      <Field>
+        <FieldLabel version="v2" htmlFor="v">
+          Url to ImageVault
+        </FieldLabel>
+        <TextInput
+          id="imageVaultUrl"
+          name="imageVaultUrl"
+          type="url"
+          value={finalValues.imageVaultUrl}
+          required={true}
+          willBlurOnEsc={true}
+          placeholder="www..."
+          version="v2"
+          width="large"
+          onChange={(evt: ChangeEvent<HTMLInputElement>) => {
+            setFinalValues((prev) => ({
+              ...prev,
+              imageVaultUrl: evt.target.value,
+            }));
+
+            setInstallationData({
+              configuration: {
+                ...finalValues,
+                imageVaultUrl: evt.target.value,
+              },
+              serverConfiguration: {},
+            });
+          }}
+        />
+      </Field>
+    </div>
+  );
+}

remix/app/components/Disclaimer.tsx

@@ -0,0 +1,12 @@
+export default function Disclaimer() {
+  return (
+    <div>
+      <p>Entry has not been saved or is missing value for title!</p>
+      <p>
+        ImageVault provides better publication tracking if the entry has been
+        saved and has a title before picking an asset. Therefore you need to
+        save the entry at least once with a title before choosing an image.
+      </p>
+    </div>
+  );
+}

remix/app/components/FullSizeImage.tsx

@@ -0,0 +1,41 @@
+import { ModalBody, ModalHeader } from "@contentstack/venus-components";
+
+export default function FullSizeImage({
+  title,
+  onClose,
+  imageUrl,
+  alt,
+  aspectRatio,
+}: {
+  title: string;
+  onClose: () => void;
+  imageUrl: string;
+  alt: string;
+  aspectRatio: number;
+}) {
+  return (
+    <>
+      <ModalHeader title={title} closeModal={onClose} />
+      <ModalBody
+        id="fullsize-image"
+        style={{
+          maxHeight: "inherit",
+          borderRadius: "50px",
+          display: "flex",
+          justifyContent: "center",
+        }}
+      >
+        <img
+          src={imageUrl}
+          style={{
+            aspectRatio,
+            maxWidth: "100%",
+            maxHeight: "100%",
+            objectFit: "contain",
+          }}
+          alt={alt}
+        />
+      </ModalBody>
+    </>
+  );
+}

remix/app/components/ImageEditModal.tsx

@@ -0,0 +1,124 @@
+import { useState, useEffect, ChangeEvent } from "react";
+import {
+  ModalFooter,
+  ModalBody,
+  ModalHeader,
+  ButtonGroup,
+  Button,
+  Field as FieldComponent,
+  FieldLabel,
+  TextInput,
+} from "@contentstack/venus-components";
+
+import type { InsertResponse } from "~/types/imagevault";
+
+type ImageEditModalProps = {
+  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 assetUrl = fieldData.MediaConversions[0].Url;
+
+  useEffect(() => {
+    if (fieldData.Metadata && fieldData.Metadata.length) {
+      const altText = fieldData.Metadata.find((meta) =>
+        meta.Name.includes("AltText_")
+      )?.Value;
+
+      const caption = fieldData.Metadata.find((meta) =>
+        meta.Name.includes("Title_")
+      )?.Value;
+
+      setAltText(altText ?? "");
+      setCaption(caption ?? "");
+    }
+  }, [fieldData.Metadata]);
+
+  function handleSave() {
+    const metaData = fieldData.Metadata ?? [];
+
+    const newMetadata = metaData.map((meta) => {
+      if (meta.Name.includes("AltText_")) {
+        return { ...meta, Value: altText };
+      }
+      if (meta.Name.includes("Title_")) {
+        return { ...meta, Value: caption };
+      }
+      return meta;
+    });
+
+    setData({
+      ...fieldData,
+      Metadata: newMetadata,
+    });
+    closeModal();
+  }
+
+  return (
+    <>
+      <ModalHeader title="Update image" closeModal={closeModal} />
+      <ModalBody
+        style={{
+          display: "flex",
+          gap: "1rem",
+          justifyContent: "space-between",
+          alignItems: "center",
+          width: "100%",
+        }}
+      >
+        <div style={{ flex: 1, overflowY: "auto" }}>
+          <img
+            src={assetUrl}
+            alt={altText}
+            height="100%"
+            style={{ maxHeight: "345px" }}
+          />
+        </div>
+        <div style={{ flex: 1 }}>
+          <FieldComponent>
+            <FieldLabel htmlFor="alt">Alt text</FieldLabel>
+            <TextInput
+              value={altText}
+              placeholder="Alt text for image"
+              name="alt"
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                setAltText(e.target.value)
+              }
+            />
+          </FieldComponent>
+
+          <FieldComponent>
+            <FieldLabel htmlFor="caption">Caption</FieldLabel>
+            <TextInput
+              value={caption}
+              placeholder="Caption for image..."
+              name="caption"
+              onChange={(e: ChangeEvent<HTMLInputElement>) =>
+                setCaption(e.target.value)
+              }
+            />
+          </FieldComponent>
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <ButtonGroup>
+          <Button onClick={closeModal} buttonType="light">
+            Cancel
+          </Button>
+          <Button onClick={handleSave} icon="SaveWhite">
+            Save
+          </Button>
+        </ButtonGroup>
+      </ModalFooter>
+    </>
+  );
+}

remix/app/components/ImageVaultDAM.tsx

@@ -0,0 +1,221 @@
+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";
+
+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";
+
+export type ImageVaultDAMProps = {
+  sdk: UiLocation;
+  config: ImageVaultDAMConfig;
+  initialData: InsertResponse | null;
+};
+
+type DAMButtonProps = {
+  onClick: () => void;
+};
+
+function DAMButton({ onClick }: DAMButtonProps) {
+  return (
+    <div style={{ padding: 2 }}>
+      <Button
+        onClick={onClick}
+        buttonType="link"
+        version="v2"
+        icon="v2-Assets"
+        iconAlignment="left"
+        size="small"
+        id="imagevaultpicker"
+      >
+        Choose a file
+      </Button>
+    </div>
+  );
+}
+
+type MediaProps = {
+  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];
+
+  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;
+
+  return (
+    <div key={Url} style={{ fontFamily: "Inter" }}>
+      <AssetCardVertical
+        assetType="image"
+        assetUrl={assetUrl}
+        title={title}
+        version="v2"
+        width={width}
+        height={height}
+        onDeleteClick={onDelete}
+        onEditClick={onEdit}
+        onFullScreenClick={() => {
+          const cbModalProps: CbModalProps = {
+            // @ts-expect-error: Component is badly typed
+            component: (props) => {
+              return (
+                <FullSizeImage
+                  // eslint-disable-next-line react/prop-types
+                  onClose={props.closeModal}
+                  imageUrl={Url}
+                  alt={alt}
+                  title={Name}
+                  aspectRatio={AspectRatio}
+                />
+              );
+            },
+            modalProps: {
+              size: "max",
+              style: {
+                content: {
+                  display: "grid",
+                  width: "90dvw",
+                  height: "90dvh",
+                  maxHeight: "100%",
+                  gridTemplateRows: "auto 1fr",
+                },
+                overlay: {},
+              },
+            },
+          };
+          cbModal(cbModalProps);
+        }}
+      />
+    </div>
+  );
+}
+
+export default function ImageVaultDAM({
+  sdk,
+  config,
+  initialData,
+}: ImageVaultDAMProps) {
+  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 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);
+    }
+  }, [frame]);
+
+  const handleMedia = useCallback(
+    (result?: InsertResponse) => {
+      if (field && result) {
+        flushSync(() => {
+          setMedia(result);
+          field.setData(result);
+          document.body.style.overflow = "hidden";
+        });
+      }
+
+      updateFrameHeight();
+    },
+    [field, updateFrameHeight]
+  );
+
+  useEffect(() => {
+    updateFrameHeight();
+  }, [updateFrameHeight]);
+
+  const handleEdit = useCallback(() => {
+    const fieldData = field?.getData() as InsertResponse;
+    if (isInsertResponse(fieldData)) {
+      cbModal({
+        // @ts-expect-error: Component is badly typed
+        component: (compProps) => (
+          <ImageEditModal
+            fieldData={fieldData}
+            setData={handleMedia}
+            {...compProps}
+          />
+        ),
+        modalProps: {
+          size: "max",
+        },
+      });
+    }
+  }, [field, handleMedia]);
+
+  if (!field || !frame || !entry || !stack) {
+    return <p>Initializing custom field...</p>;
+  }
+
+  const entryData: EntryDataPublishDetails = {
+    //TODO: Add support for branches
+    branch: "main",
+    contentTypeUid: entry.content_type.uid,
+    locale: entry.locale as Lang,
+    stackApiKey: stack._data.api_key,
+    title:
+      entry.getField("title").getData().toString() ||
+      `Untitled (${entry.content_type.uid})`,
+    uid: entry._data.uid,
+  };
+
+  return (
+    <div>
+      <div>
+        <FieldLabel htmlFor="imagevaultpicker" version="v2">
+          ImageVault Asset
+        </FieldLabel>
+      </div>
+
+      {media ? (
+        <Media
+          media={media}
+          onDelete={() => {
+            setMedia(null);
+            handleMedia();
+          }}
+          onEdit={handleEdit}
+        />
+      ) : (
+        <DAMButton
+          onClick={() => {
+            openImageVault({
+              config,
+              entryData,
+              onSuccess: handleMedia,
+            });
+          }}
+        />
+      )}
+    </div>
+  );
+}

remix/app/components/InvalidConfig.tsx

@@ -0,0 +1,11 @@
+export default function InvalidConfig() {
+  return (
+    <div>
+      <p>The configuration for this app is not correct!</p>
+      <p>
+        Go to the app configuration to fill in all fields in order for this app
+        to run correctly.
+      </p>
+    </div>
+  );
+}

remix/app/entry.client.tsx

@@ -0,0 +1,12 @@
+import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>
+  );
+});

remix/app/entry.server.tsx

@@ -0,0 +1,19 @@
+import type { EntryContext } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
+import { renderToString } from "react-dom/server";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  let html = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+  html = "<!DOCTYPE html>\n" + html;
+  return new Response(html, {
+    headers: { "Content-Type": "text/html" },
+    status: responseStatusCode,
+  });
+}

remix/app/hooks/useApp.ts

@@ -0,0 +1,46 @@
+import UiLocation from "@contentstack/app-sdk/dist/src/uiLocation";
+import { useEffect, useState } from "react";
+
+export class SDKLoadingError extends Error {}
+
+export default function useApp() {
+  const [, setError] = useState();
+  const [sdk, setSdk] = useState<UiLocation>();
+  const [config, setConfig] = useState<Record<string, string>>();
+
+  useEffect(() => {
+    async function init() {
+      try {
+        const ContentstackAppSDK = (await import("@contentstack/app-sdk"))
+          .default;
+        const initSdk = await ContentstackAppSDK.init();
+        setSdk(initSdk);
+
+        const config = await initSdk.getConfig();
+        setConfig(config);
+
+        const iframeWrapperRef = document.getElementById("field");
+        window.iframeRef = iframeWrapperRef;
+        window.postRobot = initSdk.postRobot;
+      } catch (e) {
+        let err: Error;
+        if (e instanceof Error) {
+          err = new SDKLoadingError(e.message);
+        }
+
+        // Error boundaries do not support async functions. Workaround:
+        // https://github.com/vercel/next.js/discussions/50564#discussioncomment-6063866
+        setError(() => {
+          throw err;
+        });
+      }
+    }
+
+    init();
+  }, [setSdk, setConfig]);
+
+  return {
+    sdk,
+    config,
+  };
+}

remix/app/root.tsx

@@ -0,0 +1,72 @@
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useRouteError,
+} from '@remix-run/react';
+import { SDKLoadingError } from './hooks/useApp';
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <link
+          rel="stylesheet"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
+        />
+        <link
+          rel="stylesheet"
+          href="https://www.unpkg.com/@contentstack/venus-components@2.2.3/build/main.css"
+        />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
+
+export function HydrateFallback() {
+  return <p>Loading...</p>;
+}
+
+export function ErrorBoundary() {
+  const error = useRouteError();
+  console.error(error);
+
+  return (
+    <html lang="en">
+      <head>
+        <title>Oh no!</title>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {error instanceof SDKLoadingError ? (
+          <div>
+            <h2>Unable to load Contentstack SDK</h2>
+            <p>Make sure you have proper configuration in Contentstack.</p>
+          </div>
+        ) : (
+          <div>
+            <h2>Something went wrong</h2>
+            <p>Check the console for the error.</p>
+          </div>
+        )}
+        <Scripts />
+      </body>
+    </html>
+  );
+}

remix/app/routes/_index.tsx

@@ -0,0 +1,15 @@
+import type { MetaFunction } from '@remix-run/node';
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: 'DAM: ImageVault integration' },
+    {
+      name: 'description',
+      content: 'Integration of ImageVault as a DAM for Contentstack',
+    },
+  ];
+};
+
+export default function Index() {
+  return null;
+}

remix/app/routes/config.tsx

@@ -0,0 +1,38 @@
+import { Suspense, lazy } from "react";
+import useApp from "~/hooks/useApp";
+
+const ConfigForm = lazy(() => import("~/components/ConfigForm"));
+
+export default function ConfigPage() {
+  const { sdk, config } = useApp();
+
+  const appConfigWidget = sdk?.location.AppConfigWidget;
+
+  const setInstallationData = appConfigWidget?.installation.setInstallationData;
+
+  if (!config) {
+    return (
+      <div>
+        <p>
+          Could not fetch the current configuration, please try again later!
+        </p>
+      </div>
+    );
+  }
+
+  if (!setInstallationData) {
+    return (
+      <div>
+        <p>
+          THe configuration cannot be updated right now, please try again later!
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <Suspense fallback={<p>Loading config form...</p>}>
+      <ConfigForm values={config} setInstallationData={setInstallationData} />
+    </Suspense>
+  );
+}

remix/app/routes/field.tsx

@@ -0,0 +1,69 @@
+import { Suspense, lazy, useEffect, useState } from "react";
+import { useScript } from "usehooks-ts";
+import useApp from "~/hooks/useApp";
+
+import Disclaimer from "~/components/Disclaimer";
+import InvalidConfig from "~/components/InvalidConfig";
+
+import { isImageVaultDAMConfig } from "~/utils/imagevault";
+import type { InsertResponse } from "~/types/imagevault";
+
+const ImageVaultDAM = lazy(() => import("~/components/ImageVaultDAM"));
+
+export default function Field() {
+  const { sdk, config } = useApp();
+  const ivStatus = useScript(
+    "/scripts/imagevault-insert-media/insertmediawindow.min.js"
+  );
+
+  const [showDisclaimer, setShowDisclaimer] = useState(false);
+  const [fieldData, setFieldData] = useState<InsertResponse>();
+
+  const entry = sdk?.location.CustomField?.entry;
+  const field = sdk?.location.CustomField?.field;
+
+  useEffect(() => {
+    // If we can get field data from the SDK that means the entry has been
+    // saved at least once. If this is true, we are guaranteed entry UID.
+    // Entry that has not been saved does not have a entry UID and therefore
+    // cannot be referred to by ImageVault. Entry title is also required by us.
+    try {
+      if (field && entry) {
+        const data = field.getData();
+        const title = entry.getField("title").getData().toString();
+        if (data && title) {
+          setFieldData(data as InsertResponse);
+        } else {
+          throw new Error("Missing data or title for entry");
+        }
+      }
+    } catch (e) {
+      setShowDisclaimer(true);
+    }
+  }, [entry, field]);
+
+  if (showDisclaimer) {
+    return <Disclaimer />;
+  }
+
+  const loaded = !!(fieldData && ivStatus === "ready" && sdk && config);
+
+  const initialData =
+    fieldData && Object.keys(fieldData).length > 0 ? fieldData : null;
+
+  if (!loaded) {
+    return <p style={{ fontFamily: "Inter" }}> Loading dependecies...</p>;
+  }
+
+  return (
+    <div id="field">
+      {isImageVaultDAMConfig(config) ? (
+        <Suspense fallback={<p>Loading field...</p>}>
+          <ImageVaultDAM config={config} sdk={sdk} initialData={initialData} />
+        </Suspense>
+      ) : (
+        <InvalidConfig />
+      )}
+    </div>
+  );
+}

remix/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/node" />
+/// <reference types="vite/client" />

remix/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@scandichotels/contentstack-imagevault-remix",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "remix vite:build",
+    "dev": "remix vite:dev --port 3000",
+    "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint .",
+    "prebuild": "concurrently npm:lint npm:typecheck",
+    "preview": "vite preview",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@remix-run/node": "^2.8.1",
+    "@remix-run/react": "^2.8.1",
+    "usehooks-ts": "^3.0.2"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "^2.8.1"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

remix/public/scripts/imagevault-insert-media/insertmediawindow.min.js

@@ -0,0 +1,3 @@
+// This file is sourced from https://clientscript.imagevault.se/scripts/imagevault-insert-media/scripts/insertmediawindow.min.js
+// Removed sourceMap line.
+(()=>{"use strict";var e={26:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.InsertMediaBase=void 0;var n=function(){function e(e){this.postMessageCallbackReceived=!1,this.pingOn=!1,this.readConfig(e)}return e.prototype.messageEvent=function(e){this.messageReceiver(e)},e.prototype.readConfig=function(e){var t=null;if(null==e.origin){var n=document.createElement("a");n.href=e.imageVaultUiUrl,e.origin=n.protocol+"//"+n.hostname,n.port&&(/http:/i.test(n.protocol)&&"80"!==n.port||/https:/i.test(n.protocol)&&"443"!==n.port)&&(e.origin+=":".concat(n.port))}if(e.publishingSource||(t="Publish source must be configured"),null!=t&&e.error)e.error(null,t);else if(null!=t)throw t;this.config=e},e.prototype.setupCallback=function(){var e=this;if(this.postMessageCallbackReceived)return!0;if(this.containerWindow.postMessage){try{this.containerWindow.postMessage("init",this.config.origin)}catch(e){}setTimeout((function(){e.setupCallback()}),1e3)}return!1},e.prototype.ping=function(){var e=this;if(this.pingOn){if(this.containerWindow.postMessage)try{this.containerWindow.postMessage("ping",this.config.origin)}catch(e){}setTimeout((function(){e.ping()}),1e3)}},e.prototype.messageReceiver=function(e){var t=this;if(e.origin===this.config.origin){if("initReceived"===e.data)return this.postMessageCallbackReceived=!0,this.pingOn=!0,setTimeout((function(){t.ping()}),1e3),void(this.config.debug&&this.config.debug(e));if("pong"!==e.data)return"close"===e.data?(this.pingOn=!1,this.beforeClose&&this.beforeClose(e),void(this.config.close&&this.config.close(e))):void(this.config.success&&(e.response=JSON.parse(e.data),this.config.success(e)));this.config.debug&&this.config.debug(e)}else this.config.error&&this.config.error(e,"origin does not match")},e}();t.InsertMediaBase=n},655:function(e,t,n){var o,i=this&&this.__extends||(o=function(e,t){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])},o(e,t)},function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function n(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)});Object.defineProperty(t,"__esModule",{value:!0}),t.InsertMediaWindow=void 0;var s=function(e){function t(t,n){var o=e.call(this,t)||this;return o.setupComplete=!0,o.windowOptions=n,o}return i(t,e),t.prototype.openImageVault=function(){var e=this.config;e.formatId||(e.formatId="0");var t="mediaurlbase=".concat(encodeURIComponent(e.mediaUrlBase),"&ensurepublishingsource=").concat(encodeURIComponent(e.publishingSource))+(e.uiLang?"&uiLang=".concat(encodeURIComponent(e.uiLang)):"")+(e.pageLang?"&pagelang=".concat(encodeURIComponent(e.pageLang)):"")+(e.mediaUrl?"&mediaUrl=".concat(encodeURIComponent(e.mediaUrl)):"")+(e.insertMode?"&insertMode=".concat(encodeURIComponent(e.insertMode.toString())):"")+(e.insertMultiple?"&insertmultiple=".concat(encodeURIComponent(e.insertMultiple.toString())):"")+"&formatId=".concat(e.formatId.toString())+(e.additionalMetadataIds?"&additionalMetadataIds=".concat(encodeURIComponent(e.additionalMetadataIds.toString())):""),n=e.publishDetails;n&&(t+=(n.text?"&publishdetails.Text=".concat(encodeURIComponent(n.text)):"")+(n.url?"&publishdetails.Url=".concat(encodeURIComponent(n.url)):"")+(n.groupId?"&publishdetails.GroupId=".concat(encodeURIComponent(n.groupId)):"")),t+=e.mediaId?"#search=".concat(e.mediaId)+"&items="+e.mediaId:"#",this.containerWindow=window.open("".concat(this.config.imageVaultUiUrl,"?").concat(t),"ImageVault",this.windowOptions);var o=this,i=function(e){return o.messageEvent(e)};window.addEventListener("message",i,!1),this.beforeClose=function(){o.containerWindow.close()};var s=window.setInterval((function(){(null==o.containerWindow||o.containerWindow.closed)&&(window.clearInterval(s),window.removeEventListener("message",i,!1),window.removeEventListener("message",i,!0))}),200);this.setupComplete&&(this.postMessageCallbackReceived=!1,this.setupCallback())},t}(n(26).InsertMediaBase);t.InsertMediaWindow=s,(window.ImageVault=window.ImageVault||{}).InsertMediaWindow=s}},t={};!function n(o){var i=t[o];if(void 0!==i)return i.exports;var s=t[o]={exports:{}};return e[o].call(s.exports,s,s.exports,n),s.exports}(655)})();

remix/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../tsconfig.json",
+  "include": [
+    "env.d.ts",
+    "../types/**/*.ts",
+    "../utils/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./remix/*"],
+      "~/types/*": ["../types/*"],
+      "~/utils/*": ["../utils/*"],
+      "~/components/*": ["./app/components/*"],
+      "~/hooks/*": ["./app/hooks/*"]
+    }
+  }
+}

remix/vite.config.ts

@@ -0,0 +1,15 @@
+import { vitePlugin as remix } from '@remix-run/dev';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+export default defineConfig({
+  plugins: [
+    remix({
+      ssr: false,
+    }),
+    tsconfigPaths(),
+  ],
+  build: {
+    emptyOutDir: true,
+  },
+});