code review

packages/component-library/package.json

@@ -19,7 +19,6 @@
     "vitest": "^3.2.4"
   },
   "exports": {
-    ".": "./src/index.ts",
     "./hooks/*": "./src/hooks/*.ts",
     "./icons/logo": "./src/icons/logo/index.ts",
     "./icons/v0": "./src/icons/v0/index.ts",
@@ -51,7 +50,7 @@
     "./tooltip": "./src/Tooltip.tsx",
     "./view": "./src/View.tsx",
     "./color-picker": "./src/ColorPicker.tsx",
-    "./props/*": "./src/props/*.ts"
+    "./modal": "./src/Modal.ts"
   },
   "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/index.ts

@@ -1,34 +0,0 @@
-// Components
-export { AlignedText } from './AlignedText';
-export { Block } from './Block';
-export { Button, ButtonWithLoading } from './Button';
-export { Card } from './Card';
-export { ColorPicker } from './ColorPicker';
-export { FormError } from './FormError';
-export { InitialFocus } from './InitialFocus';
-export { InlineField } from './InlineField';
-export { Input } from './Input';
-export { Label } from './Label';
-export { Menu } from './Menu';
-export { Paragraph } from './Paragraph';
-export { Popover } from './Popover';
-export { Select } from './Select';
-export { SpaceBetween } from './SpaceBetween';
-export { Stack } from './Stack';
-export { Text } from './Text';
-export { TextOneLine } from './TextOneLine';
-export { Toggle } from './Toggle';
-export { Tooltip } from './Tooltip';
-export { View } from './View';
-
-export * from './icons/v2';
-export * from './icons/logo';
-export { AnimatedLoading } from './icons/AnimatedLoading';
-export { SvgLoading as Loading } from './icons/Loading';
-
-// Styles, Theme, Tokens
-export * from './styles';
-export * from './theme';
-export * from './tokens';
-
-export type * from './props/modalProps';

packages/desktop-client/src/spreadsheet/bindings.ts

@@ -1,12 +1,11 @@
+import { q } from 'loot-core/shared/query';
+import type { AccountEntity, CategoryEntity } from 'loot-core/types/models';
 import {
   parametrizedField,
   type SheetFields,
   type Binding,
   type SheetNames,
-} from '@actual-app/plugins-core';
-
-import { q } from 'loot-core/shared/query';
-import type { AccountEntity, CategoryEntity } from 'loot-core/types/models';
+} from '@actual-app/shared-types/spreadsheet';
 
 import { uncategorizedTransactions } from '@desktop-client/queries';
 

packages/plugins-core/package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.1.0",
   "description": "Core plugin system for Actual Budget",
-  "main": "src/client.ts",
+  "main": "build/client.js",
   "types": "src/client.ts",
   "scripts": {
     "dev": "vite",
@@ -22,6 +22,12 @@
     "vite-plugin-dts": "^4.5.3"
   },
   "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "import": "./build/client.js",
+      "require": "./build/client.cjs"
+    },
     "./server": {
       "types": "./src/server.ts",
       "development": "./src/server.ts",

packages/plugins-core/src/BasicModalComponents.tsx

@@ -1,16 +1,18 @@
-import React, { ReactNode, useEffect, useRef, useState } from 'react';
+import React, {
+  CSSProperties,
+  ReactNode,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 
-import {
-  Button,
-  CSSProperties,
-  Input,
-  styles,
-  SvgLogo,
-  View,
-} from '@actual-app/components';
 import { SvgDelete } from '@actual-app/components/icons/v0';
-
+import { View } from '@actual-app/components/view';
+import { Button } from '@actual-app/components/button';
+import { Input } from '@actual-app/components/input';
+import { styles } from '@actual-app/components/styles';
+import { SvgLogo } from '@actual-app/components/icons/logo';
 type ModalButtonsProps = {
   style?: CSSProperties;
   leftContent?: ReactNode;

packages/plugins-core/src/client.ts

@@ -9,9 +9,6 @@ export {
 // Client-side middleware
 export { initializePlugin } from './middleware';
 
-// Icons, styles, theme (client-side only)
-export * from '@actual-app/components';
-
 // Client-side hooks (React hooks)
 export { useReport } from './utils';
 
@@ -25,12 +22,9 @@ export * from '@actual-app/shared-types/spreadsheet';
 export type {
   ActualPlugin,
   ActualPluginInitialized,
-  ThemeColorTypes,
   HostContext,
 } from './types/actualPlugin';
 
-export type * from '@actual-app/components/props/modalProps';
-
 export type {
   ActualPluginToolkit,
   ActualPluginToolkitFunctions,

packages/plugins-core/src/middleware.ts

@@ -1,7 +1,7 @@
 import React, { ReactElement } from 'react';
 import { initReactI18next } from 'react-i18next';
 
-import type { BasicModalProps } from '@actual-app/components';
+import type { BasicModalProps } from '@actual-app/components/modal';
 import ReactDOM from 'react-dom/client';
 
 import {
@@ -88,9 +88,6 @@ export function initializePlugin(
           );
         },
 
-        // Theme methods - passed through from host context
-        registerTheme: context.registerTheme,
-
         // Report and spreadsheet utilities - passed through from host context
         createSpreadsheet: context.createSpreadsheet,
         makeFilters: context.makeFilters,

packages/plugins-core/src/types/actualPlugin.ts

@@ -1,6 +1,6 @@
 import type { ReactElement } from 'react';
 
-import type { BasicModalProps } from '@actual-app/components';
+import type { BasicModalProps } from '@actual-app/components/modal';
 import type { Query, QueryBuilder } from '@actual-app/query';
 import type {
   AccountEntity,
@@ -10,7 +10,6 @@ import type {
   ScheduleEntity,
 } from '@actual-app/shared-types';
 import type { i18n } from 'i18next';
-
 export type SlotLocations =
   | 'sidebar-main-menu'
   | 'sidebar-more-menu'
@@ -40,256 +39,6 @@ export type PluginFilterResult = {
 };
 
 // Simple color mapping type for theme methods
-export type ThemeColorTypes = {
-  // Page colors
-  pageBackground?: string;
-  pageBackgroundModalActive?: string;
-  pageBackgroundTopLeft?: string;
-  pageBackgroundBottomRight?: string;
-  pageBackgroundLineTop?: string;
-  pageBackgroundLineMid?: string;
-  pageBackgroundLineBottom?: string;
-  pageText?: string;
-  pageTextLight?: string;
-  pageTextSubdued?: string;
-  pageTextDark?: string;
-  pageTextPositive?: string;
-  pageTextLink?: string;
-  pageTextLinkLight?: string;
-
-  // Card colors
-  cardBackground?: string;
-  cardBorder?: string;
-  cardShadow?: string;
-
-  // Table colors
-  tableBackground?: string;
-  tableRowBackgroundHover?: string;
-  tableText?: string;
-  tableTextLight?: string;
-  tableTextSubdued?: string;
-  tableTextSelected?: string;
-  tableTextHover?: string;
-  tableTextInactive?: string;
-  tableHeaderText?: string;
-  tableHeaderBackground?: string;
-  tableBorder?: string;
-  tableBorderSelected?: string;
-  tableBorderHover?: string;
-  tableBorderSeparator?: string;
-  tableRowBackgroundHighlight?: string;
-  tableRowBackgroundHighlightText?: string;
-  tableRowHeaderBackground?: string;
-  tableRowHeaderText?: string;
-
-  // Sidebar colors
-  sidebarBackground?: string;
-  sidebarItemBackgroundPending?: string;
-  sidebarItemBackgroundPositive?: string;
-  sidebarItemBackgroundFailed?: string;
-  sidebarItemBackgroundHover?: string;
-  sidebarItemAccentSelected?: string;
-  sidebarItemText?: string;
-  sidebarItemTextSelected?: string;
-
-  // Menu colors
-  menuBackground?: string;
-  menuItemBackground?: string;
-  menuItemBackgroundHover?: string;
-  menuItemText?: string;
-  menuItemTextHover?: string;
-  menuItemTextSelected?: string;
-  menuItemTextHeader?: string;
-  menuBorder?: string;
-  menuBorderHover?: string;
-  menuKeybindingText?: string;
-  menuAutoCompleteBackground?: string;
-  menuAutoCompleteBackgroundHover?: string;
-  menuAutoCompleteText?: string;
-  menuAutoCompleteTextHover?: string;
-  menuAutoCompleteTextHeader?: string;
-  menuAutoCompleteItemTextHover?: string;
-  menuAutoCompleteItemText?: string;
-
-  // Modal colors
-  modalBackground?: string;
-  modalBorder?: string;
-
-  // Mobile colors
-  mobileHeaderBackground?: string;
-  mobileHeaderText?: string;
-  mobileHeaderTextSubdued?: string;
-  mobileHeaderTextHover?: string;
-  mobilePageBackground?: string;
-  mobileNavBackground?: string;
-  mobileNavItem?: string;
-  mobileNavItemSelected?: string;
-  mobileAccountShadow?: string;
-  mobileAccountText?: string;
-  mobileTransactionSelected?: string;
-  mobileViewTheme?: string;
-  mobileConfigServerViewTheme?: string;
-
-  // Markdown colors
-  markdownNormal?: string;
-  markdownDark?: string;
-  markdownLight?: string;
-
-  // Button colors - Menu buttons
-  buttonMenuText?: string;
-  buttonMenuTextHover?: string;
-  buttonMenuBackground?: string;
-  buttonMenuBackgroundHover?: string;
-  buttonMenuBorder?: string;
-  buttonMenuSelectedText?: string;
-  buttonMenuSelectedTextHover?: string;
-  buttonMenuSelectedBackground?: string;
-  buttonMenuSelectedBackgroundHover?: string;
-  buttonMenuSelectedBorder?: string;
-
-  // Button colors - Primary buttons
-  buttonPrimaryText?: string;
-  buttonPrimaryTextHover?: string;
-  buttonPrimaryBackground?: string;
-  buttonPrimaryBackgroundHover?: string;
-  buttonPrimaryBorder?: string;
-  buttonPrimaryShadow?: string;
-  buttonPrimaryDisabledText?: string;
-  buttonPrimaryDisabledBackground?: string;
-  buttonPrimaryDisabledBorder?: string;
-
-  // Button colors - Normal buttons
-  buttonNormalText?: string;
-  buttonNormalTextHover?: string;
-  buttonNormalBackground?: string;
-  buttonNormalBackgroundHover?: string;
-  buttonNormalBorder?: string;
-  buttonNormalShadow?: string;
-  buttonNormalSelectedText?: string;
-  buttonNormalSelectedBackground?: string;
-  buttonNormalDisabledText?: string;
-  buttonNormalDisabledBackground?: string;
-  buttonNormalDisabledBorder?: string;
-
-  // Button colors - Bare buttons
-  buttonBareText?: string;
-  buttonBareTextHover?: string;
-  buttonBareBackground?: string;
-  buttonBareBackgroundHover?: string;
-  buttonBareBackgroundActive?: string;
-  buttonBareDisabledText?: string;
-  buttonBareDisabledBackground?: string;
-
-  // Calendar colors
-  calendarText?: string;
-  calendarBackground?: string;
-  calendarItemText?: string;
-  calendarItemBackground?: string;
-  calendarSelectedBackground?: string;
-  calendarCellBackground?: string;
-
-  // Status colors - Notice
-  noticeBackground?: string;
-  noticeBackgroundLight?: string;
-  noticeBackgroundDark?: string;
-  noticeText?: string;
-  noticeTextLight?: string;
-  noticeTextDark?: string;
-  noticeTextMenu?: string;
-  noticeTextMenuHover?: string;
-  noticeBorder?: string;
-
-  // Status colors - Warning
-  warningBackground?: string;
-  warningText?: string;
-  warningTextLight?: string;
-  warningTextDark?: string;
-  warningBorder?: string;
-
-  // Status colors - Error
-  errorBackground?: string;
-  errorText?: string;
-  errorTextDark?: string;
-  errorTextDarker?: string;
-  errorTextMenu?: string;
-  errorBorder?: string;
-
-  // Status colors - Upcoming
-  upcomingBackground?: string;
-  upcomingText?: string;
-  upcomingBorder?: string;
-
-  // Form colors
-  formLabelText?: string;
-  formLabelBackground?: string;
-  formInputBackground?: string;
-  formInputBackgroundSelected?: string;
-  formInputBackgroundSelection?: string;
-  formInputBorder?: string;
-  formInputTextReadOnlySelection?: string;
-  formInputBorderSelected?: string;
-  formInputText?: string;
-  formInputTextSelected?: string;
-  formInputTextPlaceholder?: string;
-  formInputTextPlaceholderSelected?: string;
-  formInputTextSelection?: string;
-  formInputShadowSelected?: string;
-  formInputTextHighlight?: string;
-
-  // Checkbox colors
-  checkboxText?: string;
-  checkboxBackgroundSelected?: string;
-  checkboxBorderSelected?: string;
-  checkboxShadowSelected?: string;
-  checkboxToggleBackground?: string;
-  checkboxToggleBackgroundSelected?: string;
-  checkboxToggleDisabled?: string;
-
-  // Pill colors
-  pillBackground?: string;
-  pillBackgroundLight?: string;
-  pillText?: string;
-  pillTextHighlighted?: string;
-  pillBorder?: string;
-  pillBorderDark?: string;
-  pillBackgroundSelected?: string;
-  pillTextSelected?: string;
-  pillBorderSelected?: string;
-  pillTextSubdued?: string;
-
-  // Reports colors
-  reportsRed?: string;
-  reportsBlue?: string;
-  reportsGreen?: string;
-  reportsGray?: string;
-  reportsLabel?: string;
-  reportsInnerLabel?: string;
-
-  // Note tag colors
-  noteTagBackground?: string;
-  noteTagBackgroundHover?: string;
-  noteTagText?: string;
-
-  // Budget colors
-  budgetCurrentMonth?: string;
-  budgetOtherMonth?: string;
-  budgetHeaderCurrentMonth?: string;
-  budgetHeaderOtherMonth?: string;
-
-  // Floating action bar colors
-  floatingActionBarBackground?: string;
-  floatingActionBarBorder?: string;
-  floatingActionBarText?: string;
-
-  // Tooltip colors
-  tooltipText?: string;
-  tooltipBackground?: string;
-  tooltipBorder?: string;
-
-  // Custom colors (plugin-specific)
-  [customColor: `custom-${string}`]: string;
-};
-
 export interface PluginDatabase {
   runQuery<T = unknown>(
     sql: string,
@@ -404,17 +153,6 @@ export type PluginContext = Omit<
     },
   ) => () => void;
 
-  // Theme methods - simple and direct
-  registerTheme: (
-    themeId: string,
-    displayName: string,
-    colorOverrides: ThemeColorTypes,
-    options?: {
-      baseTheme?: 'light' | 'dark' | 'midnight';
-      description?: string;
-    },
-  ) => () => void;
-
   db?: PluginDatabase;
   q: QueryBuilder;
 
@@ -489,17 +227,6 @@ export interface HostContext {
     },
   ) => () => void;
 
-  // Theme methods
-  registerTheme: (
-    themeId: string,
-    displayName: string,
-    colorOverrides: ThemeColorTypes,
-    options?: {
-      baseTheme?: 'light' | 'dark' | 'midnight';
-      description?: string;
-    },
-  ) => () => void;
-
   // Query builder provided by host (loot-core's q function)
   q: QueryBuilder;
 

packages/plugins-core/tsconfig.json

@@ -8,18 +8,7 @@
     "jsx": "react-jsx",
     "module": "esnext",
     "moduleResolution": "bundler",
-    "baseUrl": ".",
-    "paths": {
-      "@actual-app/shared-types": ["../shared-types/src/index.ts"],
-      "@actual-app/shared-types/*": ["../shared-types/src/*"],
-      "@actual-app/shared-types/models": [
-        "../shared-types/src/models/index.ts"
-      ],
-      "@actual-app/query": ["../query/src/index.ts"],
-      "@actual-app/query/*": ["../query/src/*"],
-      "@actual-app/components": ["../component-library/src/index.ts"],
-      "@actual-app/components/*": ["../component-library/src/*"]
-    }
+    "baseUrl": "."
   },
   "include": ["src"]
 }

packages/plugins-core/vite.config.mts

@@ -2,14 +2,9 @@ import { resolve } from 'path';
 
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
-
 export default defineConfig({
   resolve: {
-    alias: {
-      '@actual-app/shared-types': resolve(__dirname, '../shared-types/src'),
-      '@actual-app/query': resolve(__dirname, '../query/src'),
-      '@actual-app/components': resolve(__dirname, '../component-library/src'),
-    },
+    alias: {},
   },
   build: {
     outDir: 'build',

packages/query/package.json

@@ -7,22 +7,10 @@
   "main": "src/index.ts",
   "types": "src/index.ts",
   "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "development": "./src/index.ts"
-    },
-    "./database": {
-      "types": "./src/database.ts",
-      "development": "./src/database.ts"
-    },
-    "./aql-result": {
-      "types": "./src/aql-result.ts",
-      "development": "./src/aql-result.ts"
-    },
-    "./spreadsheet": {
-      "types": "./src/spreadsheet.ts",
-      "development": "./src/spreadsheet.ts"
-    }
+    ".": "./src/index.ts",
+    "./database": "./src/database.ts",
+    "./aql-result": "./src/aql-result.ts",
+    "./spreadsheet": "./src/spreadsheet.ts"
   },
   "scripts": {
     "typecheck": "tsc --noEmit"

packages/query/tsconfig.json

@@ -5,12 +5,7 @@
     "noEmit": false,
     "declaration": true,
     "outDir": "dist",
-    "declarationDir": "@types",
-    "paths": {
-      "@actual-app/shared-types": ["../shared-types/src/index.ts"],
-      "@actual-app/shared-types/*": ["../shared-types/src/*"],
-      "@actual-app/shared-types/models": ["../shared-types/src/models/index.ts"]
-    }
+    "declarationDir": "@types"
   },
   "include": ["."],
   "exclude": ["**/node_modules/*", "dist", "@types", "*.test.ts"]

packages/shared-types/package.json

@@ -7,18 +7,10 @@
   "main": "src/index.ts",
   "types": "src/index.ts",
   "exports": {
-    ".": {
-      "types": "./src/index.ts",
-      "development": "./src/index.ts"
-    },
-    "./models/*": {
-      "types": "./src/models/*.ts",
-      "development": "./src/models/*.ts"
-    },
-    "./modalProps": {
-      "types": "./src/modalProps.ts",
-      "development": "./src/modalProps.ts"
-    }
+    ".": "./src/index.ts",
+    "./models/*": "./src/models/*.ts",
+    "./modalProps": "./src/modalProps.ts",
+    "./spreadsheet": "./src/spreadsheet.ts"
   },
   "scripts": {
     "typecheck": "tsc --noEmit"

tsconfig.json

@@ -33,23 +33,8 @@
       // TEMPORARY: Until we can fix the "exports" in the loot-core package.json
       "loot-core/*": ["./packages/loot-core/src/*"],
       "plugins-core/*": ["./packages/plugins-core/src/*"],
-      "@actual-app/plugins-core": ["./packages/plugins-core/src/index.ts"],
-      "@actual-app/plugins-core/server": [
-        "./packages/plugins-core/src/server.ts"
-      ],
-      "@actual-app/plugins-core/client": [
-        "./packages/plugins-core/src/client.ts"
-      ],
-      "@actual-app/plugins-core/*": ["./packages/plugins-core/src/*"],
       "@desktop-client/*": ["./packages/desktop-client/src/*"],
-      "@desktop-client/e2e/*": ["./packages/desktop-client/e2e/*"],
-      "@actual-app/query": ["./packages/query/src/index.ts"],
-      "@actual-app/query/*": ["./packages/query/src/*"],
-      "@actual-app/shared-types": ["./packages/shared-types/src/index.ts"],
-      "@actual-app/shared-types/*": ["./packages/shared-types/src/*"],
-      "@actual-app/shared-types/models": [
-        "./packages/shared-types/src/models/index.ts"
-      ]
+      "@desktop-client/e2e/*": ["./packages/desktop-client/e2e/*"]
     },
     "plugins": [
       {