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