feat: pages

packages/react-native-opentui/index.tsx

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

packages/ui/src/index.tsx

@@ -1,29 +1,31 @@
-import { Table, type Column } from "./table";
-import { useQuery } from "@rocicorp/zero/react";
-import { queries } from '@money/shared';
+import { useState } from "react";
+import { Transactions } from "./transactions";
+import { Text } from "react-native";
+import { Settings } from "./settings";
+import { useKeyboard } from "./useKeyboard";
 
-
-export type Account = {
-  name: string;
-  createdAt: number;
+type Page = "transactions" | "settings";
+type AppProps = {
+  page?: Page;
+  onPageChange?: (page: Page) => void;
 }
 
-const COLUMNS: Column[] = [
-  { name: 'createdAt', label: 'Created At', render: (n) => new Date(n).toDateString() },
-  { name: 'amount', label: 'Amount' },
-  { name: 'name', label: 'Name' },
-];
+export function App({ page, onPageChange }: AppProps) {
+  const [curr, setPage] = useState<Page>(page || "transactions");
 
+  useKeyboard((key) => {
+    if (key.name == "1") {
+      setPage("transactions");
+      if (onPageChange)
+      onPageChange("transactions");
+    } else if (key.name == "2") {
+      setPage("settings");
+      if (onPageChange)
+      onPageChange("settings");
+    }
+  });
 
-export function Settings() {
-  const [items] = useQuery(queries.allTransactions(null));
-
-  return (
-    <Table
-      data={items}
-      columns={COLUMNS}
-    />
-  )
+  return curr == "transactions" ? <Transactions /> : <Settings />;
 }
 
 

packages/ui/src/settings.tsx

@@ -0,0 +1,5 @@
+import { Text } from "react-native";
+
+export function Settings() {
+  return <Text>Settings</Text>;
+}

packages/ui/src/table.tsx

@@ -4,8 +4,8 @@ import { useKeyboard } from "./useKeyboard";
 
 const HEADER_COLOR = '#7158e2';
 const TABLE_COLORS = [
-  '#3c3c3c',
-  '#4b4b4b'
+  '#ddd',
+  '#eee'
 ];
 const SELECTED_COLOR = '#f7b730';
 
@@ -14,16 +14,28 @@ const EXTRA = 5;
 
 export type ValidRecord = Record<string, string | number | null>;
 
-const TableContext = createContext<{ data: unknown[], columns: Column[], columnMap: Map<string, number> }>({
+interface TableState {
+  data: unknown[];
+  columns: Column[];
+  columnMap: Map<string, number>;
+  idx: number;
+  selectedFrom: number | undefined;
+};
+
+
+const INITAL_STATE = {
   data: [],
   columns: [],
   columnMap: new Map(),
-}); 
+  idx: 0,
+  selectedFrom: undefined,
+} satisfies TableState;
+
+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';
@@ -33,11 +45,12 @@ function renderCell(row: ValidRecord, column: Column): string {
 }
 
 
-export interface TableProps<T> {
+export interface ProviderProps<T> {
   data: T[];
   columns: Column[];
+  children: ReactNode;
 };
-export function Table<T extends ValidRecord>({ data, columns }: TableProps<T>) {
+export function Provider<T extends ValidRecord>({ data, columns, children }: ProviderProps<T>) {
   const [idx, setIdx] = useState(0);
   const [selectedFrom, setSelectedFrom] = useState<number>();
 
@@ -68,38 +81,46 @@ export function Table<T extends ValidRecord>({ data, columns }: TableProps<T>) {
 
 
   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>
+    <Context.Provider value={{ data, columns, columnMap, idx, selectedFrom }}>
+      {children}
+    </Context.Provider>
   );
 }
 
+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>
+      {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>
+        );
+      })}
+    </View>
+  )
+
+}
+
 interface RowProps<T> {
   row: T;
   index: number;
   isSelected: boolean;
 }
 function TableRow<T extends ValidRecord>({ row, isSelected }: RowProps<T>) {
-  const { data, columns, columnMap } = use(TableContext);
+  const { data, 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' : 'white' }}>{rpad(rendered, columnMap.get(column.name)! - rendered.length + EXTRA)}</Text>;
+      return <Text key={column.name} style={{ fontFamily: 'mono', color: isSelected ? 'black' : 'black' }}>{rpad(rendered, columnMap.get(column.name)! - rendered.length + EXTRA)}</Text>;
     })}
   </View>
 }

packages/ui/src/transactions.tsx

@@ -0,0 +1,63 @@
+import * as Table from "./table";
+import { useQuery } from "@rocicorp/zero/react";
+import { queries, type Transaction } from '@money/shared';
+import { use } from "react";
+import { View, Text } from "react-native";
+
+
+const FORMAT = new Intl.NumberFormat("en-US", {
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
+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' },
+];
+
+
+export function Transactions() {
+  const [items] = useQuery(queries.allTransactions(null));
+
+  return (
+    <Table.Provider
+      data={items}
+      columns={COLUMNS} >
+        <Table.Body />
+        {/* Spacer */}
+        <View style={{ flex: 1 }} />
+      <Selected />
+    </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>
+  );
+
+  const from = Math.min(idx, selectedFrom);
+  const to = Math.max(idx, selectedFrom);
+  const selected = data.slice(from, to + 1) as Transaction[];
+  const count = selected.length;
+  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>
+  );
+}
+
+