From 0c9f61c6f478bea4dbb97e5fec24e78e2ee55607 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 29 Aug 2024 00:50:05 -0300 Subject: fix difference between kyc form and aml form, mostly prettier --- .../aml-backoffice-ui/src/ExchangeAmlFrame.tsx | 13 +- .../aml-backoffice-ui/src/pages/CaseDetails.tsx | 579 +++++++++++---------- .../src/pages/ShowConsolidated.tsx | 71 ++- packages/web-util/src/forms/DefaultForm.tsx | 41 +- .../src/forms/InputAbsoluteTime.stories.tsx | 39 +- .../web-util/src/forms/InputAmount.stories.tsx | 38 +- packages/web-util/src/forms/InputArray.stories.tsx | 61 ++- .../src/forms/InputChoiceHorizontal.stories.tsx | 61 ++- .../src/forms/InputChoiceStacked.stories.tsx | 61 ++- packages/web-util/src/forms/InputFile.stories.tsx | 47 +- .../web-util/src/forms/InputInteger.stories.tsx | 40 +- packages/web-util/src/forms/InputLine.stories.tsx | 37 +- packages/web-util/src/forms/InputLine.tsx | 18 +- .../src/forms/InputSelectMultiple.stories.tsx | 101 ++-- .../web-util/src/forms/InputSelectOne.stories.tsx | 63 ++- packages/web-util/src/forms/InputText.stories.tsx | 37 +- .../web-util/src/forms/InputTextArea.stories.tsx | 37 +- .../web-util/src/forms/InputToggle.stories.tsx | 37 +- 18 files changed, 792 insertions(+), 589 deletions(-) diff --git a/packages/aml-backoffice-ui/src/ExchangeAmlFrame.tsx b/packages/aml-backoffice-ui/src/ExchangeAmlFrame.tsx index 44cd0ce82..ca7f9b0b5 100644 --- a/packages/aml-backoffice-ui/src/ExchangeAmlFrame.tsx +++ b/packages/aml-backoffice-ui/src/ExchangeAmlFrame.tsx @@ -208,7 +208,12 @@ export function ExchangeAmlFrame({
{officer?.state !== "ready" ? undefined : }
-
{children}
+
+ {children} +
@@ -225,7 +230,11 @@ function Navigation(): VNode { const { i18n } = useTranslationContext(); const pageList = [ { route: privatePages.profile, Icon: PeopleIcon, label: i18n.str`Profile` }, - { route: privatePages.investigation, Icon: ToInvestigateIcon, label: i18n.str`Investigation` }, + { + route: privatePages.investigation, + Icon: ToInvestigateIcon, + label: i18n.str`Investigation`, + }, { route: privatePages.active, Icon: HomeIcon, label: i18n.str`Active` }, ]; const { path } = useNavigationContext(); diff --git a/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx b/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx index 8b54c1861..cf6922e1a 100644 --- a/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx +++ b/packages/aml-backoffice-ui/src/pages/CaseDetails.tsx @@ -227,26 +227,26 @@ export function CaseDetails({ account }: { account: string }) { const events = getEventsFromAmlHistory(accountDetails, i18n, allForms); - if (showForm !== undefined) { - return ( - -
- -
- - ); - } + // if (showForm !== undefined) { + // return ( + // + //
+ // + //
+ // + // ); + // } return (
@@ -390,8 +390,8 @@ export function CaseDetails({ account }: { account: string }) { onSelect={(e) => { switch (e.type) { case "aml-form": { - const { justification, metadata } = e; - setShowForm({ justification, metadata }); + // const { justification, metadata } = e; + // setShowForm({ justification, metadata }); break; } case "kyc-collection": @@ -423,87 +423,104 @@ export function CaseDetails({ account }: { account: string }) { function ShowDecisionInfo({ decision, - startOpen + startOpen, }: { decision: TalerExchangeApi.AmlDecision; - startOpen?: boolean, + startOpen?: boolean; }): VNode { const { i18n } = useTranslationContext(); const { config } = useExchangeApiContext(); - const [opened, setOpened] = useState(startOpen ?? false) - + const [opened, setOpened] = useState(startOpen ?? false); function Header() { - return + + + ); } if (!opened) { - return
setOpened(true)}> -
-
+ return ( +
setOpened(true)}> +
+
+ ); } - const balanceLimit = decision.limits.rules.find(r => r.operation_type === "BALANCE") + const balanceLimit = decision.limits.rules.find( + (r) => r.operation_type === "BALANCE", + ); return (
-
setOpened(false)}>
- {!decision.justification ? undefined : + {!decision.justification ? undefined : (
- +
-
- } + )} - {!balanceLimit ? undefined : + {!balanceLimit ? undefined : (
@@ -514,21 +531,30 @@ function ShowDecisionInfo({ value={Amounts.parseOrThrow(balanceLimit.threshold)} spec={config.currency_specification} /> -
- - } + )}
- - - - + + + @@ -536,16 +562,18 @@ function ShowDecisionInfo({ if (r.operation_type === "BALANCE") return; return ( - +
OperationTimeframeAmount + Operation + + Timeframe + + Amount +
{r.operation_type} + {r.operation_type} + {r.timeframe.d_us === "forever" ? "" : formatDuration( - intervalToDuration({ - start: 0, - end: r.timeframe.d_us / 1000, - }), - )} + intervalToDuration({ + start: 0, + end: r.timeframe.d_us / 1000, + }), + )}
-
); } @@ -781,13 +808,13 @@ function InputAmount( if ( sep_pos !== -1 && l - sep_pos - 1 > - config.currency_specification.num_fractional_input_digits + config.currency_specification.num_fractional_input_digits ) { e.currentTarget.value = e.currentTarget.value.substring( 0, sep_pos + - config.currency_specification.num_fractional_input_digits + - 1, + config.currency_specification.num_fractional_input_digits + + 1, ); } onChange(e.currentTarget.value); @@ -825,9 +852,9 @@ function parseJustification( listOfAllKnownForms: FormMetadata[], ): | OperationOk<{ - justification: Justification; - metadata: FormMetadata; - }> + justification: Justification; + metadata: FormMetadata; + }> | OperationFail { try { const justification = JSON.parse(s); @@ -875,212 +902,212 @@ function parseJustification( const THRESHOLD_2000_WEEK: (currency: string) => TalerExchangeApi.KycRule[] = ( currency, ) => [ - { - operation_type: "WITHDRAW", - threshold: `${currency}:2000`, - timeframe: { - d_us: 7 * 24 * 60 * 60 * 1000 * 1000, - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + { + operation_type: "WITHDRAW", + threshold: `${currency}:2000`, + timeframe: { + d_us: 7 * 24 * 60 * 60 * 1000 * 1000, }, - { - operation_type: "DEPOSIT", - threshold: `${currency}:2000`, - timeframe: { - d_us: 7 * 24 * 60 * 60 * 1000 * 1000, - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, + { + operation_type: "DEPOSIT", + threshold: `${currency}:2000`, + timeframe: { + d_us: 7 * 24 * 60 * 60 * 1000 * 1000, }, - { - operation_type: "AGGREGATE", - threshold: `${currency}:2000`, - timeframe: { - d_us: 7 * 24 * 60 * 60 * 1000 * 1000, - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, + { + operation_type: "AGGREGATE", + threshold: `${currency}:2000`, + timeframe: { + d_us: 7 * 24 * 60 * 60 * 1000 * 1000, }, - { - operation_type: "MERGE", - threshold: `${currency}:2000`, - timeframe: { - d_us: 7 * 24 * 60 * 60 * 1000 * 1000, - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, + { + operation_type: "MERGE", + threshold: `${currency}:2000`, + timeframe: { + d_us: 7 * 24 * 60 * 60 * 1000 * 1000, }, - { - operation_type: "BALANCE", - threshold: `${currency}:2000`, - timeframe: { - d_us: 7 * 24 * 60 * 60 * 1000 * 1000, - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, + { + operation_type: "BALANCE", + threshold: `${currency}:2000`, + timeframe: { + d_us: 7 * 24 * 60 * 60 * 1000 * 1000, }, - { - operation_type: "CLOSE", - threshold: `${currency}:2000`, - timeframe: { - d_us: 7 * 24 * 60 * 60 * 1000 * 1000, - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, + { + operation_type: "CLOSE", + threshold: `${currency}:2000`, + timeframe: { + d_us: 7 * 24 * 60 * 60 * 1000 * 1000, }, - ]; + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, +]; const THRESHOLD_100_HOUR: (currency: string) => TalerExchangeApi.KycRule[] = ( currency, ) => [ - { - operation_type: "WITHDRAW", - threshold: `${currency}:100`, - timeframe: { - d_us: 1 * 60 * 60 * 1000 * 1000, - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + { + operation_type: "WITHDRAW", + threshold: `${currency}:100`, + timeframe: { + d_us: 1 * 60 * 60 * 1000 * 1000, }, - { - operation_type: "DEPOSIT", - threshold: `${currency}:100`, - timeframe: { - d_us: 1 * 60 * 60 * 1000 * 1000, - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, + { + operation_type: "DEPOSIT", + threshold: `${currency}:100`, + timeframe: { + d_us: 1 * 60 * 60 * 1000 * 1000, }, - { - operation_type: "AGGREGATE", - threshold: `${currency}:100`, - timeframe: { - d_us: 1 * 60 * 60 * 1000 * 1000, - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, + { + operation_type: "AGGREGATE", + threshold: `${currency}:100`, + timeframe: { + d_us: 1 * 60 * 60 * 1000 * 1000, }, - { - operation_type: "MERGE", - threshold: `${currency}:100`, - timeframe: { - d_us: 1 * 60 * 60 * 1000 * 1000, - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, + { + operation_type: "MERGE", + threshold: `${currency}:100`, + timeframe: { + d_us: 1 * 60 * 60 * 1000 * 1000, }, - { - operation_type: "BALANCE", - threshold: `${currency}:100`, - timeframe: { - d_us: 1 * 60 * 60 * 1000 * 1000, - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, + { + operation_type: "BALANCE", + threshold: `${currency}:100`, + timeframe: { + d_us: 1 * 60 * 60 * 1000 * 1000, }, - { - operation_type: "CLOSE", - threshold: `${currency}:100`, - timeframe: { - d_us: 1 * 60 * 60 * 1000 * 1000, - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, + { + operation_type: "CLOSE", + threshold: `${currency}:100`, + timeframe: { + d_us: 1 * 60 * 60 * 1000 * 1000, }, - ]; + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, +]; const FREEZE_RULES: (currency: string) => TalerExchangeApi.KycRule[] = ( currency, ) => [ - { - operation_type: "WITHDRAW", - threshold: `${currency}:0`, - timeframe: { - d_us: "forever", - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + { + operation_type: "WITHDRAW", + threshold: `${currency}:0`, + timeframe: { + d_us: "forever", }, - { - operation_type: "DEPOSIT", - threshold: `${currency}:0`, - timeframe: { - d_us: "forever", - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, + { + operation_type: "DEPOSIT", + threshold: `${currency}:0`, + timeframe: { + d_us: "forever", }, - { - operation_type: "AGGREGATE", - threshold: `${currency}:0`, - timeframe: { - d_us: "forever", - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, + { + operation_type: "AGGREGATE", + threshold: `${currency}:0`, + timeframe: { + d_us: "forever", }, - { - operation_type: "MERGE", - threshold: `${currency}:0`, - timeframe: { - d_us: "forever", - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, + { + operation_type: "MERGE", + threshold: `${currency}:0`, + timeframe: { + d_us: "forever", }, - { - operation_type: "BALANCE", - threshold: `${currency}:0`, - timeframe: { - d_us: "forever", - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, + { + operation_type: "BALANCE", + threshold: `${currency}:0`, + timeframe: { + d_us: "forever", }, - { - operation_type: "CLOSE", - threshold: `${currency}:0`, - timeframe: { - d_us: "forever", - }, - measures: ["verboten"], - display_priority: 1, - exposed: true, - is_and_combinator: true, + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, + { + operation_type: "CLOSE", + threshold: `${currency}:0`, + timeframe: { + d_us: "forever", }, - ]; + measures: ["verboten"], + display_priority: 1, + exposed: true, + is_and_combinator: true, + }, +]; diff --git a/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx b/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx index e53c74aa5..21c14fee3 100644 --- a/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx +++ b/packages/aml-backoffice-ui/src/pages/ShowConsolidated.tsx @@ -22,13 +22,17 @@ import { import { DefaultForm, FormConfiguration, + RenderAllFieldsByUiConfig, UIFormElementConfig, UIHandlerId, + convertUiField, + getConverterById, useTranslationContext, } from "@gnu-taler/web-util/browser"; import { format } from "date-fns"; import { Fragment, VNode, h } from "preact"; import { AmlEvent } from "./CaseDetails.js"; +import { getShapeFromFields, useFormState } from "../hooks/form.js"; /** * the exchange doesn't hava a consistent api @@ -63,7 +67,7 @@ export function ShowConsolidated({ const fixed = fixProvidedInfo(cons.kyc); - const form: FormConfiguration = { + const formConfig: FormConfiguration = { type: "double-column", design: [ Object.entries(fixed).length > 0 @@ -73,8 +77,9 @@ export function ShowConsolidated({ const result: UIFormElementConfig = { type: "text", label: key as TranslatedString, - id: `kyc.${key}.value` as UIHandlerId, - name: `kyc.${key}.value`, + id: `${key}.value` as UIHandlerId, + name: `${key}.value`, + disabled: true, help: `At ${ field.since.t_ms === "never" ? "never" @@ -87,21 +92,55 @@ export function ShowConsolidated({ : undefined!, ], }; + const shape: Array = []; + + formConfig.design.forEach((section) => { + Array.prototype.push.apply(shape, getShapeFromFields(section.fields)); + }); + + const [form, state] = useFormState<{}>(shape, fixed, (result) => { + return { status: "ok", errors: undefined, result }; + }); + return ( - {/*

- Consolidated information{" "} - {until.t_ms === "never" - ? "" - : `after ${format(until.t_ms, "dd MMMM yyyy")}`} -

*/} - {}} - /> +
+ {formConfig.design.map((section, i) => { + if (!section) return ; + return ( +
+
+

+ {section.title} +

+ {section.description && ( +

+ {section.description} +

+ )} +
+
+
+
+ +
+
+
+
+ ); + })} +
); } diff --git a/packages/web-util/src/forms/DefaultForm.tsx b/packages/web-util/src/forms/DefaultForm.tsx index 338460170..239577e24 100644 --- a/packages/web-util/src/forms/DefaultForm.tsx +++ b/packages/web-util/src/forms/DefaultForm.tsx @@ -1,12 +1,21 @@ +import { TranslatedString } from "@gnu-taler/taler-util"; import { Fragment, VNode, h } from "preact"; +import { + UIFormElementConfig, + getConverterById, + useTranslationContext, +} from "../index.browser.js"; import { FormProvider, FormProviderProps, FormState } from "./FormProvider.js"; -import { RenderAllFieldsByUiConfig, UIFormField } from "./forms.js"; -import { TranslatedString } from "@gnu-taler/taler-util"; +import { + RenderAllFieldsByUiConfig, + UIFormField, + convertUiField, +} from "./forms.js"; // import { FlexibleForm } from "./ui-form.js"; /** * Flexible form uses a DoubleColumForm for design - * and may have a dynamic properties defined by + * and may have a dynamic properties defined by * behavior function. */ export interface FlexibleForm_Deprecated { @@ -16,17 +25,19 @@ export interface FlexibleForm_Deprecated { /** * 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_Deprecated = Array; +export type DoubleColumnForm_Deprecated = Array< + DoubleColumnFormSection_Deprecated | undefined +>; export type DoubleColumnFormSection_Deprecated = { title: TranslatedString; description?: TranslatedString; - fields: UIFormField[]; + fields: UIFormElementConfig[]; }; /** @@ -40,20 +51,25 @@ export function DefaultForm({ onSubmit, children, readOnly, -}: Omit, "computeFormState"> & { form: FlexibleForm_Deprecated }): VNode { +}: Omit, "computeFormState"> & { + form: FlexibleForm_Deprecated; +}): VNode { + const { i18n } = useTranslationContext(); return (
{form.design.map((section, i) => { if (!section) return ; return ( -
+

{section.title} @@ -69,7 +85,12 @@ export function DefaultForm({

diff --git a/packages/web-util/src/forms/InputAbsoluteTime.stories.tsx b/packages/web-util/src/forms/InputAbsoluteTime.stories.tsx index 6b792bfee..dcaf1cec9 100644 --- a/packages/web-util/src/forms/InputAbsoluteTime.stories.tsx +++ b/packages/web-util/src/forms/InputAbsoluteTime.stories.tsx @@ -25,6 +25,7 @@ import { FlexibleForm_Deprecated, DefaultForm as TestedComponent, } from "./DefaultForm.js"; +import { UIHandlerId } from "./ui-form.js"; export default { title: "Input Absolute Time", @@ -38,23 +39,29 @@ export namespace Simplest { type TargetObject = { today: AbsoluteTime; -} +}; const initial: TargetObject = { - today: AbsoluteTime.now() -} + today: AbsoluteTime.now(), +}; const form: FlexibleForm_Deprecated = { - design: [{ - title: "this is a simple form" as TranslatedString, - fields: [{ - type: "absoluteTimeText", - properties: { - label: "label of the field" as TranslatedString, - name: "today", - pattern: "dd/MM/yyyy HH:mm" - }, - }] - }] -} + design: [ + { + title: "this is a simple form" as TranslatedString, + fields: [ + { + type: "absoluteTimeText", + label: "label of the field" as TranslatedString, + id: ".today" as UIHandlerId, + name: "today", + pattern: "dd/MM/yyyy HH:mm", + }, + ], + }, + ], +}; -export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); +export const SimpleComment = tests.createExample(TestedComponent, { + initial, + form, +}); diff --git a/packages/web-util/src/forms/InputAmount.stories.tsx b/packages/web-util/src/forms/InputAmount.stories.tsx index f05887515..052b22813 100644 --- a/packages/web-util/src/forms/InputAmount.stories.tsx +++ b/packages/web-util/src/forms/InputAmount.stories.tsx @@ -25,6 +25,7 @@ import { FlexibleForm_Deprecated, DefaultForm as TestedComponent, } from "./DefaultForm.js"; +import { UIHandlerId } from "./ui-form.js"; export default { title: "Input Amount", @@ -38,22 +39,29 @@ export namespace Simplest { type TargetObject = { amount: AmountJson; -} +}; const initial: TargetObject = { - amount: Amounts.parseOrThrow("USD:10") -} + amount: Amounts.parseOrThrow("USD:10"), +}; const form: FlexibleForm_Deprecated = { - design: [{ - title: "this is a simple form" as TranslatedString, - fields: [{ - type: "amount", - properties: { - label: "label of the field" as TranslatedString, - name: "amount", - }, - }] - }] -} + design: [ + { + title: "this is a simple form" as TranslatedString, + fields: [ + { + type: "amount", + label: "label of the field" as TranslatedString, + id: ".amount" as UIHandlerId, + currency: "ARS", + name: "amount", + }, + ], + }, + ], +}; -export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); +export const SimpleComment = tests.createExample(TestedComponent, { + initial, + form, +}); diff --git a/packages/web-util/src/forms/InputArray.stories.tsx b/packages/web-util/src/forms/InputArray.stories.tsx index 143e73f02..31bad66a4 100644 --- a/packages/web-util/src/forms/InputArray.stories.tsx +++ b/packages/web-util/src/forms/InputArray.stories.tsx @@ -25,6 +25,7 @@ import { FlexibleForm_Deprecated, DefaultForm as TestedComponent, } from "./DefaultForm.js"; +import { UIHandlerId } from "./ui-form.js"; export default { title: "Input Array", @@ -41,39 +42,35 @@ type TargetObject = { name: string; age: number; }[]; -} +}; const initial: TargetObject = { - people: [{ - name: "me", - age: 17, - }] -} + people: [ + { + name: "me", + age: 17, + }, + ], +}; const form: FlexibleForm_Deprecated = { - design: [{ - title: "this is a simple form" as TranslatedString, - fields: [{ - type: "array", - properties: { - label: "People" as TranslatedString, - name: "comment", - fields: [{ - type: "text", - properties: { - label: "the name" as TranslatedString, - name: "name", - } - }, { - type: "integer", - properties: { - label: "the age" as TranslatedString, - name: "age", - } - }], - labelField: "name" - }, - }] - }] -} + design: [ + { + title: "this is a simple form" as TranslatedString, + fields: [ + { + type: "array", + label: "People" as TranslatedString, + name: "comment", + fields: [], + id: ".name" as UIHandlerId, + labelFieldId: "name" as UIHandlerId, + }, + ], + }, + ], +}; -export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); +export const SimpleComment = tests.createExample(TestedComponent, { + initial, + form, +}); diff --git a/packages/web-util/src/forms/InputChoiceHorizontal.stories.tsx b/packages/web-util/src/forms/InputChoiceHorizontal.stories.tsx index 786dfe5bc..4d3745fe5 100644 --- a/packages/web-util/src/forms/InputChoiceHorizontal.stories.tsx +++ b/packages/web-util/src/forms/InputChoiceHorizontal.stories.tsx @@ -25,6 +25,7 @@ import { FlexibleForm_Deprecated, DefaultForm as TestedComponent, } from "./DefaultForm.js"; +import { UIHandlerId } from "./ui-form.js"; export default { title: "Input Choice Horizontal", @@ -38,32 +39,42 @@ export namespace Simplest { type TargetObject = { comment: string; -} +}; const initial: TargetObject = { - comment: "0" -} + comment: "0", +}; const form: FlexibleForm_Deprecated = { - design: [{ - title: "this is a simple form" as TranslatedString, - fields: [{ - type: "choiceHorizontal", - properties: { - label: "label of the field" as TranslatedString, - name: "comment", - choices: [{ - label: "first choice" as TranslatedString, - value: "1" - }, { - label: "second choice" as TranslatedString, - value: "2" - }, { - label: "third choice" as TranslatedString, - value: "3" - },], - }, - }] - }] -} + design: [ + { + title: "this is a simple form" as TranslatedString, + fields: [ + { + type: "choiceHorizontal", + label: "label of the field" as TranslatedString, + id: ".commnet" as UIHandlerId, + name: "comment", + choices: [ + { + label: "first choice" as TranslatedString, + value: "1", + }, + { + label: "second choice" as TranslatedString, + value: "2", + }, + { + label: "third choice" as TranslatedString, + value: "3", + }, + ], + }, + ], + }, + ], +}; -export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); +export const SimpleComment = tests.createExample(TestedComponent, { + initial, + form, +}); diff --git a/packages/web-util/src/forms/InputChoiceStacked.stories.tsx b/packages/web-util/src/forms/InputChoiceStacked.stories.tsx index 9a634d05c..8d57b3689 100644 --- a/packages/web-util/src/forms/InputChoiceStacked.stories.tsx +++ b/packages/web-util/src/forms/InputChoiceStacked.stories.tsx @@ -25,6 +25,7 @@ import { FlexibleForm_Deprecated, DefaultForm as TestedComponent, } from "./DefaultForm.js"; +import { UIHandlerId } from "./ui-form.js"; export default { title: "Input Choice Stacked", @@ -38,32 +39,42 @@ export namespace Simplest { type TargetObject = { comment: string; -} +}; const initial: TargetObject = { - comment: "some initial comment" -} + comment: "some initial comment", +}; const form: FlexibleForm_Deprecated = { - design: [{ - title: "this is a simple form" as TranslatedString, - fields: [{ - type: "choiceStacked", - properties: { - label: "label of the field" as TranslatedString, - name: "comment", - choices: [{ - label: "first choice" as TranslatedString, - value: "1" - }, { - label: "second choice" as TranslatedString, - value: "2" - }, { - label: "third choice" as TranslatedString, - value: "3" - },], - }, - }] - }] -} + design: [ + { + title: "this is a simple form" as TranslatedString, + fields: [ + { + type: "choiceStacked", + label: "label of the field" as TranslatedString, + name: "comment", + id: ".comment" as UIHandlerId, + choices: [ + { + label: "first choice" as TranslatedString, + value: "1", + }, + { + label: "second choice" as TranslatedString, + value: "2", + }, + { + label: "third choice" as TranslatedString, + value: "3", + }, + ], + }, + ], + }, + ], +}; -export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); +export const SimpleComment = tests.createExample(TestedComponent, { + initial, + form, +}); diff --git a/packages/web-util/src/forms/InputFile.stories.tsx b/packages/web-util/src/forms/InputFile.stories.tsx index eff18d071..591b4e2af 100644 --- a/packages/web-util/src/forms/InputFile.stories.tsx +++ b/packages/web-util/src/forms/InputFile.stories.tsx @@ -25,6 +25,7 @@ import { FlexibleForm_Deprecated, DefaultForm as TestedComponent, } from "./DefaultForm.js"; +import { UIHandlerId } from "./ui-form.js"; export default { title: "Input File", @@ -38,27 +39,33 @@ export namespace Simplest { type TargetObject = { comment: string; -} +}; const initial: TargetObject = { - comment: "some initial comment" -} + comment: "some initial comment", +}; const form: FlexibleForm_Deprecated = { - design: [{ - title: "this is a simple form" as TranslatedString, - fields: [{ - type: "file", - properties: { - label: "label of the field" as TranslatedString, - name: "comment", - required: true, - maxBites: 2 * 1024 * 1024, - accept: ".png", - tooltip: "this is a very long tooltip that explain what the field does without being short" as TranslatedString, - help: "Max size of 2 mega bytes" as TranslatedString, - }, - }] - }] -} + design: [ + { + title: "this is a simple form" as TranslatedString, + fields: [ + { + type: "file", + label: "label of the field" as TranslatedString, + name: "comment", + required: true, + id: ".comment" as UIHandlerId, + accept: ".png", + tooltip: + "this is a very long tooltip that explain what the field does without being short" as TranslatedString, + help: "Max size of 2 mega bytes" as TranslatedString, + }, + ], + }, + ], +}; -export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); +export const SimpleComment = tests.createExample(TestedComponent, { + initial, + form, +}); diff --git a/packages/web-util/src/forms/InputInteger.stories.tsx b/packages/web-util/src/forms/InputInteger.stories.tsx index 378736a24..e6b78c242 100644 --- a/packages/web-util/src/forms/InputInteger.stories.tsx +++ b/packages/web-util/src/forms/InputInteger.stories.tsx @@ -25,31 +25,37 @@ import { FlexibleForm_Deprecated, DefaultForm as TestedComponent, } from "./DefaultForm.js"; +import { UIHandlerId } from "./ui-form.js"; export default { title: "Input Integer", }; - type TargetObject = { age: number; -} +}; const initial: TargetObject = { age: 5, -} +}; const form: FlexibleForm_Deprecated = { - design: [{ - title: "this is a simple form" as TranslatedString, - fields: [{ - type: "integer", - properties: { - label: "label of the field" as TranslatedString, - name: "age", - tooltip: "just numbers" as TranslatedString, - }, - }] - }] -} - -export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); + design: [ + { + title: "this is a simple form" as TranslatedString, + fields: [ + { + type: "integer", + label: "label of the field" as TranslatedString, + name: "age", + id: ".comment" as UIHandlerId, + tooltip: "just numbers" as TranslatedString, + }, + ], + }, + ], +}; + +export const SimpleComment = tests.createExample(TestedComponent, { + initial, + form, +}); diff --git a/packages/web-util/src/forms/InputLine.stories.tsx b/packages/web-util/src/forms/InputLine.stories.tsx index dea5c142a..16530ff2b 100644 --- a/packages/web-util/src/forms/InputLine.stories.tsx +++ b/packages/web-util/src/forms/InputLine.stories.tsx @@ -25,6 +25,7 @@ import { FlexibleForm_Deprecated, DefaultForm as TestedComponent, } from "./DefaultForm.js"; +import { UIHandlerId } from "./ui-form.js"; export default { title: "Input Line", @@ -38,22 +39,28 @@ export namespace Simplest { type TargetObject = { comment: string; -} +}; const initial: TargetObject = { - comment: "some initial comment" -} + comment: "some initial comment", +}; const form: FlexibleForm_Deprecated = { - design: [{ - title: "this is a simple form" as TranslatedString, - fields: [{ - type: "text", - properties: { - label: "label of the field" as TranslatedString, - name: "comment", - }, - }] - }] -} + design: [ + { + title: "this is a simple form" as TranslatedString, + fields: [ + { + type: "text", + label: "label of the field" as TranslatedString, + name: "comment", + id: ".comment" as UIHandlerId, + }, + ], + }, + ], +}; -export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); +export const SimpleComment = tests.createExample(TestedComponent, { + initial, + form, +}); diff --git a/packages/web-util/src/forms/InputLine.tsx b/packages/web-util/src/forms/InputLine.tsx index eb3238ef9..a89d2e24e 100644 --- a/packages/web-util/src/forms/InputLine.tsx +++ b/packages/web-util/src/forms/InputLine.tsx @@ -68,7 +68,13 @@ export function LabelWithTooltipMaybeRequired({ return WithTooltip; } -export function RenderAddon({ disabled, addon }: { disabled?: boolean, addon: Addon }): VNode { +export function RenderAddon({ + disabled, + addon, +}: { + disabled?: boolean; + addon: Addon; +}): VNode { switch (addon.type) { case "text": { return ( @@ -154,7 +160,7 @@ type InputType = "text" | "text-area" | "password" | "email" | "number"; export function InputLine( props: { type: InputType } & UIFormProps, ): VNode { - const { name, placeholder, before, after, converter, type } = props; + const { name, placeholder, before, after, converter, type, disabled } = props; //FIXME: remove deprecated const fieldCtx = useField(props.name); const { value, onChange, state, error } = @@ -222,7 +228,7 @@ export function InputLine( {...props} help={props.help ?? state.help} - disabled={state.disabled ?? false} + disabled={disabled ?? false} error={showError ? error : undefined} >