taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

fix break on build

Browse Source
This commit is contained in:
Sebastian 2023-05-22 10:40:13 -03:00
parent 0544b8358a
commit 3e95ae356a
No known key found for this signature in database
GPG Key ID: 173909D1A5F66069
16 changed files with 145 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/exchange-backoffice-ui/src/handlers/InputArray.tsx
View File

@ -71,17 +71,15 @@ function Option({
);
}
export function InputArray(
export function InputArray<T extends object, K extends keyof T>(
props: {
fields: UIFormField[];
labelField: string;
} & UIFormProps<Array<{}>>,
} & UIFormProps<T, K>,
): VNode {
const { fields, labelField, name, label, required, tooltip } = props;
const { value, onChange, state } = useField<{ [s: string]: Array<any> }>(
name,
);
const list = value ?? [];
const { value, onChange, state } = useField<T, K>(name);
const list = (value ?? []) as Array<Record<string, string | undefined>>;
const [selectedIndex, setSelected] = useState<number | undefined>(undefined);
const selected =
selectedIndex === undefined ? undefined : list[selectedIndex];
@ -98,7 +96,7 @@ export function InputArray(
{list.map((v, idx) => {
return (
<Option
label={v[labelField]}
label={v[labelField] as TranslatedString}
isSelected={selectedIndex === idx}
isLast={idx === list.length - 1}
disabled={selectedIndex !== undefined && selectedIndex !== idx}
@ -141,10 +139,16 @@ export function InputArray(
//@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);
onChange(newValue as T[K]);
}}
>
<div class="px-4 py-6">
@ -163,7 +167,7 @@ export function InputArray(
onClick={() => {
const newValue = [...list];
newValue.splice(selectedIndex, 1);
onChange(newValue);
onChange(newValue as T[K]);
setSelected(undefined);
}}
class="block rounded-md bg-red-600 px-3 py-2 text-center text-sm text-white shadow-sm hover:bg-red-500 "

14
packages/exchange-backoffice-ui/src/handlers/InputChoiceStacked.tsx
View File

@ -9,10 +9,10 @@ export interface Choice {
value: string;
}
export function InputChoiceStacked(
export function InputChoiceStacked<T extends object, K extends keyof T>(
props: {
choices: Choice[];
} & UIFormProps<string>,
} & UIFormProps<T, K>,
): VNode {
const {
choices,
@ -26,9 +26,7 @@ export function InputChoiceStacked(
after,
converter,
} = props;
const { value, onChange, state, isDirty } = useField<{
[s: string]: undefined | string;
}>(name);
const { value, onChange, state, isDirty } = useField<T, K>(name);
if (state.hidden) {
return <Fragment />;
}
@ -58,7 +56,11 @@ export function InputChoiceStacked(
name="server-size"
defaultValue={choice.value}
onClick={(e) => {
onChange(value === choice.value ? undefined : choice.value);
onChange(
(value === choice.value
? undefined
: choice.value) as T[K],
);
}}
class="sr-only"
aria-labelledby="server-size-0-label"

12
packages/exchange-backoffice-ui/src/handlers/InputDate.tsx
View File

@ -4,24 +4,26 @@ import { CalendarIcon } from "@heroicons/react/24/outline";
import { VNode, h } from "preact";
import { format, parse } from "date-fns";
export function InputDate(
props: { pattern?: string } & UIFormProps<AbsoluteTime>,
export function InputDate<T extends object, K extends keyof T>(
props: { pattern?: string } & UIFormProps<T, K>,
): VNode {
const pattern = props.pattern ?? "dd/MM/yyyy";
return (
<InputLine<AbsoluteTime>
<InputLine<T, K>
type="text"
after={{
type: "icon",
icon: <CalendarIcon class="h-6 w-6" />,
}}
converter={{
fromStringUI: (v) => {
//@ts-ignore
fromStringUI: (v): AbsoluteTime => {
if (!v) return { t_ms: "never" };
const t_ms = parse(v, pattern, Date.now()).getTime();
return { t_ms };
},
toStringUI: (v) => {
//@ts-ignore
toStringUI: (v: AbsoluteTime) => {
return !v || !v.t_ms
? ""
: v.t_ms === "never"

19
packages/exchange-backoffice-ui/src/handlers/InputFile.tsx
View File

@ -1,13 +1,9 @@
import { Fragment, VNode, h } from "preact";
import {
InputLine,
LabelWithTooltipMaybeRequired,
UIFormProps,
} from "./InputLine.js";
import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
import { useField } from "./useField.js";
export function InputFile(
props: { maxBites: number; accept?: string } & UIFormProps<string>,
export function InputFile<T extends object, K extends keyof T>(
props: { maxBites: number; accept?: string } & UIFormProps<T, K>,
): VNode {
const {
name,
@ -19,7 +15,7 @@ export function InputFile(
maxBites,
accept,
} = props;
const { value, onChange, state } = useField<{ [s: string]: string }>(name);
const { value, onChange, state } = useField<T, K>(name);
if (state.hidden) {
return <div />;
@ -31,7 +27,7 @@ export function InputFile(
tooltip={tooltip}
required={required}
/>
{!value || !value.startsWith("data:image/") ? (
{!value || !(value as string).startsWith("data:image/") ? (
<div class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 py-1">
<div class="text-center">
<svg
@ -84,7 +80,10 @@ export function InputFile(
</div>
) : (
<div class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 relative">
<img src={value} class=" h-24 w-full object-cover relative" />
<img
src={value as string}
class=" h-24 w-full object-cover relative"
/>
<div
class="opacity-0 hover:opacity-70 duration-300 absolute rounded-lg border inset-0 z-10 flex justify-center text-xl items-center bg-black text-white cursor-pointer "

10
packages/exchange-backoffice-ui/src/handlers/InputInteger.tsx
View File

@ -1,15 +1,19 @@
import { VNode, h } from "preact";
import { InputLine, UIFormProps } from "./InputLine.js";
export function InputInteger(props: UIFormProps<number>): VNode {
export function InputInteger<T extends object, K extends keyof T>(
props: UIFormProps<T, K>,
): VNode {
return (
<InputLine
type="number"
converter={{
fromStringUI: (v) => {
//@ts-ignore
fromStringUI: (v): number => {
return !v ? 0 : Number.parseInt(v, 10);
},
toStringUI: (v?: number) => {
//@ts-ignore
toStringUI: (v?: number): string => {
return v === undefined ? "" : String(v);
},
}}

25
packages/exchange-backoffice-ui/src/handlers/InputLine.tsx
View File

@ -22,8 +22,8 @@ interface StringConverter<T> {
fromStringUI: (v?: string) => T;
}
export interface UIFormProps<T> {
name: keyof T;
export interface UIFormProps<T extends object, K extends keyof T> {
name: K;
label: TranslatedString;
placeholder?: TranslatedString;
tooltip?: TranslatedString;
@ -31,7 +31,7 @@ export interface UIFormProps<T> {
before?: Addon;
after?: Addon;
required?: boolean;
converter?: StringConverter<T>;
converter?: StringConverter<T[K]>;
}
export type FormErrors<T> = {
@ -102,7 +102,7 @@ export function LabelWithTooltipMaybeRequired({
return WithTooltip;
}
function InputWrapper<T>({
function InputWrapper<T extends object, K extends keyof T>({
children,
label,
tooltip,
@ -111,7 +111,7 @@ function InputWrapper<T>({
help,
error,
required,
}: { error?: string; children: ComponentChildren } & UIFormProps<T>): VNode {
}: { error?: string; children: ComponentChildren } & UIFormProps<T, K>): VNode {
return (
<div class="sm:col-span-6">
<LabelWithTooltipMaybeRequired
@ -181,13 +181,13 @@ function defaultFromString(v: string) {
return v;
}
type InputType = "text" | "text-area" | "password" | "email";
type InputType = "text" | "text-area" | "password" | "email" | "number";
export function InputLine<T>(
props: { type: InputType } & UIFormProps<T>,
export function InputLine<T extends object, K extends keyof T>(
props: { type: InputType } & UIFormProps<T, K>,
): VNode {
const { name, placeholder, before, after, converter, type } = props;
const { value, onChange, state, isDirty } = useField(name);
const { value, onChange, state, isDirty } = useField<T, K>(name);
if (state.hidden) return <div />;
@ -239,7 +239,10 @@ export function InputLine<T>(
if (type === "text-area") {
return (
<InputWrapper<T> {...props} error={showError ? state.error : undefined}>
<InputWrapper<T, K>
{...props}
error={showError ? state.error : undefined}
>
<textarea
rows={4}
name={String(name)}
@ -258,7 +261,7 @@ export function InputLine<T>(
}
return (
<InputWrapper<T> {...props} error={showError ? state.error : undefined}>
<InputWrapper<T, K> {...props} error={showError ? state.error : undefined}>
<input
name={String(name)}
type={type}

12
packages/exchange-backoffice-ui/src/handlers/InputSelectMultiple.tsx
View File

@ -4,16 +4,16 @@ import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
import { useField } from "./useField.js";
import { useState } from "preact/hooks";
export function InputSelectMultiple(
export function InputSelectMultiple<T extends object, K extends keyof T>(
props: {
choices: Choice[];
unique?: boolean;
max?: number;
} & UIFormProps<Array<string>>,
} & UIFormProps<T, K>,
): VNode {
const { name, label, choices, placeholder, tooltip, required, unique, max } =
props;
const { value, onChange } = useField<{ [s: string]: Array<string> }>(name);
const { value, onChange } = useField<T, K>(name);
const [filter, setFilter] = useState<string | undefined>(undefined);
const regex = new RegExp(`.*${filter}.*`, "i");
@ -21,7 +21,7 @@ export function InputSelectMultiple(
return { ...prev, [curr.value]: curr.label };
}, {} as Record<string, string>);
const list = value ?? [];
const list = (value ?? []) as string[];
const filteredChoices =
filter === undefined
? undefined
@ -44,7 +44,7 @@ export function InputSelectMultiple(
onClick={() => {
const newValue = [...list];
newValue.splice(idx, 1);
onChange(newValue);
onChange(newValue as T[K]);
setFilter(undefined);
}}
class="group relative h-5 w-5 rounded-sm hover:bg-gray-500/20"
@ -119,7 +119,7 @@ export function InputSelectMultiple(
}
const newValue = [...list];
newValue.splice(0, 0, v.value);
onChange(newValue);
onChange(newValue as T[K]);
}}
// tabindex="-1"

14
packages/exchange-backoffice-ui/src/handlers/InputSelectOne.tsx
View File

@ -4,15 +4,13 @@ import { LabelWithTooltipMaybeRequired, UIFormProps } from "./InputLine.js";
import { useField } from "./useField.js";
import { useState } from "preact/hooks";
export function InputSelectOne(
export function InputSelectOne<T extends object, K extends keyof T>(
props: {
choices: Choice[];
} & UIFormProps<Array<string>>,
} & UIFormProps<T, K>,
): VNode {
const { name, label, choices, placeholder, tooltip, required } = props;
const { value, onChange } = useField<{ [s: string]: string | undefined }>(
name,
);
const { value, onChange } = useField<T, K>(name);
const [filter, setFilter] = useState<string | undefined>(undefined);
const regex = new RegExp(`.*${filter}.*`, "i");
@ -35,11 +33,11 @@ export function InputSelectOne(
/>
{value ? (
<span class="inline-flex items-center gap-x-0.5 rounded-md bg-gray-100 p-1 mr-2 font-medium text-gray-600">
{choiceMap[value]}
{choiceMap[value as string]}
<button
type="button"
onClick={() => {
onChange(undefined);
onChange(undefined!);
}}
class="group relative h-5 w-5 rounded-sm hover:bg-gray-500/20"
>
@ -103,7 +101,7 @@ export function InputSelectOne(
role="option"
onClick={() => {
setFilter(undefined);
onChange(v.value);
onChange(v.value as T[K]);
}}
// tabindex="-1"

4
packages/exchange-backoffice-ui/src/handlers/InputText.tsx
View File

@ -1,6 +1,8 @@
import { VNode, h } from "preact";
import { InputLine, UIFormProps } from "./InputLine.js";
export function InputText<T>(props: UIFormProps<T>): VNode {
export function InputText<T extends object, K extends keyof T>(
props: UIFormProps<T, K>,
): VNode {
return <InputLine type="text" {...props} />;
}

4
packages/exchange-backoffice-ui/src/handlers/InputTextArea.tsx
View File

@ -1,6 +1,8 @@
import { VNode, h } from "preact";
import { InputLine, UIFormProps } from "./InputLine.js";
export function InputTextArea(props: UIFormProps<string>): VNode {
export function InputTextArea<T extends object, K extends keyof T>(
props: UIFormProps<T, K>,
): VNode {
return <InputLine type="text-area" {...props} />;
}

32
packages/exchange-backoffice-ui/src/handlers/forms.ts
View File

@ -25,18 +25,18 @@ type DoubleColumnFormSection = {
/**
* Constrain the type with the ui props
*/
type FieldType = {
type FieldType<T extends object = any, K extends keyof T = any> = {
group: Parameters<typeof Group>[0];
caption: Parameters<typeof Caption>[0];
array: Parameters<typeof InputArray>[0];
file: Parameters<typeof InputFile>[0];
selectOne: Parameters<typeof InputSelectOne>[0];
selectMultiple: Parameters<typeof InputSelectMultiple>[0];
text: Parameters<typeof InputText>[0];
textArea: Parameters<typeof InputTextArea>[0];
choiceStacked: Parameters<typeof InputChoiceStacked>[0];
date: Parameters<typeof InputDate>[0];
integer: Parameters<typeof InputInteger>[0];
array: Parameters<typeof InputArray<T, K>>[0];
file: Parameters<typeof InputFile<T, K>>[0];
selectOne: Parameters<typeof InputSelectOne<T, K>>[0];
selectMultiple: Parameters<typeof InputSelectMultiple<T, K>>[0];
text: Parameters<typeof InputText<T, K>>[0];
textArea: Parameters<typeof InputTextArea<T, K>>[0];
choiceStacked: Parameters<typeof InputChoiceStacked<T, K>>[0];
date: Parameters<typeof InputDate<T, K>>[0];
integer: Parameters<typeof InputInteger<T, K>>[0];
};
/**
@ -69,14 +69,20 @@ type UIFormFieldMap = {
const UIFormConfiguration: UIFormFieldMap = {
group: Group,
caption: Caption,
//@ts-ignore
array: InputArray,
text: InputText,
//@ts-ignore
file: InputFile,
textArea: InputTextArea,
//@ts-ignore
date: InputDate,
//@ts-ignore
choiceStacked: InputChoiceStacked,
integer: InputInteger,
//@ts-ignore
selectOne: InputSelectOne,
//@ts-ignore
selectMultiple: InputSelectMultiple,
};
@ -97,11 +103,11 @@ export function RenderAllFieldsByUiConfig({
);
}
type FormSet<T> = {
type FormSet<T extends object, K extends keyof T = any> = {
Provider: typeof FormProvider<T>;
InputLine: typeof InputLine<T>;
InputLine: typeof InputLine<T, K>;
};
export function createNewForm<T>(): FormSet<T> {
export function createNewForm<T extends object>(): FormSet<T> {
return {
Provider: FormProvider,
InputLine: InputLine,

29
packages/exchange-backoffice-ui/src/handlers/useField.ts
View File

@ -12,7 +12,9 @@ export interface InputFieldHandler<Type> {
isDirty: boolean;
}
export function useField<T>(name: keyof T): InputFieldHandler<T[keyof T]> {
export function useField<T extends object, K extends keyof T>(
name: K,
): InputFieldHandler<T[K]> {
const {
initialValue,
value: formValue,
@ -78,3 +80,28 @@ function setValueDeeper(object: any, names: string[], value: any): any {
}
return { ...object, [head]: setValueDeeper(object[head] ?? {}, rest, value) };
}
type TTT<T extends object, K extends keyof T, R> = K extends keyof T
? R extends T[K]
? number
: never
: never;
function impl<T extends object, K extends keyof T, R extends T[K]>(
obj: T,
name: K,
): T[K] {
return obj[name];
}
interface Pepe {
name: string;
when: Date;
size: number;
}
const p: Pepe = {
name: "n",
when: new Date(),
size: 1,
};
const a = impl(p, "size");

6
packages/taler-wallet-webextension/src/wallet/History.stories.tsx
View File

@ -122,15 +122,11 @@ const exampleData = {
type: TransactionType.Refund,
refundedTransactionId:
"payment:1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0",
info: {
contractTermsHash: "ASDZXCASD",
paymentInfo: {
merchant: {
name: "the merchant",
},
orderId: "2021.167-03NPY6MCYMVGT",
products: [],
summary: "the summary",
fulfillmentMessage: "",
},
refundPending: undefined,
} as TransactionRefund,

9
packages/taler-wallet-webextension/src/wallet/Transaction.stories.tsx
View File

@ -148,15 +148,12 @@ const exampleData = {
type: TransactionType.Refund,
refundedTransactionId:
"payment:1EMJJH8EP1NX3XF7733NCYS2DBEJW4Q2KA5KEB37MCQJQ8Q5HMC0",
info: {
contractTermsHash: "ASDZXCASD",
paymentInfo: {
merchant: {
name: "the merchant",
name: "The merchant",
},
orderId: "2021.167-03NPY6MCYMVGT",
products: [],
summary: "Essay: Why the Devil's Advocate Doesn't Help Reach the Truth",
fulfillmentMessage: "",
summary_i18n: {},
},
refundPending: undefined,
} as TransactionRefund,

31
packages/taler-wallet-webextension/src/wallet/Transaction.tsx
View File

@ -823,30 +823,35 @@ export function TransactionView({
total={effective}
kind="positive"
>
{"transaction.info.summary"}
</Header>
<Part
title={i18n.str`Merchant`}
text={"transaction.info.merchant.name" as TranslatedString}
kind="neutral"
/>
<Part
title={i18n.str`Original order ID`}
text={
{transaction.paymentInfo ? (
<a
href={Pages.balanceTransaction({
tid: transaction.refundedTransactionId,
})}
>
{"transaction.info.orderId"}
{transaction.paymentInfo.summary}
</a>
) : (
<span style={{ color: "gray" }}>-- deleted --</span>
)}
</Header>
<Part
title={i18n.str`Merchant`}
text={
(transaction.paymentInfo
? transaction.paymentInfo.merchant.name
: "-- deleted --") as TranslatedString
}
kind="neutral"
/>
<Part
title={i18n.str`Purchase summary`}
text={"transaction.info.summary" as TranslatedString}
text={
(transaction.paymentInfo
? transaction.paymentInfo.summary
: "-- deleted --") as TranslatedString
}
kind="neutral"
/>
<Part

4
pnpm-lock.yaml
View File

@ -173,8 +173,6 @@ importers:
postcss: ^8.4.23
postcss-cli: ^10.1.0
preact: 10.11.3
preact-router: 3.2.1
qrcode-generator: ^1.4.4
swr: 2.0.3
tailwindcss: ^3.3.2
typescript: 4.9.4
@ -187,8 +185,6 @@ importers:
history: 4.10.1
jed: 1.1.1
preact: 10.11.3
preact-router: 3.2.1_preact@10.11.3
qrcode-generator: 1.4.4
swr: 2.0.3
devDependencies:
'@gnu-taler/pogen': link:../pogen