fine tune dynamic forms

31 files changed, 780 insertions, 45 deletions

diff --git a/packages/aml-backoffice-ui/src/context/config.ts b/packages/aml-backoffice-ui/src/context/config.ts
index ba16482be..3f62258c6 100644
--- a/packages/aml-backoffice-ui/src/context/config.ts
+++ b/packages/aml-backoffice-ui/src/context/config.ts
@@ -29,7 +29,7 @@ export type Type = {
   url: URL,
   config: TalerExchangeApi.ExchangeVersionResponse,
   api: TalerExchangeHttpClient,
-} | undefined;
+};
 
 const Context = createContext<Type>(undefined as any);
 
diff --git a/packages/aml-backoffice-ui/src/forms/902_11e.ts b/packages/aml-backoffice-ui/src/forms/902_11e.ts
index 7ed3ea42b..b2943a1d4 100644
--- a/packages/aml-backoffice-ui/src/forms/902_11e.ts
+++ b/packages/aml-backoffice-ui/src/forms/902_11e.ts
@@ -1,8 +1,8 @@
 import { TranslatedString } from "@gnu-taler/taler-util";
 import { FormState } from "../handlers/FormProvider.js";
 import { BaseForm } from "../pages/AntiMoneyLaunderingForm.js";
-import { FlexibleForm } from "./index.js";
-import { Simplest, resolutionSection } from "./simplest.js";
+import { resolutionSection } from "./simplest.js";
+import { FlexibleForm } from "../handlers/forms.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Form902_11.Form> => ({
   design: [
diff --git a/packages/aml-backoffice-ui/src/forms/902_12e.ts b/packages/aml-backoffice-ui/src/forms/902_12e.ts
index 3cfe69f88..815d75c49 100644
--- a/packages/aml-backoffice-ui/src/forms/902_12e.ts
+++ b/packages/aml-backoffice-ui/src/forms/902_12e.ts
@@ -1,8 +1,8 @@
 import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util";
 import { FormState } from "../handlers/FormProvider.js";
 import { BaseForm } from "../pages/AntiMoneyLaunderingForm.js";
-import { FlexibleForm } from "./index.js";
 import { resolutionSection } from "./simplest.js";
+import { FlexibleForm } from "../handlers/forms.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Form902_12.Form> => ({
   design: [
diff --git a/packages/aml-backoffice-ui/src/forms/902_13e.ts b/packages/aml-backoffice-ui/src/forms/902_13e.ts
index 045246fc6..7f5887de2 100644
--- a/packages/aml-backoffice-ui/src/forms/902_13e.ts
+++ b/packages/aml-backoffice-ui/src/forms/902_13e.ts
@@ -1,8 +1,8 @@
 import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util";
 import { FormState } from "../handlers/FormProvider.js";
 import { BaseForm, } from "../pages/AntiMoneyLaunderingForm.js";
-import { FlexibleForm } from "./index.js";
 import { resolutionSection } from "./simplest.js";
+import { FlexibleForm } from "../handlers/forms.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Form902_13.Form> => ({
   design: [
diff --git a/packages/aml-backoffice-ui/src/forms/902_15e.ts b/packages/aml-backoffice-ui/src/forms/902_15e.ts
index 6689896ab..10a2533d4 100644
--- a/packages/aml-backoffice-ui/src/forms/902_15e.ts
+++ b/packages/aml-backoffice-ui/src/forms/902_15e.ts
@@ -1,7 +1,7 @@
 import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util";
 import { BaseForm } from "../pages/AntiMoneyLaunderingForm.js";
-import { FlexibleForm } from "./index.js";
 import { resolutionSection } from "./simplest.js";
+import { FlexibleForm } from "../handlers/forms.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Form902_15.Form> => ({
   design: [
diff --git a/packages/aml-backoffice-ui/src/forms/902_1e.ts b/packages/aml-backoffice-ui/src/forms/902_1e.ts
index 7fcabe829..e2faff63e 100644
--- a/packages/aml-backoffice-ui/src/forms/902_1e.ts
+++ b/packages/aml-backoffice-ui/src/forms/902_1e.ts
@@ -1,8 +1,9 @@
 import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util";
 import { FormState } from "../handlers/FormProvider.js";
 import { BaseForm } from "../pages/AntiMoneyLaunderingForm.js";
-import { FlexibleForm, languageList } from "./index.js";
+import { languageList } from "./index.js";
 import { resolutionSection } from "./simplest.js";
+import { FlexibleForm } from "../handlers/forms.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Form902_1.Form> => ({
   design: [
diff --git a/packages/aml-backoffice-ui/src/forms/902_4e.ts b/packages/aml-backoffice-ui/src/forms/902_4e.ts
index 6f82302f3..540e05bf6 100644
--- a/packages/aml-backoffice-ui/src/forms/902_4e.ts
+++ b/packages/aml-backoffice-ui/src/forms/902_4e.ts
@@ -1,10 +1,10 @@
 import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util";
 import { h as create } from "preact";
 import { FormState } from "../handlers/FormProvider.js";
+import { FlexibleForm } from "../handlers/forms.js";
 import { BaseForm } from "../pages/AntiMoneyLaunderingForm.js";
-import { FlexibleForm } from "./index.js";
-import { Simplest, resolutionSection } from "./simplest.js";
 import { ArrowRightIcon, ChevronRightIcon } from "../pages/Cases.js";
+import { resolutionSection } from "./simplest.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Form902_4.Form> => ({
   design: [
diff --git a/packages/aml-backoffice-ui/src/forms/902_5e.ts b/packages/aml-backoffice-ui/src/forms/902_5e.ts
index d695c94b4..fe545481f 100644
--- a/packages/aml-backoffice-ui/src/forms/902_5e.ts
+++ b/packages/aml-backoffice-ui/src/forms/902_5e.ts
@@ -1,8 +1,9 @@
 import { TranslatedString } from "@gnu-taler/taler-util";
 import { FormState } from "../handlers/FormProvider.js";
 import { BaseForm } from "../pages/AntiMoneyLaunderingForm.js";
-import { FlexibleForm, currencyList } from "./index.js";
+import { currencyList } from "./index.js";
 import { resolutionSection } from "./simplest.js";
+import { FlexibleForm } from "../handlers/forms.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Form902_5.Form> => ({
   design: [
diff --git a/packages/aml-backoffice-ui/src/forms/902_9e.ts b/packages/aml-backoffice-ui/src/forms/902_9e.ts
index e52531bcb..d1604dab2 100644
--- a/packages/aml-backoffice-ui/src/forms/902_9e.ts
+++ b/packages/aml-backoffice-ui/src/forms/902_9e.ts
@@ -1,8 +1,8 @@
 import { AbsoluteTime, TranslatedString } from "@gnu-taler/taler-util";
 import { FormState } from "../handlers/FormProvider.js";
 import { BaseForm } from "../pages/AntiMoneyLaunderingForm.js";
-import { FlexibleForm } from "./index.js";
 import { resolutionSection } from "./simplest.js";
+import { FlexibleForm } from "../handlers/forms.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Form902_9.Form> => ({
   design: [
diff --git a/packages/aml-backoffice-ui/src/forms/index.ts b/packages/aml-backoffice-ui/src/forms/index.ts
index 74407ed82..32de4fbd3 100644
--- a/packages/aml-backoffice-ui/src/forms/index.ts
+++ b/packages/aml-backoffice-ui/src/forms/index.ts
@@ -1,11 +1,5 @@
 import { TranslatedString } from "@gnu-taler/taler-util";
-import { FormState } from "../handlers/FormProvider.js";
-import { DoubleColumnForm } from "../handlers/forms.js";
 
-export interface FlexibleForm<T extends object> {
-  design: DoubleColumnForm;
-  behavior?: (form: Partial<T>) => FormState<T>;
-}
 
 export const languageList = [
   {
diff --git a/packages/aml-backoffice-ui/src/forms/simplest.ts b/packages/aml-backoffice-ui/src/forms/simplest.ts
index 778d20b75..5a8d370c9 100644
--- a/packages/aml-backoffice-ui/src/forms/simplest.ts
+++ b/packages/aml-backoffice-ui/src/forms/simplest.ts
@@ -5,11 +5,10 @@ import {
   TranslatedString,
 } from "@gnu-taler/taler-util";
 import { FormState } from "../handlers/FormProvider.js";
-import { DoubleColumnFormSection } from "../handlers/forms.js";
+import { DoubleColumnFormSection, FlexibleForm } from "../handlers/forms.js";
 import { BaseForm } from "../pages/AntiMoneyLaunderingForm.js";
 
 import { AmlExchangeBackend } from "../types.js";
-import { FlexibleForm } from "./index.js";
 import { amlStateConverter } from "../pages/ShowConsolidated.js";
 
 export const v1 = (current: BaseForm): FlexibleForm<Simplest.Form> => ({
@@ -33,7 +32,8 @@ export const v1 = (current: BaseForm): FlexibleForm<Simplest.Form> => ({
   ): FormState<Simplest.Form> {
     return {
       comment: {
-        help: ((v.comment?.length ?? 0) > 100 ? "keep it short" : "") as TranslatedString
+        help: ((v.comment?.length ?? 0) > 100 ? "keep it short" : "") as TranslatedString,
+
       },
       threshold: {
         disabled: v.state === AmlExchangeBackend.AmlState.frozen,
diff --git a/packages/aml-backoffice-ui/src/handlers/InputAmount.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputAmount.stories.tsx
new file mode 100644
index 000000000..872726247
--- /dev/null
+++ b/packages/aml-backoffice-ui/src/handlers/InputAmount.stories.tsx
@@ -0,0 +1,59 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { AmountJson, Amounts, TranslatedString } from "@gnu-taler/taler-util";
+import * as tests from "@gnu-taler/web-util/testing";
+import {
+  NiceForm as TestedComponent,
+} from "./NiceForm.js";
+import { FlexibleForm } from "./forms.js";
+
+export default {
+  title: "Input Amount",
+};
+
+export namespace Simplest {
+  export interface Form {
+    comment: string;
+  }
+}
+
+type TargetObject = {
+  amount: AmountJson;
+}
+const initial: TargetObject = {
+  amount: Amounts.parseOrThrow("USD:10")
+}
+
+const form: FlexibleForm<TargetObject> = {
+  design: [{
+    title: "this is a simple form" as TranslatedString,
+    fields: [{
+      type: "amount",
+      props: {
+        label: "label of the field" as TranslatedString,
+        name: "amount",
+      },
+    }]
+  }]
+}
+
+export const SimpleComment = tests.createExample(TestedComponent, { initial, form });
diff --git a/packages/aml-backoffice-ui/src/handlers/InputArray.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputArray.stories.tsx
new file mode 100644
index 000000000..ee25d355b
--- /dev/null
+++ b/packages/aml-backoffice-ui/src/handlers/InputArray.stories.tsx
@@ -0,0 +1,79 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { TranslatedString } from "@gnu-taler/taler-util";
+import * as tests from "@gnu-taler/web-util/testing";
+import {
+  NiceForm as TestedComponent,
+} from "./NiceForm.js";
+import { FlexibleForm } from "./forms.js";
+
+export default {
+  title: "Input Array",
+};
+
+export namespace Simplest {
+  export interface Form {
+    comment: string;
+  }
+}
+
+type TargetObject = {
+  people: {
+    name: string;
+    age: number;
+  }[];
+}
+const initial: TargetObject = {
+  people: [{
+    name: "me",
+    age: 17,
+  }]
+}
+
+const form: FlexibleForm<TargetObject> = {
+  design: [{
+    title: "this is a simple form" as TranslatedString,
+    fields: [{
+      type: "array",
+      props: {
+        label: "People" as TranslatedString,
+        name: "comment",
+        fields: [{
+          type: "text",
+          props: {
+            label: "the name" as TranslatedString,
+            name: "name",
+          }
+        }, {
+          type: "integer",
+          props: {
+            label: "the age" as TranslatedString,
+            name: "age",
+          }
+        }],
+        labelField: "name"
+      },
+    }]
+  }]
+}
+
+export const SimpleComment = tests.createExample(TestedComponent, { initial, form });
diff --git a/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx
new file mode 100644
index 000000000..e59bbe396
--- /dev/null
+++ b/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx
@@ -0,0 +1,59 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { TranslatedString } from "@gnu-taler/taler-util";
+import * as tests from "@gnu-taler/web-util/testing";
+import {
+  NiceForm as TestedComponent,
+} from "./NiceForm.js";
+import { FlexibleForm } from "./forms.js";
+
+export default {
+  title: "Input Choice Horizontal",
+};
+
+export namespace Simplest {
+  export interface Form {
+    comment: string;
+  }
+}
+
+type TargetObject = {
+  comment: string;
+}
+const initial: TargetObject = {
+  comment: "some initial comment"
+}
+
+const form: FlexibleForm<TargetObject> = {
+  design: [{
+    title: "this is a simple form" as TranslatedString,
+    fields: [{
+      type: "text",
+      props: {
+        label: "label of the field" as TranslatedString,
+        name: "comment",
+      },
+    }]
+  }]
+}
+
+export const SimpleComment = tests.createExample(TestedComponent, { initial, form });
diff --git a/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.stories.tsx
new file mode 100644
index 000000000..bd21687bb
--- /dev/null
+++ b/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.stories.tsx
@@ -0,0 +1,59 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { TranslatedString } from "@gnu-taler/taler-util";
+import * as tests from "@gnu-taler/web-util/testing";
+import {
+  NiceForm as TestedComponent,
+} from "./NiceForm.js";
+import { FlexibleForm } from "./forms.js";
+
+export default {
+  title: "Input Choice Stacked",
+};
+
+export namespace Simplest {
+  export interface Form {
+    comment: string;
+  }
+}
+
+type TargetObject = {
+  comment: string;
+}
+const initial: TargetObject = {
+  comment: "some initial comment"
+}
+
+const form: FlexibleForm<TargetObject> = {
+  design: [{
+    title: "this is a simple form" as TranslatedString,
+    fields: [{
+      type: "text",
+      props: {
+        label: "label of the field" as TranslatedString,
+        name: "comment",
+      },
+    }]
+  }]
+}
+
+export const SimpleComment = tests.createExample(TestedComponent, { initial, form });
diff --git a/packages/aml-backoffice-ui/src/handlers/InputDate.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputDate.stories.tsx
new file mode 100644
index 000000000..187c78bfb
--- /dev/null
+++ b/packages/aml-backoffice-ui/src/handlers/InputDate.stories.tsx
@@ -0,0 +1,59 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { TranslatedString } from "@gnu-taler/taler-util";
+import * as tests from "@gnu-taler/web-util/testing";
+import {
+  NiceForm as TestedComponent,
+} from "./NiceForm.js";
+import { FlexibleForm } from "./forms.js";
+
+export default {
+  title: "Input Date",
+};
+
+export namespace Simplest {
+  export interface Form {
+    comment: string;
+  }
+}
+
+type TargetObject = {
+  comment: string;
+}
+const initial: TargetObject = {
+  comment: "some initial comment"
+}
+
+const form: FlexibleForm<TargetObject> = {
+  design: [{
+    title: "this is a simple form" as TranslatedString,
+    fields: [{
+      type: "text",
+      props: {
+        label: "label of the field" as TranslatedString,
+        name: "comment",
+      },
+    }]
+  }]
+}
+
+export const SimpleComment = tests.createExample(TestedComponent, { initial, form });
diff --git a/packages/aml-backoffice-ui/src/handlers/InputFile.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputFile.stories.tsx
new file mode 100644
index 000000000..856b15bc7
--- /dev/null
+++ b/packages/aml-backoffice-ui/src/handlers/InputFile.stories.tsx
@@ -0,0 +1,59 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { TranslatedString } from "@gnu-taler/taler-util";
+import * as tests from "@gnu-taler/web-util/testing";
+import {
+  NiceForm as TestedComponent,
+} from "./NiceForm.js";
+import { FlexibleForm } from "./forms.js";
+
+export default {
+  title: "Input File",
+};
+
+export namespace Simplest {
+  export interface Form {
+    comment: string;
+  }
+}
+
+type TargetObject = {
+  comment: string;
+}
+const initial: TargetObject = {
+  comment: "some initial comment"
+}
+
+const form: FlexibleForm<TargetObject> = {
+  design: [{
+    title: "this is a simple form" as TranslatedString,
+    fields: [{
+      type: "text",
+      props: {
+        label: "label of the field" as TranslatedString,
+        name: "comment",
+      },
+    }]
+  }]
+}
+
+export const SimpleComment = tests.createExample(TestedComponent, { initial, form });
diff --git a/packages/aml-backoffice-ui/src/handlers/InputInteger.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputInteger.stories.tsx
new file mode 100644
index 000000000..a08513075
--- /dev/null
+++ b/packages/aml-backoffice-ui/src/handlers/InputInteger.stories.tsx
@@ -0,0 +1,59 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { TranslatedString } from "@gnu-taler/taler-util";
+import * as tests from "@gnu-taler/web-util/testing";
+import {
+  NiceForm as TestedComponent,
+} from "./NiceForm.js";
+import { FlexibleForm } from "./forms.js";
+
+export default {
+  title: "Input Integer",
+};
+
+export namespace Simplest {
+  export interface Form {
+    comment: string;
+  }
+}
+
+type TargetObject = {
+  comment: string;
+}
+const initial: TargetObject = {
+  comment: "some initial comment"
+}
+
+const form: FlexibleForm<TargetObject> = {
+  design: [{
+    title: "this is a simple form" as TranslatedString,
+    fields: [{
+      type: "text",
+      props: {
+        label: "label of the field" as TranslatedString,
+        name: "comment",
+      },
+    }]
+  }]
+}
+
+export const SimpleComment = tests.createExample(TestedComponent, { initial, form });
diff --git a/packages/aml-backoffice-ui/src/handlers/InputLine.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputLine.stories.tsx
new file mode 100644
index 000000000..0d55bddf7
--- /dev/null
+++ b/packages/aml-backoffice-ui/src/handlers/InputLine.stories.tsx
@@ -0,0 +1,59 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { TranslatedString } from "@gnu-taler/taler-util";
+import * as tests from "@gnu-taler/web-util/testing";
+import {
+  NiceForm as TestedComponent,
+} from "./NiceForm.js";
+import { FlexibleForm } from "./forms.js";
+
+export default {
+  title: "Input Line",
+};
+
+export namespace Simplest {
+  export interface Form {
+    comment: string;
+  }
+}
+
+type TargetObject = {
+  comment: string;
+}
+const initial: TargetObject = {
+  comment: "some initial comment"
+}
+
+const form: FlexibleForm<TargetObject> = {
+  design: [{
+    title: "this is a simple form" as TranslatedString,
+    fields: [{
+      type: "text",
+      props: {
+        label: "label of the field" as TranslatedString,
+        name: "comment",
+      },
+    }]
+  }]
+}
+
+export const SimpleComment = tests.createExample(TestedComponent, { initial, form });
diff --git a/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.stories.tsx
new file mode 100644
index 000000000..eddb7fe94
--- /dev/null
+++ b/packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.stories.tsx
@@ -0,0 +1,59 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { TranslatedString } from "@gnu-taler/taler-util";
+import * as tests from "@gnu-taler/web-util/testing";
+import {
+  NiceForm as TestedComponent,
+} from "./NiceForm.js";
+import { FlexibleForm } from "./forms.js";
+
+export default {
+  title: "Input Select Multiple",
+};
+
+export namespace Simplest {
+  export interface Form {
+    comment: string;
+  }
+}
+
+type TargetObject = {
+  comment: string;
+}
+const initial: TargetObject = {
+  comment: "some initial comment"
+}
+
+const form: FlexibleForm<TargetObject> = {
+  design: [{
+    title: "this is a simple form" as TranslatedString,
+    fields: [{
+      type: "text",
+      props: {
+        label: "label of the field" as TranslatedString,
+        name: "comment",
+      },
+    }]
+  }]
+}
+
+export const SimpleComment = tests.createExample(TestedComponent, { initial, form });
diff --git a/packages/aml-backoffice-ui/src/handlers/InputSelectOne.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputSelectOne.stories.tsx
new file mode 100644
index 000000000..7321577c3
--- /dev/null
+++ b/packages/aml-backoffice-ui/src/handlers/InputSelectOne.stories.tsx
@@ -0,0 +1,59 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { TranslatedString } from "@gnu-taler/taler-util";
+import * as tests from "@gnu-taler/web-util/testing";
+import {
+  NiceForm as TestedComponent,
+} from "./NiceForm.js";
+import { FlexibleForm } from "./forms.js";
+
+export default {
+  title: "Input Select One",
+};
+
+export namespace Simplest {
+  export interface Form {
+    comment: string;
+  }
+}
+
+type TargetObject = {
+  comment: string;
+}
+const initial: TargetObject = {
+  comment: "some initial comment"
+}
+
+const form: FlexibleForm<TargetObject> = {
+  design: [{
+    title: "this is a simple form" as TranslatedString,
+    fields: [{
+      type: "text",
+      props: {
+        label: "label of the field" as TranslatedString,
+        name: "comment",
+      },
+    }]
+  }]
+}
+
+export const SimpleComment = tests.createExample(TestedComponent, { initial, form });
diff --git a/packages/aml-backoffice-ui/src/handlers/InputText.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputText.stories.tsx
new file mode 100644
index 000000000..9ce733d4a
--- /dev/null
+++ b/packages/aml-backoffice-ui/src/handlers/InputText.stories.tsx
@@ -0,0 +1,59 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { TranslatedString } from "@gnu-taler/taler-util";
+import * as tests from "@gnu-taler/web-util/testing";
+import {
+  NiceForm as TestedComponent,
+} from "./NiceForm.js";
+import { FlexibleForm } from "./forms.js";
+
+export default {
+  title: "Input Text",
+};
+
+export namespace Simplest {
+  export interface Form {
+    comment: string;
+  }
+}
+
+type TargetObject = {
+  comment: string;
+}
+const initial: TargetObject = {
+  comment: "some initial comment"
+}
+
+const form: FlexibleForm<TargetObject> = {
+  design: [{
+    title: "this is a simple form" as TranslatedString,
+    fields: [{
+      type: "text",
+      props: {
+        label: "label of the field" as TranslatedString,
+        name: "comment",
+      },
+    }]
+  }]
+}
+
+export const SimpleComment = tests.createExample(TestedComponent, { initial, form });
diff --git a/packages/aml-backoffice-ui/src/handlers/InputTextArea.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputTextArea.stories.tsx
new file mode 100644
index 000000000..df35b25c4
--- /dev/null
+++ b/packages/aml-backoffice-ui/src/handlers/InputTextArea.stories.tsx
@@ -0,0 +1,59 @@
+/*
+ This file is part of GNU Taler
+ (C) 2022 Taler Systems S.A.
+
+ GNU Taler is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ GNU Taler is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ *
+ * @author Sebastian Javier Marchano (sebasjm)
+ */
+
+import { TranslatedString } from "@gnu-taler/taler-util";
+import * as tests from "@gnu-taler/web-util/testing";
+import {
+  NiceForm as TestedComponent,
+} from "./NiceForm.js";
+import { FlexibleForm } from "./forms.js";
+
+export default {
+  title: "Input Text Area",
+};
+
+export namespace Simplest {
+  export interface Form {
+    comment: string;
+  }
+}
+
+type TargetObject = {
+  comment: string;
+}
+const initial: TargetObject = {
+  comment: "some initial comment"
+}
+
+const form: FlexibleForm<TargetObject> = {
+  design: [{
+    title: "this is a simple form" as TranslatedString,
+    fields: [{
+      type: "text",
+      props: {
+        label: "label of the field" as TranslatedString,
+        name: "comment",
+      },
+    }]
+  }]
+}
+
+export const SimpleComment = tests.createExample(TestedComponent, { initial, form });
diff --git a/packages/aml-backoffice-ui/src/NiceForm.tsx b/packages/aml-backoffice-ui/src/handlers/NiceForm.tsx
index 53f29e580..d01b80b02 100644
--- a/packages/aml-backoffice-ui/src/NiceForm.tsx
+++ b/packages/aml-backoffice-ui/src/handlers/NiceForm.tsx
@@ -1,7 +1,6 @@
 import { ComponentChildren, Fragment, h } from "preact";
-import { FlexibleForm } from "./forms/index.js";
-import { FormProvider } from "./handlers/FormProvider.js";
-import { RenderAllFieldsByUiConfig } from "./handlers/forms.js";
+import { FormProvider } from "./FormProvider.js";
+import { FlexibleForm, RenderAllFieldsByUiConfig } from "./forms.js";
 
 export function NiceForm<T extends object>({
   initial,
diff --git a/packages/aml-backoffice-ui/src/handlers/forms.ts b/packages/aml-backoffice-ui/src/handlers/forms.ts
index 2c90a69ed..b1fcc2937 100644
--- a/packages/aml-backoffice-ui/src/handlers/forms.ts
+++ b/packages/aml-backoffice-ui/src/handlers/forms.ts
@@ -11,7 +11,7 @@ import { InputFile } from "./InputFile.js";
 import { Caption } from "./Caption.js";
 import { Group } from "./Group.js";
 import { InputSelectOne } from "./InputSelectOne.js";
-import { FormProvider } from "./FormProvider.js";
+import { FormProvider, FormState } from "./FormProvider.js";
 import { InputLine } from "./InputLine.js";
 import { InputAmount } from "./InputAmount.js";
 import { InputChoiceHorizontal } from "./InputChoiceHorizontal.js";
@@ -23,6 +23,10 @@ export type DoubleColumnFormSection = {
   description?: TranslatedString;
   fields: UIFormField[];
 };
+export interface FlexibleForm<T extends object> {
+  design: DoubleColumnForm;
+  behavior?: (form: Partial<T>) => FormState<T>;
+}
 
 /**
  * Constrain the type with the ui props
@@ -116,10 +120,7 @@ export function RenderAllFieldsByUiConfig({
 type FormSet<T extends object> = {
   Provider: typeof FormProvider<T>;
   InputLine: <K extends keyof T>() => typeof InputLine<T, K>;
-  InputChoiceHorizontal: <K extends keyof T>() => typeof InputChoiceHorizontal<
-    T,
-    K
-  >;
+  InputChoiceHorizontal: <K extends keyof T>() => typeof InputChoiceHorizontal<T, K>;
 };
 export function createNewForm<T extends object>() {
   const res: FormSet<T> = {
diff --git a/packages/aml-backoffice-ui/src/handlers/index.stories.ts b/packages/aml-backoffice-ui/src/handlers/index.stories.ts
new file mode 100644
index 000000000..eedcf7472
--- /dev/null
+++ b/packages/aml-backoffice-ui/src/handlers/index.stories.ts
@@ -0,0 +1,12 @@
+export * as a1 from "./InputAmount.stories.js";
+export * as a2 from "./InputArray.stories.js";
+export * as a3 from "./InputChoiceHorizontal.stories.js";
+export * as a4 from "./InputChoiceStacked.stories.js";
+export * as a5 from "./InputDate.stories.js";
+export * as a6 from "./InputFile.stories.js";
+export * as a7 from "./InputInteger.stories.js";
+export * as a8 from "./InputLine.stories.js";
+export * as a9 from "./InputSelectMultiple.stories.js";
+export * as a10 from "./InputSelectOne.stories.js";
+export * as a11 from "./InputText.stories.js";
+export * as a12 from "./InputTextArea.stories.js";
diff --git a/packages/aml-backoffice-ui/src/pages/AntiMoneyLaunderingForm.tsx b/packages/aml-backoffice-ui/src/pages/AntiMoneyLaunderingForm.tsx
index 381f00ebb..020727fca 100644
--- a/packages/aml-backoffice-ui/src/pages/AntiMoneyLaunderingForm.tsx
+++ b/packages/aml-backoffice-ui/src/pages/AntiMoneyLaunderingForm.tsx
@@ -1,7 +1,7 @@
 import { AbsoluteTime, AmountJson, Amounts, Codec, OperationResult, buildCodecForObject, codecForNumber, codecForString, codecOptional } from "@gnu-taler/taler-util";
 import { useTranslationContext } from "@gnu-taler/web-util/browser";
 import { h } from "preact";
-import { NiceForm } from "../NiceForm.js";
+import { NiceForm } from "../handlers/NiceForm.js";
 import { v1 as form_902_11e_v1 } from "../forms/902_11e.js";
 import { v1 as form_902_12e_v1 } from "../forms/902_12e.js";
 import { v1 as form_902_13e_v1 } from "../forms/902_13e.js";
@@ -14,7 +14,7 @@ import { v1 as simplest } from "../forms/simplest.js";
 import { Pages } from "../pages.js";
 import { AmlExchangeBackend } from "../types.js";
 import { useExchangeApiContext } from "../context/config.js";
-import { FlexibleForm } from "../forms/index.js";
+import { FlexibleForm } from "../handlers/forms.js";
 
 export function AntiMoneyLaunderingForm({ account, formId, onSubmit }: { account: string, formId: string, onSubmit: (justification: Justification, state: AmlExchangeBackend.AmlState, threshold: AmountJson) => Promise<void>; }) {
   const { i18n } = useTranslationContext()
diff --git a/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx b/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx
index 9d6126ce3..40ae282dd 100644
--- a/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx
+++ b/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx
@@ -10,7 +10,7 @@ import { ErrorLoading, Loading, useTranslationContext } from "@gnu-taler/web-uti
 import { format } from "date-fns";
 import { Fragment, VNode, h } from "preact";
 import { useState } from "preact/hooks";
-import { NiceForm } from "../NiceForm.js";
+import { NiceForm } from "../handlers/NiceForm.js";
 import { useCaseDetails } from "../hooks/useCaseDetails.js";
 import { Pages } from "../pages.js";
 import { AmlExchangeBackend } from "../types.js";
diff --git a/packages/aml-backoffice-ui/src/pages/Cases.tsx b/packages/aml-backoffice-ui/src/pages/Cases.tsx
index 32e162e5b..96d1d634f 100644
--- a/packages/aml-backoffice-ui/src/pages/Cases.tsx
+++ b/packages/aml-backoffice-ui/src/pages/Cases.tsx
@@ -23,7 +23,7 @@ export function CasesUI({ records, filter, onChangeFilter, onFirstPage, onNext }
             Cases
           </i18n.Translate>
         </h1>
-        <p class="mt-2 text-sm text-gray-700">
+        <p class="mt-2 text-sm text-gray-700 w-80">
           <i18n.Translate>
             A list of all the account with the status
           </i18n.Translate>
@@ -71,7 +71,7 @@ export function CasesUI({ records, filter, onChangeFilter, onFirstPage, onNext }
                 <tr>
                   <th
                     scope="col"
-                    class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                    class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 w-80"
                   >
                     <i18n.Translate>
                       Account Id
@@ -79,7 +79,7 @@ export function CasesUI({ records, filter, onChangeFilter, onFirstPage, onNext }
                   </th>
                   <th
                     scope="col"
-                    class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                    class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900 w-40"
                   >
                     <i18n.Translate>
                       Status
@@ -87,7 +87,7 @@ export function CasesUI({ records, filter, onChangeFilter, onFirstPage, onNext }
                   </th>
                   <th
                     scope="col"
-                    class="sm:hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
+                    class="sm:hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 w-40"
                   >
                     <i18n.Translate>
                       Threshold
diff --git a/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx b/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx
index bd25ce958..ce37fcf14 100644
--- a/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx
+++ b/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx
@@ -1,12 +1,11 @@
+import { AbsoluteTime, AmountJson, TranslatedString } from "@gnu-taler/taler-util";
+import { format } from "date-fns";
 import { Fragment, VNode, h } from "preact";
-import { useState } from "preact/hooks";
-import { NiceForm } from "../NiceForm.js";
-import { FlexibleForm } from "../forms/index.js";
+import { NiceForm } from "../handlers/NiceForm.js";
+import { FlexibleForm } from "../handlers/forms.js";
 import { UIFormField } from "../handlers/forms.js";
-import { AmlEvent } from "./CaseDetails.js";
 import { AmlExchangeBackend } from "../types.js";
-import { AbsoluteTime, AmountJson, TranslatedString } from "@gnu-taler/taler-util";
-import { format } from "date-fns";
+import { AmlEvent } from "./CaseDetails.js";
 
 export function ShowConsolidated({
   history,
@@ -92,8 +91,7 @@ export function ShowConsolidated({
   return (
     <Fragment>
       <h1 class="text-base font-semibold leading-7 text-black">
-        Consolidated information
-        {until.t_ms === "never"
+        Consolidated information {until.t_ms === "never"
           ? ""
           : `after ${format(until.t_ms, "dd MMMM yyyy")}`}
       </h1>
@@ -101,6 +99,7 @@ export function ShowConsolidated({
         key={`${String(Date.now())}`}
         form={form}
         initial={cons}
+        readOnly
         onUpdate={() => { }}
       />
     </Fragment>
diff --git a/packages/aml-backoffice-ui/src/stories.tsx b/packages/aml-backoffice-ui/src/stories.tsx
index 7685195e5..1352acc37 100644
--- a/packages/aml-backoffice-ui/src/stories.tsx
+++ b/packages/aml-backoffice-ui/src/stories.tsx
@@ -21,7 +21,7 @@
 import { strings } from "./i18n/strings.js";
 
 import * as pages from "./pages/index.stories.js";
-// import * as components from "./components/index.examples.js";
+import * as forms from "./handlers/index.stories.js";
 
 import { renderStories } from "@gnu-taler/web-util/browser";
 
@@ -31,7 +31,7 @@ import { ExchangeApiContextTesting } from "./context/config.js";
 
 function main(): void {
   renderStories(
-    { pages },
+    { pages, forms },
     {
       strings,
       getWrapperForGroup