sort for documentation

1 files changed, 35 insertions, 12 deletions

diff --git a/packages/web-util/src/forms/DefaultForm.tsx b/packages/web-util/src/forms/DefaultForm.tsx
index ffd2812da..1155401f5 100644
--- a/packages/web-util/src/forms/DefaultForm.tsx
+++ b/packages/web-util/src/forms/DefaultForm.tsx
@@ -1,7 +1,37 @@
-import { ComponentChildren, Fragment, h } from "preact";
-import { FormProvider } from "./FormProvider.js";
-import { FlexibleForm, RenderAllFieldsByUiConfig } from "./forms.js";
+import { Fragment, h } from "preact";
+import { FormProvider, FormProviderProps, FormState } from "./FormProvider.js";
+import { RenderAllFieldsByUiConfig, UIFormField } from "./forms.js";
+import { TranslatedString } from "@gnu-taler/taler-util";
 
+/**
+ * Flexible form uses a DoubleColumForm for design
+ * and may have a dynamic properties defined by 
+ * behavior function.
+ */
+export interface FlexibleForm<T extends object> {
+  design: DoubleColumnForm;
+  behavior?: (form: Partial<T>) => FormState<T>;
+}
+
+/**
+ * Double column form
+ * 
+ * Form with sections, every sections have a title and may
+ * have a description.
+ * Every sections contain a set of fields.
+ */
+export type DoubleColumnForm = Array<DoubleColumnFormSection | undefined>;
+
+export type DoubleColumnFormSection = {
+  title: TranslatedString;
+  description?: TranslatedString;
+  fields: UIFormField[];
+};
+
+/**
+ * Form Provider implementation that use FlexibleForm
+ * to defined behavior and fields.
+ */
 export function DefaultForm<T extends object>({
   initial,
   onUpdate,
@@ -9,17 +39,10 @@ export function DefaultForm<T extends object>({
   onSubmit,
   children,
   readOnly,
-}: {
-  children?: ComponentChildren;
-  initial: Partial<T>;
-  onSubmit?: (v: Partial<T>) => void;
-  form: FlexibleForm<T>;
-  readOnly?: boolean;
-  onUpdate?: (d: Partial<T>) => void;
-}) {
+}: Omit<FormProviderProps<T>, "computeFormState"> & { form: FlexibleForm<T> }) {
   return (
     <FormProvider
-      initialValue={initial}
+      initial={initial}
       onUpdate={onUpdate}
       onSubmit={onSubmit}
       readOnly={readOnly}