@bendyline/squisq-react 1.1.2 → 1.3.0

package/src/jsonView/RenderNode.tsx

@@ -0,0 +1,51 @@
+/**
+ * Recursive dispatcher: looks at a schema node + value, chooses a
+ * `ControlKind`, evaluates `hidden` rules, and renders the matching
+ * read-only viewer.
+ */
+
+import {
+  chooseControl,
+  resolveFlag,
+  resolveRef,
+  type SquisqAnnotatedSchema,
+} from '@bendyline/squisq/jsonForm';
+import { VIEWERS, type ViewerProps } from './viewers';
+
+export interface RenderNodeProps {
+  value: unknown;
+  schema: SquisqAnnotatedSchema;
+  rootSchema: SquisqAnnotatedSchema;
+  rootData: unknown;
+  pointer: string;
+  density: 'comfortable' | 'compact';
+  /**
+   * When a parent group already wrote its own card chrome (e.g. a
+   * card-stack item), suppress the nested group's outer title so the
+   * UI doesn't double up on labels.
+   */
+  suppressTopGroupTitle?: boolean;
+}
+
+export function RenderNode(props: RenderNodeProps): React.ReactElement | null {
+  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: ViewerProps = {
+    value: props.value,
+    schema: resolved,
+    rootSchema: props.rootSchema,
+    rootData: props.rootData,
+    pointer: props.pointer,
+    density: props.density,
+  };
+  if (kind === 'group' || kind === 'card') {
+    // GroupViewer accepts an extra prop that RenderNode forwards.
+    const Group = Viewer as React.ComponentType<ViewerProps & { suppressTitle?: boolean }>;
+    return <Group {...viewerProps} suppressTitle={props.suppressTopGroupTitle} />;
+  }
+  return <Viewer {...viewerProps} />;
+}

package/src/jsonView/index.ts

@@ -0,0 +1,2 @@
+export { JsonView } from './JsonView';
+export type { JsonViewProps } from './JsonView';

package/src/jsonView/json-view.css

@@ -0,0 +1,206 @@
+/**
+ * <JsonView> — read-only viewer styles.
+ *
+ * All colors flow through scoped CSS custom properties on the root
+ * element so the same component re-themes cleanly without re-render.
+ */
+
+.squisq-json-view {
+  font-family: var(--squisq-json-body-font, system-ui, sans-serif);
+  color: var(--squisq-json-text);
+  background: var(--squisq-json-bg);
+  border-radius: var(--squisq-json-radius, 8px);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  container-type: inline-size;
+}
+
+.squisq-json-view--compact {
+  padding: 8px;
+  gap: 8px;
+}
+
+.squisq-jv-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: color-mix(in srgb, var(--squisq-json-bg) 92%, var(--squisq-json-text) 8%);
+  border: 1px solid var(--squisq-json-border);
+  border-radius: var(--squisq-json-radius, 8px);
+  padding: 14px 16px;
+}
+
+.squisq-jv-group__title {
+  font-family: var(--squisq-json-title-font, inherit);
+  font-size: 1.05em;
+  font-weight: 600;
+  color: var(--squisq-json-text);
+  margin: 0;
+}
+
+.squisq-jv-group__help {
+  font-size: 0.85em;
+  color: var(--squisq-json-muted);
+  margin: -6px 0 0 0;
+}
+
+.squisq-jv-row {
+  display: grid;
+  grid-template-columns: minmax(110px, 0.4fr) minmax(0, 1fr);
+  gap: 12px;
+  align-items: baseline;
+}
+
+.squisq-json-view--compact .squisq-jv-row {
+  gap: 8px;
+}
+
+@container (max-width: 480px) {
+  .squisq-jv-row {
+    grid-template-columns: 1fr;
+    gap: 2px;
+  }
+}
+
+.squisq-jv-label {
+  color: var(--squisq-json-muted);
+  font-size: 0.85em;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 500;
+}
+
+.squisq-jv-value {
+  color: var(--squisq-json-text);
+  word-break: break-word;
+}
+
+.squisq-jv-value--multiline {
+  white-space: pre-wrap;
+}
+
+.squisq-jv-empty {
+  color: var(--squisq-json-muted);
+  font-style: italic;
+}
+
+.squisq-jv-chip-bin {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.squisq-jv-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
+  font-size: 0.85em;
+  background: color-mix(in srgb, var(--squisq-json-primary) 16%, transparent);
+  color: var(--squisq-json-text);
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--squisq-json-primary) 30%, transparent);
+}
+
+.squisq-jv-card-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.squisq-jv-card {
+  background: color-mix(in srgb, var(--squisq-json-bg) 95%, var(--squisq-json-text) 5%);
+  border: 1px solid var(--squisq-json-border);
+  border-radius: var(--squisq-json-radius, 6px);
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.squisq-jv-card__title {
+  font-family: var(--squisq-json-title-font, inherit);
+  font-weight: 600;
+  font-size: 0.95em;
+  color: var(--squisq-json-text);
+  margin: 0;
+}
+
+.squisq-jv-color {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.squisq-jv-color__swatch {
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  border: 1px solid var(--squisq-json-border);
+  display: inline-block;
+}
+
+.squisq-jv-color__hex {
+  font-family: var(--squisq-json-mono-font, ui-monospace, Consolas, monospace);
+  font-size: 0.9em;
+  color: var(--squisq-json-muted);
+}
+
+.squisq-jv-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 10px;
+  border-radius: 999px;
+  font-size: 0.8em;
+  font-weight: 500;
+}
+
+.squisq-jv-toggle--on {
+  background: color-mix(in srgb, var(--squisq-json-primary) 18%, transparent);
+  color: var(--squisq-json-primary);
+}
+
+.squisq-jv-toggle--off {
+  background: color-mix(in srgb, var(--squisq-json-muted) 14%, transparent);
+  color: var(--squisq-json-muted);
+}
+
+.squisq-jv-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.squisq-jv-tabs__discriminator {
+  font-size: 0.8em;
+  color: var(--squisq-json-muted);
+}
+
+.squisq-jv-richtext {
+  color: var(--squisq-json-text);
+  font-family: var(--squisq-json-body-font, inherit);
+  line-height: 1.55;
+}
+
+.squisq-jv-richtext h1,
+.squisq-jv-richtext h2,
+.squisq-jv-richtext h3,
+.squisq-jv-richtext h4 {
+  font-family: var(--squisq-json-title-font, inherit);
+  margin: 0.6em 0 0.3em;
+  font-weight: 600;
+}
+
+.squisq-jv-richtext p {
+  margin: 0.4em 0;
+}
+
+.squisq-jv-richtext code {
+  font-family: var(--squisq-json-mono-font, ui-monospace, Consolas, monospace);
+  background: color-mix(in srgb, var(--squisq-json-text) 10%, transparent);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 0.92em;
+}

package/src/jsonView/useJsonViewTokens.ts

@@ -0,0 +1,57 @@
+/**
+ * Derive the CSS custom-property bag for `<JsonView>` from a Theme + Surface.
+ * Mirrors the pattern in LinearDocView so JsonView re-themes consistently
+ * with the rest of Squisq.
+ */
+
+import { useMemo } from 'react';
+import {
+  applySurface,
+  resolveFontFamily,
+  type SurfaceScheme,
+  type Theme,
+} from '@bendyline/squisq/schemas';
+import { DEFAULT_THEME } from '@bendyline/squisq/doc';
+import { useAutoSurface } from '../hooks/useAutoSurface';
+
+export interface JsonViewTokens {
+  /** Inline style object to spread onto the root element. */
+  style: React.CSSProperties;
+  /** The effective theme (after surface application). */
+  theme: Theme;
+}
+
+export function useJsonViewTokens(
+  theme: Theme | undefined,
+  surface: SurfaceScheme | 'auto' | undefined,
+): JsonViewTokens {
+  const auto = useAutoSurface(surface === 'auto');
+  const effectiveSurface = surface === 'auto' ? auto : (surface ?? undefined);
+
+  return useMemo(() => {
+    const baseTheme = theme ?? DEFAULT_THEME;
+    const finalTheme = effectiveSurface ? applySurface(baseTheme, effectiveSurface) : baseTheme;
+
+    const titleFont = resolveFontFamily(finalTheme.typography.titleFont, 'system-ui, sans-serif');
+    const bodyFont = resolveFontFamily(finalTheme.typography.bodyFont, 'system-ui, sans-serif');
+    const monoFont = resolveFontFamily(
+      finalTheme.typography.monoFont,
+      'ui-monospace, Consolas, monospace',
+    );
+
+    const style: React.CSSProperties = {
+      ['--squisq-json-bg' as string]: finalTheme.colors.background,
+      ['--squisq-json-text' as string]: finalTheme.colors.text,
+      ['--squisq-json-muted' as string]: finalTheme.colors.textMuted,
+      ['--squisq-json-primary' as string]: finalTheme.colors.primary,
+      ['--squisq-json-accent' as string]: finalTheme.colors.secondary,
+      ['--squisq-json-border' as string]: `color-mix(in srgb, ${finalTheme.colors.textMuted} 35%, transparent)`,
+      ['--squisq-json-title-font' as string]: titleFont,
+      ['--squisq-json-body-font' as string]: bodyFont,
+      ['--squisq-json-mono-font' as string]: monoFont,
+      ['--squisq-json-radius' as string]: `${finalTheme.style.borderRadius ?? 8}px`,
+    };
+
+    return { style, theme: finalTheme };
+  }, [theme, effectiveSurface]);
+}

package/src/jsonView/viewers.tsx

@@ -0,0 +1,343 @@
+/**
+ * Read-only viewer renderers for `<JsonView>`. Each viewer is a small
+ * pure function that takes a value + schema slice and renders inline.
+ * Group / card-stack viewers recurse into `RenderNode`.
+ */
+
+import { Fragment, useMemo } from 'react';
+import {
+  arrayItemKind,
+  type ControlKind,
+  type SquisqAnnotatedSchema,
+} from '@bendyline/squisq/jsonForm';
+import { parseMarkdown } from '@bendyline/squisq/markdown';
+import { MarkdownRenderer } from '../MarkdownRenderer';
+import { RenderNode } from './RenderNode';
+
+export interface ViewerProps {
+  value: unknown;
+  schema: SquisqAnnotatedSchema;
+  rootSchema: SquisqAnnotatedSchema;
+  rootData: unknown;
+  pointer: string;
+  density: 'comfortable' | 'compact';
+}
+
+// ── Primitive viewers ──────────────────────────────────────────────
+
+export function TextViewer({ value }: ViewerProps) {
+  if (value === undefined || value === null || value === '') {
+    return <span className="squisq-jv-empty">—</span>;
+  }
+  return <span className="squisq-jv-value">{String(value)}</span>;
+}
+
+export function MultilineViewer({ value }: ViewerProps) {
+  if (value === undefined || value === null || value === '') {
+    return <span className="squisq-jv-empty">—</span>;
+  }
+  return <span className="squisq-jv-value squisq-jv-value--multiline">{String(value)}</span>;
+}
+
+export function RichTextViewer({ value }: ViewerProps) {
+  const nodes = useMemo(() => {
+    if (typeof value !== 'string' || value === '') return null;
+    try {
+      const doc = parseMarkdown(value);
+      return doc.children;
+    } catch {
+      return null;
+    }
+  }, [value]);
+  if (!nodes) return <span className="squisq-jv-empty">—</span>;
+  return (
+    <div className="squisq-jv-richtext">
+      <MarkdownRenderer nodes={nodes} />
+    </div>
+  );
+}
+
+export function NumberViewer({ value }: ViewerProps) {
+  if (value === undefined || value === null) {
+    return <span className="squisq-jv-empty">—</span>;
+  }
+  return <span className="squisq-jv-value">{String(value)}</span>;
+}
+
+export function BooleanViewer({ value }: ViewerProps) {
+  const on = Boolean(value);
+  return (
+    <span className={`squisq-jv-toggle squisq-jv-toggle--${on ? 'on' : 'off'}`}>
+      {on ? 'On' : 'Off'}
+    </span>
+  );
+}
+
+export function EnumViewer({ value, schema }: ViewerProps) {
+  if (value === undefined || value === null || value === '') {
+    return <span className="squisq-jv-empty">—</span>;
+  }
+  const labels = schema.squisq?.enumLabels;
+  const display = labels && typeof value === 'string' ? (labels[value] ?? value) : String(value);
+  return <span className="squisq-jv-value">{display}</span>;
+}
+
+export function ColorViewer({ value }: ViewerProps) {
+  if (typeof value !== 'string' || value === '') {
+    return <span className="squisq-jv-empty">—</span>;
+  }
+  return (
+    <span className="squisq-jv-color">
+      <span className="squisq-jv-color__swatch" style={{ background: value }} aria-hidden />
+      <span className="squisq-jv-color__hex">{value}</span>
+    </span>
+  );
+}
+
+export function DateViewer({ value, schema }: ViewerProps) {
+  if (typeof value !== 'string' || value === '') {
+    return <span className="squisq-jv-empty">—</span>;
+  }
+  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 {
+    /* fall through to raw value */
+  }
+  return <span className="squisq-jv-value">{display}</span>;
+}
+
+// ── Composite viewers ─────────────────────────────────────────────
+
+export function ChipBinViewer({ value, schema }: ViewerProps) {
+  if (!Array.isArray(value) || value.length === 0) {
+    return <span className="squisq-jv-empty">—</span>;
+  }
+  const itemSchema = Array.isArray(schema.items) ? schema.items[0] : schema.items;
+  const labels = itemSchema?.squisq?.enumLabels;
+  return (
+    <div className="squisq-jv-chip-bin">
+      {value.map((item, i) => {
+        const label =
+          labels && typeof item === 'string' ? (labels[item] ?? String(item)) : String(item);
+        return (
+          <span key={i} className="squisq-jv-chip">
+            {label}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+export function CardStackViewer(props: ViewerProps) {
+  const { value, schema, rootSchema, rootData, pointer, density } = props;
+  if (!Array.isArray(value) || value.length === 0) {
+    return <span className="squisq-jv-empty">No items</span>;
+  }
+  const itemSchema = (Array.isArray(schema.items) ? schema.items[0] : schema.items) ?? {};
+  const itemLabel = itemSchema.squisq?.itemLabel;
+  return (
+    <div className="squisq-jv-card-stack">
+      {value.map((item, i) => {
+        const title = resolveItemTitle(itemLabel, item, i);
+        return (
+          <div key={i} className="squisq-jv-card">
+            {title ? <h4 className="squisq-jv-card__title">{title}</h4> : null}
+            <RenderNode
+              value={item}
+              schema={itemSchema}
+              rootSchema={rootSchema}
+              rootData={rootData}
+              pointer={`${pointer}/${i}`}
+              density={density}
+              suppressTopGroupTitle
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function resolveItemTitle(
+  spec: string | { fromField: string } | undefined,
+  item: unknown,
+  index: number,
+): string {
+  if (!spec) return `Item ${index + 1}`;
+  if (typeof spec === 'string') return spec;
+  if (item && typeof item === 'object') {
+    const v = (item as Record<string, unknown>)[spec.fromField];
+    if (typeof v === 'string' && v !== '') return v;
+    if (typeof v === 'number') return String(v);
+  }
+  return `Item ${index + 1}`;
+}
+
+export function GroupViewer(props: ViewerProps & { suppressTitle?: boolean }) {
+  const { value, schema, rootSchema, rootData, pointer, density, suppressTitle } = props;
+  const title = !suppressTitle ? (schema.squisq?.label ?? schema.title) : undefined;
+  const help = schema.squisq?.help ?? schema.description;
+  const obj = (value && typeof value === 'object' ? (value as Record<string, unknown>) : {}) ?? {};
+  const propEntries = Object.entries(schema.properties ?? {});
+
+  return (
+    <section className="squisq-jv-group">
+      {title ? <h3 className="squisq-jv-group__title">{title}</h3> : null}
+      {help ? <p className="squisq-jv-group__help">{help}</p> : null}
+      {propEntries.map(([key, propSchema]) => (
+        <Fragment key={key}>
+          <RowOrSection
+            label={propSchema.squisq?.label ?? propSchema.title ?? key}
+            help={propSchema.squisq?.help ?? propSchema.description}
+            kindHint={propSchema}
+          >
+            <RenderNode
+              value={obj[key]}
+              schema={propSchema}
+              rootSchema={rootSchema}
+              rootData={rootData}
+              pointer={`${pointer}/${key}`}
+              density={density}
+              suppressTopGroupTitle
+            />
+          </RowOrSection>
+        </Fragment>
+      ))}
+    </section>
+  );
+}
+
+/**
+ * Decide whether to use the inline label/value Row layout, or to drop
+ * the row chrome entirely (for nested groups, card-stacks, richtext —
+ * which present their own headings).
+ */
+function RowOrSection({
+  label,
+  help,
+  kindHint,
+  children,
+}: {
+  label: string;
+  help?: string;
+  kindHint: SquisqAnnotatedSchema;
+  children: React.ReactNode;
+}) {
+  const composite = isCompositeKind(kindHint);
+  if (composite) {
+    return <>{children}</>;
+  }
+  return (
+    <div className="squisq-jv-row">
+      <div className="squisq-jv-label" title={help}>
+        {label}
+      </div>
+      <div>{children}</div>
+    </div>
+  );
+}
+
+function isCompositeKind(schema: SquisqAnnotatedSchema): boolean {
+  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;
+}
+
+export function TabsViewer(props: ViewerProps) {
+  const { value, schema, rootSchema, rootData, pointer, density } = props;
+  const branches = (schema.oneOf ?? schema.anyOf ?? []).slice();
+  const matchedIndex = pickMatchingBranch(branches as SquisqAnnotatedSchema[], value);
+  const branch = branches[matchedIndex] as SquisqAnnotatedSchema | undefined;
+  if (!branch) {
+    return <TextViewer {...props} />;
+  }
+  return (
+    <div className="squisq-jv-tabs">
+      <span className="squisq-jv-tabs__discriminator">
+        {branch.squisq?.label ?? branch.title ?? `Option ${matchedIndex + 1}`}
+      </span>
+      <RenderNode
+        value={value}
+        schema={branch}
+        rootSchema={rootSchema}
+        rootData={rootData}
+        pointer={pointer}
+        density={density}
+      />
+    </div>
+  );
+}
+
+function pickMatchingBranch(branches: SquisqAnnotatedSchema[], value: unknown): number {
+  for (let i = 0; i < branches.length; i++) {
+    if (matchesShape(branches[i], value)) return i;
+  }
+  return 0;
+}
+
+function matchesShape(schema: SquisqAnnotatedSchema, value: unknown): boolean {
+  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;
+  }
+}
+
+// ── Registry ──────────────────────────────────────────────────────
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const VIEWERS: Record<ControlKind, React.ComponentType<ViewerProps>> = {
+  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,
+};

package/src/styles/doc-animations.css

@@ -456,3 +456,39 @@
   background: rgba(255, 255, 255, 0.9);
   color: #1a1a1a;
 }
+
+/* ── Inline media players ────────────────────────────────────────── */
+/* Used by <InlineVideoPlayer> / <InlineAudioPlayer>, which the
+ * MarkdownRenderer swaps in for raw <video>/<audio> htmlElements so
+ * their src goes through MediaContext. The wrapper is a <span> with
+ * `display: inline-block` so the player flows inline with surrounding
+ * text but still respects its own intrinsic dimensions. */
+
+.squisq-inline-video-player {
+  display: inline-block;
+  max-width: 480px;
+  width: 100%;
+  margin: 0.5em 0;
+}
+
+.squisq-inline-video-player video {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+  background: #000;
+}
+
+.squisq-inline-audio-player {
+  display: inline-block;
+  max-width: 360px;
+  width: 100%;
+  margin: 0.25em 0;
+  vertical-align: middle;
+}
+
+.squisq-inline-audio-player audio {
+  display: block;
+  width: 100%;
+}

package/src/styles/index.css

@@ -0,0 +1,7 @@
+/**
+ * @bendyline/squisq-react — bundled stylesheet entry.
+ * Aggregates all CSS shipped with this package.
+ */
+
+@import './doc-animations.css';
+@import '../jsonView/json-view.css';