diff options
33 files changed, 783 insertions, 47 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 diff --git a/packages/web-util/src/forms/DefaultForm.tsx b/packages/web-util/src/forms/DefaultForm.tsx index 12babf39a..be8affbec 100644 --- a/packages/web-util/src/forms/DefaultForm.tsx +++ b/packages/web-util/src/forms/DefaultForm.tsx @@ -7,8 +7,9 @@ import { DoubleColumnForm, RenderAllFieldsByUiConfig } from "./forms.js"; export interface FlexibleForm<T extends object> { versionId: string; design: DoubleColumnForm; - behavior: (form: Partial<T>) => FormState<T>; + behavior?: (form: Partial<T>) => FormState<T>; } + export function DefaultForm<T extends object>({ initial, onUpdate, diff --git a/packages/web-util/src/forms/forms.ts b/packages/web-util/src/forms/forms.ts index 2c90a69ed..6e8a0e7c0 100644 --- a/packages/web-util/src/forms/forms.ts +++ b/packages/web-util/src/forms/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"; |