From cb535460350bd510dd4b2b7d6bc3c6ec5f5bcdf1 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 10 May 2023 00:53:37 -0300
Subject: almost first document

---
 .../src/forms/FormProvider.tsx                     |  54 ++++
 .../src/forms/InputArray.tsx                       | 166 +++++++++++++
 .../src/forms/InputChoice.tsx                      | 119 +++++++++
 .../exchange-backoffice-ui/src/forms/InputDate.tsx |  36 +++
 .../src/forms/InputInteger.tsx                     |  19 ++
 .../exchange-backoffice-ui/src/forms/InputLine.tsx | 273 +++++++++++++++++++++
 .../src/forms/InputSelectMultiple.tsx              | 144 +++++++++++
 .../exchange-backoffice-ui/src/forms/InputText.tsx |   6 +
 .../src/forms/InputTextArea.tsx                    |   6 +
 packages/exchange-backoffice-ui/src/forms/forms.ts |  87 +++++++
 .../exchange-backoffice-ui/src/forms/useField.ts   |  72 ++++++
 11 files changed, 982 insertions(+)
 create mode 100644 packages/exchange-backoffice-ui/src/forms/FormProvider.tsx
 create mode 100644 packages/exchange-backoffice-ui/src/forms/InputArray.tsx
 create mode 100644 packages/exchange-backoffice-ui/src/forms/InputChoice.tsx
 create mode 100644 packages/exchange-backoffice-ui/src/forms/InputDate.tsx
 create mode 100644 packages/exchange-backoffice-ui/src/forms/InputInteger.tsx
 create mode 100644 packages/exchange-backoffice-ui/src/forms/InputLine.tsx
 create mode 100644 packages/exchange-backoffice-ui/src/forms/InputSelectMultiple.tsx
 create mode 100644 packages/exchange-backoffice-ui/src/forms/InputText.tsx
 create mode 100644 packages/exchange-backoffice-ui/src/forms/InputTextArea.tsx
 create mode 100644 packages/exchange-backoffice-ui/src/forms/forms.ts
 create mode 100644 packages/exchange-backoffice-ui/src/forms/useField.ts

(limited to 'packages/exchange-backoffice-ui/src/forms')

diff --git a/packages/exchange-backoffice-ui/src/forms/FormProvider.tsx b/packages/exchange-backoffice-ui/src/forms/FormProvider.tsx
new file mode 100644
index 000000000..c9b6783e6
--- /dev/null
+++ b/packages/exchange-backoffice-ui/src/forms/FormProvider.tsx
@@ -0,0 +1,54 @@
+import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util";
+import { ComponentChildren, VNode, createContext, h } from "preact";
+import { StateUpdater, useMemo } from "preact/hooks";
+
+export interface FormType<T> {
+  initialValue: Partial<T>;
+  value: Partial<T>;
+  onUpdate: StateUpdater<T>;
+  computeFormState?: (v: T) => FormState<T>;
+}
+
+//@ts-ignore
+export const FormContext = createContext<FormType<any>>({});
+
+type FormState<T> = {
+  [field in keyof T]?: T[field] extends AbsoluteTime
+    ? Partial<InputFieldState>
+    : T[field] extends object
+    ? FormState<T[field]>
+    : Partial<InputFieldState>;
+};
+
+export interface InputFieldState {
+  /* should show the error */
+  error?: TranslatedString;
+  /* should not allow to edit */
+  readonly: boolean;
+  /* should show as disable */
+  disabled: boolean;
+  /* should not show */
+  hidden: boolean;
+}
+
+export function FormProvider<T>({
+  children,
+  state,
+  computeFormState,
+}: {
+  state: [Partial<T>, StateUpdater<T>];
+  computeFormState?: (v: T) => FormState<T>;
+  children: ComponentChildren;
+}): VNode {
+  const [value, onUpdate] = state;
+  const initialValue = useMemo(() => value, []);
+  const contextValue = useMemo(
+    () => ({ initialValue, value, onUpdate, computeFormState }),
+    [value, onUpdate, computeFormState],
+  );
+  return (
+    <FormContext.Provider value={contextValue}>
+      <form>{children}</form>
+    </FormContext.Provider>
+  );
+}
diff --git a/packages/exchange-backoffice-ui/src/forms/InputArray.tsx b/packages/exchange-backoffice-ui/src/forms/InputArray.tsx
new file mode 100644
index 000000000..f60ed4160
--- /dev/null
+++ b/packages/exchange-backoffice-ui/src/forms/InputArray.tsx
@@ -0,0 +1,166 @@
+import { Fragment, VNode, h } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { FormProvider } from "./FormProvider.js";
+import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
+import { RenderAllFieldsByUiConfig, UIFormField } from "./forms.js";
+import { useField } from "./useField.js";
+
+export function InputArray(
+  props: {
+    fields: UIFormField[];
+    labelField: string;
+  } & UIFormProps<Array<{}>>,
+): VNode {
+  const { fields, labelField, name, label, required, tooltip } = props;
+  const { value, onChange } = useField<{ [s: string]: Array<any> }>(name);
+  const list = value ?? [];
+  const [selectedIndex, setSelected] = useState<number | undefined>(undefined);
+  const selected =
+    selectedIndex === undefined ? undefined : list[selectedIndex];
+  const formState = useState(selected ?? {});
+  useEffect(() => {
+    const [, update] = formState;
+    update(selected);
+  }, [selected]);
+  return (
+    <div class="sm:col-span-6">
+      <LabelWithTooltipMaybeRequired
+        label={label}
+        required={required}
+        tooltip={tooltip}
+      />
+
+      <div class="flex mb-4 items-center pt-3">
+        <div class="flex-auto">
+          {selectedIndex !== undefined && (
+            <button
+              type="button"
+              onClick={() => {
+                setSelected(undefined);
+              }}
+              class="block rounded-md bg-white px-3 py-2 text-center text-sm font-semibold shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            >
+              Cancel
+            </button>
+          )}
+        </div>
+        <div class="flex-none">
+          {selectedIndex === undefined && (
+            <button
+              type="button"
+              onClick={() => {
+                setSelected(list.length);
+              }}
+              class="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm  text-white shadow-sm hover:bg-indigo-500 "
+            >
+              Add
+            </button>
+          )}
+        </div>
+      </div>
+      <div class="-space-y-px rounded-md bg-white ">
+        {list.map((v, idx) => {
+          const isFirst = idx === 0;
+          const isLast = idx === list.length - 1;
+          const isSelected = selectedIndex === idx;
+          const disabled = selectedIndex !== undefined && !isSelected;
+          let clazz =
+            "relative flex border p-4 focus:outline-none disabled:text-grey";
+          if (isFirst) {
+            clazz += " rounded-tl-md rounded-tr-md ";
+          }
+          if (isLast) {
+            clazz += " rounded-bl-md rounded-br-md ";
+          }
+          if (isSelected) {
+            clazz += " z-10 border-indigo-200 bg-indigo-50 ";
+          } else {
+            clazz += " border-gray-200";
+          }
+          if (disabled) {
+            clazz +=
+              " cursor-not-allowed bg-gray-50 text-gray-500 ring-gray-200  text-gray";
+          } else {
+            clazz += " cursor-pointer";
+          }
+          return (
+            <label class={clazz}>
+              <Fragment>
+                <input
+                  type="radio"
+                  name="privacy-setting"
+                  checked={isSelected}
+                  disabled={disabled}
+                  onClick={() => setSelected(idx)}
+                  class="mt-0.5 h-4 w-4 shrink-0 text-indigo-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200  focus:ring-indigo-600"
+                  aria-labelledby="privacy-setting-0-label"
+                  aria-describedby="privacy-setting-0-description"
+                />
+                <span class="ml-3 flex flex-col">
+                  <span
+                    id="privacy-setting-0-label"
+                    disabled
+                    class="block text-sm font-medium"
+                  >
+                    {v[labelField]}
+                  </span>
+                  {/* <!-- Checked: "text-indigo-700", Not Checked: "text-gray-500" --> */}
+                  {/* <span
+                    id="privacy-setting-0-description"
+                    class="block text-sm"
+                  >
+                    This project would be available to anyone who has the link
+                  </span> */}
+                </span>
+              </Fragment>
+            </label>
+          );
+        })}
+      </div>
+      {selectedIndex !== undefined && (
+        <FormProvider state={formState}>
+          <div class="px-4 py-6">
+            <div class="grid grid-cols-1 gap-y-8 ">
+              <RenderAllFieldsByUiConfig fields={fields} />
+            </div>
+          </div>
+        </FormProvider>
+      )}
+      {selectedIndex !== undefined && (
+        <div class="flex items-center pt-3">
+          <div class="flex-auto">
+            {selected !== undefined && (
+              <button
+                type="button"
+                onClick={() => {
+                  const newValue = [...list];
+                  newValue.splice(selectedIndex, 1);
+                  onChange(newValue);
+                  setSelected(undefined);
+                }}
+                class="block rounded-md bg-red-600 px-3 py-2 text-center text-sm  text-white shadow-sm hover:bg-red-500 "
+              >
+                Remove
+              </button>
+            )}
+          </div>
+          <div class="flex-none">
+            <button
+              type="button"
+              onClick={() => {
+                const newValue = [...list];
+                const [confirmed] = formState;
+                newValue.splice(selectedIndex, 1, confirmed);
+                onChange(newValue);
+                setSelected(undefined);
+              }}
+              class="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm  text-white shadow-sm hover:bg-indigo-500 "
+            >
+              Confirm
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/exchange-backoffice-ui/src/forms/InputChoice.tsx b/packages/exchange-backoffice-ui/src/forms/InputChoice.tsx
new file mode 100644
index 000000000..dae5ff34a
--- /dev/null
+++ b/packages/exchange-backoffice-ui/src/forms/InputChoice.tsx
@@ -0,0 +1,119 @@
+import { TranslatedString } from "@gnu-taler/taler-util";
+import { Fragment, VNode, h } from "preact";
+import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
+import { useField } from "./useField.js";
+
+function classNames(...classes: string[]): string {
+  return classes.filter(Boolean).join(" ");
+}
+const memoryOptions = [
+  { name: "4 GB", inStock: true },
+  { name: "8 GB", inStock: true },
+  { name: "16 GB", inStock: true },
+  { name: "32 GB", inStock: true },
+  { name: "64 GB", inStock: true },
+  { name: "128 GB", inStock: false },
+];
+
+export interface Choice {
+  label: TranslatedString;
+  description?: TranslatedString;
+  value: string;
+}
+
+export function InputChoiceStacked(
+  props: {
+    choices: Choice[];
+  } & UIFormProps<string>,
+): VNode {
+  const {
+    choices,
+    name,
+    label,
+    tooltip,
+    placeholder,
+    required,
+    before,
+    after,
+    converter,
+  } = props;
+  const { value, onChange, state, isDirty } = useField(name);
+  if (state.hidden) {
+    return <Fragment />;
+  }
+
+  return (
+    <div class="sm:col-span-4">
+      <LabelWithTooltipMaybeRequired
+        label={label}
+        required={required}
+        tooltip={tooltip}
+      />
+      <fieldset class="mt-2">
+        {value !== undefined && !required && (
+          <div class="flex mb-2 items-center ">
+            <div class="flex-auto">
+              <button
+                type="button"
+                onClick={() => {
+                  onChange(undefined!);
+                }}
+                class="block rounded-md bg-white px-3 py-2 text-center text-sm font-semibold shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        )}
+
+        <div class="space-y-4">
+          {choices.map((choice) => {
+            let clazz =
+              "border relative block cursor-pointer rounded-lg bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex sm:justify-between";
+            if (choice.value === value) {
+              clazz +=
+                " border-transparent border-indigo-600 ring-2 ring-indigo-600";
+            } else {
+              clazz += " border-gray-300";
+            }
+            return (
+              <label class={clazz}>
+                <input
+                  type="radio"
+                  name="server-size"
+                  value={choice.value}
+                  onClick={(e) => {
+                    onChange(choice.value);
+                  }}
+                  class="sr-only"
+                  aria-labelledby="server-size-0-label"
+                  aria-describedby="server-size-0-description-0 server-size-0-description-1"
+                />
+                <span class="flex items-center">
+                  <span class="flex flex-col text-sm">
+                    <span
+                      id="server-size-0-label"
+                      class="font-medium text-gray-900"
+                    >
+                      {choice.label}
+                    </span>
+                    {choice.description !== undefined && (
+                      <span
+                        id="server-size-0-description-0"
+                        class="text-gray-500"
+                      >
+                        <span class="block sm:inline">
+                          {choice.description}
+                        </span>
+                      </span>
+                    )}
+                  </span>
+                </span>
+              </label>
+            );
+          })}
+        </div>
+      </fieldset>
+    </div>
+  );
+}
diff --git a/packages/exchange-backoffice-ui/src/forms/InputDate.tsx b/packages/exchange-backoffice-ui/src/forms/InputDate.tsx
new file mode 100644
index 000000000..c9e1421f8
--- /dev/null
+++ b/packages/exchange-backoffice-ui/src/forms/InputDate.tsx
@@ -0,0 +1,36 @@
+import { AbsoluteTime } from "@gnu-taler/taler-util";
+import { InputLine, UIFormProps } from "./InputLine.js";
+import { CalendarIcon } from "@heroicons/react/24/outline";
+import { VNode, h } from "preact";
+import { format, parse } from "date-fns";
+
+export function InputDate(
+  props: { pattern?: string } & UIFormProps<AbsoluteTime>,
+): VNode {
+  const pattern = props.pattern ?? "dd/MM/yyyy";
+  return (
+    <InputLine<AbsoluteTime>
+      type="text"
+      after={{
+        type: "icon",
+        icon: <CalendarIcon class="h-6 w-6" />,
+      }}
+      converter={{
+        fromStringUI: (v) => {
+          if (!v) return { t_ms: "never" };
+          console.log("from", v);
+          const t_ms = parse(v, pattern, Date.now()).getTime();
+          return { t_ms };
+        },
+        toStringUI: (v) => {
+          return v === undefined
+            ? ""
+            : v.t_ms === "never"
+            ? "never"
+            : format(v.t_ms, pattern);
+        },
+      }}
+      {...props}
+    />
+  );
+}
diff --git a/packages/exchange-backoffice-ui/src/forms/InputInteger.tsx b/packages/exchange-backoffice-ui/src/forms/InputInteger.tsx
new file mode 100644
index 000000000..49e6973fc
--- /dev/null
+++ b/packages/exchange-backoffice-ui/src/forms/InputInteger.tsx
@@ -0,0 +1,19 @@
+import { VNode, h } from "preact";
+import { InputLine, UIFormProps } from "./InputLine.js";
+
+export function InputInteger(props: UIFormProps<number>): VNode {
+  return (
+    <InputLine
+      type="number"
+      converter={{
+        fromStringUI: (v) => {
+          return !v ? 0 : Number.parseInt(v, 10);
+        },
+        toStringUI: (v?: number) => {
+          return v === undefined ? "" : String(v);
+        },
+      }}
+      {...props}
+    />
+  );
+}
diff --git a/packages/exchange-backoffice-ui/src/forms/InputLine.tsx b/packages/exchange-backoffice-ui/src/forms/InputLine.tsx
new file mode 100644
index 000000000..0870e885a
--- /dev/null
+++ b/packages/exchange-backoffice-ui/src/forms/InputLine.tsx
@@ -0,0 +1,273 @@
+import { TranslatedString } from "@gnu-taler/taler-util";
+import { ComponentChildren, Fragment, VNode, h } from "preact";
+import { useField } from "./useField.js";
+
+interface IconAddon {
+  type: "icon";
+  icon: VNode;
+}
+interface ButtonAddon {
+  type: "button";
+  onClick: () => void;
+  children: ComponentChildren;
+}
+interface TextAddon {
+  type: "text";
+  text: TranslatedString;
+}
+type Addon = IconAddon | ButtonAddon | TextAddon;
+
+interface StringConverter<T> {
+  toStringUI: (v?: T) => string;
+  fromStringUI: (v?: string) => T;
+}
+
+export interface UIFormProps<T> {
+  name: string;
+  label: TranslatedString;
+  placeholder?: TranslatedString;
+  tooltip?: TranslatedString;
+  help?: TranslatedString;
+  before?: Addon;
+  after?: Addon;
+  required?: boolean;
+  converter?: StringConverter<T>;
+}
+
+export type FormErrors<T> = {
+  [P in keyof T]?: string | FormErrors<T[P]>;
+};
+
+//@ts-ignore
+const TooltipIcon = (
+  <svg
+    class="w-5 h-5"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fill-rule="evenodd"
+      d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
+      clip-rule="evenodd"
+    />
+  </svg>
+);
+
+export function LabelWithTooltipMaybeRequired({
+  label,
+  required,
+  tooltip,
+}: {
+  label: TranslatedString;
+  required?: boolean;
+  tooltip?: TranslatedString;
+}): VNode {
+  const Label = (
+    <Fragment>
+      <div class="flex justify-between">
+        <label
+          htmlFor="email"
+          class="block text-sm font-medium leading-6 text-gray-900"
+        >
+          {label}
+        </label>
+      </div>
+    </Fragment>
+  );
+  const WithTooltip = tooltip ? (
+    <div class="relative flex flex-grow items-stretch focus-within:z-10">
+      {Label}
+      <span class="relative flex items-center group pl-2">
+        {TooltipIcon}
+        <div class="absolute bottom-0 flex flex-col items-center hidden mb-6 group-hover:flex">
+          <span class="relative z-10 p-2 text-xs leading-none text-white whitespace-no-wrap bg-black shadow-lg">
+            {tooltip}
+          </span>
+          <div class="w-3 h-3 -mt-2 rotate-45 bg-black"></div>
+        </div>
+      </span>
+    </div>
+  ) : (
+    Label
+  );
+  if (required) {
+    return (
+      <div class="flex justify-between">
+        {WithTooltip}
+        <span class="text-sm leading-6 text-red-600">*</span>
+      </div>
+    );
+  }
+  return WithTooltip;
+}
+
+function InputWrapper<T>({
+  children,
+  label,
+  tooltip,
+  before,
+  after,
+  help,
+  error,
+  required,
+}: { error?: string; children: ComponentChildren } & UIFormProps<T>): VNode {
+  return (
+    <div class="sm:col-span-6">
+      <LabelWithTooltipMaybeRequired
+        label={label}
+        required={required}
+        tooltip={tooltip}
+      />
+      <div class="relative mt-2 flex rounded-md shadow-sm">
+        {before &&
+          (before.type === "text" ? (
+            <span class="inline-flex items-center rounded-l-md border border-r-0 border-gray-300 px-3 text-gray-500 sm:text-sm">
+              {before.text}
+            </span>
+          ) : before.type === "icon" ? (
+            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+              {before.icon}
+            </div>
+          ) : before.type === "button" ? (
+            <button
+              type="button"
+              onClick={before.onClick}
+              class="relative -ml-px inline-flex items-center gap-x-1.5 rounded-l-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            >
+              {before.children}
+            </button>
+          ) : undefined)}
+
+        {children}
+
+        {after &&
+          (after.type === "text" ? (
+            <span class="inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-gray-500 sm:text-sm">
+              {after.text}
+            </span>
+          ) : after.type === "icon" ? (
+            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
+              {after.icon}
+            </div>
+          ) : after.type === "button" ? (
+            <button
+              type="button"
+              onClick={after.onClick}
+              class="relative -ml-px inline-flex items-center gap-x-1.5 rounded-r-md px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
+            >
+              {after.children}
+            </button>
+          ) : undefined)}
+      </div>
+      {error && (
+        <p class="mt-2 text-sm text-red-600" id="email-error">
+          {error}
+        </p>
+      )}
+      {help && (
+        <p class="mt-2 text-sm text-gray-500" id="email-description">
+          {help}
+        </p>
+      )}
+    </div>
+  );
+}
+
+function defaultToString(v: unknown) {
+  return v === undefined ? "" : typeof v !== "object" ? String(v) : "";
+}
+function defaultFromString(v: string) {
+  return v;
+}
+
+export function InputLine<T>(props: { type: string } & UIFormProps<T>): VNode {
+  const { name, placeholder, before, after, converter, type } = props;
+  const { value, onChange, state, isDirty } = useField(name);
+
+  if (state.hidden) return <Fragment />;
+
+  let clazz =
+    "block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200";
+  if (before) {
+    switch (before.type) {
+      case "icon": {
+        clazz += " pl-10";
+        break;
+      }
+      case "button": {
+        clazz += " rounded-none rounded-r-md ";
+        break;
+      }
+      case "text": {
+        clazz += " min-w-0 flex-1 rounded-r-md rounded-none ";
+        break;
+      }
+    }
+  }
+  if (after) {
+    switch (after.type) {
+      case "icon": {
+        clazz += " pr-10";
+        break;
+      }
+      case "button": {
+        clazz += " rounded-none rounded-l-md";
+        break;
+      }
+      case "text": {
+        clazz += " min-w-0 flex-1 rounded-l-md rounded-none ";
+        break;
+      }
+    }
+  }
+  const showError = isDirty && state.error;
+  if (showError) {
+    clazz +=
+      " text-red-900 ring-red-300  placeholder:text-red-300 focus:ring-red-500";
+  } else {
+    clazz +=
+      " text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-indigo-600";
+  }
+  const fromString: (s: string) => any =
+    converter?.fromStringUI ?? defaultFromString;
+  const toString: (s: any) => string = converter?.toStringUI ?? defaultToString;
+
+  if (type === "text-area") {
+    return (
+      <InputWrapper<T> {...props} error={showError ? state.error : undefined}>
+        <textarea
+          rows={4}
+          name={String(name)}
+          onChange={(e) => {
+            onChange(fromString(e.currentTarget.value));
+          }}
+          placeholder={placeholder ? placeholder : undefined}
+          value={toString(value)}
+          disabled={state.disabled}
+          aria-invalid={showError}
+          // aria-describedby="email-error"
+          class={clazz}
+        />
+      </InputWrapper>
+    );
+  }
+
+  return (
+    <InputWrapper<T> {...props} error={showError ? state.error : undefined}>
+      <input
+        name={String(name)}
+        type={type}
+        onChange={(e) => {
+          onChange(fromString(e.currentTarget.value));
+        }}
+        placeholder={placeholder ? placeholder : undefined}
+        value={toString(value)}
+        disabled={state.disabled}
+        aria-invalid={showError}
+        // aria-describedby="email-error"
+        class={clazz}
+      />
+    </InputWrapper>
+  );
+}
diff --git a/packages/exchange-backoffice-ui/src/forms/InputSelectMultiple.tsx b/packages/exchange-backoffice-ui/src/forms/InputSelectMultiple.tsx
new file mode 100644
index 000000000..375f8da93
--- /dev/null
+++ b/packages/exchange-backoffice-ui/src/forms/InputSelectMultiple.tsx
@@ -0,0 +1,144 @@
+import { Fragment, VNode, h } from "preact";
+import { Choice } from "./InputChoice.js";
+import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
+import { useField } from "./useField.js";
+import { useState } from "preact/hooks";
+
+export function InputSelectMultiple(
+  props: {
+    choices: Choice[];
+  } & UIFormProps<Array<string>>,
+): VNode {
+  const { name, label, choices, placeholder, tooltip, required } = props;
+  const { value, onChange } = useField<{ [s: string]: Array<string> }>(name);
+
+  const [filter, setFilter] = useState<string | undefined>(undefined);
+  const regex = new RegExp(`.*${filter}.*`, "i");
+  const choiceMap = choices.reduce((prev, curr) => {
+    return { ...prev, [curr.value]: curr.label };
+  }, {} as Record<string, string>);
+
+  const list = value ?? [];
+  const filteredChoices =
+    filter === undefined
+      ? undefined
+      : choices.filter((v) => {
+          return regex.test(v.label);
+        });
+  return (
+    <div class="sm:col-span-4">
+      <LabelWithTooltipMaybeRequired
+        label={label}
+        required={required}
+        tooltip={tooltip}
+      />
+      {list.map((v, idx) => {
+        return (
+          <span class="inline-flex items-center gap-x-0.5 rounded-md bg-gray-100 p-1 mr-2 text-xs font-medium text-gray-600">
+            {choiceMap[v]}
+            <button
+              type="button"
+              onClick={() => {
+                const newValue = [...list];
+                newValue.splice(idx, 1);
+                onChange(newValue);
+                setFilter(undefined);
+              }}
+              class="group relative h-5 w-5 rounded-sm hover:bg-gray-500/20"
+            >
+              <span class="sr-only">Remove</span>
+              <svg
+                viewBox="0 0 14 14"
+                class="h-5 w-5 stroke-gray-700/50 group-hover:stroke-gray-700/75"
+              >
+                <path d="M4 4l6 6m0-6l-6 6" />
+              </svg>
+              <span class="absolute -inset-1"></span>
+            </button>
+          </span>
+        );
+      })}
+
+      <div class="relative mt-2">
+        <input
+          id="combobox"
+          type="text"
+          value={filter ?? ""}
+          onChange={(e) => {
+            setFilter(e.currentTarget.value);
+          }}
+          placeholder={placeholder}
+          class="w-full rounded-md border-0 bg-white py-1.5 pl-3 pr-12 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+          role="combobox"
+          aria-controls="options"
+          aria-expanded="false"
+        />
+        <button
+          type="button"
+          onClick={() => {
+            setFilter(filter === undefined ? "" : undefined);
+          }}
+          class="absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none"
+        >
+          <svg
+            class="h-5 w-5 text-gray-400"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 3a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02L10 4.852 7.3 7.76a.75.75 0 01-1.1-1.02l3.25-3.5A.75.75 0 0110 3zm-3.76 9.2a.75.75 0 011.06.04l2.7 2.908 2.7-2.908a.75.75 0 111.1 1.02l-3.25 3.5a.75.75 0 01-1.1 0l-3.25-3.5a.75.75 0 01.04-1.06z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+
+        {filteredChoices !== undefined && (
+          <ul
+            class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+            id="options"
+            role="listbox"
+          >
+            {filteredChoices.map((v, idx) => {
+              let clazz =
+                "relative flex border p-4 focus:outline-none disabled:text-grey";
+              return (
+                <li
+                  class="relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-900 hover:text-white hover:bg-indigo-600"
+                  id="option-0"
+                  role="option"
+                  onClick={() => {
+                    const newValue = [...list];
+                    newValue.splice(0, 0, v.value);
+                    onChange(newValue);
+                    setFilter(undefined);
+                  }}
+
+                  // tabindex="-1"
+                >
+                  {/* <!-- Selected: "font-semibold" --> */}
+                  <span class="block truncate">{v.label}</span>
+
+                  {/* <!--
+          Checkmark, only display for selected option.
+
+          Active: "text-white", Not Active: "text-indigo-600"
+        --> */}
+                </li>
+              );
+            })}
+
+            {/* <!--
+        Combobox option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
+
+        Active: "text-white bg-indigo-600", Not Active: "text-gray-900"
+      --> */}
+
+            {/* <!-- More items... --> */}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/packages/exchange-backoffice-ui/src/forms/InputText.tsx b/packages/exchange-backoffice-ui/src/forms/InputText.tsx
new file mode 100644
index 000000000..107d87860
--- /dev/null
+++ b/packages/exchange-backoffice-ui/src/forms/InputText.tsx
@@ -0,0 +1,6 @@
+import { VNode, h } from "preact";
+import { InputLine, UIFormProps } from "./InputLine.js";
+
+export function InputText(props: UIFormProps<string>): VNode {
+  return <InputLine type="text" {...props} />;
+}
diff --git a/packages/exchange-backoffice-ui/src/forms/InputTextArea.tsx b/packages/exchange-backoffice-ui/src/forms/InputTextArea.tsx
new file mode 100644
index 000000000..b819a5549
--- /dev/null
+++ b/packages/exchange-backoffice-ui/src/forms/InputTextArea.tsx
@@ -0,0 +1,6 @@
+import { VNode, h } from "preact";
+import { InputLine, UIFormProps } from "./InputLine.js";
+
+export function InputTextArea(props: UIFormProps<string>): VNode {
+  return <InputLine type="text-area" {...props} />;
+}
diff --git a/packages/exchange-backoffice-ui/src/forms/forms.ts b/packages/exchange-backoffice-ui/src/forms/forms.ts
new file mode 100644
index 000000000..1e59e0cf2
--- /dev/null
+++ b/packages/exchange-backoffice-ui/src/forms/forms.ts
@@ -0,0 +1,87 @@
+import { TranslatedString } from "@gnu-taler/taler-util";
+import { InputText } from "./InputText.js";
+import { InputDate } from "./InputDate.js";
+import { InputInteger } from "./InputInteger.js";
+import { h as create, Fragment, VNode } from "preact";
+import { InputChoiceStacked } from "./InputChoice.js";
+import { InputArray } from "./InputArray.js";
+import { InputSelectMultiple } from "./InputSelectMultiple.js";
+import { InputTextArea } from "./InputTextArea.js";
+
+export type DoubleColumnForm = DoubleColumnFormSection[];
+
+type DoubleColumnFormSection = {
+  title: TranslatedString;
+  description?: TranslatedString;
+  fields: UIFormField[];
+};
+
+/**
+ * Constrain the type with the ui props
+ */
+type FieldType = {
+  separator: {};
+  array: Parameters<typeof InputArray>[0];
+  selectMultiple: Parameters<typeof InputSelectMultiple>[0];
+  text: Parameters<typeof InputText>[0];
+  textArea: Parameters<typeof InputTextArea>[0];
+  choiceStacked: Parameters<typeof InputChoiceStacked>[0];
+  date: Parameters<typeof InputDate>[0];
+  integer: Parameters<typeof InputInteger>[0];
+};
+
+/**
+ * List all the form fields so typescript can type-check the form instance
+ */
+export type UIFormField =
+  | { type: "separator"; props: FieldType["separator"] }
+  | { type: "array"; props: FieldType["array"] }
+  | { type: "selectMultiple"; props: FieldType["selectMultiple"] }
+  | { type: "text"; props: FieldType["text"] }
+  | { type: "textArea"; props: FieldType["textArea"] }
+  | { type: "choiceStacked"; props: FieldType["choiceStacked"] }
+  | { type: "integer"; props: FieldType["integer"] }
+  | { type: "date"; props: FieldType["date"] };
+
+type FieldComponentFunction<key extends keyof FieldType> = (
+  props: FieldType[key],
+) => VNode;
+
+type UIFormFieldMap = {
+  [key in keyof FieldType]: FieldComponentFunction<key>;
+};
+
+function Separator(): VNode {
+  return create("div", {});
+}
+
+/**
+ * Maps input type with component implementation
+ */
+const UIFormConfiguration: UIFormFieldMap = {
+  separator: Separator,
+  array: InputArray,
+  text: InputText,
+  textArea: InputTextArea,
+  date: InputDate,
+  choiceStacked: InputChoiceStacked,
+  integer: InputInteger,
+  selectMultiple: InputSelectMultiple,
+};
+
+export function RenderAllFieldsByUiConfig({
+  fields,
+}: {
+  fields: UIFormField[];
+}): VNode {
+  return create(
+    Fragment,
+    {},
+    fields.map((field) => {
+      const Component = UIFormConfiguration[
+        field.type
+      ] as FieldComponentFunction<any>;
+      return Component(field.props);
+    }),
+  );
+}
diff --git a/packages/exchange-backoffice-ui/src/forms/useField.ts b/packages/exchange-backoffice-ui/src/forms/useField.ts
new file mode 100644
index 000000000..6f7b84112
--- /dev/null
+++ b/packages/exchange-backoffice-ui/src/forms/useField.ts
@@ -0,0 +1,72 @@
+import { TargetedEvent, useContext, useState } from "preact/compat";
+import { FormContext, InputFieldState } from "./FormProvider.js";
+
+export interface InputFieldHandler<Type> {
+  value: Type;
+  onChange: (s: Type) => void;
+  state: InputFieldState;
+  isDirty: boolean;
+}
+
+export function useField<T>(name: keyof T): InputFieldHandler<T[keyof T]> {
+  const {
+    initialValue,
+    value: formValue,
+    computeFormState,
+    onUpdate,
+  } = useContext(FormContext);
+  type P = typeof name;
+  type V = T[P];
+  const [isDirty, setDirty] = useState(false);
+  const formState = computeFormState ? computeFormState(formValue) : {};
+
+  const fieldValue = readField(formValue, String(name)) as V;
+  const fieldState = readField<Partial<InputFieldState>>(
+    formState,
+    String(name),
+  );
+
+  //default state
+  const state: InputFieldState = {
+    disabled: fieldState?.disabled ?? false,
+    readonly: fieldState?.readonly ?? false,
+    hidden: fieldState?.hidden ?? false,
+    error: fieldState?.error,
+  };
+
+  function onChange(value: V): void {
+    setDirty(true);
+    return onUpdate((prev: any) => {
+      return setValueDeeper(prev, String(name).split("."), value);
+    });
+  }
+
+  return {
+    value: fieldValue,
+    onChange,
+    isDirty,
+    state,
+  };
+}
+
+/**
+ * read the field of an object an support accessing it using '.'
+ *
+ * @param object
+ * @param name
+ * @returns
+ */
+function readField<T>(object: any, name: string): T | undefined {
+  return name
+    .split(".")
+    .reduce((prev, current) => prev && prev[current], object);
+}
+
+function setValueDeeper(object: any, names: string[], value: any): any {
+  if (names.length === 0) return value;
+  const [head, ...rest] = names;
+  if (object === undefined) {
+    return { [head]: setValueDeeper({}, rest, value) };
+  }
+  return { ...object, [head]: setValueDeeper(object[head] ?? {}, rest, value) };
+}
-- 
cgit v1.2.3