From b4bad2deaf93eff5858d903cd68b8fdd5a5eecd3 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 26 Oct 2022 14:50:50 -0300 Subject: pretty --- .../demobank-ui/src/components/AsyncButton.tsx | 16 ++- packages/demobank-ui/src/components/FileButton.tsx | 13 ++- .../demobank-ui/src/components/Notifications.tsx | 24 ++--- packages/demobank-ui/src/components/QR.tsx | 18 ++-- .../src/components/fields/DateInput.tsx | 22 ++--- .../src/components/fields/EmailInput.tsx | 16 ++- .../src/components/fields/FileInput.tsx | 29 +++--- .../src/components/fields/ImageInput.tsx | 21 ++-- .../src/components/fields/NumberInput.tsx | 16 ++- .../src/components/fields/TextInput.tsx | 22 ++--- .../src/components/menu/LangSelector.tsx | 63 ++++++------ .../src/components/menu/NavigationBar.tsx | 6 +- .../demobank-ui/src/components/menu/SideBar.tsx | 8 +- packages/demobank-ui/src/components/menu/index.tsx | 24 ++--- .../src/components/picker/DatePicker.tsx | 107 ++++++++++----------- .../components/picker/DurationPicker.stories.tsx | 12 +-- .../src/components/picker/DurationPicker.tsx | 27 +++--- 17 files changed, 206 insertions(+), 238 deletions(-) (limited to 'packages/demobank-ui/src/components') diff --git a/packages/demobank-ui/src/components/AsyncButton.tsx b/packages/demobank-ui/src/components/AsyncButton.tsx index 0c4305668..eec11f4a1 100644 --- a/packages/demobank-ui/src/components/AsyncButton.tsx +++ b/packages/demobank-ui/src/components/AsyncButton.tsx @@ -19,10 +19,10 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { ComponentChildren, h, VNode } from 'preact'; -import { useLayoutEffect, useRef } from 'preact/hooks'; +import { ComponentChildren, h, VNode } from "preact"; +import { useLayoutEffect, useRef } from "preact/hooks"; // import { LoadingModal } from "../modal"; -import { useAsync } from '../hooks/async'; +import { useAsync } from "../hooks/async"; // import { Translate } from "../../i18n"; type Props = { @@ -44,20 +44,16 @@ export function AsyncButton({ const buttonRef = useRef(null); useLayoutEffect(() => { - if (grabFocus) - buttonRef.current?.focus(); - + if (grabFocus) buttonRef.current?.focus(); }, [grabFocus]); // if (isSlow) { // return ; // } - if (isLoading) - return ; - + if (isLoading) return ; return ( - + diff --git a/packages/demobank-ui/src/components/FileButton.tsx b/packages/demobank-ui/src/components/FileButton.tsx index dba86ccbf..7fad7f03a 100644 --- a/packages/demobank-ui/src/components/FileButton.tsx +++ b/packages/demobank-ui/src/components/FileButton.tsx @@ -1,5 +1,5 @@ -import { h, VNode } from 'preact'; -import { useRef, useState } from 'preact/hooks'; +import { h, VNode } from "preact"; +import { useRef, useState } from "preact/hooks"; const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024; @@ -23,13 +23,12 @@ export function FileButton(props: Props): VNode { { const f: FileList | null = e.currentTarget.files; - if (!f || f.length != 1) - return props.onChange(undefined); - + if (!f || f.length != 1) return props.onChange(undefined); + console.log(f); if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) { setSizeError(true); @@ -39,7 +38,7 @@ export function FileButton(props: Props): VNode { return f[0].arrayBuffer().then((b) => { const content = new Uint8Array(b).reduce( (data, byte) => data + String.fromCharCode(byte), - '', + "", ); return props.onChange({ content, diff --git a/packages/demobank-ui/src/components/Notifications.tsx b/packages/demobank-ui/src/components/Notifications.tsx index 09329442a..e34550386 100644 --- a/packages/demobank-ui/src/components/Notifications.tsx +++ b/packages/demobank-ui/src/components/Notifications.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode } from 'preact'; +import { h, VNode } from "preact"; export interface Notification { message: string; @@ -27,7 +27,7 @@ export interface Notification { type: MessageType; } -export type MessageType = 'INFO' | 'WARN' | 'ERROR' | 'SUCCESS'; +export type MessageType = "INFO" | "WARN" | "ERROR" | "SUCCESS"; interface Props { notifications: Notification[]; @@ -36,16 +36,16 @@ interface Props { function messageStyle(type: MessageType): string { switch (type) { - case 'INFO': - return 'message is-info'; - case 'WARN': - return 'message is-warning'; - case 'ERROR': - return 'message is-danger'; - case 'SUCCESS': - return 'message is-success'; - default: - return 'message'; + case "INFO": + return "message is-info"; + case "WARN": + return "message is-warning"; + case "ERROR": + return "message is-danger"; + case "SUCCESS": + return "message is-success"; + default: + return "message"; } } diff --git a/packages/demobank-ui/src/components/QR.tsx b/packages/demobank-ui/src/components/QR.tsx index ee5b73c69..f154ddebe 100644 --- a/packages/demobank-ui/src/components/QR.tsx +++ b/packages/demobank-ui/src/components/QR.tsx @@ -14,14 +14,14 @@ GNU Taler; see the file COPYING. If not, see */ -import { h, VNode } from 'preact'; -import { useEffect, useRef } from 'preact/hooks'; -import qrcode from 'qrcode-generator'; +import { h, VNode } from "preact"; +import { useEffect, useRef } from "preact/hooks"; +import qrcode from "qrcode-generator"; export function QR({ text }: { text: string }): VNode { const divRef = useRef(null); useEffect(() => { - const qr = qrcode(0, 'L'); + const qr = qrcode(0, "L"); qr.addData(text); qr.make(); if (divRef.current) @@ -33,14 +33,14 @@ export function QR({ text }: { text: string }): VNode { return (
diff --git a/packages/demobank-ui/src/components/fields/DateInput.tsx b/packages/demobank-ui/src/components/fields/DateInput.tsx index 06ec4b6a7..22a83c93c 100644 --- a/packages/demobank-ui/src/components/fields/DateInput.tsx +++ b/packages/demobank-ui/src/components/fields/DateInput.tsx @@ -1,7 +1,7 @@ -import { format, subYears } from 'date-fns'; -import { h, VNode } from 'preact'; -import { useLayoutEffect, useRef, useState } from 'preact/hooks'; -import { DatePicker } from '../picker/DatePicker'; +import { format, subYears } from "date-fns"; +import { h, VNode } from "preact"; +import { useLayoutEffect, useRef, useState } from "preact/hooks"; +import { DatePicker } from "../picker/DatePicker"; export interface DateInputProps { label: string; @@ -16,13 +16,11 @@ export interface DateInputProps { export function DateInput(props: DateInputProps): VNode { const inputRef = useRef(null); useLayoutEffect(() => { - if (props.grabFocus) - inputRef.current?.focus(); - + if (props.grabFocus) inputRef.current?.focus(); }, [props.grabFocus]); const [opened, setOpened] = useState(false); - const value = props.bind[0] || ''; + const value = props.bind[0] || ""; const [dirty, setDirty] = useState(false); const showError = dirty && props.error; @@ -43,12 +41,10 @@ export function DateInput(props: DateInputProps): VNode {

{ - if (e.key === 'Enter' && props.onConfirm) - props.onConfirm() - + if (e.key === "Enter" && props.onConfirm) props.onConfirm(); }} onInput={(e) => { const text = e.currentTarget.value; @@ -81,7 +77,7 @@ export function DateInput(props: DateInputProps): VNode { closeFunction={() => setOpened(false)} dateReceiver={(d) => { setDirty(true); - const v = format(d, 'yyyy-MM-dd'); + const v = format(d, "yyyy-MM-dd"); props.bind[1](v); }} /> diff --git a/packages/demobank-ui/src/components/fields/EmailInput.tsx b/packages/demobank-ui/src/components/fields/EmailInput.tsx index 8b64264ed..2a22b26e8 100644 --- a/packages/demobank-ui/src/components/fields/EmailInput.tsx +++ b/packages/demobank-ui/src/components/fields/EmailInput.tsx @@ -1,5 +1,5 @@ -import { h, VNode } from 'preact'; -import { useLayoutEffect, useRef, useState } from 'preact/hooks'; +import { h, VNode } from "preact"; +import { useLayoutEffect, useRef, useState } from "preact/hooks"; export interface TextInputProps { label: string; @@ -14,9 +14,7 @@ export interface TextInputProps { export function EmailInput(props: TextInputProps): VNode { const inputRef = useRef(null); useLayoutEffect(() => { - if (props.grabFocus) - inputRef.current?.focus(); - + if (props.grabFocus) inputRef.current?.focus(); }, [props.grabFocus]); const value = props.bind[0]; const [dirty, setDirty] = useState(false); @@ -37,18 +35,16 @@ export function EmailInput(props: TextInputProps): VNode { required placeholder={props.placeholder} type="email" - class={showError ? 'input is-danger' : 'input'} + class={showError ? "input is-danger" : "input"} onKeyPress={(e) => { - if (e.key === 'Enter' && props.onConfirm) - props.onConfirm() - + if (e.key === "Enter" && props.onConfirm) props.onConfirm(); }} onInput={(e) => { setDirty(true); props.bind[1]((e.target as HTMLInputElement).value); }} ref={inputRef} - style={{ display: 'block' }} + style={{ display: "block" }} />

{showError &&

{props.error}

} diff --git a/packages/demobank-ui/src/components/fields/FileInput.tsx b/packages/demobank-ui/src/components/fields/FileInput.tsx index 17413b907..79cd76f30 100644 --- a/packages/demobank-ui/src/components/fields/FileInput.tsx +++ b/packages/demobank-ui/src/components/fields/FileInput.tsx @@ -18,8 +18,8 @@ * * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode } from 'preact'; -import { useLayoutEffect, useRef, useState } from 'preact/hooks'; +import { h, VNode } from "preact"; +import { useLayoutEffect, useRef, useState } from "preact/hooks"; const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024; @@ -42,9 +42,7 @@ export interface FileInputProps { export function FileInput(props: FileInputProps): VNode { const inputRef = useRef(null); useLayoutEffect(() => { - if (props.grabFocus) - inputRef.current?.focus(); - + if (props.grabFocus) inputRef.current?.focus(); }, [props.grabFocus]); const fileInputRef = useRef(null); @@ -56,9 +54,7 @@ export function FileInput(props: FileInputProps): VNode {
- - {props.label} - + {props.label} {props.tooltip && ( @@ -69,15 +65,14 @@ export function FileInput(props: FileInputProps): VNode {
{ const f: FileList | null = e.currentTarget.files; - if (!f || f.length != 1) - return props.onChange(undefined); - - console.log(f) + if (!f || f.length != 1) return props.onChange(undefined); + + console.log(f); if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) { setSizeError(true); return props.onChange(undefined); @@ -87,10 +82,14 @@ export function FileInput(props: FileInputProps): VNode { const b64 = btoa( new Uint8Array(b).reduce( (data, byte) => data + String.fromCharCode(byte), - '', + "", ), ); - return props.onChange({content: `data:${f[0].type};base64,${b64}`, name: f[0].name, type: f[0].type}); + return props.onChange({ + content: `data:${f[0].type};base64,${b64}`, + name: f[0].name, + type: f[0].type, + }); }); }} /> diff --git a/packages/demobank-ui/src/components/fields/ImageInput.tsx b/packages/demobank-ui/src/components/fields/ImageInput.tsx index 98457af21..c190de9a9 100644 --- a/packages/demobank-ui/src/components/fields/ImageInput.tsx +++ b/packages/demobank-ui/src/components/fields/ImageInput.tsx @@ -18,19 +18,17 @@ * * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode } from 'preact'; -import { useLayoutEffect, useRef, useState } from 'preact/hooks'; -import emptyImage from '../../assets/empty.png'; -import { TextInputProps } from './TextInput'; +import { h, VNode } from "preact"; +import { useLayoutEffect, useRef, useState } from "preact/hooks"; +import emptyImage from "../../assets/empty.png"; +import { TextInputProps } from "./TextInput"; const MAX_IMAGE_UPLOAD_SIZE = 1024 * 1024; export function ImageInput(props: TextInputProps): VNode { const inputRef = useRef(null); useLayoutEffect(() => { - if (props.grabFocus) - inputRef.current?.focus(); - + if (props.grabFocus) inputRef.current?.focus(); }, [props.grabFocus]); const value = props.bind[0]; @@ -59,14 +57,13 @@ export function ImageInput(props: TextInputProps): VNode { /> { const f: FileList | null = e.currentTarget.files; - if (!f || f.length != 1) - return onChange(emptyImage); - + if (!f || f.length != 1) return onChange(emptyImage); + if (f[0].size > MAX_IMAGE_UPLOAD_SIZE) { setSizeError(true); return onChange(emptyImage); @@ -76,7 +73,7 @@ export function ImageInput(props: TextInputProps): VNode { const b64 = btoa( new Uint8Array(b).reduce( (data, byte) => data + String.fromCharCode(byte), - '', + "", ), ); return onChange(`data:${f[0].type};base64,${b64}` as any); diff --git a/packages/demobank-ui/src/components/fields/NumberInput.tsx b/packages/demobank-ui/src/components/fields/NumberInput.tsx index 881c61c57..1a54d24b6 100644 --- a/packages/demobank-ui/src/components/fields/NumberInput.tsx +++ b/packages/demobank-ui/src/components/fields/NumberInput.tsx @@ -1,5 +1,5 @@ -import { h, VNode } from 'preact'; -import { useLayoutEffect, useRef, useState } from 'preact/hooks'; +import { h, VNode } from "preact"; +import { useLayoutEffect, useRef, useState } from "preact/hooks"; export interface TextInputProps { label: string; @@ -14,9 +14,7 @@ export interface TextInputProps { export function PhoneNumberInput(props: TextInputProps): VNode { const inputRef = useRef(null); useLayoutEffect(() => { - if (props.grabFocus) - inputRef.current?.focus(); - + if (props.grabFocus) inputRef.current?.focus(); }, [props.grabFocus]); const value = props.bind[0]; const [dirty, setDirty] = useState(false); @@ -36,18 +34,16 @@ export function PhoneNumberInput(props: TextInputProps): VNode { value={value} type="tel" placeholder={props.placeholder} - class={showError ? 'input is-danger' : 'input'} + class={showError ? "input is-danger" : "input"} onKeyPress={(e) => { - if (e.key === 'Enter' && props.onConfirm) - props.onConfirm() - + if (e.key === "Enter" && props.onConfirm) props.onConfirm(); }} onInput={(e) => { setDirty(true); props.bind[1]((e.target as HTMLInputElement).value); }} ref={inputRef} - style={{ display: 'block' }} + style={{ display: "block" }} />
{showError &&

{props.error}

} diff --git a/packages/demobank-ui/src/components/fields/TextInput.tsx b/packages/demobank-ui/src/components/fields/TextInput.tsx index 5cc9f32ad..cc7104cf5 100644 --- a/packages/demobank-ui/src/components/fields/TextInput.tsx +++ b/packages/demobank-ui/src/components/fields/TextInput.tsx @@ -1,8 +1,8 @@ -import { h, VNode } from 'preact'; -import { useLayoutEffect, useRef, useState } from 'preact/hooks'; +import { h, VNode } from "preact"; +import { useLayoutEffect, useRef, useState } from "preact/hooks"; export interface TextInputProps { - inputType?: 'text' | 'number' | 'multiline' | 'password'; + inputType?: "text" | "number" | "multiline" | "password"; label: string; grabFocus?: boolean; disabled?: boolean; @@ -16,13 +16,11 @@ export interface TextInputProps { const TextInputType = function ({ inputType, grabFocus, ...rest }: any): VNode { const inputRef = useRef(null); useLayoutEffect(() => { - if (grabFocus) - inputRef.current?.focus(); - + if (grabFocus) inputRef.current?.focus(); }, [grabFocus]); - return inputType === 'multiline' ? ( -