@pylonsync/create-pylon 0.3.343 → 0.3.345

package/templates/projects/tests/search.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, test } from "bun:test";
+import { moveSelection, searchItems, type SearchItem } from "../lib/search";
+
+const items: SearchItem[] = [
+  { id: "1", type: "company", title: "Acme Inc", subtitle: "acme.com", href: "/c" },
+  {
+    id: "2",
+    type: "company",
+    title: "Acme Corporation Holdings",
+    subtitle: "acmeholdings.com",
+    href: "/c",
+  },
+  {
+    id: "3",
+    type: "contact",
+    title: "Dana Whitfield",
+    subtitle: "Northwind Logistics",
+    href: "/p",
+    keywords: "dana@northwind.co VP Operations",
+  },
+  { id: "4", type: "deal", title: "Fleet dispatch rollout", href: "/d" },
+];
+
+const titles = (q: string) => searchItems(items, q).map((i) => i.title);
+
+describe("searchItems", () => {
+  test("an empty query lists everything", () => {
+    expect(searchItems(items, "").length).toBe(items.length);
+    expect(searchItems(items, "   ").length).toBe(items.length);
+  });
+
+  test("prefix beats substring", () => {
+    expect(titles("acme")[0]).toBe("Acme Inc");
+  });
+
+  test("the shorter title wins a tie", () => {
+    // Both start with "Acme"; the more specific record should come first.
+    expect(titles("acme")).toEqual(["Acme Inc", "Acme Corporation Holdings"]);
+  });
+
+  test("matches a word inside the title", () => {
+    expect(titles("dispatch")).toContain("Fleet dispatch rollout");
+  });
+
+  test("matches the subtitle and hidden keywords", () => {
+    expect(titles("northwind")).toContain("Dana Whitfield");
+    expect(titles("dana@northwind.co")).toContain("Dana Whitfield");
+    expect(titles("VP")).toContain("Dana Whitfield");
+  });
+
+  test("is case-insensitive", () => {
+    expect(titles("ACME").length).toBe(2);
+  });
+
+  test("no match is empty, not everything", () => {
+    expect(titles("zzzz")).toEqual([]);
+  });
+
+  test("respects the limit", () => {
+    expect(searchItems(items, "", 2)).toHaveLength(2);
+  });
+
+  test("a word-boundary hit beats a mid-word one", () => {
+    const rows: SearchItem[] = [
+      { id: "a", type: "deal", title: "Broadcasting", href: "/" },
+      { id: "b", type: "deal", title: "New cast list", href: "/" },
+    ];
+    expect(searchItems(rows, "cast").map((r) => r.title)[0]).toBe("New cast list");
+  });
+});
+
+describe("moveSelection", () => {
+  test("wraps at both ends", () => {
+    expect(moveSelection(0, -1, 3)).toBe(2);
+    expect(moveSelection(2, 1, 3)).toBe(0);
+    expect(moveSelection(0, 1, 3)).toBe(1);
+  });
+
+  test("an empty list stays at zero rather than going negative", () => {
+    expect(moveSelection(0, 1, 0)).toBe(0);
+    expect(moveSelection(0, -1, 0)).toBe(0);
+  });
+});

package/templates/projects/tests/setup.ts

@@ -0,0 +1,5 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+
+// Make document/window available so @testing-library/react can render. Loaded
+// via bunfig.toml's [test] preload, before any test file runs.
+GlobalRegistrator.register();

package/templates/projects/tests/work.test.ts

@@ -0,0 +1,238 @@
+import { describe, expect, test } from "bun:test";
+import {
+  TASK_STATUSES,
+  billableCents,
+  budgetState,
+  duration,
+  groupByStatus,
+  isOpen,
+  isValidProjectStatus,
+  isValidTaskStatus,
+  minutesByTask,
+  minutesForProject,
+  minutesForTask,
+  money,
+  parseDuration,
+  progress,
+  type Task,
+  type TimeEntry,
+} from "../lib/work";
+
+const task = (over: Partial<Task> = {}): Task => ({
+  id: "t1",
+  projectId: "p1",
+  title: "Do the thing",
+  status: "todo",
+  ...over,
+});
+
+const entry = (over: Partial<TimeEntry> = {}): TimeEntry => ({
+  id: "e1",
+  taskId: "t1",
+  projectId: "p1",
+  minutes: 60,
+  ...over,
+});
+
+describe("statuses", () => {
+  test("only done is terminal on the board", () => {
+    expect(isOpen(task({ status: "todo" }))).toBe(true);
+    expect(isOpen(task({ status: "doing" }))).toBe(true);
+    expect(isOpen(task({ status: "review" }))).toBe(true);
+    expect(isOpen(task({ status: "done" }))).toBe(false);
+  });
+
+  test("unknown values are rejected, not coerced", () => {
+    expect(isValidTaskStatus("doing")).toBe(true);
+    expect(isValidTaskStatus("Doing")).toBe(false);
+    expect(isValidTaskStatus("blocked")).toBe(false);
+    expect(isValidProjectStatus("active")).toBe(true);
+    expect(isValidProjectStatus("archived")).toBe(false);
+  });
+
+  test("the board has all four columns", () => {
+    expect(TASK_STATUSES.map((s) => s.id)).toEqual(["todo", "doing", "review", "done"]);
+  });
+});
+
+describe("groupByStatus", () => {
+  test("puts each task in its column, in manual order", () => {
+    const columns = groupByStatus([
+      task({ id: "b", status: "todo", position: 1 }),
+      task({ id: "a", status: "todo", position: 0 }),
+      task({ id: "c", status: "done" }),
+    ]);
+    expect(columns[0].tasks.map((t) => t.id)).toEqual(["a", "b"]);
+    expect(columns[3].tasks.map((t) => t.id)).toEqual(["c"]);
+  });
+
+  test("an unknown status is dropped rather than filed under To do", () => {
+    // Silently reclassifying hides a typo behind a plausible board.
+    const columns = groupByStatus([task({ status: "blocked" })]);
+    expect(columns.every((c) => c.tasks.length === 0)).toBe(true);
+  });
+
+  test("always returns every column, even empty", () => {
+    expect(groupByStatus([])).toHaveLength(4);
+  });
+});
+
+describe("time as a ledger", () => {
+  test("a task's time is the sum of its entries", () => {
+    expect(
+      minutesForTask("t1", [
+        entry({ id: "a", minutes: 180 }),
+        entry({ id: "b", minutes: 270 }),
+      ]),
+    ).toBe(450);
+  });
+
+  test("two people logging at once both count", () => {
+    // The bug this design prevents: a mutable total loses one of them.
+    expect(
+      minutesForTask("t1", [
+        entry({ id: "a", minutes: 60, userId: "u1" }),
+        entry({ id: "b", minutes: 60, userId: "u2" }),
+      ]),
+    ).toBe(120);
+  });
+
+  test("a negative entry corrects without hiding the original", () => {
+    const entries = [entry({ id: "a", minutes: 120 }), entry({ id: "b", minutes: -30 })];
+    expect(minutesForTask("t1", entries)).toBe(90);
+    expect(entries).toHaveLength(2);
+  });
+
+  test("ignores other tasks", () => {
+    expect(minutesForTask("t1", [entry({ taskId: "t2", minutes: 999 })])).toBe(0);
+  });
+
+  test("minutesByTask matches the per-task version", () => {
+    const entries = [
+      entry({ id: "a", taskId: "t1", minutes: 60 }),
+      entry({ id: "b", taskId: "t2", minutes: 30 }),
+    ];
+    const map = minutesByTask(entries);
+    expect(map.get("t1")).toBe(minutesForTask("t1", entries));
+    expect(map.get("t2")).toBe(minutesForTask("t2", entries));
+  });
+
+  test("project time sums across its tasks", () => {
+    expect(
+      minutesForProject("p1", [
+        entry({ id: "a", taskId: "t1", minutes: 60 }),
+        entry({ id: "b", taskId: "t2", minutes: 90 }),
+        entry({ id: "c", projectId: "p2", minutes: 999 }),
+      ]),
+    ).toBe(150);
+  });
+
+  test("a corrupt entry doesn't poison the total", () => {
+    expect(
+      minutesForTask("t1", [
+        entry({ minutes: 60 }),
+        entry({ id: "x", minutes: NaN as unknown as number }),
+      ]),
+    ).toBe(60);
+  });
+});
+
+describe("progress", () => {
+  test("measures completion by task COUNT, not by time", () => {
+    // A project can be 90% through its budget and 20% done; conflating them is
+    // how a status report lies.
+    const p = progress([
+      task({ id: "a", status: "done" }),
+      task({ id: "b", status: "doing" }),
+      task({ id: "c", status: "todo" }),
+      task({ id: "d", status: "review" }),
+    ]);
+    expect(p.done).toBe(1);
+    expect(p.total).toBe(4);
+    expect(p.ratio).toBe(0.25);
+  });
+
+  test("no tasks is null, not zero percent", () => {
+    // "Nothing planned" and "nothing done" are different answers.
+    expect(progress([]).ratio).toBeNull();
+  });
+});
+
+describe("budgetState", () => {
+  test("over once logged passes the budget", () => {
+    expect(budgetState(2400, 2760)).toBe("over");
+  });
+
+  test("near at 85%", () => {
+    expect(budgetState(1000, 850)).toBe("near");
+    expect(budgetState(1000, 849)).toBe("ok");
+  });
+
+  test("exactly on budget is not yet over", () => {
+    expect(budgetState(1000, 1000)).toBe("near");
+  });
+
+  test("no budget means nothing to be over", () => {
+    expect(budgetState(0, 5000)).toBe("none");
+    expect(budgetState(null, 5000)).toBe("none");
+  });
+});
+
+describe("billableCents", () => {
+  test("prices logged minutes at the hourly rate", () => {
+    // 90 minutes at $165/h
+    expect(billableCents(90, 16_500)).toBe(24_750);
+  });
+
+  test("no rate is no value", () => {
+    expect(billableCents(600, 0)).toBe(0);
+    expect(billableCents(600, null)).toBe(0);
+  });
+});
+
+describe("duration", () => {
+  test("reads the way a timesheet does", () => {
+    expect(duration(450)).toBe("7h 30m");
+    expect(duration(45)).toBe("45m");
+    expect(duration(120)).toBe("2h");
+    expect(duration(0)).toBe("0m");
+  });
+
+  test("handles nothing and negatives", () => {
+    expect(duration(null)).toBe("0m");
+    expect(duration(-90)).toBe("-1h 30m");
+  });
+});
+
+describe("parseDuration", () => {
+  test("accepts however people write time", () => {
+    // Rejecting "1h30" because it isn't "90" is friction that stops time being
+    // logged at all.
+    expect(parseDuration("90")).toBe(90);
+    expect(parseDuration("1.5h")).toBe(90);
+    expect(parseDuration("1h30")).toBe(90);
+    expect(parseDuration("1h30m")).toBe(90);
+    expect(parseDuration("1h 30m")).toBe(90);
+    expect(parseDuration("45m")).toBe(45);
+    expect(parseDuration("2h")).toBe(120);
+  });
+
+  test("is case- and space-insensitive", () => {
+    expect(parseDuration(" 1H30M ")).toBe(90);
+  });
+
+  test("rejects nonsense rather than logging zero", () => {
+    expect(parseDuration("")).toBeNull();
+    expect(parseDuration("abc")).toBeNull();
+    expect(parseDuration("1h75")).toBeNull();
+    expect(parseDuration("h")).toBeNull();
+  });
+});
+
+describe("money", () => {
+  test("is exact", () => {
+    expect(money(24_750)).toBe("$247.50");
+    expect(money(0)).toBe("$0.00");
+    expect(money(null)).toBe("$0.00");
+  });
+});

package/templates/projects/tsconfig.json

@@ -0,0 +1,33 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "lib": [
+      "ES2022",
+      "DOM"
+    ],
+    "types": [
+      "react",
+      "react-dom",
+      "node"
+    ],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "app.ts",
+    "app/**/*",
+    "components/**/*",
+    "lib/**/*",
+    "functions/**/*"
+  ]
+}

package/templates/restaurant/components/ui/badge.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-white",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <span
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

package/templates/restaurant/components/ui/dialog.tsx

@@ -0,0 +1,110 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border bg-background p-6 shadow-lg duration-200",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-3 top-3 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+        <X className="size-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+function DialogHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("flex flex-col gap-1.5 text-left", className)} {...props} />
+  );
+}
+
+function DialogFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-base font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/templates/restaurant/components/ui/input.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({
+  className,
+  type,
+  ...props
+}: React.InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors",
+        "placeholder:text-muted-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        // Date/time inputs render a native picker indicator that ignores the
+        // text color; nudge it so it stays visible in dark mode.
+        "[&::-webkit-calendar-picker-indicator]:opacity-60 dark:[&::-webkit-calendar-picker-indicator]:invert",
+        "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/templates/restaurant/components/ui/label.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Label({
+  className,
+  ...props
+}: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

package/templates/restaurant/components/ui/select.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * A styled native `<select>`.
+ *
+ * shadcn's Select is a Radix listbox; this deliberately isn't. A native select
+ * needs no extra dependency, is keyboard- and screen-reader-correct for free,
+ * and opens as the platform picker on mobile — which is what you want for the
+ * plain "pick one value" case that scaffolded forms are full of. Reach for
+ * `npx shadcn add select` when you need custom option rendering or search.
+ */
+function Select({
+  className,
+  children,
+  ...props
+}: React.SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <div className="relative">
+      <select
+        data-slot="select"
+        className={cn(
+          "flex h-9 w-full appearance-none rounded-md border border-input bg-transparent py-1 pl-3 pr-8 text-sm shadow-sm transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </select>
+      <ChevronDown className="pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 opacity-50" />
+    </div>
+  );
+}
+
+export { Select };