Some typescript migration (#1532)

* Typescript migration

* Release notes

* Update error boundary

* Breakup sidebar components

* Account and Sidebar props

* Remove button in Item component + exports cleanup

* Put accountNameStyle to Account

* Revert component ports (separated to another PR)

* Export cleanup

* Remove ErrorBoundary (separated to another PR)

* Sidebar budgetName as ReactNode

packages/desktop-client/src/components/AnimatedRefresh.js → packages/desktop-client/src/components/AnimatedRefresh.tsx

@@ -1,17 +1,25 @@
-import React from 'react';
+import React, { type CSSProperties } from 'react';
 
-import { css } from 'glamor';
+import { keyframes } from 'glamor';
 
 import Refresh from '../icons/v1/Refresh';
 
 import View from './common/View';
 
-let spin = css.keyframes({
+let spin = keyframes({
   '0%': { transform: 'rotateZ(0deg)' },
   '100%': { transform: 'rotateZ(360deg)' },
 });
 
-export default function AnimatedRefresh({ animating, iconStyle }) {
+type AnimatedRefreshProps = {
+  animating: boolean;
+  iconStyle?: CSSProperties;
+};
+
+export default function AnimatedRefresh({
+  animating,
+  iconStyle,
+}: AnimatedRefreshProps) {
   return (
     <View
       style={[{ animation: animating ? `${spin} 1s infinite linear` : null }]}

packages/desktop-client/src/components/FinancesApp.tsx

@@ -32,7 +32,6 @@ import { getIsOutdated, getLatestVersion } from '../util/versions';
 import BankSyncStatus from './BankSyncStatus';
 import { BudgetMonthCountProvider } from './budget/BudgetMonthCountContext';
 import View from './common/View';
-import FloatableSidebar, { SidebarProvider } from './FloatableSidebar';
 import GlobalKeys from './GlobalKeys';
 import { ManageRulesPage } from './ManageRulesPage';
 import Modals from './Modals';
@@ -41,6 +40,7 @@ import { ManagePayeesPage } from './payees/ManagePayeesPage';
 import Reports from './reports';
 import { NarrowAlternate, WideComponent } from './responsive';
 import Settings from './settings';
+import FloatableSidebar, { SidebarProvider } from './sidebar';
 import Titlebar, { TitlebarProvider } from './Titlebar';
 import { TransactionEdit } from './transactions/MobileTransaction';
 

packages/desktop-client/src/components/LoggedInUser.js → packages/desktop-client/src/components/LoggedInUser.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, type CSSProperties } from 'react';
 import { useSelector } from 'react-redux';
 
 import { useActions } from '../hooks/useActions';
@@ -11,7 +11,16 @@ import View from './common/View';
 import { useServerURL } from './ServerContext';
 import { Tooltip } from './tooltips';
 
-export default function LoggedInUser({ hideIfNoServer, style, color }) {
+type LoggedInUserProps = {
+  hideIfNoServer?: boolean;
+  style?: CSSProperties;
+  color?: string;
+};
+export default function LoggedInUser({
+  hideIfNoServer,
+  style,
+  color,
+}: LoggedInUserProps) {
   let userData = useSelector(state => state.user.data);
   let { getUserData, signOut, closeBudget } = useActions();
   let [loading, setLoading] = useState(true);

packages/desktop-client/src/components/ManageRulesPage.js → packages/desktop-client/src/components/ManageRulesPage.tsx

@@ -6,7 +6,7 @@ import { Page } from './Page';
 export function ManageRulesPage() {
   return (
     <Page title="Rules">
-      <ManageRules />
+      <ManageRules isModal={false} payeeId={null} />
     </Page>
   );
 }

packages/desktop-client/src/components/MobileWebMessage.js → packages/desktop-client/src/components/MobileWebMessage.tsx

@@ -40,7 +40,7 @@ export default function MobileWebMessage() {
       let d = new Date();
       d.setTime(d.getTime() + 1000 * 60 * 5);
       document.cookie =
-        'hideMobileMessage=true;path=/;expires=' + d.toGMTString();
+        'hideMobileMessage=true;path=/;expires=' + d.toUTCString();
     }
   }
 

packages/desktop-client/src/components/SyncRefresh.tsx

@@ -0,0 +1,21 @@
+import { type ReactNode, useState } from 'react';
+
+type ChildrenProps = {
+  refreshing: boolean;
+  onRefresh: () => Promise<void>;
+};
+type SyncRefreshProps = {
+  onSync: () => Promise<void>;
+  children: (props: ChildrenProps) => ReactNode;
+};
+export default function SyncRefresh({ onSync, children }: SyncRefreshProps) {
+  let [syncing, setSyncing] = useState(false);
+
+  async function onSync_() {
+    setSyncing(true);
+    await onSync();
+    setSyncing(false);
+  }
+
+  return children({ refreshing: syncing, onRefresh: onSync_ });
+}

packages/desktop-client/src/components/Titlebar.js → packages/desktop-client/src/components/Titlebar.tsx

@@ -4,6 +4,8 @@ import React, {
   useEffect,
   useRef,
   useContext,
+  type ReactNode,
+  type CSSProperties,
 } from 'react';
 import { useSelector } from 'react-redux';
 import { Routes, Route, useLocation, useNavigate } from 'react-router-dom';
@@ -34,16 +36,19 @@ import ExternalLink from './common/ExternalLink';
 import Paragraph from './common/Paragraph';
 import Text from './common/Text';
 import View from './common/View';
-import { useSidebar } from './FloatableSidebar';
 import LoggedInUser from './LoggedInUser';
 import { useServerURL } from './ServerContext';
+import { useSidebar } from './sidebar';
 import useSheetValue from './spreadsheet/useSheetValue';
 import { ThemeSelector } from './ThemeSelector';
 import { Tooltip } from './tooltips';
 
-export let TitlebarContext = createContext();
+export let TitlebarContext = createContext(null);
 
-export function TitlebarProvider({ children }) {
+type TitlebarProviderProps = {
+  children?: ReactNode;
+};
+export function TitlebarProvider({ children }: TitlebarProviderProps) {
   let listeners = useRef([]);
 
   function sendEvent(msg) {
@@ -101,7 +106,10 @@ function PrivacyButton() {
   );
 }
 
-export function SyncButton({ style }) {
+type SyncButtonProps = {
+  style?: CSSProperties;
+};
+export function SyncButton({ style }: SyncButtonProps) {
   let cloudFileId = useSelector(state => state.prefs.local.cloudFileId);
   let { sync } = useActions();
 

packages/desktop-client/src/components/settings/Format.tsx

@@ -10,8 +10,8 @@ import Button from '../common/Button';
 import Select from '../common/Select';
 import Text from '../common/Text';
 import View from '../common/View';
-import { useSidebar } from '../FloatableSidebar';
 import { Checkbox } from '../forms';
+import { useSidebar } from '../sidebar';
 
 import { Setting } from './UI';