@bendyline/squisq-react 2.2.0 → 2.3.0

package/dist/chunk-NANF7REM.js

@@ -0,0 +1,330 @@
+import {
+  useAutoSurface
+} from "./chunk-TT6ENR6T.js";
+import {
+  MarkdownRenderer
+} from "./chunk-D7KN4CRG.js";
+
+// src/jsonView/useJsonViewTokens.ts
+import { useMemo } from "react";
+import { buildJsonFormTokens, resolveJsonFormTheme } from "@bendyline/squisq/jsonForm";
+function useJsonViewTokens(theme, surface) {
+  const auto = useAutoSurface(surface === "auto");
+  const effectiveSurface = surface === "auto" ? auto : surface ?? void 0;
+  return useMemo(() => {
+    const style = buildJsonFormTokens(theme, effectiveSurface, {
+      prefix: "--squisq-json"
+    });
+    return { style, theme: resolveJsonFormTheme(theme, effectiveSurface) };
+  }, [theme, effectiveSurface]);
+}
+
+// src/jsonView/RenderNode.tsx
+import {
+  chooseControl,
+  resolveFlag,
+  resolveRef
+} from "@bendyline/squisq/jsonForm";
+
+// src/jsonView/viewers.tsx
+import { Fragment, useMemo as useMemo2 } from "react";
+import {
+  arrayItemKind
+} from "@bendyline/squisq/jsonForm";
+import { parseMarkdown } from "@bendyline/squisq/markdown";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function TextViewer({ value }) {
+  if (value === void 0 || value === null || value === "") {
+    return /* @__PURE__ */ jsx("span", { className: "squisq-jv-empty", children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "squisq-jv-value", children: String(value) });
+}
+function MultilineViewer({ value }) {
+  if (value === void 0 || value === null || value === "") {
+    return /* @__PURE__ */ jsx("span", { className: "squisq-jv-empty", children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "squisq-jv-value squisq-jv-value--multiline", children: String(value) });
+}
+function RichTextViewer({ value }) {
+  const nodes = useMemo2(() => {
+    if (typeof value !== "string" || value === "") return null;
+    try {
+      const doc = parseMarkdown(value);
+      return doc.children;
+    } catch {
+      return null;
+    }
+  }, [value]);
+  if (!nodes) return /* @__PURE__ */ jsx("span", { className: "squisq-jv-empty", children: "\u2014" });
+  return /* @__PURE__ */ jsx("div", { className: "squisq-jv-richtext", children: /* @__PURE__ */ jsx(MarkdownRenderer, { nodes }) });
+}
+function NumberViewer({ value }) {
+  if (value === void 0 || value === null) {
+    return /* @__PURE__ */ jsx("span", { className: "squisq-jv-empty", children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsx("span", { className: "squisq-jv-value", children: String(value) });
+}
+function BooleanViewer({ value }) {
+  const on = Boolean(value);
+  return /* @__PURE__ */ jsx("span", { className: `squisq-jv-toggle squisq-jv-toggle--${on ? "on" : "off"}`, children: on ? "On" : "Off" });
+}
+function EnumViewer({ value, schema }) {
+  if (value === void 0 || value === null || value === "") {
+    return /* @__PURE__ */ jsx("span", { className: "squisq-jv-empty", children: "\u2014" });
+  }
+  const labels = schema.squisq?.enumLabels;
+  const display = labels && typeof value === "string" ? labels[value] ?? value : String(value);
+  return /* @__PURE__ */ jsx("span", { className: "squisq-jv-value", children: display });
+}
+function ColorViewer({ value }) {
+  if (typeof value !== "string" || value === "") {
+    return /* @__PURE__ */ jsx("span", { className: "squisq-jv-empty", children: "\u2014" });
+  }
+  return /* @__PURE__ */ jsxs("span", { className: "squisq-jv-color", children: [
+    /* @__PURE__ */ jsx("span", { className: "squisq-jv-color__swatch", style: { background: value }, "aria-hidden": true }),
+    /* @__PURE__ */ jsx("span", { className: "squisq-jv-color__hex", children: value })
+  ] });
+}
+function DateViewer({ value, schema }) {
+  if (typeof value !== "string" || value === "") {
+    return /* @__PURE__ */ jsx("span", { className: "squisq-jv-empty", children: "\u2014" });
+  }
+  const fmt = schema.format;
+  let display = value;
+  try {
+    const date = new Date(value);
+    if (!Number.isNaN(date.getTime())) {
+      if (fmt === "time") {
+        display = date.toLocaleTimeString();
+      } else if (fmt === "date") {
+        display = date.toLocaleDateString();
+      } else {
+        display = date.toLocaleString();
+      }
+    }
+  } catch {
+  }
+  return /* @__PURE__ */ jsx("span", { className: "squisq-jv-value", children: display });
+}
+function ChipBinViewer({ value, schema }) {
+  if (!Array.isArray(value) || value.length === 0) {
+    return /* @__PURE__ */ jsx("span", { className: "squisq-jv-empty", children: "\u2014" });
+  }
+  const itemSchema = Array.isArray(schema.items) ? schema.items[0] : schema.items;
+  const labels = itemSchema?.squisq?.enumLabels;
+  return /* @__PURE__ */ jsx("div", { className: "squisq-jv-chip-bin", children: value.map((item, i) => {
+    const label = labels && typeof item === "string" ? labels[item] ?? String(item) : String(item);
+    return /* @__PURE__ */ jsx("span", { className: "squisq-jv-chip", children: label }, i);
+  }) });
+}
+function CardStackViewer(props) {
+  const { value, schema, rootSchema, rootData, pointer, density } = props;
+  if (!Array.isArray(value) || value.length === 0) {
+    return /* @__PURE__ */ jsx("span", { className: "squisq-jv-empty", children: "No items" });
+  }
+  const itemSchema = (Array.isArray(schema.items) ? schema.items[0] : schema.items) ?? {};
+  const itemLabel = itemSchema.squisq?.itemLabel;
+  return /* @__PURE__ */ jsx("div", { className: "squisq-jv-card-stack", children: value.map((item, i) => {
+    const title = resolveItemTitle(itemLabel, item, i);
+    return /* @__PURE__ */ jsxs("div", { className: "squisq-jv-card", children: [
+      title ? /* @__PURE__ */ jsx("h4", { className: "squisq-jv-card__title", children: title }) : null,
+      /* @__PURE__ */ jsx(
+        RenderNode,
+        {
+          value: item,
+          schema: itemSchema,
+          rootSchema,
+          rootData,
+          pointer: `${pointer}/${i}`,
+          density,
+          suppressTopGroupTitle: true
+        }
+      )
+    ] }, i);
+  }) });
+}
+function resolveItemTitle(spec, item, index) {
+  if (!spec) return `Item ${index + 1}`;
+  if (typeof spec === "string") return spec;
+  if (item && typeof item === "object") {
+    const v = item[spec.fromField];
+    if (typeof v === "string" && v !== "") return v;
+    if (typeof v === "number") return String(v);
+  }
+  return `Item ${index + 1}`;
+}
+function GroupViewer(props) {
+  const { value, schema, rootSchema, rootData, pointer, density, suppressTitle } = props;
+  const title = !suppressTitle ? schema.squisq?.label ?? schema.title : void 0;
+  const help = schema.squisq?.help ?? schema.description;
+  const obj = (value && typeof value === "object" ? value : {}) ?? {};
+  const propEntries = Object.entries(schema.properties ?? {});
+  return /* @__PURE__ */ jsxs("section", { className: "squisq-jv-group", children: [
+    title ? /* @__PURE__ */ jsx("h3", { className: "squisq-jv-group__title", children: title }) : null,
+    help ? /* @__PURE__ */ jsx("p", { className: "squisq-jv-group__help", children: help }) : null,
+    propEntries.map(([key, propSchema]) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+      RowOrSection,
+      {
+        label: propSchema.squisq?.label ?? propSchema.title ?? key,
+        help: propSchema.squisq?.help ?? propSchema.description,
+        kindHint: propSchema,
+        children: /* @__PURE__ */ jsx(
+          RenderNode,
+          {
+            value: obj[key],
+            schema: propSchema,
+            rootSchema,
+            rootData,
+            pointer: `${pointer}/${key}`,
+            density,
+            suppressTopGroupTitle: true
+          }
+        )
+      }
+    ) }, key))
+  ] });
+}
+function RowOrSection({
+  label,
+  help,
+  kindHint,
+  children
+}) {
+  const composite = isCompositeKind(kindHint);
+  if (composite) {
+    return /* @__PURE__ */ jsx(Fragment2, { children });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "squisq-jv-row", children: [
+    /* @__PURE__ */ jsx("div", { className: "squisq-jv-label", title: help, children: label }),
+    /* @__PURE__ */ jsx("div", { children })
+  ] });
+}
+function isCompositeKind(schema) {
+  const t = schema.type;
+  const arrayLike = t === "array" || Array.isArray(t) && t.includes("array");
+  if (arrayLike) {
+    return arrayItemKind(schema) === "object";
+  }
+  const objectLike = t === "object" || Array.isArray(t) && t.includes("object");
+  if (objectLike) return true;
+  if (schema.oneOf || schema.anyOf) return true;
+  if (schema.format === "markdown" || schema.squisq?.control === "richtext") return true;
+  return false;
+}
+function TabsViewer(props) {
+  const { value, schema, rootSchema, rootData, pointer, density } = props;
+  const branches = (schema.oneOf ?? schema.anyOf ?? []).slice();
+  const matchedIndex = pickMatchingBranch(branches, value);
+  const branch = branches[matchedIndex];
+  if (!branch) {
+    return /* @__PURE__ */ jsx(TextViewer, { ...props });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "squisq-jv-tabs", children: [
+    /* @__PURE__ */ jsx("span", { className: "squisq-jv-tabs__discriminator", children: branch.squisq?.label ?? branch.title ?? `Option ${matchedIndex + 1}` }),
+    /* @__PURE__ */ jsx(
+      RenderNode,
+      {
+        value,
+        schema: branch,
+        rootSchema,
+        rootData,
+        pointer,
+        density
+      }
+    )
+  ] });
+}
+function pickMatchingBranch(branches, value) {
+  for (let i = 0; i < branches.length; i++) {
+    if (matchesShape(branches[i], value)) return i;
+  }
+  return 0;
+}
+function matchesShape(schema, value) {
+  const t = schema.type;
+  const target = Array.isArray(t) ? t.find((x) => x !== "null") : t;
+  if (!target) return true;
+  switch (target) {
+    case "string":
+      return typeof value === "string";
+    case "number":
+    case "integer":
+      return typeof value === "number";
+    case "boolean":
+      return typeof value === "boolean";
+    case "null":
+      return value === null;
+    case "array":
+      return Array.isArray(value);
+    case "object":
+      return value !== null && typeof value === "object" && !Array.isArray(value);
+    default:
+      return false;
+  }
+}
+var VIEWERS = {
+  text: TextViewer,
+  multiline: MultilineViewer,
+  richtext: RichTextViewer,
+  color: ColorViewer,
+  date: DateViewer,
+  time: DateViewer,
+  datetime: DateViewer,
+  slider: NumberViewer,
+  stepper: NumberViewer,
+  segmented: EnumViewer,
+  radio: EnumViewer,
+  combobox: EnumViewer,
+  toggle: BooleanViewer,
+  checkbox: BooleanViewer,
+  card: GroupViewer,
+  group: GroupViewer,
+  "card-stack": CardStackViewer,
+  "chip-bin": ChipBinViewer,
+  tabs: TabsViewer
+};
+
+// src/jsonView/RenderNode.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function RenderNode(props) {
+  const resolved = resolveRef(props.schema, props.rootSchema) ?? props.schema;
+  if (resolveFlag(resolved.squisq?.hidden, props.rootData)) return null;
+  const kind = chooseControl(resolved);
+  const Viewer = VIEWERS[kind];
+  const viewerProps = {
+    value: props.value,
+    schema: resolved,
+    rootSchema: props.rootSchema,
+    rootData: props.rootData,
+    pointer: props.pointer,
+    density: props.density
+  };
+  if (kind === "group" || kind === "card") {
+    const Group = Viewer;
+    return /* @__PURE__ */ jsx2(Group, { ...viewerProps, suppressTitle: props.suppressTopGroupTitle });
+  }
+  return /* @__PURE__ */ jsx2(Viewer, { ...viewerProps });
+}
+
+// src/jsonView/JsonView.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function JsonView(props) {
+  const { schema, value, theme, surface, density = "comfortable", className } = props;
+  const { style } = useJsonViewTokens(theme, surface);
+  const cls = "squisq-json-view" + (density === "compact" ? " squisq-json-view--compact" : "") + (className ? ` ${className}` : "");
+  return /* @__PURE__ */ jsx3("div", { className: cls, style, children: /* @__PURE__ */ jsx3(
+    RenderNode,
+    {
+      value,
+      schema,
+      rootSchema: schema,
+      rootData: value,
+      pointer: "",
+      density
+    }
+  ) });
+}
+
+export {
+  JsonView
+};