testing aml form as json

18 files changed, 212 insertions, 133 deletions

diff --git a/packages/web-util/src/forms/Calendar.tsx b/packages/web-util/src/forms/Calendar.tsx
index a0df639f3..b08129f56 100644
--- a/packages/web-util/src/forms/Calendar.tsx
+++ b/packages/web-util/src/forms/Calendar.tsx
@@ -1,20 +1,40 @@
-import { AbsoluteTime } from "@gnu-taler/taler-util"
-import { add as dateAdd, sub as dateSub, eachDayOfInterval, endOfMonth, endOfWeek, format, getMonth, getYear, isSameDay, isSameMonth, startOfDay, startOfMonth, startOfWeek } from "date-fns"
-import { VNode, h } from "preact"
-import { useState } from "preact/hooks"
-import { useTranslationContext } from "../index.browser.js"
+import { AbsoluteTime } from "@gnu-taler/taler-util";
+import {
+  add as dateAdd,
+  sub as dateSub,
+  eachDayOfInterval,
+  endOfMonth,
+  endOfWeek,
+  format,
+  getMonth,
+  getYear,
+  isSameDay,
+  isSameMonth,
+  startOfDay,
+  startOfMonth,
+  startOfWeek,
+} from "date-fns";
+import { VNode, h } from "preact";
+import { useState } from "preact/hooks";
+import { useTranslationContext } from "../index.browser.js";
 
-export function Calendar({ value, onChange }: { value: AbsoluteTime | undefined, onChange: (v: AbsoluteTime) => void }): VNode {
-  const today = startOfDay(new Date())
-  const selected = !value ? today : new Date(AbsoluteTime.toStampMs(value))
-  const [showingDate, setShowingDate] = useState(selected)
-  const month = getMonth(showingDate)
-  const year = getYear(showingDate)
+export function Calendar({
+  value,
+  onChange,
+}: {
+  value: AbsoluteTime | undefined;
+  onChange: (v: AbsoluteTime) => void;
+}): VNode {
+  const today = startOfDay(new Date());
+  const selected = !value ? today : new Date(AbsoluteTime.toStampMs(value));
+  const [showingDate, setShowingDate] = useState(selected);
+  const month = getMonth(showingDate);
+  const year = getYear(showingDate);
 
   const start = startOfWeek(startOfMonth(showingDate));
   const end = endOfWeek(endOfMonth(showingDate));
   const daysInMonth = eachDayOfInterval({ start, end });
-  const { i18n } = useTranslationContext()
+  const { i18n } = useTranslationContext();
   const monthNames = [
     i18n.str`January`,
     i18n.str`February`,
@@ -28,92 +48,139 @@ export function Calendar({ value, onChange }: { value: AbsoluteTime | undefined,
     i18n.str`October`,
     i18n.str`November`,
     i18n.str`December`,
-  ]
-  return <div class="text-center p-2">
-    <div class="flex items-center text-gray-900">
-      <button type="button" class="flex px-4 flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 ring-2 round-sm"
-        onClick={() => {
-          setShowingDate(dateSub(showingDate, { years: 1 }))
-        }}>
-        <span class="sr-only">
-          {i18n.str`Previous year`}
-        </span>
-        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
-        </svg>
-      </button>
-      <div class="flex-auto text-sm font-semibold">{year}</div>
-      <button type="button" class="flex px-4 flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 ring-2 round-sm"
-        onClick={() => {
-          setShowingDate(dateAdd(showingDate, { years: 1 }))
-        }}>
-        <span class="sr-only">
-          {i18n.str`Next year`}
-        </span>
-        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
-        </svg>
-      </button>
-    </div>
-    <div class="mt-4 flex items-center text-gray-900">
-      <button type="button" class="flex px-4 flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 ring-2 round-sm"
-        onClick={() => {
-          setShowingDate(dateSub(showingDate, { months: 1 }))
-        }}>
-        <span class="sr-only">
-          {i18n.str`Previous month`}
-        </span>
-        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          <path fill-rule="evenodd" d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z" clip-rule="evenodd" />
-        </svg>
-      </button>
-      <div class="flex-auto text-sm font-semibold">{monthNames[month]}</div>
-      <button type="button" class="flex px-4 flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 ring-2 rounded-sm "
-        onClick={() => {
-          setShowingDate(dateAdd(showingDate, { months: 1 }))
-        }}>
-        <span class="sr-only">
-          {i18n.str`Next month`}
-        </span>
-        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-          <path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
-        </svg>
-      </button>
-    </div>
-    <div class="mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500">
-      <div>M</div>
-      <div>T</div>
-      <div>W</div>
-      <div>T</div>
-      <div>F</div>
-      <div>S</div>
-      <div>S</div>
-    </div>
-    <div class="isolate mt-2">
-      <div class="grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200">
-        {daysInMonth.map(current => (
-          <button type="button"
-            data-month={isSameMonth(current, showingDate)}
-            data-today={isSameDay(current, today)}
-            data-selected={isSameDay(current, selected)}
-            onClick={() => {
-              onChange(AbsoluteTime.fromStampMs(current.getTime()))
-            }}
-            class="text-gray-400 hover:bg-gray-700 focus:z-10 py-1.5 
+  ];
+  return (
+    <div class="text-center p-2">
+      <div class="flex items-center text-gray-900">
+        <button
+          type="button"
+          class="flex px-4 flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 ring-2 round-sm"
+          onClick={() => {
+            setShowingDate(dateSub(showingDate, { years: 1 }));
+          }}
+        >
+          <span class="sr-only">{i18n.str`Previous year`}</span>
+          <svg
+            class="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+        <div class="flex-auto text-sm font-semibold">{year}</div>
+        <button
+          type="button"
+          class="flex px-4 flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 ring-2 round-sm"
+          onClick={() => {
+            setShowingDate(dateAdd(showingDate, { years: 1 }));
+          }}
+        >
+          <span class="sr-only">{i18n.str`Next year`}</span>
+          <svg
+            class="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+      <div class="mt-4 flex items-center text-gray-900">
+        <button
+          type="button"
+          class="flex px-4 flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 ring-2 round-sm"
+          onClick={() => {
+            setShowingDate(dateSub(showingDate, { months: 1 }));
+          }}
+        >
+          <span class="sr-only">{i18n.str`Previous month`}</span>
+          <svg
+            class="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+        <div class="flex-auto text-sm font-semibold">{monthNames[month]}</div>
+        <button
+          type="button"
+          class="flex px-4 flex-none items-center justify-center p-1.5 text-gray-400 hover:text-gray-500 ring-2 rounded-sm "
+          onClick={() => {
+            setShowingDate(dateAdd(showingDate, { months: 1 }));
+          }}
+        >
+          <span class="sr-only">{i18n.str`Next month`}</span>
+          <svg
+            class="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </button>
+      </div>
+      <div class="mt-6 grid grid-cols-7 text-xs leading-6 text-gray-500">
+        <div>M</div>
+        <div>T</div>
+        <div>W</div>
+        <div>T</div>
+        <div>F</div>
+        <div>S</div>
+        <div>S</div>
+      </div>
+      <div class="isolate mt-2">
+        <div class="grid grid-cols-7 gap-px rounded-lg bg-gray-200 text-sm shadow ring-1 ring-gray-200">
+          {daysInMonth.map((current, idx) => (
+            <button
+              type="button"
+              key={idx}
+              data-month={isSameMonth(current, showingDate)}
+              data-today={isSameDay(current, today)}
+              data-selected={isSameDay(current, selected)}
+              onClick={() => {
+                onChange(AbsoluteTime.fromStampMs(current.getTime()));
+              }}
+              class="text-gray-400 hover:bg-gray-700 focus:z-10 py-1.5 
           data-[month=false]:bg-gray-100 data-[month=true]:bg-white 
             data-[today=true]:font-semibold  
           data-[month=true]:text-gray-900
           data-[today=true]:bg-red-300 data-[today=true]:hover:bg-red-200
           data-[month=true]:hover:bg-gray-200
-          data-[selected=true]:!bg-blue-400 data-[selected=true]:hover:!bg-blue-300 ">
-            <time dateTime={format(current, "yyyy-MM-dd")}
-              class="mx-auto flex h-7 w-7 py-4 px-5 sm:px-8 items-center justify-center rounded-full">
-              {format(current, "dd")}
-            </time>
-          </button>
-        ))}
+          data-[selected=true]:!bg-blue-400 data-[selected=true]:hover:!bg-blue-300 "
+            >
+              <time
+                dateTime={format(current, "yyyy-MM-dd")}
+                class="mx-auto flex h-7 w-7 py-4 px-5 sm:px-8 items-center justify-center rounded-full"
+              >
+                {format(current, "dd")}
+              </time>
+            </button>
+          ))}
+        </div>
+        {daysInMonth.length < 40 ? <div class="w-7 h-7 m-1.5" /> : undefined}
       </div>
-      {daysInMonth.length < 40 ? <div class="w-7 h-7 m-1.5" /> : undefined}
     </div>
-  </div>
+  );
 }
diff --git a/packages/web-util/src/forms/InputAbsoluteTime.stories.tsx b/packages/web-util/src/forms/InputAbsoluteTime.stories.tsx
index 6245cf27c..3887efe37 100644
--- a/packages/web-util/src/forms/InputAbsoluteTime.stories.tsx
+++ b/packages/web-util/src/forms/InputAbsoluteTime.stories.tsx
@@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = {
     title: "this is a simple form" as TranslatedString,
     fields: [{
       type: "absoluteTime",
-      props: {
+      properties: {
         label: "label of the field" as TranslatedString,
         name: "today",
         pattern: "dd/MM/yyyy HH:mm"
diff --git a/packages/web-util/src/forms/InputAbsoluteTime.tsx b/packages/web-util/src/forms/InputAbsoluteTime.tsx
index 772ab1813..f5fd4fc50 100644
--- a/packages/web-util/src/forms/InputAbsoluteTime.tsx
+++ b/packages/web-util/src/forms/InputAbsoluteTime.tsx
@@ -10,15 +10,15 @@ import { useField } from "./useField.js";
 import { noHandlerPropsAndNoContextForField } from "./InputArray.js";
 
 export function InputAbsoluteTime<T extends object, K extends keyof T>(
-  props: { pattern?: string } & UIFormProps<T, K>,
+  properties: { pattern?: string } & UIFormProps<T, K>,
 ): VNode {
-  const pattern = props.pattern ?? "dd/MM/yyyy";
+  const pattern = properties.pattern ?? "dd/MM/yyyy";
   const [open, setOpen] = useState(false);
 
   //FIXME: remove deprecated
-  const fieldCtx = useField<T, K>(props.name);
+  const fieldCtx = useField<T, K>(properties.name);
   const { value, onChange } =
-    props.handler ?? fieldCtx ?? noHandlerPropsAndNoContextForField(props.name);
+    properties.handler ?? fieldCtx ?? noHandlerPropsAndNoContextForField(properties.name);
   return (
     <Fragment>
       <InputLine<T, K>
@@ -66,7 +66,7 @@ export function InputAbsoluteTime<T extends object, K extends keyof T>(
                 : format(v.t_ms, pattern);
           },
         }}
-        {...props}
+        {...properties}
       />
       {open && (
         <Dialog onClose={() => setOpen(false)}>
diff --git a/packages/web-util/src/forms/InputAmount.stories.tsx b/packages/web-util/src/forms/InputAmount.stories.tsx
index c9f12a437..d5073ed86 100644
--- a/packages/web-util/src/forms/InputAmount.stories.tsx
+++ b/packages/web-util/src/forms/InputAmount.stories.tsx
@@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = {
     title: "this is a simple form" as TranslatedString,
     fields: [{
       type: "amount",
-      props: {
+      properties: {
         label: "label of the field" as TranslatedString,
         name: "amount",
       },
diff --git a/packages/web-util/src/forms/InputArray.stories.tsx b/packages/web-util/src/forms/InputArray.stories.tsx
index 8dbd3ff07..eb61b04e3 100644
--- a/packages/web-util/src/forms/InputArray.stories.tsx
+++ b/packages/web-util/src/forms/InputArray.stories.tsx
@@ -54,18 +54,18 @@ const form: FlexibleForm<TargetObject> = {
     title: "this is a simple form" as TranslatedString,
     fields: [{
       type: "array",
-      props: {
+      properties: {
         label: "People" as TranslatedString,
         name: "comment",
         fields: [{
           type: "text",
-          props: {
+          properties: {
             label: "the name" as TranslatedString,
             name: "name",
           }
         }, {
           type: "integer",
-          props: {
+          properties: {
             label: "the age" as TranslatedString,
             name: "age",
           }
diff --git a/packages/web-util/src/forms/InputChoiceHorizontal.stories.tsx b/packages/web-util/src/forms/InputChoiceHorizontal.stories.tsx
index b950d3d02..e1da89353 100644
--- a/packages/web-util/src/forms/InputChoiceHorizontal.stories.tsx
+++ b/packages/web-util/src/forms/InputChoiceHorizontal.stories.tsx
@@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = {
     title: "this is a simple form" as TranslatedString,
     fields: [{
       type: "choiceHorizontal",
-      props: {
+      properties: {
         label: "label of the field" as TranslatedString,
         name: "comment",
         choices: [{
diff --git a/packages/web-util/src/forms/InputChoiceStacked.stories.tsx b/packages/web-util/src/forms/InputChoiceStacked.stories.tsx
index ed5170d17..89f252e96 100644
--- a/packages/web-util/src/forms/InputChoiceStacked.stories.tsx
+++ b/packages/web-util/src/forms/InputChoiceStacked.stories.tsx
@@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = {
     title: "this is a simple form" as TranslatedString,
     fields: [{
       type: "choiceStacked",
-      props: {
+      properties: {
         label: "label of the field" as TranslatedString,
         name: "comment",
         choices: [{
diff --git a/packages/web-util/src/forms/InputFile.stories.tsx b/packages/web-util/src/forms/InputFile.stories.tsx
index ba06debf9..9d9ad0bd7 100644
--- a/packages/web-util/src/forms/InputFile.stories.tsx
+++ b/packages/web-util/src/forms/InputFile.stories.tsx
@@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = {
     title: "this is a simple form" as TranslatedString,
     fields: [{
       type: "file",
-      props: {
+      properties: {
         label: "label of the field" as TranslatedString,
         name: "comment",
         required: true,
diff --git a/packages/web-util/src/forms/InputInteger.stories.tsx b/packages/web-util/src/forms/InputInteger.stories.tsx
index bd1a467ab..04a6d1049 100644
--- a/packages/web-util/src/forms/InputInteger.stories.tsx
+++ b/packages/web-util/src/forms/InputInteger.stories.tsx
@@ -43,7 +43,7 @@ const form: FlexibleForm<TargetObject> = {
     title: "this is a simple form" as TranslatedString,
     fields: [{
       type: "integer",
-      props: {
+      properties: {
         label: "label of the field" as TranslatedString,
         name: "age",
         tooltip: "just numbers" as TranslatedString,
diff --git a/packages/web-util/src/forms/InputLine.stories.tsx b/packages/web-util/src/forms/InputLine.stories.tsx
index da41a221e..1c62a6164 100644
--- a/packages/web-util/src/forms/InputLine.stories.tsx
+++ b/packages/web-util/src/forms/InputLine.stories.tsx
@@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = {
     title: "this is a simple form" as TranslatedString,
     fields: [{
       type: "text",
-      props: {
+      properties: {
         label: "label of the field" as TranslatedString,
         name: "comment",
       },
diff --git a/packages/web-util/src/forms/InputSelectMultiple.stories.tsx b/packages/web-util/src/forms/InputSelectMultiple.stories.tsx
index 6ce5445c0..b1649fecf 100644
--- a/packages/web-util/src/forms/InputSelectMultiple.stories.tsx
+++ b/packages/web-util/src/forms/InputSelectMultiple.stories.tsx
@@ -50,7 +50,7 @@ const form: FlexibleForm<TargetObject> = {
     title: "this is a simple form" as TranslatedString,
     fields: [{
       type: "selectMultiple",
-      props: {
+      properties: {
         label: "allow diplicates" as TranslatedString,
         name: "pets",
         placeholder: "search..." as TranslatedString,
@@ -67,7 +67,7 @@ const form: FlexibleForm<TargetObject> = {
       },
     }, {
       type: "selectMultiple",
-      props: {
+      properties: {
         label: "unique values" as TranslatedString,
         name: "things",
         unique: true,
diff --git a/packages/web-util/src/forms/InputSelectMultiple.tsx b/packages/web-util/src/forms/InputSelectMultiple.tsx
index 972389cb3..12e88fcc1 100644
--- a/packages/web-util/src/forms/InputSelectMultiple.tsx
+++ b/packages/web-util/src/forms/InputSelectMultiple.tsx
@@ -1,10 +1,10 @@
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
 import { UIFormProps } from "./FormProvider.js";
+import { noHandlerPropsAndNoContextForField } from "./InputArray.js";
 import { ChoiceS } from "./InputChoiceStacked.js";
 import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
 import { useField } from "./useField.js";
-import { noHandlerPropsAndNoContextForField } from "./InputArray.js";
 
 export function InputSelectMultiple<T extends object, K extends keyof T>(
   props: {
diff --git a/packages/web-util/src/forms/InputSelectOne.stories.tsx b/packages/web-util/src/forms/InputSelectOne.stories.tsx
index 9e9029a77..f87aeda66 100644
--- a/packages/web-util/src/forms/InputSelectOne.stories.tsx
+++ b/packages/web-util/src/forms/InputSelectOne.stories.tsx
@@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = {
     title: "this is a simple form" as TranslatedString,
     fields: [{
       type: "selectOne",
-      props: {
+      properties: {
         label: "label of the field" as TranslatedString,
         name: "things",
         placeholder: "search..." as TranslatedString,
diff --git a/packages/web-util/src/forms/InputText.stories.tsx b/packages/web-util/src/forms/InputText.stories.tsx
index 04ab8a1c6..8eced7736 100644
--- a/packages/web-util/src/forms/InputText.stories.tsx
+++ b/packages/web-util/src/forms/InputText.stories.tsx
@@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = {
     title: "this is a simple form" as TranslatedString,
     fields: [{
       type: "text",
-      props: {
+      properties: {
         label: "label of the field" as TranslatedString,
         name: "comment",
       },
diff --git a/packages/web-util/src/forms/InputTextArea.stories.tsx b/packages/web-util/src/forms/InputTextArea.stories.tsx
index c8c3eb088..6713548a8 100644
--- a/packages/web-util/src/forms/InputTextArea.stories.tsx
+++ b/packages/web-util/src/forms/InputTextArea.stories.tsx
@@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = {
     title: "this is a simple form" as TranslatedString,
     fields: [{
       type: "text",
-      props: {
+      properties: {
         label: "label of the field" as TranslatedString,
         name: "comment",
       },
diff --git a/packages/web-util/src/forms/InputToggle.stories.tsx b/packages/web-util/src/forms/InputToggle.stories.tsx
index ca6857618..e10098718 100644
--- a/packages/web-util/src/forms/InputToggle.stories.tsx
+++ b/packages/web-util/src/forms/InputToggle.stories.tsx
@@ -48,7 +48,7 @@ const form: FlexibleForm<TargetObject> = {
     title: "this is a simple form" as TranslatedString,
     fields: [{
       type: "toggle",
-      props: {
+      properties: {
         label: "label of the field" as TranslatedString,
         name: "comment",
       },
diff --git a/packages/web-util/src/forms/InputToggle.tsx b/packages/web-util/src/forms/InputToggle.tsx
index c56efec3a..58386045c 100644
--- a/packages/web-util/src/forms/InputToggle.tsx
+++ b/packages/web-util/src/forms/InputToggle.tsx
@@ -1,8 +1,8 @@
 import { VNode, h } from "preact";
 import { UIFormProps } from "./FormProvider.js";
+import { noHandlerPropsAndNoContextForField } from "./InputArray.js";
 import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
 import { useField } from "./useField.js";
-import { noHandlerPropsAndNoContextForField } from "./InputArray.js";
 
 export function InputToggle<T extends object, K extends keyof T>(
   props: UIFormProps<T, K>,
diff --git a/packages/web-util/src/forms/forms.ts b/packages/web-util/src/forms/forms.ts
index d2ff9c37e..6bda2f674 100644
--- a/packages/web-util/src/forms/forms.ts
+++ b/packages/web-util/src/forms/forms.ts
@@ -38,20 +38,32 @@ type FieldType<T extends object = any, K extends keyof T = any> = {
  * List all the form fields so typescript can type-check the form instance
  */
 export type UIFormField =
-  | { type: "group"; props: FieldType["group"] }
-  | { type: "caption"; props: FieldType["caption"] }
-  | { type: "array"; props: FieldType["array"] }
-  | { type: "file"; props: FieldType["file"] }
-  | { type: "amount"; props: FieldType["amount"] }
-  | { type: "selectOne"; props: FieldType["selectOne"] }
-  | { type: "selectMultiple"; props: FieldType["selectMultiple"] }
-  | { type: "text"; props: FieldType["text"] }
-  | { type: "textArea"; props: FieldType["textArea"] }
-  | { type: "choiceStacked"; props: FieldType["choiceStacked"] }
-  | { type: "choiceHorizontal"; props: FieldType["choiceHorizontal"] }
-  | { type: "integer"; props: FieldType["integer"] }
-  | { type: "toggle"; props: FieldType["toggle"] }
-  | { type: "absoluteTime"; props: FieldType["absoluteTime"] };
+  | { type: "group"; properties: FieldType["group"] }
+  | { type: "caption"; properties: FieldType["caption"] }
+  | { type: "array"; properties: FieldType["array"] }
+  | { type: "file"; properties: FieldType["file"] }
+  | { type: "amount"; properties: FieldType["amount"] }
+  | { type: "selectOne"; properties: FieldType["selectOne"] }
+  | {
+      type: "selectMultiple";
+      properties: FieldType["selectMultiple"];
+    }
+  | { type: "text"; properties: FieldType["text"] }
+  | { type: "textArea"; properties: FieldType["textArea"] }
+  | {
+      type: "choiceStacked";
+      properties: FieldType["choiceStacked"];
+    }
+  | {
+      type: "choiceHorizontal";
+      properties: FieldType["choiceHorizontal"];
+    }
+  | { type: "integer"; properties: FieldType["integer"] }
+  | { type: "toggle"; properties: FieldType["toggle"] }
+  | {
+      type: "absoluteTime";
+      properties: FieldType["absoluteTime"];
+    };
 
 type FieldComponentFunction<key extends keyof FieldType> = (
   props: FieldType[key],
@@ -102,7 +114,7 @@ export function RenderAllFieldsByUiConfig({
       const Component = UIFormConfiguration[
         field.type
       ] as FieldComponentFunction<any>;
-      return Component(field.props);
+      return Component(field.properties);
     }),
   );
 }
@@ -115,8 +127,8 @@ export function RenderAllFieldsByUiConfig({
 
 /**
  * Helper function that created a typed object.
- * 
- * @returns 
+ *
+ * @returns
  */
 // export function createNewForm<T extends object>() {
 //   const res: FormSet<T> = {