diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/mui')
14 files changed, 80 insertions, 80 deletions
diff --git a/packages/taler-wallet-webextension/src/mui/Avatar.tsx b/packages/taler-wallet-webextension/src/mui/Avatar.tsx index c1df00a13..3bd5daa95 100644 --- a/packages/taler-wallet-webextension/src/mui/Avatar.tsx +++ b/packages/taler-wallet-webextension/src/mui/Avatar.tsx @@ -18,21 +18,21 @@ const root = css` user-select: none; `; -const colorStyle = css` - color: ${theme.palette.background.default}; - background-color: ${theme.palette.mode === "light" - ? theme.palette.grey[400] - : theme.palette.grey[600]}; -`; +// const colorStyle = css` +// color: ${theme.palette.background.default}; +// background-color: ${theme.palette.mode === "light" +// ? theme.palette.grey[400] +// : theme.palette.grey[600]}; +// `; -const avatarImageStyle = css` - width: 100%; - height: 100%; - text-align: center; - object-fit: cover; - color: transparent; - text-indent: 10000; -`; +// const avatarImageStyle = css` +// width: 100%; +// height: 100%; +// text-align: center; +// object-fit: cover; +// color: transparent; +// text-indent: 10000; +// `; interface Props extends JSX.HTMLAttributes<HTMLDivElement> { variant?: "circular" | "rounded" | "square"; diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx index 145e1a159..4d3832ed4 100644 --- a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx @@ -20,7 +20,7 @@ */ import { Button } from "./Button.js"; -import { Fragment, h } from "preact"; +import { Fragment, h, VNode } from "preact"; import DeleteIcon from "../svg/delete_24px.svg"; import SendIcon from "../svg/send_24px.svg"; import { styled } from "@linaria/react"; @@ -35,7 +35,7 @@ const Stack = styled.div` flex-direction: column; `; -export const BasicExample = () => ( +export const BasicExample = (): VNode => ( <Fragment> <Stack> <Button size="small" variant="text"> @@ -67,7 +67,7 @@ export const BasicExample = () => ( </Fragment> ); -export const Others = () => ( +export const Others = (): VNode => ( <Fragment> <p>colors</p> <Stack> @@ -94,7 +94,7 @@ export const Others = () => ( </Fragment> ); -export const WithIcons = () => ( +export const WithIcons = (): VNode => ( <Fragment> <Stack> <Button variant="outlined" size="small" startIcon={DeleteIcon}> diff --git a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx index fc4f9a585..b2db178e7 100644 --- a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx @@ -20,14 +20,14 @@ */ import { Grid } from "./Grid.js"; -import { Fragment, h } from "preact"; +import { Fragment, h, VNode } from "preact"; export default { title: "mui/grid", component: Grid, }; -function Item({ children }: any) { +function Item({ children }: any): VNode { return ( <div style={{ @@ -42,7 +42,7 @@ function Item({ children }: any) { ); } -function Wrapper({ children }: any) { +function Wrapper({ children }: any): VNode { return ( <div style={{ @@ -60,7 +60,7 @@ function Wrapper({ children }: any) { ); } -export const BasicExample = () => ( +export const BasicExample = (): VNode => ( <Fragment> <Wrapper> <Grid container spacing={2}> @@ -97,7 +97,7 @@ export const BasicExample = () => ( </Fragment> ); -export const Responsive12ColumnsSize = () => ( +export const Responsive12ColumnsSize = (): VNode => ( <Fragment> <Wrapper> <p>Item size is responsive: xs=6 sm=4 md=2</p> @@ -122,7 +122,7 @@ export const Responsive12ColumnsSize = () => ( </Fragment> ); -export const Responsive12Spacing = () => ( +export const Responsive12Spacing = (): VNode => ( <Fragment> <Wrapper> <p>Item space is responsive: xs=1 sm=2 md=3</p> @@ -178,7 +178,7 @@ export const Responsive12Spacing = () => ( </Fragment> ); -export const ResponsiveAuthWidth = () => ( +export const ResponsiveAuthWidth = (): VNode => ( <Fragment> <Wrapper> <Grid container columns={12}> @@ -198,7 +198,7 @@ export const ResponsiveAuthWidth = () => ( </Wrapper> </Fragment> ); -export const Example = () => ( +export const Example = (): VNode => ( <Wrapper> <p>Item row space is responsive: xs=6 sm=4 md=1</p> <Grid container rowSpacing={3} columnSpacing={1} columns={12}> diff --git a/packages/taler-wallet-webextension/src/mui/Grid.tsx b/packages/taler-wallet-webextension/src/mui/Grid.tsx index 5d1b79b2a..d91368b13 100644 --- a/packages/taler-wallet-webextension/src/mui/Grid.tsx +++ b/packages/taler-wallet-webextension/src/mui/Grid.tsx @@ -64,7 +64,7 @@ export interface Props extends JSX.HTMLAttributes<HTMLDivElement> { } theme.breakpoints.up; -function getOffset(val: number | string) { +function getOffset(val: number | string): string | number { if (typeof val === "number") `${val}px`; return val; } @@ -324,7 +324,7 @@ function relation( cols: Partial<ResponsiveSize>, values: Partial<ResponsiveSize>, size: ResponsiveKeys, -) { +): string { const colsNum = typeof cols === "number" ? cols : cols[size] || 12; return ( String(Math.round(((values[size] || 1) / colsNum) * 10e7) / 10e5) + "%" diff --git a/packages/taler-wallet-webextension/src/mui/Paper.stories.tsx b/packages/taler-wallet-webextension/src/mui/Paper.stories.tsx index bc80bd500..e7030e781 100644 --- a/packages/taler-wallet-webextension/src/mui/Paper.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/Paper.stories.tsx @@ -19,16 +19,15 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { h, VNode } from "preact"; import { Paper } from "./Paper.js"; -import { createExample } from "../test-utils.js"; -import { h } from "preact"; export default { title: "mui/paper", component: Paper, }; -export const BasicExample = () => ( +export const BasicExample = (): VNode => ( <div style={{ display: "flex", @@ -54,7 +53,7 @@ export const BasicExample = () => ( </div> ); -export const Outlined = () => ( +export const Outlined = (): VNode => ( <div style={{ display: "flex", @@ -92,7 +91,7 @@ export const Outlined = () => ( </div> ); -export const Elevation = () => ( +export const Elevation = (): VNode => ( <div style={{ display: "flex", @@ -119,7 +118,7 @@ export const Elevation = () => ( </div> ); -export const ElevationDark = () => ( +export const ElevationDark = (): VNode => ( <div class="theme-dark" style={{ diff --git a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx index bc8505454..85550aabf 100644 --- a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx @@ -20,7 +20,7 @@ */ import { styled } from "@linaria/react"; -import { Fragment, h } from "preact"; +import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { TextField, Props } from "./TextField.js"; @@ -37,7 +37,7 @@ const Container = styled.div` } `; -const BasicExample = (variant: Props["variant"]) => { +const BasicExample = (variant: Props["variant"]): VNode => { const [value, onChange] = useState(""); return ( <Container> @@ -80,11 +80,11 @@ const BasicExample = (variant: Props["variant"]) => { ); }; -export const Standard = () => BasicExample("standard"); -export const Filled = () => BasicExample("filled"); -export const Outlined = () => BasicExample("outlined"); +export const Standard = (): VNode => BasicExample("standard"); +export const Filled = (): VNode => BasicExample("filled"); +export const Outlined = (): VNode => BasicExample("outlined"); -export const Color = () => ( +export const Color = (): VNode => ( <Container> <TextField variant="standard" diff --git a/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts b/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts index 55d0523b7..d1181b6d6 100644 --- a/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts +++ b/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts @@ -142,7 +142,7 @@ export function hslToRgb(color: string): string { const s = values[1] / 100; const l = values[2] / 100; const a = s * Math.min(l, 1 - l); - const f = (n: number, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); + const f = (n: number, k = (n + h / 30) % 12): number => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); if (colorObj.type === 'hsla') { return recomposeColor({ diff --git a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx index d4fa0368e..8860ce20d 100644 --- a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx @@ -1,5 +1,5 @@ import { css } from "@linaria/core"; -import { ComponentChildren, createContext, h } from "preact"; +import { ComponentChildren, createContext, h, VNode } from "preact"; import { useContext, useState } from "preact/hooks"; // eslint-disable-next-line import/extensions import { Colors } from "../style"; @@ -58,7 +58,7 @@ export function FormControl({ size = "medium", variant = "standard", children, -}: Partial<Props>) { +}: Partial<Props>): VNode { const [filled, setFilled] = useState(false); const [focusedState, setFocused] = useState(false); const focused = @@ -141,7 +141,7 @@ const defaultContextValue: FCCProps = { variant: "outlined", }; -function withoutUndefinedProperties(obj: any) { +function withoutUndefinedProperties(obj: any): any { return Object.keys(obj).reduce((acc, key) => { const _acc: any = acc; if (obj[key] !== undefined) _acc[key] = obj[key]; diff --git a/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx index da10eec11..eeb9e52c0 100644 --- a/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx @@ -1,5 +1,5 @@ import { css } from "@linaria/core"; -import { ComponentChildren, h } from "preact"; +import { ComponentChildren, h, VNode } from "preact"; // eslint-disable-next-line import/extensions import { theme } from "../style"; import { useFormControl } from "./FormControl.js"; @@ -35,7 +35,7 @@ interface Props { required?: boolean; children: ComponentChildren; } -export function FormHelperText({ children, ...props }: Props) { +export function FormHelperText({ children, ...props }: Props): VNode { const fcs = useFormControl(props); const contained = fcs.variant === "filled" || fcs.variant === "outlined"; return ( diff --git a/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx index fffef41db..3460aacde 100644 --- a/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx @@ -1,5 +1,5 @@ import { css } from "@linaria/core"; -import { ComponentChildren, h } from "preact"; +import { ComponentChildren, h, VNode } from "preact"; // eslint-disable-next-line import/extensions import { Colors, theme } from "../style"; import { useFormControl } from "./FormControl.js"; @@ -41,7 +41,7 @@ export function FormLabel({ class: _class, children, ...rest -}: Props) { +}: Props): VNode { const fcs = useFormControl({ disabled, error, diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx index 331d9ce95..a25366bd2 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx @@ -1,5 +1,5 @@ import { css } from "@linaria/core"; -import { h, JSX } from "preact"; +import { h, JSX, VNode } from "preact"; import { useLayoutEffect } from "preact/hooks"; // eslint-disable-next-line import/extensions import { theme } from "../style"; @@ -33,7 +33,7 @@ export function InputBaseRoot({ focused, fullWidth, children, -}: any) { +}: any): VNode { const fcs = useFormControl({}); return ( <div @@ -129,7 +129,7 @@ export function InputBaseComponent({ multiline, type, ...props -}: any) { +}: any): VNode { return ( <input disabled={disabled} @@ -160,7 +160,7 @@ export function InputBase({ value, onClick, ...props -}: any) { +}: any): VNode { const fcs = useFormControl(props); // const [focused, setFocused] = useState(false); useLayoutEffect(() => { @@ -171,7 +171,7 @@ export function InputBase({ } }, [value]); - const handleFocus = (event: JSX.TargetedFocusEvent<EventTarget>) => { + const handleFocus = (event: JSX.TargetedFocusEvent<EventTarget>): void => { // Fix a bug with IE11 where the focus/blur events are triggered // while the component is disabled. if (fcs.disabled) { @@ -189,7 +189,7 @@ export function InputBase({ fcs.onFocus(); }; - const handleBlur = () => { + const handleBlur = (): void => { // if (onBlur) { // onBlur(event); // } @@ -202,7 +202,7 @@ export function InputBase({ const handleChange = ( event: JSX.TargetedEvent<HTMLElement & { value?: string }>, - ) => { + ): void => { // if (inputPropsProp.onChange) { // inputPropsProp.onChange(event, ...args); // } @@ -215,7 +215,7 @@ export function InputBase({ const handleClick = ( event: JSX.TargetedMouseEvent<HTMLElement & { value?: string }>, - ) => { + ): void => { // if (inputRef.current && event.currentTarget === event.target) { // inputRef.current.focus(); // } @@ -254,6 +254,6 @@ export function InputBase({ ); } -export function TextareaAutoSize() { +export function TextareaAutoSize(): VNode { return <input onClick={(e) => null} />; } diff --git a/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx index 6d6aae4f3..4b51915e1 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx @@ -1,5 +1,5 @@ import { css } from "@linaria/core"; -import { ComponentChildren, h } from "preact"; +import { ComponentChildren, h, VNode } from "preact"; // eslint-disable-next-line import/extensions import { Colors, theme } from "../style"; import { useFormControl } from "./FormControl.js"; @@ -83,7 +83,7 @@ interface InputLabelProps { variant: "filled" | "outlined" | "standard"; children: ComponentChildren; } -export function InputLabel(props: Partial<InputLabelProps>) { +export function InputLabel(props: Partial<InputLabelProps>): VNode { const fcs = useFormControl(props); return ( <FormLabel diff --git a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx index 9d79a7019..3eacd7984 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx @@ -107,7 +107,7 @@ const underlineStyle = css` } `; -function Root({ disabled, focused, error, children }: any) { +function Root({ disabled, focused, error, children }: any): VNode { return ( <InputBaseRoot disabled={disabled} @@ -120,6 +120,6 @@ function Root({ disabled, focused, error, children }: any) { ); } -function Input(props: any) { +function Input(props: any): VNode { return <InputBaseComponent {...props} />; } diff --git a/packages/taler-wallet-webextension/src/mui/style.tsx b/packages/taler-wallet-webextension/src/mui/style.tsx index df4f5176c..5be978794 100644 --- a/packages/taler-wallet-webextension/src/mui/style.tsx +++ b/packages/taler-wallet-webextension/src/mui/style.tsx @@ -1,14 +1,15 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ import { css } from "@linaria/core"; import { darken, lighten } from "polished"; import { - common, - purple, - red, - orange, blue, - lightBlue, + common, green, grey, + lightBlue, + orange, + purple, + red, // eslint-disable-next-line import/extensions } from "./colors/constants"; // eslint-disable-next-line import/extensions @@ -430,20 +431,20 @@ function createTheme() { ///////////////////// ///////////////////// MIXINS ///////////////////// - function createMixins(breakpoints: any, spacing: any, mixins: any) { - return { - toolbar: { - minHeight: 56, - [`${breakpoints.up("xs")} and (orientation: landscape)`]: { - minHeight: 48, - }, - [breakpoints.up("sm")]: { - minHeight: 64, - }, - }, - ...mixins, - }; - } + // function createMixins(breakpoints: any, spacing: any, mixins: any) { + // return { + // toolbar: { + // minHeight: 56, + // [`${breakpoints.up("xs")} and (orientation: landscape)`]: { + // minHeight: 48, + // }, + // [breakpoints.up("sm")]: { + // minHeight: 64, + // }, + // }, + // ...mixins, + // }; + // } ///////////////////// ///////////////////// TRANSITION |