From e2651bdff2eac072ed2394f69e2cf59a8c53cdba Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 28 Mar 2022 23:41:07 -0300 Subject: add extension to every import --- .../taler-wallet-webextension/src/mui/Avatar.tsx | 1 + .../src/mui/Button.stories.tsx | 2 +- .../taler-wallet-webextension/src/mui/Button.tsx | 2 + .../src/mui/Grid.stories.tsx | 2 +- .../taler-wallet-webextension/src/mui/Grid.tsx | 1 + .../src/mui/Paper.stories.tsx | 4 +- .../taler-wallet-webextension/src/mui/Paper.tsx | 6 ++- .../src/mui/TextField.stories.tsx | 2 +- .../src/mui/TextField.tsx | 43 +++++++++++----------- .../src/mui/Typography.tsx | 3 +- .../src/mui/colors/manipulation.test.ts | 2 +- .../src/mui/colors/manipulation.ts | 8 ++-- .../src/mui/index.stories.tsx | 8 ++-- .../src/mui/input/FormControl.tsx | 13 ++++--- .../src/mui/input/FormHelperText.tsx | 3 +- .../src/mui/input/FormLabel.tsx | 3 +- .../src/mui/input/InputBase.tsx | 5 ++- .../src/mui/input/InputLabel.tsx | 5 ++- .../src/mui/input/InputStandard.tsx | 5 ++- .../taler-wallet-webextension/src/mui/style.tsx | 4 +- 20 files changed, 69 insertions(+), 53 deletions(-) (limited to 'packages/taler-wallet-webextension/src/mui') diff --git a/packages/taler-wallet-webextension/src/mui/Avatar.tsx b/packages/taler-wallet-webextension/src/mui/Avatar.tsx index 091964a63..c1df00a13 100644 --- a/packages/taler-wallet-webextension/src/mui/Avatar.tsx +++ b/packages/taler-wallet-webextension/src/mui/Avatar.tsx @@ -1,5 +1,6 @@ import { css } from "@linaria/core"; import { h, JSX, VNode, ComponentChildren } from "preact"; +// eslint-disable-next-line import/extensions import { theme } from "./style"; const root = css` diff --git a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx index 9750c6a94..145e1a159 100644 --- a/packages/taler-wallet-webextension/src/mui/Button.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/Button.stories.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { Button } from "./Button"; +import { Button } from "./Button.js"; import { Fragment, h } from "preact"; import DeleteIcon from "../svg/delete_24px.svg"; import SendIcon from "../svg/send_24px.svg"; diff --git a/packages/taler-wallet-webextension/src/mui/Button.tsx b/packages/taler-wallet-webextension/src/mui/Button.tsx index 8da5b86be..083bbea0d 100644 --- a/packages/taler-wallet-webextension/src/mui/Button.tsx +++ b/packages/taler-wallet-webextension/src/mui/Button.tsx @@ -1,6 +1,8 @@ import { ComponentChildren, h, VNode } from "preact"; import { css } from "@linaria/core"; +// eslint-disable-next-line import/extensions import { theme, ripple, Colors } from "./style"; +// eslint-disable-next-line import/extensions import { alpha } from "./colors/manipulation"; interface Props { diff --git a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx index 7db608d27..fc4f9a585 100644 --- a/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/Grid.stories.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { Grid } from "./Grid"; +import { Grid } from "./Grid.js"; import { Fragment, h } from "preact"; export default { diff --git a/packages/taler-wallet-webextension/src/mui/Grid.tsx b/packages/taler-wallet-webextension/src/mui/Grid.tsx index d05b91f18..5d1b79b2a 100644 --- a/packages/taler-wallet-webextension/src/mui/Grid.tsx +++ b/packages/taler-wallet-webextension/src/mui/Grid.tsx @@ -1,6 +1,7 @@ import { css } from "@linaria/core"; import { h, JSX, VNode, ComponentChildren, createContext } from "preact"; import { useContext } from "preact/hooks"; +// eslint-disable-next-line import/extensions import { theme } from "./style"; type ResponsiveKeys = "xs" | "sm" | "md" | "lg" | "xl"; diff --git a/packages/taler-wallet-webextension/src/mui/Paper.stories.tsx b/packages/taler-wallet-webextension/src/mui/Paper.stories.tsx index f263526f2..bc80bd500 100644 --- a/packages/taler-wallet-webextension/src/mui/Paper.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/Paper.stories.tsx @@ -19,8 +19,8 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { Paper } from "./Paper"; -import { createExample } from "../test-utils"; +import { Paper } from "./Paper.js"; +import { createExample } from "../test-utils.js"; import { h } from "preact"; export default { diff --git a/packages/taler-wallet-webextension/src/mui/Paper.tsx b/packages/taler-wallet-webextension/src/mui/Paper.tsx index 6209aa7a0..eeb4083d4 100644 --- a/packages/taler-wallet-webextension/src/mui/Paper.tsx +++ b/packages/taler-wallet-webextension/src/mui/Paper.tsx @@ -1,6 +1,8 @@ import { css } from "@linaria/core"; import { h, JSX, VNode, ComponentChildren } from "preact"; +// eslint-disable-next-line import/extensions import { alpha } from "./colors/manipulation"; +// eslint-disable-next-line import/extensions import { theme } from "./style"; const borderVariant = { @@ -56,7 +58,7 @@ export function Paper({ } // Inspired by https://github.com/material-components/material-components-ios/blob/bca36107405594d5b7b16265a5b0ed698f85a5ee/components/Elevation/src/UIColor%2BMaterialElevation.m#L61 -const getOverlayAlpha = (elevation: number): number => { +function getOverlayAlpha(elevation: number): number { let alphaValue; if (elevation < 1) { alphaValue = 5.11916 * elevation ** 2; @@ -64,4 +66,4 @@ const getOverlayAlpha = (elevation: number): number => { alphaValue = 4.5 * Math.log(elevation + 1) + 2; } return Number((alphaValue / 100).toFixed(2)); -}; +} diff --git a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx index a2f7e1e66..bc8505454 100644 --- a/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/TextField.stories.tsx @@ -22,7 +22,7 @@ import { styled } from "@linaria/react"; import { Fragment, h } from "preact"; import { useState } from "preact/hooks"; -import { TextField, Props } from "./TextField"; +import { TextField, Props } from "./TextField.js"; export default { title: "mui/TextField", diff --git a/packages/taler-wallet-webextension/src/mui/TextField.tsx b/packages/taler-wallet-webextension/src/mui/TextField.tsx index ada8d5d85..c79c21ced 100644 --- a/packages/taler-wallet-webextension/src/mui/TextField.tsx +++ b/packages/taler-wallet-webextension/src/mui/TextField.tsx @@ -1,13 +1,14 @@ import { ComponentChildren, h, VNode } from "preact"; -import { FormControl } from "./input/FormControl"; -import { FormHelperText } from "./input/FormHelperText"; -import { InputFilled } from "./input/InputFilled"; -import { InputLabel } from "./input/InputLabel"; -import { InputOutlined } from "./input/InputOutlined"; -import { InputStandard } from "./input/InputStandard"; -import { SelectFilled } from "./input/SelectFilled"; -import { SelectOutlined } from "./input/SelectOutlined"; -import { SelectStandard } from "./input/SelectStandard"; +import { FormControl } from "./input/FormControl.js"; +import { FormHelperText } from "./input/FormHelperText.js"; +import { InputFilled } from "./input/InputFilled.js"; +import { InputLabel } from "./input/InputLabel.js"; +import { InputOutlined } from "./input/InputOutlined.js"; +import { InputStandard } from "./input/InputStandard.js"; +import { SelectFilled } from "./input/SelectFilled.js"; +import { SelectOutlined } from "./input/SelectOutlined.js"; +import { SelectStandard } from "./input/SelectStandard.js"; +// eslint-disable-next-line import/extensions import { Colors } from "./style"; export interface Props { @@ -36,6 +37,18 @@ export interface Props { children?: ComponentChildren; } +const inputVariant = { + standard: InputStandard, + filled: InputFilled, + outlined: InputOutlined, +}; + +const selectVariant = { + standard: SelectStandard, + filled: SelectFilled, + outlined: SelectOutlined, +}; + export function TextField({ label, select, @@ -55,15 +68,3 @@ export function TextField({ ); } - -const inputVariant = { - standard: InputStandard, - filled: InputFilled, - outlined: InputOutlined, -}; - -const selectVariant = { - standard: SelectStandard, - filled: SelectFilled, - outlined: SelectOutlined, -}; diff --git a/packages/taler-wallet-webextension/src/mui/Typography.tsx b/packages/taler-wallet-webextension/src/mui/Typography.tsx index bfaddd7f8..ecd2b8ec3 100644 --- a/packages/taler-wallet-webextension/src/mui/Typography.tsx +++ b/packages/taler-wallet-webextension/src/mui/Typography.tsx @@ -1,5 +1,6 @@ import { css } from "@linaria/core"; -import { h, Fragment, VNode, ComponentChildren } from "preact"; +import { ComponentChildren, h, VNode } from "preact"; +// eslint-disable-next-line import/extensions import { theme } from "./style"; type VariantEnum = diff --git a/packages/taler-wallet-webextension/src/mui/colors/manipulation.test.ts b/packages/taler-wallet-webextension/src/mui/colors/manipulation.test.ts index 77b3ec884..192e9f402 100644 --- a/packages/taler-wallet-webextension/src/mui/colors/manipulation.test.ts +++ b/packages/taler-wallet-webextension/src/mui/colors/manipulation.test.ts @@ -11,7 +11,7 @@ import { getContrastRatio, getLuminance, lighten, -} from './manipulation'; +} from './manipulation.js'; describe('utils/colorManipulator', () => { describe('recomposeColor', () => { diff --git a/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts b/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts index 633c80c94..55d0523b7 100644 --- a/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts +++ b/packages/taler-wallet-webextension/src/mui/colors/manipulation.ts @@ -22,7 +22,7 @@ export interface ColorObjectWithoutAlpha { * @param {number} max The upper boundary of the output range * @returns {number} A number in the range [min, max] */ -function clamp(value: number, min: number = 0, max: number = 1): number { +function clamp(value: number, min = 0, max = 1): number { // if (process.env.NODE_ENV !== 'production') { // if (value < min || value > max) { // console.error(`MUI: The value provided ${value} is out of range [${min}, ${max}].`); @@ -76,8 +76,8 @@ export function decomposeColor(color: string): ColorObject { const marker = color.indexOf('('); const type = color.substring(0, marker); - if (type != 'rgba' && type != 'hsla' && type != 'rgb' && type != 'hsl') { - } + // if (type != 'rgba' && type != 'hsla' && type != 'rgb' && type != 'hsl') { + // } const values = color.substring(marker + 1, color.length - 1).split(',') if (type == 'rgb' || type == 'hsl') { @@ -268,6 +268,6 @@ export function lighten(color: string, coefficient: number): string { * @param {number} coefficient=0.15 - multiplier in the range 0 - 1 * @returns {string} A CSS color string. Hex input values are returned as rgb */ -export function emphasize(color: string, coefficient: number = 0.15): string { +export function emphasize(color: string, coefficient = 0.15): string { return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient); } diff --git a/packages/taler-wallet-webextension/src/mui/index.stories.tsx b/packages/taler-wallet-webextension/src/mui/index.stories.tsx index 7755c6f6a..302114ed5 100644 --- a/packages/taler-wallet-webextension/src/mui/index.stories.tsx +++ b/packages/taler-wallet-webextension/src/mui/index.stories.tsx @@ -19,9 +19,9 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import * as a1 from "./Button.stories"; -import * as a3 from "./Grid.stories"; -import * as a4 from "./Paper.stories"; -import * as a5 from "./TextField.stories"; +import * as a1 from "./Button.stories.js"; +import * as a3 from "./Grid.stories.js"; +import * as a4 from "./Paper.stories.js"; +import * as a5 from "./TextField.stories.js"; export default [a1, a3, a4, a5]; diff --git a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx index 7a8395705..d4fa0368e 100644 --- a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx @@ -1,6 +1,7 @@ import { css } from "@linaria/core"; import { ComponentChildren, createContext, h } from "preact"; import { useContext, useState } from "preact/hooks"; +// eslint-disable-next-line import/extensions import { Colors } from "../style"; export interface Props { @@ -43,6 +44,8 @@ const fullWidthStyle = css` width: 100%; `; +export const FormControlContext = createContext(null); + export function FormControl({ color = "primary", disabled = false, @@ -121,8 +124,6 @@ export interface FCCProps { variant: "filled" | "outlined" | "standard"; } -export const FormControlContext = createContext(null); - const defaultContextValue: FCCProps = { color: "primary", disabled: false, @@ -132,10 +133,10 @@ const defaultContextValue: FCCProps = { fullWidth: false, hiddenLabel: false, size: "medium", - onBlur: () => {}, - onEmpty: () => {}, - onFilled: () => {}, - onFocus: () => {}, + onBlur: () => null, + onEmpty: () => null, + onFilled: () => null, + onFocus: () => null, required: false, variant: "outlined", }; diff --git a/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx index 4854a6384..da10eec11 100644 --- a/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx @@ -1,7 +1,8 @@ import { css } from "@linaria/core"; import { ComponentChildren, h } from "preact"; +// eslint-disable-next-line import/extensions import { theme } from "../style"; -import { useFormControl } from "./FormControl"; +import { useFormControl } from "./FormControl.js"; const root = css` color: ${theme.palette.text.secondary}; diff --git a/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx index e5ca53263..fffef41db 100644 --- a/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx @@ -1,7 +1,8 @@ import { css } from "@linaria/core"; import { ComponentChildren, h } from "preact"; +// eslint-disable-next-line import/extensions import { Colors, theme } from "../style"; -import { useFormControl } from "./FormControl"; +import { useFormControl } from "./FormControl.js"; export interface Props { class?: string; diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx index 5714eb1ba..331d9ce95 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx @@ -1,8 +1,9 @@ import { css } from "@linaria/core"; import { h, JSX } from "preact"; -import { useEffect, useLayoutEffect, useState } from "preact/hooks"; +import { useLayoutEffect } from "preact/hooks"; +// eslint-disable-next-line import/extensions import { theme } from "../style"; -import { FormControlContext, useFormControl } from "./FormControl"; +import { FormControlContext, useFormControl } from "./FormControl.js"; const rootStyle = css` color: ${theme.palette.text.primary}; diff --git a/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx index c70c5bfc0..6d6aae4f3 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx @@ -1,8 +1,9 @@ import { css } from "@linaria/core"; import { ComponentChildren, h } from "preact"; +// eslint-disable-next-line import/extensions import { Colors, theme } from "../style"; -import { useFormControl } from "./FormControl"; -import { FormLabel } from "./FormLabel"; +import { useFormControl } from "./FormControl.js"; +import { FormLabel } from "./FormLabel.js"; const root = css` display: block; diff --git a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx index ba5145719..9d79a7019 100644 --- a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx +++ b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx @@ -1,8 +1,9 @@ import { css } from "@linaria/core"; import { h, VNode } from "preact"; +// eslint-disable-next-line import/extensions import { Colors, theme } from "../style"; -import { useFormControl } from "./FormControl"; -import { InputBase, InputBaseComponent, InputBaseRoot } from "./InputBase"; +import { useFormControl } from "./FormControl.js"; +import { InputBase, InputBaseComponent, InputBaseRoot } from "./InputBase.js"; export interface Props { autoComplete?: string; diff --git a/packages/taler-wallet-webextension/src/mui/style.tsx b/packages/taler-wallet-webextension/src/mui/style.tsx index 3fa3b7e33..df4f5176c 100644 --- a/packages/taler-wallet-webextension/src/mui/style.tsx +++ b/packages/taler-wallet-webextension/src/mui/style.tsx @@ -9,7 +9,9 @@ import { lightBlue, green, grey, + // eslint-disable-next-line import/extensions } from "./colors/constants"; +// eslint-disable-next-line import/extensions import { getContrastRatio } from "./colors/manipulation"; export type Colors = @@ -184,7 +186,7 @@ function createTheme() { return createUnaryUnit(theme, 8); } - function createSpacing(spacingInput: number = 8): Spacing { + function createSpacing(spacingInput = 8): Spacing { // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout. // Smaller components, such as icons, can align to a 4dp grid. // https://material.io/design/layout/understanding-layout.html#usage -- cgit v1.2.3