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

app/assets/javascripts/Components/Preferences/Panes/General/Defaults.tsx

@@ -1,18 +1,14 @@
-import { Dropdown, DropdownItem } from '@/Components/Dropdown/Dropdown'
+import Dropdown from '@/Components/Dropdown/Dropdown'
+import { DropdownItem } from '@/Components/Dropdown/DropdownItem'
 import { FeatureIdentifier, PrefKey, ComponentArea, ComponentMutator, SNComponent } from '@standardnotes/snjs'
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Subtitle,
-  Text,
-  Title,
-} from '@/Components/Preferences/PreferencesComponents'
+import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import { WebApplication } from '@/UIModels/Application'
-import { FunctionComponent } from 'preact'
-import { useEffect, useState } from 'preact/hooks'
-import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
-import { Switch } from '@/Components/Switch/Switch'
+import { FunctionComponent, useEffect, useState } from 'react'
+import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
+import Switch from '@/Components/Switch/Switch'
 import { PLAIN_EDITOR_NAME } from '@/Constants'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
@@ -47,7 +43,7 @@ const getDefaultEditor = (application: WebApplication) => {
   return application.componentManager.componentsForArea(ComponentArea.Editor).filter((e) => e.isDefaultEditor())[0]
 }
 
-export const Defaults: FunctionComponent<Props> = ({ application }) => {
+const Defaults: FunctionComponent<Props> = ({ application }) => {
   const [editorItems, setEditorItems] = useState<DropdownItem[]>([])
   const [defaultEditorValue, setDefaultEditorValue] = useState(
     () => getDefaultEditor(application)?.package_info?.identifier || 'plain-editor',
@@ -123,7 +119,7 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
             />
           </div>
         </div>
-        <HorizontalSeparator classes="mt-5 mb-3" />
+        <HorizontalSeparator classes="my-4" />
         <div className="flex items-center justify-between">
           <div className="flex flex-col">
             <Subtitle>Spellcheck</Subtitle>
@@ -134,7 +130,7 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
           </div>
           <Switch onChange={toggleSpellcheck} checked={spellcheck} />
         </div>
-        <HorizontalSeparator classes="mt-5 mb-3" />
+        <HorizontalSeparator classes="my-4" />
         <div className="flex items-center justify-between">
           <div className="flex flex-col">
             <Subtitle>Add all parent tags when adding a nested tag to a note</Subtitle>
@@ -152,3 +148,5 @@ export const Defaults: FunctionComponent<Props> = ({ application }) => {
     </PreferencesGroup>
   )
 }
+
+export default Defaults

app/assets/javascripts/Components/Preferences/Panes/General/General.tsx

@@ -1,27 +1,27 @@
 import { WebApplication } from '@/UIModels/Application'
 import { AppState } from '@/UIModels/AppState'
-import { FunctionComponent } from 'preact'
-import { PreferencesPane } from '@/Components/Preferences/PreferencesComponents'
+import { FunctionComponent } from 'react'
 import { ExtensionsLatestVersions } from '@/Components/Preferences/Panes/Extensions/ExtensionsLatestVersions'
 import { observer } from 'mobx-react-lite'
-import { Tools } from './Tools'
-import { Defaults } from './Defaults'
-import { LabsPane } from './Labs'
-import { Advanced } from '@/Components/Preferences/Panes/Account/Advanced'
+import Tools from './Tools'
+import Defaults from './Defaults'
+import LabsPane from './Labs'
+import Advanced from '@/Components/Preferences/Panes/Account/Advanced'
+import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
 
-interface GeneralProps {
+type Props = {
   appState: AppState
   application: WebApplication
   extensionsLatestVersions: ExtensionsLatestVersions
 }
 
-export const General: FunctionComponent<GeneralProps> = observer(
-  ({ appState, application, extensionsLatestVersions }) => (
-    <PreferencesPane>
-      <Tools application={application} />
-      <Defaults application={application} />
-      <LabsPane application={application} />
-      <Advanced application={application} appState={appState} extensionsLatestVersions={extensionsLatestVersions} />
-    </PreferencesPane>
-  ),
+const General: FunctionComponent<Props> = ({ appState, application, extensionsLatestVersions }) => (
+  <PreferencesPane>
+    <Tools application={application} />
+    <Defaults application={application} />
+    <LabsPane application={application} />
+    <Advanced application={application} appState={appState} extensionsLatestVersions={extensionsLatestVersions} />
+  </PreferencesPane>
 )
+
+export default observer(General)

app/assets/javascripts/Components/Preferences/Panes/General/Labs.tsx

@@ -1,17 +1,12 @@
-import { Switch } from '@/Components/Switch/Switch'
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Subtitle,
-  Text,
-  Title,
-} from '@/Components/Preferences/PreferencesComponents'
+import Switch from '@/Components/Switch/Switch'
+import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import { WebApplication } from '@/UIModels/Application'
 import { FeatureIdentifier, FeatureStatus, FindNativeFeature } from '@standardnotes/snjs'
-import { FunctionComponent } from 'preact'
-import { useCallback, useEffect, useState } from 'preact/hooks'
+import { Fragment, FunctionComponent, useCallback, useEffect, useState } from 'react'
 import { usePremiumModal } from '@/Hooks/usePremiumModal'
-import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
+import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 type ExperimentalFeatureItem = {
   identifier: FeatureIdentifier
@@ -25,7 +20,7 @@ type Props = {
   application: WebApplication
 }
 
-export const LabsPane: FunctionComponent<Props> = ({ application }) => {
+const LabsPane: FunctionComponent<Props> = ({ application }) => {
   const [experimentalFeatures, setExperimentalFeatures] = useState<ExperimentalFeatureItem[]>([])
 
   const reloadExperimentalFeatures = useCallback(() => {
@@ -67,7 +62,7 @@ export const LabsPane: FunctionComponent<Props> = ({ application }) => {
             const showHorizontalSeparator = experimentalFeatures.length > 1 && index !== experimentalFeatures.length - 1
 
             return (
-              <>
+              <Fragment key={identifier}>
                 <div className="flex items-center justify-between">
                   <div className="flex flex-col">
                     <Subtitle>{name}</Subtitle>
@@ -76,7 +71,7 @@ export const LabsPane: FunctionComponent<Props> = ({ application }) => {
                   <Switch onChange={toggleFeature} checked={isEnabled} />
                 </div>
                 {showHorizontalSeparator && <HorizontalSeparator classes="mt-5 mb-3" />}
-              </>
+              </Fragment>
             )
           })}
           {experimentalFeatures.length === 0 && (
@@ -91,3 +86,5 @@ export const LabsPane: FunctionComponent<Props> = ({ application }) => {
     </PreferencesGroup>
   )
 }
+
+export default LabsPane

app/assets/javascripts/Components/Preferences/Panes/General/Tools.tsx

@@ -1,23 +1,18 @@
-import { HorizontalSeparator } from '@/Components/Shared/HorizontalSeparator'
-import { Switch } from '@/Components/Switch/Switch'
-import {
-  PreferencesGroup,
-  PreferencesSegment,
-  Subtitle,
-  Text,
-  Title,
-} from '@/Components/Preferences/PreferencesComponents'
+import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
+import Switch from '@/Components/Switch/Switch'
+import { Subtitle, Text, Title } from '@/Components/Preferences/PreferencesComponents/Content'
 import { WebApplication } from '@/UIModels/Application'
 import { PrefKey } from '@standardnotes/snjs'
 import { observer } from 'mobx-react-lite'
-import { FunctionalComponent } from 'preact'
-import { useState } from 'preact/hooks'
+import { FunctionComponent, useState } from 'react'
+import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
+import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
 
 type Props = {
   application: WebApplication
 }
 
-export const Tools: FunctionalComponent<Props> = observer(({ application }: Props) => {
+const Tools: FunctionComponent<Props> = ({ application }: Props) => {
   const [monospaceFont, setMonospaceFont] = useState(() =>
     application.getPreference(PrefKey.EditorMonospaceEnabled, true),
   )
@@ -47,7 +42,7 @@ export const Tools: FunctionalComponent<Props> = observer(({ application }: Prop
             </div>
             <Switch onChange={toggleMonospaceFont} checked={monospaceFont} />
           </div>
-          <HorizontalSeparator classes="mt-5 mb-3" />
+          <HorizontalSeparator classes="my-4" />
           <div className="flex items-center justify-between">
             <div className="flex flex-col">
               <Subtitle>Margin Resizers</Subtitle>
@@ -59,4 +54,6 @@ export const Tools: FunctionalComponent<Props> = observer(({ application }: Prop
       </PreferencesSegment>
     </PreferencesGroup>
   )
-})
+}
+
+export default observer(Tools)