mevebu 0.3.0 → 0.4.0

package/mevebu/libs/js/tools/inventory-quantity.js

@@ -0,0 +1,103 @@
+// Closing stock per item from opening stock, stock in and stock out.
+import { el, toast, blank, bench, stack, row, panel, textInput, numberInput, button, copyButton, notice, actions, toolcard, readPin, writePin } from "../core.js";
+
+const uid = () => Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
+
+function fmt(n) {
+  return n.toLocaleString(undefined, { maximumFractionDigits: 2 });
+}
+
+export function mount(slot) {
+  const PIN = "inventory-quantity";
+  const saved = readPin(PIN, []);
+  let list = Array.isArray(saved) ? saved : [];
+
+  const name = textInput({ placeholder: "Item", "aria-label": "Item" });
+  const opening = numberInput({ value: "0", min: "0", "aria-label": "Opening stock" });
+  const stockIn = numberInput({ value: "0", min: "0", "aria-label": "Stock in" });
+  const stockOut = numberInput({ value: "0", min: "0", "aria-label": "Stock out" });
+  const listWrap = el("div", { class: "mvb-scroll" });
+  const stats = el("div", { class: "mvb-stats" });
+  const warn = notice("warn");
+
+  const addButton = button("Add", { icon: "plus", kind: "fill" });
+
+  const save = () => writePin(PIN, list);
+  const tile = (key, value) => el("div", { class: "mvb-stat" },
+    el("span", { class: "mvb-stat__v" }, String(value)),
+    el("span", { class: "mvb-stat__k" }, key));
+
+  const closing = (item) => item.opening + item.in - item.out;
+
+  function removeButton(item) {
+    const node = button("", { icon: "trash", "aria-label": `Remove ${item.name}` });
+    node.addEventListener("click", () => {
+      list = list.filter((entry) => entry.id !== item.id);
+      save();
+      render();
+    });
+    return node;
+  }
+
+  function render() {
+    if (!list.length) {
+      listWrap.replaceChildren(blank("package", "No items yet."));
+    } else {
+      listWrap.replaceChildren(el("table", { class: "mvb-ttable" },
+        el("thead", {}, el("tr", {},
+          el("th", {}, "Item"), el("th", {}, "Opening"), el("th", {}, "In"),
+          el("th", {}, "Out"), el("th", {}, "Closing"), el("th", {}, ""))),
+        el("tbody", {}, ...list.map((item) => el("tr", {},
+          el("th", {}, item.name),
+          el("td", {}, fmt(item.opening)),
+          el("td", {}, fmt(item.in)),
+          el("td", {}, fmt(item.out)),
+          el("td", {}, fmt(closing(item))),
+          el("td", {}, removeButton(item)))))));
+    }
+    const negative = list.filter((item) => closing(item) < 0).length;
+    const totalClosing = list.reduce((sum, item) => sum + closing(item), 0);
+    stats.replaceChildren(tile("Items", String(list.length)), tile("Closing", fmt(totalClosing)));
+    warn.write(negative ? `${negative} ${negative === 1 ? "item closes" : "items close"} below zero.` : "");
+  }
+
+  function add() {
+    const text = name.value.trim();
+    if (!text) return toast("Name the item first");
+    const o = Number(opening.value);
+    const i = Number(stockIn.value);
+    const out = Number(stockOut.value);
+    if ([opening, stockIn, stockOut].some((input) => input.value.trim() === "") || ![o, i, out].every(Number.isFinite)) {
+      return toast("Add the opening, in and out amounts");
+    }
+    if (o < 0 || i < 0 || out < 0) return toast("The amounts cannot be negative");
+    list.push({ id: uid(), name: text, opening: o, in: i, out });
+    name.value = "";
+    opening.value = "0";
+    stockIn.value = "0";
+    stockOut.value = "0";
+    name.focus();
+    save();
+    render();
+  }
+
+  name.addEventListener("keydown", (event) => { if (event.key === "Enter") add(); });
+  addButton.addEventListener("click", add);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Item", name), row(panel("Opening", opening), panel("In", stockIn), panel("Out", stockOut)), warn),
+      stack(stats, panel("Stock", listWrap))
+    ),
+    foot: actions(
+      copyButton(() => list.map((item) => `${item.name}: opening ${fmt(item.opening)}, in ${fmt(item.in)}, out ${fmt(item.out)}, closing ${fmt(closing(item))}`).join("\n"), "Copy stock"),
+      addButton
+    ),
+  });
+  slot.append(card.node);
+  render();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/invoice-number.js

@@ -0,0 +1,64 @@
+// Builds invoice numbers from a prefix, a date and a padded counter.
+import { bench, stack, row, panel, textInput, numberInput, switchControl, notice, output, copyButton, downloadButton, actions, toolcard } from "../core.js";
+
+function today() {
+  const now = new Date();
+  return `${now.getFullYear()}${String(now.getMonth() + 1).padStart(2, "0")}${String(now.getDate()).padStart(2, "0")}`;
+}
+
+export function mount(slot) {
+  const prefix = textInput({ value: "INV-", "aria-label": "Prefix" });
+  const includeDate = switchControl("Include date", { checked: true });
+  const digits = numberInput({ value: "4", min: "1", max: "10", "aria-label": "Counter digits" });
+  const start = numberInput({ value: "1", min: "0", "aria-label": "Starting number" });
+  const count = numberInput({ value: "10", min: "1", max: "500", "aria-label": "How many" });
+  const result = output({ rows: 12 });
+  const error = notice("error");
+  let text = "";
+
+  function run() {
+    error.write("");
+    const d = parseInt(digits.value, 10);
+    const s = parseInt(start.value, 10);
+    const n = parseInt(count.value, 10);
+    if ([digits, start, count].some((input) => input.value.trim() === "") || ![d, s, n].every(Number.isFinite)) {
+      result.write("");
+      text = "";
+      return;
+    }
+    if (d < 1 || d > 10) { result.write(""); text = ""; error.write("Use between 1 and 10 counter digits."); return; }
+    if (s < 0) { result.write(""); text = ""; error.write("The starting number cannot be negative."); return; }
+    const total = Math.max(1, Math.min(500, n));
+    const date = includeDate.input.checked ? today() : "";
+    const lines = Array.from({ length: total }, (_, i) =>
+      `${prefix.value}${date}${String(s + i).padStart(d, "0")}`);
+    text = lines.join("\n");
+    result.write(text);
+  }
+
+  for (const input of [prefix, digits, start, count]) input.addEventListener("input", run);
+  includeDate.input.addEventListener("change", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(
+        panel("Prefix", prefix),
+        panel("Counter digits", digits),
+        row(panel("Start at", start), panel("How many", count)),
+        includeDate,
+        error
+      ),
+      stack(panel("Numbers", result))
+    ),
+    foot: actions(
+      downloadButton(() => text, "invoice-numbers.txt"),
+      copyButton(() => text, "Copy numbers", "fill")
+    ),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/json-escape.js

@@ -0,0 +1,76 @@
+// Escapes text for a JSON string and unescapes it back.
+import { bench, stack, panel, textArea, output, notice, chipRow, copyButton, actions, toolcard } from "../core.js";
+
+function escapeJson(text) {
+  return JSON.stringify(text).slice(1, -1);
+}
+
+function unescapeJson(text) {
+  if (/\\(u(?![0-9a-fA-F]{4})|[^"\\/bfnrtu]|$)/.test(text)) return { ok: false, text: "" };
+  const out = text.replace(/\\(u[0-9a-fA-F]{4}|["\\/bfnrt])/g, (match, seq) => {
+    switch (seq) {
+      case "n": return "\n";
+      case "t": return "\t";
+      case "r": return "\r";
+      case "b": return "\b";
+      case "f": return "\f";
+      case "/": return "/";
+      case '"': return '"';
+      case "\\": return "\\";
+      default: return String.fromCharCode(parseInt(seq.slice(1), 16));
+    }
+  });
+  return { ok: true, text: out };
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 7, value: 'He said "hi".', "aria-label": "Input" });
+  const result = output({ value: "", rows: 7 });
+  const error = notice("error");
+  let mode = "escape";
+  let text = "";
+
+  const chips = chipRow(
+    [{ value: "escape", label: "Escape" }, { value: "unescape", label: "Unescape" }],
+    { value: "escape", label: "Direction", onChange: (value) => { mode = value; run(); } }
+  );
+
+  function run() {
+    error.write("");
+    if (!source.value) {
+      text = "";
+      result.write("");
+      return;
+    }
+    if (mode === "escape") {
+      text = escapeJson(source.value);
+      result.write(text);
+      return;
+    }
+    const decoded = unescapeJson(source.value);
+    if (!decoded.ok) {
+      text = "";
+      result.write("");
+      error.write("That is not a valid escape sequence.");
+      return;
+    }
+    text = decoded.text;
+    result.write(text);
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Direction", chips), panel("Input", source)),
+      stack(panel("Result", result), error)
+    ),
+    foot: actions(copyButton(() => text, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/json-formatter.js

@@ -0,0 +1,51 @@
+// Pretty-prints or compacts JSON and points at the error when it is invalid.
+import { bench, stack, panel, textArea, notice, chipRow, copyButton, actions, toolcard } from "../core.js";
+
+export function mount(slot) {
+  const source = textArea({
+    rows: 12,
+    class: "mvb-in mvb-in--area mvb-in--mono",
+    "aria-label": "JSON",
+    placeholder: "Paste JSON",
+    value: '{"hello":"world","count":3,"items":[1,2,3]}',
+  });
+  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Result" });
+  const error = notice("error");
+  let indent = "2";
+
+  const chips = chipRow(
+    [{ value: "2", label: "2 spaces" }, { value: "4", label: "4 spaces" }, { value: "0", label: "Compact" }],
+    { value: "2", label: "Indent", onChange: (value) => { indent = value; run(); } }
+  );
+
+  function run() {
+    error.write("");
+    if (!source.value.trim()) {
+      result.value = "";
+      return;
+    }
+    try {
+      const data = JSON.parse(source.value);
+      result.value = indent === "0" ? JSON.stringify(data) : JSON.stringify(data, null, Number(indent));
+    } catch (caught) {
+      result.value = "";
+      error.write(caught.message);
+    }
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Indent", chips), panel("JSON", source), error),
+      stack(panel("Result", result))
+    ),
+    foot: actions(copyButton(() => result.value, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/json-minifier.js

@@ -0,0 +1,58 @@
+// Compacts valid JSON and reports the size saved.
+import { el, bench, stack, panel, textArea, notice, copyButton, actions, toolcard } from "../core.js";
+
+const bytes = (text) => new TextEncoder().encode(text).length;
+
+const tile = (key, value) =>
+  el("div", { class: "mvb-stat" }, el("span", { class: "mvb-stat__v" }, value), el("span", { class: "mvb-stat__k" }, key));
+
+export function mount(slot) {
+  const source = textArea({
+    rows: 12,
+    class: "mvb-in mvb-in--area mvb-in--mono",
+    "aria-label": "JSON",
+    placeholder: "Paste JSON",
+    value: '{\n  "hello": "world",\n  "count": 3\n}',
+  });
+  const result = textArea({ rows: 12, readonly: true, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Minified JSON" });
+  const stats = el("div", { class: "mvb-stats" });
+  const error = notice("error");
+
+  function run() {
+    error.write("");
+    stats.replaceChildren();
+    if (!source.value.trim()) {
+      result.value = "";
+      return;
+    }
+    let compact;
+    try {
+      compact = JSON.stringify(JSON.parse(source.value));
+    } catch (caught) {
+      result.value = "";
+      error.write(caught.message);
+      return;
+    }
+    const before = bytes(source.value);
+    const after = bytes(compact);
+    const saved = before ? Math.max(0, Math.round((1 - after / before) * 100)) : 0;
+    result.value = compact;
+    stats.append(tile("Before", `${before} B`), tile("After", `${after} B`), tile("Saved", `${saved}%`));
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("JSON", source), error),
+      stack(panel("Minified", result), stats)
+    ),
+    foot: actions(copyButton(() => result.value, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/json-to-csv.js

@@ -0,0 +1,72 @@
+// Turns JSON records into CSV, using the object keys as the column names.
+import { el, bench, stack, panel, textArea, notice, output, copyButton, downloadButton, actions, toolcard } from "../core.js";
+
+function stringifyCSV(rows, delimiter) {
+  return rows.map((row) => row.map((cell) => {
+    const value = cell == null ? "" : String(cell);
+    const needsQuote = value.includes(delimiter) || /["\n\r]/.test(value) || value !== value.trim();
+    return needsQuote ? `"${value.replace(/"/g, '""')}"` : value;
+  }).join(delimiter)).join("\n");
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 12, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "JSON", placeholder: '[{"name":"Ada","role":"engineer"}]' });
+  const result = output({ rows: 12 });
+  const error = notice("error");
+  let current = "";
+
+  function run() {
+    error.write("");
+    const text = source.value;
+    if (!text.trim()) {
+      current = "";
+      result.write("");
+      return;
+    }
+    let data;
+    try {
+      data = JSON.parse(text);
+    } catch (caught) {
+      current = "";
+      result.write("");
+      error.write(caught.message);
+      return;
+    }
+    const records = Array.isArray(data) ? data : [data];
+    if (!records.length || records.some((record) => !record || typeof record !== "object" || Array.isArray(record))) {
+      current = "";
+      result.write("");
+      error.write("Paste an array of objects.");
+      return;
+    }
+    const header = [...new Set(records.flatMap((record) => Object.keys(record)))];
+    const rows = [
+      header,
+      ...records.map((record) => header.map((key) => {
+        const value = record[key];
+        return value && typeof value === "object" ? JSON.stringify(value) : value;
+      })),
+    ];
+    current = stringifyCSV(rows, ",");
+    result.write(current);
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("JSON", source), error),
+      stack(panel("CSV", result))
+    ),
+    foot: actions(
+      downloadButton(() => current, "data.csv", "Download CSV", "text/csv"),
+      copyButton(() => current, "Copy CSV", "fill")
+    ),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/json-to-typescript.js

@@ -0,0 +1,102 @@
+// Generates TypeScript interfaces from a JSON sample, nested objects included.
+import { bench, stack, panel, textArea, textInput, notice, output, copyButton, debounce, actions, toolcard } from "../core.js";
+
+const pascal = (text) => {
+  const words = String(text).replace(/[^a-zA-Z0-9]+/g, " ").trim().split(" ").filter(Boolean);
+  return words.map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join("") || "Value";
+};
+
+const singular = (name) => {
+  if (/ies$/.test(name)) return name.slice(0, -3) + "y";
+  if (/ss$/.test(name)) return name;
+  if (/s$/.test(name)) return name.slice(0, -1);
+  return `${name}Item`;
+};
+
+function generate(data, rootName) {
+  const interfaces = [];
+  const used = new Set();
+
+  const unique = (base) => {
+    let name = base;
+    let index = 2;
+    while (used.has(name)) name = `${base}${index++}`;
+    used.add(name);
+    return name;
+  };
+
+  const walk = (value, name) => {
+    if (value === null) return "null";
+    if (Array.isArray(value)) {
+      if (!value.length) return "unknown[]";
+      const types = [...new Set(value.map((item) => walk(item, singular(name))))];
+      return types.length === 1 ? `${types[0]}[]` : `Array<${types.join(" | ")}>`;
+    }
+    if (typeof value === "object") {
+      const typeName = unique(name);
+      const lines = Object.entries(value).map(([key, item]) => {
+        const optional = item === null ? "?" : "";
+        const property = /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key) ? key : JSON.stringify(key);
+        return `  ${property}${optional}: ${walk(item, pascal(key))};`;
+      });
+      interfaces.push(`export interface ${typeName} {\n${lines.join("\n")}\n}`);
+      return typeName;
+    }
+    return typeof value;
+  };
+
+  const rootIsObject = data !== null && typeof data === "object" && !Array.isArray(data);
+  const root = walk(data, rootName);
+  if (rootIsObject) return interfaces.join("\n\n");
+  if (!interfaces.length) return `export type ${rootName} = ${root};`;
+  return `${interfaces.join("\n\n")}\n\nexport type ${rootName} = ${root};`;
+}
+
+export function mount(slot) {
+  const source = textArea({
+    rows: 12,
+    class: "mvb-in mvb-in--area mvb-in--mono",
+    "aria-label": "JSON",
+    placeholder: "Paste a JSON object or array",
+    value: '{\n  "id": 1,\n  "name": "Ada",\n  "tags": ["dev"],\n  "address": { "city": "London" }\n}',
+  });
+  const nameInput = textInput({ value: "Root", "aria-label": "Root type name" });
+  const result = output({ rows: 16 });
+  const error = notice("error");
+
+  function run() {
+    error.write("");
+    if (!source.value.trim()) {
+      result.write("");
+      return;
+    }
+    const rootName = pascal(nameInput.value) || "Root";
+    let data;
+    try {
+      data = JSON.parse(source.value);
+    } catch (caught) {
+      result.write("");
+      error.write(caught.message);
+      return;
+    }
+    result.write(generate(data, rootName));
+  }
+
+  const live = debounce(run, 200);
+  source.addEventListener("input", live);
+  nameInput.addEventListener("input", live);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Root type name", nameInput), panel("JSON", source), error),
+      stack(panel("TypeScript", result))
+    ),
+    foot: actions(copyButton(() => result.textContent, "Copy types", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/json-validator.js

@@ -0,0 +1,49 @@
+// Checks whether JSON parses and names the first error when it does not.
+import { bench, stack, panel, textArea, notice, output, copyButton, actions, toolcard } from "../core.js";
+
+function describe(data) {
+  if (Array.isArray(data)) return `an array of ${data.length} item${data.length === 1 ? "" : "s"}`;
+  if (data === null) return "null";
+  if (typeof data === "object") {
+    const count = Object.keys(data).length;
+    return `an object with ${count} key${count === 1 ? "" : "s"}`;
+  }
+  return `a ${typeof data}`;
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 12, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "JSON", placeholder: "Paste JSON" });
+  const report = output({ rows: 4 });
+  const error = notice("error");
+
+  function run() {
+    error.write("");
+    if (!source.value.trim()) {
+      report.write("");
+      return;
+    }
+    try {
+      const data = JSON.parse(source.value);
+      report.write(`Valid JSON: ${describe(data)}.`);
+    } catch (caught) {
+      report.write("");
+      error.write(caught.message);
+    }
+  }
+
+  source.addEventListener("input", run);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("JSON", source), error),
+      stack(panel("Result", report))
+    ),
+    foot: actions(copyButton(() => report.textContent, "Copy result", "fill")),
+  });
+  slot.append(card.node);
+  run();
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/jwt-decoder.js

@@ -0,0 +1,74 @@
+// Reads a JWT header and payload. Decoding is not signature validation.
+import { el, bench, stack, panel, textArea, notice, output, copyButton, actions, toolcard } from "../core.js";
+
+const TIME_CLAIMS = [["iat", "Issued at"], ["nbf", "Not before"], ["exp", "Expires"]];
+
+function decodeSegment(segment) {
+  const base = segment.replace(/-/g, "+").replace(/_/g, "/");
+  const padded = base.padEnd(base.length + ((4 - (base.length % 4)) % 4), "=");
+  const binary = atob(padded);
+  const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
+  return JSON.parse(new TextDecoder().decode(bytes));
+}
+
+export function mount(slot) {
+  const source = textArea({ rows: 4, class: "mvb-in mvb-in--area mvb-in--mono", "aria-label": "Token", placeholder: "Paste a JWT" });
+  const headerOut = output({ rows: 4 });
+  const payloadOut = output({ rows: 8 });
+  const claims = el("div", { class: "mvb-kv" });
+  const error = notice("error");
+
+  function render() {
+    headerOut.write("");
+    payloadOut.write("");
+    claims.replaceChildren();
+    error.write("");
+    const token = source.value.trim();
+    if (!token) return;
+    const parts = token.split(".");
+    if (parts.length < 2) {
+      error.write("A JWT has three parts separated by dots.");
+      return;
+    }
+    try {
+      headerOut.write(JSON.stringify(decodeSegment(parts[0]), null, 2));
+    } catch {
+      error.write("The header is not readable base64url JSON.");
+      return;
+    }
+    let payload;
+    try {
+      payload = decodeSegment(parts[1]);
+      payloadOut.write(JSON.stringify(payload, null, 2));
+    } catch {
+      error.write("The payload is not readable base64url JSON.");
+      return;
+    }
+    for (const [key, label] of TIME_CLAIMS) {
+      if (payload[key] === undefined) continue;
+      const value = Number(payload[key]);
+      const when = Number.isFinite(value) ? new Date(value * 1000).toLocaleString() : String(payload[key]);
+      claims.append(
+        el("div", { class: "mvb-kv__row" },
+          el("span", { class: "mvb-kv__k" }, label),
+          el("span", { class: "mvb-kv__v" }, when))
+      );
+    }
+  }
+
+  source.addEventListener("input", render);
+
+  const card = toolcard({
+    body: bench(
+      stack(panel("Token", source), error),
+      stack(panel("Header", headerOut), panel("Payload", payloadOut), claims)
+    ),
+    foot: actions(copyButton(() => payloadOut.textContent, "Copy payload", "fill")),
+  });
+  slot.append(card.node);
+  render();
+
+  return {};
+}
+
+export default { mount };