refactor: format and lint codebase (#971)

app/assets/javascripts/Components/Input/DecoratedInput.tsx

@@ -0,0 +1,75 @@
+import { FunctionalComponent, Ref } from 'preact'
+import { forwardRef } from 'preact/compat'
+import { DecoratedInputProps } from './DecoratedInputProps'
+
+const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean) => {
+  return {
+    container: `flex items-stretch position-relative bg-default border-1 border-solid border-main rounded focus-within:ring-info overflow-hidden ${
+      !hasLeftDecorations && !hasRightDecorations ? 'px-2 py-1.5' : ''
+    }`,
+    input: `w-full border-0 focus:shadow-none bg-transparent color-text ${
+      !hasLeftDecorations && hasRightDecorations ? 'pl-2' : ''
+    } ${hasRightDecorations ? 'pr-2' : ''}`,
+    disabled: 'bg-grey-5 cursor-not-allowed',
+  }
+}
+
+/**
+ * Input that can be decorated on the left and right side
+ */
+export const DecoratedInput: FunctionalComponent<DecoratedInputProps> = forwardRef(
+  (
+    {
+      type = 'text',
+      className = '',
+      disabled = false,
+      left,
+      right,
+      value,
+      placeholder = '',
+      onChange,
+      onFocus,
+      onKeyDown,
+      autocomplete = false,
+    }: DecoratedInputProps,
+    ref: Ref<HTMLInputElement>,
+  ) => {
+    const hasLeftDecorations = Boolean(left?.length)
+    const hasRightDecorations = Boolean(right?.length)
+    const classNames = getClassNames(hasLeftDecorations, hasRightDecorations)
+
+    return (
+      <div
+        className={`${classNames.container} ${disabled ? classNames.disabled : ''} ${className}`}
+      >
+        {left && (
+          <div className="flex items-center px-2 py-1.5">
+            {left.map((leftChild) => (
+              <>{leftChild}</>
+            ))}
+          </div>
+        )}
+        <input
+          type={type}
+          className={`${classNames.input} ${disabled ? classNames.disabled : ''}`}
+          disabled={disabled}
+          value={value}
+          placeholder={placeholder}
+          onChange={(e) => onChange && onChange((e.target as HTMLInputElement).value)}
+          onFocus={onFocus}
+          onKeyDown={onKeyDown}
+          data-lpignore={type !== 'password' ? true : false}
+          autocomplete={autocomplete ? 'on' : 'off'}
+          ref={ref}
+        />
+        {right && (
+          <div className="flex items-center px-2 py-1.5">
+            {right.map((rightChild, index) => (
+              <div className={index > 0 ? 'ml-3' : ''}>{rightChild}</div>
+            ))}
+          </div>
+        )}
+      </div>
+    )
+  },
+)

app/assets/javascripts/Components/Input/DecoratedInputProps.ts

@@ -0,0 +1,15 @@
+import { ComponentChild } from 'preact'
+
+export type DecoratedInputProps = {
+  type?: 'text' | 'email' | 'password'
+  className?: string
+  disabled?: boolean
+  left?: ComponentChild[]
+  right?: ComponentChild[]
+  value?: string
+  placeholder?: string
+  onChange?: (text: string) => void
+  onFocus?: (event: FocusEvent) => void
+  onKeyDown?: (event: KeyboardEvent) => void
+  autocomplete?: boolean
+}

app/assets/javascripts/Components/Input/DecoratedPasswordInput.tsx

@@ -0,0 +1,42 @@
+import { FunctionComponent, Ref } from 'preact'
+import { forwardRef } from 'preact/compat'
+import { StateUpdater, useState } from 'preact/hooks'
+import { DecoratedInput } from './DecoratedInput'
+import { IconButton } from '@/Components/Button/IconButton'
+import { DecoratedInputProps } from './DecoratedInputProps'
+
+const Toggle: FunctionComponent<{
+  isToggled: boolean
+  setIsToggled: StateUpdater<boolean>
+}> = ({ isToggled, setIsToggled }) => (
+  <IconButton
+    className="w-5 h-5 justify-center sk-circle hover:bg-grey-4 color-neutral"
+    icon={isToggled ? 'eye-off' : 'eye'}
+    iconClassName="sn-icon--small"
+    title="Show/hide password"
+    onClick={() => setIsToggled((isToggled) => !isToggled)}
+    focusable={true}
+  />
+)
+
+/**
+ * Password input that has a toggle to show/hide password and can be decorated on the left and right side
+ */
+export const DecoratedPasswordInput: FunctionComponent<Omit<DecoratedInputProps, 'type'>> =
+  forwardRef((props, ref: Ref<HTMLInputElement>) => {
+    const [isToggled, setIsToggled] = useState(false)
+
+    const rightSideDecorations = props.right ? [...props.right] : []
+
+    return (
+      <DecoratedInput
+        {...props}
+        ref={ref}
+        type={isToggled ? 'text' : 'password'}
+        right={[
+          ...rightSideDecorations,
+          <Toggle isToggled={isToggled} setIsToggled={setIsToggled} />,
+        ]}
+      />
+    )
+  })

app/assets/javascripts/Components/Input/FloatingLabelInput.tsx

@@ -0,0 +1,73 @@
+import { FunctionComponent, Ref } from 'preact'
+import { JSXInternal } from 'preact/src/jsx'
+import { forwardRef } from 'preact/compat'
+import { useState } from 'preact/hooks'
+
+type Props = {
+  id: string
+  type: 'text' | 'email' | 'password'
+  label: string
+  value: string
+  onChange: JSXInternal.GenericEventHandler<HTMLInputElement>
+  disabled?: boolean
+  className?: string
+  labelClassName?: string
+  inputClassName?: string
+  isInvalid?: boolean
+}
+
+export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(
+  (
+    {
+      id,
+      type,
+      label,
+      disabled,
+      value,
+      isInvalid,
+      onChange,
+      className = '',
+      labelClassName = '',
+      inputClassName = '',
+    }: Props,
+    ref: Ref<HTMLInputElement>,
+  ) => {
+    const [focused, setFocused] = useState(false)
+
+    const BASE_CLASSNAME = 'relative bg-default'
+
+    const LABEL_CLASSNAME = `hidden absolute ${!focused ? 'color-neutral' : 'color-info'} ${
+      focused || value ? 'flex top-0 left-2 pt-1.5 px-1' : ''
+    } ${isInvalid ? 'color-dark-red' : ''} ${labelClassName}`
+
+    const INPUT_CLASSNAME = `w-full h-full ${
+      focused || value ? 'pt-6 pb-2' : 'py-2.5'
+    } px-3 text-input border-1 border-solid border-main rounded placeholder-medium text-input focus:ring-info ${
+      isInvalid ? 'border-dark-red placeholder-dark-red' : ''
+    } ${inputClassName}`
+
+    const handleFocus = () => setFocused(true)
+
+    const handleBlur = () => setFocused(false)
+
+    return (
+      <div className={`${BASE_CLASSNAME} ${className}`}>
+        <label htmlFor={id} className={LABEL_CLASSNAME}>
+          {label}
+        </label>
+        <input
+          id={id}
+          className={INPUT_CLASSNAME}
+          placeholder={!focused ? label : ''}
+          type={type}
+          value={value}
+          onChange={onChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          ref={ref}
+          disabled={disabled}
+        />
+      </div>
+    )
+  },
+)

app/assets/javascripts/Components/Input/Input.tsx

@@ -0,0 +1,14 @@
+import { FunctionalComponent } from 'preact'
+
+interface Props {
+  text?: string
+  disabled?: boolean
+  className?: string
+}
+
+export const Input: FunctionalComponent<Props> = ({ className = '', disabled = false, text }) => {
+  const base = 'rounded py-1.5 px-3 text-input my-1 h-8 bg-contrast'
+  const stateClasses = disabled ? 'no-border' : 'border-solid border-1 border-main'
+  const classes = `${base} ${stateClasses} ${className}`
+  return <input type="text" className={classes} disabled={disabled} value={text} />
+}