makersclaw 0.2.0 → 0.3.1

package/registry/blocks/record-form/record-fields.jsx

@@ -0,0 +1,457 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import {
+  Avatar,
+  Badge,
+  Checkbox,
+  Combobox,
+  DatePicker,
+  Field,
+  FileInput,
+  IconButton,
+  Image,
+  Input,
+  InputGroup,
+  PasswordInput,
+  RadioGroup,
+  Rating,
+  Select,
+  Switch,
+  Textarea,
+  TimeInput,
+  Button,
+} from "../../ui";
+
+// One field of a RecordForm, drawn from its description: the kit part its
+// `type` names, inside a Field (label, help, error). Every control is
+// controlled — the form holds the draft — and reports a plain value, never
+// an event. RecordForm is the only caller.
+
+// The types that take the whole row in a two-column grid unless the field
+// says `width: "half"`.
+export const WIDE = new Set(["textarea", "choice-cards", "checkboxes", "checkbox", "switch", "photo", "images", "radio"]);
+
+// Types that carry their own label (a box or a switch names itself).
+const SELF_LABELLED = new Set(["checkbox", "switch"]);
+
+/** An option list from strings or { value, label }. */
+function opts(options) {
+  return (options ?? []).map((o) => (typeof o === "object" && o !== null ? o : { value: String(o), label: String(o) }));
+}
+
+/** A picture value — a URL string or { src, file } — to its src. */
+export function srcOf(v) {
+  return typeof v === "string" ? v : v?.src ?? null;
+}
+
+export function RecordField({ field, id, value, values, error, disabled, onChange, onBlur }) {
+  const type = field.type ?? "text";
+  const help = field.help ?? field.hint;
+  const describedBy = error ? `${id}-error` : help ? `${id}-hint` : undefined;
+  const off = disabled || field.disabled;
+  const invalid = Boolean(error);
+  const common = { id, disabled: off, invalid, "aria-describedby": describedBy, onBlur };
+
+  let control;
+  switch (type) {
+    case "textarea":
+      control = (
+        <Textarea
+          {...common}
+          name={field.name}
+          value={value ?? ""}
+          rows={field.rows ?? 4}
+          placeholder={field.placeholder}
+          maxLength={field.maxLength}
+          required={field.required}
+          readOnly={field.readOnly}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      );
+      break;
+    case "password":
+      control = (
+        <PasswordInput
+          {...common}
+          name={field.name}
+          value={value ?? ""}
+          placeholder={field.placeholder}
+          autoComplete={field.autoComplete ?? "new-password"}
+          required={field.required}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      );
+      break;
+    case "select":
+      control = (
+        <Select
+          {...common}
+          name={field.name}
+          value={value ?? ""}
+          required={field.required}
+          onChange={(e) => onChange(e.target.value)}
+        >
+          <option value="" disabled={field.required}>
+            {field.placeholder ?? "Choose…"}
+          </option>
+          {opts(field.options).map((o) => (
+            <option key={o.value} value={o.value} disabled={o.disabled}>
+              {o.label}
+            </option>
+          ))}
+        </Select>
+      );
+      break;
+    case "combobox":
+    case "tags": {
+      const tags = type === "tags";
+      const multiple = tags || Boolean(field.multiple);
+      control = (
+        <Combobox
+          id={id}
+          name={field.name}
+          options={opts(field.options)}
+          value={multiple ? value ?? [] : value ?? null}
+          onValueChange={(v) => onChange(v)}
+          multiple={multiple}
+          creatable={tags || field.creatable}
+          searchable={field.searchable ?? true}
+          clearable={!multiple && !field.required}
+          placeholder={field.placeholder}
+          disabled={off}
+          invalid={invalid}
+          aria-describedby={describedBy}
+          onOpenChange={(open) => {
+            if (!open) onBlur?.();
+          }}
+        />
+      );
+      break;
+    }
+    case "radio":
+    case "choice-cards":
+      control = (
+        <RadioGroup
+          id={id}
+          name={id}
+          value={value ?? ""}
+          onChange={(v) => {
+            onChange(v);
+            onBlur?.();
+          }}
+          options={opts(field.options).map((o) => ({ ...o, label: o.badge || o.price ? <ChoiceLabel option={o} /> : o.label }))}
+          variant={type === "choice-cards" ? "card" : "list"}
+          orientation={field.orientation ?? (type === "choice-cards" ? "horizontal" : "vertical")}
+          disabled={off}
+          invalid={invalid}
+          required={field.required}
+        />
+      );
+      break;
+    case "checkbox":
+      control = (
+        <Checkbox
+          id={id}
+          name={field.name}
+          checked={value === true}
+          onChange={(e) => {
+            onChange(e.target.checked);
+            onBlur?.();
+          }}
+          disabled={off}
+          aria-invalid={invalid || undefined}
+          aria-describedby={describedBy}
+          label={<Labelled field={field} />}
+        />
+      );
+      break;
+    case "switch":
+      control = (
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0 pt-2.5">
+            <label htmlFor={id} className="text-sm font-medium text-foreground">
+              {field.label}
+            </label>
+            {field.description ? <p className="text-sm text-muted-foreground">{field.description}</p> : null}
+          </div>
+          <Switch
+            id={id}
+            checked={value === true}
+            onChange={(e) => {
+              onChange(e.target.checked);
+              onBlur?.();
+            }}
+            disabled={off}
+          />
+        </div>
+      );
+      break;
+    case "checkboxes": {
+      const list = Array.isArray(value) ? value : [];
+      return (
+        <fieldset id={id} className="grid gap-1.5" aria-describedby={describedBy} aria-invalid={invalid || undefined}>
+          <legend className="text-sm font-medium text-foreground">
+            {field.label}
+            {field.required ? <span aria-hidden="true" className="text-destructive"> *</span> : null}
+          </legend>
+          {field.description ? <p className="text-sm text-muted-foreground">{field.description}</p> : null}
+          <div className={field.orientation === "horizontal" ? "flex flex-wrap gap-x-6" : "grid"}>
+            {opts(field.options).map((o) => (
+              <Checkbox
+                key={o.value}
+                id={`${id}-${o.value}`}
+                checked={list.includes(o.value)}
+                disabled={off || o.disabled}
+                onChange={(e) => {
+                  onChange(e.target.checked ? [...list, o.value] : list.filter((x) => x !== o.value));
+                  onBlur?.();
+                }}
+                label={o.description ? <Labelled field={o} /> : o.label}
+              />
+            ))}
+          </div>
+          <Note id={id} error={error} help={help} />
+        </fieldset>
+      );
+    }
+    case "date":
+      control = (
+        <DatePicker
+          id={id}
+          name={field.name}
+          value={value || null}
+          onChange={(v) => {
+            onChange(v);
+            onBlur?.();
+          }}
+          placeholder={field.placeholder ?? "Pick a date"}
+          min={field.min}
+          max={field.max}
+          captionLayout={field.captionLayout}
+          clearable={!field.required}
+          disabled={off}
+          invalid={invalid}
+          aria-describedby={describedBy}
+        />
+      );
+      break;
+    case "time":
+      control = (
+        <TimeInput
+          {...common}
+          name={field.name}
+          value={value ?? ""}
+          min={field.min}
+          max={field.max}
+          step={field.step}
+          required={field.required}
+          onChange={(e) => onChange(e.target.value)}
+        />
+      );
+      break;
+    case "rating":
+      control = (
+        <Rating
+          id={id}
+          name={field.name}
+          value={Number(value) || 0}
+          max={field.max ?? 5}
+          label={field.label}
+          disabled={off}
+          onChange={(n) => {
+            onChange(n);
+            onBlur?.();
+          }}
+        />
+      );
+      break;
+    case "photo":
+      control = <PhotoControl field={field} id={id} value={value} values={values} disabled={off} onChange={onChange} describedBy={describedBy} />;
+      break;
+    case "images":
+      control = <ImagesControl field={field} id={id} value={value} disabled={off} onChange={onChange} describedBy={describedBy} />;
+      break;
+    case "static":
+      control = (
+        <p id={id} className="flex min-h-11 items-center text-sm text-foreground">
+          {field.format ? field.format(value, values) : value ?? "—"}
+        </p>
+      );
+      break;
+    default: {
+      // text · email · url · tel · number, with an icon, a prefix or a suffix
+      const inputType = ["email", "url", "tel", "number"].includes(type) ? type : "text";
+      const props = {
+        ...common,
+        name: field.name,
+        type: inputType,
+        value: value ?? "",
+        placeholder: field.placeholder,
+        autoComplete: field.autoComplete,
+        inputMode: type === "number" ? "decimal" : field.inputMode,
+        min: field.min,
+        max: field.max,
+        step: field.step,
+        maxLength: field.maxLength,
+        required: field.required,
+        readOnly: field.readOnly,
+        onChange: (e) => onChange(e.target.value),
+      };
+      control =
+        field.icon || field.prefix || field.suffix ? (
+          <InputGroup {...props} icon={field.icon} prefix={field.prefix} suffix={field.suffix} />
+        ) : (
+          <Input {...props} />
+        );
+    }
+  }
+
+  if (SELF_LABELLED.has(type)) {
+    return (
+      <div className="grid gap-1">
+        {control}
+        <Note id={id} error={error} help={type === "checkbox" ? null : help} />
+      </div>
+    );
+  }
+  return (
+    <Field id={id} label={field.label} hint={help} error={error} required={field.required}>
+      {control}
+    </Field>
+  );
+}
+
+function Note({ id, error, help }) {
+  if (error) {
+    return (
+      <p id={`${id}-error`} role="alert" className="text-xs text-destructive">
+        {error}
+      </p>
+    );
+  }
+  return help ? (
+    <p id={`${id}-hint`} className="text-xs text-muted-foreground">
+      {help}
+    </p>
+  ) : null;
+}
+
+/** A box's label with its description under it. */
+function Labelled({ field }) {
+  return (
+    <span className="grid gap-0.5">
+      <span className="font-medium text-foreground">
+        {field.label}
+        {field.required ? <span aria-hidden="true" className="text-destructive"> *</span> : null}
+      </span>
+      {field.description ?? field.help ? <span className="text-muted-foreground">{field.description ?? field.help}</span> : null}
+    </span>
+  );
+}
+
+/** A choice card's title row: the name, a badge, a price at the end. */
+function ChoiceLabel({ option }) {
+  return (
+    <span className="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
+      <span className="inline-flex flex-wrap items-center gap-2">
+        {option.label}
+        {option.badge ? (
+          <Badge tone="primary" variant="soft">
+            {option.badge}
+          </Badge>
+        ) : null}
+      </span>
+      {option.price ? (
+        <span data-nums className="text-sm font-normal text-foreground">
+          {option.price}
+          {option.per ? <span className="text-muted-foreground">{option.per}</span> : null}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
+/** Object URLs made for picked files, revoked when the form goes. */
+function useObjectUrls() {
+  const made = useRef([]);
+  useEffect(
+    () => () => {
+      made.current.forEach((u) => URL.revokeObjectURL(u));
+    },
+    [],
+  );
+  return (file) => {
+    const u = URL.createObjectURL(file);
+    made.current.push(u);
+    return u;
+  };
+}
+
+/** A profile picture: the current one, Upload, Remove. */
+function PhotoControl({ field, id, value, values, disabled, onChange, describedBy }) {
+  const url = useObjectUrls();
+  const src = srcOf(value);
+  const who = field.nameFrom ? field.nameFrom(values) : field.label;
+  return (
+    <div id={id} className="flex flex-wrap items-center gap-4" aria-describedby={describedBy}>
+      <Avatar name={who} src={src ?? undefined} size="lg" shape={field.shape ?? "round"} />
+      <div className="flex flex-wrap gap-2">
+        <FileInput
+          accept={field.accept ?? "image/*"}
+          disabled={disabled}
+          onFiles={([file]) => onChange({ src: url(file), file, name: file.name })}
+          size="sm"
+        >
+          {src ? field.replaceLabel ?? "Upload new photo" : field.uploadLabel ?? "Upload photo"}
+        </FileInput>
+        {src ? (
+          <Button variant="quiet" size="sm" disabled={disabled} onClick={() => onChange(null)}>
+            {field.removeLabel ?? "Remove"}
+          </Button>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+/** A row of pictures, each removable, and Add while there is room. */
+function ImagesControl({ field, id, value, disabled, onChange, describedBy }) {
+  const url = useObjectUrls();
+  const list = Array.isArray(value) ? value : [];
+  const room = field.maxItems ? field.maxItems - list.length : Infinity;
+  return (
+    <div id={id} className="grid grid-cols-3 gap-3 sm:grid-cols-4" aria-describedby={describedBy}>
+      {list.map((img, i) => {
+        const alt = (typeof img === "object" && (img.alt ?? img.name)) || `${field.label} ${i + 1}`;
+        return (
+          <div key={`${srcOf(img)}-${i}`} className="relative">
+            <Image src={srcOf(img)} alt={alt} ratio="square" className="w-full border border-border" />
+            <IconButton
+              icon="trash"
+              label={`Remove ${alt}`}
+              size="sm"
+              variant="secondary"
+              disabled={disabled}
+              className="absolute right-1 top-1"
+              onClick={() => onChange(list.filter((_, j) => j !== i))}
+            />
+          </div>
+        );
+      })}
+      {room > 0 ? (
+        <FileInput
+          accept={field.accept ?? "image/*"}
+          multiple
+          disabled={disabled}
+          variant="secondary"
+          icon="plus"
+          className="aspect-square h-auto w-full border-dashed"
+          onFiles={(files) => onChange([...list, ...files.slice(0, room).map((file) => ({ src: url(file), file, name: file.name }))])}
+        >
+          {field.addLabel ?? "Add"}
+        </FileInput>
+      ) : null}
+    </div>
+  );
+}