max/money
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

format: format with biome

Browse Source
This commit is contained in:
Max Koon
2025-11-24 22:20:40 -05:00
parent 01edded95a
commit 6fd531d9c3
41 changed files with 1025 additions and 667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
packages/ui/src/index.tsx
View File

@@ -5,39 +5,35 @@ import { Settings } from "./settings";
import { useKeyboard } from "./useKeyboard";
import type { AuthData } from "@money/shared/auth";
const PAGES = {
'/': {
"/": {
screen: <Transactions />,
key: "1",
},
'/settings': {
"/settings": {
screen: <Settings />,
key: "2",
children: {
"/accounts": {},
"/family": {},
}
},
},
};
type Join<A extends string, B extends string> =
`${A}${B}` extends `${infer X}` ? X : never;
type Join<A extends string, B extends string> = `${A}${B}` extends `${infer X}`
? X
: never;
type ChildRoutes<Parent extends string, Children> =
{
[K in keyof Children & string]:
K extends `/${string}`
? Join<Parent, K>
: never;
}[keyof Children & string];
type ChildRoutes<Parent extends string, Children> = {
[K in keyof Children & string]: K extends `/${string}`
? Join<Parent, K>
: never;
}[keyof Children & string];
type Routes<T> = {
[K in keyof T & string]:
| K
| (T[K] extends { children: infer C }
? ChildRoutes<K, C>
: never)
| (T[K] extends { children: infer C } ? ChildRoutes<K, C> : never);
}[keyof T & string];
export type Route = Routes<typeof PAGES>;
@@ -48,32 +44,33 @@ interface RouterContextType {
setRoute: (route: Route) => void;
}
export const RouterContext = createContext<RouterContextType>({
auth: null,
route: '/',
setRoute: () => {}
route: "/",
setRoute: () => {},
});
type AppProps = {
auth: AuthData | null;
route: Route;
setRoute: (page: Route) => void;
}
};
export function App({ auth, route, setRoute }: AppProps) {
return <RouterContext.Provider value={{ auth, route, setRoute }}>
<Main />
</RouterContext.Provider>
return (
<RouterContext.Provider value={{ auth, route, setRoute }}>
<Main />
</RouterContext.Provider>
);
}
function Main() {
const { route, setRoute } = use(RouterContext);
useKeyboard((key) => {
const screen = Object.entries(PAGES)
.find(([, screen]) => screen.key == key.name);
const screen = Object.entries(PAGES).find(
([, screen]) => screen.key == key.name,
);
if (!screen) return;
@@ -85,12 +82,13 @@ function Main() {
const match =
route in PAGES
? (route as keyof typeof PAGES)
: (Object.keys(PAGES).sort((a, b) => b.length - a.length).find(p => route.startsWith(p)) as
keyof typeof PAGES);
: (Object.keys(PAGES)
.sort((a, b) => b.length - a.length)
.find((p) => route.startsWith(p)) as keyof typeof PAGES);
return <View style={{ backgroundColor: 'white', flex: 1 }}>
{PAGES[match].screen}
</View>
return (
<View style={{ backgroundColor: "white", flex: 1 }}>
{PAGES[match].screen}
</View>
);
}

70
packages/ui/src/settings.tsx
View File

@@ -12,58 +12,76 @@ type SettingsRoute = Extract<Route, `/settings${string}`>;
const TABS = {
"/settings": {
label: "💽 General",
screen: <General />
screen: <General />,
},
"/settings/accounts": {
label: "🏦 Bank Accounts",
screen: <Accounts />
screen: <Accounts />,
},
"/settings/family": {
label: "👑 Family",
screen: <Family />
screen: <Family />,
},
} as const satisfies Record<SettingsRoute, { label: string, screen: ReactNode }>;
} as const satisfies Record<
SettingsRoute,
{ label: string; screen: ReactNode }
>;
type Tab = keyof typeof TABS;
export function Settings() {
const { route, setRoute } = use(RouterContext);
useKeyboard((key) => {
if (key.name == 'h') {
const currentIdx = Object.entries(TABS).findIndex(([tabRoute, _]) => tabRoute == route)
const routes = Object.keys(TABS) as SettingsRoute[];
const last = routes[currentIdx - 1]
if (!last) return;
setRoute(last);
} else if (key.name == 'l') {
const currentIdx = Object.entries(TABS).findIndex(([tabRoute, _]) => tabRoute == route)
const routes = Object.keys(TABS) as SettingsRoute[];
const next = routes[currentIdx + 1]
if (!next) return;
setRoute(next);
}
}, [route]);
useKeyboard(
(key) => {
if (key.name == "h") {
const currentIdx = Object.entries(TABS).findIndex(
([tabRoute, _]) => tabRoute == route,
);
const routes = Object.keys(TABS) as SettingsRoute[];
const last = routes[currentIdx - 1];
if (!last) return;
setRoute(last);
} else if (key.name == "l") {
const currentIdx = Object.entries(TABS).findIndex(
([tabRoute, _]) => tabRoute == route,
);
const routes = Object.keys(TABS) as SettingsRoute[];
const next = routes[currentIdx + 1];
if (!next) return;
setRoute(next);
}
},
[route],
);
return (
<View style={{ flexDirection: "row" }}>
<View style={{ padding: 10 }}>
{Object.entries(TABS).map(([tabRoute, tab]) => {
const isSelected = tabRoute == route;
return (
<Pressable key={tab.label} style={{ backgroundColor: isSelected ? 'black' : undefined }} onPress={() => setRoute(tabRoute as SettingsRoute)}>
<Text style={{ fontFamily: 'mono', color: isSelected ? 'white' : 'black' }}> {tab.label} </Text>
<Pressable
key={tab.label}
style={{ backgroundColor: isSelected ? "black" : undefined }}
onPress={() => setRoute(tabRoute as SettingsRoute)}
>
<Text
style={{
fontFamily: "mono",
color: isSelected ? "white" : "black",
}}
>
{" "}
{tab.label}{" "}
</Text>
</Pressable>
);
})}
</View>
<View>
{TABS[route as Tab].screen}
</View>
<View>{TABS[route as Tab].screen}</View>
</View>
);
}

133
packages/ui/src/settings/accounts.tsx
View File

@@ -1,5 +1,5 @@
import { useQuery, useZero } from "@rocicorp/zero/react";
import { queries, type Mutators, type Schema } from '@money/shared';
import { queries, type Mutators, type Schema } from "@money/shared";
import { use, useEffect, useState } from "react";
import { RouterContext } from "..";
import { View, Text, Linking } from "react-native";
@@ -9,8 +9,12 @@ import * as Table from "../../components/Table";
import * as Dialog from "../../components/Dialog";
const COLUMNS: Table.Column[] = [
{ name: 'name', label: 'Name' },
{ name: 'createdAt', label: 'Added At', render: (n) => new Date(n).toLocaleString() },
{ name: "name", label: "Name" },
{
name: "createdAt",
label: "Added At",
render: (n) => new Date(n).toLocaleString(),
},
];
export function Accounts() {
@@ -21,75 +25,89 @@ export function Accounts() {
const z = useZero<Schema, Mutators>();
// useKeyboard((key) => {
// if (key.name == 'n') {
// setDeleting([]);
// } else if (key.name == 'y') {
// onDelete();
// }
// }, [deleting]);
const onDelete = () => {
if (!deleting) return
const accountIds = deleting.map(account => account.id);
if (!deleting) return;
const accountIds = deleting.map((account) => account.id);
z.mutate.link.deleteAccounts({ accountIds });
setDeleting([]);
}
};
const addAccount = () => {
setIsAddOpen(true);
}
};
return (
<>
<Dialog.Provider visible={!deleting} close={() => setDeleting([])}>
<Dialog.Provider
visible={deleting.length > 0}
close={() => setDeleting([])}
>
<Dialog.Content>
<Text style={{ fontFamily: 'mono' }}>Delete Account</Text>
<Text style={{ fontFamily: 'mono' }}> </Text>
<Text style={{ fontFamily: 'mono' }}>You are about to delete the following accounts:</Text>
<Text style={{ fontFamily: "mono" }}>Delete Account</Text>
<Text style={{ fontFamily: "mono" }}> </Text>
<Text style={{ fontFamily: "mono" }}>
You are about to delete the following accounts:
</Text>
<View>
{deleting.map(account => <Text style={{ fontFamily: 'mono' }}>- {account.name}</Text>)}
{deleting.map((account) => (
<Text style={{ fontFamily: "mono" }}>- {account.name}</Text>
))}
</View>
<Text style={{ fontFamily: 'mono' }}> </Text>
<Text style={{ fontFamily: "mono" }}> </Text>
<View style={{ flexDirection: 'row' }}>
<Button variant="secondary" onPress={() => { setDeleting([]); }}>Cancel (n)</Button>
<View style={{ flexDirection: "row" }}>
<Button
variant="secondary"
onPress={() => {
setDeleting([]);
}}
shortcut="n"
>
Cancel
</Button>
<Text style={{ fontFamily: 'mono' }}> </Text>
<Text style={{ fontFamily: "mono" }}> </Text>
<Button variant="destructive" onPress={() => {
<Button
variant="destructive"
onPress={() => {
onDelete();
}}>Delete (y)</Button>
}}
shortcut="y"
>
Delete
</Button>
</View>
</Dialog.Content>
</Dialog.Provider>
<Dialog.Provider visible={isAddOpen} close={() => setIsAddOpen(false)}>
<Dialog.Content>
<Text style={{ fontFamily: 'mono' }}>Add Account</Text>
<Text style={{ fontFamily: "mono" }}>Add Account</Text>
<AddAccount />
</Dialog.Content>
</Dialog.Provider>
<View style={{ padding: 10 }}>
<View style={{ alignSelf: "flex-start" }}>
<Button shortcut="a" onPress={addAccount}>Add Account</Button>
<Button shortcut="a" onPress={addAccount}>
Add Account
</Button>
</View>
<Text style={{ fontFamily: 'mono' }}> </Text>
<Text style={{ fontFamily: "mono" }}> </Text>
<Table.Provider columns={COLUMNS} data={items} onKey={(key, selected) => {
if (key.name == 'd') {
setDeleting(selected);
}
}}>
<Table.Provider
columns={COLUMNS}
data={items}
onKey={(key, selected) => {
if (key.name == "d") {
setDeleting(selected);
}
}}
>
<Table.Body />
</Table.Provider>
</View>
@@ -97,34 +115,53 @@ export function Accounts() {
);
}
function AddAccount() {
const { auth } = use(RouterContext);
const [link, details] = useQuery(queries.getPlaidLink(auth));
const { close } = use(Dialog.Context);
const openLink = () => {
if (!link) return
if (!link) return;
Linking.openURL(link.link);
}
};
const z = useZero<Schema, Mutators>();
useEffect(() => {
console.log(link, details);
if (details.type != "complete") return;
if (link != undefined) return;
if (link != undefined) {
if (!link.completeAt) {
const timer = setInterval(() => {
console.log("Checking for link");
z.mutate.link.get({ link_token: link.token });
}, 1000 * 5);
return () => clearInterval(timer);
} else {
if (close) close();
return;
}
}
console.log("Creating new link");
z.mutate.link.create();
}, [link, details]);
return (
<>
{link ? <>
<Text style={{ fontFamily: 'mono' }}>Please click the button to complete setup.</Text>
<Button onPress={() => close && close()}>close</Button>
{link ? (
<>
<Text style={{ fontFamily: "mono" }}>
Please click the button to complete setup.
</Text>
<Button shortcut="return" onPress={openLink}>Open Plaid</Button>
</> : <Text style={{ fontFamily: 'mono' }}>Loading Plaid Link</Text>}
<Button shortcut="return" onPress={openLink}>
Open Plaid
</Button>
</>
) : (
<Text style={{ fontFamily: "mono" }}>Loading Plaid Link</Text>
)}
</>
);
}

3
packages/ui/src/settings/family.tsx
View File

@@ -1,6 +1,5 @@
import { Text } from "react-native";
export function Family() {
return <Text style={{ fontFamily: 'mono' }}>Welcome to family</Text>
return <Text style={{ fontFamily: "mono" }}>Welcome to family</Text>;
}

4
packages/ui/src/settings/general.tsx
View File

@@ -1,7 +1,5 @@
import { Text } from "react-native";
export function General() {
return <Text style={{ fontFamily: 'mono' }}>Welcome to settings</Text>
return <Text style={{ fontFamily: "mono" }}>Welcome to settings</Text>;
}

39
packages/ui/src/transactions.tsx
View File

@@ -1,11 +1,10 @@
import * as Table from "../components/Table";
import { useQuery } from "@rocicorp/zero/react";
import { queries, type Transaction } from '@money/shared';
import { queries, type Transaction } from "@money/shared";
import { use } from "react";
import { View, Text } from "react-native";
import { RouterContext } from ".";
const FORMAT = new Intl.NumberFormat("en-US", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
@@ -14,15 +13,18 @@ const FORMAT = new Intl.NumberFormat("en-US", {
export type Account = {
name: string;
createdAt: number;
}
};
const COLUMNS: Table.Column[] = [
{ name: 'createdAt', label: 'Date', render: (n) => new Date(n).toDateString() },
{ name: 'amount', label: 'Amount' },
{ name: 'name', label: 'Name' },
{
name: "createdAt",
label: "Date",
render: (n) => new Date(n).toDateString(),
},
{ name: "amount", label: "Amount" },
{ name: "name", label: "Name" },
];
export function Transactions() {
const { auth } = use(RouterContext);
const [items] = useQuery(queries.allTransactions(auth));
@@ -30,7 +32,7 @@ export function Transactions() {
return (
<Table.Provider data={items} columns={COLUMNS}>
<View style={{ flex: 1 }}>
<View style={{ flexShrink: 0}}>
<View style={{ flexShrink: 0 }}>
<Table.Body />
</View>
</View>
@@ -38,18 +40,18 @@ export function Transactions() {
<Selected />
</View>
</Table.Provider>
)
);
}
function Selected() {
const { data, idx, selectedFrom } = use(Table.Context);
if (selectedFrom == undefined)
return (
<View style={{ backgroundColor: '#ddd' }}>
<Text style={{ fontFamily: 'mono' }}>No items selected</Text>
</View>
);
return (
<View style={{ backgroundColor: "#ddd" }}>
<Text style={{ fontFamily: "mono" }}>No items selected</Text>
</View>
);
const from = Math.min(idx, selectedFrom);
const to = Math.max(idx, selectedFrom);
@@ -58,10 +60,11 @@ function Selected() {
const sum = selected.reduce((prev, curr) => prev + curr.amount, 0);
return (
<View style={{ backgroundColor: '#9f9' }}>
<Text style={{ fontFamily: 'mono' }}>{count} transaction{count == 1 ? "" : "s"} selected | ${FORMAT.format(sum)}</Text>
<View style={{ backgroundColor: "#9f9" }}>
<Text style={{ fontFamily: "mono" }}>
{count} transaction{count == 1 ? "" : "s"} selected | $
{FORMAT.format(sum)}
</Text>
</View>
);
}

5
packages/ui/src/useKeyboard.ts
View File

@@ -1,5 +1,8 @@
import { useKeyboard as useOpentuiKeyboard } from "@opentui/react";
export function useKeyboard(handler: Parameters<typeof useOpentuiKeyboard>[0], _deps: any[] = []) {
export function useKeyboard(
handler: Parameters<typeof useOpentuiKeyboard>[0],
_deps: any[] = [],
) {
return useOpentuiKeyboard(handler);
}

22
packages/ui/src/useKeyboard.web.ts
View File

@@ -2,15 +2,17 @@ import { useEffect } from "react";
import type { KeyboardEvent } from "react";
import type { KeyEvent } from "@opentui/core";
function convertName(keyName: string): string {
const result = keyName.toLowerCase()
if (result == 'arrowdown') return 'down';
if (result == 'arrowup') return 'up';
const result = keyName.toLowerCase();
if (result == "arrowdown") return "down";
if (result == "arrowup") return "up";
return result;
}
export function useKeyboard(handler: (key: KeyEvent) => void, deps: any[] = []) {
export function useKeyboard(
handler: (key: KeyEvent) => void,
deps: any[] = [],
) {
useEffect(() => {
const handlerWeb = (event: KeyboardEvent) => {
// @ts-ignore
@@ -20,10 +22,10 @@ export function useKeyboard(handler: (key: KeyEvent) => void, deps: any[] = [])
meta: event.metaKey,
shift: event.shiftKey,
option: event.metaKey,
sequence: '',
sequence: "",
number: false,
raw: '',
eventType: 'press',
raw: "",
eventType: "press",
source: "raw",
code: event.code,
super: false,
@@ -38,8 +40,8 @@ export function useKeyboard(handler: (key: KeyEvent) => void, deps: any[] = [])
// @ts-ignore
window.addEventListener("keydown", handlerWeb);
return () => {
// @ts-ignore
window.removeEventListener("keydown", handlerWeb);
// @ts-ignore
window.removeEventListener("keydown", handlerWeb);
};
}, deps);
}