refactor: replace 'preact' with 'react' (#1048)

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

@@ -1,5 +1,4 @@
-import { FunctionalComponent, Ref } from 'preact'
-import { forwardRef } from 'preact/compat'
+import { forwardRef, Fragment, Ref } from 'react'
 import { DecoratedInputProps } from './DecoratedInputProps'
 
 const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean) => {
@@ -17,7 +16,7 @@ const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean
 /**
  * Input that can be decorated on the left and right side
  */
-export const DecoratedInput: FunctionalComponent<DecoratedInputProps> = forwardRef(
+const DecoratedInput = forwardRef(
   (
     {
       type = 'text',
@@ -42,8 +41,8 @@ export const DecoratedInput: FunctionalComponent<DecoratedInputProps> = forwardR
       <div className={`${classNames.container} ${disabled ? classNames.disabled : ''} ${className}`}>
         {left && (
           <div className="flex items-center px-2 py-1.5">
-            {left.map((leftChild) => (
-              <>{leftChild}</>
+            {left.map((leftChild, index) => (
+              <Fragment key={index}>{leftChild}</Fragment>
             ))}
           </div>
         )}
@@ -58,14 +57,16 @@ export const DecoratedInput: FunctionalComponent<DecoratedInputProps> = forwardR
           onFocus={onFocus}
           onKeyDown={onKeyDown}
           data-lpignore={type !== 'password' ? true : false}
-          autocomplete={autocomplete ? 'on' : 'off'}
+          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 className={index > 0 ? 'ml-3' : ''} key={index}>
+                {rightChild}
+              </div>
             ))}
           </div>
         )}
@@ -73,3 +74,5 @@ export const DecoratedInput: FunctionalComponent<DecoratedInputProps> = forwardR
     )
   },
 )
+
+export default DecoratedInput

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

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

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

@@ -1,13 +1,11 @@
-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 { Dispatch, FunctionComponent, Ref, SetStateAction, forwardRef, useState } from 'react'
+import DecoratedInput from './DecoratedInput'
+import IconButton from '@/Components/Button/IconButton'
 import { DecoratedInputProps } from './DecoratedInputProps'
 
 const Toggle: FunctionComponent<{
   isToggled: boolean
-  setIsToggled: StateUpdater<boolean>
+  setIsToggled: Dispatch<SetStateAction<boolean>>
 }> = ({ isToggled, setIsToggled }) => (
   <IconButton
     className="w-5 h-5 p-0 justify-center sk-circle hover:bg-passive-4 color-neutral"
@@ -22,19 +20,19 @@ const Toggle: FunctionComponent<{
 /**
  * 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 DecoratedPasswordInput = forwardRef((props: DecoratedInputProps, ref: Ref<HTMLInputElement>) => {
+  const [isToggled, setIsToggled] = useState(false)
 
-    const rightSideDecorations = props.right ? [...props.right] : []
+  const rightSideDecorations = props.right ? [...props.right] : []
 
-    return (
-      <DecoratedInput
-        {...props}
-        ref={ref}
-        type={isToggled ? 'text' : 'password'}
-        right={[...rightSideDecorations, <Toggle isToggled={isToggled} setIsToggled={setIsToggled} />]}
-      />
-    )
-  },
-)
+  return (
+    <DecoratedInput
+      {...props}
+      ref={ref}
+      type={isToggled ? 'text' : 'password'}
+      right={[...rightSideDecorations, <Toggle isToggled={isToggled} setIsToggled={setIsToggled} />]}
+    />
+  )
+})
+
+export default DecoratedPasswordInput

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

@@ -1,14 +1,11 @@
-import { FunctionComponent, Ref } from 'preact'
-import { JSXInternal } from 'preact/src/jsx'
-import { forwardRef } from 'preact/compat'
-import { useState } from 'preact/hooks'
+import { ChangeEventHandler, Ref, forwardRef, useState } from 'react'
 
 type Props = {
   id: string
   type: 'text' | 'email' | 'password'
   label: string
   value: string
-  onChange: JSXInternal.GenericEventHandler<HTMLInputElement>
+  onChange: ChangeEventHandler<HTMLInputElement>
   disabled?: boolean
   className?: string
   labelClassName?: string
@@ -16,7 +13,7 @@ type Props = {
   isInvalid?: boolean
 }
 
-export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(
+const FloatingLabelInput = forwardRef(
   (
     {
       id,
@@ -71,3 +68,5 @@ export const FloatingLabelInput: FunctionComponent<Props> = forwardRef(
     )
   },
 )
+
+export default FloatingLabelInput

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

@@ -1,4 +1,4 @@
-import { FunctionalComponent } from 'preact'
+import { FunctionComponent } from 'react'
 
 interface Props {
   text?: string
@@ -6,9 +6,11 @@ interface Props {
   className?: string
 }
 
-export const Input: FunctionalComponent<Props> = ({ className = '', disabled = false, text }) => {
+const Input: FunctionComponent<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} />
 }
+
+export default Input