mevebu 1.11.0 → 2.1.0

package/mevebu/libs/js/tools/sample-csv.js

@@ -0,0 +1,218 @@
+// A CSV with the columns and the types you describe. The same seed always
+// produces the same file, so a fixture can be regenerated when it drifts.
+import {
+  el, icon, toast, download, bench, stack, panel, textInput, selectInput,
+  numberInput, button, actions, toolcard, blank, notice,
+} from "../core.js";
+import { toCsv } from "../csv.js";
+import { seeded, pick, uuid } from "../random.js";
+
+const TYPES = [
+  { value: "text", label: "Text" },
+  { value: "word", label: "Word" },
+  { value: "number", label: "Number" },
+  { value: "decimal", label: "Decimal" },
+  { value: "boolean", label: "Boolean" },
+  { value: "date", label: "Date" },
+  { value: "email", label: "Email" },
+  { value: "uuid", label: "UUID" },
+  { value: "choice", label: "Choice list" },
+];
+
+const WORDS = [
+  "alpha", "bravo", "cedar", "delta", "ember", "field", "grove", "harbor", "ivory", "juniper",
+  "kelp", "lumen", "meadow", "north", "orbit", "pine", "quartz", "ridge", "summit", "tide",
+  "umber", "vale", "willow", "xenon", "yarrow", "zephyr",
+];
+
+function value(type, choices, random, rowIndex) {
+  switch (type) {
+    case "word":
+      return pick(random, WORDS);
+    case "number":
+      return String(Math.floor(random() * 1000));
+    case "decimal":
+      return (random() * 100).toFixed(2);
+    case "boolean":
+      return random() > 0.5 ? "true" : "false";
+    case "date": {
+      const day = new Date(Date.UTC(2025, 0, 1) + Math.floor(random() * 700) * 86400000);
+      return day.toISOString().slice(0, 10);
+    }
+    case "email":
+      return `${pick(random, WORDS)}${rowIndex + 1}@example.com`;
+    case "uuid":
+      return uuid(random);
+    case "choice":
+      return choices.length ? pick(random, choices) : "";
+    default:
+      return `${pick(random, WORDS)} ${pick(random, WORDS)}`;
+  }
+}
+
+export function mount(slot) {
+  let columns = [
+    { name: "id", type: "number", choices: "" },
+    { name: "name", type: "word", choices: "" },
+    { name: "active", type: "boolean", choices: "" },
+  ];
+
+  const rows = numberInput({ min: "1", max: "10000", step: "1", value: "50", "aria-label": "Row count" });
+  const seed = textInput({ value: "mevebu", "aria-label": "Seed", class: "font-mono" });
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const list = el("div", { class: "grid gap-2" });
+  const preview = el("div", { class: "overflow-x-auto rounded-r2 border border-orbit" });
+  const empty = blank("table", "Add a column to see the preview.");
+
+  const addButton = button("Add column", { icon: "plus", kind: "quiet" });
+  const generate = button("Generate", { icon: "refresh-cw", kind: "fill" });
+  const downloadButton = button("Download CSV", { icon: "download" });
+
+  let table = [];
+  let header = [];
+
+  function renderColumns() {
+    list.replaceChildren(
+      ...columns.map((column, index) =>
+        el(
+          "div",
+          { class: "grid gap-2 rounded-r1 border border-orbit bg-deck-2 p-2 [grid-template-columns:minmax(0,1fr)_auto]" },
+          el("div", { class: "grid gap-2 sm:grid-cols-2" },
+            textInput({
+              value: column.name,
+              placeholder: `column_${index + 1}`,
+              "aria-label": `Column ${index + 1} name`,
+              oninput: (event) => {
+                column.name = event.target.value;
+                run();
+              },
+            }),
+            selectInput(
+              TYPES.map((type) => ({ value: type.value, label: type.label })),
+              {
+                value: column.type,
+                "aria-label": `Column ${index + 1} type`,
+                onchange: (event) => {
+                  column.type = event.target.value;
+                  renderColumns();
+                  run();
+                },
+              }
+            ),
+            column.type === "choice"
+              ? textInput({
+                  value: column.choices,
+                  placeholder: "red, green, blue",
+                  "aria-label": `Column ${index + 1} choices`,
+                  class: "sm:col-span-2",
+                  oninput: (event) => {
+                    column.choices = event.target.value;
+                    run();
+                  },
+                })
+              : null),
+          el("button", {
+            class: "inline-flex size-9 cursor-pointer items-center justify-center self-start rounded-[5px] border-0 bg-transparent text-ink-3 hover:bg-deck hover:text-danger disabled:opacity-40",
+            type: "button",
+            "aria-label": `Remove column ${index + 1}`,
+            disabled: columns.length === 1,
+            onclick: () => {
+              columns.splice(index, 1);
+              renderColumns();
+              run();
+            },
+          }, icon("trash", "size-4"))
+        )
+      )
+    );
+  }
+
+  function renderPreview() {
+    empty.hidden = table.length > 0;
+    preview.hidden = table.length === 0;
+    if (!table.length) {
+      preview.replaceChildren();
+      return;
+    }
+    const shown = table.slice(0, 8);
+    const head = el("div", {
+      class: "grid border-b border-orbit bg-deck-2 px-3 py-2 text-2xs font-bold tracking-[0.06em] text-ink-3 uppercase",
+      style: `grid-template-columns: repeat(${header.length}, minmax(110px, 1fr))`,
+    }, ...header.map((cell) => el("span", { class: "truncate" }, cell)));
+
+    const body = shown.map((row) =>
+      el("div", {
+        class: "grid border-b border-orbit px-3 py-1.5 text-sm last:border-b-0",
+        style: `grid-template-columns: repeat(${header.length}, minmax(110px, 1fr))`,
+      }, ...row.map((cell) => el("span", { class: "truncate font-mono text-2xs text-ink-2" }, cell)))
+    );
+
+    preview.replaceChildren(head, ...body);
+  }
+
+  function run() {
+    error.write("");
+    const count = Math.max(1, Math.min(10000, Number(rows.value) || 1));
+    const names = columns.map((column, index) => column.name.trim() || `column_${index + 1}`);
+    if (new Set(names).size !== names.length) error.write("Two columns share a name, so the CSV will have duplicates.");
+
+    const random = seeded(seed.value || "mevebu");
+    header = names;
+    table = Array.from({ length: count }, (_, rowIndex) =>
+      columns.map((column) =>
+        value(
+          column.type,
+          column.choices.split(",").map((choice) => choice.trim()).filter(Boolean),
+          random,
+          rowIndex
+        )
+      )
+    );
+
+    summary.textContent = `${count} row${count === 1 ? "" : "s"} · ${columns.length} column${columns.length === 1 ? "" : "s"} · seed ${seed.value || "mevebu"}`;
+    renderPreview();
+  }
+
+  addButton.addEventListener("click", () => {
+    columns.push({ name: `column_${columns.length + 1}`, type: "text", choices: "" });
+    renderColumns();
+    run();
+  });
+  rows.addEventListener("input", run);
+  seed.addEventListener("input", run);
+  generate.addEventListener("click", () => {
+    run();
+    toast("Sample rebuilt");
+  });
+  downloadButton.addEventListener("click", () => {
+    if (!table.length) return;
+    download("sample.csv", toCsv([header, ...table]), "text/csv");
+  });
+
+  renderColumns();
+  run();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Rows", rows),
+        panel("Seed", seed, "The same seed always makes the same file."),
+        el("div", { class: "grid gap-1.5" },
+          el("div", { class: "flex items-center justify-between gap-2" },
+            el("span", { class: "text-sm font-semibold text-ink-2" }, "Columns"),
+            addButton),
+          list),
+        error
+      ),
+      stack(summary, empty, preview)
+    ),
+    foot: actions(generate, downloadButton),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/sql-insert.js

@@ -0,0 +1,184 @@
+// CSV to INSERT statements. Quoting follows the dialect, because Postgres and
+// MySQL disagree about backslashes and about boolean literals.
+import {
+  el, toast, download, bench, stack, panel, selectInput, textInput, checkbox,
+  button, actions, toolcard, blank, notice, output,
+} from "../core.js";
+import { dropzone, baseName, formatBytes } from "../files.js";
+import { parseDelimited, detectDelimiter, headerKeys } from "../csv.js";
+
+const DIALECTS = {
+  postgres: { label: "PostgreSQL", quote: "'", escape: (v) => v.replace(/'/g, "''"), bool: (v) => (/^(true|1|yes)$/i.test(v) ? "TRUE" : "FALSE") },
+  mysql: { label: "MySQL", quote: "'", escape: (v) => v.replace(/\\/g, "\\\\").replace(/'/g, "''"), bool: (v) => (/^(true|1|yes)$/i.test(v) ? "1" : "0") },
+  sqlite: { label: "SQLite", quote: "'", escape: (v) => v.replace(/'/g, "''"), bool: (v) => (/^(true|1|yes)$/i.test(v) ? "1" : "0") },
+};
+
+export function mount(slot) {
+  let file = null;
+  let rows = [];
+  let header = [];
+  let headerTypes = [];
+
+  const tableName = textInput({ value: "my_table", "aria-label": "Table name" });
+  const schema = textInput({ placeholder: "public", "aria-label": "Schema" });
+  const dialect = selectInput(
+    Object.entries(DIALECTS).map(([value, config]) => ({ value, label: config.label })),
+    { value: "postgres", "aria-label": "Dialect" }
+  );
+  const perStatement = selectInput(
+    [
+      { value: "row", label: "One per row" },
+      { value: "batch", label: "One multi row insert" },
+    ],
+    { value: "row", "aria-label": "Statement shape" }
+  );
+  const useNulls = checkbox("Empty cells become NULL", { checked: true });
+  const truncate = checkbox("Start with TRUNCATE", { checked: false });
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const result = output({ rows: 14 });
+  const empty = blank("database", "Drop a CSV to build the statements.");
+
+  const drop = dropzone({ label: "Drop a CSV here", accept: ".csv,text/csv,text/plain", iconName: "database" });
+  const clearButton = button("Clear", { icon: "trash", kind: "quiet" });
+  const copyButton = button("Copy SQL", {
+    icon: "copy",
+    onclick: async () => {
+      if (!result.textContent) return;
+      try {
+        await navigator.clipboard.writeText(result.textContent);
+        toast("SQL copied");
+      } catch {
+        error.write("The clipboard is blocked here. Download the .sql file instead.");
+      }
+    },
+  });
+  const downloadButton = button("Download .sql", { icon: "download", kind: "fill" });
+
+  function quote(value, config) {
+    if (useNulls.input.checked && value === "") return "NULL";
+    return `${config.quote}${config.escape(value)}${config.quote}`;
+  }
+
+  function build() {
+    if (!rows.length) return "";
+    const config = DIALECTS[dialect.value] ?? DIALECTS.postgres;
+    const name = tableName.value.trim() || "my_table";
+    const prefix = schema.value.trim() ? `${schema.value.trim()}.${name}` : name;
+    const columns = header.map((cell) => `"${cell.replace(/"/g, '""')}"`).join(", ");
+    const lines = [];
+
+    if (truncate.input.checked) lines.push(`TRUNCATE TABLE ${prefix};`);
+
+    if (perStatement.value === "batch") {
+      const values = rows
+        .map((row) => `  (${row.map((cell, index) => {
+          const columnType = headerTypes[index];
+          return columnType === "boolean" ? config.bool(cell) : quote(cell, config);
+        }).join(", ")})`)
+        .join(",\n");
+      lines.push(`INSERT INTO ${prefix} (${columns}) VALUES\n${values};`);
+    } else {
+      for (const row of rows) {
+        const values = row.map((cell, index) => {
+          const columnType = headerTypes[index];
+          return columnType === "boolean" ? config.bool(cell) : quote(cell, config);
+        }).join(", ");
+        lines.push(`INSERT INTO ${prefix} (${columns}) VALUES (${values});`);
+      }
+    }
+    return lines.join("\n");
+  }
+
+  function detectTypes() {
+    headerTypes = header.map((_, index) => {
+      const sample = rows.slice(0, 20).map((row) => row[index] ?? "").filter((cell) => cell !== "");
+      if (sample.length && sample.every((cell) => /^(true|false|1|0|yes|no)$/i.test(cell))) return "boolean";
+      return "text";
+    });
+  }
+
+  function render() {
+    empty.hidden = rows.length > 0;
+    result.hidden = rows.length === 0;
+    copyButton.disabled = rows.length === 0;
+    downloadButton.disabled = rows.length === 0;
+    if (!rows.length) {
+      summary.textContent = "";
+      result.write("");
+      return;
+    }
+    detectTypes();
+    const sql = build();
+    result.write(sql);
+    const bytes = new TextEncoder().encode(sql).length;
+    summary.textContent = `${rows.length} row${rows.length === 1 ? "" : "s"} · ${header.length} column${header.length === 1 ? "" : "s"} · ${formatBytes(bytes)} of SQL`;
+  }
+
+  async function open(files) {
+    const picked = Array.from(files).find((entry) => /\.(csv|tsv|txt)$/i.test(entry.name) || entry.type.startsWith("text/"));
+    if (!picked) {
+      error.write("That file is not a CSV.");
+      return;
+    }
+    try {
+      const text = await picked.text();
+      const delimiter = detectDelimiter(text);
+      const parsed = parseDelimited(text, delimiter);
+      if (parsed.length < 2) throw new Error("A CSV needs a header row and at least one data row.");
+      file = picked;
+      header = headerKeys(parsed[0]);
+      rows = parsed.slice(1).filter((row) => row.some((cell) => cell !== ""));
+      error.write("");
+      render();
+    } catch (caught) {
+      error.write(caught?.message || "This file could not be read.");
+    }
+  }
+
+  drop.onFiles(open);
+  tableName.addEventListener("input", render);
+  schema.addEventListener("input", render);
+  dialect.addEventListener("change", render);
+  perStatement.addEventListener("change", render);
+  useNulls.input.addEventListener("change", render);
+  truncate.input.addEventListener("change", render);
+
+  downloadButton.addEventListener("click", () => {
+    if (!rows.length) return;
+    download(`${baseName(file?.name || "data")}.sql`, result.textContent, "application/sql");
+  });
+  clearButton.addEventListener("click", () => {
+    file = null;
+    rows = [];
+    header = [];
+    error.write("");
+    render();
+  });
+
+  render();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        drop,
+        panel("Table", tableName),
+        panel("Schema", schema, "Optional. Leave empty for the default."),
+        panel("Dialect", dialect),
+        panel("Statement shape", perStatement),
+        useNulls,
+        truncate,
+        error
+      ),
+      stack(summary, empty, result)
+    ),
+    foot: actions(clearButton, copyButton, downloadButton),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/survey-responses.js

@@ -0,0 +1,225 @@
+// Fake survey responses. Each question carries weights, so a dashboard can be
+// tested against answers that lean the way real answers lean, not uniform noise.
+import {
+  el, icon, toast, download, bench, stack, panel, textInput, selectInput,
+  numberInput, button, actions, toolcard, blank, notice,
+} from "../core.js";
+import { toCsv } from "../csv.js";
+import { seeded, pick, uuid } from "../random.js";
+
+const TYPES = [
+  { value: "scale", label: "Scale 1 to 5" },
+  { value: "single", label: "Single choice" },
+  { value: "multi", label: "Multiple choice" },
+  { value: "text", label: "Short text" },
+];
+
+const WORDS = ["clear", "useful", "slow", "confusing", "helpful", "missing", "fast", "solid"];
+
+function weighted(random, options) {
+  const total = options.reduce((sum, option) => sum + Math.max(0, option.weight), 0);
+  if (total <= 0) return pick(random, options).label;
+  let roll = random() * total;
+  for (const option of options) {
+    roll -= Math.max(0, option.weight);
+    if (roll <= 0) return option.label;
+  }
+  return options[options.length - 1].label;
+}
+
+export function mount(slot) {
+  let questions = [
+    {
+      text: "How easy was it to use?",
+      type: "scale",
+      options: [
+        { label: "1", weight: 1 },
+        { label: "2", weight: 2 },
+        { label: "3", weight: 5 },
+        { label: "4", weight: 7 },
+        { label: "5", weight: 5 },
+      ],
+    },
+    {
+      text: "Which part did you use most?",
+      type: "single",
+      options: [
+        { label: "Convert", weight: 6 },
+        { label: "Text", weight: 3 },
+        { label: "Data", weight: 2 },
+      ],
+    },
+  ];
+
+  const respondents = numberInput({ min: "1", max: "5000", step: "1", value: "50", "aria-label": "Respondents" });
+  const seed = textInput({ value: "mevebu", "aria-label": "Seed", class: "font-mono" });
+  const withIds = { input: null };
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const list = el("div", { class: "grid gap-2" });
+  const preview = el("div", { class: "overflow-x-auto rounded-r2 border border-orbit" });
+  const empty = blank("clipboard-list", "Add a question to see responses.");
+
+  let table = [];
+  let header = [];
+
+  function renderQuestions() {
+    list.replaceChildren(
+      ...questions.map((question, index) => {
+        const optionRows = question.options.map((option, optionIndex) =>
+          el("div", { class: "flex items-center gap-2" },
+            textInput({
+              value: option.label,
+              placeholder: `Option ${optionIndex + 1}`,
+              "aria-label": `Question ${index + 1} option ${optionIndex + 1}`,
+              oninput: (event) => { option.label = event.target.value; run(); },
+            }),
+            numberInput({
+              value: String(option.weight),
+              min: "0",
+              max: "100",
+              "aria-label": `Question ${index + 1} option ${optionIndex + 1} weight`,
+              oninput: (event) => { option.weight = Number(event.target.value) || 0; run(); },
+            }),
+            el("button", {
+              class: "inline-flex size-8 flex-none cursor-pointer items-center justify-center rounded-[5px] border-0 bg-transparent text-ink-3 hover:bg-deck hover:text-danger disabled:opacity-40",
+              type: "button",
+              "aria-label": `Remove option ${optionIndex + 1}`,
+              disabled: question.options.length <= 1,
+              onclick: () => { question.options.splice(optionIndex, 1); renderQuestions(); run(); },
+            }, icon("x", "size-3.5"))));
+
+        return el(
+          "section",
+          { class: "grid gap-2 rounded-r1 border border-orbit bg-deck-2 p-2.5" },
+          el("div", { class: "grid gap-2 [grid-template-columns:minmax(0,1fr)_auto]" },
+            textInput({
+              value: question.text,
+              placeholder: `Question ${index + 1}`,
+              "aria-label": `Question ${index + 1}`,
+              oninput: (event) => { question.text = event.target.value; run(); },
+            }),
+            el("button", {
+              class: "inline-flex size-9 cursor-pointer items-center justify-center rounded-[5px] border-0 bg-transparent text-ink-3 hover:bg-deck hover:text-danger disabled:opacity-40",
+              type: "button",
+              "aria-label": `Remove question ${index + 1}`,
+              disabled: questions.length === 1,
+              onclick: () => { questions.splice(index, 1); renderQuestions(); run(); },
+            }, icon("trash", "size-4"))),
+          selectInput(TYPES.map((type) => ({ value: type.value, label: type.label })), {
+            value: question.type,
+            "aria-label": `Question ${index + 1} type`,
+            onchange: (event) => { question.type = event.target.value; renderQuestions(); run(); },
+          }),
+          question.type === "text" ? null : el("div", { class: "grid gap-1.5" },
+            el("span", { class: "text-2xs font-semibold tracking-[0.06em] text-ink-3 uppercase" }, "Option and weight"),
+            ...optionRows)
+        );
+      })
+    );
+  }
+
+  function answer(question, random) {
+    if (question.type === "text") {
+      return `${pick(random, WORDS)} ${pick(random, WORDS)}`;
+    }
+    if (question.type === "multi") {
+      const chosen = question.options.filter(() => random() < Math.min(0.9, question.options.length ? 0.4 : 0));
+      return (chosen.length ? chosen : [pick(random, question.options)]).map((option) => option.label).join(" | ");
+    }
+    return weighted(random, question.options);
+  }
+
+  function run() {
+    error.write("");
+    const count = Math.max(1, Math.min(5000, Number(respondents.value) || 1));
+    const random = seeded(seed.value || "mevebu");
+    header = ["respondent_id", "submitted_at", ...questions.map((question) => question.text.trim() || "question")];
+    table = Array.from({ length: count }, () => {
+      const submitted = new Date(Date.UTC(2026, 0, 1) + Math.floor(random() * 90) * 86400000);
+      return [
+        uuid(random).slice(0, 8),
+        submitted.toISOString().slice(0, 10),
+        ...questions.map((question) => answer(question, random)),
+      ];
+    });
+    summary.textContent = `${count} respondent${count === 1 ? "" : "s"} · ${questions.length} question${questions.length === 1 ? "" : "s"} · seed ${seed.value || "mevebu"}`;
+    renderPreview();
+  }
+
+  function renderPreview() {
+    empty.hidden = table.length > 0;
+    preview.hidden = table.length === 0;
+    if (!table.length) {
+      preview.replaceChildren();
+      return;
+    }
+    const shown = table.slice(0, 8);
+    const columns = header.length;
+    const head = el("div", {
+      class: "grid border-b border-orbit bg-deck-2 px-3 py-2 text-2xs font-bold tracking-[0.06em] text-ink-3 uppercase",
+      style: `grid-template-columns: repeat(${columns}, minmax(100px, 1fr))`,
+    }, ...header.map((cell) => el("span", { class: "truncate" }, cell)));
+    const body = shown.map((row) =>
+      el("div", {
+        class: "grid border-b border-orbit px-3 py-1.5 text-sm last:border-b-0",
+        style: `grid-template-columns: repeat(${columns}, minmax(100px, 1fr))`,
+      }, ...row.map((cell) => el("span", { class: "truncate font-mono text-2xs text-ink-2" }, cell)))
+    );
+    preview.replaceChildren(head, ...body);
+  }
+
+  respondents.addEventListener("input", run);
+  seed.addEventListener("input", run);
+
+  const addQuestion = button("Add question", {
+    icon: "plus",
+    kind: "quiet",
+    onclick: () => {
+      questions.push({ text: `Question ${questions.length + 1}`, type: "scale", options: [
+        { label: "1", weight: 1 }, { label: "2", weight: 2 }, { label: "3", weight: 5 }, { label: "4", weight: 5 }, { label: "5", weight: 2 },
+      ] });
+      renderQuestions();
+      run();
+    },
+  });
+
+  const downloadButton = button("Download CSV", {
+    icon: "download",
+    kind: "fill",
+    onclick: () => {
+      if (!table.length) return;
+      download("responses.csv", toCsv([header, ...table]), "text/csv");
+      toast("Responses ready");
+    },
+  });
+
+  renderQuestions();
+  run();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Respondents", respondents),
+        panel("Seed", seed),
+        el("div", { class: "grid gap-1.5" },
+          el("div", { class: "flex items-center justify-between gap-2" },
+            el("span", { class: "text-sm font-semibold text-ink-2" }, "Questions"),
+            addQuestion),
+          list),
+        error
+      ),
+      stack(summary, empty, preview,
+        el("p", { class: "m-0 text-2xs leading-[1.6] text-ink-3" },
+          "Weights are relative, not percentages. A weight of 7 against 3 means the first answer is about twice as likely."))
+    ),
+    foot: actions(downloadButton),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };