@montytools/cli 0.1.0

package/template/src/routes/index.tsx

@@ -0,0 +1,263 @@
+import { useState } from "react";
+import { createFileRoute } from "@tanstack/react-router";
+import { CheckIcon, PlusIcon, TrashIcon } from "lucide-react";
+
+import {
+  useInsert,
+  useList,
+  useMembers,
+  useRemove,
+  useUpdate,
+} from "@montytools/sdk/react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import {
+  Field,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Spinner } from "@/components/ui/spinner";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+import { app } from "../../monty.config";
+
+export const Route = createFileRoute("/")({
+  component: ExpenseBoard,
+});
+
+type Status = "draft" | "submitted" | "approved";
+const NEXT_STATUS: Record<Status, Status | null> = {
+  draft: "submitted",
+  submitted: "approved",
+  approved: null,
+};
+const STATUS_VARIANT = {
+  draft: "secondary",
+  submitted: "default",
+  approved: "outline",
+} as const;
+
+function ExpenseBoard() {
+  const [statusFilter, setStatusFilter] = useState<Status | "all">("all");
+
+  // Live, typed, reactive — a teammate's write re-renders this list.
+  const { data: expenses, status, loadMore } = useList(app, "expenses", {
+    filter: statusFilter === "all" ? undefined : { status: statusFilter },
+    order: "desc",
+    limit: 50,
+  });
+  const members = useMembers();
+  const insert = useInsert(app, "expenses");
+  const update = useUpdate(app, "expenses");
+  const remove = useRemove(app, "expenses");
+
+  const [title, setTitle] = useState("");
+  const [amount, setAmount] = useState("");
+  // "__none" sentinel: a controlled Radix Select must never flip to undefined
+  // (it goes uncontrolled and keeps displaying the stale selection).
+  const [assigneeId, setAssigneeId] = useState("__none");
+  const [formError, setFormError] = useState<string | null>(null);
+
+  async function addExpense() {
+    setFormError(null);
+    try {
+      await insert({
+        title,
+        amount: Number(amount),
+        ...(assigneeId !== "__none" ? { assigneeId } : {}),
+      });
+      setTitle("");
+      setAmount("");
+      setAssigneeId("__none");
+    } catch (error) {
+      setFormError(error instanceof Error ? error.message : String(error));
+    }
+  }
+
+  const memberName = (userId?: string) =>
+    members?.find((m) => m.userId === userId)?.name ?? "—";
+
+  return (
+    <main className="mx-auto flex max-w-4xl flex-col gap-6 p-6">
+      <header className="flex items-center justify-between">
+        <h1 className="text-2xl font-semibold">Expenses</h1>
+        <Select
+          value={statusFilter}
+          onValueChange={(v) => setStatusFilter(v as Status | "all")}
+        >
+          <SelectTrigger className="w-40">
+            <SelectValue placeholder="Filter status" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="all">All statuses</SelectItem>
+              <SelectItem value="draft">Draft</SelectItem>
+              <SelectItem value="submitted">Submitted</SelectItem>
+              <SelectItem value="approved">Approved</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </header>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Add expense</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <FieldGroup>
+            <div className="flex flex-wrap items-end gap-4">
+              <Field className="min-w-48 flex-1">
+                <FieldLabel htmlFor="title">Title</FieldLabel>
+                <Input
+                  id="title"
+                  value={title}
+                  onChange={(e) => setTitle(e.target.value)}
+                  placeholder="Team lunch"
+                />
+              </Field>
+              <Field className="w-32">
+                <FieldLabel htmlFor="amount">Amount</FieldLabel>
+                <Input
+                  id="amount"
+                  type="number"
+                  value={amount}
+                  onChange={(e) => setAmount(e.target.value)}
+                  placeholder="42.50"
+                />
+              </Field>
+              <Field className="w-48">
+                <FieldLabel>Assignee</FieldLabel>
+                <Select value={assigneeId} onValueChange={setAssigneeId}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Unassigned" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectItem value="__none">Unassigned</SelectItem>
+                      {(members ?? []).map((m) => (
+                        <SelectItem key={m.userId} value={m.userId}>
+                          {m.name}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </Field>
+              <Button onClick={addExpense}>
+                <PlusIcon data-icon="inline-start" />
+                Add
+              </Button>
+            </div>
+            {formError && <FieldError>{formError}</FieldError>}
+          </FieldGroup>
+        </CardContent>
+      </Card>
+
+      {status === "LoadingFirstPage" && expenses.length === 0 ? (
+        <div className="flex justify-center p-12">
+          <Spinner />
+        </div>
+      ) : expenses.length === 0 ? (
+        <Empty>
+          <EmptyHeader>
+            <EmptyTitle>No expenses yet</EmptyTitle>
+            <EmptyDescription>
+              Add the first one above — it appears for every teammate in real
+              time.
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      ) : (
+        <Card>
+          <CardContent>
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableHead>Title</TableHead>
+                  <TableHead>Amount</TableHead>
+                  <TableHead>Status</TableHead>
+                  <TableHead>Assignee</TableHead>
+                  <TableHead className="w-40" />
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {expenses.map((e) => (
+                  <TableRow key={e._id}>
+                    <TableCell className="font-medium">{e.title}</TableCell>
+                    <TableCell>${e.amount.toFixed(2)}</TableCell>
+                    <TableCell>
+                      <Badge variant={STATUS_VARIANT[e.status]}>
+                        {e.status}
+                      </Badge>
+                    </TableCell>
+                    <TableCell>{memberName(e.assigneeId)}</TableCell>
+                    <TableCell>
+                      <div className="flex justify-end gap-2">
+                        {NEXT_STATUS[e.status] && (
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={() =>
+                              update(e._id, { status: NEXT_STATUS[e.status]! })
+                            }
+                          >
+                            <CheckIcon data-icon="inline-start" />
+                            {NEXT_STATUS[e.status]}
+                          </Button>
+                        )}
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          onClick={() => remove(e._id)}
+                        >
+                          <TrashIcon data-icon="inline-start" />
+                          Delete
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            {status === "CanLoadMore" && (
+              <div className="flex justify-center pt-4">
+                <Button variant="ghost" onClick={() => loadMore()}>
+                  Load more
+                </Button>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      )}
+    </main>
+  );
+}

package/template/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "include": ["src/**/*", "monty.config.ts", "vite.config.ts"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": false,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/template/vite.config.ts

@@ -0,0 +1,16 @@
+import { monty } from "@montytools/sdk/vite";
+import tailwindcss from "@tailwindcss/vite";
+import { tanstackRouter } from "@tanstack/router-plugin/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  resolve: { tsconfigPaths: true },
+  plugins: [
+    // ORDER MATTERS: tanstackRouter before react
+    tanstackRouter({ target: "react", autoCodeSplitting: true }),
+    react(),
+    tailwindcss(),
+    monty(), // mirrors browser errors into the `monty dev` terminal
+  ],
+});