fix: pg db timezone, dialog mount child when visible, show non expired link and more

packages/ui/components/Button.tsx

@@ -1,3 +1,4 @@
+import { useKeyboard } from "../src/useKeyboard";
 import type { ReactNode } from "react";
 import { Text, Pressable } from "react-native";
 
@@ -5,6 +6,7 @@ export interface ButtonProps {
   children: ReactNode;
   onPress?: () => void;
   variant?: 'default' | 'secondary' | 'destructive';
+  shortcut?: string;
 }
 
 const STYLES: Record<NonNullable<ButtonProps['variant']>, { backgroundColor: string, color: string }> = {
@@ -13,10 +15,15 @@ const STYLES: Record<NonNullable<ButtonProps['variant']>, { backgroundColor: str
   destructive: { backgroundColor: 'red', color: 'white' },
 };
 
-export function Button({ children, variant, onPress }: ButtonProps) {
+export function Button({ children, variant, onPress, shortcut }: ButtonProps) {
   const { backgroundColor, color } = STYLES[variant || "default"];
 
+  useKeyboard((key) => {
+    if (!shortcut || !onPress) return;
+    if (key.name == shortcut) onPress();
+  });
+
   return <Pressable onPress={onPress} style={{ backgroundColor }}>
-    <Text style={{ fontFamily: 'mono', color }}>  {children}  </Text>
+    <Text style={{ fontFamily: 'mono', color }}>  {children}{shortcut && ` (${shortcut})`}  </Text>
   </Pressable>
 }

packages/ui/components/Dialog.tsx

@@ -0,0 +1,36 @@
+import { type ReactNode } from "react";
+import { Modal, View, Text } from "react-native";
+import { useKeyboard } from "../src/useKeyboard";
+
+interface ProviderProps {
+  children: ReactNode;
+  visible?: boolean;
+  close?: () => void;
+}
+export function Provider({ children, visible, close }: ProviderProps) {
+  useKeyboard((key) => {
+    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>
+  );
+}
+
+interface ContentProps {
+  children: ReactNode;
+}
+export function Content({ children }: ContentProps) {
+  return (
+    <View style={{ backgroundColor: 'white', padding: 12, alignItems: 'center'  }}>
+      {children}
+    </View>
+  );
+}

packages/ui/components/List.tsx

@@ -0,0 +1,30 @@
+import { useState, type ReactNode } from "react";
+import { View, Text } from "react-native";
+import { useKeyboard } from "../src/useKeyboard";
+
+export type ListProps<T> = {
+  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]);
+
+  return (
+    <View>
+      {items.map((item, index) => <View style={{ backgroundColor: index == idx ? 'black' : undefined }}>
+        {renderItem({ item, isSelected: index == idx })}
+      </View>)}
+    </View>
+  );
+}
+

packages/ui/components/Table.tsx

@@ -0,0 +1,141 @@
+import { createContext, use, useState, type ReactNode } from "react";
+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 EXTRA = 5;
+
+export type ValidRecord = Record<string, string | number | null>;
+
+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';
+  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>) {
+  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);
+    } 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))]
+  }));
+
+
+  return (
+    <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 { 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>
+}
+
+function rpad(input: string, length: number): string {
+  return input + Array.from({ length })
+    .map(_ => " ")
+    .join("");
+}
+
+