add extension to every import

20 files changed, 69 insertions, 53 deletions

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({
     </FormControl>
   );
 }
-
-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<FCCProps | null>(null);
+
 export function FormControl({
   color = "primary",
   disabled = false,
@@ -121,8 +124,6 @@ export interface FCCProps {
   variant: "filled" | "outlined" | "standard";
 }
 
-export const FormControlContext = createContext<FCCProps | null>(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