Refactor utils

.prettierignore

@@ -1 +0,0 @@
-/src/lib/tutorials/files

src/components/App.tsx

@@ -3,12 +3,11 @@ import SideNavigator from './SideNavigator'
 import Router from './Router'
 import GlobalStyle from './GlobalStyle'
 import { ThemeProvider } from 'styled-components'
-import { defaultTheme } from '../lib/styled/themes/default'
-import { darkTheme } from '../lib/styled/themes/dark'
-import { lightTheme } from '../lib/styled/themes/light'
-import { sepiaTheme } from '../lib/styled/themes/sepia'
-import { solarizedDarkTheme } from '../lib/styled/themes/solarizedDark'
-import { StyledAppContainer } from './styled'
+import { defaultTheme } from '../themes/default'
+import { darkTheme } from '../themes/dark'
+import { lightTheme } from '../themes/light'
+import { sepiaTheme } from '../themes/sepia'
+import { solarizedDarkTheme } from '../themes/solarizedDark'
 import ContextMenu from './ContextMenu'
 import Dialog from './Dialog/Dialog'
 import { useDb } from '../lib/db'
@@ -26,10 +25,19 @@ import { useToast } from '../lib/toast'
 import { useUsers } from '../lib/accounts'
 import styled from '../lib/styled'
 
-export const LoadingText = styled.div`
+const LoadingText = styled.div`
   margin: 30px;
 `
 
+const AppContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+`
+
 const App = () => {
   const { initialize, initialized } = useDb()
   const [users, { removeUser }] = useUsers()
@@ -77,7 +85,7 @@ const App = () => {
   )
   return (
     <ThemeProvider theme={selectTheme(preferences['general.theme'])}>
-      <StyledAppContainer
+      <AppContainer
         onDrop={(event: React.DragEvent) => {
           event.preventDefault()
         }}
@@ -99,7 +107,7 @@ const App = () => {
         <Modal />
         <ToastList />
         <CodeMirrorStyle />
-      </StyledAppContainer>
+      </AppContainer>
     </ThemeProvider>
   )
 }
@@ -117,4 +125,5 @@ function selectTheme(theme: string) {
       return defaultTheme
   }
 }
+
 export default App

src/components/Dialog/Dialog.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useDialog } from '../../lib/dialog'
 import DialogIcon from './DialogIcon'
 import PromptDialogBody from './PromptDialogBody'
-import { DialogTypes, DialogData } from '../../lib/dialog/types'
+import { DialogTypes, DialogData } from '../../lib/dialog'
 import { StyledDialog, StyledDialogBackground } from './styled'
 import MessageBoxDialogBody from './MessageBoxDialogBody'
 

src/components/Dialog/DialogIcon.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { DialogIconTypes } from '../../lib/dialog/types'
+import { DialogIconTypes } from '../../lib/dialog'
 import { StyledIcon } from './styled'
 
 type DialogIconProps = {

src/components/Dialog/MessageBoxDialogBody.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEventHandler, KeyboardEventHandler } from 'react'
-import { MessageBoxDialogData } from '../../lib/dialog/types'
+import { MessageBoxDialogData } from '../../lib/dialog'
 import {
   StyledDialogBody,
   StyledDialogTitle,

src/components/Dialog/PromptDialogBody.tsx

@@ -1,5 +1,5 @@
 import React, { ChangeEventHandler, KeyboardEventHandler } from 'react'
-import { PromptDialogOptions } from '../../lib/dialog/types'
+import { PromptDialogOptions } from '../../lib/dialog'
 import {
   StyledDialogBody,
   StyledDialogTitle,

src/components/GlobalStyle.tsx

@@ -1,6 +1,6 @@
 import { createGlobalStyle } from 'styled-components'
 import { backgroundColor, textColor } from '../lib/styled/styleFunctions'
-import { BaseTheme } from '../lib/styled/themes/types'
+import { BaseTheme } from '../lib/styled/BaseTheme'
 
 export default createGlobalStyle<BaseTheme>`
   body {
@@ -30,7 +30,7 @@ export default createGlobalStyle<BaseTheme>`
   a {
     color: inherit;
   }
-  
+
   /* total width */
   ::-webkit-scrollbar {
     background-color: transparent;

src/components/Modal/index.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useCallback } from 'react'
 import { useGlobalKeyDownHandler } from '../../lib/keyboard'
-import { useModal } from '../../lib/modal/store'
+import { useModal } from '../../lib/modal'
 import {
   StyledModalsBackground,
   StyledModalsContainer,

src/components/NotePage/NoteDetail/TagList.tsx

@@ -1,7 +1,11 @@
 import React, { useCallback } from 'react'
 import ButtonIcon from '../../atoms/ButtonIcon'
 import styled from '../../../lib/styled'
-import { iconColor, noteListIconColor, inputStyle } from '../../../lib/styled/styleFunctions'
+import {
+  iconColor,
+  noteListIconColor,
+  inputStyle
+} from '../../../lib/styled/styleFunctions'
 import { IconTag, IconClose } from '../../icons'
 
 interface TagListItemProps {

src/components/NotePage/NoteList/NoteItem.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useCallback } from 'react'
-import { Link } from '../../../lib/router'
+import Link from '../../atoms/Link'
 import styled from '../../../lib/styled/styled'
 import {
   borderBottom,

src/components/NotePage/NoteList/NoteList.tsx

@@ -16,7 +16,7 @@ import {
   isWithGeneralCtrlKey
 } from '../../../lib/keyboard'
 import { NoteListSortOptions } from '../NotePage'
-import { osName } from '../../../lib/utils'
+import { osName } from '../../../lib/platform'
 
 export const StyledNoteListContainer = styled.div`
   display: flex;

src/components/NotePage/NotePage.tsx

@@ -17,7 +17,7 @@ import TwoPaneLayout from '../atoms/TwoPaneLayout'
 import { PopulatedNoteDoc, NoteStorage, ObjectMap } from '../../lib/db/types'
 import { useGeneralStatus, ViewModeType } from '../../lib/generalStatus'
 import { useDialog, DialogIconTypes } from '../../lib/dialog'
-import { escapeRegExp } from '../../lib/regex'
+import { escapeRegExp } from '../../lib/string'
 import { useTranslation } from 'react-i18next'
 import {
   useGlobalKeyDownHandler,

src/components/PreferencesModal/AboutTab.tsx

@@ -6,7 +6,7 @@ import {
   SectionSubtleText,
   PrimaryAnchor
 } from './styled'
-import { openNew } from '../../lib/utils/platform'
+import { openNew } from '../../lib/platform'
 import Image from '../atoms/Image'
 import AppLink from '../atoms/AppLink'
 import { useTranslation } from 'react-i18next'

src/components/PreferencesModal/BillingTab.tsx

@@ -10,7 +10,7 @@ import styled from '../../lib/styled'
 import { usePreferences } from '../../lib/preferences'
 import { getSubscription, Subscription } from '../../lib/accounts'
 import LoginButton from '../atoms/LoginButton'
-import { openNew } from '../../lib/utils/platform'
+import { openNew } from '../../lib/platform'
 import { useTranslation } from 'react-i18next'
 
 const BillingContent = styled.div`

src/components/PreferencesModal/GeneralTab.tsx

@@ -99,12 +99,15 @@ const GeneralTab = () => {
             value={preferences['general.language']}
             onChange={selectLanguage}
           >
-            <option value='en-US'>English (US)</option>
-            <option value='ja'>日本語</option>
-            <option value='es-ES'>Español (España)</option>
-            <option value='zh-CN'>Chinese (zh-CN)</option>
-            <option value='ko'>Korean</option>
-            <option value='pt-BR'>Portuguese (pt-BR)</option>
+            <option value='de'>🇩🇪Deutsch</option>
+            <option value='en-US'>🇺🇸English (US)</option>
+            <option value='es-ES'>🇪🇸Español (España)</option>
+            <option value='ja'>🇯🇵日本語</option>
+            <option value='ko'>🇰🇷한국어</option>
+            <option value='pt-BR'>🇧🇷Português (BR)</option>
+            <option value='zh-CN'>🇨🇳中文 (CN)</option>
+            <option value='zh-HK'>🇭🇰中文 (HK)</option>
+            <option value='zh-TW'>🇹🇼中文 (TW)</option>
           </SectionSelect>
         </SectionControl>
       </Section>

src/components/PreferencesModal/PreferencesModal.tsx

@@ -9,7 +9,10 @@ import MarkdownTab from './MarkdownTab'
 import AboutTab from './AboutTab'
 import BillingTab from './BillingTab'
 import ImportTab from './ImportTab'
-import { backgroundColor, closeIconColor } from '../../lib/styled/styleFunctions'
+import {
+  backgroundColor,
+  closeIconColor
+} from '../../lib/styled/styleFunctions'
 import { IconClose } from '../icons'
 import { useTranslation } from 'react-i18next'
 

src/components/Router.tsx

@@ -1,12 +1,16 @@
 import React from 'react'
 import NotePage from './NotePage'
 import { useRouteParams } from '../lib/router'
-import { StyledNotFoundPage } from './styled'
 import { StorageEdit, StorageCreate } from './Storage'
 import { useDb } from '../lib/db'
 import AttachmentsPage from './AttachmentsPage/AttachmentsPage'
 import TutorialsPage from './Tutorials/TutorialsPage'
 import useRedirectHandler from '../lib/router/redirect'
+import styled from '../lib/styled'
+
+const NotFoundPageContainer = styled.div`
+  padding: 15px 25px;
+`
 
 export default () => {
   const routeParams = useRouteParams()
@@ -36,9 +40,9 @@ export default () => {
       }
   }
   return (
-    <StyledNotFoundPage>
+    <NotFoundPageContainer>
       <h1>Page not found</h1>
       <p>Check the URL or click other link in the left side navigation.</p>
-    </StyledNotFoundPage>
+    </NotFoundPageContainer>
   )
 }

src/components/Tutorials/TutorialsNoteItem.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Link } from '../../lib/router'
+import Link from '../atoms/Link'
 import cc from 'classcat'
 import { TutorialsNavigatorTreeItem } from '../../lib/tutorials'
 import { StyledNoteListItem } from '../NotePage/NoteList/NoteItem'

src/components/atoms/AppLink.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import isElectron from 'is-electron'
 import { getAppLinkFromUserAgent } from '../../lib/download'
-import { openNew } from '../../lib/utils/platform'
+import { openNew } from '../../lib/platform'
 import styled from '../../lib/styled'
 import cc from 'classcat'
 import { primaryButtonStyle } from '../../lib/styled/styleFunctions'

src/components/atoms/HighlightText.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react'
 import styled from '../../lib/styled'
-import { escapeRegExp } from '../../lib/regex'
+import { escapeRegExp } from '../../lib/string'
 
 const HighlightContainer = styled.span`
   .highlighted {

src/lib/router/Link.tsx → src/components/atoms/Link.tsx

@@ -6,7 +6,7 @@ import React, {
   FocusEventHandler,
   DragEventHandler
 } from 'react'
-import { useRouter } from './store'
+import { useRouter } from '../../lib/router/store'
 
 export interface LinkProps {
   href?: string
@@ -21,7 +21,7 @@ export interface LinkProps {
   onDragOver?: DragEventHandler
 }
 
-export const Link: FC<LinkProps> = ({
+const Link: FC<LinkProps> = ({
   children,
   href,
   className,
@@ -61,3 +61,5 @@ export const Link: FC<LinkProps> = ({
     </a>
   )
 }
+
+export default Link

src/components/atoms/MarkdownPreviewer.tsx

@@ -15,7 +15,7 @@ import useForceUpdate from 'use-force-update'
 import styled from '../../lib/styled'
 import cc from 'classcat'
 import { useDb } from '../../lib/db'
-import { openNew } from '../../lib/utils/platform'
+import { openNew } from '../../lib/platform'
 
 const schema = mergeDeepRight(gh, {
   attributes: {

src/index.tsx

@@ -5,7 +5,7 @@ import { RouterProvider } from './lib/router'
 import { ContextMenuProvider } from './lib/contextMenu'
 import { DialogProvider } from './lib/dialog'
 import { ModalProvider } from './lib/modal'
-import { combineProviders } from './lib/utils/context'
+import { combineProviders } from './lib/context'
 import { DbProvider } from './lib/db'
 import { PreferencesProvider } from './lib/preferences'
 import { GeneralStatusProvider } from './lib/generalStatus'

src/lib/accounts/login.ts

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import { retry } from '../utils/sleep'
-import { generateSecret } from '../utils/secret'
+import { retry } from '../sleep'
+import { generateRandomHex } from '../string'
 import {
   checkLogin,
   isLoginComplete,
@@ -9,7 +9,7 @@ import {
   LoginCompleteResponse,
   CheckLoginError
 } from './api/login'
-import { openNew } from '../utils/platform'
+import { openNew } from '../platform'
 
 type LoginState = 'idle' | 'logging-in'
 
@@ -41,7 +41,7 @@ const loginStart = async (
   try {
     setState('logging-in')
 
-    const info = await initiateLogin(generateSecret())
+    const info = await initiateLogin(generateRandomHex())
     openNew(getLoginPageUrl(info))
 
     const response = await pingLogin(info)

src/lib/analytics.ts

@@ -120,4 +120,3 @@ export function wrapDbStoreWithAnalytics(hook: () => DbStore): () => DbStore {
     }
   }
 }
-