makersclaw 0.2.0 → 0.3.0

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

@@ -0,0 +1,525 @@
+"use client";
+
+// RecordForm in each of its shapes — the gallery's and the smoke test's
+// surface. Not installed into apps. Saves are pretend: pick whether they
+// succeed, fail, or come back with a field refused.
+import { useState } from "react";
+import { Button, Field, Item, Select } from "../components/ui";
+import { RecordForm } from "../components/blocks/record-form";
+
+const wait = (ms) => new Promise((r) => setTimeout(r, ms));
+
+const PROFESSIONS = [
+  { value: "design", label: "Product designer" },
+  { value: "frontend", label: "Frontend engineer" },
+  { value: "backend", label: "Backend engineer" },
+  { value: "pm", label: "Product manager" },
+  { value: "data", label: "Data analyst" },
+];
+
+const LANGUAGES = ["English", "German", "French", "Spanish", "Portuguese", "Italian", "Dutch", "Japanese", "Hindi"].map((l) => ({
+  value: l.toLowerCase(),
+  label: l,
+}));
+
+const VARIANTS = {
+  sections: {
+    label: "Profile, in sections",
+    taken: "email",
+    props: {
+      title: "Personal details",
+      description: "What your teammates see on your profile and in mentions.",
+      values: {
+        firstName: "Priya",
+        lastName: "Raman",
+        gender: "female",
+        birthDate: "1991-04-18",
+        profession: "design",
+        email: "priya@larkspur.io",
+        confirmEmail: "priya@larkspur.io",
+        phone: "+44 20 7946 0321",
+        location: "Leeds, United Kingdom",
+        language: "english",
+        callFrom: "10:00",
+      },
+      sections: [
+        {
+          title: "Basic details",
+          fields: [
+            { name: "firstName", label: "First name", required: true, autoComplete: "given-name" },
+            { name: "lastName", label: "Last name", required: true, autoComplete: "family-name" },
+            {
+              name: "gender",
+              label: "Gender",
+              type: "select",
+              options: [
+                { value: "female", label: "Female" },
+                { value: "male", label: "Male" },
+                { value: "other", label: "Another gender" },
+                { value: "unsaid", label: "Rather not say" },
+              ],
+            },
+            { name: "birthDate", label: "Birth date", type: "date", captionLayout: "dropdown", max: "2010-12-31" },
+            { name: "profession", label: "Profession", type: "select", options: PROFESSIONS },
+          ],
+        },
+        {
+          title: "Contact",
+          description: "Only people in your workspace can see these.",
+          fields: [
+            { name: "email", label: "Email", type: "email", required: true, icon: "mail", autoComplete: "email" },
+            { name: "confirmEmail", label: "Confirm email", type: "email", required: true, matches: "email", matchMessage: "The two emails differ." },
+            { name: "phone", label: "Phone", type: "tel", icon: "phone", autoComplete: "tel" },
+            { name: "location", label: "Location", icon: "map", placeholder: "City, country" },
+          ],
+        },
+        {
+          title: "Preferences",
+          fields: [
+            { name: "language", label: "Preferred language", type: "combobox", options: LANGUAGES, placeholder: "Choose a language" },
+            { name: "callFrom", label: "Best time to call", type: "time", help: "In your own time zone." },
+          ],
+        },
+      ],
+    },
+  },
+  product: {
+    label: "Product, in a card",
+    taken: "name",
+    props: {
+      title: "Edit product",
+      description: "Price, category and details for the storefront.",
+      values: { name: "Waxed canvas field jacket", brand: "Northbound", price: "189", category: "outerwear", details: "Dry wax finish, corduroy collar, two bellow pockets. Re-wax once a season." },
+      fields: [
+        { name: "name", label: "Product name", required: true, placeholder: "e.g. Merino crew neck" },
+        { name: "brand", label: "Brand", placeholder: "e.g. Northbound" },
+        { name: "price", label: "Price", type: "number", prefix: "$", min: 0, step: "0.01", required: true },
+        {
+          name: "category",
+          label: "Category",
+          type: "select",
+          required: true,
+          placeholder: "Choose a category",
+          options: [
+            { value: "outerwear", label: "Outerwear" },
+            { value: "tops", label: "Tops" },
+            { value: "bottoms", label: "Bottoms" },
+            { value: "footwear", label: "Footwear" },
+            { value: "accessories", label: "Accessories" },
+          ],
+        },
+        { name: "details", label: "Details", type: "textarea", placeholder: "Material, fit, care…", maxLength: 600 },
+      ],
+      deleteLabel: "Remove product",
+      confirmDelete: { title: "Remove this product?", body: "It leaves the storefront and every open cart." },
+    },
+  },
+  compact: {
+    label: "Account, compact",
+    taken: "username",
+    props: {
+      title: "Sign-in details",
+      columns: 1,
+      values: { username: "tomas.k", email: "tomas@harbourline.co" },
+      fields: [
+        { name: "username", label: "Username", required: true, pattern: "[a-z0-9._-]{3,24}", patternMessage: "3–24 lowercase letters, digits, dots or dashes.", autoComplete: "username" },
+        { name: "email", label: "Email", type: "email", required: true, autoComplete: "email" },
+        { name: "password", label: "New password", type: "password", minLength: 10, help: "At least 10 characters. Leave empty to keep the current one." },
+        { name: "confirm", label: "Confirm new password", type: "password", matches: "password", matchMessage: "The passwords differ." },
+      ],
+    },
+  },
+  photo: {
+    label: "Member, with a photo",
+    taken: "email",
+    props: {
+      title: "Team member",
+      description: "Profile, role and what they can change.",
+      values: {
+        photo: null,
+        firstName: "Marco",
+        lastName: "Bellini",
+        email: "marco@studio-ferro.it",
+        role: "manager",
+        languages: ["italian", "english"],
+        jobTitle: "Store manager",
+        accountType: "pro",
+        permission: "operational",
+        verified: "Verified",
+      },
+      fields: [
+        { name: "photo", label: "Profile photo", type: "photo", help: "PNG or JPG, square works best.", nameFrom: (v) => `${v.firstName ?? ""} ${v.lastName ?? ""}` },
+        { name: "firstName", label: "First name", required: true },
+        { name: "lastName", label: "Last name", required: true },
+        { name: "email", label: "Contact email", type: "email", required: true },
+        {
+          name: "role",
+          label: "Role",
+          type: "select",
+          options: [
+            { value: "stylist", label: "Stylist" },
+            { value: "manager", label: "Store manager" },
+            { value: "lead", label: "Creative lead" },
+          ],
+        },
+        { name: "languages", label: "Languages", type: "tags", options: LANGUAGES, placeholder: "Add a language" },
+        { name: "jobTitle", label: "Job title" },
+        {
+          name: "accountType",
+          label: "Account type",
+          type: "select",
+          options: [
+            { value: "basic", label: "Basic" },
+            { value: "pro", label: "Pro" },
+            { value: "exec", label: "Executive" },
+          ],
+        },
+        {
+          name: "permission",
+          label: "Permission level",
+          type: "select",
+          options: [
+            { value: "admin", label: "Admin" },
+            { value: "operational", label: "Operational" },
+            { value: "viewer", label: "Viewer" },
+          ],
+        },
+        { name: "verified", label: "Email status", type: "static" },
+      ],
+      deleteLabel: "Delete member",
+      confirmDelete: { title: "Delete Marco Bellini?", body: "Their sign-in stops working at once.", requireText: "marco" },
+    },
+  },
+  dialog: {
+    label: "Profile, in a dialog",
+    taken: "name",
+    dialog: "Edit profile",
+    props: {
+      container: "dialog",
+      title: "Edit profile",
+      description: "Update how you appear to your team.",
+      submitLabel: "Update profile",
+      values: { name: "Ines Carvalho", profession: "frontend", stack: ["react", "tailwind"], notify: "email" },
+      fields: [
+        { name: "name", label: "Name", required: true },
+        { name: "profession", label: "I am a", type: "select", options: PROFESSIONS },
+        {
+          name: "stack",
+          label: "Technologies",
+          description: "Pick the ones you work in.",
+          type: "checkboxes",
+          orientation: "horizontal",
+          options: [
+            { value: "react", label: "React" },
+            { value: "next", label: "Next.js" },
+            { value: "tailwind", label: "Tailwind CSS" },
+            { value: "postgres", label: "Postgres" },
+          ],
+        },
+        {
+          name: "notify",
+          label: "Where to reach you",
+          type: "radio",
+          orientation: "horizontal",
+          options: [
+            { value: "email", label: "Email" },
+            { value: "sms", label: "Text message" },
+            { value: "push", label: "Push" },
+          ],
+        },
+      ],
+    },
+  },
+  images: {
+    label: "Product, in a dialog with images",
+    taken: "name",
+    dialog: "Edit product",
+    props: {
+      container: "dialog",
+      title: "Edit product",
+      description: "Photos, price and the words shoppers read.",
+      submitLabel: "Update product",
+      values: {
+        images: [],
+        name: "Ceramic pour-over set",
+        category: "kitchen",
+        price: "64",
+        rating: 4,
+        description: "Hand-thrown stoneware dripper with a matching carafe.",
+        tags: ["coffee", "gift"],
+      },
+      fields: [
+        { name: "images", label: "Photos", type: "images", maxItems: 4, help: "Up to four. The first one leads." },
+        { name: "name", label: "Product name", required: true },
+        {
+          name: "category",
+          label: "Category",
+          type: "select",
+          options: [
+            { value: "kitchen", label: "Kitchen" },
+            { value: "home", label: "Home" },
+            { value: "garden", label: "Garden" },
+          ],
+        },
+        { name: "price", label: "Price", type: "number", prefix: "$", min: 0, required: true },
+        { name: "rating", label: "Quality grade", type: "rating", help: "Shown on the product page." },
+        { name: "description", label: "Description", type: "textarea", rows: 3 },
+        {
+          name: "tags",
+          label: "Tags",
+          type: "tags",
+          maxItems: 10,
+          options: ["coffee", "tea", "gift", "handmade", "sale"].map((t) => ({ value: t, label: t })),
+          help: "Up to ten.",
+        },
+      ],
+    },
+  },
+  split: {
+    label: "Workspace, split sections",
+    taken: "workspace",
+    props: {
+      container: "page",
+      layout: "split",
+      title: "Workspace settings",
+      description: "Your details, the workspace's, and what you are told about.",
+      values: { firstName: "Hana", lastName: "Okafor", email: "hana@quillhouse.com", role: "Operations lead", workspace: "Quill House", visibility: "private", about: "", digest: ["weekly"], mentions: true },
+      sections: [
+        {
+          title: "Personal information",
+          description: "Used on invoices and in the members list.",
+          fields: [
+            { name: "firstName", label: "First name", required: true },
+            { name: "lastName", label: "Last name", required: true },
+            { name: "email", label: "Email", type: "email", required: true, width: "full" },
+            { name: "role", label: "Role", disabled: true, help: "Only an owner can change roles." },
+          ],
+        },
+        {
+          title: "Workspace",
+          description: "How the workspace is named and who can find it.",
+          fields: [
+            { name: "workspace", label: "Workspace name", required: true },
+            {
+              name: "visibility",
+              label: "Visibility",
+              type: "select",
+              options: [
+                { value: "private", label: "Private" },
+                { value: "public", label: "Public" },
+              ],
+            },
+            { name: "about", label: "Description", type: "textarea", help: "Not shown outside the workspace." },
+          ],
+        },
+        {
+          title: "Notifications",
+          description: "Email only; push is set on each device.",
+          fields: [
+            {
+              name: "digest",
+              label: "Digests",
+              type: "checkboxes",
+              options: [
+                { value: "daily", label: "Daily summary", description: "What changed in the last day, at 8:00." },
+                { value: "weekly", label: "Weekly report", description: "Numbers for the week, on Monday." },
+              ],
+            },
+            { name: "mentions", label: "Mentions", type: "switch", description: "Email me when someone mentions me." },
+          ],
+        },
+      ],
+    },
+  },
+  cards: {
+    label: "Early access, choice cards",
+    taken: "email",
+    props: {
+      title: "Apply for early access",
+      description: "Tell us about your team; we answer within two working days.",
+      requireChanges: false,
+      submitLabel: "Apply",
+      values: { plan: "starter" },
+      sections: [
+        {
+          fields: [
+            { name: "firstName", label: "First name", required: true, autoComplete: "given-name" },
+            { name: "lastName", label: "Last name", autoComplete: "family-name" },
+            { name: "email", label: "Work email", type: "email", required: true, autoComplete: "email" },
+            { name: "company", label: "Company", autoComplete: "organization" },
+            { name: "size", label: "Company size", type: "select", placeholder: "Choose a size", options: ["1–9", "10–49", "50–249", "250+"] },
+          ],
+        },
+        {
+          title: "Package",
+          fields: [
+            {
+              name: "plan",
+              label: "Choose a package",
+              type: "choice-cards",
+              required: true,
+              options: [
+                { value: "starter", label: "Starter", description: "Up to 10,000 requests a day.", price: "Free" },
+                { value: "growth", label: "Growth", description: "Up to 500,000 requests a day.", price: "$900", per: "/mo" },
+                { value: "custom", label: "Custom", description: "Sized to what you run.", price: "Let's talk" },
+              ],
+            },
+            { name: "terms", label: "I agree to the early-access terms", type: "checkbox", required: true },
+          ],
+        },
+      ],
+    },
+  },
+  plans: {
+    label: "New workspace, priced plans",
+    taken: "workspace",
+    props: {
+      title: "Create a workspace",
+      values: { org: "fenwick", workspace: "", region: "fra", plan: "team" },
+      requireChanges: false,
+      submitLabel: "Create workspace",
+      sections: [
+        {
+          fields: [
+            {
+              name: "org",
+              label: "Organisation",
+              type: "select",
+              options: [
+                { value: "fenwick", label: "Fenwick & Doyle" },
+                { value: "tidal", label: "Tidal Labs" },
+              ],
+            },
+            { name: "workspace", label: "Workspace name", required: true, minLength: 3 },
+            {
+              name: "region",
+              label: "Region",
+              type: "combobox",
+              required: true,
+              width: "full",
+              options: [
+                { value: "fra", label: "Frankfurt, Germany", description: "eu-central" },
+                { value: "lhr", label: "London, United Kingdom", description: "eu-west" },
+                { value: "iad", label: "Washington, D.C., USA", description: "us-east" },
+                { value: "sfo", label: "San Francisco, USA", description: "us-west" },
+                { value: "sin", label: "Singapore", description: "ap-southeast" },
+              ],
+            },
+          ],
+        },
+        {
+          title: "Plan",
+          fields: [
+            {
+              name: "plan",
+              label: "Plan",
+              type: "choice-cards",
+              options: [
+                { value: "solo", label: "Solo", description: "3 projects, 5 GB.", price: "$15", per: "/mo" },
+                { value: "team", label: "Team", description: "Unlimited projects, 50 GB.", price: "$49", per: "/mo", badge: "Popular" },
+                { value: "agency", label: "Agency", description: "Client portals, 250 GB.", price: "$99", per: "/mo" },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  },
+};
+
+export default function RecordFormDemo() {
+  const [variant, setVariant] = useState("sections");
+  const [outcome, setOutcome] = useState("ok");
+  const [state, setState] = useState("ready");
+  const [open, setOpen] = useState(false);
+  const [saved, setSaved] = useState({});
+  const v = VARIANTS[variant];
+  const values = saved[variant] ?? v.props.values;
+
+  async function onSave(next) {
+    await wait(700);
+    if (outcome === "fail") return { ok: false, error: "The server did not answer. Your changes are still here — try again." };
+    if (outcome === "fields") return { ok: false, errors: { [v.taken]: "That one is already taken." } };
+    setSaved((s) => ({ ...s, [variant]: next }));
+    return { ok: true };
+  }
+
+  async function onDelete() {
+    await wait(700);
+    return outcome === "ok" ? { ok: true } : { ok: false, error: "It could not be removed just now." };
+  }
+
+  const props = {
+    ...v.props,
+    values,
+    onSave,
+    onDelete: v.props.deleteLabel ? onDelete : undefined,
+    loading: state === "loading",
+    error: state === "error" ? "The record could not be read." : undefined,
+    onRetry: () => setState("ready"),
+    sections: state === "empty" ? [] : v.props.sections,
+    fields: state === "empty" ? [] : v.props.fields,
+  };
+
+  return (
+    <div className="grid max-w-3xl gap-4">
+      <div className="grid gap-3 sm:grid-cols-3">
+        <Field id="rf-variant" label="Shape">
+          <Select
+            id="rf-variant"
+            value={variant}
+            onChange={(e) => {
+              setVariant(e.target.value);
+              setOpen(false);
+            }}
+            options={Object.entries(VARIANTS).map(([value, x]) => ({ value, label: x.label }))}
+          />
+        </Field>
+        <Field id="rf-outcome" label="Saving">
+          <Select
+            id="rf-outcome"
+            value={outcome}
+            onChange={(e) => setOutcome(e.target.value)}
+            options={[
+              { value: "ok", label: "Succeeds" },
+              { value: "fields", label: "A field is refused" },
+              { value: "fail", label: "Fails" },
+            ]}
+          />
+        </Field>
+        <Field id="rf-state" label="State">
+          <Select
+            id="rf-state"
+            value={state}
+            onChange={(e) => setState(e.target.value)}
+            options={[
+              { value: "ready", label: "Loaded" },
+              { value: "loading", label: "Loading" },
+              { value: "error", label: "Load failed" },
+              { value: "empty", label: "No fields" },
+            ]}
+          />
+        </Field>
+      </div>
+
+      {v.dialog ? (
+        <div className="grid gap-3">
+          <Item
+            variant="outline"
+            icon={variant === "images" ? "package" : "user"}
+            title={values.name}
+            description={variant === "images" ? `$${values.price} · ${values.category}` : PROFESSIONS.find((p) => p.value === values.profession)?.label}
+            actions={
+              <Button icon="pencil" size="sm" onClick={() => setOpen(true)}>
+                {v.dialog}
+              </Button>
+            }
+          />
+          <RecordForm key={variant} {...props} open={open} onClose={() => setOpen(false)} />
+        </div>
+      ) : (
+        <RecordForm key={variant} {...props} onCancel={variant === "product" ? () => {} : undefined} />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,4 @@
+// The RecordForm block — `makersclaw add record-form`. Fixed: compose it
+// through its props (README.md beside this file); a form it cannot be is
+// your own component in components/, built from the kit's Field parts.
+export { RecordForm } from "./record-form";