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

app/assets/javascripts/Components/Button/Button.tsx

@@ -1,6 +1,4 @@
-import { JSXInternal } from 'preact/src/jsx'
-import { ComponentChildren, FunctionComponent, Ref } from 'preact'
-import { forwardRef } from 'preact/compat'
+import { Ref, forwardRef, ReactNode, ComponentPropsWithoutRef } from 'react'
 
 const baseClass = 'rounded px-4 py-1.75 font-bold text-sm fit-content'
 
@@ -32,15 +30,15 @@ const getClassName = (variant: ButtonVariant, danger: boolean, disabled: boolean
   return `${baseClass} ${colors} ${borders} ${focusHoverStates} ${cursor}`
 }
 
-type ButtonProps = JSXInternal.HTMLAttributes<HTMLButtonElement> & {
-  children?: ComponentChildren
+interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
+  children?: ReactNode
   className?: string
   variant?: ButtonVariant
   dangerStyle?: boolean
   label?: string
 }
 
-export const Button: FunctionComponent<ButtonProps> = forwardRef(
+const Button = forwardRef(
   (
     {
       variant = 'normal',
@@ -66,3 +64,5 @@ export const Button: FunctionComponent<ButtonProps> = forwardRef(
     )
   },
 )
+
+export default Button

app/assets/javascripts/Components/Button/IconButton.tsx

@@ -1,34 +1,18 @@
-import { FunctionComponent } from 'preact'
-import { Icon } from '@/Components/Icon/Icon'
+import { FunctionComponent, MouseEventHandler } from 'react'
+import Icon from '@/Components/Icon/Icon'
 import { IconType } from '@standardnotes/snjs'
 
-interface Props {
-  /**
-   * onClick - preventDefault is handled within the component
-   */
+type Props = {
   onClick: () => void
-
   className?: string
-
   icon: IconType
-
   iconClassName?: string
-
-  /**
-   * Button tooltip
-   */
   title: string
-
   focusable: boolean
-
   disabled?: boolean
 }
 
-/**
- * IconButton component with an icon
- * preventDefault is already handled within the component
- */
-export const IconButton: FunctionComponent<Props> = ({
+const IconButton: FunctionComponent<Props> = ({
   onClick,
   className = '',
   icon,
@@ -37,7 +21,7 @@ export const IconButton: FunctionComponent<Props> = ({
   iconClassName = '',
   disabled = false,
 }) => {
-  const click = (e: MouseEvent) => {
+  const click: MouseEventHandler = (e) => {
     e.preventDefault()
     onClick()
   }
@@ -55,3 +39,5 @@ export const IconButton: FunctionComponent<Props> = ({
     </button>
   )
 }
+
+export default IconButton

app/assets/javascripts/Components/Button/RoundIconButton.tsx

@@ -1,28 +1,18 @@
-import { FunctionComponent } from 'preact'
-import { Icon } from '@/Components/Icon/Icon'
+import { FunctionComponent, MouseEventHandler } from 'react'
+import Icon from '@/Components/Icon/Icon'
 import { IconType } from '@standardnotes/snjs'
 
 type ButtonType = 'normal' | 'primary'
 
-interface Props {
-  /**
-   * onClick - preventDefault is handled within the component
-   */
+type Props = {
   onClick: () => void
-
   type: ButtonType
-
   className?: string
-
   icon: IconType
 }
 
-/**
- * IconButton component with an icon
- * preventDefault is already handled within the component
- */
-export const RoundIconButton: FunctionComponent<Props> = ({ onClick, type, className, icon: iconType }) => {
-  const click = (e: MouseEvent) => {
+const RoundIconButton: FunctionComponent<Props> = ({ onClick, type, className, icon: iconType }) => {
+  const click: MouseEventHandler = (e) => {
     e.preventDefault()
     onClick()
   }
@@ -33,3 +23,5 @@ export const RoundIconButton: FunctionComponent<Props> = ({ onClick, type, class
     </button>
   )
 }
+
+export default RoundIconButton