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

302
packages/react-native-opentui/index.tsx
View File

@@ -5,10 +5,8 @@ import type {
PressableProps,
ScrollViewProps,
ModalProps,
StyleProp,
ViewStyle,
LinkingImpl,
} from "react-native";
import { useTerminalDimensions } from "@opentui/react";
@@ -22,187 +20,205 @@ const RATIO_HEIGHT = 17;
function attr<K extends keyof ViewStyle>(
style: StyleProp<ViewStyle>,
name: K,
type: "string"
type: "string",
): Extract<ViewStyle[K], string> | undefined;
function attr<K extends keyof ViewStyle>(
style: StyleProp<ViewStyle>,
name: K,
type: "number"
type: "number",
): Extract<ViewStyle[K], number> | undefined;
function attr<K extends keyof ViewStyle>(
style: StyleProp<ViewStyle>,
name: K,
type: "boolean"
type: "boolean",
): Extract<ViewStyle[K], boolean> | undefined;
function attr<K extends keyof ViewStyle>(
style: StyleProp<ViewStyle>,
name: K,
type: "string" | "number" | "boolean"
type: "string" | "number" | "boolean",
) {
if (!style) return undefined;
const obj: ViewStyle =
Array.isArray(style)
? Object.assign({}, ...style.filter(Boolean))
: (style as ViewStyle);
const obj: ViewStyle = Array.isArray(style)
? Object.assign({}, ...style.filter(Boolean))
: (style as ViewStyle);
const v = obj[name];
return typeof v === type ? v : undefined;
}
export function View({ children, style }: ViewProps) {
const bg = style &&
'backgroundColor' in style
? typeof style.backgroundColor == 'string'
? style.backgroundColor.startsWith('rgba(')
? (() => {
const parts = style.backgroundColor.split("(")[1].split(")")[0];
const [r, g, b, a] = parts.split(",").map(parseFloat);
return RGBA.fromInts(r, g, b, a * 255);
})()
: style.backgroundColor
: undefined
: undefined;
const bg =
style && "backgroundColor" in style
? typeof style.backgroundColor == "string"
? style.backgroundColor.startsWith("rgba(")
? (() => {
const parts = style.backgroundColor.split("(")[1].split(")")[0];
const [r, g, b, a] = parts.split(",").map(parseFloat);
return RGBA.fromInts(r, g, b, a * 255);
})()
: style.backgroundColor
: undefined
: undefined;
const padding = attr(style, 'padding', 'number');
const padding = attr(style, "padding", "number");
const props = {
overflow: attr(style, 'overflow', 'string'),
position: attr(style, 'position', 'string'),
alignSelf: attr(style, 'alignSelf', 'string'),
alignItems: attr(style, 'alignItems', 'string'),
justifyContent: attr(style, 'justifyContent', 'string'),
flexShrink: attr(style, 'flexShrink', 'number'),
flexDirection: attr(style, 'flexDirection', 'string'),
flexGrow: attr(style, 'flex', 'number') || attr(style, 'flexGrow', 'number'),
overflow: attr(style, "overflow", "string"),
position: attr(style, "position", "string"),
alignSelf: attr(style, "alignSelf", "string"),
alignItems: attr(style, "alignItems", "string"),
justifyContent: attr(style, "justifyContent", "string"),
flexShrink: attr(style, "flexShrink", "number"),
flexDirection: attr(style, "flexDirection", "string"),
flexGrow:
attr(style, "flex", "number") || attr(style, "flexGrow", "number"),
};
return <box
backgroundColor={bg}
paddingTop={padding && Math.round(padding / RATIO_HEIGHT)}
paddingBottom={padding && Math.round(padding / RATIO_HEIGHT)}
paddingLeft={padding && Math.round(padding / RATIO_WIDTH)}
paddingRight={padding && Math.round(padding / RATIO_WIDTH)}
{...props}
>{children}</box>
return (
<box
backgroundColor={bg}
paddingTop={padding && Math.round(padding / RATIO_HEIGHT)}
paddingBottom={padding && Math.round(padding / RATIO_HEIGHT)}
paddingLeft={padding && Math.round(padding / RATIO_WIDTH)}
paddingRight={padding && Math.round(padding / RATIO_WIDTH)}
{...props}
>
{children}
</box>
);
}
export function Pressable({ children: childrenRaw, style, onPress }: PressableProps) {
const bg = style &&
'backgroundColor' in style
? typeof style.backgroundColor == 'string'
? style.backgroundColor.startsWith('rgba(')
? (() => {
const parts = style.backgroundColor.split("(")[1].split(")")[0];
const [r, g, b, a] = parts.split(",").map(parseFloat);
return RGBA.fromInts(r, g, b, a * 255);
})()
: style.backgroundColor
: undefined
: undefined;
const flexDirection = style &&
'flexDirection' in style
? typeof style.flexDirection == 'string'
? style.flexDirection
: undefined
: undefined;
const flex = style &&
'flex' in style
? typeof style.flex == 'number'
? style.flex
: undefined
: undefined;
const flexShrink = style &&
'flexShrink' in style
? typeof style.flexShrink == 'number'
? style.flexShrink
: undefined
: undefined;
const overflow = style &&
'overflow' in style
? typeof style.overflow == 'string'
? style.overflow
: undefined
: undefined;
const position = style &&
'position' in style
? typeof style.position == 'string'
? style.position
: undefined
: undefined;
const justifyContent = style &&
'justifyContent' in style
? typeof style.justifyContent == 'string'
? style.justifyContent
: undefined
: undefined;
const alignItems = style &&
'alignItems' in style
? typeof style.alignItems == 'string'
? style.alignItems
: undefined
: undefined;
export function Pressable({
children: childrenRaw,
style,
onPress,
}: PressableProps) {
const bg =
style && "backgroundColor" in style
? typeof style.backgroundColor == "string"
? style.backgroundColor.startsWith("rgba(")
? (() => {
const parts = style.backgroundColor.split("(")[1].split(")")[0];
const [r, g, b, a] = parts.split(",").map(parseFloat);
return RGBA.fromInts(r, g, b, a * 255);
})()
: style.backgroundColor
: undefined
: undefined;
const flexDirection =
style && "flexDirection" in style
? typeof style.flexDirection == "string"
? style.flexDirection
: undefined
: undefined;
const flex =
style && "flex" in style
? typeof style.flex == "number"
? style.flex
: undefined
: undefined;
const flexShrink =
style && "flexShrink" in style
? typeof style.flexShrink == "number"
? style.flexShrink
: undefined
: undefined;
const overflow =
style && "overflow" in style
? typeof style.overflow == "string"
? style.overflow
: undefined
: undefined;
const position =
style && "position" in style
? typeof style.position == "string"
? style.position
: undefined
: undefined;
const justifyContent =
style && "justifyContent" in style
? typeof style.justifyContent == "string"
? style.justifyContent
: undefined
: undefined;
const alignItems =
style && "alignItems" in style
? typeof style.alignItems == "string"
? style.alignItems
: undefined
: undefined;
const padding = style &&
'padding' in style
? typeof style.padding == 'number'
? style.padding
: undefined
: undefined;
const padding =
style && "padding" in style
? typeof style.padding == "number"
? style.padding
: undefined
: undefined;
const children = childrenRaw instanceof Function ? childrenRaw({ pressed: true }) : childrenRaw;
const children =
childrenRaw instanceof Function
? childrenRaw({ pressed: true })
: childrenRaw;
return <box
onMouseDown={onPress ? ((_event) => {
// @ts-ignore
onPress();
}) : undefined}
backgroundColor={bg}
flexDirection={flexDirection}
flexGrow={flex}
overflow={overflow}
flexShrink={flexShrink}
position={position}
justifyContent={justifyContent}
alignItems={alignItems}
paddingTop={padding && Math.round(padding / RATIO_HEIGHT)}
paddingBottom={padding && Math.round(padding / RATIO_HEIGHT)}
paddingLeft={padding && Math.round(padding / RATIO_WIDTH)}
paddingRight={padding && Math.round(padding / RATIO_WIDTH)}
>{children}</box>
return (
<box
onMouseDown={
onPress
? (_event) => {
// @ts-ignore
onPress();
}
: undefined
}
backgroundColor={bg}
flexDirection={flexDirection}
flexGrow={flex}
overflow={overflow}
flexShrink={flexShrink}
position={position}
justifyContent={justifyContent}
alignItems={alignItems}
paddingTop={padding && Math.round(padding / RATIO_HEIGHT)}
paddingBottom={padding && Math.round(padding / RATIO_HEIGHT)}
paddingLeft={padding && Math.round(padding / RATIO_WIDTH)}
paddingRight={padding && Math.round(padding / RATIO_WIDTH)}
>
{children}
</box>
);
}
export function Text({ style, children }: TextProps) {
const fg = style &&
'color' in style
? typeof style.color == 'string'
? style.color
: undefined
: undefined;
return <text fg={fg || "black"}>{children}</text>
const fg =
style && "color" in style
? typeof style.color == "string"
? style.color
: undefined
: undefined;
return <text fg={fg || "black"}>{children}</text>;
}
export function ScrollView({ children }: ScrollViewProps) {
return <scrollbox >{children}</scrollbox>
return <scrollbox>{children}</scrollbox>;
}
export function Modal({ children, visible }: ModalProps) {
const { width, height } = useTerminalDimensions();
return <box
visible={visible}
position="absolute"
width={width}
height={height}
zIndex={10}
>
{children}
</box>
return (
<box
visible={visible}
position="absolute"
width={width}
height={height}
zIndex={10}
>
{children}
</box>
);
}
export const Platform = {
@@ -215,13 +231,13 @@ export const Linking = {
platform() == "darwin"
? `open ${url}`
: platform() == "win32"
? `start "" "${url}"`
: `xdg-open "${url}"`;
? `start "" "${url}"`
: `xdg-open "${url}"`;
exec(cmd);
}
},
} satisfies Partial<LinkingImpl>;
export default {
View,
Text,
}
};

1
packages/shared/src/const.ts
View File

@@ -1,3 +1,2 @@
export const HOST = process.env.EXPO_PUBLIC_TAILSCALE_MACHINE || "localhost";
export const BASE_URL = `http://${HOST}`;

11
packages/shared/src/db/schema/public.ts
View File

@@ -1,4 +1,12 @@
import { pgTable, text, boolean, timestamp, uniqueIndex, decimal } from "drizzle-orm/pg-core";
import {
boolean,
decimal,
pgTable,
text,
timestamp,
pgEnum,
uniqueIndex,
} from "drizzle-orm/pg-core";
export const users = pgTable(
"user",
@@ -33,6 +41,7 @@ export const plaidLink = pgTable("plaidLink", {
user_id: text("user_id").notNull(),
link: text("link").notNull(),
token: text("token").notNull(),
completeAt: timestamp("complete_at"),
createdAt: timestamp("created_at").notNull().defaultNow(),
});

17
packages/shared/src/mutators.ts
View File

@@ -12,32 +12,33 @@ export function createMutators(authData: AuthData | null) {
async get(tx: Tx, { link_token }: { link_token: string }) {},
async updateTransactions() {},
async updateBalences() {},
async deleteAccounts(tx: Tx, { accountIds }: { accountIds: string[] }) {
async deleteAccounts(tx: Tx, { accountIds }: { accountIds: string[] }) {
isLoggedIn(authData);
for (const id of accountIds) {
const token = await tx.query.plaidAccessTokens.where("userId", '=', authData.user.id).one();
const token = await tx.query.plaidAccessTokens
.where("userId", "=", authData.user.id)
.one();
if (!token) continue;
await tx.mutate.plaidAccessTokens.delete({ id });
const balances = await tx.query.balance
.where('user_id', '=', authData.user.id)
.where("tokenId", '=', token.id)
.where("user_id", "=", authData.user.id)
.where("tokenId", "=", token.id)
.run();
for (const bal of balances) {
await tx.mutate.balance.delete({ id: bal.id });
const txs = await tx.query.transaction
.where('user_id', '=', authData.user.id)
.where('account_id', '=', bal.tokenId)
.where("user_id", "=", authData.user.id)
.where("account_id", "=", bal.tokenId)
.run();
for (const transaction of txs) {
await tx.mutate.transaction.delete({ id: transaction.id });
}
}
}
},
}
},
} as const;
}

84
packages/shared/src/queries.ts
View File

@@ -5,37 +5,59 @@ import { type AuthData } from "./auth";
import { isLoggedIn } from "./zql";
export const queries = {
me: syncedQueryWithContext('me', z.tuple([]), (authData: AuthData | null) => {
me: syncedQueryWithContext("me", z.tuple([]), (authData: AuthData | null) => {
isLoggedIn(authData);
return builder.users
.where('id', '=', authData.user.id)
.one();
return builder.users.where("id", "=", authData.user.id).one();
}),
allTransactions: syncedQueryWithContext('allTransactions', z.tuple([]), (authData: AuthData | null) => {
isLoggedIn(authData);
return builder.transaction
.where('user_id', '=', authData.user.id)
.orderBy('datetime', 'desc')
.limit(50)
}),
getPlaidLink: syncedQueryWithContext('getPlaidLink', z.tuple([]), (authData: AuthData | null) => {
isLoggedIn(authData);
return builder.plaidLink
.where('user_id', '=', authData.user.id)
.where('createdAt', '>', new Date().getTime() - (1000 * 60 * 60 * 4))
.orderBy('createdAt', 'desc')
.one();
}),
getBalances: syncedQueryWithContext('getBalances', z.tuple([]), (authData: AuthData | null) => {
isLoggedIn(authData);
return builder.balance
.where('user_id', '=', authData.user.id)
.orderBy('name', 'asc');
}),
getItems: syncedQueryWithContext('getItems', z.tuple([]), (authData: AuthData | null) => {
isLoggedIn(authData);
return builder.plaidAccessTokens
.where('userId', '=', authData.user.id)
.orderBy('createdAt', 'desc');
})
allTransactions: syncedQueryWithContext(
"allTransactions",
z.tuple([]),
(authData: AuthData | null) => {
isLoggedIn(authData);
return builder.transaction
.where("user_id", "=", authData.user.id)
.orderBy("datetime", "desc")
.limit(50);
},
),
getPlaidLink: syncedQueryWithContext(
"getPlaidLink",
z.tuple([]),
(authData: AuthData | null) => {
isLoggedIn(authData);
return builder.plaidLink
.where(({ cmp, and, or }) =>
and(
cmp("user_id", "=", authData.user.id),
cmp("createdAt", ">", new Date().getTime() - 1000 * 60 * 60 * 4),
or(
cmp("completeAt", ">", new Date().getTime() - 1000 * 5),
cmp("completeAt", "IS", null),
),
),
)
.orderBy("createdAt", "desc")
.one();
},
),
getBalances: syncedQueryWithContext(
"getBalances",
z.tuple([]),
(authData: AuthData | null) => {
isLoggedIn(authData);
return builder.balance
.where("user_id", "=", authData.user.id)
.orderBy("name", "asc");
},
),
getItems: syncedQueryWithContext(
"getItems",
z.tuple([]),
(authData: AuthData | null) => {
isLoggedIn(authData);
return builder.plaidAccessTokens
.where("userId", "=", authData.user.id)
.orderBy("createdAt", "desc");
},
),
};

10
packages/shared/src/zero-schema.gen.ts
View File

@@ -214,6 +214,16 @@ export const schema = {
"token"
>,
},
completeAt: {
type: "number",
optional: true,
customType: null as unknown as ZeroCustomType<
ZeroSchema,
"plaidLink",
"completeAt"
>,
serverName: "complete_at",
},
createdAt: {
type: "number",
optional: true,

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