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

app/assets/javascripts/Components/Preferences/PreferencesComponents/Content.tsx

@@ -1,4 +1,4 @@
-import { FunctionComponent } from 'preact'
+import { FunctionComponent } from 'react'
 
 export const Title: FunctionComponent = ({ children }) => (
   <>

app/assets/javascripts/Components/Preferences/PreferencesComponents/MenuItem.tsx

@@ -1,5 +1,5 @@
-import { Icon } from '@/Components/Icon/Icon'
-import { FunctionComponent } from 'preact'
+import Icon from '@/Components/Icon/Icon'
+import { FunctionComponent } from 'react'
 import { IconType } from '@standardnotes/snjs'
 
 interface Props {
@@ -10,7 +10,7 @@ interface Props {
   onClick: () => void
 }
 
-export const MenuItem: FunctionComponent<Props> = ({ iconType, label, selected, onClick, hasBubble }) => (
+const PreferencesMenuItem: FunctionComponent<Props> = ({ iconType, label, selected, onClick, hasBubble }) => (
   <div
     className={`preferences-menu-item select-none ${selected ? 'selected' : ''}`}
     onClick={(e) => {
@@ -24,3 +24,5 @@ export const MenuItem: FunctionComponent<Props> = ({ iconType, label, selected,
     {hasBubble && <span className="ml-1 color-warning">⚠️</span>}
   </div>
 )
+
+export default PreferencesMenuItem

app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesGroup.tsx

@@ -1,21 +1,7 @@
-import { FunctionComponent } from 'preact'
-import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+import { FunctionComponent } from 'react'
 
-const HorizontalLine: FunctionComponent<{ index: number; length: number }> = ({ index, length }) => {
-  return index < length - 1 ? <HorizontalSeparator classes="my-4" /> : null
-}
-
-export const PreferencesGroup: FunctionComponent = ({ children }) => (
-  <div className="bg-default border-1 border-solid rounded border-main px-6 py-6 flex flex-col mb-3">
-    {Array.isArray(children)
-      ? children
-          .filter((child) => child != undefined && child !== '' && child !== false)
-          .map((child, i, arr) => (
-            <>
-              {child}
-              <HorizontalLine index={i} length={arr.length} />
-            </>
-          ))
-      : children}
-  </div>
+const PreferencesGroup: FunctionComponent = ({ children }) => (
+  <div className="bg-default border-1 border-solid rounded border-main px-6 py-6 flex flex-col mb-3">{children}</div>
 )
+
+export default PreferencesGroup

app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesPane.tsx

@@ -1,6 +1,6 @@
-import { FunctionComponent } from 'preact'
+import { FunctionComponent } from 'react'
 
-export const PreferencesPane: FunctionComponent = ({ children }) => (
+const PreferencesPane: FunctionComponent = ({ children }) => (
   <div className="color-foreground flex-grow flex flex-row overflow-y-auto min-h-0">
     <div className="flex-grow flex flex-col py-6 items-center">
       <div className="w-125 max-w-125 flex flex-col">
@@ -10,3 +10,5 @@ export const PreferencesPane: FunctionComponent = ({ children }) => (
     <div className="flex-basis-55 flex-shrink" />
   </div>
 )
+
+export default PreferencesPane

app/assets/javascripts/Components/Preferences/PreferencesComponents/PreferencesSegment.tsx

@@ -1,8 +1,10 @@
-import { FunctionComponent } from 'preact'
+import { FunctionComponent } from 'react'
 
 type Props = {
   classes?: string
 }
-export const PreferencesSegment: FunctionComponent<Props> = ({ children, classes = '' }) => (
+const PreferencesSegment: FunctionComponent<Props> = ({ children, classes = '' }) => (
   <div className={`flex flex-col ${classes}`}>{children}</div>
 )
+
+export default PreferencesSegment

app/assets/javascripts/Components/Preferences/PreferencesComponents/index.ts

@@ -1,5 +0,0 @@
-export * from './Content'
-export * from './MenuItem'
-export * from './PreferencesPane'
-export * from './PreferencesGroup'
-export * from './PreferencesSegment'