contentstack-imagevault/remix/app/components/ConfigForm.tsx

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
          type="basic"
          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
          type="basic"
          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>
  )
}