mui text field, standard variation

11 files changed, 782 insertions, 0 deletions

diff --git a/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx
new file mode 100644
index 000000000..7a8395705
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/FormControl.tsx
@@ -0,0 +1,156 @@
+import { css } from "@linaria/core";
+import { ComponentChildren, createContext, h } from "preact";
+import { useContext, useState } from "preact/hooks";
+import { Colors } from "../style";
+
+export interface Props {
+  color: Colors;
+  disabled: boolean;
+  error: boolean;
+  focused: boolean;
+  fullWidth: boolean;
+  hiddenLabel: boolean;
+  required: boolean;
+  variant: "filled" | "outlined" | "standard";
+  margin: "none" | "normal" | "dense";
+  size: "medium" | "small";
+  children: ComponentChildren;
+}
+
+export const root = css`
+  display: inline-flex;
+  flex-direction: column;
+  position: relative;
+  min-width: 0px;
+  padding: 0px;
+  margin: 0px;
+  border: 0px;
+  vertical-align: top;
+`;
+
+const marginVariant = {
+  none: "",
+  normal: css`
+    margin-top: 16px;
+    margin-bottom: 8px;
+  `,
+  dense: css`
+    margin-top: 8px;
+    margin-bottom: 4px;
+  `,
+};
+const fullWidthStyle = css`
+  width: 100%;
+`;
+
+export function FormControl({
+  color = "primary",
+  disabled = false,
+  error = false,
+  focused: visuallyFocused,
+  fullWidth = false,
+  hiddenLabel = false,
+  margin = "none",
+  required = false,
+  size = "medium",
+  variant = "standard",
+  children,
+}: Partial<Props>) {
+  const [filled, setFilled] = useState(false);
+  const [focusedState, setFocused] = useState(false);
+  const focused =
+    visuallyFocused !== undefined && !disabled ? visuallyFocused : focusedState;
+
+  const value: FCCProps = {
+    color,
+    disabled,
+    error,
+    filled,
+    focused,
+    fullWidth,
+    hiddenLabel,
+    size,
+    onBlur: () => {
+      setFocused(false);
+    },
+    onEmpty: () => {
+      setFilled(false);
+    },
+    onFilled: () => {
+      setFilled(true);
+    },
+    onFocus: () => {
+      setFocused(true);
+    },
+    required,
+    variant,
+  };
+
+  return (
+    <div
+      class={[
+        root,
+        marginVariant[margin],
+        fullWidth ? fullWidthStyle : "",
+      ].join(" ")}
+    >
+      <FormControlContext.Provider value={value}>
+        {children}
+      </FormControlContext.Provider>
+    </div>
+  );
+}
+
+export interface FCCProps {
+  // adornedStart,
+  // setAdornedStart,
+  color: Colors;
+  disabled: boolean;
+  error: boolean;
+  filled: boolean;
+  focused: boolean;
+  fullWidth: boolean;
+  hiddenLabel: boolean;
+  size: "medium" | "small";
+  onBlur: () => void;
+  onEmpty: () => void;
+  onFilled: () => void;
+  onFocus: () => void;
+  // registerEffect,
+  required: boolean;
+  variant: "filled" | "outlined" | "standard";
+}
+
+export const FormControlContext = createContext<FCCProps | null>(null);
+
+const defaultContextValue: FCCProps = {
+  color: "primary",
+  disabled: false,
+  error: false,
+  filled: false,
+  focused: false,
+  fullWidth: false,
+  hiddenLabel: false,
+  size: "medium",
+  onBlur: () => {},
+  onEmpty: () => {},
+  onFilled: () => {},
+  onFocus: () => {},
+  required: false,
+  variant: "outlined",
+};
+
+function withoutUndefinedProperties(obj: any) {
+  return Object.keys(obj).reduce((acc, key) => {
+    const _acc: any = acc;
+    if (obj[key] !== undefined) _acc[key] = obj[key];
+    return _acc;
+  }, {});
+}
+
+export function useFormControl(props: Partial<FCCProps> = {}): FCCProps {
+  const ctx = useContext(FormControlContext);
+  const cleanedProps = withoutUndefinedProperties(props);
+  if (!ctx) return { ...defaultContextValue, ...cleanedProps };
+  return { ...ctx, ...cleanedProps };
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx
new file mode 100644
index 000000000..4854a6384
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/FormHelperText.tsx
@@ -0,0 +1,54 @@
+import { css } from "@linaria/core";
+import { ComponentChildren, h } from "preact";
+import { theme } from "../style";
+import { useFormControl } from "./FormControl";
+
+const root = css`
+  color: ${theme.palette.text.secondary};
+  text-align: left;
+  margin-top: 3px;
+  margin-bottom: 0px;
+  margin-right: 0px;
+  margin-left: 0px;
+`;
+const disabledStyle = css`
+  color: ${theme.palette.text.disabled};
+`;
+const errorStyle = css`
+  color: ${theme.palette.error.main};
+`;
+const sizeSmallStyle = css`
+  margin-top: 4px;
+`;
+const containedStyle = css`
+  margin-right: 14px;
+  margin-left: 14px;
+`;
+
+interface Props {
+  disabled?: boolean;
+  error?: boolean;
+  filled?: boolean;
+  focused?: boolean;
+  margin?: "dense";
+  required?: boolean;
+  children: ComponentChildren;
+}
+export function FormHelperText({ children, ...props }: Props) {
+  const fcs = useFormControl(props);
+  const contained = fcs.variant === "filled" || fcs.variant === "outlined";
+  return (
+    <p
+      class={[
+        root,
+        theme.typography.caption,
+        fcs.disabled && disabledStyle,
+        fcs.error && errorStyle,
+        fcs.size === "small" && sizeSmallStyle,
+        contained && containedStyle,
+      ].join(" ")}
+    >
+      {children}
+    </p>
+  );
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx
new file mode 100644
index 000000000..e5ca53263
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/FormLabel.tsx
@@ -0,0 +1,67 @@
+import { css } from "@linaria/core";
+import { ComponentChildren, h } from "preact";
+import { Colors, theme } from "../style";
+import { useFormControl } from "./FormControl";
+
+export interface Props {
+  class?: string;
+  disabled?: boolean;
+  error?: boolean;
+  filled?: boolean;
+  focused?: boolean;
+  required?: boolean;
+  color?: Colors;
+  children?: ComponentChildren;
+}
+
+const root = css`
+  color: ${theme.palette.text.secondary};
+  line-height: 1.4375em;
+  padding: 0px;
+  position: relative;
+  &[data-focused] {
+    color: var(--color-main);
+  }
+  &[data-disabled] {
+    color: ${theme.palette.text.disabled};
+  }
+  &[data-error] {
+    color: ${theme.palette.error.main};
+  }
+`;
+
+export function FormLabel({
+  disabled,
+  error,
+  filled,
+  focused,
+  required,
+  color,
+  class: _class,
+  children,
+  ...rest
+}: Props) {
+  const fcs = useFormControl({
+    disabled,
+    error,
+    filled,
+    focused,
+    required,
+    color,
+  });
+  return (
+    <label
+      data-focused={fcs.focused}
+      data-error={fcs.error}
+      data-disabled={fcs.disabled}
+      class={[_class, root, theme.typography.body1].join(" ")}
+      {...rest}
+      style={{
+        "--color-main": theme.palette[fcs.color].main,
+      }}
+    >
+      {children}
+      {fcs.required && <span data-error={fcs.error}>&thinsp;{"*"}</span>}
+    </label>
+  );
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
new file mode 100644
index 000000000..5714eb1ba
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/InputBase.tsx
@@ -0,0 +1,258 @@
+import { css } from "@linaria/core";
+import { h, JSX } from "preact";
+import { useEffect, useLayoutEffect, useState } from "preact/hooks";
+import { theme } from "../style";
+import { FormControlContext, useFormControl } from "./FormControl";
+
+const rootStyle = css`
+  color: ${theme.palette.text.primary};
+  line-height: 1.4375em;
+  box-sizing: border-box;
+  position: relative;
+  cursor: text;
+  display: inline-flex;
+  align-items: center;
+`;
+const rootDisabledStyle = css`
+  color: ${theme.palette.text.disabled};
+  cursor: default;
+`;
+const rootMultilineStyle = css`
+  padding: 4px 0 5px;
+`;
+const fullWidthStyle = css`
+  width: "100%";
+`;
+
+export function InputBaseRoot({
+  class: _class,
+  disabled,
+  error,
+  multiline,
+  focused,
+  fullWidth,
+  children,
+}: any) {
+  const fcs = useFormControl({});
+  return (
+    <div
+      data-disabled={disabled}
+      data-focused={focused}
+      data-error={error}
+      class={[
+        _class,
+        rootStyle,
+        theme.typography.body1,
+        disabled && rootDisabledStyle,
+        multiline && rootMultilineStyle,
+        fullWidth && fullWidthStyle,
+      ].join(" ")}
+      style={{
+        "--color-main": theme.palette[fcs.color].main,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+const componentStyle = css`
+  font: inherit;
+  letter-spacing: inherit;
+  color: currentColor;
+  padding: 4px 0 5px;
+  border: 0px;
+  box-sizing: content-box;
+  background: none;
+  height: 1.4375em;
+  margin: 0px;
+  -webkit-tap-highlight-color: transparent;
+  display: block;
+  min-width: 0px;
+  width: 100%;
+  animation-name: "auto-fill-cancel";
+  animation-duration: 10ms;
+
+  @keyframes auto-fill {
+    from {
+      display: block;
+    }
+  }
+  @keyframes auto-fill-cancel {
+    from {
+      display: block;
+    }
+  }
+  &::placeholder {
+    color: "currentColor";
+    opacity: ${theme.palette.mode === "light" ? 0.42 : 0.5};
+    transition: ${theme.transitions.create("opacity", {
+      duration: theme.transitions.duration.shorter,
+    })};
+  }
+  &:focus {
+    outline: 0;
+  }
+  &:invalid {
+    box-shadow: none;
+  }
+  &::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  &:-webkit-autofill {
+    animation-duration: 5000s;
+    animation-name: auto-fill;
+  }
+`;
+const componentDisabledStyle = css`
+  opacity: 1;
+  --webkit-text-fill-color: ${theme.palette.text.disabled};
+`;
+const componentSmallStyle = css`
+  padding-top: 1px;
+`;
+const componentMultilineStyle = css`
+  height: auto;
+  resize: none;
+  padding: 0px;
+  padding-top: 0px;
+`;
+const searchStyle = css`
+  -moz-appearance: textfield;
+  -webkit-appearance: textfield;
+`;
+
+export function InputBaseComponent({
+  disabled,
+  size,
+  multiline,
+  type,
+  ...props
+}: any) {
+  return (
+    <input
+      disabled={disabled}
+      type={type}
+      class={[
+        componentStyle,
+        disabled && componentDisabledStyle,
+        size === "small" && componentSmallStyle,
+        multiline && componentMultilineStyle,
+        type === "search" && searchStyle,
+      ].join(" ")}
+      {...props}
+    />
+  );
+}
+
+export function InputBase({
+  Root = InputBaseRoot,
+  Input,
+  onChange,
+  name,
+  placeholder,
+  readOnly,
+  onKeyUp,
+  onKeyDown,
+  rows,
+  type = "text",
+  value,
+  onClick,
+  ...props
+}: any) {
+  const fcs = useFormControl(props);
+  // const [focused, setFocused] = useState(false);
+  useLayoutEffect(() => {
+    if (value && value !== "") {
+      fcs.onFilled();
+    } else {
+      fcs.onEmpty();
+    }
+  }, [value]);
+
+  const handleFocus = (event: JSX.TargetedFocusEvent<EventTarget>) => {
+    // Fix a bug with IE11 where the focus/blur events are triggered
+    // while the component is disabled.
+    if (fcs.disabled) {
+      event.stopPropagation();
+      return;
+    }
+
+    // if (onFocus) {
+    //   onFocus(event);
+    // }
+    // if (inputPropsProp.onFocus) {
+    //   inputPropsProp.onFocus(event);
+    // }
+
+    fcs.onFocus();
+  };
+
+  const handleBlur = () => {
+    // if (onBlur) {
+    //   onBlur(event);
+    // }
+    // if (inputPropsProp.onBlur) {
+    //   inputPropsProp.onBlur(event);
+    // }
+
+    fcs.onBlur();
+  };
+
+  const handleChange = (
+    event: JSX.TargetedEvent<HTMLElement & { value?: string }>,
+  ) => {
+    // if (inputPropsProp.onChange) {
+    //   inputPropsProp.onChange(event, ...args);
+    // }
+
+    // Perform in the willUpdate
+    if (onChange) {
+      onChange(event.currentTarget.value);
+    }
+  };
+
+  const handleClick = (
+    event: JSX.TargetedMouseEvent<HTMLElement & { value?: string }>,
+  ) => {
+    // if (inputRef.current && event.currentTarget === event.target) {
+    //   inputRef.current.focus();
+    // }
+
+    if (onClick) {
+      onClick(event.currentTarget.value);
+    }
+  };
+
+  if (!Input) {
+    Input = props.multiline ? TextareaAutoSize : InputBaseComponent;
+  }
+
+  return (
+    <Root {...fcs} onClick={handleClick}>
+      <FormControlContext.Provider value={null}>
+        <Input
+          aria-invalid={fcs.error}
+          // aria-describedby={}
+          disabled={fcs.disabled}
+          name={name}
+          placeholder={placeholder}
+          readOnly={readOnly}
+          required={fcs.required}
+          rows={rows}
+          value={value}
+          onKeyDown={onKeyDown}
+          onKeyUp={onKeyUp}
+          type={type}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          onFocus={handleFocus}
+        />
+      </FormControlContext.Provider>
+    </Root>
+  );
+}
+
+export function TextareaAutoSize() {
+  return <input onClick={(e) => null} />;
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
new file mode 100644
index 000000000..5c50a8b72
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/InputFilled.tsx
@@ -0,0 +1,5 @@
+import { h, VNode } from "preact";
+
+export function InputFilled(): VNode {
+  return <div />;
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx b/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx
new file mode 100644
index 000000000..c70c5bfc0
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/InputLabel.tsx
@@ -0,0 +1,98 @@
+import { css } from "@linaria/core";
+import { ComponentChildren, h } from "preact";
+import { Colors, theme } from "../style";
+import { useFormControl } from "./FormControl";
+import { FormLabel } from "./FormLabel";
+
+const root = css`
+  display: block;
+  transform-origin: top left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+
+  &[data-form-control] {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    transform: translate(0, 20px) scale(1);
+  }
+  &[data-size="small"] {
+    transform: translate(0, 17px) scale(1);
+  }
+  &[data-shrink] {
+    transform: translate(0, -1.5px) scale(0.75);
+    transform-origin: top left;
+    max-width: 133%;
+  }
+  &:not([data-disable-animation]) {
+    transition: ${theme.transitions.create(
+      ["color", "transform", "max-width"],
+      {
+        duration: theme.transitions.duration.shorter,
+        easing: theme.transitions.easing.easeOut,
+      },
+    )};
+  }
+  &[data-variant="filled"] {
+    z-index: 1;
+    pointer-events: none;
+    transform: translate(12px, 16px) scale(1);
+    max-width: calc(100% - 24px);
+    &[data-size="small"] {
+      transform: translate(12px, 13px) scale(1);
+    }
+    &[data-shrink] {
+      user-select: none;
+      pointer-events: auto;
+      transform: translate(12px, 7px) scale(0.75);
+      max-width: calc(133% - 24px);
+      &[data-size="small"] {
+        transform: translate(12px, 4px) scale(0.75);
+      }
+    }
+  }
+  &[data-variant="outlined"] {
+    z-index: 1;
+    pointer-events: none;
+    transform: translate(14px, 16px) scale(1);
+    max-width: calc(100% - 24px);
+    &[data-size="small"] {
+      transform: translate(14px, 9px) scale(1);
+    }
+    &[data-shrink] {
+      user-select: none;
+      pointer-events: auto;
+      transform: translate(14px, -9px) scale(0.75);
+      max-width: calc(133% - 24px);
+    }
+  }
+`;
+
+interface InputLabelProps {
+  color: Colors;
+  disableAnimation: boolean;
+  disabled: boolean;
+  error: boolean;
+  focused: boolean;
+  margin: boolean;
+  required: boolean;
+  shrink: boolean;
+  variant: "filled" | "outlined" | "standard";
+  children: ComponentChildren;
+}
+export function InputLabel(props: Partial<InputLabelProps>) {
+  const fcs = useFormControl(props);
+  return (
+    <FormLabel
+      data-form-control={!!fcs}
+      data-size={fcs.size}
+      data-shrink={props.shrink || fcs.filled || fcs.focused}
+      data-disable-animation={props.disableAnimation}
+      data-variant={fcs.variant}
+      class={root}
+      {...props}
+    />
+  );
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputOutlined.tsx b/packages/taler-wallet-webextension/src/mui/input/InputOutlined.tsx
new file mode 100644
index 000000000..3b40ffc70
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/InputOutlined.tsx
@@ -0,0 +1,5 @@
+import { h, VNode } from "preact";
+
+export function InputOutlined(): VNode {
+  return <div />;
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx
new file mode 100644
index 000000000..ba5145719
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/InputStandard.tsx
@@ -0,0 +1,124 @@
+import { css } from "@linaria/core";
+import { h, VNode } from "preact";
+import { Colors, theme } from "../style";
+import { useFormControl } from "./FormControl";
+import { InputBase, InputBaseComponent, InputBaseRoot } from "./InputBase";
+
+export interface Props {
+  autoComplete?: string;
+  autoFocus?: boolean;
+  color?: Colors;
+  defaultValue?: string;
+  disabled?: boolean;
+  disableUnderline?: boolean;
+  endAdornment?: VNode;
+  error?: boolean;
+  fullWidth?: boolean;
+  id?: string;
+  margin?: "dense" | "normal" | "none";
+  maxRows?: number;
+  minRows?: number;
+  multiline?: boolean;
+  name?: string;
+  onChange?: (s: string) => void;
+  placeholder?: string;
+  readOnly?: boolean;
+  required?: boolean;
+  rows?: number;
+  startAdornment?: VNode;
+  type?: string;
+  value?: string;
+}
+export function InputStandard({
+  type = "text",
+  multiline,
+  ...props
+}: Props): VNode {
+  const fcs = useFormControl(props);
+  return (
+    <InputBase
+      Root={Root}
+      Input={Input}
+      fullWidth={fcs.fullWidth}
+      multiline={multiline}
+      type={type}
+      {...props}
+    />
+  );
+}
+
+const rootStyle = css`
+  position: relative;
+`;
+const formControlStyle = css`
+  label + & {
+    margin-top: 16px;
+  }
+`;
+const underlineStyle = css`
+  &:after {
+    border-bottom: 2px solid var(--color-main);
+    left: 0px;
+    bottom: 0px;
+    content: "";
+    position: absolute;
+    right: 0px;
+    transform: scaleX(0);
+    transition: ${theme.transitions.create("transform", {
+      duration: theme.transitions.duration.shorter,
+      easing: theme.transitions.easing.easeOut,
+    })};
+    pointer-events: none;
+  }
+  &[data-focused]:after {
+    transform: scaleX(1);
+  }
+  &[data-error]:after {
+    border-bottom-color: ${theme.palette.error.main};
+    transform: scaleY(1);
+  }
+  &:before {
+    border-bottom: 1px solid
+      ${theme.palette.mode === "light"
+        ? "rgba(0, 0, 0, 0.42)"
+        : "rgba(255, 255, 255, 0.7)"};
+    left: 0px;
+    bottom: 0px;
+    right: 0px;
+    content: "\\00a0";
+    position: absolute;
+    transition: ${theme.transitions.create("border-bottom-color", {
+      duration: theme.transitions.duration.shorter,
+    })};
+    pointer-events: none;
+  }
+  &:hover:not([data-disabled]:before) {
+    border-bottom: 2px solid var(--color-main);
+    @media (hover: none) {
+      border-bottom: 1px solid
+        ${theme.palette.mode === "light"
+          ? "rgba(0, 0, 0, 0.42)"
+          : "rgba(255, 255, 255, 0.7)"};
+    }
+  }
+  &[data-disabled]:before {
+    border-bottom-style: solid;
+  }
+`;
+
+function Root({ disabled, focused, error, children }: any) {
+  return (
+    <InputBaseRoot
+      disabled={disabled}
+      focused={focused}
+      error={error}
+      class={[rootStyle, formControlStyle, underlineStyle].join(" ")}
+    >
+      {children}
+    </InputBaseRoot>
+  );
+}
+
+function Input(props: any) {
+  return <InputBaseComponent {...props} />;
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/SelectFilled.tsx b/packages/taler-wallet-webextension/src/mui/input/SelectFilled.tsx
new file mode 100644
index 000000000..28b1859f8
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/SelectFilled.tsx
@@ -0,0 +1,5 @@
+import { h, VNode } from "preact";
+
+export function SelectFilled(): VNode {
+  return <div />;
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/SelectOutlined.tsx b/packages/taler-wallet-webextension/src/mui/input/SelectOutlined.tsx
new file mode 100644
index 000000000..10ee4015c
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/SelectOutlined.tsx
@@ -0,0 +1,5 @@
+import { h, VNode } from "preact";
+
+export function SelectOutlined(): VNode {
+  return <div />;
+}
diff --git a/packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx b/packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx
new file mode 100644
index 000000000..72cb635df
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/mui/input/SelectStandard.tsx
@@ -0,0 +1,5 @@
+import { h, VNode } from "preact";
+
+export function SelectStandard(): VNode {
+  return <div />;
+}