Compare commits

..

16 Commits

Author SHA1 Message Date
Joel Jeremy Marquez
a910e7b0ef yarn.lock 2026-01-08 10:48:44 -08:00
Joel Jeremy Marquez
15d7befceb Updates 2026-01-08 10:48:28 -08:00
Joel Jeremy Marquez
213db00660 oxfmtrc ignore packages/loot-core/drizzle 2026-01-08 10:48:09 -08:00
Joel Jeremy Marquez
84e0d0ffee Invoke PGLITE_SYNC on SQLite INSERT/UPDATE/DELETE 2026-01-08 10:48:09 -08:00
Joel Jeremy Marquez
72abea19dd Update schema 2026-01-08 10:48:09 -08:00
Joel Jeremy Marquez
20c3f3a26f Update schema 2026-01-08 10:48:09 -08:00
Joel Jeremy Marquez
a4b123486e Migrations update to use "actual" schema 2026-01-08 10:48:09 -08:00
Joel Jeremy Marquez
f1f4aab0c4 Update migration to use builtin PgDialect migrate 2026-01-08 10:47:58 -08:00
Joel Jeremy Marquez
0e759e4370 Update schema and add indeces 2026-01-08 10:47:58 -08:00
Joel Jeremy Marquez
8a88681135 Update drizzle migrations table 2026-01-08 10:47:58 -08:00
Joel Jeremy Marquez
1d216ca83f Update with indeces 2026-01-08 10:47:58 -08:00
Joel Jeremy Marquez
86dcd52a8b Remove pglite filter 2026-01-08 10:47:58 -08:00
Joel Jeremy Marquez
2dc7442466 Drizzle migrations 2026-01-08 10:47:58 -08:00
Joel Jeremy Marquez
ba9256a38b Set parsers and serializers on openDatabase 2026-01-08 10:47:58 -08:00
Joel Jeremy Marquez
3fd9809def Update migrations 2026-01-08 10:47:58 -08:00
Joel Jeremy Marquez
7053fc2f92 PGlite migrations 2026-01-08 10:47:58 -08:00
1682 changed files with 64653 additions and 40860 deletions

View File

@@ -3,16 +3,27 @@ issue_enrichment:
enabled: false
reviews:
request_changes_workflow: true
review_status: false
review_status: true
high_level_summary: false
finishing_touches:
docstrings:
enabled: false
pre_merge_checks:
docstrings:
mode: off
enabled: false
custom_checks:
- mode: error
name: 'settings'
instructions: 'Every addition of a new setting toggle must be thoroughly evaluated against the core design principles of Actual. The settings screen is reserved for essential and foundational options only — do not introduce settings for minor UI adjustments such as sizes, paddings, colors, or margins. Prioritize preserving a simple and uncluttered user experience. Users proposing new settings must confirm in a reply to the Coderabbit comment that they have reviewed and ensured alignment with these principles. Excessive or granular UI options increase code complexity and risk confusing users, and are generally not permitted.'
- mode: error
name: 'linting'
instructions: 'Do not allow any oxlint-disable lines.'
- mode: error
name: 'typecheck'
instructions: 'Do not allow creating new components or utilities with the @ts-strict-ignore comment.'
labeling_instructions:
- label: 'suspect ai generated'
instructions: 'This issue or PR is suspected to be generated by AI.'
- label: 'API'
instructions: 'This issue or PR updates the API in `packages/api`.'
- label: 'documentation'

View File

@@ -1,74 +0,0 @@
---
description: Rules for AI-generated commits and pull requests
globs:
alwaysApply: true
---
# PR and Commit Rules for AI Agents
Canonical source: `.github/agents/pr-and-commit-rules.md`
## Commit Rules
### [AI] Prefix Requirement
**ALL commit messages MUST be prefixed with `[AI]`.** This is a mandatory requirement with no exceptions.
**Examples:**
- `[AI] Fix type error in account validation`
- `[AI] Add support for new transaction categories`
- `Fix type error in account validation` (MISSING PREFIX - NOT ALLOWED)
- `Add support for new transaction categories` (MISSING PREFIX - NOT ALLOWED)
### Git Safety Rules
- **Never** update git config
- **Never** run destructive git operations (force push, hard reset) unless the user explicitly requests it
- **Never** skip hooks (`--no-verify`, `--no-gpg-sign`)
- **Never** force push to `main`/`master`
- **Never** commit unless explicitly asked by the user
## Pre-Commit Quality Checklist
Before committing, ensure all of the following:
- [ ] Commit message is prefixed with `[AI]`
- [ ] `yarn typecheck` passes
- [ ] `yarn lint:fix` has been run
- [ ] Relevant tests pass
- [ ] User-facing strings are translated
- [ ] Code style conventions followed (see `AGENTS.md` for full style guide)
## Pull Request Rules
### [AI] Prefix Requirement
**ALL pull request titles MUST be prefixed with `[AI]`.** This is a mandatory requirement with no exceptions.
**Examples:**
- `[AI] Fix type error in account validation`
- `[AI] Add support for new transaction categories`
- `Fix type error in account validation` (MISSING PREFIX - NOT ALLOWED)
### Labels
Add the **"AI generated"** label to all AI-created pull requests.
### PR Template: Do Not Fill In
- **NEVER fill in the PR template** (`.github/PULL_REQUEST_TEMPLATE.md`). Leave all blank spaces and placeholder comments as-is.
- **Exception**: If a human **explicitly asks** you to fill out the PR template, then fill it out **in Chinese** (简体中文).
## Quick-Reference Workflow
1. Make your changes
2. Run `yarn typecheck` — fix any errors
3. Run `yarn lint:fix` — fix any remaining lint errors
4. Run relevant tests (`yarn test` for all, or workspace-specific)
5. Stage files and commit with `[AI]` prefix — do not skip hooks
6. When creating a PR:
- Use `[AI]` prefix in the title
- Add the `"AI generated"` label
- Leave the PR template blank (do not fill it in)

View File

@@ -8,66 +8,35 @@ body:
attributes:
value: |
Thanks for taking the time to fill out this bug report! Please ensure you provide as much information as possible to better assist in confirming and identifying a fix for the bug.
⚠️ **CRITICAL:** Bug reports without clear, step-by-step reproduction instructions will be closed. We cannot investigate or fix bugs without being able to reproduce them. Please take the time to provide detailed reproduction steps.
- type: markdown
attributes:
value: |
**IMPORTANT:** we use GitHub Issues only for BUG REPORTS and FEATURE REQUESTS. If you are looking for help/support - please reach out to the [community on Discord](https://discord.gg/pRYNYr4W5A). All non-bug and non-feature-request issues will be closed.
**Bank-sync problems (SimpleFin / GoCardless)?** Reach out via the [community Discord](https://discord.gg/pRYNYr4W5A) first and open an issue only if the community deems the issue to be a legitimate bug in Actual.
- type: checkboxes
id: existing-issue
attributes:
label: 'Verified issue does not already exist?'
description: 'Please search to see if an issue already exists for the issue you encountered.'
options:
- label: 'I have searched and found no existing issue'
required: true
- type: textarea
id: what-happened
attributes:
label: What happened?
description: |
Describe the bug clearly and concisely. Include:
- What you were trying to do
- What you expected to happen
- What actually happened instead
- Any error messages (copy/paste the exact text)
If you're reporting an issue with imports, please include a (redacted) version of the file, and a screenshot of the import screen. You may need to zip it before uploading.
placeholder: |
I was trying to [action] when [context].
Expected: [expected behavior]
Actual: [actual behavior]
Error message: [if any]
description: Also tell us, what did you expect to happen? If you're reporting an issue with imports, please attach a (redacted) version of the file you're having trouble importing. You may need to zip it before uploading.
placeholder: Tell us what you see!
value: 'A bug happened!'
validations:
required: true
- type: markdown
attributes:
value: |
## Reproduction Steps
**REQUIRED:** Without clear reproduction steps, we cannot investigate or fix the bug. Please provide detailed, step-by-step instructions that anyone can follow to reproduce the issue.
- type: textarea
id: reproduction
attributes:
label: How can we reproduce the issue?
description: |
**This field is mandatory and must be filled out completely.**
Provide numbered, step-by-step instructions that allow us to reproduce the bug. Include:
- Specific actions you took (e.g., "Click on the Budget tab", "Enter $100 in the amount field")
- What you expected to happen
- What actually happened instead
Example format:
1. Navigate to [specific page/section]
2. Click on [specific button/link]
3. Enter [specific data] in [specific field]
4. Click [action]
5. Observe [expected vs actual behavior]
If the issue involves importing data, please attach a (redacted) sample file. You may need to zip it before uploading.
placeholder: |
1. Go to [specific location]
2. Click [specific element]
3. Enter [specific data]
4. Click [action]
5. Expected: [what should happen]
Actual: [what actually happens]
description: Please give step-by-step instructions on how to reproduce the issue. In most cases this might also require uploading a sample budget/import file.
value: 'How can we reproduce the issue?'
validations:
required: true
- type: markdown

View File

@@ -1,21 +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. Try running yarn generate:release-notes *before* pushing your PR for an interactive experience. -->
## Description
<!-- What does this PR do? Why is it needed? Please give context on the "why?": why do we need this change? What problem is it solving for you?-->
## Related issue(s)
<!-- e.g. Fixes #123, Relates to #456 -->
## Testing
<!-- What did you test? How can we reproduce the issue you are fixing or how can we test the feature you built? -->
## Checklist
- [ ] Release notes added (see link above)
- [ ] No obvious regressions in affected areas
- [ ] Self-review has been performed - I understand what each change in the code does and why it is needed
<!--- actual-bot-sections --->

View File

@@ -74,4 +74,4 @@ async function checkReleaseNotesExists() {
}
}
void checkReleaseNotesExists();
checkReleaseNotesExists();

View File

@@ -74,4 +74,4 @@ async function commentOnPR() {
}
}
void commentOnPR();
commentOnPR();

View File

@@ -94,4 +94,4 @@ ${summaryData.summary}
}
}
void createReleaseNotesFile();
createReleaseNotesFile();

View File

@@ -33,11 +33,11 @@ try {
{
role: 'system',
content:
'You are categorizing pull requests for release notes. You must respond with exactly one of these categories: "Features", "Enhancements", "Bugfixes", or "Maintenance". No other text or explanation.',
'You are categorizing pull requests for release notes. You must respond with exactly one of these categories: "Features", "Enhancements", "Bugfix", or "Maintenance". No other text or explanation.',
},
{
role: 'user',
content: `PR Title: ${prDetails.title}\n\nGenerated Summary: ${summaryData.summary}\n\nCodeRabbit Analysis:\n${commentBody}\n\nCategories:\n- Features: New functionality or capabilities\n- Bugfixes: Fixes for broken or incorrect behavior\n- Enhancements: Improvements to existing functionality\n- Maintenance: Code cleanup, refactoring, dependencies, etc.\n\nWhat category does this PR belong to?`,
content: `PR Title: ${prDetails.title}\n\nGenerated Summary: ${summaryData.summary}\n\nCodeRabbit Analysis:\n${commentBody}\n\nCategories:\n- Features: New functionality or capabilities\n- Bugfix: Fixes for broken or incorrect behavior\n- Enhancements: Improvements to existing functionality\n- Maintenance: Code cleanup, refactoring, dependencies, etc.\n\nWhat category does this PR belong to?`,
},
],
max_tokens: 10,
@@ -86,7 +86,7 @@ try {
// Validate the category response
const validCategories = [
'Features',
'Bugfixes',
'Bugfix',
'Enhancements',
'Maintenance',
];

View File

@@ -36,15 +36,11 @@ async function getPRDetails() {
console.log('- PR Number:', pr.number);
console.log('- PR Author:', pr.user.login);
console.log('- PR Title:', pr.title);
console.log('- Base Branch:', pr.base.ref);
console.log('- Head Branch:', pr.head.ref);
const result = {
number: pr.number,
author: pr.user.login,
title: pr.title,
baseBranch: pr.base.ref,
headBranch: pr.head.ref,
};
setOutput('result', JSON.stringify(result));

View File

@@ -1,14 +1,14 @@
#!/usr/bin/env node
// overview:
// 1. Identify the migrations in packages/loot-core/migrations/* on `master` and HEAD
// 2. Make sure that any new migrations on HEAD are dated after the latest migration on `master`.
import { spawnSync } from 'child_process';
import path from 'path';
import { fileURLToPath } from 'url';
const { spawnSync } = require('child_process');
const path = require('path');
const migrationsDir = path.join(
path.dirname(fileURLToPath(import.meta.url)),
'..',
__dirname,
'..',
'..',
'packages',
@@ -16,7 +16,7 @@ const migrationsDir = path.join(
'migrations',
);
function readMigrations(ref: string) {
function readMigrations(ref) {
const { stdout } = spawnSync('git', [
'ls-tree',
'--name-only',

View File

@@ -5,7 +5,6 @@ Activo
AESUDEF
ALZEY
Anglais
ANZ
aql
AUR
Authentik
@@ -31,7 +30,6 @@ CAGLPTPL
Caixa
CAMT
cashflow
Catppuccin
Cetelem
cimode
Citi
@@ -42,13 +40,13 @@ COBADEFF
CODEOWNERS
COEP
commerzbank
COOP
Copiar
COUNTA
COUNTBLANK
countif
CREGBEBB
crt
CZK
Danske
datadir
DATEDIF
@@ -70,6 +68,7 @@ Fineco
Finicity
Fintro
Finverse
flathub
Flathub
FORTUNEO
FTNOFRP
@@ -84,7 +83,6 @@ HABAL
Hampel
HELADEF
HLOOKUP
HUF
IFERROR
IFNA
INDUSTRIEL
@@ -110,7 +108,6 @@ KBCBE
Keycloak
Khurozov
KORT
KRW
Kreditbank
lage
LHV
@@ -119,14 +116,12 @@ LKR
MAXA
mbank
mdc
metainfo
modals
Moldovan
murmurhash
NETWORKDAYS
nginx
OIDC
Okabe
overbudgeted
overbudgeting
oxc
@@ -139,6 +134,7 @@ prefs
Primoco
Priotecs
proactively
pwa
Qatari
QNTOFRP
QONTO
@@ -176,7 +172,6 @@ touchscreen
triaging
UAH
ubuntu
undici
userinfo
Userscripts
UZS

View File

@@ -79,6 +79,3 @@
# allowlist specific non-English words with non-ASCII characters
\b(Länsförsäkringar|München|Złoty)\b
# allowlist specific proper nouns
\b(CodeRabbit)\b

View File

@@ -1,70 +0,0 @@
# PR and Commit Rules for AI Agents
This is the single source of truth for all commit and pull request rules that AI agents must follow when working with Actual Budget.
## Commit Rules
### [AI] Prefix Requirement
**ALL commit messages MUST be prefixed with `[AI]`.** This is a mandatory requirement with no exceptions.
**Examples:**
- `[AI] Fix type error in account validation`
- `[AI] Add support for new transaction categories`
- `Fix type error in account validation` (MISSING PREFIX - NOT ALLOWED)
- `Add support for new transaction categories` (MISSING PREFIX - NOT ALLOWED)
### Git Safety Rules
- **Never** update git config
- **Never** run destructive git operations (force push, hard reset) unless the user explicitly requests it
- **Never** skip hooks (`--no-verify`, `--no-gpg-sign`)
- **Never** force push to `main`/`master`
- **Never** commit unless explicitly asked by the user
## Pre-Commit Quality Checklist
Before committing, ensure all of the following:
- [ ] Commit message is prefixed with `[AI]`
- [ ] `yarn typecheck` passes
- [ ] `yarn lint:fix` has been run
- [ ] Relevant tests pass
- [ ] User-facing strings are translated
- [ ] Code style conventions followed (see `AGENTS.md` for full style guide)
## Pull Request Rules
### [AI] Prefix Requirement
**ALL pull request titles MUST be prefixed with `[AI]`.** This is a mandatory requirement with no exceptions.
**Examples:**
- `[AI] Fix type error in account validation`
- `[AI] Add support for new transaction categories`
- `Fix type error in account validation` (MISSING PREFIX - NOT ALLOWED)
### Labels
Add the **"AI generated"** label to all AI-created pull requests. This helps maintainers understand the nature of the contribution.
### PR Template: Do Not Fill In
- **NEVER fill in the PR template** (`.github/PULL_REQUEST_TEMPLATE.md`). Leave all blank spaces and placeholder comments as-is. Humans are expected to fill in the Description, Related issue(s), Testing, and Checklist sections.
- **Exception**: If a human **explicitly asks** you to fill out the PR template, then fill it out **in Chinese**, using Chinese characters (简体中文) for all content you add.
## Quick-Reference Workflow
Follow these steps when committing and creating PRs:
1. Make your changes
2. Run `yarn typecheck` — fix any errors
3. Run `yarn lint:fix` — fix any remaining lint errors
4. Run relevant tests (`yarn test` for all, or workspace-specific)
5. Stage files and commit with `[AI]` prefix — do not skip hooks
6. When creating a PR:
- Use `[AI]` prefix in the title
- Add the `"AI generated"` label
- Leave the PR template blank (do not fill it in)

View File

@@ -8,13 +8,6 @@ const CONFIG = {
POINTS_PER_ISSUE_TRIAGE_ACTION: 1,
POINTS_PER_ISSUE_CLOSING_ACTION: 1,
POINTS_PER_RELEASE_PR: 4, // Awarded to whoever merges the release PR
PR_CONTRIBUTION_POINTS: [
{ categories: ['Features'], points: 2 },
{ categories: ['Enhancements'], points: 2 },
{ categories: ['Bugfixes', 'Bugfix'], points: 3 },
{ categories: ['Maintenance'], points: 2 },
{ categories: ['Unknown'], points: 2 },
],
// Point tiers for code changes (non-docs)
CODE_PR_REVIEW_POINT_TIERS: [
{ minChanges: 500, points: 8 },
@@ -38,122 +31,6 @@ const CONFIG = {
DOCS_FILES_PATTERN: 'packages/docs/**/*',
};
/**
* Parse category from release notes file content.
* @param {string} content - The content of the release notes file.
* @returns {string|null} The category or null if not found.
*/
function parseReleaseNotesCategory(content) {
if (!content) return null;
// Extract YAML front matter
const frontMatterMatch = content.match(/^---\s*\n([\s\S]*?)\n---/);
if (!frontMatterMatch) return null;
// Extract category from front matter
const categoryMatch = frontMatterMatch[1].match(/^category:\s*(.+)$/m);
if (!categoryMatch) return null;
return categoryMatch[1].trim();
}
/**
* Get the last commit SHA on or before a given date.
* @param {Octokit} octokit - The Octokit instance.
* @param {string} owner - Repository owner.
* @param {string} repo - Repository name.
* @param {Date} beforeDate - The date to find the last commit before.
* @returns {Promise<string|null>} The commit SHA or null if not found.
*/
async function getLastCommitBeforeDate(octokit, owner, repo, beforeDate) {
try {
// Get the default branch from the repository
const { data: repoData } = await octokit.repos.get({ owner, repo });
const defaultBranch = repoData.default_branch;
const { data: commits } = await octokit.repos.listCommits({
owner,
repo,
sha: defaultBranch,
until: beforeDate.toISOString(),
per_page: 1,
});
if (commits.length > 0) {
return commits[0].sha;
}
} catch {
// If error occurs, return null to fall back to default branch
}
return null;
}
/**
* Get the category and points for a PR by reading its release notes file.
* @param {Octokit} octokit - The Octokit instance.
* @param {string} owner - Repository owner.
* @param {string} repo - Repository name.
* @param {number} prNumber - PR number.
* @param {Date} monthEnd - The end date of the month to use as base revision.
* @returns {Promise<Object>} Object with category and points, or null if error.
*/
async function getPRCategoryAndPoints(
octokit,
owner,
repo,
prNumber,
monthEnd,
) {
const releaseNotesPath = `upcoming-release-notes/${prNumber}.md`;
try {
// Get the last commit of the month to use as base revision
const commitSha = await getLastCommitBeforeDate(
octokit,
owner,
repo,
monthEnd,
);
// Try to read the release notes file from the last commit of the month
const { data: fileContent } = await octokit.repos.getContent({
owner,
repo,
path: releaseNotesPath,
ref: commitSha || undefined, // Use commit SHA if available, otherwise default branch
});
if (fileContent.content) {
// Decode base64 content
const content = Buffer.from(fileContent.content, 'base64').toString(
'utf-8',
);
const category = parseReleaseNotesCategory(content);
const tier = CONFIG.PR_CONTRIBUTION_POINTS.find(e =>
e.categories.includes(category),
);
if (tier) {
return {
category,
points: tier.points,
};
}
}
} catch {
// Do nothing
}
const unknownTier = CONFIG.PR_CONTRIBUTION_POINTS.find(e =>
e.categories.includes('Unknown'),
);
return {
category: 'Unknown',
points: unknownTier.points,
};
}
/**
* Get the start and end dates for the last month.
* @returns {Object} An object containing the start and end dates.
@@ -212,7 +89,6 @@ async function countContributorPoints() {
{
codeReviews: [], // Will store objects with PR number and points for main repo changes
docsReviews: [], // Will store objects with PR number and points for docs changes
prContributions: [], // Will store objects with PR number, category, and points for PR author contributions
labelRemovals: [],
issueClosings: [],
points: 0,
@@ -326,28 +202,6 @@ async function countContributorPoints() {
mergerStats.points += CONFIG.POINTS_PER_RELEASE_PR;
}
} else {
// Award points to PR author if they are a core maintainer
const prAuthor = pr.user?.login;
if (prAuthor && orgMemberLogins.has(prAuthor)) {
const categoryAndPoints = await getPRCategoryAndPoints(
octokit,
owner,
repo,
pr.number,
until,
);
if (categoryAndPoints) {
const authorStats = stats.get(prAuthor);
authorStats.prContributions.push({
pr: pr.number.toString(),
category: categoryAndPoints.category,
points: categoryAndPoints.points,
});
authorStats.points += categoryAndPoints.points;
}
}
const uniqueReviewers = new Set();
reviews.data.forEach(review => {
if (
@@ -424,7 +278,7 @@ async function countContributorPoints() {
if (
event.event === 'closed' &&
['not_planned', 'duplicate'].includes(event.state_reason)
event.state_reason === 'not_planned'
) {
const closer = event.actor.login;
const userStats = stats.get(closer);
@@ -439,7 +293,7 @@ async function countContributorPoints() {
// Print all statistics
printStats(
'Code Review Statistics',
stats => stats.codeReviews.reduce((sum, r) => sum + r.points, 0),
stats => stats.codeReviews.length,
(user, count) =>
`${user}: ${count} (PRs: ${stats
.get(user)
@@ -454,7 +308,7 @@ async function countContributorPoints() {
printStats(
'Docs Review Statistics',
stats => stats.docsReviews.reduce((sum, r) => sum + r.points, 0),
stats => stats.docsReviews.length,
(user, count) =>
`${user}: ${count} (PRs: ${stats
.get(user)
@@ -462,27 +316,16 @@ async function countContributorPoints() {
.join(', ')})`,
);
printStats(
'PR Contribution Statistics',
stats => stats.prContributions.reduce((sum, r) => sum + r.points, 0),
(user, count) =>
`${user}: ${count} (PRs: ${stats
.get(user)
.prContributions.map(r => `#${r.pr} (${r.points}pts - ${r.category})`)
.join(', ')})`,
);
printStats(
'"Needs Triage" Label Removal Statistics',
stats => stats.labelRemovals.length * CONFIG.POINTS_PER_ISSUE_TRIAGE_ACTION,
stats => stats.labelRemovals.length,
(user, count) =>
`${user}: ${count} (Issues: ${stats.get(user).labelRemovals.join(', ')})`,
);
printStats(
'Issue Closing Statistics',
stats =>
stats.issueClosings.length * CONFIG.POINTS_PER_ISSUE_CLOSING_ACTION,
stats => stats.issueClosings.length,
(user, count) =>
`${user}: ${count} (Issues: ${stats.get(user).issueClosings.join(', ')})`,
);

View File

@@ -42,11 +42,7 @@ jobs:
GITHUB_EVENT_ISSUE_NUMBER: ${{ github.event.issue.number }}
- name: Check if release notes file already exists
if: >-
steps.check-first-comment.outputs.result == 'true' &&
steps.pr-details.outputs.result != 'null' &&
fromJSON(steps.pr-details.outputs.result).baseBranch == 'master' &&
!startsWith(fromJSON(steps.pr-details.outputs.result).headBranch, 'release/')
if: steps.check-first-comment.outputs.result == 'true' && steps.pr-details.outputs.result != 'null'
id: check-release-notes-exists
run: node .github/actions/ai-generated-release-notes/check-release-notes-exists.js
env:

View File

@@ -60,9 +60,8 @@ jobs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
- name: Set up environment
uses: ./.github/actions/setup
- uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
with:
download-translations: 'false'
node-version: 22
- name: Check migrations
run: yarn workspace @actual-app/ci-actions tsx bin/check-migrations.ts
run: node ./.github/actions/check-migrations.js

View File

@@ -87,8 +87,8 @@ jobs:
- name: Test that the docker image boots
run: |
docker run --detach --network=host actualbudget/actual-server-testing
sleep 10
curl --fail -sS -LI -w '%{http_code}\n' --retry 20 --retry-delay 1 --retry-connrefused localhost:5006
sleep 5
curl --fail -sS -LI -w '%{http_code}\n' --retry 10 --retry-delay 1 --retry-connrefused localhost:5006
# This will use the cache from the earlier build step and not rebuild the image
# https://docs.docker.com/build/ci/github-actions/test-before-push/

33
.github/workflows/docs-release.yml vendored Normal file
View File

@@ -0,0 +1,33 @@
name: Release Docs to Github Pages
# Release docs on every push to master
on:
push:
branches:
- master
paths:
- 'packages/docs/**'
- '.github/workflows/docs-spelling.yml'
- '.github/actions/docs-spelling/**'
workflow_dispatch:
jobs:
deploy:
runs-on: ubuntu-latest
name: Deploy Docs
if: github.event.repository.fork == false
steps:
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
- name: Set up environment
uses: ./.github/actions/setup
with:
download-translations: 'false'
- name: Docusaurus Deploy
run: |
GIT_USER=MikesGlitch \
GIT_PASS=${{ secrets.DOCS_GITHUB_PAGES_DEPLOY }} \
GIT_USER_NAME=github-actions[bot] \
GIT_USER_EMAIL=github-actions[bot]@users.noreply.github.com \
yarn deploy:docs

View File

@@ -30,7 +30,7 @@ jobs:
matrix:
shard: [1, 2, 3, 4, 5]
container:
image: mcr.microsoft.com/playwright:v1.58.2-jammy
image: mcr.microsoft.com/playwright:v1.56.0-jammy
steps:
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
- name: Set up environment
@@ -53,7 +53,7 @@ jobs:
name: Functional Desktop App
runs-on: ubuntu-latest
container:
image: mcr.microsoft.com/playwright:v1.58.2-jammy
image: mcr.microsoft.com/playwright:v1.56.0-jammy
steps:
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
- name: Set up environment
@@ -81,7 +81,7 @@ jobs:
matrix:
shard: [1, 2, 3, 4, 5]
container:
image: mcr.microsoft.com/playwright:v1.58.2-jammy
image: mcr.microsoft.com/playwright:v1.56.0-jammy
steps:
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
- name: Set up environment
@@ -104,7 +104,7 @@ jobs:
runs-on: ubuntu-latest
if: ${{ !cancelled() }}
container:
image: mcr.microsoft.com/playwright:v1.58.2-jammy
image: mcr.microsoft.com/playwright:v1.56.0-jammy
steps:
- uses: actions/checkout@08c6903cd8c0fde910a37f88322edcfb5dd907a8 # v5.0.0
- name: Set up environment

View File

@@ -156,3 +156,52 @@ jobs:
-NoStatus `
-AutoCommit `
-Force
publish-flathub:
needs: build
runs-on: ubuntu-22.04
if: ${{ github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v') }}
steps:
- name: Download Linux artifacts
uses: actions/download-artifact@018cc2cf5baa6db3ef3c5f8a56943fffe632ef53 # v6.0.0
with:
name: actual-electron-ubuntu-22.04
- name: Calculate AppImage SHA256
id: appimage_sha256
run: |
APPIMAGE_X64_SHA256=$(sha256sum Actual-linux-x86_64.AppImage | awk '{ print $1 }')
APPIMAGE_ARM64_SHA256=$(sha256sum Actual-linux-arm64.AppImage | awk '{ print $1 }')
echo "APPIMAGE_X64_SHA256=$APPIMAGE_X64_SHA256" >> "$GITHUB_ENV"
echo "APPIMAGE_ARM64_SHA256=$APPIMAGE_ARM64_SHA256" >> "$GITHUB_ENV"
- name: Checkout Flathub repo
uses: actions/checkout@v6
with:
repository: flathub/com.actualbudget.actual
token: ${{ secrets.FLATHUB_GITHUB_TOKEN }}
- name: Update manifest with new SHA256
run: |
# Replace x86_64 entry
sed -i "/x86_64.AppImage/{n;s|sha256:.*|sha256: ${{ env.APPIMAGE_X64_SHA256 }}|}" com.actualbudget.actual.yml
sed -i "/x86_64.AppImage/s|url:.*|url: https://github.com/actualbudget/actual/releases/download/v${{ needs.build.outputs.version }}/Actual-linux-x86_64.AppImage|" com.actualbudget.actual.yml
# Replace arm64 entry
sed -i "/arm64.AppImage/{n;s|sha256:.*|sha256: ${{ env.APPIMAGE_ARM64_SHA256 }}|}" com.actualbudget.actual.yml
sed -i "/arm64.AppImage/s|url:.*|url: https://github.com/actualbudget/actual/releases/download/v${{ needs.build.outputs.version }}/Actual-linux-arm64.AppImage|" com.actualbudget.actual.yml
cat com.actualbudget.actual.yml
- name: Create PR in Flathub repo
uses: peter-evans/create-pull-request@v7
with:
token: ${{ secrets.FLATHUB_GITHUB_TOKEN }}
commit-message: 'Update Actual flatpak to version ${{ needs.build.outputs.version }}'
branch: 'release/${{ needs.build.outputs.version }}'
title: 'Update Actual flatpak to version ${{ needs.build.outputs.version }}'
body: |
This PR updates the Actual desktop flatpak to version ${{ needs.build.outputs.version }}.
:link: [View release notes](https://actualbudget.org/blog/release-${{ needs.build.outputs.version }})
reviewers: 'jfdoming,MatissJanis,youngcw' # The core team that have accepted the collaborator access to the Flathub repo

View File

@@ -1,48 +0,0 @@
name: Fork PR Welcome
##########################################################################################
# WARNING! This workflow uses the 'pull_request_target' event. That means that it will #
# always run in the context of the main actualbudget/actual repo, even if the PR is from #
# a fork. This is necessary to get access to a GitHub token that can post a comment on #
# the PR. Be VERY CAREFUL about adding things to this workflow, since forks can inject #
# arbitrary code into their branch, and can pollute the artifacts we download. Arbitrary #
# code execution in this workflow could lead to a compromise of the main repo. #
##########################################################################################
# See: https://securitylab.github.com/research/github-actions-preventing-pwn-requests #
##########################################################################################
on:
pull_request_target:
types: [opened, reopened]
permissions:
pull-requests: write
jobs:
welcome:
name: Post Welcome Message
runs-on: ubuntu-latest
if: github.event.pull_request.head.repo.full_name != github.repository
steps:
- name: Post welcome comment
uses: marocchino/sticky-pull-request-comment@773744901bac0e8cbb5a0dc842800d45e9b2b405 # v2.9.4
with:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
number: ${{ github.event.pull_request.number }}
header: fork-pr-welcome
hide_and_recreate: true
hide_classify: OUTDATED
message: |
<!-- fork-pr-welcome -->
👋 Hello contributor!
We would love to review your PR! Before we can do that, please make sure:
- ✅ All CI checks pass
- ✅ The PR is moved from draft to open (if applicable)
- ✅ The "[WIP]" prefix is removed from the PR title
- ✅ All CodeRabbit code review comments are resolved (if you disagree with anything - reply to the bot with your reasoning so we can read through it). The bot will eventually approve the PR.
We do this to reduce the TOIL the core contributor team has to go through for each PR and to allow for speedy reviews and merges.
For more information, please see our [Contributing Guide](https://actualbudget.org/docs/contributing/).

View File

@@ -35,10 +35,7 @@ jobs:
pkg="${packages[$key]}"
if [[ -n "${{ github.event.inputs.version }}" ]]; then
version=$(node ./packages/ci-actions/bin/get-next-package-version.js \
--package-json "./packages/$pkg/package.json" \
--version "${{ github.event.inputs.version }}" \
--update)
version="${{ github.event.inputs.version }}"
else
version=$(node ./packages/ci-actions/bin/get-next-package-version.js \
--package-json "./packages/$pkg/package.json" \
@@ -53,7 +50,6 @@ jobs:
- name: Create PR
uses: peter-evans/create-pull-request@271a8d0340265f705b14b6d32b9829c1cb33d45e # v7.0.8
with:
token: ${{ secrets.ACTIONS_UPDATE_TOKEN }}
commit-message: '🔖 (${{ steps.bump_package_versions.outputs.version }})'
title: '🔖 (${{ steps.bump_package_versions.outputs.version }})'
body: 'Generated by [generate-release-pr.yml](../tree/master/.github/workflows/generate-release-pr.yml)'

View File

@@ -1,37 +0,0 @@
# When the "unfreeze" label is added to a PR, add that PR to Merge Freeze's unblocked list
# so it can be merged during a freeze. Uses pull_request_target so the workflow runs in
# the base repo and has access to MERGEFREEZE_ACCESS_TOKEN for fork PRs; it does not
# checkout or run any PR code. Requires MERGEFREEZE_ACCESS_TOKEN repo secret
# (project-specific token from Merge Freeze Web API panel for actualbudget/actual / master).
# See: https://docs.mergefreeze.com/web-api#post-freeze-status
name: Merge Freeze add PR to unblocked list
on:
pull_request_target:
types: [labeled]
jobs:
unfreeze:
if: ${{ github.event.label.name == 'unfreeze' }}
runs-on: ubuntu-latest
permissions: {}
concurrency:
group: merge-freeze-unfreeze-${{ github.ref }}-labels
cancel-in-progress: false
steps:
- name: POST to Merge Freeze add PR to unblocked list
env:
MERGEFREEZE_ACCESS_TOKEN: ${{ secrets.MERGEFREEZE_ACCESS_TOKEN }}
PR_NUMBER: ${{ github.event.pull_request.number }}
USER_NAME: ${{ github.actor }}
run: |
set -e
if [ -z "$MERGEFREEZE_ACCESS_TOKEN" ]; then
echo "::error::MERGEFREEZE_ACCESS_TOKEN secret is not set"
exit 1
fi
url="https://www.mergefreeze.com/api/branches/actualbudget/actual/master/?access_token=${MERGEFREEZE_ACCESS_TOKEN}"
payload=$(jq -n --arg user_name "$USER_NAME" --argjson pr "$PR_NUMBER" '{frozen: true, user_name: $user_name, unblocked_prs: [$pr]}')
curl -sf -X POST "$url" -H "Content-Type: application/json" -d "$payload"
echo "Merge Freeze updated: PR #$PR_NUMBER added to unblocked list."

View File

@@ -1,126 +0,0 @@
name: Publish Flathub
defaults:
run:
shell: bash
on:
release:
types: [published]
workflow_dispatch:
inputs:
tag:
description: 'Release tag (e.g. v25.3.0)'
required: true
type: string
concurrency:
group: publish-flathub
cancel-in-progress: false
jobs:
publish-flathub:
runs-on: ubuntu-22.04
steps:
- name: Resolve version
id: resolve_version
env:
EVENT_NAME: ${{ github.event_name }}
RELEASE_TAG: ${{ github.event.release.tag_name }}
INPUT_TAG: ${{ inputs.tag }}
run: |
if [[ "$EVENT_NAME" == "release" ]]; then
TAG="$RELEASE_TAG"
else
TAG="$INPUT_TAG"
fi
if [[ -z "$TAG" ]]; then
echo "::error::No tag provided"
exit 1
fi
# Validate tag format (v-prefixed semver, e.g. v25.3.0 or v1.2.3-beta.1)
if [[ ! "$TAG" =~ ^v[0-9]+\.[0-9]+\.[0-9]+(-[a-zA-Z0-9.]+)?$ ]]; then
echo "::error::Invalid tag format: $TAG (expected v-prefixed semver, e.g. v25.3.0)"
exit 1
fi
VERSION="${TAG#v}"
echo "tag=$TAG" >> "$GITHUB_OUTPUT"
echo "version=$VERSION" >> "$GITHUB_OUTPUT"
echo "Resolved tag=$TAG version=$VERSION"
- name: Verify release assets exist
env:
GH_TOKEN: ${{ github.token }}
run: |
TAG="${{ steps.resolve_version.outputs.tag }}"
echo "Checking release assets for tag $TAG..."
ASSETS=$(gh api "repos/${{ github.repository }}/releases/tags/$TAG" --jq '.assets[].name')
echo "Found assets:"
echo "$ASSETS"
if ! echo "$ASSETS" | grep -qx "Actual-linux-x86_64.AppImage"; then
echo "::error::Missing asset: Actual-linux-x86_64.AppImage"
exit 1
fi
if ! echo "$ASSETS" | grep -qx "Actual-linux-arm64.AppImage"; then
echo "::error::Missing asset: Actual-linux-arm64.AppImage"
exit 1
fi
echo "All required AppImage assets found."
- name: Calculate AppImage SHA256 (streamed)
run: |
VERSION="${{ steps.resolve_version.outputs.version }}"
BASE_URL="https://github.com/${{ github.repository }}/releases/download/v${VERSION}"
echo "Streaming x86_64 AppImage to compute SHA256..."
APPIMAGE_X64_SHA256=$(curl -fSL "${BASE_URL}/Actual-linux-x86_64.AppImage" | sha256sum | awk '{ print $1 }')
echo "x86_64 SHA256: $APPIMAGE_X64_SHA256"
echo "Streaming arm64 AppImage to compute SHA256..."
APPIMAGE_ARM64_SHA256=$(curl -fSL "${BASE_URL}/Actual-linux-arm64.AppImage" | sha256sum | awk '{ print $1 }')
echo "arm64 SHA256: $APPIMAGE_ARM64_SHA256"
echo "APPIMAGE_X64_SHA256=$APPIMAGE_X64_SHA256" >> "$GITHUB_ENV"
echo "APPIMAGE_ARM64_SHA256=$APPIMAGE_ARM64_SHA256" >> "$GITHUB_ENV"
- name: Checkout Flathub repo
uses: actions/checkout@v6
with:
repository: flathub/com.actualbudget.actual
token: ${{ secrets.FLATHUB_GITHUB_TOKEN }}
- name: Update manifest with new version
run: |
VERSION="${{ steps.resolve_version.outputs.version }}"
# Replace x86_64 entry
sed -i "/x86_64.AppImage/{n;s|sha256:.*|sha256: ${{ env.APPIMAGE_X64_SHA256 }}|}" com.actualbudget.actual.yml
sed -i "/x86_64.AppImage/s|url:.*|url: https://github.com/actualbudget/actual/releases/download/v${VERSION}/Actual-linux-x86_64.AppImage|" com.actualbudget.actual.yml
# Replace arm64 entry
sed -i "/arm64.AppImage/{n;s|sha256:.*|sha256: ${{ env.APPIMAGE_ARM64_SHA256 }}|}" com.actualbudget.actual.yml
sed -i "/arm64.AppImage/s|url:.*|url: https://github.com/actualbudget/actual/releases/download/v${VERSION}/Actual-linux-arm64.AppImage|" com.actualbudget.actual.yml
echo "Updated manifest:"
cat com.actualbudget.actual.yml
- name: Create PR in Flathub repo
uses: peter-evans/create-pull-request@v7
with:
token: ${{ secrets.FLATHUB_GITHUB_TOKEN }}
commit-message: 'Update Actual flatpak to version ${{ steps.resolve_version.outputs.version }}'
branch: 'release/${{ steps.resolve_version.outputs.version }}'
title: 'Update Actual flatpak to version ${{ steps.resolve_version.outputs.version }}'
body: |
This PR updates the Actual desktop flatpak to version ${{ steps.resolve_version.outputs.version }}.
:link: [View release notes](https://actualbudget.org/blog/release-${{ steps.resolve_version.outputs.version }})
reviewers: 'jfdoming,MatissJanis,youngcw'

View File

@@ -1,6 +1,6 @@
name: Publish nightly npm packages
# Nightly npm packages are built daily at midnight UTC
# Nightly npm packages are built daily
on:
schedule:
- cron: '0 0 * * *'
@@ -20,13 +20,11 @@ jobs:
- name: Update package versions
run: |
# Get new nightly versions
NEW_CORE_VERSION=$(node ./packages/ci-actions/bin/get-next-package-version.js --package-json ./packages/loot-core/package.json --type nightly)
NEW_WEB_VERSION=$(node ./packages/ci-actions/bin/get-next-package-version.js --package-json ./packages/desktop-client/package.json --type nightly)
NEW_SYNC_VERSION=$(node ./packages/ci-actions/bin/get-next-package-version.js --package-json ./packages/sync-server/package.json --type nightly)
NEW_API_VERSION=$(node ./packages/ci-actions/bin/get-next-package-version.js --package-json ./packages/api/package.json --type nightly)
# Set package versions
npm version $NEW_CORE_VERSION --no-git-tag-version --workspace=@actual-app/core --no-workspaces-update
npm version $NEW_WEB_VERSION --no-git-tag-version --workspace=@actual-app/web --no-workspaces-update
npm version $NEW_SYNC_VERSION --no-git-tag-version --workspace=@actual-app/sync-server --no-workspaces-update
npm version $NEW_API_VERSION --no-git-tag-version --workspace=@actual-app/api --no-workspaces-update
@@ -35,10 +33,6 @@ jobs:
run: |
yarn install
- name: Pack the core package
run: |
yarn workspace @actual-app/core pack --filename @actual-app/core.tgz
- name: Build Server & Web
run: yarn build:server
@@ -59,7 +53,6 @@ jobs:
with:
name: npm-packages
path: |
packages/loot-core/@actual-app/core.tgz
packages/desktop-client/@actual-app/web.tgz
packages/sync-server/@actual-app/sync-server.tgz
packages/api/@actual-app/api.tgz
@@ -83,12 +76,6 @@ jobs:
node-version: 22
registry-url: 'https://registry.npmjs.org'
- name: Publish Core
run: |
npm publish loot-core/@actual-app/core.tgz --access public --tag nightly
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Publish Web
run: |
npm publish desktop-client/@actual-app/web.tgz --access public --tag nightly

View File

@@ -16,10 +16,6 @@ jobs:
- name: Set up environment
uses: ./.github/actions/setup
- name: Pack the core package
run: |
yarn workspace @actual-app/core pack --filename @actual-app/core.tgz
- name: Build Web
run: yarn build:server
@@ -40,7 +36,6 @@ jobs:
with:
name: npm-packages
path: |
packages/loot-core/@actual-app/core.tgz
packages/desktop-client/@actual-app/web.tgz
packages/sync-server/@actual-app/sync-server.tgz
packages/api/@actual-app/api.tgz
@@ -64,12 +59,6 @@ jobs:
node-version: 22
registry-url: 'https://registry.npmjs.org'
- name: Publish Core
run: |
npm publish loot-core/@actual-app/core.tgz --access public
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
- name: Publish Web
run: |
npm publish desktop-client/@actual-app/web.tgz --access public

View File

@@ -139,8 +139,7 @@ jobs:
--head desktop-client=./head/web-stats.json \
--head loot-core=./head/loot-core-stats.json \
--head api=./head/api-stats.json \
--identifier combined \
--format pr-body > bundle-stats-comment.md
--identifier combined > bundle-stats-comment.md
- name: Post combined bundle stats comment
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -149,5 +148,4 @@ jobs:
run: |
node packages/ci-actions/bin/update-bundle-stats-comment.mjs \
--comment-file bundle-stats-comment.md \
--identifier combined \
--target pr-body
--identifier '<!--- bundlestats-action-comment key:combined --->'

View File

@@ -44,7 +44,7 @@ jobs:
github.event.issue.pull_request &&
startsWith(github.event.comment.body, '/update-vrt')
container:
image: mcr.microsoft.com/playwright:v1.58.2-jammy
image: mcr.microsoft.com/playwright:v1.56.0-jammy
steps:
- name: Get PR details
id: pr

5
.gitignore vendored
View File

@@ -33,9 +33,7 @@ packages/desktop-electron/dist
packages/desktop-electron/loot-core
packages/desktop-client/service-worker
packages/plugins-service/dist
packages/component-library/dist
packages/loot-core/lib-dist
**/.tsbuildinfo
packages/sync-server/coverage
bundle.desktop.js
bundle.desktop.js.map
@@ -78,6 +76,3 @@ build/
# Lage cache
.lage/
*storybook.log
storybook-static

View File

@@ -4,31 +4,8 @@
"trailingComma": "all",
"arrowParens": "avoid",
"printWidth": 80,
"experimentalSortImports": {
"groups": [
"react",
"builtin",
"external",
"loot-core",
["parent", "subpath"],
"sibling",
"index",
"desktop-client"
],
"customGroups": [
{
"groupName": "react",
"elementNamePattern": ["react", "react-dom/*", "react-*"]
},
{
"groupName": "loot-core",
"elementNamePattern": ["loot-core/**", "@actual-app/core/**"]
},
{
"groupName": "desktop-client",
"elementNamePattern": ["@desktop-client/**"]
}
],
"newlinesBetween": true
}
"ignorePatterns": [
"packages/loot-core/drizzle/**/*",
"packages/docs/*" // TOOD: fixme; temporary
]
}

View File

@@ -15,77 +15,113 @@
"vi": "readonly",
"backend": "readonly",
"importScripts": "readonly",
"FS": "readonly"
"FS": "readonly" // TODO: remove this
},
"rules": {
// TODO fix all these and re-enable
"jsx-a11y/click-events-have-key-events": "off",
"jsx-a11y/prefer-tag-over-role": "off",
"jsx-a11y/tabindex-no-positive": "off",
// Import sorting
"perfectionist/sort-named-imports": [
"error",
// TODO replace once oxfmt supports this: https://github.com/oxc-project/oxc/issues/17076
"perfectionist/sort-imports": [
"warn",
{
"groups": ["value-import", "type-import"]
"groups": [
"react",
"builtin",
"external",
"loot-core",
"parent",
"sibling",
"index",
"desktop-client"
],
"customGroups": [
{
"groupName": "react",
"elementNamePattern": "^react(-.*)?$"
},
{
"groupName": "loot-core",
"elementNamePattern": "^loot-core"
},
{
"groupName": "desktop-client",
"elementNamePattern": "^@desktop-client"
}
],
"newlinesBetween": "always"
}
],
// Actual rules
"actual/typography": "error",
"actual/typography": "warn",
"actual/no-untranslated-strings": "error",
"actual/prefer-trans-over-t": "error",
"actual/prefer-if-statement": "error",
"actual/prefer-if-statement": "warn",
"actual/prefer-logger-over-console": "error",
"actual/object-shorthand-properties": "error",
"actual/prefer-const": "error",
"actual/no-anchor-tag": "error",
"actual/no-react-default-import": "error",
"actual/object-shorthand-properties": "warn",
"actual/prefer-const": "warn",
"actual/no-anchor-tag": "warn",
"actual/no-react-default-import": "warn",
// JSX A11y rules
"jsx-a11y/no-autofocus": [
"error",
"warn",
{
"ignoreNonDOM": true
}
],
"jsx-a11y/alt-text": "error",
"jsx-a11y/anchor-has-content": "error",
"jsx-a11y/alt-text": "warn",
"jsx-a11y/anchor-has-content": "warn",
"jsx-a11y/anchor-is-valid": [
"error",
"warn",
{
"aspects": ["noHref", "invalidHref"]
}
],
"jsx-a11y/aria-activedescendant-has-tabindex": "error",
"jsx-a11y/aria-props": "error",
"jsx-a11y/aria-proptypes": "error",
"jsx-a11y/aria-activedescendant-has-tabindex": "warn",
"jsx-a11y/aria-props": "warn",
"jsx-a11y/aria-proptypes": "warn",
"jsx-a11y/aria-role": [
"error",
"warn",
{
"ignoreNonDOM": true
}
],
"jsx-a11y/aria-unsupported-elements": "error",
"jsx-a11y/heading-has-content": "error",
"jsx-a11y/iframe-has-title": "error",
"jsx-a11y/img-redundant-alt": "error",
"jsx-a11y/no-access-key": "error",
"jsx-a11y/no-distracting-elements": "error",
"jsx-a11y/no-redundant-roles": "error",
"jsx-a11y/role-has-required-aria-props": "error",
"jsx-a11y/role-supports-aria-props": "error",
"jsx-a11y/scope": "error",
"jsx-a11y/aria-unsupported-elements": "warn",
"jsx-a11y/heading-has-content": "warn",
"jsx-a11y/iframe-has-title": "warn",
"jsx-a11y/img-redundant-alt": "warn",
"jsx-a11y/no-access-key": "warn",
"jsx-a11y/no-distracting-elements": "warn",
"jsx-a11y/no-redundant-roles": "warn",
"jsx-a11y/role-has-required-aria-props": "warn",
"jsx-a11y/role-supports-aria-props": "warn",
"jsx-a11y/scope": "warn",
// Typescript rules
"typescript/ban-ts-comment": ["error"],
"typescript/consistent-type-definitions": ["error", "type"],
"typescript/ban-ts-comment": [
"warn",
{
// TODO: remove this
"ts-ignore": "allow-with-description"
}
],
"typescript/consistent-type-definitions": ["warn", "type"],
"typescript/consistent-type-imports": [
"error",
"warn",
{
"prefer": "type-imports",
"fixStyle": "inline-type-imports"
}
],
"typescript/no-implied-eval": "error",
"typescript/no-explicit-any": "error",
"typescript/no-implied-eval": "warn",
"typescript/no-explicit-any": "warn",
"typescript/no-restricted-types": [
"error",
"warn",
{
"types": {
// forbid FC as superfluous
@@ -98,156 +134,141 @@
}
}
],
"typescript/no-var-requires": "error",
// we want to allow unions such as "{ name: DbAccount['name'] | DbPayee['name'] }"
"typescript/no-duplicate-type-constituents": "off",
// we want to allow unions such as "string | 'network' | 'file-key-mismatch'"
"typescript/no-redundant-type-constituents": "off",
"typescript/await-thenable": "error",
"typescript/no-floating-promises": "error",
"typescript/require-array-sort-compare": "error",
"typescript/unbound-method": "error",
"typescript/no-for-in-array": "error",
"typescript/restrict-template-expressions": "error",
"typescript/no-misused-spread": "warn", // TODO: enable this
"typescript/no-base-to-string": "warn", // TODO: enable this
"typescript/no-unsafe-unary-minus": "warn", // TODO: enable this
"typescript/no-unsafe-type-assertion": "warn", // TODO: enable this
"typescript/no-var-requires": "warn",
// Import rules
"import/consistent-type-specifier-style": "error",
"import/first": "error",
"import/no-amd": "error",
"import/no-default-export": "error",
"import/no-default-export": "warn",
"import/no-webpack-loader-syntax": "error",
"import/no-useless-path-segments": "error",
"import/no-unresolved": "error",
"import/no-unused-modules": "error",
"import/no-useless-path-segments": "warn",
"import/no-unresolved": "warn",
"import/no-unused-modules": "warn",
"import/no-duplicates": [
"error",
"warn",
{
"prefer-inline": false
"prefer-inline": true
}
],
// React rules
"react/exhaustive-deps": [
"error",
"warn",
{
"additionalHooks": "(^useQuery$|^useEffectAfterMount$)"
"additionalHooks": "(useQuery|useEffectAfterMount)"
}
],
"react/jsx-curly-brace-presence": "error",
"react/jsx-curly-brace-presence": "warn",
"react/jsx-filename-extension": [
"error",
"warn",
{
"extensions": [".jsx", ".tsx"],
"allow": "as-needed"
}
],
"react/jsx-no-comment-textnodes": "error",
"react/jsx-no-duplicate-props": "error",
"react/jsx-no-target-blank": "error",
"react/jsx-no-comment-textnodes": "warn",
"react/jsx-no-duplicate-props": "warn",
"react/jsx-no-target-blank": "warn",
"react/jsx-no-undef": "error",
"react/jsx-no-useless-fragment": "error",
"react/jsx-no-useless-fragment": "warn",
"react/jsx-pascal-case": [
"error",
"warn",
{
"allowAllCaps": true,
"ignore": []
}
],
"react/no-danger-with-children": "error",
"react/no-direct-mutation-state": "error",
"react/no-is-mounted": "error",
"react/no-unstable-nested-components": "error",
"react/no-danger-with-children": "warn",
"react/no-direct-mutation-state": "warn",
"react/no-is-mounted": "warn",
"react/no-unstable-nested-components": "warn",
"react/require-render-return": "error",
"react/rules-of-hooks": "error",
"react/self-closing-comp": "error",
"react/style-prop-object": "error",
"react/jsx-boolean-value": "error",
"react/self-closing-comp": "warn",
"react/style-prop-object": "warn",
"react/jsx-boolean-value": "warn",
// ESLint rules
"eslint/array-callback-return": "error",
"eslint/curly": ["error", "multi-line", "consistent"],
"eslint/array-callback-return": "warn",
// "eslint/curly": ["warn", "multi-line", "consistent"], // TODO: re-enable? this rule is really slow
"eslint/default-case": [
"error",
"warn",
{
"commentPattern": "^no default$"
}
],
"eslint/eqeqeq": ["error", "smart"],
"eslint/no-array-constructor": "error",
"eslint/no-caller": "error",
"eslint/no-cond-assign": ["error", "except-parens"],
"eslint/no-const-assign": "error",
"eslint/no-control-regex": "error",
"eslint/no-delete-var": "error",
"eslint/no-dupe-class-members": "error",
"eslint/no-dupe-keys": "error",
"eslint/no-duplicate-case": "error",
"eslint/no-empty-character-class": "error",
"eslint/no-empty-function": "error",
"eslint/no-empty-pattern": "error",
"eslint/no-eval": "error",
"eslint/no-ex-assign": "error",
"eslint/no-extend-native": "error",
"eslint/no-extra-bind": "error",
"eslint/no-extra-label": "error",
"eslint/no-fallthrough": "error",
"eslint/no-func-assign": "error",
"eslint/no-invalid-regexp": "error",
"eslint/no-iterator": "error",
"eslint/no-label-var": "error",
"eslint/no-var": "error",
"eslint/eqeqeq": ["warn", "smart"],
"eslint/no-array-constructor": "warn",
"eslint/no-caller": "warn",
"eslint/no-cond-assign": ["warn", "except-parens"],
"eslint/no-const-assign": "warn",
"eslint/no-control-regex": "warn",
"eslint/no-delete-var": "warn",
"eslint/no-dupe-class-members": "warn",
"eslint/no-dupe-keys": "warn",
"eslint/no-duplicate-case": "warn",
"eslint/no-empty-character-class": "warn",
"eslint/no-empty-function": "warn",
"eslint/no-empty-pattern": "warn",
"eslint/no-eval": "warn",
"eslint/no-ex-assign": "warn",
"eslint/no-extend-native": "warn",
"eslint/no-extra-bind": "warn",
"eslint/no-extra-label": "warn",
"eslint/no-fallthrough": "warn",
"eslint/no-func-assign": "warn",
"eslint/no-invalid-regexp": "warn",
"eslint/no-iterator": "warn",
"eslint/no-label-var": "warn",
"eslint/no-var": "warn",
"eslint/no-labels": [
"error",
"warn",
{
"allowLoop": true,
"allowSwitch": false
}
],
"eslint/no-new-func": "error",
"eslint/no-script-url": "error",
"eslint/no-self-assign": "error",
"eslint/no-self-compare": "error",
"eslint/no-sequences": "error",
"eslint/no-shadow-restricted-names": "error",
"eslint/no-sparse-arrays": "error",
"eslint/no-template-curly-in-string": "error",
"eslint/no-this-before-super": "error",
"eslint/no-throw-literal": "error",
"eslint/no-unreachable": "error",
"eslint/no-obj-calls": "error",
"eslint/no-new-wrappers": "error",
"eslint/no-unsafe-negation": "error",
"eslint/no-multi-str": "error",
"eslint/no-global-assign": "error",
"eslint/no-lone-blocks": "error",
"eslint/no-unused-labels": "error",
"eslint/no-object-constructor": "error",
"eslint/no-new-native-nonconstructor": "error",
"eslint/no-redeclare": "error",
"eslint/no-useless-computed-key": "error",
"eslint/no-useless-concat": "error",
"eslint/no-useless-escape": "error",
"eslint/require-yield": "error",
"eslint/getter-return": "error",
"eslint/unicode-bom": ["error", "never"],
"eslint/no-use-isnan": "error",
"eslint/valid-typeof": "error",
"eslint/no-new-func": "warn",
"eslint/no-script-url": "warn",
"eslint/no-self-assign": "warn",
"eslint/no-self-compare": "warn",
"eslint/no-sequences": "warn",
"eslint/no-shadow-restricted-names": "warn",
"eslint/no-sparse-arrays": "warn",
"eslint/no-template-curly-in-string": "warn",
"eslint/no-this-before-super": "warn",
"eslint/no-throw-literal": "warn",
"eslint/no-unreachable": "warn",
"eslint/no-obj-calls": "warn",
"eslint/no-new-wrappers": "warn",
"eslint/no-unsafe-negation": "warn",
"eslint/no-multi-str": "warn",
"eslint/no-global-assign": "warn",
"eslint/no-lone-blocks": "warn",
"eslint/no-unused-labels": "warn",
"eslint/no-object-constructor": "warn",
"eslint/no-new-native-nonconstructor": "warn",
"eslint/no-redeclare": "warn",
"eslint/no-useless-computed-key": "warn",
"eslint/no-useless-concat": "warn",
"eslint/no-useless-escape": "warn",
"eslint/require-yield": "warn",
"eslint/getter-return": "warn",
"eslint/unicode-bom": ["warn", "never"],
"eslint/no-use-isnan": "warn",
"eslint/valid-typeof": "warn",
"eslint/no-useless-rename": [
"error",
"warn",
{
"ignoreDestructuring": false,
"ignoreImport": false,
"ignoreExport": false
}
],
"eslint/no-with": "error",
"eslint/no-regex-spaces": "error",
"eslint/no-with": "warn",
"eslint/no-regex-spaces": "warn",
"eslint/no-restricted-globals": [
"error",
"warn",
// https://github.com/facebook/create-react-app/tree/main/packages/confusing-browser-globals
"addEventListener",
@@ -309,7 +330,7 @@
"top"
],
"eslint/no-restricted-imports": [
"error",
"warn",
{
"paths": [
{
@@ -348,10 +369,6 @@
"importNames": ["colors"],
"message": "Please use themes instead of colors"
},
{
"group": ["**/style/themes/*"],
"message": "Please do not import theme files directly"
},
{
"group": ["@actual-app/web/**/*"],
"message": "Please do not import `@actual-app/web` in `loot-core`"
@@ -359,15 +376,61 @@
]
}
],
"eslint/no-useless-constructor": "error",
"eslint/no-undef": "error",
"eslint/no-unused-expressions": "error"
"eslint/no-useless-constructor": "warn",
"eslint/no-undef": "warn",
"eslint/no-unused-expressions": "warn"
},
"overrides": [
{
"files": ["packages/desktop-electron/**/*"],
// TODO: fix the issues in these files
"files": [
"packages/component-library/src/Menu.tsx",
"packages/desktop-client/src/components/accounts/Account.jsx",
"packages/desktop-client/src/components/accounts/MobileAccount.jsx",
"packages/desktop-client/src/components/accounts/MobileAccounts.jsx",
"packages/desktop-client/src/components/budget/BudgetCategories.jsx",
"packages/desktop-client/src/components/budget/BudgetSummaries.tsx",
"packages/desktop-client/src/components/budget/DynamicBudgetTable.tsx",
"packages/desktop-client/src/components/budget/envelope/HoldMenu.tsx",
"packages/desktop-client/src/components/budget/envelope/TransferMenu.tsx",
"packages/desktop-client/src/components/budget/index.tsx",
"packages/desktop-client/src/components/budget/MobileBudget.tsx",
"packages/desktop-client/src/components/FinancesApp.tsx",
"packages/desktop-client/src/components/GlobalKeys.ts",
"packages/desktop-client/src/components/LoggedInUser.tsx",
"packages/desktop-client/src/components/manager/ManagementApp.jsx",
"packages/desktop-client/src/components/manager/subscribe/common.tsx",
"packages/desktop-client/src/components/ManageRules.tsx",
"packages/desktop-client/src/components/mobile/MobileAmountInput.jsx",
"packages/desktop-client/src/components/mobile/MobileNavTabs.tsx",
"packages/desktop-client/src/components/Modals.tsx",
"packages/desktop-client/src/components/modals/EditRule.jsx",
"packages/desktop-client/src/components/modals/ImportTransactions.jsx",
"packages/desktop-client/src/components/modals/ImportTransactionsModal/ImportTransactionsModal.tsx",
"packages/desktop-client/src/components/modals/MergeUnusedPayees.jsx",
"packages/desktop-client/src/components/Notifications.tsx",
"packages/desktop-client/src/components/payees/ManagePayees.jsx",
"packages/desktop-client/src/components/payees/ManagePayeesWithData.jsx",
"packages/desktop-client/src/components/payees/PayeeTable.tsx",
"packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTable.tsx",
"packages/desktop-client/src/components/reports/graphs/tableGraph/ReportTableTotals.tsx",
"packages/desktop-client/src/components/reports/reports/CashFlowCard.jsx",
"packages/desktop-client/src/components/reports/reports/CustomReport.jsx",
"packages/desktop-client/src/components/reports/reports/CustomReport.tsx",
"packages/desktop-client/src/components/reports/reports/NetWorthCard.jsx",
"packages/desktop-client/src/components/reports/SaveReportName.tsx",
"packages/desktop-client/src/components/reports/useReport.ts",
"packages/desktop-client/src/components/schedules/ScheduleDetails.jsx",
"packages/desktop-client/src/components/schedules/ScheduleEditModal.tsx",
"packages/desktop-client/src/components/schedules/SchedulesTable.tsx",
"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/hooks/useEffectAfterMount.ts",
"packages/desktop-client/src/hooks/useQuery.ts"
],
"rules": {
"react/rules-of-hooks": "off"
"react/exhaustive-deps": "off"
}
},
{
@@ -404,18 +467,19 @@
"typescript-paths/absolute-import": ["error", { "enableAlias": false }]
}
},
{
"files": ["packages/desktop-client/src/style/themes/*"],
"rules": {
"eslint/no-restricted-imports": "off"
}
},
// TODO: enable these
{
"files": [
"packages/desktop-client/src/components/admin/UserAccess/UserAccess.tsx",
"packages/desktop-client/src/components/admin/UserDirectory/UserDirectory.tsx",
"packages/desktop-client/src/components/budget/BudgetCategories.tsx",
"packages/desktop-client/src/components/budget/envelope/BalanceMovementMenu.tsx",
"packages/desktop-client/src/components/ManageRules.tsx",
"packages/desktop-client/src/components/mobile/budget/ExpenseGroupList.tsx",
"packages/desktop-client/src/components/modals/EditFieldModal.tsx",
"packages/desktop-client/src/components/reports/reports/Calendar.tsx",
"packages/desktop-client/src/components/schedules/ScheduleLink.tsx",
"packages/desktop-client/src/components/ServerContext.tsx",
"packages/desktop-client/src/components/table.tsx"
],
"rules": {

View File

@@ -42,12 +42,6 @@ yarn start:desktop
- Use `yarn workspace <workspace-name> run <command>` for workspace-specific tasks
- Tests run once and exit by default (using `vitest --run`)
### ⚠️ CRITICAL REQUIREMENT: AI-Generated Commit Messages and PR Titles
**ALL commit messages and PR titles MUST be prefixed with `[AI]`.** No exceptions.
See [PR and Commit Rules](.github/agents/pr-and-commit-rules.md) for the full specification, including git safety rules, pre-commit checklist, and PR workflow.
### Task Orchestration with Lage
The project uses **[lage](https://microsoft.github.io/lage/)** (a task runner for JavaScript monorepos) to efficiently run tests and other tasks across multiple workspaces:
@@ -84,7 +78,7 @@ The core application logic that runs on any platform.
```bash
# Run all loot-core tests
yarn workspace @actual-app/core run test
yarn workspace loot-core run test
# Or run tests across all packages using lage
yarn test
@@ -175,7 +169,7 @@ Custom ESLint rules specific to Actual.
- `no-untranslated-strings`: Enforces i18n usage
- `prefer-trans-over-t`: Prefers Trans component over t() function
- `prefer-logger-over-console`: Enforces using logger instead of console in `packages/loot-core/`
- `prefer-logger-over-console`: Enforces using logger instead of console
- `typography`: Typography rules
- `prefer-if-statement`: Prefers explicit if statements
@@ -219,7 +213,7 @@ yarn test
yarn test:debug
# Run tests for a specific package
yarn workspace @actual-app/core run test
yarn workspace loot-core run test
```
**E2E Tests (Playwright)**
@@ -265,10 +259,6 @@ Always run `yarn typecheck` before committing.
- Generate i18n files: `yarn generate:i18n`
- Custom ESLint rules enforce translation usage
### 5. Financial Number Typography
- Wrap standalone financial numbers with `FinancialText` or apply `styles.tnum` directly if wrapping is not possible
## Code Style & Conventions
### TypeScript Guidelines
@@ -298,7 +288,6 @@ Always run `yarn typecheck` before committing.
**React Patterns:**
- The project uses **React Compiler** (`babel-plugin-react-compiler`) in the desktop-client. The compiler auto-memoizes component bodies, so you can omit manual `useCallback`, `useMemo`, and `React.memo` when adding or refactoring code; prefer inline callbacks and values unless a stable identity is required by a non-compiled dependency.
- Don't use `React.FunctionComponent` or `React.FC` - type props directly
- Don't use `React.*` patterns - use named imports instead
- Use `<Link>` instead of `<a>` tags
@@ -339,13 +328,18 @@ Always maintain newlines between import groups.
**Never:**
- Use `console.*` (use logger instead - enforced by ESLint)
- Import from `uuid` without destructuring: use `import { v4 as uuidv4 } from 'uuid'`
- Import colors directly - use theme instead
- Import `@actual-app/web/*` in `loot-core`
**Git Commands:**
See [PR and Commit Rules](.github/agents/pr-and-commit-rules.md) for complete git safety rules, commit message requirements, and PR workflow.
- Never update git config
- Never run destructive git operations (force push, hard reset) unless explicitly requested
- Never skip hooks (--no-verify, --no-gpg-sign)
- Never force push to main/master
- Never commit unless explicitly asked
## File Structure Patterns
@@ -508,7 +502,7 @@ Icons in `packages/component-library/src/icons/` are auto-generated. Don't manua
1. Clean build artifacts: `rm -rf packages/*/dist packages/*/lib-dist packages/*/build`
2. Reinstall dependencies: `yarn install`
3. Check Node.js version (requires >=22)
3. Check Node.js version (requires >=20)
4. Check Yarn version (requires ^4.9.1)
## Testing Patterns
@@ -544,10 +538,10 @@ Icons in `packages/component-library/src/icons/` are auto-generated. Don't manua
Before committing changes, ensure:
- [ ] Commit and PR rules followed (see [PR and Commit Rules](.github/agents/pr-and-commit-rules.md))
- [ ] `yarn typecheck` passes
- [ ] `yarn lint:fix` has been run
- [ ] Relevant tests pass
- [ ] No new console.\* usage (use logger)
- [ ] User-facing strings are translated
- [ ] Prefer `type` over `interface`
- [ ] Named exports used (not default exports)
@@ -557,11 +551,9 @@ Before committing changes, ensure:
## Pull Request Guidelines
See [PR and Commit Rules](.github/agents/pr-and-commit-rules.md) for complete PR creation rules, including title prefix requirements, labeling, and PR template handling.
When creating pull requests:
## Code Review Guidelines
When performing code reviews (especially for LLM agents): **see [CODE_REVIEW_GUIDELINES.md](./CODE_REVIEW_GUIDELINES.md)** for specific guidelines.
- **AI-Generated PRs**: If you create a PR using AI assistance, add the **"AI generated"** label to the pull request. This helps maintainers understand the nature of the contribution.
## Performance Considerations
@@ -588,7 +580,7 @@ yarn install:server
## Environment Requirements
- **Node.js**: >=22
- **Node.js**: >=20
- **Yarn**: ^4.9.1 (managed by packageManager field)
- **Browser Targets**: Electron >= 35.0, modern browsers (see browserslist)
@@ -601,40 +593,3 @@ The codebase is actively being migrated:
- **React.\* → Named Imports**: Legacy React.\* patterns being removed
When working with older code, follow the newer patterns described in this guide.
## Cursor Cloud specific instructions
### Services overview
| Service | Command | Port | Required |
| ------------------- | ----------------------- | ---- | ----------------------------- |
| Web Frontend (Vite) | `yarn start` | 3001 | Yes |
| Sync Server | `yarn start:server-dev` | 5006 | Optional (sync features only) |
All storage is **SQLite** (file-based via `better-sqlite3`). No external databases or services are needed.
### Running the app
- `yarn start` builds the plugins-service worker, loot-core browser backend, and starts the Vite dev server on port **3001**.
- `yarn start:server-dev` starts both the sync server (port 5006) and the web frontend together.
- The Vite HMR dev server serves many unbundled modules. In constrained environments, the browser may hit `ERR_INSUFFICIENT_RESOURCES`. If that happens, use `yarn build:browser` followed by serving the built output from `packages/desktop-client/build/` with proper COOP/COEP headers (`Cross-Origin-Opener-Policy: same-origin`, `Cross-Origin-Embedder-Policy: require-corp`).
### Lint, test, typecheck
Standard commands documented in `package.json` scripts and the Quick Start section above:
- `yarn lint` / `yarn lint:fix` (uses oxlint + oxfmt)
- `yarn test` (lage across all workspaces)
- `yarn typecheck` (tsgo + lage typecheck)
### Testing and previewing the app
When running the app for manual testing or demos, use **"View demo"** on the initial setup screen (after selecting "Don't use a server"). This creates a test budget pre-populated with realistic sample data (accounts, transactions, categories, and budgeted amounts), which is far more useful than starting with an empty budget.
### Gotchas
- The `engines` field requires **Node.js >=22** and **Yarn ^4.9.1**. The `.nvmrc` specifies `v22/*`.
- Pre-commit hook runs `lint-staged` (oxfmt + oxlint) via Husky. Run `yarn prepare` once after install to set up hooks.
- Lage caches test results in `.lage/`. If tests behave unexpectedly, clear with `rm -rf .lage`.
- Native modules (`better-sqlite3`, `bcrypt`) require build tools (`gcc`, `make`, `python3`). These are pre-installed in the Cloud VM.
- All yarn commands must be run from the repository root, never from child workspaces.

View File

@@ -1,2 +0,0 @@
@AGENTS.md
@.github/agents/pr-and-commit-rules.md

View File

@@ -1,94 +0,0 @@
# CODE_REVIEW_GUIDELINES.md - Guidelines for LLM Agents Performing Code Reviews
This document provides specific guidelines for LLM agents performing code reviews on the Actual Budget codebase. These guidelines help maintain code quality, consistency, and follow the project's design principles.
## Settings Proliferation
**Do NOT add new settings for every little UI tweak.**
Actual Budget follows a design philosophy that prioritizes simplicity and avoids settings bloat. Before introducing code that adds new settings:
- Consider if the UI tweak can be achieved through existing theme/design tokens
- Evaluate whether the setting provides meaningful value to users
- Check if the change aligns with Actual's design guidelines
- Prefer hardcoded values or theme-based solutions over adding user-facing settings
## TypeScript Strict Mode Suppressions
**Do NOT approve code that adds new `@ts-strict-ignore` comments.**
The project uses strict TypeScript checking via `typescript-strict-plugin`. Adding `@ts-strict-ignore` comments undermines type safety. Instead, review should encourage:
- Fixing the underlying type issue
- Using proper type definitions
- Refactoring code to satisfy strict type checking
- Only in exceptional cases, document why strict checking cannot be applied and seek alternative solutions
## Linter Suppressions
**Do NOT approve code that adds new `eslint-disable` or `oxlint-disable` comments.**
Linter rules are in place for good reasons. Instead of suppressing them:
- Fix the underlying issue
- If the rule is incorrectly flagging valid code, consider if the code can be refactored
- Only approve suppressions if there's a documented, exceptional reason
## Type Assertions
**Prefer `x satisfies SomeType` over `x as SomeType` for type coercions.**
The `satisfies` operator provides better type safety by:
- Ensuring the value actually satisfies the type (narrowing)
- Preserving the actual type information for better inference
- Catching type mismatches at compile time
**Exception:** If you truly need to assert a type that TypeScript cannot verify (e.g., runtime type guards), use `as` but require a comment explaining why it's safe.
## Avoiding `any` and `unknown`
**Flag code that uses `any` or `unknown` unless absolutely necessary.**
The use of `any` or `unknown` should be rare and well-justified. Before approving:
- Require explicit justification for why the type cannot be determined
- Suggest using proper type definitions or generics
- Consider if the type can be narrowed or properly inferred
- Look for existing type definitions in `packages/loot-core/src/types/`
Only approve `any` or `unknown` if there's a documented, exceptional reason (e.g., interop with untyped external libraries, gradual migration).
## Internationalization (i18n)
**All user-facing strings must be translated.**
The project has custom ESLint rules (`actual/no-untranslated-strings`) that enforce i18n usage, but reviewers should actively flag untranslated strings:
- Use `Trans` component instead of `t()` function when possible
- All text visible to users must use i18n functions
- Flag hardcoded strings that should be translated
## Test Mocking
**Minimize mocked dependencies; prefer real implementations.**
When reviewing tests, encourage the use of real implementations over mocks:
- Prefer real dependencies, utilities, and data structures
- Only mock when the real implementation is impractical (e.g., external APIs, file system in unit tests)
- Ensure mocks accurately represent real behavior
Over-mocking makes tests brittle and less reliable. Real implementations provide better confidence that code works correctly.
## Financial Number Typography
Standalone financial numbers should have tabular number styles applied.
- Standalone financial numbers should be wrapped with `FinancialText` or `styles.tnum` should be applied directly if wrapping is not possible
## Related Documentation
- See [AGENTS.md](./AGENTS.md) for general development guidelines
- See [CONTRIBUTING.md](./CONTRIBUTING.md) for contribution guidelines
- Community documentation: [https://actualbudget.org/docs/contributing/](https://actualbudget.org/docs/contributing/)

View File

@@ -17,7 +17,7 @@ packages/desktop-client/bin/remove-untranslated-languages
export NODE_OPTIONS="--max-old-space-size=4096"
yarn workspace plugins-service build
yarn workspace @actual-app/core build:browser
yarn workspace loot-core build:browser
yarn workspace @actual-app/web build:browser
echo "packages/desktop-client/build"

View File

@@ -51,17 +51,14 @@ fi
export NODE_OPTIONS="--max-old-space-size=4096"
yarn workspace plugins-service build
yarn workspace @actual-app/core build:node
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 @actual-app/core build:browser
yarn workspace loot-core build:browser
yarn workspace @actual-app/web build:browser
yarn workspace @actual-app/sync-server build
# Emit @actual-app/core declarations so desktop-electron (which includes typings/window.ts) can build
yarn workspace @actual-app/core exec tsgo -p tsconfig.json
yarn workspace desktop-electron update-client
(

View File

@@ -37,7 +37,7 @@ async function run() {
choices: [
{ title: '✨ Features', value: 'Features' },
{ title: '👍 Enhancements', value: 'Enhancements' },
{ title: '🐛 Bugfixes', value: 'Bugfixes' },
{ title: '🐛 Bugfix', value: 'Bugfix' },
{ title: '⚙️ Maintenance', value: 'Maintenance' },
],
},
@@ -160,8 +160,7 @@ category: ${type}
authors: [${username}]
---
${summary}
`;
${summary}`;
}
// simple exec that fails silently and returns an empty string on failure
@@ -178,4 +177,4 @@ async function execAsync(cmd: string, errorLog?: string): Promise<string> {
});
}
void run();
run();

View File

@@ -28,5 +28,5 @@ echo "Running VRT tests with the following parameters:"
echo "E2E_START_URL: $E2E_START_URL"
echo "VRT_ARGS: $VRT_ARGS"
MSYS_NO_PATHCONV=1 docker run --rm --network host -v "$(pwd)":/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.58.2-jammy /bin/bash \
MSYS_NO_PATHCONV=1 docker run --rm --network host -v "$(pwd)":/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.56.0-jammy /bin/bash \
-c "E2E_START_URL=$E2E_START_URL yarn vrt $VRT_ARGS"

View File

@@ -1,10 +1,6 @@
/** @type {import('lage').ConfigOptions} */
module.exports = {
pipeline: {
typecheck: {
type: 'npmScript',
dependsOn: ['^typecheck'],
},
test: {
type: 'npmScript',
options: {

View File

@@ -25,23 +25,21 @@
"start:desktop": "yarn desktop-dependencies && npm-run-all --parallel 'start:desktop-*'",
"start:docs": "yarn workspace docs start",
"desktop-dependencies": "npm-run-all --parallel rebuild-electron build:browser-backend build:plugins-service",
"start:desktop-node": "yarn workspace @actual-app/core watch:node",
"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:browser": "yarn workspace plugins-service build-dev && npm-run-all --parallel 'start:browser-*'",
"start:service-plugins": "yarn workspace plugins-service watch",
"start:browser-backend": "yarn workspace @actual-app/core watch:browser",
"start:browser-backend": "yarn workspace loot-core watch:browser",
"start:browser-frontend": "yarn workspace @actual-app/web start:browser",
"start:storybook": "yarn workspace @actual-app/components start:storybook",
"build:browser-backend": "yarn workspace @actual-app/core build:browser",
"build:browser-backend": "yarn workspace loot-core build:browser",
"build:server": "yarn build:browser && yarn workspace @actual-app/sync-server build",
"build:browser": "./bin/package-browser",
"build:desktop": "./bin/package-electron",
"build:plugins-service": "yarn workspace plugins-service build",
"build:api": "yarn workspace @actual-app/api build",
"build:docs": "yarn workspace docs build",
"build:storybook": "yarn workspace @actual-app/components build:storybook",
"deploy:docs": "yarn workspace docs deploy",
"generate:i18n": "yarn workspace @actual-app/web generate:i18n",
"generate:release-notes": "ts-node ./bin/release-note-generator.ts",
@@ -53,42 +51,39 @@
"vrt": "yarn workspace @actual-app/web run vrt",
"vrt:docker": "./bin/run-vrt",
"rebuild-electron": "./node_modules/.bin/electron-rebuild -m ./packages/loot-core",
"rebuild-node": "yarn workspace @actual-app/core rebuild",
"lint": "oxfmt --check . && oxlint --type-aware --quiet",
"lint:fix": "oxfmt . && oxlint --fix --type-aware --quiet",
"rebuild-node": "yarn workspace loot-core rebuild",
"lint": "oxfmt --check . && oxlint --deny-warnings",
"lint:fix": "oxfmt . && oxlint --deny-warnings --fix",
"install:server": "yarn workspaces focus @actual-app/sync-server --production",
"typecheck": "tsgo -p tsconfig.root.json --noEmit && lage typecheck",
"typecheck": "yarn tsc --incremental && tsc-strict",
"jq": "./node_modules/node-jq/bin/jq",
"prepare": "husky"
},
"devDependencies": {
"@octokit/rest": "^22.0.1",
"@types/node": "^22.19.10",
"@types/node": "^22.19.1",
"@types/prompts": "^2.4.9",
"@typescript/native-preview": "^7.0.0-dev.20260309.1",
"baseline-browser-mapping": "^2.9.19",
"cross-env": "^10.1.0",
"eslint": "^9.39.2",
"eslint-plugin-perfectionist": "^4.15.1",
"eslint-plugin-typescript-paths": "^0.0.33",
"html-to-image": "^1.11.13",
"husky": "^9.1.7",
"lage": "^2.14.17",
"lage": "^2.14.15",
"lint-staged": "^16.2.7",
"minimatch": "^10.1.2",
"minimatch": "^10.1.1",
"node-jq": "^6.3.1",
"npm-run-all": "^4.1.5",
"oxfmt": "^0.32.0",
"oxlint": "^1.47.0",
"oxlint-tsgolint": "^0.13.0",
"p-limit": "^7.3.0",
"oxfmt": "^0.22.0",
"oxlint": "^1.37.0",
"p-limit": "^7.2.0",
"prompts": "^2.4.2",
"source-map-support": "^0.5.21",
"ts-node": "^10.9.2",
"typescript": "^5.9.3"
"typescript": "^5.9.3",
"typescript-strict-plugin": "^2.4.4"
},
"resolutions": {
"adm-zip": "patch:adm-zip@npm%3A0.5.16#~/.yarn/patches/adm-zip-npm-0.5.16-4556fea098.patch",
"rollup": "4.40.1",
"socks": ">=2.8.3"
},
@@ -97,7 +92,7 @@
"oxfmt --no-error-on-unmatched-pattern"
],
"*.{js,mjs,jsx,ts,tsx}": [
"oxlint --fix --type-aware --quiet"
"oxlint --deny-warnings --fix"
]
},
"browserslist": [

View File

@@ -3,18 +3,25 @@ import type {
RequestInit as FetchInit,
} from 'node-fetch';
import { init as initLootCore } from '@actual-app/core/server/main';
import type { InitConfig, lib } from '@actual-app/core/server/main';
// loot-core types
import type { InitConfig } from 'loot-core/server/main';
// @ts-ignore: bundle not available until we build it
import * as bundle from './app/bundle.api.js';
import * as injected from './injected';
import { validateNodeVersion } from './validateNodeVersion';
let actualApp: null | typeof bundle.lib;
export const internal = bundle.lib;
export * from './methods';
export * as utils from './utils';
/** @deprecated Please use return value of `init` instead */
export let internal: typeof lib | null = null;
export async function init(config: InitConfig = {}) {
if (actualApp) {
return;
}
validateNodeVersion();
if (!globalThis.fetch) {
@@ -25,19 +32,21 @@ export async function init(config: InitConfig = {}) {
};
}
internal = await initLootCore(config);
return internal;
await bundle.init(config);
actualApp = bundle.lib;
injected.override(bundle.lib.send);
return bundle.lib;
}
export async function shutdown() {
if (internal) {
if (actualApp) {
try {
await internal.send('sync');
await actualApp.send('sync');
} catch {
// most likely that no budget is loaded, so the sync failed
}
await internal.send('close-budget');
internal = null;
await actualApp.send('close-budget');
actualApp = null;
}
}

View File

@@ -1,25 +0,0 @@
import { init as initLootCore } from '@actual-app/core/server/main';
import type { InitConfig, lib } from '@actual-app/core/server/main';
export * from './methods';
export * as utils from './utils';
let internal: typeof lib | null = null;
export async function init(config: InitConfig = {}) {
internal = await initLootCore(config);
return internal;
}
export async function shutdown() {
if (internal) {
try {
await internal.send('sync');
} catch {
// most likely that no budget is loaded, so the sync failed
}
await internal.send('close-budget');
internal = null;
}
}

7
packages/api/injected.js Normal file
View File

@@ -0,0 +1,7 @@
// TODO: comment on why it works this way
export let send;
export function override(sendImplementation) {
send = sendImplementation;
}

View File

@@ -1,29 +1,10 @@
import * as fs from 'fs/promises';
import * as path from 'path';
import { vi } from 'vitest';
import type { RuleEntity } from '@actual-app/core/types/models';
import { type RuleEntity } from 'loot-core/types/models';
import * as api from './index';
// In tests we run from source; loot-core's API fs uses __dirname (for the built dist/).
// Mock the fs so path constants point at loot-core package root where migrations live.
vi.mock(
'../loot-core/src/platform/server/fs/index.api',
async importOriginal => {
const actual = (await importOriginal()) as Record<string, unknown>;
const pathMod = await import('path');
const lootCoreRoot = pathMod.join(__dirname, '..', 'loot-core');
return {
...actual,
migrationsPath: pathMod.join(lootCoreRoot, 'migrations'),
bundledDatabasePath: pathMod.join(lootCoreRoot, 'default-db.sqlite'),
demoBudgetPath: pathMod.join(lootCoreRoot, 'demo-budget'),
};
},
);
const budgetName = 'test-budget';
global.IS_TESTING = true;
@@ -375,143 +356,6 @@ describe('API CRUD operations', () => {
);
});
// apis: createTag, getTags, updateTag, deleteTag
test('Tags: successfully complete tag operations', async () => {
// Create tags
const tagId1 = await api.createTag({ tag: 'test-tag1', color: '#ff0000' });
const tagId2 = await api.createTag({
tag: 'test-tag2',
description: 'A test tag',
});
let tags = await api.getTags();
expect(tags).toEqual(
expect.arrayContaining([
expect.objectContaining({
id: tagId1,
tag: 'test-tag1',
color: '#ff0000',
}),
expect.objectContaining({
id: tagId2,
tag: 'test-tag2',
description: 'A test tag',
}),
]),
);
// Update tag
await api.updateTag(tagId1, { tag: 'updated-tag', color: '#00ff00' });
tags = await api.getTags();
expect(tags).toEqual(
expect.arrayContaining([
expect.objectContaining({
id: tagId1,
tag: 'updated-tag',
color: '#00ff00',
}),
]),
);
// Delete tag
await api.deleteTag(tagId2);
tags = await api.getTags();
expect(tags).not.toEqual(
expect.arrayContaining([expect.objectContaining({ id: tagId2 })]),
);
});
test('Tags: create tag with minimal fields', async () => {
const tagId = await api.createTag({ tag: 'minimal-tag' });
const tags = await api.getTags();
expect(tags).toEqual(
expect.arrayContaining([
expect.objectContaining({
id: tagId,
tag: 'minimal-tag',
color: null,
description: null,
}),
]),
);
});
test('Tags: update single field only', async () => {
const tagId = await api.createTag({ tag: 'original', color: '#ff0000' });
// Update only color, tag and description should remain unchanged
await api.updateTag(tagId, { color: '#00ff00' });
const tags = await api.getTags();
expect(tags).toEqual(
expect.arrayContaining([
expect.objectContaining({
id: tagId,
tag: 'original',
color: '#00ff00',
description: null,
}),
]),
);
});
test('Tags: handle null values correctly', async () => {
const tagId = await api.createTag({
tag: 'with-nulls',
color: null,
description: null,
});
const tags = await api.getTags();
expect(tags).toEqual(
expect.arrayContaining([
expect.objectContaining({
id: tagId,
color: null,
description: null,
}),
]),
);
});
test('Tags: clear optional field', async () => {
const tagId = await api.createTag({
tag: 'clearable',
color: '#ff0000',
description: 'will be cleared',
});
// Clear color by setting to null
await api.updateTag(tagId, { color: null });
let tags = await api.getTags();
expect(tags).toEqual(
expect.arrayContaining([
expect.objectContaining({
id: tagId,
tag: 'clearable',
color: null,
description: 'will be cleared',
}),
]),
);
// Clear description by setting to null
await api.updateTag(tagId, { description: null });
tags = await api.getTags();
expect(tags).toEqual(
expect.arrayContaining([
expect.objectContaining({
id: tagId,
tag: 'clearable',
color: null,
description: null,
}),
]),
);
});
// apis: getRules, getPayeeRules, createRule, updateRule, deleteRule
test('Rules: successfully update rules', async () => {
await api.createPayee({ name: 'test-payee' });

View File

@@ -5,17 +5,16 @@ import type {
APIFileEntity,
APIPayeeEntity,
APIScheduleEntity,
APITagEntity,
} from '@actual-app/core/server/api-models';
import { lib } from '@actual-app/core/server/main';
import type { Query } from '@actual-app/core/shared/query';
import type { ImportTransactionsOpts } from '@actual-app/core/types/api-handlers';
import type { Handlers } from '@actual-app/core/types/handlers';
} from 'loot-core/server/api-models';
import type { Query } from 'loot-core/shared/query';
import type { Handlers } from 'loot-core/types/handlers';
import type {
ImportTransactionEntity,
RuleEntity,
TransactionEntity,
} from '@actual-app/core/types/models';
} from 'loot-core/types/models';
import * as injected from './injected';
export { q } from './app/query';
@@ -23,7 +22,7 @@ function send<K extends keyof Handlers, T extends Handlers[K]>(
name: K,
args?: Parameters<T>[0],
): Promise<Awaited<ReturnType<T>>> {
return lib.send(name, args);
return injected.send(name, args);
}
export async function runImport(
@@ -126,6 +125,11 @@ export function addTransactions(
});
}
export type ImportTransactionsOpts = {
defaultCleared?: boolean;
dryRun?: boolean;
};
export function importTransactions(
accountId: APIAccountEntity['id'],
transactions: ImportTransactionEntity[],
@@ -270,25 +274,6 @@ export function deletePayee(id: APIPayeeEntity['id']) {
return send('api/payee-delete', { id });
}
export function getTags() {
return send('api/tags-get');
}
export function createTag(tag: Omit<APITagEntity, 'id'>) {
return send('api/tag-create', { tag });
}
export function updateTag(
id: APITagEntity['id'],
fields: Partial<Omit<APITagEntity, 'id'>>,
) {
return send('api/tag-update', { id, fields });
}
export function deleteTag(id: APITagEntity['id']) {
return send('api/tag-delete', { id });
}
export function mergePayees(
targetId: APIPayeeEntity['id'],
mergeIds: APIPayeeEntity['id'][],

View File

@@ -1,6 +1,6 @@
{
"name": "@actual-app/api",
"version": "26.3.0",
"version": "26.1.0",
"description": "An API for Actual",
"license": "MIT",
"files": [
@@ -8,43 +8,28 @@
"dist"
],
"main": "dist/index.js",
"module": "dist/browser.js",
"types": "@types/index.d.ts",
"exports": {
".": {
"browser": {
"types": "./@types/index.d.ts",
"default": "./dist/browser.js"
},
"default": {
"types": "./@types/index.d.ts",
"default": "./dist/index.js"
}
}
},
"scripts": {
"build": "yarn build:node && yarn build:browser",
"build:node": "vite build",
"build:browser": "vite build --config vite.browser.config.ts",
"test": "vitest --run",
"typecheck": "tsgo -b && tsc-strict"
"build:app": "yarn workspace loot-core build:api",
"build:crdt": "yarn workspace @actual-app/crdt build",
"build:node": "tsc --p tsconfig.dist.json && tsc-alias -p tsconfig.dist.json",
"build:migrations": "cp migrations/*.sql dist/migrations",
"build:default-db": "cp default-db.sqlite dist/",
"build": "yarn run clean && yarn run build:app && yarn run build:node && yarn run build:migrations && yarn run build:default-db",
"test": "yarn run clean && yarn run build:app && yarn run build:crdt && vitest --run",
"clean": "rm -rf dist @types"
},
"dependencies": {
"@actual-app/core": "workspace:*",
"@actual-app/crdt": "workspace:*",
"better-sqlite3": "^12.6.2",
"@actual-app/crdt": "workspace:^",
"better-sqlite3": "^12.4.1",
"compare-versions": "^6.1.1",
"node-fetch": "^3.3.2",
"uuid": "^13.0.0"
},
"devDependencies": {
"@typescript/native-preview": "^7.0.0-dev.20260309.1",
"rollup-plugin-visualizer": "^6.0.5",
"typescript-strict-plugin": "^2.4.4",
"vite": "^8.0.0",
"vite-plugin-dts": "^4.5.4",
"vite-plugin-peggy-loader": "^2.0.1",
"vitest": "^4.1.0"
"tsc-alias": "^1.8.16",
"typescript": "^5.9.3",
"vitest": "^4.0.9"
},
"engines": {
"node": ">=20"

View File

@@ -0,0 +1,19 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
// Using ES2021 because that's the newest version where
// the latest Node 16.x release supports all of the features
"target": "ES2021",
"module": "CommonJS",
"moduleResolution": "node10",
"noEmit": false,
"declaration": true,
"outDir": "dist",
"declarationDir": "@types",
"paths": {
"loot-core/*": ["./@types/loot-core/src/*"]
}
},
"include": ["."],
"exclude": ["**/node_modules/*", "dist", "@types", "*.test.ts"]
}

View File

@@ -1,29 +0,0 @@
{
"extends": "../../tsconfig.json",
"compilerOptions": {
"composite": true,
// Using ES2021 because that's the newest version where
// the latest Node 16.x release supports all of the features
"target": "ES2021",
"module": "es2022",
"moduleResolution": "bundler",
"noEmit": false,
"declaration": true,
"declarationMap": true,
"outDir": "dist",
"rootDir": ".",
"declarationDir": "@types",
"tsBuildInfoFile": "dist/.tsbuildinfo",
"plugins": [{ "name": "typescript-strict-plugin", "paths": ["."] }]
},
"references": [{ "path": "../crdt" }, { "path": "../loot-core" }],
"include": ["."],
"exclude": [
"**/node_modules/*",
"dist",
"@types",
"*.test.ts",
"*.config.ts",
"*.browser.config.ts"
]
}

View File

@@ -1,2 +0,0 @@
declare module 'hyperformula/i18n/languages/enUS';
declare module '*.pegjs';

View File

@@ -1 +0,0 @@
declare module '*.pegjs';

View File

@@ -1,4 +1,5 @@
import { lib } from '@actual-app/core/server/main';
// @ts-ignore: bundle not available until we build it
import * as bundle from './app/bundle.api.js';
export const amountToInteger = lib.amountToInteger;
export const integerToAmount = lib.integerToAmount;
export const amountToInteger = bundle.lib.amountToInteger;
export const integerToAmount = bundle.lib.integerToAmount;

View File

@@ -1,26 +0,0 @@
import path from 'path';
import { defineConfig } from 'vite';
import peggyLoader from 'vite-plugin-peggy-loader';
const distDir = path.resolve(__dirname, 'dist');
export default defineConfig({
build: {
target: 'esnext',
outDir: distDir,
emptyOutDir: false,
sourcemap: true,
lib: {
entry: path.resolve(__dirname, 'index.web.ts'),
formats: ['es'],
fileName: () => 'browser.js',
},
},
plugins: [peggyLoader()],
resolve: {
// Default extensions — picks up browser implementations (index.ts)
// instead of .api.ts (which resolves to Node.js/Electron code)
extensions: ['.js', '.ts', '.tsx', '.json'],
},
});

View File

@@ -1,93 +0,0 @@
import fs from 'fs';
import path from 'path';
import { visualizer } from 'rollup-plugin-visualizer';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import peggyLoader from 'vite-plugin-peggy-loader';
const lootCoreRoot = path.resolve(__dirname, '../loot-core');
const distDir = path.resolve(__dirname, 'dist');
const typesDir = path.resolve(__dirname, '@types');
function cleanOutputDirs() {
return {
name: 'clean-output-dirs',
buildStart() {
if (fs.existsSync(distDir)) fs.rmSync(distDir, { recursive: true });
if (fs.existsSync(typesDir)) fs.rmSync(typesDir, { recursive: true });
},
};
}
function copyMigrationsAndDefaultDb() {
return {
name: 'copy-migrations-and-default-db',
closeBundle() {
const migrationsSrc = path.join(lootCoreRoot, 'migrations');
const defaultDbPath = path.join(lootCoreRoot, 'default-db.sqlite');
if (!fs.existsSync(migrationsSrc)) {
throw new Error(`migrations directory not found at ${migrationsSrc}`);
}
const migrationsStat = fs.statSync(migrationsSrc);
if (!migrationsStat.isDirectory()) {
throw new Error(`migrations path is not a directory: ${migrationsSrc}`);
}
const migrationsDest = path.join(distDir, 'migrations');
fs.mkdirSync(migrationsDest, { recursive: true });
for (const name of fs.readdirSync(migrationsSrc)) {
if (name.endsWith('.sql') || name.endsWith('.js')) {
fs.copyFileSync(
path.join(migrationsSrc, name),
path.join(migrationsDest, name),
);
}
}
if (!fs.existsSync(defaultDbPath)) {
throw new Error(`default-db.sqlite not found at ${defaultDbPath}`);
}
fs.copyFileSync(defaultDbPath, path.join(distDir, 'default-db.sqlite'));
},
};
}
export default defineConfig({
ssr: { noExternal: true, external: ['better-sqlite3'] },
build: {
ssr: true,
target: 'node20',
outDir: distDir,
emptyOutDir: true,
sourcemap: true,
lib: {
entry: path.resolve(__dirname, 'index.ts'),
formats: ['cjs'],
fileName: () => 'index.js',
},
},
plugins: [
cleanOutputDirs(),
peggyLoader(),
dts({
tsconfigPath: path.resolve(__dirname, 'tsconfig.json'),
outDir: path.resolve(__dirname, '@types'),
rollupTypes: true,
}),
copyMigrationsAndDefaultDb(),
visualizer({ template: 'raw-data', filename: 'app/stats.json' }),
],
resolve: {
extensions: ['.api.ts', '.js', '.ts', '.tsx', '.json'],
},
test: {
globals: true,
onConsoleLog(log: string, type: 'stdout' | 'stderr'): boolean | void {
// print only console.error
return type === 'stderr';
},
maxWorkers: 2,
},
});

View File

@@ -0,0 +1,10 @@
export default {
test: {
globals: true,
onConsoleLog(log: string, type: 'stdout' | 'stderr'): boolean | void {
// print only console.error
return type === 'stderr';
},
maxWorkers: 2,
},
};

View File

@@ -1 +0,0 @@
dist/*

View File

@@ -174,7 +174,6 @@ function parseArgs(argv) {
return {
sections,
identifier: getSingleValue(args, 'identifier') ?? 'bundle-stats',
format: getSingleValue(args, 'format') ?? 'pr-body',
};
}
@@ -464,12 +463,6 @@ const TOTAL_HEADERS = makeHeader([
'Total bundle size',
'% Changed',
]);
const SUMMARY_HEADERS = makeHeader([
'Bundle',
'Files count',
'Total bundle size',
'% Changed',
]);
const TABLE_HEADERS = makeHeader(['Asset', 'File Size', '% Changed']);
const CHUNK_TABLE_HEADERS = makeHeader(['File', 'Δ', 'Size']);
@@ -603,24 +596,6 @@ function printTotalAssetTable(statsDiff) {
return `**Total**\n${TOTAL_HEADERS}\n${printAssetTableRow(statsDiff.total)}`;
}
function printSummaryTable(sections) {
if (sections.length === 0) {
return `${SUMMARY_HEADERS}\nNo bundle stats were generated.`;
}
const rows = sections.map(section => {
const total = section.statsDiff.total;
return [
section.name,
total.name,
toFileSizeDiffCell(total),
conditionalPercentage(total.diffPercentage),
].join(' | ');
});
return `${SUMMARY_HEADERS}\n${rows.join('\n')}`;
}
function renderSection(title, statsDiff, chunkModuleDiff) {
const { total, ...groups } = statsDiff;
const parts = [`#### ${title}`, '', printTotalAssetTable({ total })];
@@ -640,30 +615,8 @@ function renderSection(title, statsDiff, chunkModuleDiff) {
return parts.join('\n');
}
function renderSections(sections) {
return sections
.map(section =>
renderSection(section.name, section.statsDiff, section.chunkDiff),
)
.join('\n\n---\n\n');
}
function getIdentifierMarkers(key) {
const label = 'bundlestats-action-comment';
return {
start: `<!--- ${label} key:${key} start --->`,
end: `<!--- ${label} key:${key} end --->`,
};
}
async function main() {
const args = parseArgs(process.argv);
const allowedFormats = new Set(['comment', 'pr-body']);
if (!allowedFormats.has(args.format)) {
throw new Error(
`Invalid format "${args.format}". Use "comment" or "pr-body".`,
);
}
console.error(
`[bundle-stats] Found ${args.sections.length} sections to process`,
@@ -701,29 +654,22 @@ async function main() {
});
}
const markers = getIdentifierMarkers(args.identifier);
const sectionsContent = renderSections(sections);
const summaryTable = printSummaryTable(sections);
const identifier = `<!--- bundlestats-action-comment key:${args.identifier} --->`;
const detailedBody = ['### Bundle Stats', '', sectionsContent].join('\n');
const commentBody = [markers.start, detailedBody, '', markers.end, ''].join(
'\n',
);
const prBody = [
markers.start,
const comment = [
'### Bundle Stats',
'',
summaryTable,
sections
.map(section =>
renderSection(section.name, section.statsDiff, section.chunkDiff),
)
.join('\n\n---\n\n'),
'',
`<details>\n<summary>View detailed bundle stats</summary>\n\n${sectionsContent}\n</details>`,
'',
markers.end,
identifier,
'',
].join('\n');
process.stdout.write(args.format === 'comment' ? commentBody : prBody);
process.stdout.write(comment);
}
main().catch(error => {

View File

@@ -19,10 +19,6 @@ const options = {
type: 'string', // nightly, hotfix, monthly, auto
short: 't',
},
version: {
type: 'string',
short: 'v',
},
update: {
type: 'boolean',
short: 'u',
@@ -48,21 +44,16 @@ try {
const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
const currentVersion = packageJson.version;
const explicitVersion = values.version;
let newVersion;
if (explicitVersion) {
newVersion = explicitVersion;
} else {
try {
newVersion = getNextVersion({
currentVersion,
type: values.type,
currentDate: new Date(),
});
} catch (e) {
console.error(e.message);
process.exit(1);
}
try {
newVersion = getNextVersion({
currentVersion,
type: values.type,
currentDate: new Date(),
});
} catch (e) {
console.error(e.message);
process.exit(1);
}
process.stdout.write(newVersion);

View File

@@ -14,14 +14,10 @@ import process from 'node:process';
import { Octokit } from '@octokit/rest';
const BOT_BOUNDARY_MARKER = '<!--- actual-bot-sections --->';
const BOT_BOUNDARY_TEXT = `${BOT_BOUNDARY_MARKER}\n<hr />`;
function parseArgs(argv) {
const args = {
commentFile: null,
identifier: null,
target: 'comment',
};
for (let i = 2; i < argv.length; i += 2) {
@@ -45,9 +41,6 @@ function parseArgs(argv) {
case '--identifier':
args.identifier = value;
break;
case '--target':
args.target = value;
break;
default:
throw new Error(`Unknown argument "${key}".`);
}
@@ -61,12 +54,6 @@ function parseArgs(argv) {
throw new Error('Missing required argument "--identifier".');
}
if (!['comment', 'pr-body'].includes(args.target)) {
throw new Error(
`Invalid value "${args.target}" for "--target". Use "comment" or "pr-body".`,
);
}
return args;
}
@@ -123,123 +110,20 @@ function isGitHubActionsBot(comment) {
return comment.user?.login === 'github-actions[bot]';
}
function escapeRegExp(value) {
return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
function getIdentifierMarkers(identifier) {
if (identifier.includes('<!---')) {
return {
start: identifier,
end: null,
};
}
const label = 'bundlestats-action-comment';
return {
start: `<!--- ${label} key:${identifier} start --->`,
end: `<!--- ${label} key:${identifier} end --->`,
};
}
function upsertBlock(existingBody, block, markers) {
const body = existingBody ?? '';
if (markers.end) {
const pattern = new RegExp(
`${escapeRegExp(markers.start)}[\\s\\S]*?${escapeRegExp(markers.end)}`,
'm',
);
if (pattern.test(body)) {
return body.replace(pattern, block.trim());
}
}
if (body.trim().length === 0) {
return block.trim();
}
const separator = body.endsWith('\n') ? '\n' : '\n\n';
const boundary = body.includes(BOT_BOUNDARY_MARKER)
? ''
: `${BOT_BOUNDARY_TEXT}\n\n`;
return `${body}${separator}${boundary}${block.trim()}`;
}
async function updatePullRequestBody(
octokit,
owner,
repo,
pullNumber,
block,
markers,
) {
const { data } = await octokit.rest.pulls.get({
owner,
repo,
pull_number: pullNumber,
});
const nextBody = upsertBlock(data.body ?? '', block, markers);
await octokit.rest.pulls.update({
owner,
repo,
pull_number: pullNumber,
body: nextBody,
});
}
async function deleteExistingComment(
octokit,
owner,
repo,
issueNumber,
markers,
) {
const comments = await listComments(octokit, owner, repo, issueNumber);
const existingComment = comments.find(
comment =>
isGitHubActionsBot(comment) && comment.body?.includes(markers.start),
);
if (existingComment) {
await octokit.rest.issues.deleteComment({
owner,
repo,
comment_id: existingComment.id,
});
}
}
async function main() {
const { commentFile, identifier, target } = parseArgs(process.argv);
const { commentFile, identifier } = parseArgs(process.argv);
const commentBody = await loadCommentBody(commentFile);
const token = assertGitHubToken();
const { owner, repo } = getRepoInfo();
const issueNumber = getPullRequestNumber();
const markers = getIdentifierMarkers(identifier);
const octokit = new Octokit({ auth: token });
if (target === 'pr-body') {
await updatePullRequestBody(
octokit,
owner,
repo,
issueNumber,
commentBody,
markers,
);
await deleteExistingComment(octokit, owner, repo, issueNumber, markers);
console.log('Updated pull request body with bundle stats.');
return;
}
const comments = await listComments(octokit, owner, repo, issueNumber);
const existingComment = comments.find(
comment =>
isGitHubActionsBot(comment) && comment.body?.includes(markers.start),
isGitHubActionsBot(comment) && comment.body?.includes(identifier),
);
if (existingComment) {
@@ -250,16 +134,15 @@ async function main() {
body: commentBody,
});
console.log('Updated existing bundle stats comment.');
return;
} else {
await octokit.rest.issues.createComment({
owner,
repo,
issue_number: issueNumber,
body: commentBody,
});
console.log('Created new bundle stats comment.');
}
await octokit.rest.issues.createComment({
owner,
repo,
issue_number: issueNumber,
body: commentBody,
});
console.log('Created new bundle stats comment.');
}
main().catch(error => {

View File

@@ -3,18 +3,9 @@
"private": true,
"type": "module",
"scripts": {
"tsx": "node --import=extensionless/register --experimental-strip-types",
"test": "vitest --run",
"typecheck": "tsgo -b"
"test": "vitest --run"
},
"devDependencies": {
"@typescript/native-preview": "^7.0.0-dev.20260309.1",
"extensionless": "^2.0.6",
"vitest": "^4.1.0"
},
"extensionless": {
"lookFor": [
"ts"
]
"vitest": "^4.0.9"
}
}

View File

@@ -1,4 +1,4 @@
import { describe, expect, it } from 'vitest';
import { describe, it, expect } from 'vitest';
import { getNextVersion } from './get-next-package-version';

View File

@@ -1,16 +0,0 @@
{
"compilerOptions": {
"target": "ES2022",
"lib": [],
"module": "nodenext",
"moduleResolution": "nodenext",
"skipLibCheck": true,
"strict": true,
"types": ["node"],
"outDir": "dist",
"rootDir": ".",
"composite": true
},
"include": ["src/**/*", "bin/**/*"],
"exclude": ["node_modules"]
}

View File

@@ -1,3 +0,0 @@
{
"jsPlugins": ["eslint-plugin-storybook"]
}

View File

@@ -1,43 +0,0 @@
import { dirname } from 'path';
import { fileURLToPath } from 'url';
import type { StorybookConfig } from '@storybook/react-vite';
import react from '@vitejs/plugin-react';
/**
* This function is used to resolve the absolute path of a package.
* It is needed in projects that use Yarn PnP or are set up within a monorepo.
*/
function getAbsolutePath(value: string) {
return dirname(fileURLToPath(import.meta.resolve(`${value}/package.json`)));
}
const config: StorybookConfig = {
stories: [
'../src/Concepts/*.mdx',
'../src/Themes/*.mdx',
'../src/**/*.mdx',
'../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
],
addons: [
getAbsolutePath('@chromatic-com/storybook'),
getAbsolutePath('@storybook/addon-a11y'),
getAbsolutePath('@storybook/addon-docs'),
],
framework: getAbsolutePath('@storybook/react-vite'),
core: {
disableTelemetry: true,
},
staticDirs: ['./public'],
async viteFinal(config) {
const { mergeConfig } = await import('vite');
return mergeConfig(config, {
plugins: [react()],
resolve: {
tsconfigPaths: true,
},
});
},
};
export default config;

View File

@@ -1,99 +0,0 @@
<!--
Override the default favicon used in the Storybook in the browser tab.
-->
<link
rel="shortcut icon"
type="image/x-icon"
href="https://design.actualbudget.org/favicon.ico"
/>
<link href="/global-styles.css" rel="stylesheet" />
<!-- Primary meta tags -->
<meta name="title" content="Actual Budget Design System" />
<meta
name="description"
content="Actual Budget is a super fast and privacy-focused app for managing your finances. At its heart is the well proven and much loved Envelope Budgeting methodology."
/>
<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://design.actualbudget.org" />
<meta property="og:title" content="Actual Budget Design System" />
<meta
property="og:description"
content="Actual Budget is a super fast and privacy-focused app for managing your finances. At its heart is the well proven and much loved Envelope Budgeting methodology."
/>
<meta property="og:locale" content="en" />
<meta property="og:image" content="https://design.actualbudget.org/og.webp" />
<meta property="og:image:type" content="image/webp" />
<meta property="og:image:alt" content="Actual Budget Design System" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://design.actualbudget.org/og.webp" />
<!--
Override the default styles used in the Storybook svg icons for the left tree panel.
@see https://storybook.js.org/docs/react/configure/theming#css-escape-hatches
> 💡 NOTE:
>
> This is brittle way for providing custom non thenable styles for manager UI
>
> Those selectors might change on any storybook version bump.
-->
<style>
#storybook-explorer-searchfield {
font-weight: 400 !important;
font-size: 14px !important;
line-height: 14px !important;
}
.sidebar-item svg,
.sidebar-svg-icon {
color: #272630 !important;
}
.sidebar-item[data-selected='true'] svg,
.sidebar-item[data-selected='true'] .sidebar-svg-icon {
color: #ffffff !important;
}
.sidebar-subheading button,
button[data-action='collapse-ref'] {
display: flex !important;
align-items: center !important;
font-weight: 600 !important;
font-size: 16px !important;
line-height: 24px !important;
letter-spacing: -0.01em !important;
text-transform: none !important;
color: #272630 !important;
}
.sidebar-subheading:hover button,
button[data-action='collapse-ref']:hover {
background-color: transparent !important;
}
.sidebar-item {
align-items: center !important;
font-weight: 400 !important;
font-size: 16px !important;
line-height: 24px !important;
color: #272630 !important;
}
.sidebar-item a {
align-items: center !important;
}
.sidebar-item[data-selected='true'] {
font-weight: 600 !important;
font-size: 16px !important;
line-height: 24px !important;
color: #ffffff !important;
}
</style>

View File

@@ -1,74 +0,0 @@
import { addons } from 'storybook/manager-api';
import { create } from 'storybook/theming/create';
// Colors from the Actual Budget light theme palette
const purple500 = '#8719e0';
const purple400 = '#9a3de8';
const navy900 = '#102a43';
const navy700 = '#334e68';
const navy600 = '#486581';
const navy150 = '#d9e2ec';
const navy100 = '#e8ecf0';
const white = '#ffffff';
// Create a custom Storybook theme matching Actual Budget's light theme
const theme = create({
base: 'light',
brandTitle: 'Actual Budget',
brandUrl: 'https://actualbudget.org',
brandImage: 'https://actualbudget.org/img/actual.webp',
brandTarget: '_blank',
// UI colors
colorPrimary: purple500,
colorSecondary: purple400,
// App chrome
appBg: navy100,
appContentBg: white,
appPreviewBg: white,
appBorderColor: navy150,
appBorderRadius: 4,
// Fonts
fontBase:
'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
fontCode: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace',
// Text colors
textColor: navy900,
textInverseColor: white,
textMutedColor: navy600,
// Toolbar
barTextColor: navy700,
barHoverColor: purple500,
barSelectedColor: purple500,
barBg: white,
// Form colors
buttonBg: white,
buttonBorder: navy900,
booleanBg: navy150,
booleanSelectedBg: purple500,
inputBg: white,
inputBorder: navy900,
inputTextColor: navy900,
inputBorderRadius: 4,
});
addons.setConfig({
theme,
enableShortcuts: true,
isFullscreen: false,
isToolshown: true,
sidebar: {
collapsedRoots: [],
filters: {
patterns: item => {
// Hide stories that are marked as internal
return !item.tags?.includes('internal');
},
},
},
});

View File

@@ -1,89 +0,0 @@
import { type ReactNode } from 'react';
import type { Preview } from '@storybook/react-vite';
// Not ideal to import from desktop-client, but we need a source of truth for theme variables
// TODO: this needs refactoring
import * as darkTheme from '../../desktop-client/src/style/themes/dark';
import * as developmentTheme from '../../desktop-client/src/style/themes/development';
import * as lightTheme from '../../desktop-client/src/style/themes/light';
import * as midnightTheme from '../../desktop-client/src/style/themes/midnight';
const THEMES = {
light: lightTheme,
dark: darkTheme,
midnight: midnightTheme,
development: developmentTheme,
} as const;
type ThemeName = keyof typeof THEMES;
const ThemedStory = ({
themeName,
children,
}: {
themeName?: ThemeName;
children?: ReactNode;
}) => {
if (!themeName || !THEMES[themeName]) {
throw new Error(`No theme specified`);
}
const css = Object.entries(THEMES[themeName])
.map(([key, value]) => `--color-${key}: ${value};`)
.join('\n');
return (
<div>
<style>{`:root {\n${css}}`}</style>
{children}
</div>
);
};
const preview: Preview = {
decorators: [
(Story, { globals }) => {
const themeName = globals.theme;
return (
<ThemedStory themeName={themeName}>
<Story />
</ThemedStory>
);
},
],
globalTypes: {
theme: {
name: 'Theme',
description: 'Global theme for components',
defaultValue: 'light',
toolbar: {
icon: 'circlehollow',
items: [
{ value: 'light', title: 'Light' },
{ value: 'dark', title: 'Dark' },
{ value: 'midnight', title: 'Midnight' },
{ value: 'development', title: 'Development' },
],
},
},
},
parameters: {
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/i,
},
},
a11y: {
// 'todo' - show a11y violations in the test UI only
// 'error' - fail CI on a11y violations
// 'off' - skip a11y checks entirely
test: 'todo',
},
},
};
export default preview;

View File

@@ -1,9 +0,0 @@
# /assets folder contain processed assets with a file hash
# They are safe for immutable caching, as filename change when content change
/assets/*
Cache-Control: public
Cache-Control: max-age=365000000
Cache-Control: immutable

Binary file not shown.

Before

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -1 +0,0 @@
/* Custom Storybook Styling */

Binary file not shown.

Before

Width:  |  Height:  |  Size: 14 KiB

View File

@@ -37,34 +37,22 @@
"scripts": {
"generate:icons": "rm src/icons/*/*.tsx; cd src/icons && svgr --template template.ts --index-template index-template.ts --typescript --expand-props start -d . .",
"test": "npm-run-all -cp 'test:*'",
"test:web": "ENV=web vitest --run -c vitest.web.config.ts",
"start:storybook": "storybook dev -p 6006",
"build:storybook": "storybook build",
"typecheck": "tsgo -b"
"test:web": "ENV=web vitest --run -c vitest.web.config.ts"
},
"dependencies": {
"@emotion/css": "^11.13.5",
"react-aria-components": "^1.15.1",
"react-aria-components": "^1.13.0",
"usehooks-ts": "^3.1.1"
},
"devDependencies": {
"@chromatic-com/storybook": "^5.0.0",
"@storybook/addon-a11y": "^10.2.7",
"@storybook/addon-docs": "^10.2.7",
"@storybook/react-vite": "^10.2.7",
"@svgr/cli": "^8.1.0",
"@types/react": "^19.2.5",
"@typescript/native-preview": "^7.0.0-dev.20260309.1",
"@vitejs/plugin-react": "^6.0.0",
"eslint-plugin-storybook": "^10.2.7",
"react": "19.2.4",
"react-dom": "19.2.4",
"storybook": "^10.2.7",
"vite": "^8.0.0",
"vitest": "^4.1.0"
"react": "19.2.0",
"react-dom": "19.2.0",
"vitest": "^4.0.9"
},
"peerDependencies": {
"react": ">=19.2",
"react-dom": ">=19.2"
"react": ">=18.2",
"react-dom": ">=18.2"
}
}

View File

@@ -1,139 +0,0 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import { AlignedText } from './AlignedText';
const meta = {
title: 'Components/AlignedText',
component: AlignedText,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof AlignedText>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
left: 'Label',
right: 'Value',
style: { width: 300, display: 'flex' },
},
parameters: {
docs: {
description: {
story:
'AlignedText displays two pieces of content aligned on opposite sides.',
},
},
},
};
export const TruncateLeft: Story = {
args: {
left: 'This is a very long label that should be truncated on the left side',
right: '$100.00',
truncate: 'left',
style: { width: 250, display: 'flex' },
},
parameters: {
docs: {
description: {
story:
'When `truncate="left"`, the left content is truncated with ellipsis.',
},
},
},
};
export const TruncateRight: Story = {
args: {
left: 'Short Label',
right:
'This is a very long value that should be truncated on the right side',
truncate: 'right',
style: { width: 250, display: 'flex' },
},
parameters: {
docs: {
description: {
story:
'When `truncate="right"`, the right content is truncated with ellipsis.',
},
},
},
};
export const FinancialAmount: Story = {
args: {
left: 'Groceries',
right: '$1,234.56',
style: { width: 300, display: 'flex' },
rightStyle: { fontWeight: 'bold' },
},
parameters: {
docs: {
description: {
story:
'Example showing AlignedText used for displaying financial data.',
},
},
},
};
export const WithCustomStyles: Story = {
args: {
left: 'Category',
right: 'Amount',
style: {
width: 300,
padding: 10,
backgroundColor: '#f5f5f5',
borderRadius: 4,
display: 'flex',
},
leftStyle: { color: '#666', fontStyle: 'italic' },
rightStyle: { color: '#333', fontWeight: 'bold' },
},
};
export const MultipleRows: Story = {
args: {
left: 'Income',
right: '$5,000.00',
},
render: () => (
<div
style={{ width: 300, display: 'flex', flexDirection: 'column', gap: 8 }}
>
<AlignedText
left="Income"
right="$5,000.00"
rightStyle={{ color: 'green' }}
style={{ display: 'flex' }}
/>
<AlignedText
left="Expenses"
right="-$3,200.00"
rightStyle={{ color: 'red' }}
style={{ display: 'flex' }}
/>
<AlignedText
left="Balance"
right="$1,800.00"
style={{ borderTop: '1px solid #ccc', paddingTop: 8, display: 'flex' }}
rightStyle={{ fontWeight: 'bold' }}
/>
</div>
),
parameters: {
docs: {
description: {
story:
'Multiple AlignedText components stacked to create a summary view.',
},
},
},
};

View File

@@ -1,4 +1,4 @@
import type { ComponentProps, CSSProperties, ReactNode } from 'react';
import { type ComponentProps, type ReactNode, type CSSProperties } from 'react';
import { Block } from './Block';
import { View } from './View';

View File

@@ -1,111 +0,0 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Block } from './Block';
import { theme } from './theme';
const meta = {
title: 'Components/Block',
component: Block,
parameters: {
layout: 'centered',
},
} satisfies Meta<typeof Block>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
children: 'This is a Block component',
},
parameters: {
docs: {
description: {
story:
'Block is a basic div wrapper that accepts Emotion CSS styles via the `style` prop.',
},
},
},
tags: ['autodocs'],
};
export const WithStyles: Story = {
args: {
children: 'Styled Block',
style: {
padding: 20,
backgroundColor: theme.cardBackground,
borderRadius: 8,
border: `1px solid ${theme.cardBorder}`,
color: theme.pageText,
},
},
};
export const WithFlexLayout: Story = {
render: () => (
<Block
style={{
display: 'flex',
gap: 10,
padding: 15,
borderRadius: 4,
color: theme.pageText,
}}
>
<Block
style={{
padding: 10,
backgroundColor: theme.cardBackground,
borderRadius: 4,
border: `1px solid ${theme.cardBorder}`,
}}
>
Item 1
</Block>
<Block
style={{
padding: 10,
backgroundColor: theme.cardBackground,
borderRadius: 4,
border: `1px solid ${theme.cardBorder}`,
}}
>
Item 2
</Block>
<Block
style={{
padding: 10,
backgroundColor: theme.cardBackground,
borderRadius: 4,
border: `1px solid ${theme.cardBorder}`,
}}
>
Item 3
</Block>
</Block>
),
parameters: {
docs: {
description: {
story: 'Block components can be nested and styled with flexbox.',
},
},
},
};
export const AsContainer: Story = {
args: {
children: 'Container Block',
style: {
width: 300,
padding: 25,
textAlign: 'center',
backgroundColor: theme.cardBackground,
border: `2px dashed ${theme.cardBorder}`,
borderRadius: 8,
color: theme.pageText,
},
},
};

View File

@@ -1,8 +1,8 @@
import type { HTMLProps, Ref } from 'react';
import { type HTMLProps, type Ref } from 'react';
import { css, cx } from '@emotion/css';
import type { CSSProperties } from './styles';
import { type CSSProperties } from './styles';
type BlockProps = HTMLProps<HTMLDivElement> & {
innerRef?: Ref<HTMLDivElement>;

View File

@@ -1,99 +0,0 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import { Button } from './Button';
const meta = {
title: 'Components/Button',
component: Button,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
argTypes: {
onClick: { action: 'clicked' },
},
args: { onClick: fn() },
} satisfies Meta<typeof Button>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Primary: Story = {
args: {
variant: 'primary',
bounce: false,
children: 'Button Text',
},
parameters: {
docs: {
description: {
story: `
Primary button variant uses the following theme CSS variables:
- \`--color-buttonPrimaryText\`
- \`--color-buttonPrimaryTextHover\`
- \`--color-buttonPrimaryBackground\`
- \`--color-buttonPrimaryBackgroundHover\`
- \`--color-buttonPrimaryBorder\`
- \`--color-buttonPrimaryShadow\`
- \`--color-buttonPrimaryDisabledText\`
- \`--color-buttonPrimaryDisabledBackground\`
- \`--color-buttonPrimaryDisabledBorder\`
`,
},
},
},
};
export const Normal: Story = {
args: {
variant: 'normal',
bounce: false,
children: 'Button Text',
},
parameters: {
docs: {
description: {
story: `
Normal button variant uses the following theme CSS variables:
- \`--color-buttonNormalText\`
- \`--color-buttonNormalTextHover\`
- \`--color-buttonNormalBackground\`
- \`--color-buttonNormalBackgroundHover\`
- \`--color-buttonNormalBorder\`
- \`--color-buttonNormalShadow\`
- \`--color-buttonNormalSelectedText\`
- \`--color-buttonNormalSelectedBackground\`
- \`--color-buttonNormalDisabledText\`
- \`--color-buttonNormalDisabledBackground\`
- \`--color-buttonNormalDisabledBorder\`
`,
},
},
},
};
export const Bare: Story = {
args: {
variant: 'bare',
bounce: false,
children: 'Button Text',
},
parameters: {
docs: {
description: {
story: `
Bare button variant uses the following theme CSS variables:
- \`--color-buttonBareText\`
- \`--color-buttonBareTextHover\`
- \`--color-buttonBareBackground\`
- \`--color-buttonBareBackgroundHover\`
- \`--color-buttonBareBackgroundActive\`
- \`--color-buttonBareDisabledText\`
- \`--color-buttonBareDisabledBackground\`
`,
},
},
},
};

View File

@@ -1,5 +1,10 @@
import React, { forwardRef, useMemo } from 'react';
import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
import React, {
forwardRef,
useMemo,
type ComponentPropsWithoutRef,
type ReactNode,
type CSSProperties,
} from 'react';
import { Button as ReactAriaButton } from 'react-aria-components';
import { css, cx } from '@emotion/css';

View File

@@ -1,82 +0,0 @@
import { styles } from '@actual-app/components/styles';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Card } from './Card';
import { Paragraph } from './Paragraph';
import { theme } from './theme';
const meta = {
title: 'Components/Card',
component: Card,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof Card>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
children: 'Card content goes here',
style: {
padding: 20,
width: 300,
color: theme.pageText,
},
},
parameters: {
docs: {
description: {
story: `
Default Card component uses the following theme CSS variables:
- \`--color-cardBackground\`
- \`--color-cardBorder\`
`,
},
},
},
};
export const WithCustomContent: Story = {
args: {
style: {
padding: 20,
width: 300,
color: theme.pageText,
},
},
render: args => (
<Card {...args}>
<h3 style={{ ...styles.largeText }}>Card Title</h3>
<Paragraph style={{ margin: 0 }}>
This is a card with more complex content including a title and
paragraph.
</Paragraph>
</Card>
),
};
export const Narrow: Story = {
args: {
children: 'Narrow card',
style: {
padding: 15,
width: 150,
color: theme.pageText,
},
},
};
export const Wide: Story = {
args: {
children: 'Wide card with more content space',
style: {
padding: 25,
width: 500,
color: theme.pageText,
},
},
};

View File

@@ -1,5 +1,4 @@
import { forwardRef } from 'react';
import type { ComponentProps } from 'react';
import { type ComponentProps, forwardRef } from 'react';
import { theme } from './theme';
import { View } from './View';

View File

@@ -1,108 +0,0 @@
import { useState } from 'react';
import { ColorSwatch } from 'react-aria-components';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { fn } from 'storybook/test';
import { Button } from './Button';
import { ColorPicker } from './ColorPicker';
const meta = {
title: 'Components/ColorPicker',
component: ColorPicker,
parameters: {
layout: 'centered',
},
args: {
onChange: fn(),
children: <Button>Pick a color</Button>,
},
tags: ['autodocs'],
} satisfies Meta<typeof ColorPicker>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
defaultValue: '#690CB0',
children: <Button>Pick a color</Button>,
},
};
export const WithColorSwatch: Story = {
args: {
defaultValue: '#1976D2',
children: (
<Button style={{ padding: 4 }}>
<ColorSwatch
style={{
width: 24,
height: 24,
borderRadius: 4,
boxShadow: 'inset 0 0 0 1px rgba(0, 0, 0, 0.1)',
}}
/>
</Button>
),
},
};
export const CustomColorSet: Story = {
args: {
defaultValue: '#FF0000',
columns: 4,
colorset: [
'#FF0000',
'#00FF00',
'#0000FF',
'#FFFF00',
'#FF00FF',
'#00FFFF',
'#FFA500',
'#800080',
],
children: <Button>Custom Colors</Button>,
},
parameters: {
docs: {
description: {
story:
'ColorPicker with a custom color set and different column layout.',
},
},
},
};
export const Controlled: Story = {
args: {
children: <Button>Pick a color</Button>,
},
render: () => {
const [color, setColor] = useState('#388E3C');
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
<ColorPicker value={color} onChange={c => setColor(c.toString('hex'))}>
<Button style={{ padding: 4 }}>
<ColorSwatch
style={{
width: 24,
height: 24,
borderRadius: 4,
}}
/>
</Button>
</ColorPicker>
<span>Selected: {color}</span>
</div>
);
},
parameters: {
docs: {
description: {
story: 'Controlled ColorPicker with external state management.',
},
},
},
};

View File

@@ -1,18 +1,16 @@
import type { ChangeEvent, ReactNode } from 'react';
import { type ChangeEvent, type ReactNode } from 'react';
import {
ColorPicker as AriaColorPicker,
ColorSwatch as AriaColorSwatch,
ColorSwatchPicker as AriaColorSwatchPicker,
ColorField,
ColorSwatchPickerItem,
type ColorPickerProps as AriaColorPickerProps,
Dialog,
DialogTrigger,
ColorSwatch as AriaColorSwatch,
type ColorSwatchProps,
ColorSwatchPicker as AriaColorSwatchPicker,
ColorSwatchPickerItem,
ColorField,
parseColor,
} from 'react-aria-components';
import type {
ColorPickerProps as AriaColorPickerProps,
ColorSwatchProps,
} from 'react-aria-components';
import { css } from '@emotion/css';

View File

@@ -1,27 +0,0 @@
import { Meta } from '@storybook/addon-docs/blocks';
<Meta title="Concepts/Introduction" />
# Actual Budget Component Library
Welcome to the **Actual Budget Component Library**. Explore our UI components, see how they look across different themes, and learn how to use them in your code.
### What you can do here
- ✨ **Browse components** in the sidebar
- 🎨 **Switch themes** using the toolbar above
- 📚 **Read documentation** and see code examples
- 🔍 **Test variations** and component states
- ♿ **Check accessibility** compliance
### Getting Started
Select a component from the sidebar to explore its documentation, variants, and interactive controls.
---
### Useful Links
- [Actual Budget Website](https://actualbudget.org)
- [Documentation](https://actualbudget.org/docs)
- [GitHub Repository](https://github.com/actualbudget/actual)

View File

@@ -1,90 +0,0 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import { FormError } from './FormError';
import { Input } from './Input';
import { View } from './View';
const meta = {
title: 'Components/FormError',
component: FormError,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof FormError>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
children: 'This field is required',
},
parameters: {
docs: {
description: {
story: 'FormError displays validation error messages in red text.',
},
},
},
};
export const InFormContext: Story = {
render: () => (
<View
style={{ display: 'flex', flexDirection: 'column', gap: 5, width: 250 }}
>
<Input placeholder="Email address" style={{ borderColor: 'red' }} />
<FormError>Please enter a valid email address</FormError>
</View>
),
parameters: {
docs: {
description: {
story:
'FormError displayed below an input field with validation error.',
},
},
},
};
export const MultipleErrors: Story = {
render: () => (
<View style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
<FormError>Password must be at least 8 characters</FormError>
<FormError>Password must contain a number</FormError>
<FormError>Password must contain a special character</FormError>
</View>
),
parameters: {
docs: {
description: {
story:
'Multiple FormError components for displaying several validation errors.',
},
},
},
};
export const CustomStyle: Story = {
args: {
children: 'Custom styled error message',
style: {
fontSize: 14,
fontWeight: 'bold',
padding: 10,
backgroundColor: '#ffebee',
borderRadius: 4,
border: '1px solid red',
},
},
};
export const LongErrorMessage: Story = {
args: {
children:
'This is a longer error message that explains the validation issue in more detail. Please correct the input and try again.',
style: { maxWidth: 300 },
},
};

View File

@@ -1,4 +1,4 @@
import type { CSSProperties, ReactNode } from 'react';
import { type ReactNode, type CSSProperties } from 'react';
import { View } from './View';

View File

@@ -1,86 +0,0 @@
import { type Ref } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { InitialFocus } from './InitialFocus';
import { Input } from './Input';
import { View } from './View';
const meta = {
title: 'Components/InitialFocus',
component: InitialFocus,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof InitialFocus>;
export default meta;
type Story = StoryObj<typeof meta>;
export const WithInput: Story = {
args: {
children: <Input placeholder="This input will be focused on mount" />,
},
render: args => (
<View style={{ width: 300 }}>
<InitialFocus {...args} />
</View>
),
parameters: {
docs: {
description: {
story:
'InitialFocus automatically focuses its child element when the component mounts. The input will receive focus and have its text selected.',
},
},
},
};
export const WithFunctionChild: Story = {
args: {
children: <Input placeholder="Focused via function child" />,
},
render: () => (
<View style={{ width: 300 }}>
<InitialFocus>
{ref => (
<Input
ref={ref as Ref<HTMLInputElement>}
placeholder="Focused via function child"
/>
)}
</InitialFocus>
</View>
),
parameters: {
docs: {
description: {
story:
'InitialFocus can accept a function as child for components that need custom ref handling.',
},
},
},
};
export const MultipleInputsOnlyFirstFocused: Story = {
args: {
children: <Input placeholder="This one is focused" />,
},
render: args => (
<View style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
<InitialFocus {...args} />
<Input placeholder="This one is not focused" />
<Input placeholder="This one is also not focused" />
</View>
),
parameters: {
docs: {
description: {
story:
'When multiple inputs are present, only the one wrapped in InitialFocus will receive initial focus.',
},
},
},
};

View File

@@ -2,10 +2,12 @@ import {
Children,
cloneElement,
isValidElement,
type ReactElement,
type Ref,
type RefObject,
useEffect,
useRef,
} from 'react';
import type { ReactElement, Ref, RefObject } from 'react';
type InitialFocusProps<T extends HTMLElement> = {
/**

View File

@@ -1,6 +1,5 @@
import * as React from 'react';
import { forwardRef } from 'react';
import type { Ref } from 'react';
import { forwardRef, type Ref } from 'react';
import { render } from '@testing-library/react';

View File

@@ -1,101 +0,0 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import { InlineField } from './InlineField';
import { Input } from './Input';
import { View } from './View';
const meta = {
title: 'Components/InlineField',
component: InlineField,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof InlineField>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
label: 'Name',
width: 300,
children: <Input style={{ flex: 1 }} />,
},
parameters: {
docs: {
description: {
story:
'InlineField displays a label and input side-by-side in a horizontal layout.',
},
},
},
};
export const WithCustomLabelWidth: Story = {
args: {
label: 'Email Address',
labelWidth: 120,
width: 400,
children: <Input style={{ flex: 1 }} placeholder="user@example.com" />,
},
parameters: {
docs: {
description: {
story:
'Custom label width can be specified to accommodate longer labels.',
},
},
},
};
export const MultipleFields: Story = {
args: {
label: 'First Name',
width: 300,
},
render: args => (
<View style={{ display: 'flex', flexDirection: 'column' }}>
<InlineField {...args}>
<Input style={{ flex: 1 }} />
</InlineField>
<InlineField label="Last Name" width={300}>
<Input style={{ flex: 1 }} />
</InlineField>
<InlineField label="Email" width={300}>
<Input style={{ flex: 1 }} type="email" />
</InlineField>
</View>
),
parameters: {
docs: {
description: {
story:
'Multiple InlineFields stack vertically with consistent label alignment.',
},
},
},
};
export const WithPercentageWidth: Story = {
args: {
label: 'Description',
width: '100%',
children: <Input style={{ flex: 1 }} />,
},
decorators: [
Story => (
<View style={{ width: 400 }}>
<Story />
</View>
),
],
parameters: {
docs: {
description: {
story: 'Width can be specified as a percentage for responsive layouts.',
},
},
},
};

View File

@@ -1,8 +1,8 @@
import type { ReactNode } from 'react';
import { type ReactNode } from 'react';
import { css } from '@emotion/css';
import type { CSSProperties } from './styles';
import { type CSSProperties } from './styles';
type InlineFieldProps = {
label: ReactNode;

View File

@@ -1,215 +0,0 @@
import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Input } from './Input';
import { View } from './View';
const meta = {
title: 'Components/Input',
component: Input,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof Input>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
placeholder: 'Enter text...',
},
decorators: [
Story => (
<View style={{ width: 250 }}>
<Story />
</View>
),
],
parameters: {
docs: {
description: {
story: 'A basic input field with placeholder text.',
},
},
},
};
export const WithValue: Story = {
args: {
defaultValue: 'Hello World',
},
decorators: [
Story => (
<View style={{ width: 250 }}>
<Story />
</View>
),
],
parameters: {
docs: {
description: {
story: 'Input with a pre-filled value.',
},
},
},
};
export const Disabled: Story = {
args: {
defaultValue: 'Disabled input',
disabled: true,
},
decorators: [
Story => (
<View style={{ width: 250 }}>
<Story />
</View>
),
],
parameters: {
docs: {
description: {
story:
'Disabled inputs prevent user interaction and display muted text.',
},
},
},
};
export const WithOnEnter: Story = {
render: function Render() {
const [submittedValue, setSubmittedValue] = useState('');
return (
<View
style={{
width: 250,
display: 'flex',
flexDirection: 'column',
gap: 10,
}}
>
<Input
placeholder="Press Enter to submit"
onEnter={value => setSubmittedValue(value)}
/>
{submittedValue && <span>Submitted: {submittedValue}</span>}
</View>
);
},
parameters: {
docs: {
description: {
story: 'The onEnter callback is triggered when the user presses Enter.',
},
},
},
};
export const WithOnEscape: Story = {
render: function Render() {
const [escaped, setEscaped] = useState(false);
return (
<View
style={{
width: 250,
display: 'flex',
flexDirection: 'column',
gap: 10,
}}
>
<Input
placeholder="Press Escape to cancel"
onEscape={() => setEscaped(true)}
/>
{escaped && <span>Escape pressed!</span>}
</View>
);
},
parameters: {
docs: {
description: {
story:
'The onEscape callback is triggered when the user presses Escape.',
},
},
},
};
export const WithOnChangeValue: Story = {
render: function Render() {
const [value, setValue] = useState('');
return (
<View
style={{
width: 250,
display: 'flex',
flexDirection: 'column',
gap: 10,
}}
>
<Input
placeholder="Type something..."
onChangeValue={newValue => setValue(newValue)}
/>
<span>Current value: {value}</span>
</View>
);
},
parameters: {
docs: {
description: {
story:
'The onChangeValue callback provides the new value on each keystroke.',
},
},
},
};
export const NumberInput: Story = {
args: {
type: 'number',
placeholder: '0',
},
decorators: [
Story => (
<View style={{ width: 150 }}>
<Story />
</View>
),
],
parameters: {
docs: {
description: {
story: 'Input configured for numeric values.',
},
},
},
};
export const PasswordInput: Story = {
args: {
type: 'password',
placeholder: 'Enter password',
},
decorators: [
Story => (
<View style={{ width: 250 }}>
<Story />
</View>
),
],
parameters: {
docs: {
description: {
story: 'Password input masks the entered text.',
},
},
},
};

View File

@@ -1,9 +1,8 @@
import React from 'react';
import type {
ChangeEvent,
ComponentPropsWithRef,
FocusEvent,
KeyboardEvent,
import React, {
type ChangeEvent,
type ComponentPropsWithRef,
type KeyboardEvent,
type FocusEvent,
} from 'react';
import { Input as ReactAriaInput } from 'react-aria-components';

View File

@@ -1,97 +0,0 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Input } from './Input';
import { Label } from './Label';
import { View } from './View';
const meta = {
title: 'Components/Label',
component: Label,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof Label>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
title: 'Username',
},
parameters: {
docs: {
description: {
story: 'A basic label component for form fields.',
},
},
},
};
export const WithInput: Story = {
args: {
title: 'Email Address',
},
render: args => (
<View style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
<Label {...args} />
<Input placeholder="user@example.com" style={{ width: 250 }} />
</View>
),
parameters: {
docs: {
description: {
story: 'Label used with an input field in a vertical layout.',
},
},
},
};
export const MultipleLabels: Story = {
args: {
title: 'First Name',
},
render: args => (
<View style={{ display: 'flex', flexDirection: 'column', gap: 15 }}>
<View style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
<Label {...args} />
<Input style={{ width: 250 }} />
</View>
<View style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
<Label title="Last Name" />
<Input style={{ width: 250 }} />
</View>
<View style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
<Label title="Password" />
<Input type="password" style={{ width: 250 }} />
</View>
</View>
),
parameters: {
docs: {
description: {
story: 'Multiple labels and inputs in a form layout.',
},
},
},
};
export const CustomStyle: Story = {
args: {
title: 'Custom Styled Label',
style: {
fontSize: 16,
color: '#007bff',
textAlign: 'left',
},
},
parameters: {
docs: {
description: {
story: 'Label with custom styling applied.',
},
},
},
};

View File

@@ -1,5 +1,4 @@
import { forwardRef } from 'react';
import type { CSSProperties, ReactNode } from 'react';
import { forwardRef, type ReactNode, type CSSProperties } from 'react';
import { styles } from './styles';
import { Text } from './Text';

View File

@@ -1,243 +0,0 @@
import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { SvgAdd, SvgTrash } from './icons/v1';
import { SvgPencil1 } from './icons/v2';
import { Menu, type MenuItem } from './Menu';
import { Text } from './Text';
import { View } from './View';
const meta = {
title: 'Components/Menu',
component: Menu,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof Menu>;
export default meta;
type Story = StoryObj<typeof meta>;
const basicItems: Array<MenuItem<string>> = [
{ name: 'edit', text: 'Edit' },
{ name: 'duplicate', text: 'Duplicate' },
{ name: 'delete', text: 'Delete' },
];
export const Default: Story = {
args: {
items: basicItems,
},
parameters: {
docs: {
description: {
story: 'A basic menu with simple text items.',
},
},
},
};
export const WithIcons: Story = {
args: {
items: [
{ name: 'add', text: 'Add New', icon: SvgAdd },
{ name: 'edit', text: 'Edit', icon: SvgPencil1 },
{ name: 'delete', text: 'Delete', icon: SvgTrash },
],
},
parameters: {
docs: {
description: {
story: 'Menu items can include icons for visual clarity.',
},
},
},
};
export const WithSeparator: Story = {
args: {
items: [
{ name: 'cut', text: 'Cut' },
{ name: 'copy', text: 'Copy' },
{ name: 'paste', text: 'Paste' },
Menu.line,
{ name: 'delete', text: 'Delete' },
],
},
parameters: {
docs: {
description: {
story: 'Menu.line creates a visual separator between menu sections.',
},
},
},
};
export const WithLabel: Story = {
args: {
items: [
{ type: Menu.label, name: 'Actions', text: 'Actions' },
{ name: 'edit', text: 'Edit' },
{ name: 'duplicate', text: 'Duplicate' },
Menu.line,
{ type: Menu.label, name: 'Danger Zone', text: 'Danger Zone' },
{ name: 'delete', text: 'Delete' },
],
},
parameters: {
docs: {
description: {
story: 'Menu.label items create section headers within the menu.',
},
},
},
};
export const WithDisabledItems: Story = {
args: {
items: [
{ name: 'edit', text: 'Edit' },
{ name: 'duplicate', text: 'Duplicate', disabled: true },
{ name: 'delete', text: 'Delete' },
],
},
parameters: {
docs: {
description: {
story: 'Disabled menu items are visually muted and non-interactive.',
},
},
},
};
export const WithKeyboardShortcuts: Story = {
args: {
items: [
{ name: 'cut', text: 'Cut', key: 'ctrl + X' },
{ name: 'copy', text: 'Copy', key: 'ctrl + C' },
{ name: 'paste', text: 'Paste', key: 'ctrl + V' },
],
},
parameters: {
docs: {
description: {
story: 'Menu items can display keyboard shortcuts.',
},
},
},
};
export const WithToggle: Story = {
args: {
items: [],
},
render: function Render() {
const [settings, setSettings] = useState({
notifications: true,
darkMode: false,
autoSave: true,
});
const items: Array<MenuItem<'notifications' | 'darkMode' | 'autoSave'>> = [
{
name: 'notifications',
text: 'Notifications',
toggle: settings.notifications,
},
{ name: 'darkMode', text: 'Dark Mode', toggle: settings.darkMode },
{ name: 'autoSave', text: 'Auto Save', toggle: settings.autoSave },
];
return (
<Menu
items={items}
onMenuSelect={name => {
setSettings(prev => ({ ...prev, [name]: !prev[name] }));
}}
/>
);
},
parameters: {
docs: {
description: {
story: 'Menu items can include toggles for boolean settings.',
},
},
},
};
export const WithHeaderAndFooter: Story = {
args: {
header: (
<View style={{ padding: 10, borderBottom: '1px solid #ccc' }}>
<Text style={{ fontWeight: 'bold' }}>Menu Title</Text>
</View>
),
footer: (
<View style={{ padding: 10, borderTop: '1px solid #ccc' }}>
<Text style={{ fontSize: 11, color: '#666' }}>3 items</Text>
</View>
),
items: basicItems,
},
parameters: {
docs: {
description: {
story: 'Menus can have custom header and footer content.',
},
},
},
};
export const WithTooltips: Story = {
args: {
items: [
{ name: 'edit', text: 'Edit', tooltip: 'Modify this item' },
{
name: 'duplicate',
text: 'Duplicate',
tooltip: 'Create a copy of this item',
},
{
name: 'delete',
text: 'Delete',
tooltip: 'Permanently remove this item',
},
],
},
parameters: {
docs: {
description: {
story: 'Menu items can have tooltips for additional context.',
},
},
},
};
export const InteractiveExample: Story = {
args: {
items: basicItems,
},
render: function Render(args) {
const [selected, setSelected] = useState<string | null>(null);
return (
<View style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
<Menu {...args} onMenuSelect={name => setSelected(String(name))} />
{selected && (
<Text style={{ textAlign: 'center' }}>Selected: {selected}</Text>
)}
</View>
);
},
parameters: {
docs: {
description: {
story: 'Interactive menu that shows the selected item.',
},
},
},
};

View File

@@ -1,11 +1,13 @@
import { useEffect, useRef, useState } from 'react';
import type {
ComponentProps,
ComponentType,
CSSProperties,
KeyboardEvent,
ReactNode,
SVGProps,
import {
type ReactNode,
useState,
type ComponentProps,
type ComponentType,
type SVGProps,
type CSSProperties,
type KeyboardEvent,
useEffect,
useRef,
} from 'react';
import { Button } from './Button';
@@ -16,8 +18,8 @@ import { View } from './View';
const MenuLine: unique symbol = Symbol('menu-line');
const MenuLabel: unique symbol = Symbol('menu-label');
Menu.line = MenuLine as typeof MenuLine;
Menu.label = MenuLabel as typeof MenuLabel;
Menu.line = MenuLine;
Menu.label = MenuLabel;
type KeybindingProps = {
keyName: ReactNode;
@@ -150,7 +152,7 @@ export function Menu<const NameType = string>({
<View
className={className}
style={{ outline: 'none', borderRadius: 4, overflow: 'hidden', ...style }}
tabIndex={0}
tabIndex={1}
onKeyDown={onKeyDown}
innerRef={elRef}
>

View File

@@ -1,134 +0,0 @@
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Paragraph } from './Paragraph';
import { View } from './View';
const meta = {
title: 'Components/Paragraph',
component: Paragraph,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof Paragraph>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
children:
'This is a paragraph of text. Paragraphs are used to display blocks of text content with proper line height and spacing.',
},
decorators: [
Story => (
<View style={{ width: 400 }}>
<Story />
</View>
),
],
parameters: {
docs: {
description: {
story: 'A basic paragraph with default styling and bottom margin.',
},
},
},
};
export const MultipleParagraphs: Story = {
render: () => (
<View style={{ width: 400 }}>
<Paragraph>
This is the first paragraph. It has a bottom margin to create spacing
between itself and the next paragraph.
</Paragraph>
<Paragraph>
This is the second paragraph. Notice the consistent spacing between
paragraphs which improves readability.
</Paragraph>
<Paragraph isLast>
This is the last paragraph. It uses the isLast prop to remove the bottom
margin since there is no following content.
</Paragraph>
</View>
),
parameters: {
docs: {
description: {
story:
'Multiple paragraphs stack with consistent spacing. Use isLast on the final paragraph.',
},
},
},
};
export const IsLast: Story = {
args: {
children: 'This paragraph has no bottom margin because isLast is true.',
isLast: true,
},
decorators: [
Story => (
<View style={{ width: 400, border: '1px dashed #ccc', padding: 10 }}>
<Story />
</View>
),
],
parameters: {
docs: {
description: {
story:
'When isLast is true, the bottom margin is removed. Useful for the last paragraph in a section.',
},
},
},
};
export const WithCustomStyle: Story = {
args: {
children: 'This paragraph has custom styling applied.',
style: {
color: '#007bff',
fontStyle: 'italic',
fontSize: 18,
},
},
decorators: [
Story => (
<View style={{ width: 400 }}>
<Story />
</View>
),
],
parameters: {
docs: {
description: {
story: 'Custom styles can be applied to paragraphs.',
},
},
},
};
export const LongContent: Story = {
args: {
children:
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
},
decorators: [
Story => (
<View style={{ width: 400 }}>
<Story />
</View>
),
],
parameters: {
docs: {
description: {
story:
'Longer paragraphs wrap properly and maintain consistent line height for readability.',
},
},
},
};

View File

@@ -1,8 +1,8 @@
import type { HTMLProps } from 'react';
import { type HTMLProps } from 'react';
import { css } from '@emotion/css';
import type { CSSProperties } from './styles';
import { type CSSProperties } from './styles';
type ParagraphProps = HTMLProps<HTMLDivElement> & {
style?: CSSProperties;

View File

@@ -1,153 +0,0 @@
import { useRef, useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Button } from './Button';
import { Menu } from './Menu';
import { Popover } from './Popover';
import { View } from './View';
const meta = {
title: 'Components/Popover',
component: Popover,
parameters: {
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof Popover>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
render: () => {
const triggerRef = useRef(null);
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button ref={triggerRef} onPress={() => setIsOpen(!isOpen)}>
Toggle Popover
</Button>
<Popover
triggerRef={triggerRef}
isOpen={isOpen}
onOpenChange={setIsOpen}
>
<View style={{ padding: 10 }}>Popover content</View>
</Popover>
</>
);
},
parameters: {
docs: {
description: {
story: 'A basic popover triggered by a button click.',
},
},
},
};
export const WithMenu: Story = {
render: () => {
const triggerRef = useRef(null);
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button ref={triggerRef} onPress={() => setIsOpen(!isOpen)}>
Open Menu
</Button>
<Popover
triggerRef={triggerRef}
isOpen={isOpen}
onOpenChange={setIsOpen}
>
<Menu
onMenuSelect={() => setIsOpen(false)}
items={[
{ name: 'edit', text: 'Edit' },
{ name: 'duplicate', text: 'Duplicate' },
Menu.line,
{ name: 'delete', text: 'Delete' },
]}
/>
</Popover>
</>
);
},
parameters: {
docs: {
description: {
story:
'Popover containing a menu, a common pattern for dropdown menus.',
},
},
},
};
export const CustomPlacement: Story = {
render: () => {
const triggerRef = useRef(null);
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button ref={triggerRef} onPress={() => setIsOpen(!isOpen)}>
Bottom Start
</Button>
<Popover
triggerRef={triggerRef}
placement="bottom start"
isOpen={isOpen}
onOpenChange={setIsOpen}
>
<View style={{ padding: 10 }}>
This popover is placed at bottom start.
</View>
</Popover>
</>
);
},
parameters: {
docs: {
description: {
story: 'Popover with custom placement.',
},
},
},
};
export const CustomStyle: Story = {
render: () => {
const triggerRef = useRef(null);
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button ref={triggerRef} onPress={() => setIsOpen(!isOpen)}>
Styled Popover
</Button>
<Popover
triggerRef={triggerRef}
isOpen={isOpen}
onOpenChange={setIsOpen}
style={{ padding: 15, maxWidth: 250 }}
>
<View>
This popover has custom padding and a constrained max width for
longer content.
</View>
</Popover>
</>
);
},
parameters: {
docs: {
description: {
story: 'Popover with custom styles applied.',
},
},
},
};

View File

@@ -1,5 +1,4 @@
import { useCallback, useEffect, useRef } from 'react';
import type { ComponentProps } from 'react';
import { type ComponentProps, useCallback, useEffect, useRef } from 'react';
import { Popover as ReactAriaPopover } from 'react-aria-components';
import { css } from '@emotion/css';

View File

@@ -1,178 +0,0 @@
import { useState } from 'react';
import type { Meta, StoryObj } from '@storybook/react-vite';
import { Menu } from './Menu';
import { Select } from './Select';
import { View } from './View';
const meta = {
title: 'Components/Select',
component: Select,
parameters: {
layout: 'centered',
docs: {
description: {
component: ' ', // Remove autogenerated description (generated from JSDoc) to replace with custom description below
},
},
},
tags: ['autodocs'],
} satisfies Meta<typeof Select>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
options: [
['apple', 'Apple'],
['banana', 'Banana'],
['cherry', 'Cherry'],
],
value: 'apple',
},
parameters: {
docs: {
description: {
story: 'A basic select dropdown with simple options.',
},
},
},
};
export const WithDefaultLabel: Story = {
args: {
options: [
['small', 'Small'],
['medium', 'Medium'],
['large', 'Large'],
],
value: '',
defaultLabel: 'Select a size...',
},
parameters: {
docs: {
description: {
story:
'When the selected value is not in the options, the defaultLabel is displayed.',
},
},
},
};
export const WithSeparator: Story = {
args: {
options: [
['recent-1', 'Budget 2024'],
['recent-2', 'Budget 2025'],
Menu.line,
['all', 'View All'],
],
value: 'recent-1',
},
parameters: {
docs: {
description: {
story: 'Select options can include separators using Menu.line.',
},
},
},
};
export const WithDisabledKeys: Story = {
args: {
options: [
['draft', 'Draft'],
['pending', 'Pending'],
['approved', 'Approved'],
['archived', 'Archived'],
],
value: 'draft',
disabledKeys: ['approved', 'archived'],
},
parameters: {
docs: {
description: {
story: 'Certain options can be disabled using the disabledKeys prop.',
},
},
},
};
export const BareVariant: Story = {
args: {
bare: true,
options: [
['day', 'Day'],
['week', 'Week'],
['month', 'Month'],
],
value: 'month',
},
parameters: {
docs: {
description: {
story:
'The bare variant renders the select without a bordered button style.',
},
},
},
};
export const Disabled: Story = {
args: {
options: [
['opt1', 'Option 1'],
['opt2', 'Option 2'],
],
value: 'opt1',
disabled: true,
},
parameters: {
docs: {
description: {
story: 'A disabled select that cannot be interacted with.',
},
},
},
};
export const Controlled: Story = {
args: {
options: [
['usd', 'USD - US Dollar'],
['eur', 'EUR - Euro'],
['gbp', 'GBP - British Pound'],
['jpy', 'JPY - Japanese Yen'],
],
value: 'usd',
},
render: function Render() {
const [value, setValue] = useState('usd');
return (
<View style={{ gap: 10, alignItems: 'flex-start' }}>
<Select
options={[
['usd', 'USD - US Dollar'],
['eur', 'EUR - Euro'],
['gbp', 'GBP - British Pound'],
['jpy', 'JPY - Japanese Yen'],
]}
value={value}
onChange={setValue}
/>
<span>Selected: {value}</span>
</View>
);
},
parameters: {
docs: {
description: {
story: 'A controlled select with external state management.',
},
},
},
};

Some files were not shown because too many files have changed in this diff Show More