Chore: Mobile: Migrate global-style.js to TypeScript (#10091)

.eslintignore

@@ -538,6 +538,7 @@ packages/app-mobile/components/biometrics/biometricAuthenticate.js
 packages/app-mobile/components/biometrics/sensorInfo.js
 packages/app-mobile/components/getResponsiveValue.test.js
 packages/app-mobile/components/getResponsiveValue.js
+packages/app-mobile/components/global-style.js
 packages/app-mobile/components/screens/ConfigScreen/ConfigScreen.js
 packages/app-mobile/components/screens/ConfigScreen/FileSystemPathSelector.js
 packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/ExportDebugReportButton.js

.gitignore

@@ -518,6 +518,7 @@ packages/app-mobile/components/biometrics/biometricAuthenticate.js
 packages/app-mobile/components/biometrics/sensorInfo.js
 packages/app-mobile/components/getResponsiveValue.test.js
 packages/app-mobile/components/getResponsiveValue.js
+packages/app-mobile/components/global-style.js
 packages/app-mobile/components/screens/ConfigScreen/ConfigScreen.js
 packages/app-mobile/components/screens/ConfigScreen/FileSystemPathSelector.js
 packages/app-mobile/components/screens/ConfigScreen/NoteExportSection/ExportDebugReportButton.js

packages/app-mobile/components/FolderPicker.tsx

@@ -3,7 +3,7 @@ const React = require('react');
 import { FunctionComponent } from 'react';
 import { _ } from '@joplin/lib/locale';
 import Folder, { FolderEntityWithChildren } from '@joplin/lib/models/Folder';
-const { themeStyle } = require('./global-style.js');
+import { themeStyle } from './global-style';
 import Dropdown, { DropdownListItem, OnValueChangedListener } from './Dropdown';
 import { FolderEntity } from '@joplin/lib/services/database/types';
 

packages/app-mobile/components/ModalDialog.js

@@ -1,6 +1,6 @@
 const React = require('react');
 const { Text, View, StyleSheet, Button } = require('react-native');
-const { themeStyle } = require('./global-style.js');
+const { themeStyle } = require('./global-style');
 const { _ } = require('@joplin/lib/locale');
 
 import Modal from './Modal';

packages/app-mobile/components/NoteBodyViewer/hooks/useSource.ts

@@ -1,7 +1,7 @@
 import { useEffect, useState, useMemo, useRef } from 'react';
 import shim from '@joplin/lib/shim';
 import Setting from '@joplin/lib/models/Setting';
-const { themeStyle } = require('../../global-style.js');
+import { themeStyle } from '../../global-style';
 import markupLanguageUtils from '@joplin/lib/markupLanguageUtils';
 import useEditPopup from './useEditPopup';
 import Logger from '@joplin/utils/Logger';

packages/app-mobile/components/NoteEditor/NoteEditor.tsx

@@ -9,7 +9,7 @@ import * as React from 'react';
 import { forwardRef, useImperativeHandle } from 'react';
 import { useMemo, useState, useCallback, useRef } from 'react';
 import { LayoutChangeEvent, NativeSyntheticEvent, View, ViewStyle } from 'react-native';
-const { editorFont } = require('../global-style');
+import { editorFont } from '../global-style';
 
 import { EditorControl, EditorSettings, SelectionRange } from './types';
 import { _ } from '@joplin/lib/locale';

packages/app-mobile/components/NoteList.tsx

@@ -9,10 +9,10 @@ import { AppState } from '../utils/types';
 
 const { _ } = require('@joplin/lib/locale');
 const { NoteItem } = require('./note-item.js');
-const { themeStyle } = require('./global-style.js');
+import { themeStyle } from './global-style';
 
 interface NoteListProps {
-	themeId: string;
+	themeId: number;
 	dispatch: (action: any)=> void;
 	notesSource: string;
 	items: NoteEntity[];

packages/app-mobile/components/ProfileSwitcher/ProfileSwitcher.tsx

@@ -10,7 +10,7 @@ import { Alert } from 'react-native';
 import { _ } from '@joplin/lib/locale';
 import { deleteProfileById } from '@joplin/lib/services/profileConfig';
 import { saveProfileConfig, switchProfile } from '../../services/profiles';
-const { themeStyle } = require('../global-style');
+import { themeStyle } from '../global-style';
 
 interface Props {
 	themeId: number;

packages/app-mobile/components/ScreenHeader.tsx

@@ -11,7 +11,7 @@ import { _, _n } from '@joplin/lib/locale';
 import Setting from '@joplin/lib/models/Setting';
 import Note from '@joplin/lib/models/Note';
 import Folder from '@joplin/lib/models/Folder';
-const { themeStyle } = require('./global-style.js');
+import { themeStyle } from './global-style';
 import { OnValueChangedListener } from './Dropdown';
 const { dialogs } = require('../utils/dialogs.js');
 const DialogBox = require('react-native-dialogbox').default;

packages/app-mobile/components/app-nav.tsx

@@ -5,7 +5,7 @@ const { SearchScreen } = require('./screens/search.js');
 import { Component } from 'react';
 import { KeyboardAvoidingView, Keyboard, Platform, View, KeyboardEvent, Dimensions, EmitterSubscription } from 'react-native';
 import { AppState } from '../utils/types';
-const { themeStyle } = require('./global-style.js');
+import { themeStyle } from './global-style';
 
 interface State {
 	autoCompletionBarExtraHeight: number;

packages/app-mobile/components/base-screen.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { StyleSheet } from 'react-native';
-const { themeStyle } = require('./global-style.js');
+import { themeStyle } from './global-style';
 
 const rootStyles_: Record<number, any> = {};
 

packages/app-mobile/components/global-style.ts

@@ -14,9 +14,9 @@ const baseStyle = {
 	lineHeight: '1.6em',
 };
 
-const themeCache_ = {};
+const themeCache_: any = {};
 
-function addExtraStyles(style) {
+function addExtraStyles(style: any) {
 	style.marginRight = style.margin;
 	style.marginLeft = style.margin;
 	style.marginTop = style.margin;
@@ -75,9 +75,9 @@ function addExtraStyles(style) {
 	return style;
 }
 
-function editorFont(fontId) {
+function editorFont(fontId: any) {
 	// IMPORTANT: The font mapping must match the one in Setting.js
-	const fonts = {
+	const fonts: any = {
 		[Setting.FONT_DEFAULT]: null,
 		[Setting.FONT_MENLO]: 'Menlo',
 		[Setting.FONT_COURIER_NEW]: 'Courier New',
@@ -91,7 +91,7 @@ function editorFont(fontId) {
 	return fonts[fontId];
 }
 
-function themeStyle(theme) {
+function themeStyle(theme: number) {
 	if (!theme) {
 		console.warn('Theme not set! Defaulting to Light theme.');
 		theme = Setting.THEME_LIGHT;
@@ -105,4 +105,4 @@ function themeStyle(theme) {
 	return themeCache_[cacheKey];
 }
 
-module.exports = { themeStyle, editorFont };
+export { themeStyle, editorFont };

packages/app-mobile/components/note-item.js

@@ -5,7 +5,7 @@ const { Text, TouchableOpacity, View, StyleSheet } = require('react-native');
 const { Checkbox } = require('./checkbox.js');
 const Note = require('@joplin/lib/models/Note').default;
 const time = require('@joplin/lib/time').default;
-const { themeStyle } = require('./global-style.js');
+const { themeStyle } = require('./global-style');
 const { _ } = require('@joplin/lib/locale');
 
 class NoteItemComponent extends Component {

packages/app-mobile/components/screens/ConfigScreen/ConfigScreen.tsx

@@ -13,7 +13,7 @@ import { connect } from 'react-redux';
 import ScreenHeader from '../../ScreenHeader';
 import { _ } from '@joplin/lib/locale';
 import BaseScreenComponent from '../../base-screen';
-const { themeStyle } = require('../../global-style.js');
+import { themeStyle } from '../../global-style';
 import * as shared from '@joplin/lib/components/shared/config/config-shared';
 import SyncTargetRegistry from '@joplin/lib/SyncTargetRegistry';
 import biometricAuthenticate from '../../biometrics/biometricAuthenticate';

packages/app-mobile/components/screens/ConfigScreen/SettingComponent.tsx

@@ -9,7 +9,7 @@ import Slider from '@react-native-community/slider';
 import SettingsToggle from './SettingsToggle';
 import FileSystemPathSelector from './FileSystemPathSelector';
 import shim from '@joplin/lib/shim';
-const { themeStyle } = require('../../global-style.js');
+import { themeStyle } from '../../global-style';
 
 interface Props {
 	settingId: string;

packages/app-mobile/components/screens/ConfigScreen/configScreenStyles.ts

@@ -1,5 +1,5 @@
 import { TextStyle, ViewStyle, StyleSheet } from 'react-native';
-const { themeStyle } = require('../../global-style.js');
+import { themeStyle } from '../../global-style';
 
 type SidebarButtonStyle = ViewStyle & { height: number };
 

packages/app-mobile/components/screens/LogScreen.tsx

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import { reg } from '@joplin/lib/registry.js';
 import { ScreenHeader } from '../ScreenHeader';
 import time from '@joplin/lib/time';
-const { themeStyle } = require('../global-style.js');
+import { themeStyle } from '../global-style';
 import Logger from '@joplin/utils/Logger';
 import { BaseScreenComponent } from '../base-screen';
 import { _ } from '@joplin/lib/locale';

packages/app-mobile/components/screens/Note.tsx

@@ -35,7 +35,7 @@ import { _, currentLocale } from '@joplin/lib/locale';
 import { reg } from '@joplin/lib/registry';
 import ResourceFetcher from '@joplin/lib/services/ResourceFetcher';
 import { BaseScreenComponent } from '../base-screen';
-const { themeStyle, editorFont } = require('../global-style.js');
+import { themeStyle, editorFont } from '../global-style';
 const { dialogs } = require('../../utils/dialogs.js');
 const DialogBox = require('react-native-dialogbox').default;
 import ImageResizer from '@bam.tech/react-native-image-resizer';

packages/app-mobile/components/screens/NoteTagsDialog.js

@@ -4,7 +4,7 @@ const { StyleSheet, View, Text, FlatList, TouchableOpacity, TextInput } = requir
 const { connect } = require('react-redux');
 const Tag = require('@joplin/lib/models/Tag').default;
 const { _ } = require('@joplin/lib/locale');
-const { themeStyle } = require('../global-style.js');
+const { themeStyle } = require('../global-style');
 const Icon = require('react-native-vector-icons/Ionicons').default;
 const ModalDialog = require('../ModalDialog');
 const naturalCompare = require('string-natural-compare');

packages/app-mobile/components/screens/Notes.tsx

@@ -7,7 +7,7 @@ import Folder from '@joplin/lib/models/Folder';
 import Tag from '@joplin/lib/models/Tag';
 import Note from '@joplin/lib/models/Note';
 import Setting from '@joplin/lib/models/Setting';
-const { themeStyle } = require('../global-style.js');
+import { themeStyle } from '../global-style';
 import { ScreenHeader } from '../ScreenHeader';
 import { _ } from '@joplin/lib/locale';
 import ActionButton from '../ActionButton';

packages/app-mobile/components/screens/UpgradeSyncTargetScreen.tsx

@@ -4,7 +4,7 @@ import { _ } from '@joplin/lib/locale';
 const { View, Text, ScrollView } = require('react-native');
 
 const { connect } = require('react-redux');
-const { themeStyle } = require('../global-style.js');
+import { themeStyle } from '../global-style';
 import ScreenHeader from '../ScreenHeader';
 
 function UpgradeSyncTargetScreen(props: any) {

packages/app-mobile/components/screens/dropbox-login.js

@@ -8,7 +8,7 @@ const { BaseScreenComponent } = require('../base-screen');
 const DialogBox = require('react-native-dialogbox').default;
 const { dialogs } = require('../../utils/dialogs.js');
 const Shared = require('@joplin/lib/components/shared/dropbox-login-shared');
-const { themeStyle } = require('../global-style.js');
+const { themeStyle } = require('../global-style');
 
 class DropboxLoginScreenComponent extends BaseScreenComponent {
 	constructor() {

packages/app-mobile/components/screens/encryption-config.tsx

@@ -2,7 +2,7 @@ const React = require('react');
 const { TextInput, TouchableOpacity, Linking, View, StyleSheet, Text, Button, ScrollView } = require('react-native');
 const { connect } = require('react-redux');
 import ScreenHeader from '../ScreenHeader';
-const { themeStyle } = require('../global-style.js');
+import { themeStyle } from '../global-style';
 const DialogBox = require('react-native-dialogbox').default;
 const { dialogs } = require('../../utils/dialogs.js');
 import EncryptionService from '@joplin/lib/services/e2ee/EncryptionService';

packages/app-mobile/components/screens/onedrive-login.js

@@ -9,7 +9,7 @@ const { reg } = require('@joplin/lib/registry.js');
 const { _ } = require('@joplin/lib/locale');
 const { BaseScreenComponent } = require('../base-screen');
 const parseUri = require('@joplin/lib/parseUri');
-const { themeStyle } = require('../global-style.js');
+const { themeStyle } = require('../global-style');
 const shim = require('@joplin/lib/shim').default;
 
 class OneDriveLoginScreenComponent extends BaseScreenComponent {

packages/app-mobile/components/screens/search.tsx

@@ -8,7 +8,7 @@ import { _ } from '@joplin/lib/locale';
 import Note from '@joplin/lib/models/Note';
 const { NoteItem } = require('../note-item.js');
 const { BaseScreenComponent } = require('../base-screen');
-const { themeStyle } = require('../global-style.js');
+import { themeStyle } from '../global-style';
 const DialogBox = require('react-native-dialogbox').default;
 import SearchEngineUtils from '@joplin/lib/services/search/SearchEngineUtils';
 import SearchEngine from '@joplin/lib/services/search/SearchEngine';

packages/app-mobile/components/screens/status.js

@@ -7,7 +7,7 @@ const { ScreenHeader } = require('../ScreenHeader');
 const ReportService = require('@joplin/lib/services/ReportService').default;
 const { _ } = require('@joplin/lib/locale');
 const { BaseScreenComponent } = require('../base-screen');
-const { themeStyle } = require('../global-style.js');
+const { themeStyle } = require('../global-style');
 
 class StatusScreenComponent extends BaseScreenComponent {
 	static navigationOptions() {

packages/app-mobile/components/screens/tags.js

@@ -3,7 +3,7 @@ const React = require('react');
 const { View, Text, FlatList, StyleSheet, TouchableOpacity } = require('react-native');
 const { connect } = require('react-redux');
 const Tag = require('@joplin/lib/models/Tag').default;
-const { themeStyle } = require('../global-style.js');
+const { themeStyle } = require('../global-style');
 const { ScreenHeader } = require('../ScreenHeader');
 const { _ } = require('@joplin/lib/locale');
 const { BaseScreenComponent } = require('../base-screen');

packages/app-mobile/components/side-menu-content-note.js

@@ -3,7 +3,7 @@ const Component = React.Component;
 const { TouchableOpacity, Text, StyleSheet, ScrollView, View } = require('react-native');
 const { connect } = require('react-redux');
 const Icon = require('react-native-vector-icons/Ionicons').default;
-const { themeStyle } = require('./global-style.js');
+const { themeStyle } = require('./global-style');
 
 // We need this to suppress the useless warning
 // https://github.com/oblador/react-native-vector-icons/issues/1465

packages/app-mobile/components/side-menu-content.tsx

@@ -7,7 +7,7 @@ import Folder from '@joplin/lib/models/Folder';
 import Synchronizer from '@joplin/lib/Synchronizer';
 import NavService from '@joplin/lib/services/NavService';
 import { _ } from '@joplin/lib/locale';
-const { themeStyle } = require('./global-style.js');
+import { themeStyle } from './global-style';
 import { renderFolders } from '@joplin/lib/components/shared/side-menu-shared';
 import { FolderEntity, FolderIcon, FolderIconType } from '@joplin/lib/services/database/types';
 import { AppState } from '../utils/types';

packages/app-mobile/root.tsx

@@ -76,7 +76,7 @@ const { FileApiDriverLocal } = require('@joplin/lib/file-api-driver-local');
 import ResourceFetcher from '@joplin/lib/services/ResourceFetcher';
 import SearchEngine from '@joplin/lib/services/search/SearchEngine';
 import WelcomeUtils from '@joplin/lib/WelcomeUtils';
-const { themeStyle } = require('./components/global-style.js');
+import { themeStyle } from './components/global-style';
 import SyncTargetRegistry from '@joplin/lib/SyncTargetRegistry';
 const SyncTargetFilesystem = require('@joplin/lib/SyncTargetFilesystem.js');
 const SyncTargetNextcloud = require('@joplin/lib/SyncTargetNextcloud.js');

packages/app-mobile/utils/createRootStyle.ts

@@ -1,4 +1,4 @@
-const { themeStyle } = require('../components/global-style');
+import { themeStyle } from '../components/global-style';
 
 export default (themeId: number) => {
 	const theme = themeStyle(themeId);