makersclaw 0.2.0 → 0.3.0

package/registry/blocks/csv-import/demo.jsx

@@ -0,0 +1,106 @@
+"use client";
+
+// CsvImport into a contacts table, and into a new table — the gallery's
+// and the smoke test's surface. Not installed into apps.
+import { useState } from "react";
+import { Button, Switch, ToggleGroup, toast } from "../components/ui";
+import { CsvImport } from "../components/blocks/csv-import";
+
+const TEAM = [
+  { id: "u-maya", name: "Maya Okafor", email: "maya@northpeak.io" },
+  { id: "u-leon", name: "Leon Brandt", email: "leon@northpeak.io" },
+  { id: "u-priya", name: "Priya Raman", email: "priya@northpeak.io" },
+];
+
+const CONTACT_FIELDS = [
+  { key: "name", name: "Name", type: "text", required: true },
+  { key: "email", name: "Email", type: "text", required: true },
+  { key: "company", name: "Company", type: "text" },
+  {
+    key: "stage",
+    name: "Stage",
+    type: "select",
+    options: [
+      { value: "lead", label: "Lead", hue: 2 },
+      { value: "customer", label: "Customer", hue: 1 },
+      { value: "churned", label: "Churned", hue: 5 },
+    ],
+  },
+  { key: "mrr", name: "MRR", type: "currency", precision: 0 },
+  { key: "owner", name: "Owner", type: "person" },
+  { key: "since", name: "Customer since", type: "date" },
+  { key: "newsletter", name: "Newsletter", type: "checkbox" },
+];
+
+// What a person might export from an old CRM: other column names, a
+// money column with symbols, two dates that do not parse, a missing email.
+const CRM_EXPORT = `Full name,E-mail address,Organization,Status,Monthly revenue,Account owner,Customer since,Subscribed
+Ada Brennan,ada@harborlabs.com,Harbor Labs,Customer,"$1,250",Maya Okafor,2025-03-14,yes
+Kofi Mensah,kofi@summitfreight.com,Summit Freight,Lead,,Leon,,no
+Ruth Adeyemi,ruth@cedarhealth.org,Cedar Health,Customer,$840,Priya Raman,11/02/2024,yes
+Oskar Lind,oskar@atlasdental.se,Atlas Dental,Churned,$0,Maya,last spring,no
+Lucía Romero,,Nova Media,Lead,,Leon Brandt,,yes
+Grace Chen,grace@pineanalytics.io,Pine Analytics,Trial,$99,Priya,2026-08-30,yes
+Noah Whitfield,noah@ironrobotics.com,Iron Robotics,Customer,"$2,400",Maya Okafor,2023-12-01,no
+Hana Sato,hana@lumenstudio.jp,Lumen Studio,Customer,$560,Leon,soon,yes`;
+
+export default function CsvImportDemo() {
+  const [mode, setMode] = useState("into");
+  const [failing, setFailing] = useState(false);
+  const [run, setRun] = useState(0);
+  const [text, setText] = useState(null);
+
+  async function onImport({ rows, columns, skipped }) {
+    await new Promise((r) => setTimeout(r, 700));
+    if (failing) return { ok: false, error: "The database is busy. Nothing was saved — try again in a moment." };
+    toast.success(`Saved ${rows.length} rows into ${columns.length} fields${skipped ? `, ${skipped} left out` : ""}`);
+    return { ok: true };
+  }
+
+  return (
+    <div className="grid gap-6">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <ToggleGroup
+          size="sm"
+          aria-label="Import into"
+          value={mode}
+          onChange={(v) => {
+            setMode(v);
+            setText(null);
+            setRun((n) => n + 1);
+          }}
+          items={[
+            { value: "into", label: "Into contacts" },
+            { value: "new", label: "As a new table" },
+          ]}
+        />
+        <div className="flex flex-wrap items-center gap-3">
+          <Switch id="csv-demo-fail" label="Import fails" checked={failing} onChange={(e) => setFailing(e.target.checked)} />
+          <Button
+            size="sm"
+            icon="file"
+            onClick={() => {
+              setText(CRM_EXPORT);
+              setRun((n) => n + 1);
+            }}
+          >
+            Use an example export
+          </Button>
+        </div>
+      </div>
+      <CsvImport
+        key={`${mode}-${run}`}
+        fields={mode === "into" ? CONTACT_FIELDS : undefined}
+        noun="contact"
+        people={TEAM}
+        today="2026-09-23"
+        locale="en-US"
+        example={{ name: "Ada Brennan", email: "ada@harborlabs.com", company: "Harbor Labs", stage: "Customer", mrr: "1250", owner: "Maya Okafor", since: "2025-03-14", newsletter: "yes" }}
+        initialText={text ?? undefined}
+        initialName="crm-export.csv"
+        onImport={onImport}
+        onDone={() => toast("This is where the app shows the contacts")}
+      />
+    </div>
+  );
+}

package/registry/blocks/csv-import/import.js

@@ -0,0 +1,200 @@
+// csv-import's pure helpers: read CSV text (papaparse), name the file's
+// columns, match them to fields, guess types for a new table, and turn
+// the text rows into typed rows with their problems. No React: they run
+// on the server and in a test. The column types — how "$1,250" becomes
+// 1250, "9/23/2026" a date — are the spreadsheet's registry.
+import Papa from "papaparse";
+import { guessType, optionValue, parseCell, typeOf } from "../spreadsheet";
+
+/**
+ * CSV (or TSV, or ; separated) text → { data: string[][], delimiter,
+ * errors }. The separator is guessed; blank lines are dropped; a byte-
+ * order mark is removed. Quoted cells may hold commas and newlines.
+ */
+export function parseCsvText(text) {
+  const clean = String(text ?? "").replace(/^/, "");
+  const res = Papa.parse(clean, { skipEmptyLines: "greedy", delimitersToGuess: [",", "\t", ";", "|"] });
+  const data = res.data.map((row) => row.map((c) => (typeof c === "string" ? c : String(c ?? ""))));
+  // Papa reports a short or long row as an error; those rows are still
+  // read (short ones padded later), so only a real failure is kept.
+  const errors = res.errors.filter((e) => e.type !== "FieldMismatch" && e.code !== "UndetectableDelimiter");
+  return { data, delimiter: res.meta.delimiter, errors };
+}
+
+/** Read a File as text and parse it. */
+export async function readCsvFile(file) {
+  const text = await file.text();
+  return parseCsvText(text);
+}
+
+/** The file's column names: the first row's cells, or "Column 1"…;
+ *  blanks get a name and repeats a number, so every name is unique. */
+export function headersOf(data, hasHeader = true) {
+  const width = Math.max(0, ...data.slice(0, 200).map((r) => r.length));
+  const first = hasHeader ? data[0] ?? [] : [];
+  const seen = new Map();
+  return Array.from({ length: width }, (_, i) => {
+    let name = String(first[i] ?? "").trim() || `Column ${i + 1}`;
+    const n = seen.get(name.toLowerCase()) ?? 0;
+    seen.set(name.toLowerCase(), n + 1);
+    if (n) name = `${name} ${n + 1}`;
+    return name;
+  });
+}
+
+const norm = (s) =>
+  String(s ?? "")
+    .toLowerCase()
+    .normalize("NFD")
+    .replace(/[̀-ͯ]/g, "")
+    .replace(/[^a-z0-9]/g, "");
+
+// Names that mean the same field, compared normalised.
+const SAME = [
+  ["email", "emailaddress", "mail", "workemail"],
+  ["phone", "phonenumber", "telephone", "tel", "mobile", "cell"],
+  ["company", "companyname", "organization", "organisation", "account", "accountname", "business"],
+  ["name", "fullname", "contact", "contactname", "person"],
+  ["firstname", "first", "givenname"],
+  ["lastname", "last", "surname", "familyname"],
+  ["website", "url", "site", "domain", "web", "homepage"],
+  ["amount", "value", "dealvalue", "price", "total"],
+  ["owner", "assignee", "assignedto", "rep", "salesrep"],
+  ["status", "stage", "state"],
+  ["date", "closedate", "duedate"],
+  ["notes", "note", "comments", "description"],
+  ["tags", "labels", "segments", "categories"],
+];
+
+function score(header, field) {
+  const h = norm(header);
+  const n = norm(field.name);
+  const k = norm(field.key);
+  if (!h) return 0;
+  if (h === n || h === k) return 100;
+  const group = SAME.find((g) => g.includes(h));
+  if (group && (group.includes(n) || group.includes(k))) return 80;
+  if (n.length >= 3 && (h.includes(n) || n.includes(h))) return 60;
+  if (k.length >= 3 && (h.includes(k) || k.includes(h))) return 50;
+  return 0;
+}
+
+/** Each file column → the field it most likely fills (a key, or null to
+ *  skip). Best matches first; a field is used once. */
+export function autoMatch(headers, fields) {
+  const pairs = [];
+  headers.forEach((h, i) =>
+    fields.forEach((f) => {
+      if (f.readOnly || f.computed) return;
+      const s = score(h, f);
+      if (s) pairs.push({ i, key: f.key, s });
+    }),
+  );
+  pairs.sort((a, b) => b.s - a.s || a.i - b.i);
+  const out = headers.map(() => null);
+  const used = new Set();
+  for (const p of pairs) {
+    if (out[p.i] !== null || used.has(p.key)) continue;
+    out[p.i] = p.key;
+    used.add(p.key);
+  }
+  return out;
+}
+
+const slug = (s) => norm(s).slice(0, 40) || "field";
+
+/** A new table from the file: one field per column, its type guessed
+ *  from up to 300 values (select options from the distinct values). */
+export function guessColumns(headers, body) {
+  const taken = new Set();
+  return headers.map((name, i) => {
+    let key = slug(name);
+    for (let n = 2; taken.has(key); n++) key = `${slug(name)}${n}`;
+    taken.add(key);
+    const sample = body.slice(0, 300).map((r) => r[i] ?? "");
+    const type = guessType(sample);
+    const col = { key, name, type };
+    if (type === "select" || type === "multi-select") {
+      const labels = [];
+      const seen = new Set();
+      for (const v of body.map((r) => r[i] ?? "")) {
+        const parts = type === "multi-select" ? String(v).split(/\s*[,;]\s*/) : [String(v).trim()];
+        for (const p of parts) {
+          const t = p.trim();
+          if (t && !seen.has(t.toLowerCase())) {
+            seen.add(t.toLowerCase());
+            labels.push(t);
+          }
+        }
+        if (labels.length > 40) break;
+      }
+      const values = [];
+      col.options = labels.map((label, j) => {
+        const value = optionValue(label, values);
+        values.push(value);
+        return { value, label, hue: (j % 5) + 1 };
+      });
+    }
+    return col;
+  });
+}
+
+/**
+ * The text rows → typed rows. `mapping[i]` is the field key file column
+ * i fills (null: skipped). Each row gets an `id` and `__problems`
+ * ({ key: message } for text that did not fit its field — the text is
+ * kept so it can be fixed) — strip it before saving (`cleanRow`). A select
+ * value that is no option yet becomes a new option (`creates`: key →
+ * options) unless the field says `allowNew: false`.
+ */
+export function buildRows(body, mapping, fields, { ctx, makeId } = {}) {
+  const byKey = new Map(fields.map((f) => [f.key, { ...f, options: [...(f.options ?? [])] }]));
+  const creates = new Map();
+  let problems = 0;
+  const rows = body.map((line, n) => {
+    const row = { id: makeId ? makeId(n) : `import-${n + 1}` };
+    const bad = {};
+    mapping.forEach((key, i) => {
+      if (!key) return;
+      const field = byKey.get(key);
+      if (!field) return;
+      const text = line[i] ?? "";
+      const res = parseCell(text, field, ctx);
+      if ("error" in res) {
+        bad[key] = res.error;
+        row[key] = text;
+        return;
+      }
+      if (res.create) {
+        field.options.push(...res.create);
+        creates.set(key, [...(creates.get(key) ?? []), ...res.create]);
+      }
+      row[key] = res.value;
+    });
+    for (const f of fields) {
+      if (f.required && !(f.key in bad) && typeOf(f).empty(row[f.key])) bad[f.key] = `${f.name} is required`;
+    }
+    if (Object.keys(bad).length) {
+      row.__problems = bad;
+      problems++;
+    }
+    return row;
+  });
+  return { rows, problems, creates, fields: [...byKey.values()] };
+}
+
+/** A row without the importer's own keys. */
+export function cleanRow(row) {
+  const { __problems, ...rest } = row;
+  return rest;
+}
+
+/** A CSV of the fields' names and one example line: the "template" a
+ *  person fills in before importing. */
+export function templateCsv(fields, example) {
+  const quote = (v) => (/[",\n]/.test(v) ? `"${String(v).replace(/"/g, '""')}"` : String(v));
+  const head = fields.filter((f) => !f.readOnly && !f.computed);
+  const lines = [head.map((f) => quote(f.name)).join(",")];
+  if (example) lines.push(head.map((f) => quote(example[f.key] ?? "")).join(","));
+  return `${lines.join("\n")}\n`;
+}

package/registry/blocks/csv-import/index.js

@@ -0,0 +1,7 @@
+// The CsvImport block — `makersclaw add csv-import`. Fixed: compose it
+// through its props (README.md beside this file). The helpers (read CSV
+// text, match columns, guess types, build typed rows) are plain functions
+// and work anywhere. Built on the spreadsheet block (its column types and
+// its grid for the review); papaparse reads the CSV.
+export { CsvImport } from "./csv-import";
+export { parseCsvText, readCsvFile, headersOf, autoMatch, guessColumns, buildRows, cleanRow, templateCsv } from "./import";