@backmatter/studio 0.0.16 → 0.0.17

package/src/fields/FieldControl.tsx

@@ -0,0 +1,748 @@
+// packages/studio/src/fields/FieldControl.tsx
+import { useEffect, useState, type ReactNode } from "react";
+import * as stylex from "@stylexjs/stylex";
+import { documentLabel, matchesWhere } from "@backmatter/core";
+import type { SchemaField } from "../api";
+import { resolveFieldInput, useStudioDefinition } from "../define-studio";
+import { colors, radius, space, type } from "../styles/tokens.stylex";
+import { Input, Select, Textarea } from "../ui/Input";
+import { MediaFieldInput } from "../pages/MediaFieldInput";
+import { chooseFieldInput } from "./choose-field-input";
+import { nestedStartsCollapsed, resolveObjectFields } from "./resolve-object-fields";
+
+function clamp(n: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, n));
+}
+
+function hexColorValue(value: unknown): string {
+  if (typeof value === "string" && /^#[0-9a-fA-F]{6}$/.test(value)) {
+    return value.toLowerCase();
+  }
+  return "#000000";
+}
+
+function nestFieldName(name: string): string {
+  const dot = name.lastIndexOf(".");
+  if (dot >= 0) return name.slice(dot + 1);
+  return name;
+}
+
+function objectRecord(value: unknown): Record<string, unknown> {
+  if (value && typeof value === "object" && !Array.isArray(value)) {
+    return value as Record<string, unknown>;
+  }
+  return {};
+}
+
+function arrayValue(value: unknown): unknown[] {
+  return Array.isArray(value) ? value : [];
+}
+
+function jsonFieldText(value: unknown, kind: "object" | "array"): string {
+  if (typeof value === "string") return value;
+  return JSON.stringify(value ?? (kind === "array" ? [] : {}), null, 2);
+}
+
+export function JsonField({
+  value,
+  kind,
+  readOnly,
+  onValidChange,
+  onDraftChange,
+}: {
+  value: unknown;
+  kind: "object" | "array";
+  readOnly?: boolean;
+  onValidChange: (next: unknown) => void;
+  onDraftChange?: (text: string) => void;
+}) {
+  const serialized = jsonFieldText(value, kind);
+  const [draft, setDraft] = useState(serialized);
+  const [focused, setFocused] = useState(false);
+  const [invalid, setInvalid] = useState(false);
+  useEffect(() => {
+    if (!focused) {
+      setDraft(serialized);
+      setInvalid(false);
+    }
+  }, [serialized, focused]);
+  return (
+    <Textarea
+      value={draft}
+      readOnly={readOnly}
+      aria-invalid={invalid || undefined}
+      onFocus={() => setFocused(true)}
+      onBlur={() => setFocused(false)}
+      onChange={(e) => {
+        const next = e.target.value;
+        setDraft(next);
+        onDraftChange?.(next);
+        try {
+          onValidChange(JSON.parse(next || (kind === "array" ? "[]" : "{}")));
+          setInvalid(false);
+        } catch {
+          setInvalid(true);
+        }
+      }}
+    />
+  );
+}
+
+type ModelRef = { type: string; external?: boolean; fields?: Record<string, SchemaField> };
+type RelationDocument = { slug: string; frontmatter: Record<string, unknown> };
+type RelationDocumentLists = Record<string, RelationDocument[]>;
+
+function relationDocumentsForField(
+  field: SchemaField,
+  documents: RelationDocument[] | undefined,
+  documentLists: RelationDocumentLists | undefined,
+): RelationDocument[] | undefined {
+  if (documents !== undefined) return documents;
+  if (field.kind === "relation" && field.relationTo && documentLists) {
+    return documentLists[field.relationTo];
+  }
+  return undefined;
+}
+
+type SharedFieldProps = {
+  name: string;
+  field: SchemaField;
+  value: unknown;
+  models: ModelRef[];
+  objects: Array<{ name: string; fields: Record<string, SchemaField> }>;
+  documents?: RelationDocument[];
+  documentLists?: RelationDocumentLists;
+  readOnly?: boolean;
+  ancestorObjectNames: string[];
+  blocksEditor?: (props: {
+    value: unknown;
+    readOnly?: boolean;
+    onChange: (value: unknown) => void;
+  }) => ReactNode;
+  onChange: (value: unknown) => void;
+};
+
+function RelationFieldInput({
+  name,
+  field,
+  value,
+  models,
+  documents,
+  readOnly,
+  onChange,
+}: {
+  name: string;
+  field: SchemaField;
+  value: unknown;
+  models: ModelRef[];
+  documents?: RelationDocument[];
+  readOnly?: boolean;
+  onChange: (value: unknown) => void;
+}) {
+  const slugValue = value == null || value === "" ? "" : String(value);
+  const targetModel = models.find((model) => model.type === field.relationTo);
+  const labelFor = (doc: RelationDocument) =>
+    documentLabel(doc.frontmatter, targetModel ?? null) ?? doc.slug;
+  const offered =
+    documents === undefined
+      ? []
+      : documents.filter((doc) =>
+          matchesWhere({ slug: doc.slug, frontmatter: doc.frontmatter }, field.where),
+        );
+  const options = offered.map((doc) => ({ value: doc.slug, label: labelFor(doc) }));
+  if (slugValue && !options.some((option) => option.value === slugValue)) {
+    options.unshift({ value: slugValue, label: slugValue });
+  }
+
+  return (
+    <Select
+      name={name}
+      chip
+      searchable
+      clearable={!field.required}
+      placeholder="Select a value"
+      options={options}
+      value={slugValue || null}
+      disabled={readOnly}
+      onValueChange={(next) => {
+        if (readOnly) return;
+        onChange(next == null ? undefined : next);
+      }}
+    />
+  );
+}
+
+function CollapsibleNest({
+  fieldName,
+  objectName,
+  ancestorObjectNames,
+  children,
+}: {
+  fieldName: string;
+  objectName: string | undefined;
+  ancestorObjectNames: string[];
+  readOnly?: boolean;
+  children: ReactNode;
+}) {
+  const startsCollapsed = nestedStartsCollapsed(ancestorObjectNames, objectName);
+  const [expanded, setExpanded] = useState(!startsCollapsed);
+  if (!objectName) {
+    return <>{children}</>;
+  }
+  return (
+    <div {...stylex.props(styles.nest)}>
+      <button
+        type="button"
+        data-nest-toggle={fieldName}
+        {...stylex.props(styles.nestToggle)}
+        onClick={() => setExpanded((open) => !open)}
+      >
+        {expanded ? "Collapse" : "Expand"} {fieldName}
+      </button>
+      {expanded ? (
+        <div data-nest={fieldName} {...stylex.props(styles.nestBody)}>
+          {children}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function ObjectFieldEditor({
+  name,
+  field,
+  value,
+  models,
+  objects,
+  documentLists,
+  readOnly,
+  ancestorObjectNames,
+  blocksEditor,
+  onChange,
+}: SharedFieldProps) {
+  const resolved = resolveObjectFields(field, objects);
+  if (!resolved) {
+    return (
+      <JsonField
+        kind="object"
+        value={value}
+        readOnly={readOnly}
+        onValidChange={onChange}
+      />
+    );
+  }
+
+  const record = objectRecord(value);
+  const objectName = field.object;
+  const nextAncestors = objectName ? [...ancestorObjectNames, objectName] : ancestorObjectNames;
+
+  const body = (
+    <div {...stylex.props(styles.objectFields)}>
+      {Object.entries(resolved).map(([fieldName, nestedField]) => (
+        <FieldControl
+          key={fieldName}
+          name={`${name}.${fieldName}`}
+          field={nestedField}
+          value={record[fieldName]}
+          models={models}
+          objects={objects}
+          documentLists={documentLists}
+          readOnly={readOnly}
+          ancestorObjectNames={nextAncestors}
+          blocksEditor={blocksEditor}
+          onChange={(next) => {
+            onChange({ ...record, [fieldName]: next });
+          }}
+        />
+      ))}
+    </div>
+  );
+
+  if (
+    !objectName ||
+    !nestedStartsCollapsed(ancestorObjectNames, objectName) ||
+    /\[\d+\]$/.test(name)
+  ) {
+    return body;
+  }
+
+  return (
+    <CollapsibleNest
+      fieldName={nestFieldName(name)}
+      objectName={objectName}
+      ancestorObjectNames={ancestorObjectNames}
+      readOnly={readOnly}
+    >
+      {body}
+    </CollapsibleNest>
+  );
+}
+
+function ArrayFieldEditor({
+  name,
+  field,
+  value,
+  models,
+  objects,
+  documentLists,
+  readOnly,
+  ancestorObjectNames,
+  blocksEditor,
+  onChange,
+}: SharedFieldProps) {
+  const resolved = resolveObjectFields(field, objects);
+  if (!resolved) {
+    return (
+      <JsonField
+        kind="array"
+        value={value}
+        readOnly={readOnly}
+        onValidChange={onChange}
+      />
+    );
+  }
+
+  const items = arrayValue(value);
+  const itemField: SchemaField = { kind: "object", object: field.object, fields: resolved };
+  const objectName = field.object;
+  const nextAncestors = objectName ? [...ancestorObjectNames, objectName] : ancestorObjectNames;
+
+  const list = (
+    <div {...stylex.props(styles.arrayList)}>
+      {items.map((item, index) => (
+        <div key={index} {...stylex.props(styles.arrayItem)}>
+          <FieldControl
+            name={`${name}[${index}]`}
+            field={itemField}
+            value={item}
+            models={models}
+            objects={objects}
+            documentLists={documentLists}
+            readOnly={readOnly}
+            ancestorObjectNames={nextAncestors}
+            blocksEditor={blocksEditor}
+            onChange={(next) => {
+              const nextItems = [...items];
+              nextItems[index] = next;
+              onChange(nextItems);
+            }}
+          />
+          <div {...stylex.props(styles.arrayActions)}>
+            <button
+              type="button"
+              data-action="array-up"
+              disabled={readOnly || index === 0}
+              onClick={() => {
+                if (index === 0) return;
+                const nextItems = [...items];
+                const prev = nextItems[index - 1];
+                nextItems[index - 1] = nextItems[index]!;
+                nextItems[index] = prev!;
+                onChange(nextItems);
+              }}
+            >
+              Up
+            </button>
+            <button
+              type="button"
+              data-action="array-down"
+              disabled={readOnly || index === items.length - 1}
+              onClick={() => {
+                if (index >= items.length - 1) return;
+                const nextItems = [...items];
+                const next = nextItems[index + 1];
+                nextItems[index + 1] = nextItems[index]!;
+                nextItems[index] = next!;
+                onChange(nextItems);
+              }}
+            >
+              Down
+            </button>
+            <button
+              type="button"
+              data-action="array-remove"
+              disabled={readOnly}
+              onClick={() => {
+                onChange(items.filter((_, i) => i !== index));
+              }}
+            >
+              Remove
+            </button>
+          </div>
+        </div>
+      ))}
+      <button
+        type="button"
+        data-action="array-add"
+        disabled={readOnly}
+        onClick={() => onChange([...items, {}])}
+      >
+        Add
+      </button>
+    </div>
+  );
+
+  if (!objectName || !nestedStartsCollapsed(ancestorObjectNames, objectName)) {
+    return list;
+  }
+
+  return (
+    <CollapsibleNest
+      fieldName={nestFieldName(name)}
+      objectName={objectName}
+      ancestorObjectNames={ancestorObjectNames}
+      readOnly={readOnly}
+    >
+      {list}
+    </CollapsibleNest>
+  );
+}
+
+function commitNumber(raw: string, onChange: (value: unknown) => void): void {
+  if (raw.trim() === "") {
+    onChange(undefined);
+    return;
+  }
+  const parsed = Number(raw);
+  if (!Number.isFinite(parsed)) return;
+  onChange(parsed);
+}
+
+export function FieldControl({
+  name,
+  field,
+  value,
+  models,
+  objects = [],
+  documents,
+  documentLists,
+  readOnly,
+  ancestorObjectNames = [],
+  blocksEditor,
+  onChange,
+}: {
+  name: string;
+  field: SchemaField;
+  value: unknown;
+  models: ModelRef[];
+  objects?: Array<{ name: string; fields: Record<string, SchemaField> }>;
+  documents?: RelationDocument[];
+  documentLists?: RelationDocumentLists;
+  readOnly?: boolean;
+  ancestorObjectNames?: string[];
+  blocksEditor?: (props: {
+    value: unknown;
+    readOnly?: boolean;
+    onChange: (value: unknown) => void;
+  }) => ReactNode;
+  onChange: (value: unknown) => void;
+}) {
+  const definition = useStudioDefinition();
+  const kind = chooseFieldInput(definition, field, models);
+
+  if (kind === "custom") {
+    const CustomInput = resolveFieldInput(definition, field);
+    if (CustomInput) {
+      return (
+        <CustomInput name={name} field={field} value={value} readOnly={readOnly} onChange={onChange} />
+      );
+    }
+  }
+
+  if (kind === "select" && field.options) {
+    const options = field.options.map((opt) => ({ value: opt, label: opt }));
+    const selectValue = value == null || value === "" ? null : String(value);
+    return (
+      <Select
+        name={name}
+        chip
+        clearable={!field.required}
+        placeholder="Select a value"
+        options={options}
+        value={selectValue}
+        disabled={readOnly}
+        onValueChange={(next) => {
+          if (readOnly) return;
+          if (next == null) {
+            onChange(undefined);
+            return;
+          }
+          onChange(next);
+        }}
+      />
+    );
+  }
+
+  if (kind === "slider" && typeof field.min === "number" && typeof field.max === "number") {
+    const min = field.min;
+    const max = field.max;
+    const step = typeof field.step === "number" ? field.step : "any";
+    const numeric = typeof value === "number" ? value : value === "" ? NaN : Number(value);
+    const rangeValue = Number.isFinite(numeric) ? clamp(numeric, min, max) : min;
+    const textValue = value == null || value === "" ? "" : String(value);
+    return (
+      <div {...stylex.props(styles.sliderRow)}>
+        <input
+          type="range"
+          min={min}
+          max={max}
+          step={step}
+          value={String(rangeValue)}
+          disabled={readOnly}
+          aria-valuemin={min}
+          aria-valuemax={max}
+          aria-valuenow={rangeValue}
+          {...stylex.props(styles.range)}
+          onChange={(event) => {
+            if (readOnly) return;
+            onChange(Number(event.target.value));
+          }}
+        />
+        <input
+          type="text"
+          inputMode="decimal"
+          value={textValue}
+          readOnly={readOnly}
+          disabled={readOnly}
+          aria-label={`${name} value`}
+          {...stylex.props(styles.sliderText)}
+          onChange={(event) => {
+            if (readOnly) return;
+            commitNumber(event.target.value, onChange);
+          }}
+        />
+      </div>
+    );
+  }
+
+  if (kind === "color") {
+    const textValue = value == null ? "" : String(value);
+    return (
+      <div {...stylex.props(styles.colorRow)}>
+        <input
+          type="color"
+          value={hexColorValue(value)}
+          disabled={readOnly}
+          {...stylex.props(styles.colorPicker)}
+          onChange={(event) => {
+            if (readOnly) return;
+            onChange(event.target.value);
+          }}
+        />
+        <Input
+          value={textValue}
+          readOnly={readOnly}
+          onChange={(event) => {
+            if (readOnly) return;
+            onChange(event.target.value);
+          }}
+        />
+      </div>
+    );
+  }
+
+  if (kind === "media") {
+    return <MediaFieldInput name={name} value={value} readOnly={readOnly} onChange={onChange} />;
+  }
+
+  if (kind === "relation") {
+    return (
+      <RelationFieldInput
+        name={name}
+        field={field}
+        value={value}
+        models={models}
+        documents={relationDocumentsForField(field, documents, documentLists)}
+        readOnly={readOnly}
+        onChange={onChange}
+      />
+    );
+  }
+
+  if (kind === "boolean") {
+    return (
+      <input
+        type="checkbox"
+        checked={value === true}
+        disabled={readOnly}
+        {...stylex.props(styles.check)}
+        onChange={(event) => {
+          if (readOnly) return;
+          onChange(event.target.checked);
+        }}
+      />
+    );
+  }
+
+  if (kind === "number") {
+    return (
+      <Input
+        type="number"
+        value={value == null || value === "" ? "" : String(value)}
+        readOnly={readOnly}
+        onChange={(event) => {
+          if (readOnly) return;
+          commitNumber(event.target.value, onChange);
+        }}
+      />
+    );
+  }
+
+  if (kind === "blocks") {
+    if (blocksEditor) {
+      return <>{blocksEditor({ value, readOnly, onChange })}</>;
+    }
+    return (
+      <JsonField kind="array" value={value} readOnly={readOnly} onValidChange={onChange} />
+    );
+  }
+
+  if (kind === "object") {
+    return (
+      <ObjectFieldEditor
+        name={name}
+        field={field}
+        value={value}
+        models={models}
+        objects={objects}
+        documentLists={documentLists}
+        readOnly={readOnly}
+        ancestorObjectNames={ancestorObjectNames}
+        blocksEditor={blocksEditor}
+        onChange={onChange}
+      />
+    );
+  }
+
+  if (kind === "array") {
+    return (
+      <ArrayFieldEditor
+        name={name}
+        field={field}
+        value={value}
+        models={models}
+        objects={objects}
+        documentLists={documentLists}
+        readOnly={readOnly}
+        ancestorObjectNames={ancestorObjectNames}
+        blocksEditor={blocksEditor}
+        onChange={onChange}
+      />
+    );
+  }
+
+  if ("multiline" in field && field.multiline) {
+    return (
+      <Textarea
+        rows={4}
+        value={value == null ? "" : String(value)}
+        readOnly={readOnly}
+        onChange={(event) => {
+          if (readOnly) return;
+          onChange(event.target.value);
+        }}
+      />
+    );
+  }
+
+  return (
+    <Input
+      value={value == null ? "" : String(value)}
+      readOnly={readOnly}
+      onChange={(event) => {
+        if (readOnly) return;
+        onChange(event.target.value);
+      }}
+    />
+  );
+}
+
+const styles = stylex.create({
+  sliderRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.md,
+  },
+  range: {
+    flex: 1,
+    minWidth: 0,
+    height: "16px",
+    margin: 0,
+    accentColor: colors.text,
+    cursor: "pointer",
+  },
+  sliderText: {
+    boxSizing: "border-box",
+    width: "4.5rem",
+    flexShrink: 0,
+    minHeight: "32px",
+    paddingInline: space.md,
+    paddingBlock: space.sm,
+    borderRadius: radius.md,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderColor: colors.border,
+    backgroundColor: colors.bgInput,
+    color: colors.text,
+    fontSize: type.md,
+    fontVariantNumeric: "tabular-nums",
+    outline: "none",
+    ":focus": {
+      borderColor: colors.focus,
+      outlineWidth: 2,
+      outlineStyle: "solid",
+      outlineColor: colors.focus,
+      outlineOffset: -1,
+    },
+  },
+  colorRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: space.sm,
+  },
+  colorPicker: {
+    width: "2.5rem",
+    height: "2rem",
+    padding: 0,
+    borderWidth: 0,
+    backgroundColor: "transparent",
+    cursor: "pointer",
+  },
+  check: {
+    width: "1rem",
+    height: "1rem",
+  },
+  objectFields: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.sm,
+  },
+  nest: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.xs,
+  },
+  nestToggle: {
+    alignSelf: "flex-start",
+  },
+  nestBody: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.sm,
+  },
+  arrayList: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.md,
+  },
+  arrayItem: {
+    display: "flex",
+    flexDirection: "column",
+    gap: space.sm,
+  },
+  arrayActions: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: space.xs,
+  },
+});