@pylonsync/create-pylon 0.3.343 → 0.3.345

package/templates/crm/tests/components.test.tsx

@@ -0,0 +1,245 @@
+import { afterEach, describe, expect, test } from "bun:test";
+// This project uses the classic JSX transform, so .tsx tests import React.
+import React from "react";
+import { cleanup, fireEvent, render, screen, within } from "@testing-library/react";
+import { PipelineBoard } from "../components/pipeline-board";
+import { DataTable } from "../components/data-table";
+import { CommandPalette } from "../components/command-palette";
+import { EmptyState } from "../components/empty-state";
+import type { Deal } from "../lib/pipeline";
+
+afterEach(cleanup);
+
+// Tier 2: components. No mocking needed — they take data as props and report
+// changes through callbacks, because the container owns `db`.
+
+const deals: Deal[] = [
+  { id: "d1", title: "Fleet dispatch rollout", value: 48_000, stage: "proposal" },
+  { id: "d2", title: "Class booking system", value: 7_400, stage: "lead" },
+];
+
+const noName = () => null;
+
+describe("PipelineBoard", () => {
+  test("renders a column per board stage", () => {
+    render(
+      <PipelineBoard
+        deals={deals}
+        companyName={noName}
+        ownerName={noName}
+        onMove={() => {}}
+        onOpen={() => {}}
+      />,
+    );
+    for (const label of ["Lead", "Qualified", "Proposal", "Won"]) {
+      expect(screen.getByLabelText(label)).toBeDefined();
+    }
+    // Lost is real in the model but deliberately not a column.
+    expect(screen.queryByLabelText("Lost")).toBeNull();
+  });
+
+  test("shows each column's total in its header", () => {
+    render(
+      <PipelineBoard
+        deals={deals}
+        companyName={noName}
+        ownerName={noName}
+        onMove={() => {}}
+        onOpen={() => {}}
+      />,
+    );
+    // Scoped to the column, because the same figure also appears on the card —
+    // a bare getByText would match twice and throw.
+    const proposal = screen.getByLabelText("Proposal");
+    expect(within(proposal).getAllByText("$48K").length).toBeGreaterThan(0);
+
+    const lead = screen.getByLabelText("Lead");
+    expect(within(lead).getAllByText("$7,400").length).toBeGreaterThan(0);
+
+    // An empty column still totals, rather than showing nothing.
+    const won = screen.getByLabelText("Won");
+    expect(within(won).getByText("$0")).toBeDefined();
+  });
+
+  test("opening a card reports the deal id", () => {
+    const opened: string[] = [];
+    render(
+      <PipelineBoard
+        deals={deals}
+        companyName={noName}
+        ownerName={noName}
+        onMove={() => {}}
+        onOpen={(id) => opened.push(id)}
+      />,
+    );
+    fireEvent.click(screen.getByText("Fleet dispatch rollout"));
+    expect(opened).toEqual(["d1"]);
+  });
+
+  test("dropping on another column reports the move", () => {
+    const moves: Array<[string, string]> = [];
+    render(
+      <PipelineBoard
+        deals={deals}
+        companyName={noName}
+        ownerName={noName}
+        onMove={(id, stage) => moves.push([id, stage])}
+        onOpen={() => {}}
+      />,
+    );
+    const data = new Map<string, string>();
+    const dataTransfer = {
+      setData: (k: string, v: string) => data.set(k, v),
+      getData: (k: string) => data.get(k) ?? "",
+      effectAllowed: "",
+      dropEffect: "",
+    };
+    fireEvent.dragStart(screen.getByText("Class booking system"), { dataTransfer });
+    fireEvent.drop(screen.getByLabelText("Won"), { dataTransfer });
+    expect(moves).toEqual([["d2", "won"]]);
+  });
+
+  test("dropping a card back on its own column writes nothing", () => {
+    // A jittery drag shouldn't produce a history entry saying it moved.
+    const moves: Array<[string, string]> = [];
+    render(
+      <PipelineBoard
+        deals={deals}
+        companyName={noName}
+        ownerName={noName}
+        onMove={(id, stage) => moves.push([id, stage])}
+        onOpen={() => {}}
+      />,
+    );
+    const data = new Map<string, string>();
+    const dataTransfer = {
+      setData: (k: string, v: string) => data.set(k, v),
+      getData: (k: string) => data.get(k) ?? "",
+      effectAllowed: "",
+      dropEffect: "",
+    };
+    fireEvent.dragStart(screen.getByText("Class booking system"), { dataTransfer });
+    fireEvent.drop(screen.getByLabelText("Lead"), { dataTransfer });
+    expect(moves).toEqual([]);
+  });
+});
+
+describe("DataTable", () => {
+  const rows = [{ id: "1", name: "Acme" }];
+
+  test("renders a cell per column", () => {
+    render(
+      <DataTable
+        rows={rows}
+        columns={[{ key: "name", header: "Company", cell: (r) => r.name }]}
+      />,
+    );
+    expect(screen.getByRole("table")).toBeDefined();
+    expect(screen.getByText("Acme")).toBeDefined();
+  });
+
+  test("shows the empty state instead of a bare header", () => {
+    render(
+      <DataTable
+        rows={[]}
+        columns={[{ key: "name", header: "Company", cell: () => null }]}
+        empty={<EmptyState title="No companies yet" />}
+      />,
+    );
+    expect(screen.queryByRole("table")).toBeNull();
+    expect(screen.getByText("No companies yet")).toBeDefined();
+  });
+
+  test("clicking a row reports it", () => {
+    const clicked: string[] = [];
+    render(
+      <DataTable
+        rows={rows}
+        columns={[{ key: "name", header: "Company", cell: (r) => r.name }]}
+        onRowClick={(row) => clicked.push(row.id)}
+      />,
+    );
+    fireEvent.click(screen.getByText("Acme"));
+    expect(clicked).toEqual(["1"]);
+  });
+});
+
+describe("CommandPalette", () => {
+  const items = [
+    { id: "1", type: "deal" as const, title: "Fleet dispatch", href: "/d/1" },
+    { id: "2", type: "company" as const, title: "Acme Inc", href: "/c/2" },
+  ];
+
+  test("renders nothing when closed", () => {
+    const { container } = render(
+      <CommandPalette open={false} items={items} onClose={() => {}} onSelect={() => {}} />,
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  test("filters as you type", () => {
+    render(
+      <CommandPalette open items={items} onClose={() => {}} onSelect={() => {}} />,
+    );
+    fireEvent.change(screen.getByLabelText(/search deals/i), {
+      target: { value: "acme" },
+    });
+    expect(screen.getByText("Acme Inc")).toBeDefined();
+    expect(screen.queryByText("Fleet dispatch")).toBeNull();
+  });
+
+  test("Enter selects the highlighted row and closes", () => {
+    const selected: string[] = [];
+    let closed = false;
+    render(
+      <CommandPalette
+        open
+        items={items}
+        onClose={() => {
+          closed = true;
+        }}
+        onSelect={(item) => selected.push(item.id)}
+      />,
+    );
+    const input = screen.getByLabelText(/search deals/i);
+    fireEvent.change(input, { target: { value: "fleet" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(selected).toEqual(["1"]);
+    expect(closed).toBe(true);
+  });
+
+  test("Escape closes without selecting", () => {
+    const selected: string[] = [];
+    let closed = false;
+    render(
+      <CommandPalette
+        open
+        items={items}
+        onClose={() => {
+          closed = true;
+        }}
+        onSelect={(item) => selected.push(item.id)}
+      />,
+    );
+    fireEvent.keyDown(screen.getByLabelText(/search deals/i), { key: "Escape" });
+    expect(closed).toBe(true);
+    expect(selected).toEqual([]);
+  });
+
+  test("actions show only with an empty query", () => {
+    render(
+      <CommandPalette
+        open
+        items={items}
+        actions={[{ id: "new", label: "New deal", run: () => {} }]}
+        onClose={() => {}}
+        onSelect={() => {}}
+      />,
+    );
+    expect(screen.getByText("New deal")).toBeDefined();
+    fireEvent.change(screen.getByLabelText(/search deals/i), {
+      target: { value: "acme" },
+    });
+    expect(screen.queryByText("New deal")).toBeNull();
+  });
+});

package/templates/crm/tests/pipeline.test.ts

@@ -0,0 +1,219 @@
+import { describe, expect, test } from "bun:test";
+import {
+  BOARD_STAGES,
+  PIPELINE,
+  accentIndex,
+  daysUntil,
+  groupByStage,
+  initials,
+  isOpen,
+  isValidStage,
+  metrics,
+  money,
+  nextStage,
+  percent,
+  previousStage,
+  relativeTime,
+  sumValue,
+  type Deal,
+} from "../lib/pipeline";
+
+const deal = (over: Partial<Deal> = {}): Deal => ({
+  id: "d1",
+  title: "Deal",
+  value: 1000,
+  stage: "lead",
+  ...over,
+});
+
+describe("stages", () => {
+  test("the board hides Lost but the model keeps it", () => {
+    // Lost deals still count against the win rate; they just don't deserve a
+    // column competing for attention with live work.
+    expect(BOARD_STAGES.map((s) => s.id)).toEqual([
+      "lead",
+      "qualified",
+      "proposal",
+      "won",
+    ]);
+    expect(PIPELINE.some((s) => s.id === "lost")).toBe(true);
+  });
+
+  test("open means not closed", () => {
+    expect(isOpen({ stage: "proposal" })).toBe(true);
+    expect(isOpen({ stage: "won" })).toBe(false);
+    expect(isOpen({ stage: "lost" })).toBe(false);
+  });
+
+  test("advance and retreat stop at the ends", () => {
+    expect(nextStage("lead")).toBe("qualified");
+    expect(nextStage("proposal")).toBe("won");
+    expect(nextStage("won")).toBeNull();
+    expect(previousStage("qualified")).toBe("lead");
+    expect(previousStage("lead")).toBeNull();
+  });
+
+  test("an unknown stage is rejected, not coerced", () => {
+    expect(isValidStage("proposal")).toBe(true);
+    expect(isValidStage("Proposal")).toBe(false);
+    expect(isValidStage("negotiation")).toBe(false);
+    expect(nextStage("nonsense")).toBeNull();
+  });
+});
+
+describe("groupByStage", () => {
+  test("puts each deal in its column, newest first", () => {
+    const columns = groupByStage([
+      deal({ id: "a", stage: "lead", createdAt: "2026-01-01" }),
+      deal({ id: "b", stage: "lead", createdAt: "2026-03-01" }),
+      deal({ id: "c", stage: "won" }),
+    ]);
+    const lead = columns.find((c) => c.stage.id === "lead");
+    expect(lead?.deals.map((d) => d.id)).toEqual(["b", "a"]);
+    expect(columns.find((c) => c.stage.id === "won")?.deals).toHaveLength(1);
+  });
+
+  test("totals each column", () => {
+    const columns = groupByStage([
+      deal({ id: "a", stage: "lead", value: 1000 }),
+      deal({ id: "b", stage: "lead", value: 250 }),
+    ]);
+    expect(columns.find((c) => c.stage.id === "lead")?.total).toBe(1250);
+  });
+
+  test("a deal with an unknown stage is dropped, not filed under Lead", () => {
+    // Silently reclassifying it would hide a typo behind a plausible board.
+    const columns = groupByStage([deal({ stage: "negotiation" })]);
+    expect(columns.every((c) => c.deals.length === 0)).toBe(true);
+  });
+
+  test("missing or non-numeric values count as zero", () => {
+    expect(sumValue([deal({ value: null }), deal({ value: undefined })])).toBe(0);
+  });
+});
+
+describe("metrics", () => {
+  const book = [
+    deal({ id: "1", stage: "lead", value: 10_000 }),
+    deal({ id: "2", stage: "proposal", value: 20_000 }),
+    deal({ id: "3", stage: "won", value: 30_000 }),
+    deal({ id: "4", stage: "lost", value: 40_000 }),
+  ];
+
+  test("open excludes closed deals", () => {
+    expect(metrics(book).open).toBe(30_000);
+    expect(metrics(book).openCount).toBe(2);
+  });
+
+  test("weighted applies each stage's probability", () => {
+    // 10k * 0.1 + 20k * 0.6
+    expect(metrics(book).weighted).toBe(13_000);
+  });
+
+  test("won and lost are tracked separately", () => {
+    expect(metrics(book).won).toBe(30_000);
+    expect(metrics(book).lost).toBe(40_000);
+  });
+
+  test("win rate is over CLOSED deals only", () => {
+    expect(metrics(book).winRate).toBe(0.5);
+  });
+
+  test("win rate is null before anything closes, not 0%", () => {
+    // 0% and "nothing has closed yet" mean very different things to a sales lead.
+    expect(metrics([deal({ stage: "lead" })]).winRate).toBeNull();
+    expect(percent(null)).toBe("—");
+  });
+
+  test("an empty book is all zeroes, not NaN", () => {
+    expect(metrics([])).toMatchObject({ open: 0, weighted: 0, won: 0, winRate: null });
+  });
+});
+
+describe("money", () => {
+  test("compacts so columns line up in a narrow card", () => {
+    expect(money(1_240_000)).toBe("$1.2M");
+    expect(money(2_000_000)).toBe("$2M");
+    expect(money(48_000)).toBe("$48K");
+    expect(money(9_500)).toBe("$9,500");
+    expect(money(0)).toBe("$0");
+  });
+
+  test("handles nothing and negatives", () => {
+    expect(money(null)).toBe("$0");
+    expect(money(undefined)).toBe("$0");
+    expect(money(-1500)).toBe("-$1,500");
+  });
+});
+
+describe("initials", () => {
+  test("takes first and last for a name", () => {
+    expect(initials("Dana Whitfield")).toBe("DW");
+    expect(initials("Acme Corporation Holdings")).toBe("AH");
+  });
+
+  test("uses the local part of an email", () => {
+    expect(initials("jordan@example.com")).toBe("JO");
+    expect(initials("dana.whitfield@example.com")).toBe("DW");
+  });
+
+  test("degrades rather than throwing", () => {
+    expect(initials("")).toBe("?");
+    expect(initials(null)).toBe("?");
+    expect(initials("   ")).toBe("?");
+  });
+});
+
+describe("accentIndex", () => {
+  test("is stable for the same seed", () => {
+    expect(accentIndex("Acme")).toBe(accentIndex("Acme"));
+  });
+
+  test("stays in range", () => {
+    for (const seed of ["", "a", "Northwind Logistics", "🙂"]) {
+      const index = accentIndex(seed, 6);
+      expect(index).toBeGreaterThanOrEqual(0);
+      expect(index).toBeLessThan(6);
+    }
+  });
+});
+
+describe("relativeTime", () => {
+  const now = Date.parse("2026-07-27T12:00:00Z");
+  const ago = (ms: number) => new Date(now - ms).toISOString();
+
+  test("reads naturally across the ranges", () => {
+    expect(relativeTime(ago(10_000), now)).toBe("just now");
+    expect(relativeTime(ago(5 * 60_000), now)).toBe("5m ago");
+    expect(relativeTime(ago(4 * 3_600_000), now)).toBe("4h ago");
+    expect(relativeTime(ago(3 * 86_400_000), now)).toBe("3d ago");
+  });
+
+  test("falls back to a date beyond a week", () => {
+    expect(relativeTime(ago(30 * 86_400_000), now)).toMatch(/^[A-Z][a-z]{2} \d+$/);
+  });
+
+  test("empty for missing or unparseable input", () => {
+    expect(relativeTime(null, now)).toBe("");
+    expect(relativeTime("not-a-date", now)).toBe("");
+  });
+});
+
+describe("daysUntil", () => {
+  const now = Date.parse("2026-07-27T18:00:00Z");
+
+  test("counts whole days, ignoring the time of day", () => {
+    // A deal closing "tomorrow" shouldn't read as 0 just because it's evening.
+    expect(daysUntil("2026-07-28T02:00:00Z", now)).toBe(1);
+    expect(daysUntil("2026-07-27T23:00:00Z", now)).toBe(0);
+  });
+
+  test("negative when overdue", () => {
+    expect(daysUntil("2026-07-20T12:00:00Z", now)).toBe(-7);
+  });
+
+  test("null when there's no date", () => {
+    expect(daysUntil(null, now)).toBeNull();
+    expect(daysUntil("nope", now)).toBeNull();
+  });
+});

package/templates/crm/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/crm/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/crm/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/default/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 };