From bedeebff1572fa8cfdb0a818030f6b13a3fc0f53 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Sun, 31 Dec 2023 15:32:12 -0300 Subject: remove handlers from impl --- .../aml-backoffice-ui/src/handlers/Calendar.tsx | 119 --------- .../aml-backoffice-ui/src/handlers/Caption.tsx | 32 --- packages/aml-backoffice-ui/src/handlers/Dialog.tsx | 15 -- .../src/handlers/FormProvider.tsx | 140 ----------- packages/aml-backoffice-ui/src/handlers/Group.tsx | 41 ---- .../src/handlers/InputAbsoluteTime.stories.tsx | 60 ----- .../src/handlers/InputAbsoluteTime.tsx | 77 ------ .../src/handlers/InputAmount.stories.tsx | 59 ----- .../aml-backoffice-ui/src/handlers/InputAmount.tsx | 36 --- .../src/handlers/InputArray.stories.tsx | 79 ------ .../aml-backoffice-ui/src/handlers/InputArray.tsx | 186 -------------- .../src/handlers/InputChoiceHorizontal.stories.tsx | 69 ------ .../src/handlers/InputChoiceHorizontal.tsx | 87 ------- .../src/handlers/InputChoiceStacked.stories.tsx | 69 ------ .../src/handlers/InputChoiceStacked.tsx | 113 --------- .../src/handlers/InputFile.stories.tsx | 64 ----- .../aml-backoffice-ui/src/handlers/InputFile.tsx | 106 -------- .../src/handlers/InputInteger.stories.tsx | 55 ----- .../src/handlers/InputInteger.tsx | 24 -- .../src/handlers/InputLine.stories.tsx | 59 ----- .../aml-backoffice-ui/src/handlers/InputLine.tsx | 268 --------------------- .../src/handlers/InputSelectMultiple.stories.tsx | 90 ------- .../src/handlers/InputSelectMultiple.tsx | 154 ------------ .../src/handlers/InputSelectOne.stories.tsx | 70 ------ .../src/handlers/InputSelectOne.tsx | 135 ----------- .../src/handlers/InputText.stories.tsx | 59 ----- .../aml-backoffice-ui/src/handlers/InputText.tsx | 9 - .../src/handlers/InputTextArea.stories.tsx | 59 ----- .../src/handlers/InputTextArea.tsx | 9 - .../src/handlers/InputToggle.stories.tsx | 59 ----- .../aml-backoffice-ui/src/handlers/InputToggle.tsx | 38 --- .../aml-backoffice-ui/src/handlers/NiceForm.tsx | 60 ----- .../aml-backoffice-ui/src/handlers/TimePicker.tsx | 110 --------- packages/aml-backoffice-ui/src/handlers/forms.ts | 141 ----------- .../src/handlers/index.stories.ts | 13 - .../aml-backoffice-ui/src/handlers/useField.ts | 95 -------- 36 files changed, 2859 deletions(-) delete mode 100644 packages/aml-backoffice-ui/src/handlers/Calendar.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/Caption.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/Dialog.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/FormProvider.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/Group.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.stories.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputAmount.stories.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputAmount.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputArray.stories.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputArray.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.stories.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputFile.stories.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputFile.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputInteger.stories.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputInteger.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputLine.stories.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputLine.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.stories.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputSelectMultiple.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputSelectOne.stories.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputSelectOne.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputText.stories.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputText.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputTextArea.stories.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputTextArea.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputToggle.stories.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/InputToggle.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/NiceForm.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/TimePicker.tsx delete mode 100644 packages/aml-backoffice-ui/src/handlers/forms.ts delete mode 100644 packages/aml-backoffice-ui/src/handlers/index.stories.ts delete mode 100644 packages/aml-backoffice-ui/src/handlers/useField.ts (limited to 'packages/aml-backoffice-ui/src') diff --git a/packages/aml-backoffice-ui/src/handlers/Calendar.tsx b/packages/aml-backoffice-ui/src/handlers/Calendar.tsx deleted file mode 100644 index e476bf6f6..000000000 --- a/packages/aml-backoffice-ui/src/handlers/Calendar.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import { AbsoluteTime } from "@gnu-taler/taler-util" -import { useTranslationContext } from "@gnu-taler/web-util/browser" -import { add as dateAdd, sub as dateSub, eachDayOfInterval, endOfMonth, endOfWeek, format, getMonth, getYear, isSameDay, isSameMonth, startOfDay, startOfMonth, startOfWeek } from "date-fns" -import { VNode, h } from "preact" -import { useState } from "preact/hooks" - -export function Calendar({ value, onChange }: { value: AbsoluteTime | undefined, onChange: (v: AbsoluteTime) => void }): VNode { - const today = startOfDay(new Date()) - const selected = !value ? today : new Date(AbsoluteTime.toStampMs(value)) - const [showingDate, setShowingDate] = useState(selected) - const month = getMonth(showingDate) - const year = getYear(showingDate) - - const start = startOfWeek(startOfMonth(showingDate)); - const end = endOfWeek(endOfMonth(showingDate)); - const daysInMonth = eachDayOfInterval({ start, end }); - const { i18n } = useTranslationContext() - const monthNames = [ - i18n.str`January`, - i18n.str`February`, - i18n.str`March`, - i18n.str`April`, - i18n.str`May`, - i18n.str`June`, - i18n.str`July`, - i18n.str`August`, - i18n.str`September`, - i18n.str`October`, - i18n.str`November`, - i18n.str`December`, - ] - return
-
- -
{year}
- -
-
- -
{monthNames[month]}
- -
-
-
M
-
T
-
W
-
T
-
F
-
S
-
S
-
-
-
- {daysInMonth.map(current => ( - - ))} -
- {daysInMonth.length < 40 ?
: undefined} -
-
-} diff --git a/packages/aml-backoffice-ui/src/handlers/Caption.tsx b/packages/aml-backoffice-ui/src/handlers/Caption.tsx deleted file mode 100644 index 8facddec3..000000000 --- a/packages/aml-backoffice-ui/src/handlers/Caption.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import { TranslatedString } from "@gnu-taler/taler-util"; -import { VNode, h } from "preact"; -import { - LabelWithTooltipMaybeRequired -} from "./InputLine.js"; - -interface Props { - label: TranslatedString; - tooltip?: TranslatedString; - help?: TranslatedString; - before?: VNode; - after?: VNode; -} - -export function Caption({ before, after, label, tooltip, help }: Props): VNode { - return ( -
- {before !== undefined && ( - {before} - )} - - {after !== undefined && ( - {after} - )} - {help && ( -

- {help} -

- )} -
- ); -} diff --git a/packages/aml-backoffice-ui/src/handlers/Dialog.tsx b/packages/aml-backoffice-ui/src/handlers/Dialog.tsx deleted file mode 100644 index 7b41fe487..000000000 --- a/packages/aml-backoffice-ui/src/handlers/Dialog.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { ComponentChildren, VNode, h } from "preact"; - -export function Dialog({ children, onClose }: { onClose?: () => void; children: ComponentChildren }): VNode { - return -} diff --git a/packages/aml-backoffice-ui/src/handlers/FormProvider.tsx b/packages/aml-backoffice-ui/src/handlers/FormProvider.tsx deleted file mode 100644 index b9f9f7832..000000000 --- a/packages/aml-backoffice-ui/src/handlers/FormProvider.tsx +++ /dev/null @@ -1,140 +0,0 @@ -import { - AbsoluteTime, - AmountJson, - TranslatedString, -} from "@gnu-taler/taler-util"; -import { ComponentChildren, VNode, createContext, h } from "preact"; -import { - MutableRef, - StateUpdater, - useState -} from "preact/hooks"; - -export interface FormType { - value: MutableRef>; - initialValue?: Partial; - readOnly?: boolean; - onUpdate?: StateUpdater; - computeFormState?: (v: T) => FormState; -} - -//@ts-ignore -export const FormContext = createContext>({}); - -/** - * Map of {[field]:BehaviorResult} - * for every field of type - * - any native (string, number, etc...) - * - absoluteTime - * - amountJson - * - * except for: - * - object => recurse into - * - array => behavior result and element field - */ -export type FormState = { - [field in keyof T]?: T[field] extends AbsoluteTime - ? BehaviorResult - : T[field] extends AmountJson - ? BehaviorResult - : T[field] extends Array - ? InputArrayFieldState

- : T[field] extends (object | undefined) - ? FormState - : BehaviorResult; -}; - -export type BehaviorResult = Partial & FieldUIOptions - -export interface InputFieldState { - /* should show the error */ - error?: TranslatedString; - /* should not allow to edit */ - readonly: boolean; - /* should show as disable */ - disabled: boolean; - /* should not show */ - hidden: boolean; -} - -export interface IconAddon { - type: "icon"; - icon: VNode; -} -export interface ButtonAddon { - type: "button"; - onClick: () => void; - children: ComponentChildren; -} -export interface TextAddon { - type: "text"; - text: TranslatedString; -} -export type Addon = IconAddon | ButtonAddon | TextAddon; - -export interface StringConverter { - toStringUI: (v?: T) => string; - fromStringUI: (v?: string) => T; -} - -type FieldUIOptions = { - placeholder?: TranslatedString; - tooltip?: TranslatedString; - help?: TranslatedString; - required?: boolean; -} - -export interface UIFormProps extends FieldUIOptions { - name: K; - label: TranslatedString; - before?: Addon; - after?: Addon; - converter?: StringConverter; -} - -export interface InputArrayFieldState

extends BehaviorResult { - elements?: FormState

[]; -} - -export function FormProvider({ - children, - initialValue, - onUpdate: notify, - onSubmit, - computeFormState, - readOnly, -}: { - initialValue?: Partial; - onUpdate?: (v: Partial) => void; - onSubmit?: (v: Partial, s: FormState | undefined) => void; - computeFormState?: (v: Partial) => FormState; - readOnly?: boolean; - children: ComponentChildren; -}): VNode { - - const [state, setState] = useState>(initialValue ?? {}); - const value = { current: state }; - const onUpdate = (v: typeof state) => { - setState(v); - if (notify) notify(v); - }; - return ( - -

{ - e.preventDefault(); - //@ts-ignore - if (onSubmit) - onSubmit( - value.current, - !computeFormState ? undefined : computeFormState(value.current), - ); - }} - > - {children} -
- - ); -} diff --git a/packages/aml-backoffice-ui/src/handlers/Group.tsx b/packages/aml-backoffice-ui/src/handlers/Group.tsx deleted file mode 100644 index 0645f6d97..000000000 --- a/packages/aml-backoffice-ui/src/handlers/Group.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import { TranslatedString } from "@gnu-taler/taler-util"; -import { VNode, h } from "preact"; -import { LabelWithTooltipMaybeRequired } from "./InputLine.js"; -import { RenderAllFieldsByUiConfig, UIFormField } from "./forms.js"; - -interface Props { - before?: TranslatedString; - after?: TranslatedString; - tooltipBefore?: TranslatedString; - tooltipAfter?: TranslatedString; - fields: UIFormField[]; -} - -export function Group({ - before, - after, - tooltipAfter, - tooltipBefore, - fields, -}: Props): VNode { - return ( -
-
- {before && ( - - )} -
-
- -
-
- {after && ( - - )} -
-
- ); -} diff --git a/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.stories.tsx deleted file mode 100644 index 54e41ffae..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.stories.tsx +++ /dev/null @@ -1,60 +0,0 @@ -/* - 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 - */ - -/** - * - * @author Sebastian Javier Marchano (sebasjm) - */ - -import { AbsoluteTime, 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 Absolute Time", -}; - -export namespace Simplest { - export interface Form { - comment: string; - } -} - -type TargetObject = { - today: AbsoluteTime; -} -const initial: TargetObject = { - today: AbsoluteTime.now() -} - -const form: FlexibleForm = { - design: [{ - title: "this is a simple form" as TranslatedString, - fields: [{ - type: "absoluteTime", - props: { - label: "label of the field" as TranslatedString, - name: "today", - pattern: "dd/MM/yyyy HH:mm" - }, - }] - }] -} - -export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.tsx b/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.tsx deleted file mode 100644 index 0e03c5595..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputAbsoluteTime.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { AbsoluteTime } from "@gnu-taler/taler-util"; -import { InputLine } from "./InputLine.js"; -import { Fragment, VNode, h } from "preact"; -import { format, parse } from "date-fns"; -import { Dialog } from "./Dialog.js"; -import { Calendar } from "./Calendar.js"; -import { useState } from "preact/hooks"; -import { useField } from "./useField.js"; -import { UIFormProps } from "./FormProvider.js"; -import { TimePicker } from "./TimePicker.js"; - -export function InputAbsoluteTime( - props: { pattern?: string } & UIFormProps, -): VNode { - const pattern = props.pattern ?? "dd/MM/yyyy"; - const [open, setOpen] = useState(true) - const { value, onChange } = useField(props.name); - return ( - - - - type="text" - after={{ - type: "button", - onClick: () => { - setOpen(true) - }, - // icon: , - children: ( - - - ) - }} - converter={{ - //@ts-ignore - fromStringUI: (v): AbsoluteTime | undefined => { - if (!v) return undefined; - try { - const t_ms = parse(v, pattern, Date.now()).getTime(); - return AbsoluteTime.fromMilliseconds(t_ms); - } catch (e) { - return undefined; - } - }, - //@ts-ignore - toStringUI: (v: AbsoluteTime | undefined) => { - return !v || !v.t_ms - ? undefined - : v.t_ms === "never" - ? "never" - : format(v.t_ms, pattern); - }, - }} - {...props} - /> - {/* {open && - setOpen(false)}> - { - onChange(v as any) - setOpen(false) - }} /> - - } */} - {open && - setOpen(false)} > - { - onChange(v as any) - }} - onConfirm={() => { - setOpen(false) - }} /> - } - - ); -} diff --git a/packages/aml-backoffice-ui/src/handlers/InputAmount.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputAmount.stories.tsx deleted file mode 100644 index 872726247..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputAmount.stories.tsx +++ /dev/null @@ -1,59 +0,0 @@ -/* - 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 - */ - -/** - * - * @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 = { - 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/InputAmount.tsx b/packages/aml-backoffice-ui/src/handlers/InputAmount.tsx deleted file mode 100644 index 29ec43525..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputAmount.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { AmountJson, Amounts, TranslatedString } from "@gnu-taler/taler-util"; -import { VNode, h } from "preact"; -import { InputLine } from "./InputLine.js"; -import { useField } from "./useField.js"; -import { UIFormProps } from "./FormProvider.js"; - -export function InputAmount( - props: { currency?: string } & UIFormProps, -): VNode { - const { value } = useField(props.name); - const currency = - !value || !(value as any).currency - ? props.currency - : (value as any).currency; - return ( - - type="text" - before={{ - type: "text", - text: currency as TranslatedString, - }} - converter={{ - //@ts-ignore - fromStringUI: (v): AmountJson => { - - return Amounts.parse(`${currency}:${v}`) ?? Amounts.zeroOfCurrency(currency); - }, - //@ts-ignore - toStringUI: (v: AmountJson) => { - return v === undefined ? "" : Amounts.stringifyValue(v); - }, - }} - {...props} - /> - ); -} diff --git a/packages/aml-backoffice-ui/src/handlers/InputArray.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputArray.stories.tsx deleted file mode 100644 index ee25d355b..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputArray.stories.tsx +++ /dev/null @@ -1,79 +0,0 @@ -/* - 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 - */ - -/** - * - * @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 = { - 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/InputArray.tsx b/packages/aml-backoffice-ui/src/handlers/InputArray.tsx deleted file mode 100644 index 38c399e66..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputArray.tsx +++ /dev/null @@ -1,186 +0,0 @@ -import { TranslatedString } from "@gnu-taler/taler-util"; -import { Fragment, VNode, h } from "preact"; -import { useState } from "preact/hooks"; -import { FormProvider, UIFormProps } from "./FormProvider.js"; -import { LabelWithTooltipMaybeRequired } from "./InputLine.js"; -import { RenderAllFieldsByUiConfig, UIFormField } from "./forms.js"; -import { useField } from "./useField.js"; - -function Option({ - label, - disabled, - isFirst, - isLast, - isSelected, - onClick, -}: { - label: TranslatedString; - isFirst?: boolean; - isLast?: boolean; - isSelected?: boolean; - disabled?: boolean; - onClick: () => void; -}): VNode { - let clazz = "relative flex border p-4 focus:outline-none disabled:text-grey"; - if (isFirst) { - clazz += " rounded-tl-md rounded-tr-md "; - } - if (isLast) { - clazz += " rounded-bl-md rounded-br-md "; - } - if (isSelected) { - clazz += " z-10 border-indigo-200 bg-indigo-50 "; - } else { - clazz += " border-gray-200"; - } - if (disabled) { - clazz += - " cursor-not-allowed bg-gray-50 text-gray-500 ring-gray-200 text-gray"; - } else { - clazz += " cursor-pointer"; - } - return ( - - ); -} - -export function InputArray( - props: { - fields: UIFormField[]; - labelField: string; - } & UIFormProps, -): VNode { - const { fields, labelField, name, label, required, tooltip } = props; - const { value, onChange, state } = useField(name); - const list = (value ?? []) as Array>; - const [selectedIndex, setSelected] = useState(undefined); - const selected = - selectedIndex === undefined ? undefined : list[selectedIndex]; - - return ( -
- - -
- {list.map((v, idx) => { - return ( -
- {selectedIndex !== undefined && ( - /** - * This form provider act as a substate of the parent form - * Consider creating an InnerFormProvider since not every feature is expected - */ - { - // current state is ignored - // the state is defined by the parent form - - // elements should be present in the state object since this is expected to be an array - //@ts-ignore - return state.elements[selectedIndex]; - }} - onSubmit={(v) => { - const newValue = [...list]; - newValue.splice(selectedIndex, 1, v); - onChange(newValue as T[K]); - setSelected(undefined); - }} - onUpdate={(v) => { - const newValue = [...list]; - newValue.splice(selectedIndex, 1, v); - onChange(newValue as T[K]); - }} - > -
-
- -
-
- - )} - {selectedIndex !== undefined && ( -
-
- {selected !== undefined && ( - - )} -
-
- )} -
- ); -} diff --git a/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx deleted file mode 100644 index 7872afac7..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.stories.tsx +++ /dev/null @@ -1,69 +0,0 @@ -/* - 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 - */ - -/** - * - * @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: "0" -} - -const form: FlexibleForm = { - design: [{ - title: "this is a simple form" as TranslatedString, - fields: [{ - type: "choiceHorizontal", - props: { - 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: "thrid choice" as TranslatedString, - value: "3" - },], - }, - }] - }] -} - -export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.tsx b/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.tsx deleted file mode 100644 index 594b1c32e..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputChoiceHorizontal.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { TranslatedString } from "@gnu-taler/taler-util"; -import { Fragment, VNode, h } from "preact"; -import { LabelWithTooltipMaybeRequired } from "./InputLine.js"; -import { useField } from "./useField.js"; -import { UIFormProps } from "./FormProvider.js"; - -export interface Choice { - label: TranslatedString; - value: V; -} - -export function InputChoiceHorizontal( - props: { - choices: Choice[]; - } & UIFormProps, -): VNode { - const { - choices, - name, - label, - tooltip, - help, - placeholder, - required, - before, - after, - converter, - } = props; - const { value, onChange, state, isDirty } = useField(name); - if (state.hidden) { - return ; - } - - return ( -
- -
-
- {choices.map((choice, idx) => { - const isFirst = idx === 0; - const isLast = idx === choices.length - 1; - let clazz = - "relative inline-flex items-center px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 focus:z-10"; - if (choice.value === value) { - clazz += - " text-white bg-indigo-600 hover:bg-indigo-500 ring-2 ring-indigo-600 hover:ring-indigo-500"; - } else { - clazz += " hover:bg-gray-100 border-gray-300"; - } - if (isFirst) { - clazz += " rounded-l-md"; - } else { - clazz += " -ml-px"; - } - if (isLast) { - clazz += " rounded-r-md"; - } - return ( - - ); - })} -
-
- {help && ( -

- {help} -

- )} -
- ); -} diff --git a/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.stories.tsx deleted file mode 100644 index 215418430..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.stories.tsx +++ /dev/null @@ -1,69 +0,0 @@ -/* - 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 - */ - -/** - * - * @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 = { - design: [{ - title: "this is a simple form" as TranslatedString, - fields: [{ - type: "choiceStacked", - props: { - 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: "thrid choice" as TranslatedString, - value: "3" - },], - }, - }] - }] -} - -export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.tsx b/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.tsx deleted file mode 100644 index 48d367ff2..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputChoiceStacked.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import { TranslatedString } from "@gnu-taler/taler-util"; -import { Fragment, VNode, h } from "preact"; -import { LabelWithTooltipMaybeRequired } from "./InputLine.js"; -import { useField } from "./useField.js"; -import { UIFormProps } from "./FormProvider.js"; - -export interface Choice { - label: TranslatedString; - description?: TranslatedString; - value: V; -} - -export function InputChoiceStacked( - props: { - choices: Choice[]; - } & UIFormProps, -): VNode { - const { - choices, - name, - label, - tooltip, - help, - placeholder, - required, - before, - after, - converter, - } = props; - const { value, onChange, state, isDirty } = useField(name); - if (state.hidden) { - return ; - } - - return ( -
- -
-
- {choices.map((choice) => { - // const currentValue = !converter - // ? choice.value - // : converter.fromStringUI(choice.value) ?? ""; - - let clazz = - "border relative block cursor-pointer rounded-lg bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex sm:justify-between"; - if (choice.value === value) { - clazz += - " border-transparent border-indigo-600 ring-2 ring-indigo-600"; - } else { - clazz += " border-gray-300"; - } - - return ( - - ); - })} -
-
- {help && ( -

- {help} -

- )} -
- ); -} diff --git a/packages/aml-backoffice-ui/src/handlers/InputFile.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputFile.stories.tsx deleted file mode 100644 index 8a1783bda..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputFile.stories.tsx +++ /dev/null @@ -1,64 +0,0 @@ -/* - 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 - */ - -/** - * - * @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 = { - design: [{ - title: "this is a simple form" as TranslatedString, - fields: [{ - type: "file", - props: { - 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, - }, - }] - }] -} - -export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputFile.tsx b/packages/aml-backoffice-ui/src/handlers/InputFile.tsx deleted file mode 100644 index bc460f370..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputFile.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { Fragment, VNode, h } from "preact"; -import { LabelWithTooltipMaybeRequired } from "./InputLine.js"; -import { useField } from "./useField.js"; -import { UIFormProps, BehaviorResult } from "./FormProvider.js"; - -export function InputFile( - props: { maxBites: number; accept?: string } & UIFormProps, -): VNode { - const { - name, - label, - placeholder, - tooltip, - required, - help: propsHelp, - maxBites, - accept, - } = props; - const { value, onChange, state } = useField(name); - const help = propsHelp ?? state.help - if (state.hidden) { - return
; - } - return ( -
- - {!value || !(value as string).startsWith("data:image/") ? ( -
-
- - {!state.disabled && -
- - {/*

or drag and drop

*/} -
- } -
-
- ) : ( -
- - - {!state.disabled && -
{ - onChange(undefined!); - }} - > - Clear -
- } -
- )} - {help &&

{help}

} -
- ); -} diff --git a/packages/aml-backoffice-ui/src/handlers/InputInteger.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputInteger.stories.tsx deleted file mode 100644 index 344865817..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputInteger.stories.tsx +++ /dev/null @@ -1,55 +0,0 @@ -/* - 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 - */ - -/** - * - * @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", -}; - - -type TargetObject = { - age: number; -} -const initial: TargetObject = { - age: 5, -} - -const form: FlexibleForm = { - design: [{ - title: "this is a simple form" as TranslatedString, - fields: [{ - type: "integer", - props: { - label: "label of the field" as TranslatedString, - name: "age", - tooltip: "just numbers" as TranslatedString, - }, - }] - }] -} - -export const SimpleComment = tests.createExample(TestedComponent, { initial, form }); diff --git a/packages/aml-backoffice-ui/src/handlers/InputInteger.tsx b/packages/aml-backoffice-ui/src/handlers/InputInteger.tsx deleted file mode 100644 index a6a02ad43..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputInteger.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { VNode, h } from "preact"; -import { InputLine } from "./InputLine.js"; -import { UIFormProps } from "./FormProvider.js"; - -export function InputInteger( - props: UIFormProps, -): VNode { - return ( - { - return !v ? 0 : Number.parseInt(v, 10); - }, - //@ts-ignore - toStringUI: (v?: number): string => { - return v === undefined ? "" : String(v); - }, - }} - {...props} - /> - ); -} diff --git a/packages/aml-backoffice-ui/src/handlers/InputLine.stories.tsx b/packages/aml-backoffice-ui/src/handlers/InputLine.stories.tsx deleted file mode 100644 index 0d55bddf7..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputLine.stories.tsx +++ /dev/null @@ -1,59 +0,0 @@ -/* - 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 - */ - -/** - * - * @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 = { - 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.tsx b/packages/aml-backoffice-ui/src/handlers/InputLine.tsx deleted file mode 100644 index 8c44b1ca5..000000000 --- a/packages/aml-backoffice-ui/src/handlers/InputLine.tsx +++ /dev/null @@ -1,268 +0,0 @@ -import { TranslatedString } from "@gnu-taler/taler-util"; -import { ComponentChildren, Fragment, VNode, h } from "preact"; -import { useField } from "./useField.js"; -import { useEffect, useState } from "preact/hooks"; -import { UIFormProps } from "./FormProvider.js"; - -//@ts-ignore -const TooltipIcon = ( - - - -); - -export function LabelWithTooltipMaybeRequired({ - label, - required, - tooltip, -}: { - label: TranslatedString; - required?: boolean; - tooltip?: TranslatedString; -}): VNode { - const Label = ( - -
- -
- - ); - const WithTooltip = tooltip ? ( -
- {Label} - - {TooltipIcon} - - -
- ) : ( - Label - ); - if (required) { - return ( -
- {WithTooltip} - * -
- ); - } - return WithTooltip; -} - -function InputWrapper({ - children, - label, - tooltip, - before, - after, - help, - error, - disabled, - required, -}: { error?: string; disabled: boolean, children: ComponentChildren } & UIFormProps): VNode { - return ( -
- -
- {before && - (before.type === "text" ? ( - - {before.text} - - ) : before.type === "icon" ? ( -
- {before.icon} -
- ) : before.type === "button" ? ( - - ) : undefined)} - - {children} - - {after && - (after.type === "text" ? ( - - {after.text} - - ) : after.type === "icon" ? ( -
- {after.icon} -
- ) : after.type === "button" ? ( - - ) : undefined)} -
- {error && ( -

- {error} -

- )} - {help && ( -

- {help} -

- )} -
- ); -} - -function defaultToString(v: unknown) { - return v === undefined ? "" : typeof v !== "object" ? String(v) : ""; -} -function defaultFromString(v: string) { - return v; -} - -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 { value, onChange, state, isDirty } = useField(name); - - const [text, setText] = useState("") - const fromString: (s: string) => any = - converter?.fromStringUI ?? defaultFromString; - const toString: (s: any) => string = converter?.toStringUI ?? defaultToString; - - useEffect(() => { - const newValue = toString(value) - if (newValue) { - setText(newValue) - } - }, [value]) - - if (state.hidden) return
; - - let clazz = - "block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-6 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:ring-gray-200"; - if (before) { - switch (before.type) { - case "icon": { - clazz += " pl-10"; - break; - } - case "button": { - clazz += " rounded-none rounded-r-md "; - break; - } - case "text": { - clazz += " min-w-0 flex-1 rounded-r-md rounded-none "; - break; - } - } - } - if (after) { - switch (after.type) { - case "icon": { - clazz += " pr-10"; - break; - } - case "button": { - clazz += " rounded-none rounded-l-md"; - break; - } - case "text": { - clazz += " min-w-0 flex-1 rounded-l-md rounded-none "; - break; - } - } - } - const showError = isDirty && state.error; - if (showError) { - clazz += - " text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500"; - } else { - clazz += - " text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-indigo-600"; - } - - if (type === "text-area") { - return ( - - {...props} - help={props.help ?? state.help} - disabled={state.disabled ?? false} - error={showError ? state.error : undefined} - > -