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

16
apps/api/src/auth.ts
View File

@@ -20,25 +20,25 @@ export const auth = betterAuth({
"money://",
],
advanced: {
crossSubDomainCookies: {
enabled: process.env.NODE_ENV == 'production',
domain: "koon.us",
},
crossSubDomainCookies: {
enabled: process.env.NODE_ENV == "production",
domain: "koon.us",
},
},
plugins: [
expo(),
genericOAuth({
config: [
{
providerId: 'koon-family',
providerId: "koon-family",
clientId: process.env.OAUTH_CLIENT_ID!,
clientSecret: process.env.OAUTH_CLIENT_SECRET!,
discoveryUrl: process.env.OAUTH_DISCOVERY_URL!,
scopes: ["profile", "email"],
}
]
},
],
}),
deviceAuthorization(),
bearer(),
]
],
});

2
apps/api/src/index.ts
View File

@@ -12,7 +12,7 @@ const app = getHono();
app.use(
"/api/*",
cors({
origin: ['https://money.koon.us', `${BASE_URL}:8081`],
origin: ["https://money.koon.us", `${BASE_URL}:8081`],
allowMethods: ["POST", "GET", "OPTIONS"],
allowHeaders: ["Content-Type", "Authorization"],
credentials: true,

12
apps/api/src/plaid.ts
View File

@@ -1,13 +1,15 @@
import { Configuration, PlaidApi, PlaidEnvironments } from "plaid";
const configuration = new Configuration({
basePath: process.env.PLAID_ENV == 'production' ? PlaidEnvironments.production : PlaidEnvironments.sandbox,
basePath:
process.env.PLAID_ENV == "production"
? PlaidEnvironments.production
: PlaidEnvironments.sandbox,
baseOptions: {
headers: {
'PLAID-CLIENT-ID': process.env.PLAID_CLIENT_ID,
'PLAID-SECRET': process.env.PLAID_SECRET,
}
"PLAID-CLIENT-ID": process.env.PLAID_CLIENT_ID,
"PLAID-SECRET": process.env.PLAID_SECRET,
},
},
});
export const plaidClient = new PlaidApi(configuration);

5
apps/api/src/webhook.ts
View File

@@ -3,12 +3,9 @@ import { plaidClient } from "./plaid";
// import { LinkSessionFinishedWebhook, WebhookType } from "plaid";
export const webhook = async (c: Context) => {
console.log("Got webhook");
const b = await c.req.text();
console.log("body:", b);
return c.text("Hi");
}
};

169
apps/api/src/zero.ts
View File

@@ -8,8 +8,8 @@ import {
PushProcessor,
ZQLDatabase,
} from "@rocicorp/zero/server";
import { PostgresJSConnection } from '@rocicorp/zero/pg';
import postgres from 'postgres';
import { PostgresJSConnection } from "@rocicorp/zero/pg";
import postgres from "postgres";
import {
createMutators as createMutatorsShared,
isLoggedIn,
@@ -20,11 +20,22 @@ import {
} from "@money/shared";
import type { AuthData } from "@money/shared/auth";
import { getHono } from "./hono";
import { Configuration, CountryCode, PlaidApi, PlaidEnvironments, Products } from "plaid";
import {
Configuration,
CountryCode,
PlaidApi,
PlaidEnvironments,
Products,
} from "plaid";
import { randomUUID } from "crypto";
import { db } from "./db";
import { balance, plaidAccessTokens, plaidLink, transaction } from "@money/shared/db";
import { eq, inArray, sql, type InferInsertModel } from "drizzle-orm";
import {
balance,
plaidAccessTokens,
plaidLink,
transaction,
} from "@money/shared/db";
import { and, eq, inArray, sql, type InferInsertModel } from "drizzle-orm";
import { plaidClient } from "./plaid";
const processor = new PushProcessor(
@@ -53,7 +64,7 @@ const createMutators = (authData: AuthData | null) => {
products: [Products.Transactions],
country_codes: [CountryCode.Us],
webhook: "https://webhooks.koon.us/api/webhook_receiver",
hosted_link: {}
hosted_link: {},
});
const { link_token, hosted_link_url } = r.data;
@@ -70,25 +81,52 @@ const createMutators = (authData: AuthData | null) => {
async get(_, { link_token }) {
isLoggedIn(authData);
const linkResp = await plaidClient.linkTokenGet({
link_token,
});
if (!linkResp) throw Error("No link respo");
console.log(JSON.stringify(linkResp.data, null, 4));
const publicToken = linkResp.data.link_sessions?.at(0)?.results?.item_add_results.at(0)?.public_token;
try {
const token = await db.query.plaidLink.findFirst({
where: and(
eq(plaidLink.token, link_token),
eq(plaidLink.user_id, authData.user.id),
),
});
if (!token) throw Error("Link not found");
if (token.completeAt) return;
if (!publicToken) throw Error("No public token");
const { data } = await plaidClient.itemPublicTokenExchange({
public_token: publicToken,
})
const linkResp = await plaidClient.linkTokenGet({
link_token,
});
if (!linkResp) throw Error("No link respo");
await db.insert(plaidAccessTokens).values({
id: randomUUID(),
userId: authData.user.id,
token: data.access_token,
logoUrl: "",
name: ""
});
console.log(JSON.stringify(linkResp.data, null, 4));
const item_add_result = linkResp.data.link_sessions
?.at(0)
?.results?.item_add_results.at(0);
// We will assume its not done yet.
if (!item_add_result) return;
const { data } = await plaidClient.itemPublicTokenExchange({
public_token: item_add_result.public_token,
});
await db.insert(plaidAccessTokens).values({
id: randomUUID(),
userId: authData.user.id,
token: data.access_token,
logoUrl: "",
name: item_add_result.institution?.name || "Unknown",
});
await db
.update(plaidLink)
.set({
completeAt: new Date(),
})
.where(eq(plaidLink.token, link_token));
} catch (e) {
console.error(e);
throw Error("Plaid error");
}
},
async updateTransactions() {
@@ -108,29 +146,39 @@ const createMutators = (authData: AuthData | null) => {
end_date: new Date().toISOString().split("T")[0],
});
const transactions = data.transactions.map(tx => ({
id: randomUUID(),
user_id: authData.user.id,
plaid_id: tx.transaction_id,
account_id: tx.account_id,
name: tx.name,
amount: tx.amount as any,
datetime: tx.datetime ? new Date(tx.datetime) : new Date(tx.date),
authorized_datetime: tx.authorized_datetime ? new Date(tx.authorized_datetime) : undefined,
json: JSON.stringify(tx),
} satisfies InferInsertModel<typeof transaction>));
const transactions = data.transactions.map(
(tx) =>
({
id: randomUUID(),
user_id: authData.user.id,
plaid_id: tx.transaction_id,
account_id: tx.account_id,
name: tx.name,
amount: tx.amount as any,
datetime: tx.datetime
? new Date(tx.datetime)
: new Date(tx.date),
authorized_datetime: tx.authorized_datetime
? new Date(tx.authorized_datetime)
: undefined,
json: JSON.stringify(tx),
}) satisfies InferInsertModel<typeof transaction>,
);
await db.insert(transaction).values(transactions).onConflictDoNothing({
target: transaction.plaid_id,
});
await db
.insert(transaction)
.values(transactions)
.onConflictDoNothing({
target: transaction.plaid_id,
});
const txReplacingPendingIds = data.transactions
.filter(t => t.pending_transaction_id)
.map(t => t.pending_transaction_id!);
.filter((t) => t.pending_transaction_id)
.map((t) => t.pending_transaction_id!);
await db.delete(transaction)
await db
.delete(transaction)
.where(inArray(transaction.plaid_id, txReplacingPendingIds));
}
},
@@ -146,26 +194,33 @@ const createMutators = (authData: AuthData | null) => {
for (const account of accounts) {
const { data } = await plaidClient.accountsBalanceGet({
access_token: account.token
access_token: account.token,
});
await db.insert(balance).values(data.accounts.map(bal => ({
id: randomUUID(),
user_id: authData.user.id,
plaid_id: bal.account_id,
avaliable: bal.balances.available as any,
current: bal.balances.current as any,
name: bal.name,
tokenId: account.id,
}))).onConflictDoUpdate({
target: balance.plaid_id,
set: { current: sql.raw(`excluded.${balance.current.name}`), avaliable: sql.raw(`excluded.${balance.avaliable.name}`) }
})
await db
.insert(balance)
.values(
data.accounts.map((bal) => ({
id: randomUUID(),
user_id: authData.user.id,
plaid_id: bal.account_id,
avaliable: bal.balances.available as any,
current: bal.balances.current as any,
name: bal.name,
tokenId: account.id,
})),
)
.onConflictDoUpdate({
target: balance.plaid_id,
set: {
current: sql.raw(`excluded.${balance.current.name}`),
avaliable: sql.raw(`excluded.${balance.avaliable.name}`),
},
});
}
},
}
},
} as const satisfies Mutators;
}
};
const zero = getHono()
.post("/mutate", async (c) => {

4
apps/expo/app/[...route].tsx
View File

@@ -5,7 +5,9 @@ import { authClient } from "@/lib/auth-client";
export default function Page() {
const { route: initalRoute } = useLocalSearchParams<{ route: string[] }>();
const [route, setRoute] = useState(initalRoute ? "/" + initalRoute.join("/") : "/");
const [route, setRoute] = useState(
initalRoute ? "/" + initalRoute.join("/") : "/",
);
const { data } = authClient.useSession();

37
apps/expo/app/_layout.tsx
View File

@@ -1,17 +1,23 @@
import { Stack } from 'expo-router';
import 'react-native-reanimated';
import { Stack } from "expo-router";
import "react-native-reanimated";
import { authClient } from '@/lib/auth-client';
import { ZeroProvider } from '@rocicorp/zero/react';
import { useMemo } from 'react';
import { authDataSchema } from '@money/shared/auth';
import { Platform } from 'react-native';
import type { ZeroOptions } from '@rocicorp/zero';
import { schema, type Schema, createMutators, type Mutators, BASE_URL } from '@money/shared';
import { authClient } from "@/lib/auth-client";
import { ZeroProvider } from "@rocicorp/zero/react";
import { useMemo } from "react";
import { authDataSchema } from "@money/shared/auth";
import { Platform } from "react-native";
import type { ZeroOptions } from "@rocicorp/zero";
import {
schema,
type Schema,
createMutators,
type Mutators,
BASE_URL,
} from "@money/shared";
import { expoSQLiteStoreProvider } from "@rocicorp/zero/react-native";
export const unstable_settings = {
anchor: 'index',
anchor: "index",
};
const kvStore = Platform.OS === "web" ? undefined : expoSQLiteStoreProvider();
@@ -25,19 +31,22 @@ export default function RootLayout() {
}, [session]);
const cookie = useMemo(() => {
return Platform.OS == 'web' ? undefined : authClient.getCookie();
return Platform.OS == "web" ? undefined : authClient.getCookie();
}, [session, isPending]);
const zeroProps = useMemo(() => {
return {
storageKey: 'money',
storageKey: "money",
kvStore,
server: process.env.NODE_ENV == 'production' ? 'https://zero.koon.us' : `${BASE_URL}:4848`,
server:
process.env.NODE_ENV == "production"
? "https://zero.koon.us"
: `${BASE_URL}:4848`,
userID: authData?.user.id ?? "anon",
schema,
mutators: createMutators(authData),
auth: cookie,
} as const satisfies ZeroOptions<Schema, Mutators>;
} as const satisfies ZeroOptions<Schema, Mutators>;
}, [authData, cookie]);
return (

8
apps/expo/app/approve.tsx
View File

@@ -4,7 +4,7 @@ import { useEffect } from "react";
import { Text } from "react-native";
export default function Page() {
const { code } = useLocalSearchParams<{code: string }>();
const { code } = useLocalSearchParams<{ code: string }>();
const { isPending, data } = authClient.useSession();
if (isPending) return <Text>Loading...</Text>;
if (!isPending && !data) return <Text>Please log in</Text>;
@@ -13,11 +13,7 @@ export default function Page() {
authClient.device.approve({
userCode: code,
});
}, []);
return <Text>
Approving: {code}
</Text>
return <Text>Approving: {code}</Text>;
}

7
apps/expo/app/auth.tsx
View File

@@ -6,7 +6,10 @@ export default function Auth() {
const onLogin = () => {
authClient.signIn.oauth2({
providerId: "koon-family",
callbackURL: process.env.NODE_ENV == 'production' ? 'https://money.koon.us' : `${BASE_URL}:8081`,
callbackURL:
process.env.NODE_ENV == "production"
? "https://money.koon.us"
: `${BASE_URL}:8081`,
});
};
@@ -14,5 +17,5 @@ export default function Auth() {
<View>
<Button onPress={onLogin} title="Login with Koon Family" />
</View>
)
);
}

55
apps/expo/app/index.native.tsx
View File

@@ -1,8 +1,14 @@
import { authClient } from '@/lib/auth-client';
import { RefreshControl, ScrollView, StatusBar, Text, View } from 'react-native';
import { authClient } from "@/lib/auth-client";
import {
RefreshControl,
ScrollView,
StatusBar,
Text,
View,
} from "react-native";
import { useQuery, useZero } from "@rocicorp/zero/react";
import { queries, type Mutators, type Schema } from '@money/shared';
import { useState } from 'react';
import { queries, type Mutators, type Schema } from "@money/shared";
import { useState } from "react";
export default function HomeScreen() {
const { data: session } = authClient.useSession();
@@ -20,16 +26,43 @@ export default function HomeScreen() {
return (
<>
<StatusBar barStyle="dark-content" />
<ScrollView contentContainerStyle={{ paddingTop: StatusBar.currentHeight, flexGrow: 1 }} refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />} style={{ paddingHorizontal: 10 }}>
{balances.map(balance => <Balance key={balance.id} balance={balance} />)}
<ScrollView
contentContainerStyle={{
paddingTop: StatusBar.currentHeight,
flexGrow: 1,
}}
refreshControl={
<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
}
style={{ paddingHorizontal: 10 }}
>
{balances.map((balance) => (
<Balance key={balance.id} balance={balance} />
))}
</ScrollView>
</>
);
}
function Balance({ balance }: { balance: { name: string, current: number, avaliable: number } }) {
return <View style={{ backgroundColor: "#eee", borderColor: "#ddd", borderWidth: 1, marginBottom: 10, borderRadius: 10 }}>
<Text style={{ fontSize: 15, textAlign: "center" }}>{balance.name}</Text>
<Text style={{ fontSize: 30, textAlign: "center" }}>{balance.current}</Text>
</View>
function Balance({
balance,
}: {
balance: { name: string; current: number; avaliable: number };
}) {
return (
<View
style={{
backgroundColor: "#eee",
borderColor: "#ddd",
borderWidth: 1,
marginBottom: 10,
borderRadius: 10,
}}
>
<Text style={{ fontSize: 15, textAlign: "center" }}>{balance.name}</Text>
<Text style={{ fontSize: 30, textAlign: "center" }}>
{balance.current}
</Text>
</View>
);
}

6
apps/expo/eslint.config.js
View File

@@ -1,10 +1,10 @@
// https://docs.expo.dev/guides/using-eslint/
const { defineConfig } = require('eslint/config');
const expoConfig = require('eslint-config-expo/flat');
const { defineConfig } = require("eslint/config");
const expoConfig = require("eslint-config-expo/flat");
module.exports = defineConfig([
expoConfig,
{
ignores: ['dist/*'],
ignores: ["dist/*"],
},
]);

12
apps/expo/lib/auth-client.ts
View File

@@ -1,11 +1,17 @@
import { createAuthClient } from "better-auth/react";
import { deviceAuthorizationClient, genericOAuthClient } from "better-auth/client/plugins";
import {
deviceAuthorizationClient,
genericOAuthClient,
} from "better-auth/client/plugins";
import { expoClient } from "@better-auth/expo/client";
import * as SecureStore from "expo-secure-store";
import { BASE_URL } from "@money/shared";
export const authClient = createAuthClient({
baseURL: process.env.NODE_ENV == 'production' ? 'https://money-api.koon.us' : `${BASE_URL}:3000`,
baseURL:
process.env.NODE_ENV == "production"
? "https://money-api.koon.us"
: `${BASE_URL}:3000`,
plugins: [
expoClient({
scheme: "money",
@@ -14,5 +20,5 @@ export const authClient = createAuthClient({
}),
genericOAuthClient(),
deviceAuthorizationClient(),
]
],
});

4
apps/expo/metro.config.js
View File

@@ -1,10 +1,10 @@
const { getDefaultConfig } = require("expo/metro-config");
const config = getDefaultConfig(__dirname)
const config = getDefaultConfig(__dirname);
// Add wasm asset support
config.resolver.assetExts.push("wasm");
config.resolver.unstable_enablePackageExports = true;
config.resolver.unstable_enablePackageExports = true;
module.exports = config;

13
apps/tui/build.ts
View File

@@ -5,9 +5,12 @@ import path from "path";
const aliasPlugin = {
name: "alias-react-native",
setup(build) {
build.onResolve({ filter: /^react-native$/ }, args => {
build.onResolve({ filter: /^react-native$/ }, (args) => {
return {
path: path.resolve(__dirname, "../../packages/react-native-opentui/index.tsx"),
path: path.resolve(
__dirname,
"../../packages/react-native-opentui/index.tsx",
),
};
});
},
@@ -16,9 +19,9 @@ const aliasPlugin = {
// Build configuration
await esbuild.build({
entryPoints: ["src/index.tsx"], // your app entry
bundle: true, // inline all dependencies (ui included)
platform: "node", // Node/Bun target
format: "esm", // keep ESM for top-level await
bundle: true, // inline all dependencies (ui included)
platform: "node", // Node/Bun target
format: "esm", // keep ESM for top-level await
outfile: "dist/index.js",
sourcemap: true,
plugins: [aliasPlugin],

6
apps/tui/lib/auth-client.ts
View File

@@ -4,9 +4,5 @@ import { deviceAuthorizationClient } from "better-auth/client/plugins";
export const authClient = createAuthClient({
baseURL: config.apiUrl,
plugins: [
deviceAuthorizationClient(),
]
plugins: [deviceAuthorizationClient()],
});

241
apps/tui/src/auth.ts
View File

@@ -1,39 +1,70 @@
import { Context, Data, Effect, Layer, Schema, Console, Schedule, Ref, Duration } from "effect";
import {
Context,
Data,
Effect,
Layer,
Schema,
Console,
Schedule,
Ref,
Duration,
} from "effect";
import { FileSystem } from "@effect/platform";
import { config } from "./config";
import { AuthState } from "./schema";
import { authClient } from "@/lib/auth-client";
import type { BetterFetchResponse } from "@better-fetch/fetch";
class AuthClientUnknownError extends Data.TaggedError("AuthClientUnknownError") {};
class AuthClientExpiredToken extends Data.TaggedError("AuthClientExpiredToken") {};
class AuthClientNoData extends Data.TaggedError("AuthClientNoData") {};
class AuthClientFetchError extends Data.TaggedError("AuthClientFetchError")<{ message: string, }> {};
class AuthClientUnknownError extends Data.TaggedError(
"AuthClientUnknownError",
) {}
class AuthClientExpiredToken extends Data.TaggedError(
"AuthClientExpiredToken",
) {}
class AuthClientNoData extends Data.TaggedError("AuthClientNoData") {}
class AuthClientFetchError extends Data.TaggedError("AuthClientFetchError")<{
message: string;
}> {}
class AuthClientError<T> extends Data.TaggedError("AuthClientError")<{
error: T,
}> {};
error: T;
}> {}
type ErrorType<E> = { [key in keyof ((E extends Record<string, any> ? E : {
message?: string;
}) & {
type ErrorType<E> = {
[key in keyof ((E extends Record<string, any>
? E
: {
message?: string;
}) & {
status: number;
statusText: string;
})]: ((E extends Record<string, any> ? E : {
message?: string;
}) & {
})]: ((E extends Record<string, any>
? E
: {
message?: string;
}) & {
status: number;
statusText: string;
})[key]; };
})[key];
};
export class AuthClient extends Context.Tag("AuthClient")<AuthClient, AuthClientImpl>() {};
export class AuthClient extends Context.Tag("AuthClient")<
AuthClient,
AuthClientImpl
>() {}
export interface AuthClientImpl {
use: <T, E>(
fn: (client: typeof authClient) => Promise<BetterFetchResponse<T, E>>,
) => Effect.Effect<T, AuthClientError<ErrorType<E>> | AuthClientFetchError | AuthClientUnknownError | AuthClientNoData, never>
) => Effect.Effect<
T,
| AuthClientError<ErrorType<E>>
| AuthClientFetchError
| AuthClientUnknownError
| AuthClientNoData,
never
>;
}
export const make = () =>
Effect.gen(function* () {
return AuthClient.of({
@@ -41,11 +72,13 @@ export const make = () =>
Effect.gen(function* () {
const { data, error } = yield* Effect.tryPromise({
try: () => fn(authClient),
catch: (error) => error instanceof Error
? new AuthClientFetchError({ message: error.message })
: new AuthClientUnknownError()
catch: (error) =>
error instanceof Error
? new AuthClientFetchError({ message: error.message })
: new AuthClientUnknownError(),
});
if (error != null) return yield* Effect.fail(new AuthClientError({ error }));
if (error != null)
return yield* Effect.fail(new AuthClientError({ error }));
if (data == null) return yield* Effect.fail(new AuthClientNoData());
return data;
}),
@@ -54,76 +87,80 @@ export const make = () =>
export const AuthClientLayer = Layer.scoped(AuthClient, make());
const pollToken = ({ device_code }: { device_code: string }) => Effect.gen(function* () {
const auth = yield* AuthClient;
const intervalRef = yield* Ref.make(5);
const pollToken = ({ device_code }: { device_code: string }) =>
Effect.gen(function* () {
const auth = yield* AuthClient;
const intervalRef = yield* Ref.make(5);
const tokenEffect = auth.use(client => {
Console.debug("Fetching");
const tokenEffect = auth.use((client) => {
Console.debug("Fetching");
return client.device.token({
grant_type: "urn:ietf:params:oauth:grant-type:device_code",
device_code,
client_id: config.authClientId,
fetchOptions: { headers: { "user-agent": config.authClientUserAgent } },
})
}
);
return client.device.token({
grant_type: "urn:ietf:params:oauth:grant-type:device_code",
device_code,
client_id: config.authClientId,
fetchOptions: { headers: { "user-agent": config.authClientUserAgent } },
});
});
return yield* tokenEffect
.pipe(
Effect.tapError(error =>
return yield* tokenEffect.pipe(
Effect.tapError((error) =>
error._tag == "AuthClientError" && error.error.error == "slow_down"
? Ref.update(intervalRef, current => {
Console.debug("updating delay to ", current + 5);
return current + 5
})
: Effect.void
? Ref.update(intervalRef, (current) => {
Console.debug("updating delay to ", current + 5);
return current + 5;
})
: Effect.void,
),
Effect.retry({
schedule: Schedule.addDelayEffect(
Schedule.recurWhile<Effect.Effect.Error<typeof tokenEffect>>(error =>
error._tag == "AuthClientError" &&
(error.error.error == "authorization_pending" || error.error.error == "slow_down")
Schedule.recurWhile<Effect.Effect.Error<typeof tokenEffect>>(
(error) =>
error._tag == "AuthClientError" &&
(error.error.error == "authorization_pending" ||
error.error.error == "slow_down"),
),
() => Ref.get(intervalRef).pipe(Effect.map(Duration.seconds))
)
})
() => Ref.get(intervalRef).pipe(Effect.map(Duration.seconds)),
),
}),
);
});
});
const getFromFromDisk = Effect.gen(function* () {
const fs = yield* FileSystem.FileSystem;
const content = yield* fs.readFileString(config.authPath);
const auth = yield* Schema.decode(Schema.parseJson(AuthState))(content);
if (auth.session.expiresAt < new Date()) yield* Effect.fail(new AuthClientExpiredToken());
if (auth.session.expiresAt < new Date())
yield* Effect.fail(new AuthClientExpiredToken());
return auth;
});
const requestAuth = Effect.gen(function* () {
const auth = yield* AuthClient;
const { device_code, user_code } = yield* auth.use(client => client.device.code({
client_id: config.authClientId,
scope: "openid profile email",
}));
const { device_code, user_code } = yield* auth.use((client) =>
client.device.code({
client_id: config.authClientId,
scope: "openid profile email",
}),
);
console.log(`Please use the code: ${user_code}`);
const { access_token } = yield* pollToken({ device_code });
const sessionData = yield* auth.use(client => client.getSession({
fetchOptions: {
auth: {
type: "Bearer",
token: access_token,
}
}
}));
const sessionData = yield* auth.use((client) =>
client.getSession({
fetchOptions: {
auth: {
type: "Bearer",
token: access_token,
},
},
}),
);
if (sessionData == null) return yield* Effect.fail(new AuthClientNoData());
const result = yield* Schema.decodeUnknown(AuthState)(sessionData)
const result = yield* Schema.decodeUnknown(AuthState)(sessionData);
const fs = yield* FileSystem.FileSystem;
yield* fs.writeFileString(config.authPath, JSON.stringify(result));
@@ -134,33 +171,51 @@ const requestAuth = Effect.gen(function* () {
export const getAuth = Effect.gen(function* () {
return yield* getFromFromDisk.pipe(
Effect.catchAll(() => requestAuth),
Effect.catchTag("AuthClientFetchError", (err) => Effect.gen(function* () {
yield* Console.error("Authentication failed: " + err.message);
process.exit(1);
})),
Effect.catchTag("AuthClientNoData", () => Effect.gen(function* () {
yield* Console.error("Authentication failed: No error and no data was given by the auth server.");
process.exit(1);
})),
Effect.catchTag("ParseError", (err) => Effect.gen(function* () {
yield* Console.error("Authentication failed: Auth data failed: " + err.toString());
process.exit(1);
})),
Effect.catchTag("BadArgument", () => Effect.gen(function* () {
yield* Console.error("Authentication failed: Bad argument");
process.exit(1);
})),
Effect.catchTag("SystemError", () => Effect.gen(function* () {
yield* Console.error("Authentication failed: System error");
process.exit(1);
})),
Effect.catchTag("AuthClientError", ({ error }) => Effect.gen(function* () {
yield* Console.error("Authentication error: " + error.statusText);
process.exit(1);
})),
Effect.catchTag("AuthClientUnknownError", () => Effect.gen(function* () {
yield* Console.error("Unknown authentication error");
process.exit(1);
})),
Effect.catchTag("AuthClientFetchError", (err) =>
Effect.gen(function* () {
yield* Console.error("Authentication failed: " + err.message);
process.exit(1);
}),
),
Effect.catchTag("AuthClientNoData", () =>
Effect.gen(function* () {
yield* Console.error(
"Authentication failed: No error and no data was given by the auth server.",
);
process.exit(1);
}),
),
Effect.catchTag("ParseError", (err) =>
Effect.gen(function* () {
yield* Console.error(
"Authentication failed: Auth data failed: " + err.toString(),
);
process.exit(1);
}),
),
Effect.catchTag("BadArgument", () =>
Effect.gen(function* () {
yield* Console.error("Authentication failed: Bad argument");
process.exit(1);
}),
),
Effect.catchTag("SystemError", () =>
Effect.gen(function* () {
yield* Console.error("Authentication failed: System error");
process.exit(1);
}),
),
Effect.catchTag("AuthClientError", ({ error }) =>
Effect.gen(function* () {
yield* Console.error("Authentication error: " + error.statusText);
process.exit(1);
}),
),
Effect.catchTag("AuthClientUnknownError", () =>
Effect.gen(function* () {
yield* Console.error("Unknown authentication error");
process.exit(1);
}),
),
);
});

2
apps/tui/src/config.ts
View File

@@ -10,5 +10,5 @@ export const config = {
authClientId: "koon-family",
authClientUserAgent: "CLI",
zeroUrl: "http://laptop:4848",
apiUrl: "http://laptop:3000"
apiUrl: "http://laptop:3000",
};

24
apps/tui/src/index.tsx
View File

@@ -2,7 +2,7 @@ import { createCliRenderer } from "@opentui/core";
import { createRoot, useKeyboard } from "@opentui/react";
import { App, type Route } from "@money/ui";
import { ZeroProvider } from "@rocicorp/zero/react";
import { schema } from '@money/shared';
import { schema } from "@money/shared";
import { useState } from "react";
import { AuthClientLayer, getAuth } from "./auth";
import { Effect } from "effect";
@@ -14,28 +14,30 @@ import { config } from "./config";
function Main({ auth }: { auth: AuthData }) {
const [route, setRoute] = useState<Route>("/");
useKeyboard(key => {
useKeyboard((key) => {
if (key.name == "c" && key.ctrl) process.exit(0);
});
return (
<ZeroProvider {...{ userID: auth.user.id, auth: auth.session.token, server: config.zeroUrl, schema, kvStore }}>
<App
auth={auth}
route={route}
setRoute={setRoute}
/>
<ZeroProvider
{...{
userID: auth.user.id,
auth: auth.session.token,
server: config.zeroUrl,
schema,
kvStore,
}}
>
<App auth={auth} route={route} setRoute={setRoute} />
</ZeroProvider>
);
}
const auth = await Effect.runPromise(
getAuth.pipe(
Effect.provide(BunContext.layer),
Effect.provide(AuthClientLayer),
)
),
);
const renderer = await createCliRenderer({ exitOnCtrlC: false });
createRoot(renderer).render(<Main auth={auth} />);

7
apps/tui/src/schema.ts
View File

@@ -1,6 +1,9 @@
import { Schema } from "effect";
const DateFromDateOrString = Schema.Union(Schema.DateFromString, Schema.DateFromSelf);
const DateFromDateOrString = Schema.Union(
Schema.DateFromString,
Schema.DateFromSelf,
);
const SessionSchema = Schema.Struct({
expiresAt: DateFromDateOrString,
@@ -23,11 +26,9 @@ const UserSchema = Schema.Struct({
id: Schema.String,
});
export const AuthState = Schema.Struct({
session: SessionSchema,
user: UserSchema,
});
export type AuthData = typeof AuthState.Type;

6
apps/tui/src/store.ts
View File

@@ -23,7 +23,7 @@ async function loadFile(name: string): Promise<Map<string, ReadonlyJSONValue>> {
const buf = await fs.readFile(filePath, "utf8");
const obj = JSON.parse(buf) as Record<string, ReadonlyJSONValue>;
const frozen = Object.fromEntries(
Object.entries(obj).map(([k, v]) => [k, deepFreeze(v)])
Object.entries(obj).map(([k, v]) => [k, deepFreeze(v)]),
);
return new Map(Object.entries(frozen));
} catch (err: any) {
@@ -73,7 +73,9 @@ export const kvStore: StoreProvider = {
closed: txClosed,
async has(key: string) {
if (txClosed) throw new Error("transaction closed");
return staging.has(key) ? staging.get(key) !== undefined : data.has(key);
return staging.has(key)
? staging.get(key) !== undefined
: data.has(key);
},
async get(key: string) {
if (txClosed) throw new Error("transaction closed");

2
apps/tui/util/qr.ts
View File

@@ -22,5 +22,3 @@ export function QR(value: string): string {
}
return out;
}

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

4
scripts/reset-project.js
View File

@@ -91,7 +91,7 @@ const moveDirectories = async (userInput) => {
userInput === "y"
? `\n3. Delete the /${exampleDir} directory when you're done referencing it.`
: ""
}`
}`,
);
} catch (error) {
console.error(`❌ Error during script execution: ${error.message}`);
@@ -108,5 +108,5 @@ rl.question(
console.log("❌ Invalid input. Please enter 'Y' or 'N'.");
rl.close();
}
}
},
);

1
scripts/set-machine-name.ts
View File

@@ -33,4 +33,3 @@ try {
console.error("Failed to update .env.dev:", err);
process.exit(1);
}