makersclaw 0.1.0 → 0.3.0

package/registry/blocks/sidebar/demo.jsx

@@ -0,0 +1,577 @@
+"use client";
+
+// The Sidebar with a page beside it, state in memory — the gallery's and
+// the smoke test's surface. Not installed into apps: `makersclaw add
+// sidebar` lays index.js, sidebar.jsx and sidebar-panel.jsx only. Items
+// use onSelect here so the gallery frame never navigates; an app passes
+// `href`. The switcher at the top shows each shape the block takes:
+// today's column, inset, floating, ⌘K search with folding groups, a mail
+// panel, drill-in (a column, or in place) and a chat history with menus.
+import { useState } from "react";
+import { Avatar, Badge, Card, Field, Icon, Menu, Progress, Select, ToggleGroup, toast } from "../components/ui";
+import { Sidebar, SidebarLayout, SidebarTrigger } from "../components/blocks/sidebar";
+
+const VARIANTS = [
+  { value: "default", label: "Column (default)" },
+  { value: "inset", label: "Inset" },
+  { value: "floating", label: "Floating" },
+  { value: "search", label: "⌘K search + folding groups" },
+  { value: "panel", label: "Mail panel" },
+  { value: "drill-panel", label: "Drill-in: second column" },
+  { value: "drill-replace", label: "Drill-in: in place" },
+  { value: "chat", label: "Chat history with menus" },
+];
+
+const PAGES = {
+  inbox: { title: "Inbox", blurb: "Replies and new leads waiting on you." },
+  deals: { title: "Deals", blurb: "Everything open in the pipeline." },
+  contacts: { title: "Contacts", blurb: "People at the companies you sell to." },
+  reports: { title: "Reports", blurb: "How the quarter is going." },
+  settings: { title: "Settings", blurb: "Your workspace, team and billing." },
+  "p-renewals": { title: "Q3 renewals", blurb: "Accounts up for renewal before October." },
+  "p-expansion": { title: "Northwind expansion", blurb: "Three new teams at Northwind." },
+  "p-partners": { title: "Partner launch", blurb: "Co-selling with two agencies." },
+};
+
+const THREADS = [
+  { from: "Maya Okafor", company: "Northwind", line: "Can we move the call to Thursday?", when: "9:12" },
+  { from: "Leon Brandt", company: "Acme Ltd", line: "Signed copy attached, thanks!", when: "8:40" },
+  { from: "Priya Raman", company: "Globex", line: "Who owns onboarding on your side?", when: "Yesterday" },
+  { from: "Tom Ellery", company: "Initech", line: "Pricing for 40 seats, please.", when: "Mon" },
+];
+
+const ME = { name: "Dana Whitfield", email: "dana@harbor.io" };
+const USER_MENU = [
+  { label: "Account", icon: "user", onSelect: () => toast("Account opened") },
+  { label: "Notifications", icon: "bell", onSelect: () => toast("Notifications opened") },
+  { label: "Sign out", icon: "log-out", tone: "danger", onSelect: () => toast("Signed out") },
+];
+
+export default function SidebarDemo() {
+  const [variant, setVariant] = useState("default");
+  const Shape = SHAPES[variant] ?? DefaultShape;
+  return (
+    <div className="grid gap-3">
+      <Field id="sidebar-demo-variant" label="Shape" className="max-w-xs">
+        <Select id="sidebar-demo-variant" value={variant} onChange={(e) => setVariant(e.target.value)} options={VARIANTS} />
+      </Field>
+      <Shape key={variant} />
+    </div>
+  );
+}
+
+// ─── the page beside the sidebar ─────────────────────────────────────────
+
+function Header({ title }) {
+  return (
+    <header className="flex min-h-14 items-center gap-2 border-b border-border px-2 sm:px-4">
+      <SidebarTrigger />
+      <div className="min-w-0">
+        <h1 className="truncate text-base font-semibold">{title}</h1>
+      </div>
+    </header>
+  );
+}
+
+function SimplePage({ title, blurb, children }) {
+  return (
+    <>
+      <Header title={title} />
+      <div className="grid flex-1 grid-cols-1 content-start gap-4 p-4 sm:p-6">
+        {blurb ? <p className="text-sm text-muted-foreground">{blurb}</p> : null}
+        {children}
+      </div>
+    </>
+  );
+}
+
+function CrmPage({ page }) {
+  const current = PAGES[page] ?? { title: page, blurb: "" };
+  return (
+    <SimplePage title={current.title} blurb={current.blurb}>
+      <div className="grid gap-3 sm:grid-cols-3">
+        <Card>
+          <p className="text-xs text-muted-foreground">Open deals</p>
+          <p data-nums className="mt-1 text-2xl font-semibold">38</p>
+        </Card>
+        <Card>
+          <p className="text-xs text-muted-foreground">Pipeline</p>
+          <p data-nums className="mt-1 text-2xl font-semibold">$1.24M</p>
+        </Card>
+        <Card>
+          <p className="text-xs text-muted-foreground">Won this month</p>
+          <p data-nums className="mt-1 text-2xl font-semibold">$86k</p>
+        </Card>
+      </div>
+      <Card title="Latest">
+        <ul className="divide-y divide-border">
+          {THREADS.map((t) => (
+            <li key={t.from} className="flex items-center gap-3 py-3">
+              <Avatar name={t.from} size="sm" />
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm font-medium">
+                  {t.from} <span className="font-normal text-muted-foreground">· {t.company}</span>
+                </p>
+                <p className="truncate text-sm text-muted-foreground">{t.line}</p>
+              </div>
+              <Badge className="shrink-0">{t.when}</Badge>
+            </li>
+          ))}
+        </ul>
+      </Card>
+    </SimplePage>
+  );
+}
+
+// ─── the CRM nav most shapes share ───────────────────────────────────────
+
+function useCrmNav() {
+  const [page, setPage] = useState("inbox");
+  const [workspace, setWorkspace] = useState("Harbor Sales");
+  const item = (key, label, icon, extra) => ({ key, label, icon, active: page === key, onSelect: () => setPage(key), ...extra });
+  const groups = [
+    {
+      label: "Workspace",
+      items: [
+        item("inbox", "Inbox", "inbox", { badge: 12 }),
+        item("deals", "Deals", "dollar", { badge: 4 }),
+        item("contacts", "Contacts", "users"),
+        item("reports", "Reports", "chart"),
+      ],
+    },
+    {
+      label: "Projects",
+      items: [
+        {
+          key: "projects",
+          label: "Projects",
+          icon: "folder",
+          badge: 3,
+          items: [item("p-renewals", "Q3 renewals"), item("p-expansion", "Northwind expansion"), item("p-partners", "Partner launch")],
+        },
+      ],
+    },
+    { items: [item("settings", "Settings", "settings")] },
+  ];
+  const switcher = ["Harbor Sales", "Harbor Support", "Personal"].map((name) => ({
+    label: name,
+    icon: name === workspace ? "check" : undefined,
+    onSelect: () => setWorkspace(name),
+  }));
+  return { page, setPage, workspace, groups, switcher };
+}
+
+const TARGET = (
+  <div className="mt-2 rounded-md border border-border bg-card p-3">
+    <Progress value={64} label="Q3 target" valueText="$412k of $640k" />
+  </div>
+);
+
+// 1. Today's sidebar, unchanged.
+function DefaultShape() {
+  const { page, workspace, groups, switcher } = useCrmNav();
+  return (
+    <SidebarLayout
+      storageKey="demo.sidebar"
+      className="min-h-[600px] overflow-hidden rounded-lg border border-border"
+      sidebar={
+        <Sidebar title={workspace} subtitle="Pro plan" switcher={switcher} groups={groups} user={ME} userMenu={USER_MENU}>
+          {TARGET}
+        </Sidebar>
+      }
+    >
+      <CrmPage page={page} />
+    </SidebarLayout>
+  );
+}
+
+const NOTICES = [
+  { who: "Maya Okafor", what: "replied to Renewal terms", when: "4m" },
+  { who: "Leon Brandt", what: "signed the Acme order form", when: "1h" },
+  { who: "Priya Raman", what: "booked a call for Thursday", when: "3h" },
+];
+
+function Bell() {
+  return (
+    <Menu
+      label="Notifications, 3 new"
+      trigger={<BellIcon />}
+      items={[
+        { type: "label", label: "Recent" },
+        ...NOTICES.map((n) => ({ label: n.who, description: `${n.what} · ${n.when}`, icon: "user", onSelect: () => toast(`Opened ${n.who}`) })),
+        { type: "separator" },
+        { label: "See all notifications", icon: "bell", onSelect: () => toast("All notifications") },
+      ]}
+    />
+  );
+}
+
+function BellIcon() {
+  return (
+    <span className="relative inline-flex">
+      <Icon name="bell" />
+      <span aria-hidden="true" className="absolute -right-0.5 -top-0.5 size-1.5 rounded-full bg-primary" />
+    </span>
+  );
+}
+
+// 2 & 3. Inset and floating: the bell in the header, the switcher at the foot.
+function FramedShape({ variant }) {
+  const { page, workspace, groups, switcher } = useCrmNav();
+  return (
+    <SidebarLayout
+      storageKey="demo.sidebar"
+      className="min-h-[600px] overflow-hidden rounded-lg border border-border"
+      sidebar={
+        <Sidebar
+          variant={variant}
+          title={workspace}
+          subtitle="Pro plan"
+          switcher={switcher}
+          switcherPlacement="footer"
+          headerActions={<Bell />}
+          groups={groups}
+          user={ME}
+          userMenu={USER_MENU}
+        />
+      }
+    >
+      <CrmPage page={page} />
+    </SidebarLayout>
+  );
+}
+
+// 4. ⌘K search, folding groups with colour dots, and a "+" in the foot.
+function SearchShape() {
+  const [page, setPage] = useState("home");
+  const item = (key, label, extra) => ({ key, label, active: page === key, onSelect: () => setPage(key), ...extra });
+  const groups = [
+    {
+      items: [
+        item("home", "Home", { icon: "home" }),
+        item("inbox", "Inbox", { icon: "inbox", badge: 5 }),
+        item("tasks", "My tasks", { icon: "check-circle" }),
+      ],
+    },
+    {
+      label: "Favorites",
+      collapsible: true,
+      items: [
+        item("fav-northwind", "Northwind renewal", { hue: 1 }),
+        item("fav-board", "Board deck, Q3", { hue: 2 }),
+        item("fav-hiring", "Hiring plan", { hue: 3 }),
+      ],
+    },
+    {
+      label: "Teams",
+      collapsible: true,
+      defaultOpen: false,
+      items: [
+        item("team-sales", "Sales", { icon: "dollar" }),
+        item("team-success", "Customer success", { icon: "life-buoy" }),
+        item("team-ops", "Revenue ops", { icon: "settings" }),
+      ],
+    },
+    {
+      label: "Topics",
+      collapsible: true,
+      items: [item("topic-pricing", "Pricing", { icon: "tag" }), item("topic-churn", "Churn", { icon: "trending-down" })],
+    },
+  ];
+  const label = groups.flatMap((g) => g.items).find((i) => i.key === page)?.label ?? "Home";
+  return (
+    <SidebarLayout
+      storageKey="demo.sidebar"
+      className="min-h-[600px] overflow-hidden rounded-lg border border-border"
+      sidebar={
+        <Sidebar
+          title="Harbor"
+          subtitle="Team plan"
+          search={{ placeholder: "Search…", hotkey: "k" }}
+          groups={groups}
+          user={ME}
+          userMenu={USER_MENU}
+          footerActions={[
+            { label: "New deal", icon: "dollar", onSelect: () => toast("New deal started") },
+            { label: "New contact", icon: "user-plus", onSelect: () => toast("New contact started") },
+            { label: "Invite a teammate", icon: "mail", onSelect: () => toast("Invite opened") },
+          ]}
+        />
+      }
+    >
+      <SimplePage title={label} blurb="Press ⌘K (Ctrl+K) or the search row to jump anywhere; the group headings fold." />
+    </SidebarLayout>
+  );
+}
+
+// 5. A mail app: a narrow nav, and the chosen folder's mails beside it.
+const MAILS = [
+  { key: "m1", folder: "inbox", title: "Maya Okafor", subtitle: "Renewal terms for Northwind", description: "Legal came back with two small changes to the auto-renew clause. Can we take them on Thursday's call?", meta: "09:12" },
+  { key: "m2", folder: "inbox", title: "Leon Brandt", subtitle: "Signed order form", description: "Attached is the countersigned copy. Our finance team will send the PO next week.", meta: "08:40" },
+  { key: "m3", folder: "inbox", title: "Priya Raman", subtitle: "Onboarding owner?", description: "Who on your side runs onboarding? I'd like to get our admins set up before the kickoff.", meta: "Tue" },
+  { key: "m4", folder: "inbox", title: "Tom Ellery", subtitle: "Quote for 40 seats", description: "Could you send pricing for 40 seats on the annual plan, with SSO included?", meta: "Mon" },
+  { key: "m5", folder: "drafts", title: "To: Globex team", subtitle: "Kickoff agenda", description: "Proposed agenda for the kickoff: goals, data import, first workflow, open questions.", meta: "Mon" },
+  { key: "m6", folder: "sent", title: "To: Maya Okafor", subtitle: "Re: Renewal terms", description: "Thanks Maya, Thursday works. I'll bring the redline.", meta: "Sep 18" },
+  { key: "m7", folder: "sent", title: "To: Leon Brandt", subtitle: "Order form", description: "Here is the order form for the Acme expansion, ready to sign.", meta: "Sep 16" },
+];
+
+function PanelShape() {
+  const [folder, setFolder] = useState("inbox");
+  const [open, setOpen] = useState("m1");
+  const [state, setState] = useState("data");
+  const folders = [
+    ["inbox", "Inbox", "inbox"],
+    ["drafts", "Drafts", "file"],
+    ["sent", "Sent", "send"],
+    ["archive", "Archive", "archive"],
+    ["trash", "Trash", "trash"],
+  ];
+  const groups = [
+    {
+      items: folders.map(([key, label, icon]) => ({
+        key,
+        label,
+        icon,
+        active: folder === key,
+        badge: key === "inbox" ? 4 : undefined,
+        onSelect: () => setFolder(key),
+      })),
+    },
+    {
+      label: "Labels",
+      items: [
+        { key: "l-customers", label: "Customers", hue: 1, onSelect: () => toast("Label: Customers") },
+        { key: "l-partners", label: "Partners", hue: 2, onSelect: () => toast("Label: Partners") },
+        { key: "l-hiring", label: "Hiring", hue: 4, onSelect: () => toast("Label: Hiring") },
+      ],
+    },
+  ];
+  const mails = MAILS.filter((m) => m.folder === folder).map((m) => ({ ...m, active: m.key === open, onSelect: () => setOpen(m.key) }));
+  const mail = MAILS.find((m) => m.key === open);
+  const title = folders.find((f) => f[0] === folder)[1];
+  return (
+    <div className="grid gap-3">
+      <ToggleGroup
+        size="sm"
+        aria-label="List state"
+        value={state}
+        onChange={setState}
+        items={[
+          { value: "data", label: "Mail" },
+          { value: "loading", label: "Loading" },
+          { value: "error", label: "Error" },
+        ]}
+      />
+      <SidebarLayout
+        storageKey="demo.sidebar.mail"
+        className="min-h-[600px] overflow-hidden rounded-lg border border-border"
+        sidebar={
+          <Sidebar
+            title="Harbor Mail"
+            subtitle="dana@harbor.io"
+            groups={groups}
+            user={ME}
+            userMenu={USER_MENU}
+            panel={{
+              title,
+              search: { placeholder: "Search mail" },
+              items: state === "data" ? mails : [],
+              loading: state === "loading",
+              error: state === "error" ? "Mail didn't load. Check your connection." : undefined,
+              onRetry: () => setState("data"),
+              empty: `No mail in ${title}`,
+            }}
+          />
+        }
+      >
+        <SimplePage title={mail ? mail.subtitle : title}>
+          {mail ? (
+            <Card>
+              <p className="text-sm font-medium">{mail.title}</p>
+              <p className="mt-2 text-sm text-muted-foreground">{mail.description}</p>
+            </Card>
+          ) : (
+            <p className="text-sm text-muted-foreground">Choose a message.</p>
+          )}
+        </SimplePage>
+      </SidebarLayout>
+    </div>
+  );
+}
+
+// 6 & 7. Drill-in: a parent's children (each with a line saying what it
+// is) open in a second column, or in place of the list.
+const SECTIONS = [
+  {
+    key: "overview",
+    label: "Overview",
+    icon: "home",
+    children: [
+      ["dashboard", "Dashboard", "chart", "The quarter at a glance"],
+      ["activity", "Activity", "history", "Calls, emails and meetings"],
+      ["insights", "Insights", "lightbulb", "Where deals stall and why"],
+    ],
+  },
+  {
+    key: "pipeline",
+    label: "Pipeline",
+    icon: "dollar",
+    badge: 12,
+    children: [
+      ["open", "Open deals", "dollar", "Everything still in play"],
+      ["won", "Won", "check-circle", "Closed this quarter"],
+      ["lost", "Lost", "circle-x", "With the reason recorded"],
+    ],
+  },
+  {
+    key: "people",
+    label: "People",
+    icon: "users",
+    children: [
+      ["contacts", "Contacts", "user", "Everyone you talk to"],
+      ["companies", "Companies", "building", "Accounts and their teams"],
+      ["lists", "Lists", "list", "Saved segments for outreach"],
+    ],
+  },
+  {
+    key: "admin",
+    label: "Workspace",
+    icon: "settings",
+    children: [
+      ["members", "Members", "user-plus", "Who has access, and what role"],
+      ["billing", "Billing", "credit-card", "Plan, invoices and seats"],
+      ["security", "Security", "shield", "Sign-in rules and audit log"],
+    ],
+  },
+];
+
+function DrillShape({ drilldown }) {
+  const [page, setPage] = useState("dashboard");
+  const [workspace, setWorkspace] = useState("Harbor Sales");
+  const items = SECTIONS.map((s) => ({
+    key: s.key,
+    label: s.label,
+    icon: s.icon,
+    badge: s.badge,
+    items: s.children.map(([key, label, icon, description]) => ({ key, label, icon, description, active: page === key, onSelect: () => setPage(key) })),
+  }));
+  const current = SECTIONS.flatMap((s) => s.children).find((c) => c[0] === page);
+  return (
+    <SidebarLayout
+      storageKey="demo.sidebar"
+      className="min-h-[600px] overflow-hidden rounded-lg border border-border"
+      sidebar={
+        <Sidebar
+          title={workspace}
+          subtitle="Pro plan"
+          drilldown={drilldown}
+          switcher={["Harbor Sales", "Harbor Support"].map((name) => ({ label: name, icon: name === workspace ? "check" : undefined, onSelect: () => setWorkspace(name) }))}
+          items={items}
+          user={ME}
+          userMenu={USER_MENU}
+        />
+      }
+    >
+      <SimplePage title={current?.[1] ?? "Home"} blurb={current?.[3]} />
+    </SidebarLayout>
+  );
+}
+
+// 8. A chat history: "New chat" above, threads by day, a "…" per thread.
+// Archive fails on purpose (returns { ok: false }), so the error shows.
+const CHATS = [
+  { id: "c1", title: "Renewal email for Northwind", when: "pinned" },
+  { id: "c2", title: "Q3 forecast summary", when: "pinned" },
+  { id: "c3", title: "Objections from the Globex call", when: "today" },
+  { id: "c4", title: "Draft: pricing page FAQ", when: "today" },
+  { id: "c5", title: "Onboarding checklist for Acme", when: "yesterday" },
+  { id: "c6", title: "Compare CRM import options", when: "week" },
+  { id: "c7", title: "Board update, September", when: "week" },
+];
+const DAYS = [
+  ["pinned", "Pinned"],
+  ["today", "Today"],
+  ["yesterday", "Yesterday"],
+  ["week", "Previous 7 days"],
+];
+
+function ChatShape() {
+  const [chats, setChats] = useState(CHATS);
+  const [active, setActive] = useState("c3");
+  const pause = () => new Promise((r) => setTimeout(r, 400));
+  const actionsFor = (chat) => [
+    {
+      label: chat.when === "pinned" ? "Unpin" : "Pin",
+      icon: "pin",
+      onSelect: () => setChats((all) => all.map((c) => (c.id === chat.id ? { ...c, when: c.when === "pinned" ? "today" : "pinned" } : c))),
+    },
+    { label: "Rename", icon: "pencil", onSelect: () => toast(`Rename "${chat.title}"`) },
+    { label: "Share", icon: "share", onSelect: () => toast("Link copied") },
+    {
+      label: "Archive",
+      icon: "archive",
+      onSelect: async () => {
+        await pause();
+        return { ok: false, error: "Couldn't archive: the server said no. Try again." };
+      },
+    },
+    { type: "separator" },
+    {
+      label: "Delete",
+      icon: "trash",
+      tone: "danger",
+      onSelect: async () => {
+        await pause();
+        setChats((all) => all.filter((c) => c.id !== chat.id));
+        toast("Chat deleted");
+        return { ok: true };
+      },
+    },
+  ];
+  const groups = DAYS.map(([when, label]) => ({
+    key: when,
+    label,
+    items: chats
+      .filter((c) => c.when === when)
+      .map((c) => ({ key: c.id, label: c.title, active: active === c.id, onSelect: () => setActive(c.id), actions: actionsFor(c) })),
+  }));
+  const current = chats.find((c) => c.id === active);
+  return (
+    <SidebarLayout
+      storageKey="demo.sidebar"
+      className="min-h-[600px] overflow-hidden rounded-lg border border-border"
+      sidebar={
+        <Sidebar
+          title="Harbor Assistant"
+          subtitle="Pro plan"
+          primaryAction={{
+            label: "New chat",
+            icon: "plus",
+            onSelect: () => {
+              const id = `c${Date.now()}`;
+              setChats((all) => [{ id, title: "New chat", when: "today" }, ...all]);
+              setActive(id);
+            },
+          }}
+          search={{ placeholder: "Search chats", label: "Search chats" }}
+          groups={groups}
+          user={ME}
+          userMenu={USER_MENU}
+        />
+      }
+    >
+      <SimplePage title={current?.title ?? "New chat"} blurb="Hover a thread for its menu (always shown on a touch screen). Archive fails on purpose." />
+    </SidebarLayout>
+  );
+}
+
+const SHAPES = {
+  default: DefaultShape,
+  inset: () => <FramedShape variant="inset" />,
+  floating: () => <FramedShape variant="floating" />,
+  search: SearchShape,
+  panel: PanelShape,
+  "drill-panel": () => <DrillShape drilldown="panel" />,
+  "drill-replace": () => <DrillShape drilldown="replace" />,
+  chat: ChatShape,
+};

package/registry/blocks/sidebar/index.js

@@ -0,0 +1,4 @@
+// The Sidebar block — `makersclaw add sidebar`. Fixed: compose it through
+// its props (README.md beside this file); a sidebar it cannot be is your
+// own component in components/.
+export { Sidebar, SidebarLayout, SidebarTrigger, useSidebar } from "./sidebar";