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

25
packages/ui/components/Button.tsx
View File

@@ -5,14 +5,17 @@ import { Text, Pressable } from "react-native";
export interface ButtonProps {
children: ReactNode;
onPress?: () => void;
variant?: 'default' | 'secondary' | 'destructive';
variant?: "default" | "secondary" | "destructive";
shortcut?: string;
}
const STYLES: Record<NonNullable<ButtonProps['variant']>, { backgroundColor: string, color: string }> = {
default: { backgroundColor: 'black', color: 'white' },
secondary: { backgroundColor: '#ccc', color: 'black' },
destructive: { backgroundColor: 'red', color: 'white' },
const STYLES: Record<
NonNullable<ButtonProps["variant"]>,
{ backgroundColor: string; color: string }
> = {
default: { backgroundColor: "black", color: "white" },
secondary: { backgroundColor: "#ccc", color: "black" },
destructive: { backgroundColor: "red", color: "white" },
};
export function Button({ children, variant, onPress, shortcut }: ButtonProps) {
@@ -23,7 +26,13 @@ export function Button({ children, variant, onPress, shortcut }: ButtonProps) {
if (key.name == shortcut) onPress();
});
return <Pressable onPress={onPress} style={{ backgroundColor }}>
<Text style={{ fontFamily: 'mono', color }}> {children}{shortcut && ` (${shortcut})`} </Text>
</Pressable>
return (
<Pressable onPress={onPress} style={{ backgroundColor }}>
<Text style={{ fontFamily: "mono", color }}>
{" "}
{children}
{shortcut && ` (${shortcut})`}{" "}
</Text>
</Pressable>
);
}

36
packages/ui/components/Dialog.tsx
View File

@@ -1,7 +1,14 @@
import { type ReactNode } from "react";
import { createContext, type ReactNode } from "react";
import { Modal, View, Text } from "react-native";
import { useKeyboard } from "../src/useKeyboard";
export interface DialogState {
close?: () => void;
}
export const Context = createContext<DialogState>({
close: () => {},
});
interface ProviderProps {
children: ReactNode;
visible?: boolean;
@@ -9,18 +16,27 @@ interface ProviderProps {
}
export function Provider({ children, visible, close }: ProviderProps) {
useKeyboard((key) => {
if (key.name == 'escape') {
if (key.name == "escape") {
if (close) close();
}
}, []);
return (
<Modal transparent visible={visible} >
{/* <Pressable onPress={() => close && close()} style={{ justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: 'rgba(0,0,0,0.2)', }}> */}
<View style={{ justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: 'rgba(0,0,0,0.2)', }}>
{visible && children}
</View>
</Modal>
<Context.Provider value={{ close }}>
<Modal transparent visible={visible}>
{/* <Pressable onPress={() => close && close()} style={{ justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: 'rgba(0,0,0,0.2)', }}> */}
<View
style={{
justifyContent: "center",
alignItems: "center",
flex: 1,
backgroundColor: "rgba(0,0,0,0.2)",
}}
>
{visible && children}
</View>
</Modal>
</Context.Provider>
);
}
@@ -29,7 +45,9 @@ interface ContentProps {
}
export function Content({ children }: ContentProps) {
return (
<View style={{ backgroundColor: 'white', padding: 12, alignItems: 'center' }}>
<View
style={{ backgroundColor: "white", padding: 12, alignItems: "center" }}
>
{children}
</View>
);

36
packages/ui/components/List.tsx
View File

@@ -3,28 +3,34 @@ import { View, Text } from "react-native";
import { useKeyboard } from "../src/useKeyboard";
export type ListProps<T> = {
items: T[],
renderItem: (props: { item: T, isSelected: boolean }) => ReactNode;
items: T[];
renderItem: (props: { item: T; isSelected: boolean }) => ReactNode;
};
export function List<T>({ items, renderItem }: ListProps<T>) {
const [idx, setIdx] = useState(0);
useKeyboard((key) => {
if (key.name == 'j') {
setIdx((prevIdx) => prevIdx + 1 < items.length ? prevIdx + 1 : items.length - 1);
} else if (key.name == 'k') {
setIdx((prevIdx) => prevIdx == 0 ? 0 : prevIdx - 1);
} else if (key.name == 'g' && key.shift) {
setIdx(items.length - 1);
}
}, [items]);
useKeyboard(
(key) => {
if (key.name == "j") {
setIdx((prevIdx) =>
prevIdx + 1 < items.length ? prevIdx + 1 : items.length - 1,
);
} else if (key.name == "k") {
setIdx((prevIdx) => (prevIdx == 0 ? 0 : prevIdx - 1));
} else if (key.name == "g" && key.shift) {
setIdx(items.length - 1);
}
},
[items],
);
return (
<View>
{items.map((item, index) => <View style={{ backgroundColor: index == idx ? 'black' : undefined }}>
{renderItem({ item, isSelected: index == idx })}
</View>)}
{items.map((item, index) => (
<View style={{ backgroundColor: index == idx ? "black" : undefined }}>
{renderItem({ item, isSelected: index == idx })}
</View>
))}
</View>
);
}

187
packages/ui/components/Table.tsx
View File

@@ -3,13 +3,9 @@ import { View, Text } from "react-native";
import { useKeyboard } from "../src/useKeyboard";
import type { KeyEvent } from "@opentui/core";
const HEADER_COLOR = '#7158e2';
const TABLE_COLORS = [
'#ddd',
'#eee'
];
const SELECTED_COLOR = '#f7b730';
const HEADER_COLOR = "#7158e2";
const TABLE_COLORS = ["#ddd", "#eee"];
const SELECTED_COLOR = "#f7b730";
const EXTRA = 5;
@@ -21,8 +17,7 @@ interface TableState {
columnMap: Map<string, number>;
idx: number;
selectedFrom: number | undefined;
};
}
const INITAL_STATE = {
data: [],
@@ -32,60 +27,76 @@ const INITAL_STATE = {
selectedFrom: undefined,
} satisfies TableState;
export const Context = createContext<TableState>(INITAL_STATE);
export type Column = { name: string, label: string, render?: (i: number | string) => string };
export const Context = createContext<TableState>(INITAL_STATE);
export type Column = {
name: string;
label: string;
render?: (i: number | string) => string;
};
function renderCell(row: ValidRecord, column: Column): string {
const cell = row[column.name];
if (cell == undefined) return 'n/a';
if (cell == null) return 'null';
if (cell == undefined) return "n/a";
if (cell == null) return "null";
if (column.render) return column.render(cell);
return cell.toString();
}
export interface ProviderProps<T> {
data: T[];
columns: Column[];
children: ReactNode;
onKey?: (event: KeyEvent, selected: T[]) => void;
};
export function Provider<T extends ValidRecord>({ data, columns, children, onKey }: ProviderProps<T>) {
}
export function Provider<T extends ValidRecord>({
data,
columns,
children,
onKey,
}: ProviderProps<T>) {
const [idx, setIdx] = useState(0);
const [selectedFrom, setSelectedFrom] = useState<number>();
useKeyboard((key) => {
if (key.name == 'j' || key.name == 'down') {
if (key.shift && selectedFrom == undefined) {
useKeyboard(
(key) => {
if (key.name == "j" || key.name == "down") {
if (key.shift && selectedFrom == undefined) {
setSelectedFrom(idx);
}
setIdx((prev) => Math.min(prev + 1, data.length - 1));
} else if (key.name == "k" || key.name == "up") {
if (key.shift && selectedFrom == undefined) {
setSelectedFrom(idx);
}
setIdx((prev) => Math.max(prev - 1, 0));
} else if (key.name == "g" && key.shift) {
setIdx(data.length - 1);
} else if (key.name == "v") {
setSelectedFrom(idx);
} else if (key.name == "escape") {
setSelectedFrom(undefined);
} else {
const from = selectedFrom ? Math.min(idx, selectedFrom) : idx;
const to = selectedFrom ? Math.max(idx, selectedFrom) : idx;
const selected = data.slice(from, to + 1);
if (onKey) onKey(key, selected);
}
setIdx((prev) => Math.min(prev + 1, data.length - 1));
} else if (key.name == 'k' || key.name == 'up') {
if (key.shift && selectedFrom == undefined) {
setSelectedFrom(idx);
}
setIdx((prev) => Math.max(prev - 1, 0));
} else if (key.name == 'g' && key.shift) {
setIdx(data.length - 1);
} else if (key.name == 'v') {
setSelectedFrom(idx);
} else if (key.name == 'escape') {
setSelectedFrom(undefined);
} else {
const from = selectedFrom ? Math.min(idx, selectedFrom) : idx;
const to = selectedFrom ? Math.max(idx, selectedFrom) : idx;
const selected = data.slice(from, to + 1);
if (onKey) onKey(key, selected);
}
}, [data, idx, selectedFrom]);
const columnMap = new Map(columns.map(col => {
return [col.name, Math.max(col.label.length, ...data.map(row => renderCell(row, col).length))]
}));
},
[data, idx, selectedFrom],
);
const columnMap = new Map(
columns.map((col) => {
return [
col.name,
Math.max(
col.label.length,
...data.map((row) => renderCell(row, col).length),
),
];
}),
);
return (
<Context.Provider value={{ data, columns, columnMap, idx, selectedFrom }}>
@@ -98,21 +109,46 @@ export function Body() {
const { columns, data, columnMap, idx, selectedFrom } = use(Context);
return (
<View>
<View style={{ backgroundColor: HEADER_COLOR, flexDirection: 'row' }}>
{columns.map(column => <Text key={column.name} style={{ fontFamily: 'mono', color: 'white' }}>{rpad(column.label, columnMap.get(column.name)! - column.label.length + EXTRA)}</Text>)}
<View style={{ backgroundColor: HEADER_COLOR, flexDirection: "row" }}>
{columns.map((column) => (
<Text
key={column.name}
style={{ fontFamily: "mono", color: "white" }}
>
{rpad(
column.label,
columnMap.get(column.name)! - column.label.length + EXTRA,
)}
</Text>
))}
</View>
{data.map((row, index) => {
const isSelected = index == idx || (selectedFrom != undefined && ((selectedFrom <= index && index <= idx) || (idx <= index && index <= selectedFrom)))
{data.map((row, index) => {
const isSelected =
index == idx ||
(selectedFrom != undefined &&
((selectedFrom <= index && index <= idx) ||
(idx <= index && index <= selectedFrom)));
return (
<View key={index} style={{ backgroundColor: isSelected ? SELECTED_COLOR : TABLE_COLORS[index % 2] }}>
<TableRow key={index} row={row as ValidRecord} index={index} isSelected={isSelected} />
</View>
);
})}
return (
<View
key={index}
style={{
backgroundColor: isSelected
? SELECTED_COLOR
: TABLE_COLORS[index % 2],
}}
>
<TableRow
key={index}
row={row as ValidRecord}
index={index}
isSelected={isSelected}
/>
</View>
);
})}
</View>
)
);
}
interface RowProps<T> {
@@ -123,19 +159,34 @@ interface RowProps<T> {
function TableRow<T extends ValidRecord>({ row, isSelected }: RowProps<T>) {
const { columns, columnMap } = use(Context);
return <View style={{ flexDirection: 'row' }}>
{columns.map(column => {
const rendered = renderCell(row, column);
return <Text key={column.name} style={{ fontFamily: 'mono', color: isSelected ? 'black' : 'black' }}>{rpad(rendered, columnMap.get(column.name)! - rendered.length + EXTRA)}</Text>;
})}
</View>
return (
<View style={{ flexDirection: "row" }}>
{columns.map((column) => {
const rendered = renderCell(row, column);
return (
<Text
key={column.name}
style={{
fontFamily: "mono",
color: isSelected ? "black" : "black",
}}
>
{rpad(
rendered,
columnMap.get(column.name)! - rendered.length + EXTRA,
)}
</Text>
);
})}
</View>
);
}
function rpad(input: string, length: number): string {
return input + Array.from({ length })
.map(_ => " ")
.join("");
return (
input +
Array.from({ length })
.map((_) => " ")
.join("")
);
}

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);
}