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

app/assets/javascripts/Components/Files/FilePreviewInfoPanel.tsx

@@ -1,13 +1,13 @@
 import { formatSizeToReadableString } from '@standardnotes/filepicker'
 import { FileItem } from '@standardnotes/snjs'
-import { FunctionComponent } from 'preact'
-import { Icon } from '@/Components/Icon/Icon'
+import { FunctionComponent } from 'react'
+import Icon from '@/Components/Icon/Icon'
 
 type Props = {
   file: FileItem
 }
 
-export const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
+const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
   return (
     <div className="flex flex-col min-w-70 p-4 border-0 border-l-1px border-solid border-main">
       <div className="flex items-center mb-4">
@@ -35,3 +35,5 @@ export const FilePreviewInfoPanel: FunctionComponent<Props> = ({ file }) => {
     </div>
   )
 }
+
+export default FilePreviewInfoPanel

app/assets/javascripts/Components/Files/FilePreviewModal.tsx

@@ -3,14 +3,13 @@ import { concatenateUint8Arrays } from '@/Utils/ConcatenateUint8Arrays'
 import { DialogContent, DialogOverlay } from '@reach/dialog'
 import { addToast, ToastType } from '@standardnotes/stylekit'
 import { NoPreviewIllustration } from '@standardnotes/icons'
-import { FunctionComponent } from 'preact'
-import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
-import { getFileIconComponent } from '@/Components/AttachedFilesPopover/PopoverFileItem'
-import { Button } from '@/Components/Button/Button'
-import { Icon } from '@/Components/Icon/Icon'
-import { FilePreviewInfoPanel } from './FilePreviewInfoPanel'
+import { FunctionComponent, KeyboardEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { getFileIconComponent } from '@/Components/AttachedFilesPopover/getFileIconComponent'
+import Button from '@/Components/Button/Button'
+import Icon from '@/Components/Icon/Icon'
+import FilePreviewInfoPanel from './FilePreviewInfoPanel'
 import { isFileTypePreviewable } from './isFilePreviewable'
-import { PreviewComponent } from './PreviewComponent'
+import PreviewComponent from './PreviewComponent'
 import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
 import { KeyboardKey } from '@/Services/IOService'
 import { AppState } from '@/UIModels/AppState'
@@ -21,10 +20,6 @@ type Props = {
   appState: AppState
 }
 
-export const FilePreviewModalWrapper: FunctionComponent<Props> = observer(({ application, appState }) => {
-  return appState.filePreviewModal.isOpen ? <FilePreviewModal application={application} appState={appState} /> : null
-})
-
 const FilePreviewModal: FunctionComponent<Props> = observer(({ application, appState }) => {
   const { currentFile, setCurrentFile, otherFiles, dismiss } = appState.filePreviewModal
 
@@ -91,8 +86,8 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, appS
     }
   }, [currentFile, getObjectUrl, objectUrl])
 
-  const keyDownHandler = useCallback(
-    (event: KeyboardEvent) => {
+  const keyDownHandler: KeyboardEventHandler = useCallback(
+    (event) => {
       if (event.key !== KeyboardKey.Left && event.key !== KeyboardKey.Right) {
         return
       }
@@ -141,6 +136,7 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, appS
       dangerouslyBypassScrollLock
     >
       <DialogContent
+        aria-label="File preview modal"
         className="flex flex-col rounded shadow-overlay"
         style={{
           width: '90%',
@@ -256,3 +252,11 @@ const FilePreviewModal: FunctionComponent<Props> = observer(({ application, appS
     </DialogOverlay>
   )
 })
+
+FilePreviewModal.displayName = 'FilePreviewModal'
+
+const FilePreviewModalWrapper: FunctionComponent<Props> = ({ application, appState }) => {
+  return appState.filePreviewModal.isOpen ? <FilePreviewModal application={application} appState={appState} /> : null
+}
+
+export default observer(FilePreviewModalWrapper)

app/assets/javascripts/Components/Files/ImagePreview.tsx

@@ -1,13 +1,12 @@
 import { IconType } from '@standardnotes/snjs'
-import { FunctionComponent } from 'preact'
-import { useRef, useState } from 'preact/hooks'
-import { IconButton } from '../Button/IconButton'
+import { FunctionComponent, useRef, useState } from 'react'
+import IconButton from '../Button/IconButton'
 
 type Props = {
   objectUrl: string
 }
 
-export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
+const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
   const initialImgHeightRef = useRef<number>()
 
   const [imageZoomPercent, setImageZoomPercent] = useState(100)
@@ -21,8 +20,8 @@ export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
             height: `${imageZoomPercent}%`,
             ...(imageZoomPercent <= 100
               ? {
-                  'min-width': '100%',
-                  'object-fit': 'contain',
+                  minWidth: '100%',
+                  objectFit: 'contain',
                 }
               : {
                   position: 'absolute',
@@ -69,3 +68,5 @@ export const ImagePreview: FunctionComponent<Props> = ({ objectUrl }) => {
     </div>
   )
 }
+
+export default ImagePreview

app/assets/javascripts/Components/Files/PreviewComponent.tsx

@@ -1,13 +1,13 @@
 import { FileItem } from '@standardnotes/snjs'
-import { FunctionComponent } from 'preact'
-import { ImagePreview } from './ImagePreview'
+import { FunctionComponent } from 'react'
+import ImagePreview from './ImagePreview'
 
 type Props = {
   file: FileItem
   objectUrl: string
 }
 
-export const PreviewComponent: FunctionComponent<Props> = ({ file, objectUrl }) => {
+const PreviewComponent: FunctionComponent<Props> = ({ file, objectUrl }) => {
   if (file.mimeType.startsWith('image/')) {
     return <ImagePreview objectUrl={objectUrl} />
   }
@@ -22,3 +22,5 @@ export const PreviewComponent: FunctionComponent<Props> = ({ file, objectUrl })
 
   return <object className="w-full h-full" data={objectUrl} />
 }
+
+export default PreviewComponent