Field Lock Affordance

"use client";

import { useMemo, useState } from "react";
import { toast } from "sonner";

import { Input } from "@/components/f-ui/formily/connects/input";
import { Textarea } from "@/components/f-ui/formily/connects/textarea";
import { Form } from "@/components/f-ui/formily/form";
import { FormActions } from "@/components/f-ui/formily/form-actions";
import { FormField } from "@/components/f-ui/formily/form-field";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { Button } from "@/components/ui/button";

interface ReviewValues {
  createdAt: Date | null;
  sku: string;
  region: string;
  comment: string;
}

export function FormilyMixedPatternDemo() {
  const form = useMemo(
    () =>
      createForm<ReviewValues>({
        initialValues: {
          createdAt: new Date(2026, 7, 1),
          sku: "SKU-104",
          region: "apac",
          comment: "",
        },
      }),
    [],
  );
  const [submitted, setSubmitted] = useState<ReviewValues | null>(null);

  return (
    <div className="w-full max-w-sm space-y-4">
      <Form
        form={form}
        onSubmit={(values) => {
          setSubmitted({ ...values });
          toast.success("Submitted successfully");
        }}
      >
        <FormField
          name="createdAt"
          label="Created"
          description="System timestamp — display only"
          readPretty
          kind="date"
        />
        <FormField
          name="sku"
          label="SKU"
          description="Locked in this Edit session — still a textbox. Approver inbox uses display until Unlock, not this chrome."
          readOnly
          lockReason="Locked for this Edit session."
          component={[Input]}
        />
        <FormField
          name="region"
          label="Region"
          readOnly
          kind="radio"
          lockReason="Set by the approval route — reopen the request to change it."
          componentProps={{
            options: [
              { label: "APAC", value: "apac" },
              { label: "EMEA", value: "emea" },
            ],
            orientation: "horizontal",
          }}
        />
        <FormField
          name="comment"
          label="Comment"
          description="Writable this session"
          component={[Textarea, { placeholder: "Approver note" }]}
        />
        <FormActions>
          <Button type="submit">
            Submit review
          </Button>
        </FormActions>
      </Form>

      {submitted ? (
        <pre className="bg-muted text-muted-foreground overflow-auto rounded-md p-3 text-xs">
          <code>{JSON.stringify(submitted, null, 2)}</code>
        </pre>
      ) : null}
    </div>
  );
}

"use client";

import { useMemo } from "react";

import { defineEditableColumns } from "@/components/f-ui/editable-table/define-editable-columns";
import { EditableTable } from "@/components/f-ui/editable-table/editable-table";
import { Input } from "@/components/f-ui/formily/connects/input";
import { NumberInput } from "@/components/f-ui/formily/connects/number-input";
import { Select } from "@/components/f-ui/formily/connects/select";
import { Form } from "@/components/f-ui/formily/form";
import { createForm } from "@/components/f-ui/formily/internals/create-form";
import { f } from "@/components/f-ui/field-types/catalog";

type Line = {
  id: string;
  sku: string;
  shipVia: string;
  qty: number;
  lock: "permission" | "posted" | "dependency";
};

// Field-scoped reasons only. "Another user is editing this row" is a row lock
// (spec L14) and belongs to row chrome, not to a field mark.
const REASON: Record<Line["lock"], string> = {
  permission: "You do not have permission to edit this line",
  posted: "Locked once the line is posted to the ledger",
  dependency: "Unlocks after the customer is confirmed",
};

const SHIP_VIA = [
  { label: "Air", value: "air" },
  { label: "Ground", value: "ground" },
];

const columns = defineEditableColumns<Line>({
  sku: {
    ...f.text({ label: "SKU" }),
    size: 140,
    field: {
      component: [Input],
      readOnly: () => true,
      lockReason: (row) => REASON[(row as Line).lock],
    },
  },
  // Composite archetype: the trailing lock replaces the chevron rather than
  // sitting beside it (spec L19).
  shipVia: {
    ...f.text({ label: "Ship via" }),
    size: 110,
    field: {
      component: [Select, { options: SHIP_VIA, surface: "tableCell" }],
      readOnly: () => true,
      lockReason: () => "Carrier is set by the shipping plan",
    },
  },
  qty: {
    ...f.number({ label: "Qty" }),
    size: 96,
    field: {
      component: [NumberInput, { surface: "tableCell", min: 0 }],
    },
  },
});

export function EditableTableLockReasonDemo() {
  const form = useMemo(
    () =>
      createForm<{ lines: Line[] }>({
        initialValues: {
          lines: [
            { id: "a", sku: "SKU-1", shipVia: "air", qty: 2, lock: "permission" },
            { id: "b", sku: "SKU-2", shipVia: "ground", qty: 4, lock: "posted" },
            {
              id: "c",
              sku: "SKU-3",
              shipVia: "air",
              qty: 1,
              lock: "dependency",
            },
          ],
        },
      }),
    [],
  );

  return (
    <Form form={form} onSubmit={async () => undefined}>
      <p className="text-muted-foreground mb-3 text-sm">
        Locked cells stay muted, never red, and Qty stays writable so the
        difference is scannable in one pass. Focus a locked control to read why.
        Ship via is a locked composite: the lock takes the chevron&rsquo;s place
        instead of crowding beside it.
      </p>
      <EditableTable<Line>
        name="lines"
        columns={columns}
        getRowId={(r) => r.id}
        editMode="inline"
        variant="embedded"
      />
    </Form>
  );
}

"use client";

import { useState } from "react";

import { InlineEdit } from "@/components/f-ui/inline-edit/inline-edit";
import { Input } from "@/components/ui/input";

function Row({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="grid grid-cols-[8rem_1fr] items-center gap-3 py-1">
      <span className="text-muted-foreground text-sm">{label}</span>
      {children}
    </div>
  );
}

export function InlineEditLockDemo() {
  const [owner, setOwner] = useState("Dana Lin");

  return (
    <div className="max-w-lg">
      <Row label="Owner">
        <InlineEdit
          value={owner}
          affordance="always"
          onCommit={({ value }) => setOwner(value)}
          renderDisplay={(value) => <span>{value}</span>}
          renderEditor={({ value, onChange, onKeyDown, onBlur }) => (
            <Input
              aria-label="Owner"
              value={value}
              onChange={(event) => onChange(event.currentTarget.value)}
              onKeyDown={onKeyDown}
              onBlur={onBlur}
            />
          )}
        />
      </Row>

      <Row label="Contract ref">
        <InlineEdit
          value="CTR-4471"
          readOnly
          affordance="always"
          lockReason="Unlocks after the contract is countersigned"
          renderDisplay={(value) => <span>{value}</span>}
          renderEditor={({ value }) => <Input value={value} readOnly />}
        />
      </Row>

      <Row label="Renewal term">
        <InlineEdit
          value="12 months"
          disabled
          affordance="always"
          renderDisplay={(value) => <span>{value}</span>}
          renderEditor={({ value }) => <Input value={value} readOnly />}
        />
      </Row>
    </div>
  );
}