makersclaw 0.1.0 → 0.3.0

package/registry/blocks/auth-form/demo.jsx

@@ -0,0 +1,131 @@
+"use client";
+
+// AuthForm, every variant — the gallery's and the smoke test's surface.
+// Not installed into apps: `makersclaw add auth-form` lays index.js and
+// auth-form.jsx only. Nothing signs anyone in: the callbacks wait a
+// moment and answer. Turn on "Fail the next submit" to see the error, or
+// type an email with "taken" in it.
+import { useState } from "react";
+import { Field, Icon, Select, Switch } from "../components/ui";
+import { AuthForm } from "../components/blocks/auth-form";
+
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+
+const Logo = () => (
+  <span className="grid size-10 place-items-center rounded-md bg-primary text-primary-foreground">
+    <Icon name="layers" size={20} />
+  </span>
+);
+
+const ROLES = [
+  { value: "founder", label: "Founder" },
+  { value: "ops", label: "Operations" },
+  { value: "sales", label: "Sales" },
+  { value: "engineering", label: "Engineering" },
+];
+
+const TIPS = [
+  "Use a password manager, and a different password for every account.",
+  "Never share it, not even with someone from our team.",
+  "Turn on two-step sign-in in Security.",
+];
+
+// Each source file is one variant: its props, and the label in the switcher.
+const VARIANTS = [
+  { key: "basic", label: "Sign in — email and password", props: { mode: "sign-in" } },
+  { key: "google", label: "Sign in — then Google", props: { mode: "sign-in", providers: ["google"] } },
+  { key: "email-only", label: "Sign in — email only, Google", props: { mode: "sign-in", password: false, providers: ["google"], title: "Log in or create an account", description: null } },
+  { key: "providers-first", label: "Sign in — providers first", props: { mode: "sign-in", providers: ["github", "google"], providersFirst: true, title: "Sign in to Ledgerly" } },
+  { key: "magic", label: "Magic link, SSO and terms", props: { mode: "magic-link", providers: ["sso"], title: "Welcome back" } },
+  { key: "page", label: "Full page — remember for 30 days", props: { mode: "sign-in", layout: "page", providers: ["google", "apple", "microsoft"], providersFirst: true, remember: "Remember me for 30 days", title: "Welcome back", description: "Sign in to your dashboard, reports and settings." } },
+  { key: "card", label: "Card — reset link and remember me", props: { mode: "sign-in", remember: true, title: "Sign in to Ledgerly" } },
+  { key: "sign-up", label: "Sign up — confirm, news, terms", props: { mode: "sign-up", newsletter: true, acceptTerms: true, title: "Create a Ledgerly account" } },
+  {
+    key: "sign-up-fields",
+    label: "Sign up — more fields and rules",
+    props: {
+      mode: "sign-up",
+      providers: ["github"],
+      rules: [
+        { label: "At least 10 characters", test: (v) => v.length >= 10 },
+        { label: "A number", test: (v) => /\d/.test(v) },
+      ],
+      fields: [
+        { name: "firstName", label: "First name", autoComplete: "given-name", required: true, half: true },
+        { name: "lastName", label: "Last name", autoComplete: "family-name", required: true, half: true },
+        { name: "username", label: "Username", autoComplete: "username", hint: "Shown on your comments. You can change it later." },
+        { name: "role", label: "Your role", type: "select", options: ROLES },
+      ],
+    },
+  },
+  { key: "reset", label: "Reset — email a link", props: { mode: "reset" } },
+  { key: "change", label: "Change password — rules beside", props: { mode: "change-password", tips: TIPS } },
+];
+
+export default function AuthFormDemo() {
+  const [key, setKey] = useState("basic");
+  const [fail, setFail] = useState(false);
+  const [log, setLog] = useState(null);
+  const variant = VARIANTS.find((v) => v.key === key) ?? VARIANTS[0];
+
+  // The links switch variants in place, as an app's routes would.
+  const go = (to) => () => setKey(to);
+  const links = {
+    "sign-up": go("sign-up"),
+    "sign-in": go("basic"),
+    reset: go("reset"),
+    "magic-link": go("magic"),
+    terms: "#terms",
+    privacy: "#privacy",
+  };
+
+  async function onSubmit(values, mode) {
+    await wait(700);
+    const shown = { ...values };
+    for (const k of ["password", "currentPassword", "newPassword"]) if (k in shown) shown[k] = "••••••";
+    if (fail) {
+      setFail(false);
+      return { ok: false, error: mode === "change-password" ? "Your current password is not right." : "We could not reach the server. Check your connection and try again." };
+    }
+    if (values.email?.includes("taken")) return { ok: false, error: `An account already uses ${values.email}. Sign in instead.` };
+    setLog(`${mode}: ${JSON.stringify(shown)}`);
+    return { ok: true };
+  }
+
+  async function onProvider(id) {
+    await wait(600);
+    if (fail) {
+      setFail(false);
+      return { ok: false, error: `The ${id} window closed before you finished. Try again.` };
+    }
+    setLog(`provider: ${id}`);
+    return { ok: true };
+  }
+
+  return (
+    <div className="grid gap-6">
+      <div className="flex flex-wrap items-end gap-x-6 gap-y-2">
+        <Field id="auth-variant" label="Variant" className="w-full sm:w-80">
+          <Select id="auth-variant" value={key} onChange={(e) => setKey(e.target.value)} options={VARIANTS.map((v) => ({ value: v.key, label: v.label }))} />
+        </Field>
+        <Switch id="auth-fail" label="Fail the next submit" checked={fail} onChange={(e) => setFail(e.target.checked)} />
+      </div>
+
+      <div className="grid justify-items-center rounded-lg bg-muted px-4 py-8">
+        <AuthForm
+          key={key}
+          {...variant.props}
+          logo={key === "change" ? undefined : <Logo />}
+          links={links}
+          onSubmit={onSubmit}
+          onProvider={onProvider}
+          onCancel={key === "change" ? () => setLog("change-password: cancelled") : undefined}
+        />
+      </div>
+
+      <p className="min-h-5 break-all text-xs text-muted-foreground" aria-live="polite">
+        {log ? `Sent — ${log}` : "Submit a form to see what the callback receives."}
+      </p>
+    </div>
+  );
+}

package/registry/blocks/auth-form/index.js

@@ -0,0 +1,3 @@
+// The AuthForm block — `makersclaw add auth-form`. Fixed: compose it
+// through its props (README.md beside this file).
+export { AuthForm, PASSWORD_RULES } from "./auth-form";

package/registry/blocks/board/README.md

@@ -7,7 +7,8 @@ saved. The move shows at once; when the write fails the card goes back and
 the board says why.
 
 ```jsx
-import { Board } from "../components/blocks/board";   // "./blocks/board" from components/
+import { Board } from "../components/blocks/board";   // a Makersclaw app ("./blocks/board" from components/)
+import { Board } from "@/components/makersclaw/blocks/board";   // a shadcn project
 ```
 
 It is a client component: render it from a `"use client"` component, and
@@ -26,21 +27,25 @@ record goes missing; it can be dragged out of it, not into it.
   example cards move on screen without saving (they are not rows).
 - `groupBy` — the column that holds the stage, e.g. `"stage"`.
 - `columns` — the stages in order: `["lead", "call", "won"]` (labels are
-  made from the keys) or `[{ key: "lead", label: "New lead" }, …]`.
-- `source` — the table, e.g. `"public.deals"`: a move then saves itself
-  through `moveRow` (lib/actions.js — the activity row included).
-- `onMove(row, to, from)` — instead of `source`, when a move is more than
-  one column: return `{ ok: true }` or `{ ok: false, error }`. Without
-  `source` or `onMove` the board only shows; nothing can be moved.
+  made from the keys) or `[{ key: "lead", label: "New lead", icon? }, …]`.
+  `icon` is a kit `Icon` name, drawn before the stage's label.
+- `onMove(row, to, from)` — save the move; return `{ ok: true }` or
+  `{ ok: false, error }` (a throw counts as failed). In a Makersclaw app it
+  is one line over `moveRow` (lib/actions.js — the activity row included):
+  `onMove={(d, to) => moveRow({ source: "public.deals", id: d.id, stateColumn: "stage", to })}`.
+  Without `onMove` the board only shows; nothing can be moved.
 - `idColumn` — default `"id"`.
 - `titleOf(row)` — the card's title, default `row.title ?? row.name`. It
   also names the card in its menu, in announcements and in errors.
 - `onOpen(row)` — the title becomes a button: open your `Sheet` to edit
   the record. The block draws that button; you never style one.
-- `renderDetails(row, { column })` — what the card says under its title:
-  the part of the board that is yours. Kit parts and tokens only.
+- `renderDetails(row, { column, layout })` — what the card says under its
+  title: the part of the board that is yours. Kit parts and tokens only.
+  In `layout="stacked"` it sits at the row's end instead, so keep it short
+  there (a badge, an avatar); `layout` tells you which.
 - `metaOf(row)` — a plain muted line under the title, when that is all
-  the card needs (ignored when `renderDetails` is set).
+  the card needs (ignored on cards when `renderDetails` is set; a stacked
+  row shows both).
 - `actionsOf(row)` — more menu items for a card, kit `Menu` shape:
   `[{ label, onSelect, icon?, tone?: "danger" }]`. The "Move to" items
   follow them.
@@ -51,6 +56,21 @@ record goes missing; it can be dragged out of it, not into it.
 - `addLabel` · `createPlaceholder` · `emptyLabel` · `otherLabel` — words.
 - `limits` — a work-in-progress limit per stage: `{ doing: 3 }` shows
   `4/3` in the header, in the warning tone, when it is exceeded.
+- `aggregate(rows, column)` — a figure beside each stage's count, from the
+  records in it: ``(list) => `${list.reduce((s, r) => s + r.points, 0)}pt` ``
+  → "13pt". A string or a node; `column` is null for "No stage".
+- `accentOf(row)` — the record's category as a colour on one edge of its
+  card: `1` … `5` (the chart tokens, `chart-1` … `chart-5`), or `null` for
+  none. A category, never a status: show what it means in words too (a
+  legend, or the type on the card).
+- `accentEdge` — `"top"` (default) or `"start"` (the left edge, in a
+  right-to-left page the right). Stacked rows always use the start edge.
+- `layout` — `"columns"` (default: side by side, dragged) or `"stacked"`:
+  the stages one under another as folding sections (icon, label, count,
+  chevron), each record a compact row. Rows move through their menu
+  ("Move to …"); nothing drags, so on a phone the page just scrolls.
+- `defaultOpen` — stacked: the stage keys open at first, e.g.
+  `["todo"]`. Default: every stage open.
 - `label` — what the board is called to a screen reader.
 - `className` — layout around it (width, margin). Never colour.
 
@@ -71,7 +91,7 @@ export default async function PipelineSurface() {
 // components/Pipeline.jsx — client: the board, the card, the edit sheet
 "use client";
 import { useState } from "react";
-import { insertRow } from "../lib/actions";
+import { insertRow, moveRow } from "../lib/actions";
 import { Badge, Notice } from "./ui";
 import { FixtureNotice, useFixture } from "./parts";
 import { Board } from "./blocks/board";
@@ -98,7 +118,7 @@ export default function Pipeline({ deals, error }) {
         rows={fixture.rows}
         groupBy="stage"
         columns={STAGES}
-        source="public.deals"
+        onMove={(d, to) => moveRow({ source: "public.deals", id: d.id, stateColumn: "stage", to })}
         titleOf={(d) => d.name}
         limits={{ proposal: 5 }}
         onCreate={(name, stage) => insertRow({ source: "public.deals", values: { name, stage }, detail: name })}
@@ -117,13 +137,44 @@ export default function Pipeline({ deals, error }) {
 }
 ```
 
+A sprint (icons, points per stage, a top edge by type) and a stacked list:
+
+```jsx
+const TYPE_HUE = { feature: 1, bug: 4, task: 2 };
+
+<Board
+  rows={stories}
+  groupBy="status"
+  columns={[{ key: "todo", label: "To do", icon: "inbox" }, { key: "doing", label: "In progress", icon: "zap" }, { key: "done", label: "Done", icon: "circle-check" }]}
+  onMove={(s, to) => moveRow({ source: "public.stories", id: s.id, stateColumn: "status", to })}
+  aggregate={(list) => `${list.reduce((n, s) => n + (s.points ?? 0), 0)}pt`}
+  accentOf={(s) => TYPE_HUE[s.type] ?? null}
+  renderDetails={(s) => <Badge>{s.points}pt</Badge>}
+  label="Stories by status"
+/>
+
+<Board
+  layout="stacked"
+  rows={chores}
+  groupBy="state"
+  columns={[{ key: "todo", label: "To do", icon: "inbox" }, { key: "done", label: "Done", icon: "circle-check" }]}
+  defaultOpen={["todo"]}
+  onMove={(c, to) => moveRow({ source: "public.chores", id: c.id, stateColumn: "state", to })}
+  metaOf={(c) => c.room}
+  renderDetails={(c) => <Badge tone={c.every === "daily" ? "warning" : "info"}>{c.every}</Badge>}
+  label="Chores by state"
+/>
+```
+
 ## What it will not do
 
 - Order cards inside a column: they keep the order of `rows` — sort in
   the surface's `loadRows`.
 - Create a stage: `columns` is the surface's; a new stage is a new entry.
 - Colour a column: stages are not status. Put a `Badge` on the card when a
-  stage means something the founder must see.
+  stage means something the founder must see. (`accentOf` colours a card
+  by its category, not its stage.)
+- Drag in `layout="stacked"`: rows move from their menu.
 
 A board it cannot be is your own component in `components/`, built from
 the kit — not an edit to this block. Its files are fixed: `npm run check`

package/registry/blocks/board/block.json

@@ -1,9 +1,9 @@
 {
   "name": "board",
   "title": "Board",
-  "description": "Records as cards in columns, one per stage; drag a card to another column (mouse, touch, or the card's menu from the keyboard) and the stage is saved.",
+  "description": "Records as cards in columns, one per stage; drag a card to another column (mouse, touch, or the card's menu from the keyboard) and the stage is saved. Optional column icons, a per-column total (\"13pt\"), a category colour on each card's edge, and a stacked layout of folding sections with compact rows.",
   "useWhen": "A process where each record sits in one stage and moves forward: a pipeline, a hiring funnel, a sprint, a content calendar by status, outreach by reply state. Not for records with no stages (a table) or items placed on a timeline.",
-  "tags": ["board", "kanban", "pipeline", "stages", "columns", "cards", "drag", "drop", "status", "workflow", "funnel"],
+  "tags": ["board", "kanban", "pipeline", "stages", "columns", "cards", "drag", "drop", "status", "workflow", "funnel", "sprint", "accent", "stacked", "collapsible"],
   "exports": ["Board"],
   "files": ["index.js", "board.jsx"],
   "requires": []