feat: Contentstack <-> ImageVault integration

2024-03-25 11:38:14 +01:00
parent 920cbf241a
commit a706b9cf8a
39 changed files with 16647 additions and 0 deletions
--- a/remix/app/components/ConfigForm.tsx
+++ b/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>
+  );
+}