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

feat: add table

Browse Source
This commit is contained in:
Max Koon
2025-11-14 23:06:12 -05:00
parent 5b14b4e7a4
commit 9834b9518b
7 changed files with 163 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,7 +8,14 @@ export function View({ children, style }: ViewProps) {
? style.backgroundColor
: undefined
: undefined;
return <box backgroundColor={bg}>{children}</box>
const flexDirection = style &&
'flexDirection' in style
? typeof style.flexDirection == 'string'
? style.flexDirection
: undefined
: undefined;
return <box backgroundColor={bg} flexDirection={flexDirection}>{children}</box>
}

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

@@ -12,9 +12,9 @@ export const queries = {
.one();
}),
allTransactions: syncedQueryWithContext('allTransactions', z.tuple([]), (authData: AuthData | null) => {
isLoggedIn(authData);
// isLoggedIn(authData);
return builder.transaction
.where('user_id', '=', authData.user.id)
// .where('user_id', '=', authData.user.id)
.orderBy('datetime', 'desc')
.limit(50)
}),

4
packages/ui/package.json
View File

@@ -7,8 +7,8 @@
".": "./src/index.tsx"
},
"dependencies": {
"react-native-opentui": "workspace:*",
"@money/shared": "workspace:*"
"@money/shared": "workspace:*",
"react-native-opentui": "workspace:*"
},
"packageManager": "pnpm@10.18.2"
}

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

@@ -1,15 +1,29 @@
import { Text } from "react-native";
import { List } from "./list";
import { Table, type Column } from "./table";
import { useQuery } from "@rocicorp/zero/react";
import { queries } from '@money/shared';
export function Settings() {
const [items] = useQuery(queries.getItems(null));
return <List
items={items}
renderItem={({ item, isSelected }) => <Text style={{ color: isSelected ? 'white' : 'black' }}>{item.name}</Text>}
export type Account = {
name: string;
createdAt: number;
}
const COLUMNS: Column[] = [
{ name: 'createdAt', label: 'Created At', render: (n) => new Date(n).toDateString() },
{ name: 'amount', label: 'Amount' },
{ name: 'name', label: 'Name' },
];
export function Settings() {
const [items] = useQuery(queries.allTransactions(null));
return (
<Table
data={items}
columns={COLUMNS}
/>
)
}

113
packages/ui/src/table.tsx Normal file
View File

@@ -0,0 +1,113 @@
import { createContext, use, useState, type ReactNode } from "react";
import { View, Text } from "react-native";
import { useKeyboard } from "./useKeyboard";
const HEADER_COLOR = '#7158e2';
const TABLE_COLORS = [
'#3c3c3c',
'#4b4b4b'
];
const SELECTED_COLOR = '#f7b730';
const EXTRA = 5;
export type ValidRecord = Record<string, string | number | null>;
const TableContext = createContext<{ data: unknown[], columns: Column[], columnMap: Map<string, number> }>({
data: [],
columns: [],
columnMap: new Map(),
});
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 (column.render) return column.render(cell);
return cell.toString();
}
export interface TableProps<T> {
data: T[];
columns: Column[];
};
export function Table<T extends ValidRecord>({ data, columns }: TableProps<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) {
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);
}
}, [data, idx]);
const columnMap = new Map(columns.map(col => {
return [col.name, Math.max(col.label.length, ...data.map(row => renderCell(row, col).length))]
}));
return (
<TableContext.Provider value={{ data, columns, columnMap }}>
<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>
{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} index={index} isSelected={isSelected} />
</View>
);
})}
</View>
</TableContext.Provider>
);
}
interface RowProps<T> {
row: T;
index: number;
isSelected: boolean;
}
function TableRow<T extends ValidRecord>({ row, isSelected }: RowProps<T>) {
const { data, columns, columnMap } = use(TableContext);
return <View style={{ flexDirection: 'row' }}>
{columns.map(column => {
const rendered = renderCell(row, column);
return <Text key={column.name} style={{ fontFamily: 'mono', color: isSelected ? 'black' : 'white' }}>{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("");
}

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

@@ -3,12 +3,19 @@ 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';
return result;
}
export function useKeyboard(handler: (key: KeyEvent) => void, deps: any[] = []) {
useEffect(() => {
const handlerWeb = (event: KeyboardEvent) => {
// @ts-ignore
handler({
name: event.key.toLowerCase(),
name: convertName(event.key),
ctrl: event.ctrlKey,
meta: event.metaKey,
shift: event.shiftKey,
@@ -29,7 +36,10 @@ export function useKeyboard(handler: (key: KeyEvent) => void, deps: any[] = [])
// @ts-ignore
window.addEventListener("keydown", handlerWeb);
return () => {
console.log("REMOVING");
// @ts-ignore
return () => window.removeEventListener("keydown", handlerWeb);
window.removeEventListener("keydown", handlerWeb);
};
}, deps);
}

21
pnpm-lock.yaml generated
View File

@@ -8065,7 +8065,6 @@ snapshots:
- graphql
- supports-color
- utf-8-validate
optional: true
'@expo/code-signing-certificates@0.0.5':
dependencies:
@@ -8132,7 +8131,6 @@ snapshots:
optionalDependencies:
react: 19.2.0
react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0)
optional: true
'@expo/env@2.0.7':
dependencies:
@@ -8211,7 +8209,7 @@ snapshots:
postcss: 8.4.49
resolve-from: 5.0.0
optionalDependencies:
expo: 54.0.23(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.14)(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
expo: 54.0.23(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.14)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0))(react@19.2.0)
transitivePeerDependencies:
- bufferutil
- supports-color
@@ -8290,7 +8288,7 @@ snapshots:
'@expo/json-file': 10.0.7
'@react-native/normalize-colors': 0.81.5
debug: 4.4.3
expo: 54.0.23(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.14)(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
expo: 54.0.23(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.14)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0))(react@19.2.0)
resolve-from: 5.0.0
semver: 7.7.3
xml2js: 0.6.0
@@ -8318,7 +8316,6 @@ snapshots:
expo-font: 14.0.9(expo@54.0.23)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0))(react@19.2.0)
react: 19.2.0
react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0)
optional: true
'@expo/ws-tunnel@1.0.6': {}
@@ -10247,7 +10244,6 @@ snapshots:
react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0)
optionalDependencies:
'@types/react': 19.1.17
optional: true
'@react-navigation/bottom-tabs@7.8.4(@react-navigation/native@7.1.19(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.6.2(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)':
dependencies:
@@ -11107,7 +11103,7 @@ snapshots:
resolve-from: 5.0.0
optionalDependencies:
'@babel/runtime': 7.28.4
expo: 54.0.23(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.14)(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0)
expo: 54.0.23(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.14)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0))(react@19.2.0)
transitivePeerDependencies:
- '@babel/core'
- supports-color
@@ -12091,7 +12087,6 @@ snapshots:
react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0)
transitivePeerDependencies:
- supports-color
optional: true
expo-constants@18.0.10(expo@54.0.23)(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0)):
dependencies:
@@ -12110,7 +12105,6 @@ snapshots:
react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0)
transitivePeerDependencies:
- supports-color
optional: true
expo-crypto@15.0.7(expo@54.0.23):
dependencies:
@@ -12126,7 +12120,6 @@ snapshots:
dependencies:
expo: 54.0.23(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.14)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0))(react@19.2.0)
react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0)
optional: true
expo-font@14.0.9(expo@54.0.23)(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
dependencies:
@@ -12141,7 +12134,6 @@ snapshots:
fontfaceobserver: 2.3.0
react: 19.2.0
react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0)
optional: true
expo-haptics@15.0.7(expo@54.0.23):
dependencies:
@@ -12164,7 +12156,6 @@ snapshots:
dependencies:
expo: 54.0.23(@babel/core@7.28.5)(@expo/metro-runtime@6.1.2)(expo-router@6.0.14)(react-native@0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0))(react@19.2.0)
react: 19.2.0
optional: true
expo-linking@8.0.8(expo@54.0.23)(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
dependencies:
@@ -12206,7 +12197,6 @@ snapshots:
invariant: 2.2.4
react: 19.2.0
react-native: 0.82.1(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.2.0)
optional: true
expo-router@6.0.14(@expo/metro-runtime@6.1.2)(@types/react@19.1.17)(expo-constants@18.0.10)(expo-linking@8.0.8)(expo@54.0.23)(react-dom@19.1.0(react@19.1.0))(react-native-gesture-handler@2.28.0(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-reanimated@4.1.3(@babel/core@7.28.5)(react-native-worklets@0.5.1(@babel/core@7.28.5)(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-safe-area-context@5.6.2(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-screens@4.16.0(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0))(react-native-web@0.21.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0))(react-native@0.81.4(@babel/core@7.28.5)(@types/react@19.1.17)(react@19.1.0))(react@19.1.0):
dependencies:
@@ -12422,7 +12412,6 @@ snapshots:
- graphql
- supports-color
- utf-8-validate
optional: true
exponential-backoff@3.1.3: {}
@@ -14511,7 +14500,6 @@ snapshots:
- bufferutil
- supports-color
- utf-8-validate
optional: true
react-reconciler@0.32.0(react@19.1.0):
dependencies:
@@ -14579,8 +14567,7 @@ snapshots:
react@19.1.0: {}
react@19.2.0:
optional: true
react@19.2.0: {}
readable-stream@3.6.2:
dependencies: