Await createBudget

* [TypeScript] Make db.all generic to make it easy to type DB query results

* Release notes

* Fix type

* Update return type

.gitignore

@@ -53,3 +53,6 @@ bundle.mobile.js.map
 
 # build output
 package.tgz
+
+# Fly.io configuration
+fly.toml

bin/package-browser

@@ -9,6 +9,7 @@ if ! [ -d packages/desktop-client/locale ]; then
     git clone https://github.com/actualbudget/translations packages/desktop-client/locale
 fi
 pushd packages/desktop-client/locale > /dev/null
+git checkout .
 git pull
 popd > /dev/null
 packages/desktop-client/bin/remove-untranslated-languages

bin/package-electron

@@ -42,6 +42,7 @@ if ! [ -d packages/desktop-client/locale ]; then
     git clone https://github.com/actualbudget/translations packages/desktop-client/locale
 fi
 pushd packages/desktop-client/locale > /dev/null
+git checkout .
 git pull
 popd > /dev/null
 packages/desktop-client/bin/remove-untranslated-languages

eslint.config.mjs

@@ -94,6 +94,7 @@ export default [
       'packages/api/@types',
       'packages/api/migrations',
       'packages/crdt/dist',
+      'packages/component-library/src/icons/**/*',
       'packages/desktop-client/bundle.browser.js',
       'packages/desktop-client/build/',
       'packages/desktop-client/build-electron/',
@@ -102,7 +103,6 @@ export default [
       'packages/desktop-client/public/data/',
       'packages/desktop-client/**/node_modules/*',
       'packages/desktop-client/node_modules/',
-      'packages/desktop-client/src/icons/**/*',
       'packages/desktop-client/test-results/',
       'packages/desktop-client/playwright-report/',
       'packages/desktop-electron/client-build/',
@@ -789,7 +789,6 @@ export default [
       'packages/desktop-client/src/components/select/DateSelect.tsx',
       'packages/desktop-client/src/components/sidebar/Tools.tsx',
       'packages/desktop-client/src/components/sort.tsx',
-      'packages/desktop-client/src/components/spreadsheet/useSheetValue.ts',
     ],
 
     rules: {

packages/component-library/package.json

@@ -7,14 +7,22 @@
   },
   "dependencies": {
     "@emotion/css": "^11.13.4",
-    "react-aria-components": "^1.4.1"
+    "react-aria-components": "^1.7.0",
+    "usehooks-ts": "^3.0.1"
   },
   "devDependencies": {
+    "@svgr/cli": "^8.1.0",
     "@types/react": "^18.2.0",
     "react": "18.2.0"
   },
   "exports": {
-    "./icons/*": "./src/icons/*.tsx",
+    "./hooks/*": "./src/hooks/*.ts",
+    "./icons/logo": "./src/icons/logo/index.ts",
+    "./icons/v0": "./src/icons/v0/index.ts",
+    "./icons/v1": "./src/icons/v1/index.ts",
+    "./icons/v2": "./src/icons/v2/index.ts",
+    "./icons/AnimatedLoading": "./src/icons/AnimatedLoading.tsx",
+    "./icons/Loading": "./src/icons/Loading.tsx",
     "./aligned-text": "./src/AlignedText.tsx",
     "./block": "./src/Block.tsx",
     "./button": "./src/Button.tsx",
@@ -22,10 +30,12 @@
     "./form-error": "./src/FormError.tsx",
     "./initial-focus": "./src/InitialFocus.ts",
     "./inline-field": "./src/InlineField.tsx",
+    "./input": "./src/Input.tsx",
     "./label": "./src/Label.tsx",
     "./menu": "./src/Menu.tsx",
     "./paragraph": "./src/Paragraph.tsx",
     "./popover": "./src/Popover.tsx",
+    "./select": "./src/Select.tsx",
     "./space-between": "./src/SpaceBetween.tsx",
     "./stack": "./src/Stack.tsx",
     "./styles": "./src/styles.ts",
@@ -36,5 +46,8 @@
     "./toggle": "./src/Toggle.tsx",
     "./tooltip": "./src/Tooltip.tsx",
     "./view": "./src/View.tsx"
+  },
+  "scripts": {
+    "generate:icons": "rm src/icons/*/*.tsx; cd src/icons && svgr --template template.ts --index-template index-template.ts --typescript --expand-props start -d . ."
   }
 }

packages/component-library/src/Input.tsx

@@ -2,15 +2,12 @@ import React, {
   type InputHTMLAttributes,
   type KeyboardEvent,
   type Ref,
-  useRef,
 } from 'react';
 
-import { styles } from '@actual-app/components/styles';
 import { css, cx } from '@emotion/css';
 
-import { useMergedRefs } from '../../hooks/useMergedRefs';
+import { styles, type CSSProperties } from './styles';
-import { useProperFocus } from '../../hooks/useProperFocus';
+import { theme } from './theme';
-import { theme, type CSSProperties } from '../../style';
 
 export const defaultInputStyle = {
   outline: 0,
@@ -29,7 +26,6 @@ type InputProps = InputHTMLAttributes<HTMLInputElement> & {
   onEscape?: (event: KeyboardEvent<HTMLInputElement>) => void;
   onChangeValue?: (newValue: string) => void;
   onUpdate?: (newValue: string) => void;
-  focused?: boolean;
 };
 
 export function Input({
@@ -39,18 +35,12 @@ export function Input({
   onEscape,
   onChangeValue,
   onUpdate,
-  focused,
   className,
   ...nativeProps
 }: InputProps) {
-  const ref = useRef<HTMLInputElement>(null);
-  useProperFocus(ref, focused);
-
-  const mergedRef = useMergedRefs<HTMLInputElement>(ref, inputRef);
-
   return (
     <input
-      ref={mergedRef}
+      ref={inputRef}
       className={cx(
         css(
           defaultInputStyle,

packages/component-library/src/Select.tsx

@@ -1,11 +1,10 @@
 import { useRef, useState, type CSSProperties } from 'react';
 
-import { Button } from '@actual-app/components/button';
+import { Button } from './Button';
-import { Menu } from '@actual-app/components/menu';
+import { SvgExpandArrow } from './icons/v0';
-import { Popover } from '@actual-app/components/popover';
+import { Menu } from './Menu';
-import { View } from '@actual-app/components/view';
+import { Popover } from './Popover';
-
+import { View } from './View';
-import { SvgExpandArrow } from '../../icons/v0';
 
 function isValueOption<Value>(
   option: readonly [Value, string] | typeof Menu.line,

packages/component-library/src/hooks/useResponsive.ts

@@ -0,0 +1,23 @@
+import { useWindowSize } from 'usehooks-ts';
+
+import { breakpoints } from '../tokens';
+
+export function useResponsive() {
+  const { height, width } = useWindowSize({
+    debounceDelay: 250,
+  });
+
+  // Possible view modes: narrow, small, medium, wide
+  // To check if we're at least small width, check !isNarrowWidth
+  return {
+    // atLeastMediumWidth is provided to avoid checking (isMediumWidth || isWideWidth)
+    atLeastMediumWidth: width >= breakpoints.medium,
+    isNarrowWidth: width < breakpoints.small,
+    isSmallWidth: width >= breakpoints.small && width < breakpoints.medium,
+    isMediumWidth: width >= breakpoints.medium && width < breakpoints.wide,
+    // No atLeastWideWidth because that's identical to isWideWidth
+    isWideWidth: width >= breakpoints.wide,
+    height,
+    width,
+  };
+}

packages/component-library/src/icons/index-template.ts

@@ -6,8 +6,8 @@ function indexTemplate(filePaths) {
     const basename = path.basename(filePath, path.extname(filePath));
     const exportName = `Svg${basename}`;
     return `export { ${exportName} } from './${basename}'`;
-  })
+  });
   return exportEntries.join('\n');
 }
 
-module.exports = indexTemplate
+module.exports = indexTemplate;

packages/component-library/src/icons/template.ts

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-const template = ({ imports, interfaces, componentName, props, jsx }, { tpl }) => {
+const tmpl = ({ imports, interfaces, componentName, props, jsx }, { tpl }) => {
   return tpl`
 ${imports};
 
@@ -8,7 +8,7 @@ ${interfaces};
 export const ${componentName} = (${props}) => (
   ${jsx}
 );
-`
+`;
-}
+};
 
-module.exports = template
+module.exports = tmpl;