🔖 (25.4.0) (#4728)

* 🔖 (25.4.0)

* Remove used release notes

* Remove used release notes

---------

Co-authored-by: matt-fidd <81489167+matt-fidd@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Matt Fiddaman <github@m.fiddaman.uk>

.github/PULL_REQUEST_TEMPLATE.md

@@ -1 +1 @@
-<!-- Thank you for submitting a pull request! Make sure to follow the instructions to write release notes for your PR — it should only take a minute or two: https://github.com/actualbudget/docs#writing-good-release-notes -->
+<!-- Thank you for submitting a pull request! Make sure to follow the instructions to write release notes for your PR — it should only take a minute or two: https://github.com/actualbudget/docs#writing-good-release-notes. Try running yarn generate:release-notes *before* pushing your PR for an interactive experience. -->

.github/workflows/docker-edge.yml

@@ -73,17 +73,19 @@ jobs:
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Download artifacts
-        run: ./packages/sync-server/docker/download-artifacts.sh
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      # Building outside of the docker image allows us to build once and push to multiple platforms
+      # This is faster and avoids yarn memory issues
+      - name: Set up environment
+        uses: ./.github/actions/setup
+      - name: Build Web
+        run: ./bin/package-browser
 
       - name: Build and push image
         uses: docker/build-push-action@v5
         with:
           context: .
           push: ${{ github.event_name != 'pull_request' }}
-          file: packages/sync-server/docker/edge-${{ matrix.os }}.Dockerfile
+          file: packages/sync-server/docker/${{ matrix.os }}.Dockerfile
           platforms: linux/amd64,linux/arm64,linux/arm/v7${{ matrix.os == 'alpine' && ',linux/arm/v6' || '' }}
           tags: ${{ steps.meta.outputs.tags }}
           build-args: |

.github/workflows/docker-release.yml

@@ -70,12 +70,19 @@ jobs:
           username: ${{ github.repository_owner }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
+      # Building outside of the docker image allows us to build once and push to multiple platforms
+      # This is faster and avoids yarn memory issues
+      - name: Set up environment
+        uses: ./.github/actions/setup
+      - name: Build Web
+        run: ./bin/package-browser
+
       - name: Build and push ubuntu image
         uses: docker/build-push-action@v5
         with:
           context: .
           push: true
-          file: packages/sync-server/docker/stable-ubuntu.Dockerfile
+          file: packages/sync-server/docker/ubuntu.Dockerfile
           platforms: linux/amd64,linux/arm64,linux/arm/v7
           tags: ${{ steps.meta.outputs.tags }}
 
@@ -84,6 +91,6 @@ jobs:
         with:
           context: .
           push: true
-          file: packages/sync-server/docker/stable-alpine.Dockerfile
+          file: packages/sync-server/docker/alpine.Dockerfile
           platforms: linux/amd64,linux/arm64,linux/arm/v7,linux/arm/v6
           tags: ${{ steps.alpine-meta.outputs.tags }}

.gitignore

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

.yarnrc.yml

@@ -6,4 +6,4 @@ enableTransparentWorkspaces: false
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.3.1.cjs
+yarnPath: .yarn/releases/yarn-4.7.0.cjs

README.md

@@ -68,6 +68,10 @@ To add new feature requests, open a new Issue of the "Feature Request" type.
 
 Make Actual Budget accessible to more people by helping with the [Internationalization](https://actualbudget.org/docs/contributing/i18n/) of Actual. We are using a crowd sourcing tool to manage the translations, see our [Weblate Project](https://hosted.weblate.org/projects/actualbudget/). Weblate proudly supports open-source software projects through their [Libre plan](https://weblate.org/en/hosting/#libre). 
 
+<a href="https://hosted.weblate.org/engage/actualbudget/">
+<img src="https://hosted.weblate.org/widget/actualbudget/actual/287x66-grey.png" alt="Translation status" />
+</a>
+
 ## Repo Activity
 
 ![Alt](https://repobeats.axiom.co/api/embed/e20537dd8b74956f86736726ccfbc6f0565bec22.svg 'Repobeats analytics image')

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

@@ -34,8 +34,6 @@ if [ "$OSTYPE" == "msys" ]; then
     fi
 fi
 
-yarn workspace loot-core build:node
-
 # Get translations
 echo "Updating translations..."
 if ! [ -d packages/desktop-client/locale ]; then
@@ -46,8 +44,13 @@ git pull
 popd > /dev/null
 packages/desktop-client/bin/remove-untranslated-languages
 
+yarn workspace loot-core build:node
 yarn workspace @actual-app/web build --mode=desktop # electron specific build
 
+# required for running the sync-server server
+yarn workspace loot-core build:browser
+yarn workspace @actual-app/web build:browser
+
 yarn workspace desktop-electron update-client
 
 (

bin/release-note-generator.ts

@@ -0,0 +1,182 @@
+import { exec } from 'node:child_process';
+import { existsSync, writeFile } from 'node:fs';
+import { exit } from 'node:process';
+
+import prompts from 'prompts';
+
+async function run() {
+  const username = await execAsync(
+    // eslint-disable-next-line rulesdir/typography
+    "gh api user --jq '.login'",
+    'To avoid having to enter your username, consider installing the official GitHub CLI (https://github.com/cli/cli) and logging in with `gh auth login`.',
+  );
+  const activePr = await getActivePr(username);
+  if (activePr) {
+    console.log(
+      `Found potentially matching PR ${activePr.number}: ${activePr.title}`,
+    );
+  }
+  const prNumber = activePr?.number ?? (await getNextPrNumber());
+
+  const result = await prompts([
+    {
+      name: 'githubUsername',
+      message: 'Comma-separated GitHub username(s)',
+      type: 'text',
+      initial: username,
+    },
+    {
+      name: 'pullRequestNumber',
+      message: 'PR Number',
+      type: 'number',
+      initial: prNumber,
+    },
+    {
+      name: 'releaseNoteType',
+      message: 'Release Note Type',
+      type: 'select',
+      choices: [
+        { title: 'Features', value: 'Features' },
+        { title: 'Enhancements', value: 'Enhancements' },
+        { title: 'Bugfix', value: 'Bugfix' },
+        { title: 'Maintenance', value: 'Maintenance' },
+      ],
+    },
+    {
+      name: 'oneLineSummary',
+      message: 'Brief Summary',
+      type: 'text',
+      initial: activePr?.title,
+    },
+  ]);
+
+  if (
+    !result.githubUsername ||
+    !result.oneLineSummary ||
+    !result.releaseNoteType
+  ) {
+    console.log('All questions must be answered. Exiting');
+    exit(1);
+  }
+
+  const fileContents = getFileContents(
+    result.releaseNoteType,
+    result.githubUsername,
+    result.oneLineSummary,
+  );
+
+  const filepath = `./upcoming-release-notes/${prNumber}.md`;
+  if (existsSync(filepath)) {
+    const { confirm } = await prompts({
+      name: 'confirm',
+      type: 'confirm',
+      message: `This will overwrite the existing release note ${filepath} Are you sure?`,
+    });
+    if (!confirm) {
+      console.log('Exiting');
+      exit(1);
+    }
+  }
+
+  writeFile(filepath, fileContents, err => {
+    if (err) {
+      console.error('Failed to write release note file:', err);
+      exit(1);
+    } else {
+      console.log(
+        `Release note generated successfully: ./upcoming-release-notes/${prNumber}.md`,
+      );
+    }
+  });
+}
+
+// makes an attempt to find an existing open PR from <username>:<branch>
+async function getActivePr(
+  username: string,
+): Promise<{ number: number; title: string } | undefined> {
+  if (!username) {
+    return undefined;
+  }
+  const branchName = await execAsync('git rev-parse --abbrev-ref HEAD');
+  if (!branchName) {
+    return undefined;
+  }
+  const forkHead = `${username}:${branchName}`;
+  return getPrNumberFromHead(forkHead);
+}
+
+async function getPrNumberFromHead(
+  head: string,
+): Promise<{ number: number; title: string } | undefined> {
+  try {
+    // head is a weird query parameter in this API call. If nothing matches, it
+    // will return as if the head query parameter doesn't exist. To get around
+    // this, we make the page size 2 and only return the number if the length.
+    const resp = await fetch(
+      'https://api.github.com/repos/actualbudget/actual/pulls?state=open&per_page=2&head=' +
+        head,
+    );
+    if (!resp.ok) {
+      console.warn('error fetching from github pulls api:', resp.status);
+      return undefined;
+    }
+    const ghResponse = await resp.json();
+    if (ghResponse?.length === 1) {
+      return ghResponse[0];
+    } else {
+      return undefined;
+    }
+  } catch (e) {
+    console.warn('error fetching from github pulls api:', e);
+  }
+}
+
+async function getNextPrNumber(): Promise<number> {
+  try {
+    const resp = await fetch(
+      'https://api.github.com/repos/actualbudget/actual/issues?state=all&per_page=1',
+    );
+    if (!resp.ok) {
+      throw new Error(`API responded with status: ${resp.status}`);
+    }
+    const ghResponse = await resp.json();
+    const latestPrNumber = ghResponse?.[0]?.number;
+    if (!latestPrNumber) {
+      console.error(
+        'Could not find latest issue number in GitHub API response',
+        ghResponse,
+      );
+      exit(1);
+    }
+    return latestPrNumber + 1;
+  } catch (error) {
+    console.error('Failed to fetch next PR number:', error);
+    exit(1);
+  }
+}
+
+function getFileContents(type: string, username: string, summary: string) {
+  return `---
+category: ${type}
+authors: [${username}]
+---
+
+${summary}
+`;
+}
+
+// simple exec that fails silently and returns an empty string on failure
+async function execAsync(cmd: string, errorLog?: string): Promise<string> {
+  return new Promise<string>(res => {
+    exec(cmd, (error, stdout) => {
+      if (error) {
+        console.log(errorLog);
+        res('');
+      } else {
+        res(stdout.trim());
+      }
+    });
+  });
+}
+
+run();

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: {

package.json

@@ -22,18 +22,21 @@
     "start:server": "yarn workspace @actual-app/sync-server start",
     "start:server-monitor": "yarn workspace @actual-app/sync-server start-monitor",
     "start:server-dev": "NODE_ENV=development BROWSER_OPEN=localhost:5006 yarn npm-run-all --parallel 'start:server-monitor' 'start'",
-    "start:desktop": "yarn rebuild-electron && npm-run-all --parallel 'start:desktop-*'",
+    "start:desktop": "yarn desktop-dependencies && npm-run-all --parallel 'start:desktop-*'",
+    "desktop-dependencies": "yarn rebuild-electron && yarn workspace loot-core build:browser",
     "start:desktop-node": "yarn workspace loot-core watch:node",
     "start:desktop-client": "yarn workspace @actual-app/web watch",
+    "start:desktop-server-client": "yarn workspace @actual-app/web build:browser",
     "start:desktop-electron": "yarn workspace desktop-electron watch",
-    "start:electron": "yarn start:desktop",
     "start:browser": "npm-run-all --parallel 'start:browser-*'",
     "start:browser-backend": "yarn workspace loot-core watch:browser",
     "start:browser-frontend": "yarn workspace @actual-app/web start:browser",
+    "build:server": "yarn build:browser",
     "build:browser": "./bin/package-browser",
     "build:desktop": "./bin/package-electron",
     "build:api": "yarn workspace @actual-app/api build",
     "generate:i18n": "yarn workspace @actual-app/web generate:i18n",
+    "generate:release-notes": "ts-node ./bin/release-note-generator.ts",
     "test": "yarn workspaces foreach --all --parallel --verbose run test",
     "test:debug": "yarn workspaces foreach --all --verbose run test",
     "e2e": "yarn workspaces foreach --all --parallel --verbose run e2e",
@@ -49,26 +52,29 @@
     "prepare": "husky"
   },
   "devDependencies": {
-    "@typescript-eslint/parser": "^8.18.1",
+    "@types/prompts": "^2.4.9",
+    "@typescript-eslint/parser": "^8.26.1",
     "cross-env": "^7.0.3",
-    "eslint": "^9.17.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-import-resolver-typescript": "^3.7.0",
+    "eslint": "^9.22.0",
+    "eslint-config-prettier": "^10.1.1",
+    "eslint-import-resolver-typescript": "^4.2.2",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-prettier": "5.2.3",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-rulesdir": "^0.2.2",
     "globals": "^15.13.0",
-    "husky": "^9.0.11",
-    "lint-staged": "^15.2.9",
-    "node-jq": "^4.0.1",
+    "husky": "^9.1.7",
+    "lint-staged": "^15.5.0",
+    "node-jq": "^4.0.2",
     "npm-run-all": "^4.1.5",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.3",
+    "prompts": "^2.4.2",
     "source-map-support": "^0.5.21",
-    "typescript": "^5.5.4",
-    "typescript-eslint": "^8.18.1",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.8.2",
+    "typescript-eslint": "^8.26.1",
     "typescript-strict-plugin": "^2.4.4"
   },
   "resolutions": {
@@ -80,7 +86,7 @@
   "lint-staged": {
     "*.{js,jsx,ts,tsx,md,json}": "prettier --write"
   },
-  "packageManager": "yarn@4.3.1",
+  "packageManager": "yarn@4.7.0",
   "browserslist": [
     "electron 24.0",
     "defaults"

packages/api/__snapshots__/methods.test.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`API setup and teardown successfully loads budget 1`] = `
-Array [
+[
   "2016-10",
   "2016-11",
   "2016-12",

packages/api/jest.config.js

@@ -1,7 +1,5 @@
 module.exports = {
   moduleFileExtensions: [
-    'testing.js',
-    'testing.ts',
     'api.js',
     'api.ts',
     'api.tsx',

packages/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actual-app/api",
-  "version": "25.3.0",
+  "version": "25.4.0",
   "license": "MIT",
   "description": "An API for Actual",
   "engines": {
@@ -23,18 +23,18 @@
   },
   "dependencies": {
     "@actual-app/crdt": "workspace:^",
-    "better-sqlite3": "^11.7.0",
-    "compare-versions": "^6.1.0",
+    "better-sqlite3": "^11.9.1",
+    "compare-versions": "^6.1.1",
     "node-fetch": "^3.3.2",
     "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@swc/core": "^1.5.3",
     "@swc/jest": "^0.2.36",
-    "@types/jest": "^27.5.2",
-    "@types/uuid": "^9.0.2",
-    "jest": "^27.5.1",
-    "tsc-alias": "^1.8.8",
-    "typescript": "^5.5.4"
+    "@types/jest": "^29.5.14",
+    "@types/uuid": "^9.0.8",
+    "jest": "^29.7.0",
+    "tsc-alias": "^1.8.11",
+    "typescript": "^5.8.2"
   }
 }

packages/api/tsconfig.dist.json

@@ -15,5 +15,5 @@
     }
   },
   "include": ["."],
-  "exclude": ["**/node_modules/*", "dist", "@types"]
+  "exclude": ["**/node_modules/*", "dist", "@types", "*.test.ts"]
 }

packages/component-library/package.json

@@ -3,18 +3,28 @@
   "version": "0.0.1",
   "license": "MIT",
   "peerDependencies": {
-    "react": ">=18.2"
+    "react": ">=18.2",
+    "react-dom": ">=18.2"
   },
   "dependencies": {
-    "@emotion/css": "^11.13.4",
-    "react-aria-components": "^1.4.1"
+    "@emotion/css": "^11.13.5",
+    "react-aria-components": "^1.7.1",
+    "usehooks-ts": "^3.0.2"
   },
   "devDependencies": {
-    "@types/react": "^18.2.0",
-    "react": "18.2.0"
+    "@svgr/cli": "^8.1.0",
+    "@types/react": "^18.2.79",
+    "react": "18.2.0",
+    "react-dom": "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 +32,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 +48,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 { useProperFocus } from '../../hooks/useProperFocus';
-import { theme, type CSSProperties } from '../../style';
+import { styles, type CSSProperties } from './styles';
+import { theme } from './theme';
 
 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/Menu.tsx

@@ -3,11 +3,13 @@ import {
   useEffect,
   useRef,
   useState,
+  type ComponentProps,
   type ComponentType,
   type SVGProps,
   type CSSProperties,
 } from 'react';
 
+import { Button } from './Button';
 import { Text } from './Text';
 import { theme } from './theme';
 import { Toggle } from './Toggle';
@@ -61,6 +63,7 @@ type MenuProps<NameType> = {
   style?: CSSProperties;
   className?: string;
   getItemStyle?: (item: MenuItemObject<NameType>) => CSSProperties;
+  slot?: ComponentProps<typeof Button>['slot'];
 };
 
 export function Menu<const NameType = string>({
@@ -71,6 +74,7 @@ export function Menu<const NameType = string>({
   style,
   className,
   getItemStyle,
+  slot,
 }: MenuProps<NameType>) {
   const elRef = useRef<HTMLDivElement>(null);
   const items = allItems.filter(x => x);
@@ -161,9 +165,10 @@ export function Menu<const NameType = string>({
         const Icon = item.icon;
 
         return (
-          <View
-            role="button"
+          <Button
             key={String(item.name)}
+            variant="bare"
+            slot={slot}
             style={{
               cursor: 'default',
               padding: 10,
@@ -179,11 +184,9 @@ export function Menu<const NameType = string>({
                 }),
               ...(!isLabel(item) && getItemStyle?.(item)),
             }}
-            onPointerEnter={() => setHoveredIndex(idx)}
-            onPointerLeave={() => setHoveredIndex(null)}
-            onPointerUp={e => {
-              e.stopPropagation();
-
+            onHoverStart={() => setHoveredIndex(idx)}
+            onHoverEnd={() => setHoveredIndex(null)}
+            onPress={() => {
               if (
                 !item.disabled &&
                 item.toggle === undefined &&
@@ -232,7 +235,7 @@ export function Menu<const NameType = string>({
               </View>
             )}
             {item.key && <Keybinding keyName={item.key} />}
-          </View>
+          </Button>
         );
       })}
       {footer}

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 { Menu } from '@actual-app/components/menu';
-import { Popover } from '@actual-app/components/popover';
-import { View } from '@actual-app/components/view';
-
-import { SvgExpandArrow } from '../../icons/v0';
+import { Button } from './Button';
+import { SvgExpandArrow } from './icons/v0';
+import { Menu } from './Menu';
+import { Popover } from './Popover';
+import { View } from './View';
 
 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;