mevebu 2.0.0 → 2.1.0

package/mevebu/libs/js/tools/json-schema-sample.js

@@ -0,0 +1,254 @@
+// Sample documents from a JSON Schema. Covers the keywords that decide whether
+// a document validates, and reports the ones it could not honour, so a passing
+// sample is never mistaken for a complete implementation.
+import {
+  el, toast, download, bench, stack, panel, textArea, numberInput, textInput,
+  button, actions, toolcard, blank, notice, output,
+} from "../core.js";
+import { seeded, pick, uuid, gaussian } from "../random.js";
+import { zip } from "../zip.js";
+
+const SUPPORTED = new Set([
+  "$schema", "$id", "title", "description", "type", "properties", "required",
+  "items", "enum", "const", "default", "examples", "minimum", "maximum",
+  "exclusiveMinimum", "exclusiveMaximum", "multipleOf", "minLength", "maxLength",
+  "pattern", "format", "minItems", "maxItems", "uniqueItems", "additionalProperties",
+  "minProperties", "maxProperties", "anyOf", "oneOf", "allOf", "not", "nullable",
+]);
+
+const FORMATS = {
+  "date-time": () => new Date(Date.UTC(2025, 0, 1) + Math.floor(Math.random() * 3e10)).toISOString(),
+  date: (random) => new Date(Date.UTC(2025, 0, 1) + Math.floor(random() * 700) * 86400000).toISOString().slice(0, 10),
+  time: () => `${String(Math.floor(Math.random() * 24)).padStart(2, "0")}:00:00Z`,
+  email: (random) => `${pick(random, ["ani", "budi", "citra", "dewi"])}${Math.floor(random() * 99)}@example.com`,
+  uri: () => "https://example.com/resource",
+  uuid: (random) => uuid(random),
+  ipv4: () => `192.168.${Math.floor(Math.random() * 255)}.${Math.floor(Math.random() * 255)}`,
+  hostname: () => "example.com",
+};
+
+function regexFrom(pattern) {
+  try {
+    return new RegExp(pattern);
+  } catch {
+    return null;
+  }
+}
+
+function stringValue(schema, random) {
+  if (schema.format && FORMATS[schema.format]) return FORMATS[schema.format](random);
+  if (schema.enum) return pick(random, schema.enum);
+  if (schema.const !== undefined) return schema.const;
+
+  const min = Math.max(0, schema.minLength ?? 0);
+  const max = Math.max(min, schema.maxLength ?? Math.max(min, 12));
+  const regex = schema.pattern ? regexFrom(schema.pattern) : null;
+  const alphabet = "abcdefghijklmnopqrstuvwxyz0123456789";
+
+  // Try a few random strings against the pattern before falling back, so a
+  // pattern like ^[A-Z]{3}$ still gets a plausible value.
+  for (let attempt = 0; attempt < 60; attempt++) {
+    const length = min + Math.floor(random() * Math.max(1, Math.min(max, 24) - min + 1));
+    let out = "";
+    for (let i = 0; i < length; i++) out += alphabet[Math.floor(random() * alphabet.length)];
+    if (!regex || regex.test(out)) return out;
+  }
+  const literal = schema.pattern?.replace(/[\^$.*+?()[\]{}|\\]/g, "") ?? "";
+  if (literal.length >= min) return literal.slice(0, Math.max(min, Math.min(max, literal.length)));
+  return "sample".padEnd(min, "x").slice(0, Math.max(min, 1));
+}
+
+function numberValue(schema, random, integer) {
+  if (schema.enum) return pick(random, schema.enum);
+  if (schema.const !== undefined) return schema.const;
+  const min = schema.minimum ?? schema.exclusiveMinimum ?? 0;
+  const max = schema.maximum ?? schema.exclusiveMaximum ?? (min + 1000);
+  let value = min + random() * (max - min);
+  if (integer) value = Math.round(value);
+  if (schema.multipleOf) value = Math.round(value / schema.multipleOf) * schema.multipleOf;
+  return value;
+}
+
+function sample(schema, random, path, unknown) {
+  if (!schema || typeof schema !== "object") return null;
+
+  if (schema.const !== undefined) return schema.const;
+  if (schema.enum) return pick(random, schema.enum);
+  if (schema.default !== undefined) return schema.default;
+  if (schema.examples?.length) return schema.examples[0];
+  if (schema.anyOf?.length) return sample(schema.anyOf[0], random, path, unknown);
+  if (schema.oneOf?.length) return sample(schema.oneOf[0], random, path, unknown);
+  if (schema.allOf?.length) {
+    // Merge the object branches, which is the common shape.
+    const merged = schema.allOf.reduce(
+      (acc, branch) => ({
+        ...acc,
+        ...branch,
+        properties: { ...(acc.properties ?? {}), ...(branch.properties ?? {}) },
+        required: [...new Set([...(acc.required ?? []), ...(branch.required ?? [])])],
+      }),
+      { ...schema, allOf: undefined }
+    );
+    return sample(merged, random, path, unknown);
+  }
+
+  const type = Array.isArray(schema.type)
+    ? schema.type.find((entry) => entry !== "null") ?? "null"
+    : schema.type ?? (schema.properties ? "object" : schema.items ? "array" : "string");
+
+  if (schema.nullable && random() < 0.1) return null;
+
+  switch (type) {
+    case "object": {
+      const out = {};
+      const properties = schema.properties ?? {};
+      for (const [key, child] of Object.entries(properties)) {
+        out[key] = sample(child, random, `${path}.${key}`, unknown);
+      }
+      for (const key of schema.required ?? []) {
+        if (!(key in out)) out[key] = sample({}, random, `${path}.${key}`, unknown);
+      }
+      if (schema.additionalProperties && typeof schema.additionalProperties === "object") {
+        out.extra = sample(schema.additionalProperties, random, `${path}.extra`, unknown);
+      }
+      return out;
+    }
+    case "array": {
+      const min = Math.max(0, schema.minItems ?? 1);
+      const max = Math.max(min, schema.maxItems ?? min + 2);
+      const count = min + Math.floor(random() * (Math.min(max, 8) - min + 1));
+      const items = Array.from({ length: count }, (_, index) =>
+        sample(schema.items ?? {}, random, `${path}[${index}]`, unknown)
+      );
+      return schema.uniqueItems ? [...new Set(items.map((item) => JSON.stringify(item)))].map((text) => JSON.parse(text)) : items;
+    }
+    case "integer":
+      return numberValue(schema, random, true);
+    case "number":
+      return Number(numberValue(schema, random, false).toFixed(3));
+    case "boolean":
+      return random() > 0.5;
+    case "null":
+      return null;
+    default:
+      return stringValue(schema, random);
+  }
+}
+
+function collectUnknown(schema, found, path = "$") {
+  if (!schema || typeof schema !== "object") return;
+  for (const [key, value] of Object.entries(schema)) {
+    if (["properties", "items", "anyOf", "oneOf", "allOf"].includes(key)) continue;
+    if (key.startsWith("$") || key.startsWith("x-")) continue;
+    if (!SUPPORTED.has(key) && !found.includes(key)) found.push(key);
+  }
+  for (const [name, child] of Object.entries(schema.properties ?? {})) {
+    collectUnknown(child, found, `${path}.${name}`);
+  }
+  if (schema.items && typeof schema.items === "object") collectUnknown(schema.items, found, `${path}[]`);
+}
+
+export function mount(slot) {
+  let documents = [];
+  let unknown = [];
+
+  const schema = textArea({
+    rows: 12,
+    value: JSON.stringify(
+      {
+        $schema: "https://json-schema.org/draft/2020-12/schema",
+        type: "object",
+        required: ["id", "name", "email"],
+        properties: {
+          id: { type: "string", format: "uuid" },
+          name: { type: "string", minLength: 3, maxLength: 24 },
+          email: { type: "string", format: "email" },
+          age: { type: "integer", minimum: 18, maximum: 90 },
+          tags: { type: "array", items: { type: "string" }, minItems: 1, maxItems: 4 },
+        },
+      },
+      null,
+      2
+    ),
+    "aria-label": "JSON Schema",
+  });
+
+  const count = numberInput({ min: "1", max: "200", step: "1", value: "3", "aria-label": "Documents" });
+  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 result = output({ rows: 16 });
+  const empty = blank("braces", "Paste a schema to generate documents.");
+
+  const generate = button("Generate", { icon: "refresh-cw", kind: "fill" });
+  const downloadJson = button("Download JSON", { icon: "download" });
+  const downloadZip = button("Download ZIP", { icon: "download" });
+
+  function run() {
+    error.write("");
+    try {
+      const parsed = JSON.parse(schema.value);
+      const random = seeded(seed.value || "mevebu");
+      unknown = [];
+      collectUnknown(parsed, unknown);
+      const total = Math.max(1, Math.min(200, Number(count.value) || 1));
+      documents = Array.from({ length: total }, () => sample(parsed, random, "$", unknown));
+      result.write(JSON.stringify(documents, null, 2));
+      summary.textContent = `${total} document${total === 1 ? "" : "s"} · seed ${seed.value || "mevebu"}`;
+      empty.hidden = true;
+      result.hidden = false;
+      if (unknown.length) {
+        error.write(`Not implemented, so left out: ${unknown.join(", ")}. Everything else follows the schema.`);
+      }
+    } catch (caught) {
+      documents = [];
+      result.write("");
+      result.hidden = true;
+      empty.hidden = false;
+      summary.textContent = "";
+      error.write(caught?.message || "That schema is not valid JSON.");
+    }
+  }
+
+  generate.addEventListener("click", () => {
+    run();
+    if (documents.length) toast("Documents ready");
+  });
+  schema.addEventListener("input", run);
+  count.addEventListener("input", run);
+  seed.addEventListener("input", run);
+
+  downloadJson.addEventListener("click", () => {
+    if (!documents.length) return;
+    download("samples.json", JSON.stringify(documents, null, 2), "application/json");
+  });
+  downloadZip.addEventListener("click", () => {
+    if (!documents.length) return;
+    const files = documents.map((doc, index) => ({
+      name: `sample-${String(index + 1).padStart(3, "0")}.json`,
+      bytes: new TextEncoder().encode(JSON.stringify(doc, null, 2)),
+    }));
+    download("samples.zip", zip(files), "application/zip");
+  });
+
+  run();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Schema", schema),
+        panel("Documents", count),
+        panel("Seed", seed, "The same seed and schema give the same documents."),
+        error
+      ),
+      stack(summary, empty, result)
+    ),
+    foot: actions(downloadJson, downloadZip, generate),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

package/mevebu/libs/js/tools/mock-api-payload.js

@@ -0,0 +1,224 @@
+// The JSON an endpoint returns, written once and reused as a fixture. Fields are
+// defined in a small table, and the same definition can be shown as a list with
+// pagination, a single item, or an error.
+import {
+  el, icon, toast, download, bench, stack, panel, textInput, selectInput,
+  numberInput, button, actions, toolcard, blank, notice, output, chipRow,
+} from "../core.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" },
+];
+
+const WORDS = ["north", "cedar", "orbit", "summit", "tide", "willow", "ember", "quartz"];
+
+function value(type, random, index) {
+  switch (type) {
+    case "word": return pick(random, WORDS);
+    case "number": return Math.floor(random() * 5000);
+    case "decimal": return Number((random() * 200).toFixed(2));
+    case "boolean": return random() > 0.5;
+    case "date": return new Date(Date.UTC(2025, 0, 1) + Math.floor(random() * 6e10)).toISOString();
+    case "email": return `${pick(random, WORDS)}${index + 1}@example.com`;
+    case "uuid": return uuid(random);
+    default: return `${pick(random, WORDS)} ${pick(random, WORDS)}`;
+  }
+}
+
+export function mount(slot) {
+  let fields = [
+    { name: "id", type: "uuid" },
+    { name: "title", type: "text" },
+    { name: "price", type: "decimal" },
+    { name: "in_stock", type: "boolean" },
+    { name: "created_at", type: "date" },
+  ];
+  let shape = "list";
+
+  const resource = textInput({ value: "items", "aria-label": "Resource name" });
+  const seed = textInput({ value: "mevebu", "aria-label": "Seed", class: "font-mono" });
+  const items = numberInput({ min: "1", max: "100", step: "1", value: "5", "aria-label": "Items" });
+  const status = selectInput(
+    [
+      { value: "200", label: "200 OK" },
+      { value: "201", label: "201 Created" },
+      { value: "400", label: "400 Bad Request" },
+      { value: "401", label: "401 Unauthorized" },
+      { value: "404", label: "404 Not Found" },
+      { value: "422", label: "422 Unprocessable" },
+      { value: "500", label: "500 Server Error" },
+    ],
+    { value: "200", "aria-label": "HTTP status" }
+  );
+
+  const shapeRow = chipRow(
+    [
+      { value: "list", label: "List" },
+      { value: "item", label: "Single item" },
+      { value: "error", label: "Error" },
+    ],
+    { value: "list", label: "Payload shape", onChange: (next) => { shape = next; sync(); run(); } }
+  );
+
+  const error = notice("warn");
+  const summary = el("p", { class: "text-sm text-ink-2" });
+  const result = output({ rows: 16 });
+  const empty = blank("braces", "Define a field to build the payload.");
+  const list = el("div", { class: "grid gap-2" });
+
+  const itemsPanel = panel("Items", items);
+  const statusPanel = panel("HTTP status", status);
+
+  function sync() {
+    itemsPanel.hidden = shape !== "list";
+    statusPanel.hidden = shape !== "error";
+  }
+
+  function renderFields() {
+    list.replaceChildren(
+      ...fields.map((field, 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: field.name,
+              placeholder: `field_${index + 1}`,
+              "aria-label": `Field ${index + 1} name`,
+              oninput: (event) => { field.name = event.target.value; run(); },
+            }),
+            selectInput(TYPES.map((type) => ({ value: type.value, label: type.label })), {
+              value: field.type,
+              "aria-label": `Field ${index + 1} type`,
+              onchange: (event) => { field.type = event.target.value; run(); },
+            })),
+          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 field ${index + 1}`,
+            disabled: fields.length === 1,
+            onclick: () => { fields.splice(index, 1); renderFields(); run(); },
+          }, icon("trash", "size-4")))
+      )
+    );
+  }
+
+  function one(random, index) {
+    const out = {};
+    for (const field of fields) {
+      const key = field.name.trim() || `field_${index + 1}`;
+      out[key] = value(field.type, random, index);
+    }
+    return out;
+  }
+
+  function run() {
+    error.write("");
+    const random = seeded(seed.value || "mevebu");
+    const name = resource.value.trim() || "items";
+    const count = Math.max(1, Math.min(100, Number(items.value) || 1));
+    const rows = Array.from({ length: count }, (_, index) => one(random, index));
+
+    let payload;
+    let http = Number(status.value);
+    if (shape === "list") {
+      payload = {
+        data: rows,
+        meta: { page: 1, per_page: count, total: count * 4, has_more: true },
+      };
+      http = 200;
+    } else if (shape === "item") {
+      payload = { data: rows[0] };
+      http = 200;
+    } else {
+      const messages = {
+        400: "The request body is not valid JSON.",
+        401: "Missing or expired token.",
+        404: `No ${name} with that id.`,
+        422: "The title field is required.",
+        500: "Something went wrong on our side.",
+      };
+      payload = {
+        error: { status: http, code: http === 401 ? "unauthorized" : http === 404 ? "not_found" : "bad_request", message: messages[http] ?? "Request failed." },
+      };
+    }
+
+    result.write(JSON.stringify(payload, null, 2));
+    empty.hidden = true;
+    result.hidden = false;
+    const bytes = new TextEncoder().encode(JSON.stringify(payload)).length;
+    summary.textContent = `${http} · ${shape} · ${bytes} bytes${shape === "list" ? ` · ${count} item${count === 1 ? "" : "s"}` : ""}`;
+  }
+
+  resource.addEventListener("input", run);
+  seed.addEventListener("input", run);
+  items.addEventListener("input", run);
+  status.addEventListener("change", run);
+
+  const addButton = button("Add field", {
+    icon: "plus",
+    kind: "quiet",
+    onclick: () => {
+      fields.push({ name: `field_${fields.length + 1}`, type: "text" });
+      renderFields();
+      run();
+    },
+  });
+
+  const copyButton = button("Copy JSON", {
+    icon: "copy",
+    onclick: async () => {
+      try {
+        await navigator.clipboard.writeText(result.textContent);
+        toast("Payload copied");
+      } catch {
+        error.write("The clipboard is blocked here. Download the file instead.");
+      }
+    },
+  });
+
+  const downloadButton = button("Download .json", {
+    icon: "download",
+    kind: "fill",
+    onclick: () => {
+      if (!result.textContent) return;
+      download(`${(resource.value.trim() || "payload").replace(/[^\w-]+/g, "-")}-${shape}.json`, result.textContent, "application/json");
+    },
+  });
+
+  renderFields();
+  sync();
+  run();
+
+  const shell = toolcard({
+    body: bench(
+      stack(
+        panel("Resource", resource, "Used in the error message and the file name."),
+        el("div", { class: "grid gap-1.5" }, el("span", { class: "text-sm font-semibold text-ink-2" }, "Shape"), shapeRow),
+        itemsPanel,
+        statusPanel,
+        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" }, "Fields"),
+            addButton),
+          list),
+        error
+      ),
+      stack(summary, empty, result)
+    ),
+    foot: actions(copyButton, downloadButton),
+  });
+
+  slot.append(shell.node);
+
+  return {};
+}
+
+export default { mount };

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

@@ -5,6 +5,7 @@ import {
   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" },
@@ -24,32 +25,6 @@ const WORDS = [
   "umber", "vale", "willow", "xenon", "yarrow", "zephyr",
 ];
 
-/** Mulberry32: a small deterministic generator, so a seed is worth writing down. */
-function seeded(seed) {
-  let state = seed >>> 0;
-  return () => {
-    state = (state + 0x6d2b79f5) >>> 0;
-    let t = state;
-    t = Math.imul(t ^ (t >>> 15), t | 1);
-    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
-    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-  };
-}
-
-function pick(random, list) {
-  return list[Math.floor(random() * list.length)];
-}
-
-function uuid(random) {
-  const hex = "0123456789abcdef";
-  let out = "";
-  for (let i = 0; i < 32; i++) {
-    if (i === 8 || i === 12 || i === 16 || i === 20) out += "-";
-    out += i === 12 ? "4" : hex[Math.floor(random() * 16)];
-  }
-  return out;
-}
-
 function value(type, choices, random, rowIndex) {
   switch (type) {
     case "word":
@@ -153,15 +128,6 @@ export function mount(slot) {
     );
   }
 
-  function hashSeed(text) {
-    let hash = 2166136261;
-    for (let i = 0; i < text.length; i++) {
-      hash ^= text.charCodeAt(i);
-      hash = Math.imul(hash, 16777619);
-    }
-    return hash >>> 0;
-  }
-
   function renderPreview() {
     empty.hidden = table.length > 0;
     preview.hidden = table.length === 0;
@@ -191,7 +157,7 @@ export function mount(slot) {
     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(hashSeed(seed.value || "mevebu"));
+    const random = seeded(seed.value || "mevebu");
     header = names;
     table = Array.from({ length: count }, (_, rowIndex) =>
       columns.map((column) =>