Forms

import { useOperationForm, useOperationSnapshot, useOperationField, useOperationItems } from "bijection/react";

const form = useOperationForm({
  client,
  operation: api.reports.createReport,
  draftKey: "new-report",
  initialValues: { title: "", files: [] },
  onAccepted(receipt) {
    navigateToReport(receipt.result);
  },
});

// In an event handler. Each step awaits the one it depends on; a failure also
// appears on the owner's `error`.
await form.field("title").set(title);
const files = form.field("files");
await files.choose(selectedFiles);
const [first] = files.items();
await first.field("caption").set("Train ticket");
await first.move(files.items().length - 1);
await first.remove();

// Inside your application-owned text control:
const title = useOperationField(form.field("title"));
<label htmlFor={title.id}>Title</label>
<input {...title.getInputProps()} />
<p {...title.issueProps}>
  {title.snapshot.visibleIssues[0]?.message}
  {title.snapshot.error instanceof Error && title.snapshot.error.message}
</p>

import { useState } from "react";
import { BijectionHttpClient } from "bijection/browser";
import { useOperationForm, useOperationSnapshot } from "bijection/react";
import { api } from "../bijection/_generated/api";
import type { Id } from "../bijection/_generated/dataModel";
import { TextField, AttachmentFields } from "./fields";
import { SaveControls } from "./form-controls";

export function NewReport({
  client,
  onSaved,
}: {
  client: BijectionHttpClient;
  onSaved: (record: Id<"reports">) => Promise<void>;
}) {
  // Application work only; the form shows its own failures on `error`.
  const [presentationError, setPresentationError] = useState<unknown>(null);
  const form = useOperationForm({
    client,
    operation: api.reports.createReport,
    draftKey: "new-report",
    initialValues: { title: "", files: [] },
    onAccepted: async (receipt) => {
      setPresentationError(null);
      try {
        await onSaved(receipt.result);
      } catch (error) {
        setPresentationError(error);
      }
    },
  });
  const canEdit = useOperationSnapshot(form, (snapshot) => snapshot.canEdit);
  const state = useOperationSnapshot(form, (snapshot) => snapshot.state);
  return (
    <form onSubmit={form.handleSubmit}>
      {state.kind !== "accepted" && (
        <fieldset disabled={!canEdit}>
          <TextField field={form.field("title")} label="Title" />
          <AttachmentFields
            field={form.field("files")}
            label="Supporting documents"
          />
        </fieldset>
      )}
      <SaveControls
        form={form}
        onStartAnother={() => void form.startAnother()}
      />
      {presentationError != null && (
        <p role="alert">
          {presentationError instanceof Error
            ? presentationError.message
            : String(presentationError)}
        </p>
      )}
    </form>
  );
}

<textarea {...title.getTextareaProps({
  ref: inputRef,
  onBlur: trackBlur,
  "aria-describedby": "title-hint",
})} />
<p id="title-hint">A short description of the report.</p>

const category = useOperationField(form.field("category"));

<Combobox
  {...category.getValueProps()}
  controlProps={category.getControlProps<HTMLButtonElement>()}
  onBlur={category.touch}
/>
<p {...category.issueProps}>
  {category.snapshot.visibleIssues[0]?.message}
  {category.snapshot.error instanceof Error && category.snapshot.error.message}
</p>

const date = useOperationField(form.field("date"));
const { value, onValueChange } = date.getValueProps();

<DatePicker
  value={value == null ? value : new Date(`${value}T00:00:00Z`)}
  onValueChange={day => onValueChange(day?.toISOString().slice(0, 10) ?? null)}
  controlProps={date.getControlProps<HTMLInputElement>()}
  onBlur={date.touch}
/>

const focusEditor = useCallback(() => editorRef.current?.focus(), []);

<div {...title.getControlProps({ focus: focusEditor })}>
  <RichTextEditor
    ref={editorRef}
    value={title.snapshot.text}
    onChange={text => void title.edit(text)}
    onBlur={title.touch}
  />
</div>
<p {...title.issueProps}>
  {title.snapshot.visibleIssues[0]?.message}
  {title.snapshot.error instanceof Error && title.snapshot.error.message}
</p>

import type { OperationField } from "bijection/browser";

function TextField({ field, label, id }: {
  field: OperationField<string>;
  label: string;
  id?: string | undefined;
}) {
  const binding = useOperationField(field, { id });
  return <div>
    <label htmlFor={binding.id}>{label}</label>
    <input {...binding.getInputProps()} />
    <p {...binding.issueProps}>
      {binding.snapshot.visibleIssues[0]?.message}
      {binding.snapshot.error != null && String(binding.snapshot.error)}
    </p>
  </div>;
}

// Inside the report form:
<TextField field={form.field("title")} label="Title" />

function AddressFields({ field }: {
  field: OperationField<{ street: string; city: string }>;
}) {
  return <fieldset>
    <legend>Address</legend>
    <TextField field={field.field("street")} label="Street" />
    <TextField field={field.field("city")} label="City" />
  </fieldset>;
}

const canSubmit = useOperationSnapshot(form, state => state.canSubmit);
const state = useOperationSnapshot(form, snapshot => snapshot.state);
// Your native form owns its markup:
<form onSubmit={form.handleSubmit}>
  {/* Application-owned field components use useOperationField. */}
  <button disabled={!canSubmit}>Save</button>
</form>

const availability = useOperationSnapshot(
  form,
  state => ({ canSubmit: state.canSubmit, working: state.working }),
  { compare: (a, b) => a.canSubmit === b.canSubmit && a.working === b.working },
);

const items = useOperationItems(form.field("files"));
items.map(item => <AttachmentRow key={item.itemKey} field={item} />);

const files = form.field("files");
const uploads = useOperationField(files);
<label htmlFor={uploads.id}>Documents</label>
<input {...uploads.getInputProps()} />
<p {...uploads.issueProps}>
  {uploads.snapshot.visibleIssues[0]?.message}
  {uploads.snapshot.error instanceof Error && uploads.snapshot.error.message}
</p>

const receipt = await form.submit();
// The local business commit is confirmed. Render/open its result.
await form.startAnother(); // Start another draft after confirmation.