@fogpipe/forma-react 0.17.0 → 0.18.0

package/src/defaults/components/ArrayField.tsx

@@ -0,0 +1,183 @@
+import React, { useRef } from "react";
+import type { ArrayComponentProps } from "../../types.js";
+
+export function ArrayField({ field }: ArrayComponentProps) {
+  const hasErrors = field.visibleErrors.length > 0;
+
+  // Stable keys via ref-based sequential counter
+  const itemKeysRef = useRef<string[]>([]);
+  const nextKeyRef = useRef(0);
+
+  const currentLength = field.helpers.items.length;
+  const keysLength = itemKeysRef.current.length;
+
+  if (currentLength > keysLength) {
+    for (let i = keysLength; i < currentLength; i++) {
+      itemKeysRef.current.push(`item-${nextKeyRef.current++}`);
+    }
+  } else if (currentLength < keysLength) {
+    itemKeysRef.current.length = currentLength;
+  }
+
+  const fieldOrder =
+    field.itemFieldOrder ?? Object.keys(field.itemFields);
+
+  return (
+    <div
+      className="forma-array"
+      aria-invalid={hasErrors || undefined}
+    >
+      {field.helpers.items.length === 0 && (
+        <p className="forma-array__empty">No items</p>
+      )}
+      {field.helpers.items.map((_, index) => (
+        <div
+          key={itemKeysRef.current[index]}
+          className="forma-array__item"
+        >
+          <div className="forma-array__item-fields">
+            {fieldOrder.map((fieldName) => {
+              const itemProps = field.helpers.getItemFieldProps(
+                index,
+                fieldName,
+              );
+              return (
+                <div key={fieldName} className="forma-field">
+                  <label
+                    htmlFor={itemProps.name}
+                    className="forma-label"
+                  >
+                    {itemProps.label}
+                  </label>
+                  {renderItemField(itemProps)}
+                  {itemProps.errors.length > 0 && itemProps.touched && (
+                    <div className="forma-field__errors" role="alert">
+                      {itemProps.errors.map((err, i) => (
+                        <span key={i} className="forma-field__error">
+                          {err.message}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+          <button
+            type="button"
+            className="forma-button forma-button--danger forma-array__remove"
+            onClick={() => field.helpers.remove(index)}
+            disabled={!field.helpers.canRemove || field.disabled}
+          >
+            Remove
+          </button>
+        </div>
+      ))}
+      <button
+        type="button"
+        className="forma-button forma-button--secondary forma-array__add"
+        onClick={() => field.helpers.push()}
+        disabled={!field.helpers.canAdd || field.disabled}
+      >
+        + Add Item
+      </button>
+    </div>
+  );
+}
+
+function renderItemField(
+  itemProps: ReturnType<
+    ArrayComponentProps["field"]["helpers"]["getItemFieldProps"]
+  >,
+) {
+  const type = itemProps.type;
+
+  if (type === "select" && itemProps.options) {
+    return (
+      <select
+        id={itemProps.name}
+        className="forma-select"
+        value={String(itemProps.value ?? "")}
+        onChange={(e) => {
+          const value = e.target.value;
+          if (!value) {
+            itemProps.onChange(null);
+          } else {
+            const option = itemProps.options?.find(
+              (opt) => String(opt.value) === value,
+            );
+            itemProps.onChange(option ? option.value : value);
+          }
+        }}
+        onBlur={itemProps.onBlur}
+        disabled={!itemProps.enabled}
+      >
+        <option value="">Select...</option>
+        {itemProps.options.map((opt) => (
+          <option key={String(opt.value)} value={String(opt.value)}>
+            {opt.label}
+          </option>
+        ))}
+      </select>
+    );
+  }
+
+  if (type === "number" || type === "integer") {
+    return (
+      <input
+        id={itemProps.name}
+        type="number"
+        className="forma-input"
+        value={itemProps.value != null ? String(itemProps.value) : ""}
+        onChange={(e) => {
+          const val = e.target.value;
+          if (val === "") {
+            itemProps.onChange(null);
+          } else {
+            const num =
+              type === "integer"
+                ? parseInt(val, 10)
+                : parseFloat(val);
+            itemProps.onChange(isNaN(num) ? null : num);
+          }
+        }}
+        onBlur={itemProps.onBlur}
+        disabled={!itemProps.enabled}
+        step={type === "integer" ? 1 : "any"}
+      />
+    );
+  }
+
+  if (type === "boolean") {
+    return (
+      <div className="forma-checkbox">
+        <input
+          id={itemProps.name}
+          type="checkbox"
+          className="forma-checkbox__input"
+          checked={Boolean(itemProps.value)}
+          onChange={(e) => itemProps.onChange(e.target.checked)}
+          onBlur={itemProps.onBlur}
+          disabled={!itemProps.enabled}
+        />
+        <label htmlFor={itemProps.name} className="forma-checkbox__label">
+          {itemProps.label}
+        </label>
+      </div>
+    );
+  }
+
+  // Default: text input
+  return (
+    <input
+      id={itemProps.name}
+      type="text"
+      className="forma-input"
+      value={String(itemProps.value ?? "")}
+      onChange={(e) => itemProps.onChange(e.target.value)}
+      onBlur={itemProps.onBlur}
+      disabled={!itemProps.enabled}
+      placeholder={itemProps.placeholder}
+    />
+  );
+}

package/src/defaults/components/BooleanInput.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+import type { BooleanComponentProps } from "../../types.js";
+
+export function BooleanInput({ field }: BooleanComponentProps) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const describedBy = [
+    field.description ? `${field.name}-description` : null,
+    hasErrors ? `${field.name}-errors` : null,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className="forma-checkbox">
+      <input
+        id={field.name}
+        name={field.name}
+        type="checkbox"
+        className="forma-checkbox__input"
+        checked={field.value ?? false}
+        onChange={(e) => field.onChange(e.target.checked)}
+        onBlur={field.onBlur}
+        disabled={field.disabled}
+        aria-invalid={hasErrors || undefined}
+        aria-describedby={describedBy || undefined}
+      />
+      <label htmlFor={field.name} className="forma-checkbox__label">
+        {field.label}
+      </label>
+    </div>
+  );
+}

package/src/defaults/components/ComputedDisplay.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import type { ComputedComponentProps } from "../../types.js";
+
+export function ComputedDisplay({ field }: ComputedComponentProps) {
+  let displayValue: string;
+  if (field.value === null || field.value === undefined) {
+    displayValue = "\u2014";
+  } else if (typeof field.value === "object") {
+    try {
+      displayValue = JSON.stringify(field.value);
+    } catch {
+      displayValue = String(field.value);
+    }
+  } else {
+    displayValue = String(field.value);
+  }
+
+  return (
+    <output
+      id={field.name}
+      className="forma-computed"
+    >
+      {displayValue}
+    </output>
+  );
+}

package/src/defaults/components/DateInput.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import type { DateComponentProps, DateTimeComponentProps } from "../../types.js";
+
+export function DateInput({ field }: DateComponentProps) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const describedBy = [
+    field.description ? `${field.name}-description` : null,
+    hasErrors ? `${field.name}-errors` : null,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <input
+      id={field.name}
+      name={field.name}
+      type="date"
+      className="forma-input forma-input--date"
+      value={field.value ?? ""}
+      onChange={(e) => field.onChange(e.target.value || null)}
+      onBlur={field.onBlur}
+      disabled={field.disabled}
+      readOnly={field.readonly}
+      aria-invalid={hasErrors || undefined}
+      aria-required={field.required || undefined}
+      aria-describedby={describedBy || undefined}
+    />
+  );
+}
+
+export function DateTimeInput({ field }: DateTimeComponentProps) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const describedBy = [
+    field.description ? `${field.name}-description` : null,
+    hasErrors ? `${field.name}-errors` : null,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  // datetime-local expects "YYYY-MM-DDTHH:mm" format
+  const inputValue = field.value ?? "";
+
+  return (
+    <input
+      id={field.name}
+      name={field.name}
+      type="datetime-local"
+      className="forma-input forma-input--datetime"
+      value={inputValue}
+      onChange={(e) => field.onChange(e.target.value || null)}
+      onBlur={field.onBlur}
+      disabled={field.disabled}
+      readOnly={field.readonly}
+      aria-invalid={hasErrors || undefined}
+      aria-required={field.required || undefined}
+      aria-describedby={describedBy || undefined}
+    />
+  );
+}

package/src/defaults/components/DisplayField.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import type { DisplayComponentProps } from "../../types.js";
+
+export function DisplayField({ field }: DisplayComponentProps) {
+  const content =
+    field.sourceValue !== undefined
+      ? String(field.sourceValue)
+      : field.content;
+
+  return (
+    <div className="forma-display">
+      {content && <p className="forma-display__content">{content}</p>}
+    </div>
+  );
+}

package/src/defaults/components/FallbackField.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import type { FieldComponentProps } from "../../types.js";
+
+declare const process: { env: { NODE_ENV?: string } } | undefined;
+
+export function FallbackField({ field }: FieldComponentProps) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const isDev =
+    typeof process !== "undefined" && process.env.NODE_ENV !== "production";
+
+  return (
+    <div className="forma-fallback">
+      {isDev && (
+        <p className="forma-fallback__warning">
+          Unknown field type: &quot;{field.field.type}&quot;
+        </p>
+      )}
+      <input
+        id={field.name}
+        name={field.name}
+        type="text"
+        className="forma-input"
+        value={String(field.value ?? "")}
+        onChange={(e) => {
+          if ("onChange" in field && typeof field.onChange === "function") {
+            (field.onChange as (value: string) => void)(e.target.value);
+          }
+        }}
+        onBlur={field.onBlur}
+        disabled={field.disabled}
+        aria-invalid={hasErrors || undefined}
+      />
+    </div>
+  );
+}

package/src/defaults/components/MatrixField.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+import type { MatrixComponentProps } from "../../types.js";
+
+export function MatrixField({ field }: MatrixComponentProps) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const visibleRows = field.rows.filter((r) => r.visible);
+  const currentValue = field.value ?? {};
+
+  const handleChange = (
+    rowId: string,
+    colValue: string | number,
+  ) => {
+    if (field.disabled) return;
+
+    const next = { ...currentValue };
+    if (field.multiSelect) {
+      const current = (currentValue[rowId] ?? []) as string[];
+      const colStr = String(colValue);
+      const exists = current.includes(colStr);
+      next[rowId] = exists
+        ? current.filter((v) => v !== colStr)
+        : [...current, colStr];
+    } else {
+      next[rowId] = colValue;
+    }
+    field.onChange(next as Record<string, string | number | string[] | number[]>);
+    field.onBlur();
+  };
+
+  const isChecked = (
+    rowId: string,
+    colValue: string | number,
+  ): boolean => {
+    const rowValue = currentValue[rowId];
+    if (rowValue === undefined || rowValue === null) return false;
+    if (Array.isArray(rowValue)) {
+      return (rowValue as (string | number)[]).includes(colValue);
+    }
+    return rowValue === colValue;
+  };
+
+  return (
+    <div className="forma-matrix" aria-invalid={hasErrors || undefined}>
+      <table className="forma-matrix__table" role="grid">
+        <thead>
+          <tr>
+            <th scope="col" className="forma-matrix__corner" />
+            {field.columns.map((col) => (
+              <th
+                key={String(col.value)}
+                scope="col"
+                className="forma-matrix__col-header"
+              >
+                {col.label}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {visibleRows.map((row) => (
+            <tr key={row.id} className="forma-matrix__row">
+              <th scope="row" className="forma-matrix__row-header">
+                {row.label}
+              </th>
+              {field.columns.map((col) => {
+                const cellId = `${field.name}-${row.id}-${col.value}`;
+                return (
+                  <td key={String(col.value)} className="forma-matrix__cell">
+                    <input
+                      id={cellId}
+                      type={field.multiSelect ? "checkbox" : "radio"}
+                      name={
+                        field.multiSelect
+                          ? cellId
+                          : `${field.name}-${row.id}`
+                      }
+                      className={
+                        field.multiSelect
+                          ? "forma-checkbox__input"
+                          : "forma-radio__input"
+                      }
+                      checked={isChecked(row.id, col.value)}
+                      onChange={() => handleChange(row.id, col.value)}
+                      disabled={field.disabled}
+                    />
+                    <label htmlFor={cellId} className="forma-sr-only">
+                      {row.label}: {col.label}
+                    </label>
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/src/defaults/components/MultiSelectInput.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import type { MultiSelectComponentProps } from "../../types.js";
+
+export function MultiSelectInput({ field }: MultiSelectComponentProps) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const describedBy = [
+    field.description ? `${field.name}-description` : null,
+    hasErrors ? `${field.name}-errors` : null,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const selected = field.value ?? [];
+
+  const handleToggle = (optionValue: string) => {
+    if (selected.includes(optionValue)) {
+      field.onChange(selected.filter((v) => v !== optionValue));
+    } else {
+      field.onChange([...selected, optionValue]);
+    }
+    field.onBlur();
+  };
+
+  return (
+    <fieldset
+      className="forma-multiselect"
+      aria-describedby={describedBy || undefined}
+      aria-invalid={hasErrors || undefined}
+    >
+      <legend className="forma-sr-only">{field.label}</legend>
+      {field.options.map((opt) => {
+        const optId = `${field.name}-${opt.value}`;
+        return (
+          <div key={String(opt.value)} className="forma-multiselect__option">
+            <input
+              id={optId}
+              type="checkbox"
+              className="forma-checkbox__input"
+              checked={selected.includes(String(opt.value))}
+              onChange={() => handleToggle(String(opt.value))}
+              disabled={field.disabled}
+            />
+            <label htmlFor={optId} className="forma-checkbox__label">
+              {opt.label}
+            </label>
+          </div>
+        );
+      })}
+    </fieldset>
+  );
+}

package/src/defaults/components/NumberInput.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import type { NumberComponentProps, IntegerComponentProps } from "../../types.js";
+
+function NumberInputBase({
+  field,
+  parseValue,
+}: {
+  field: NumberComponentProps["field"] | IntegerComponentProps["field"];
+  parseValue: (val: string) => number;
+}) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const describedBy = [
+    field.description ? `${field.name}-description` : null,
+    hasErrors ? `${field.name}-errors` : null,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const input = (
+    <input
+      id={field.name}
+      name={field.name}
+      type="number"
+      className={`forma-input forma-input--${field.fieldType}`}
+      value={field.value != null ? String(field.value) : ""}
+      onChange={(e) => {
+        const val = e.target.value;
+        if (val === "") {
+          field.onChange(null);
+        } else {
+          const num = parseValue(val);
+          field.onChange(isNaN(num) ? null : num);
+        }
+      }}
+      onBlur={field.onBlur}
+      disabled={field.disabled}
+      readOnly={field.readonly}
+      placeholder={field.placeholder}
+      min={field.min}
+      max={field.max}
+      step={field.step ?? (field.fieldType === "integer" ? 1 : "any")}
+      aria-invalid={hasErrors || undefined}
+      aria-required={field.required || undefined}
+      aria-describedby={describedBy || undefined}
+    />
+  );
+
+  if (field.prefix || field.suffix) {
+    return (
+      <div className="forma-input-adorner">
+        {field.prefix && (
+          <span className="forma-input-adorner__prefix">{field.prefix}</span>
+        )}
+        {input}
+        {field.suffix && (
+          <span className="forma-input-adorner__suffix">{field.suffix}</span>
+        )}
+      </div>
+    );
+  }
+
+  return input;
+}
+
+export function NumberInput({ field }: NumberComponentProps) {
+  return <NumberInputBase field={field} parseValue={parseFloat} />;
+}
+
+export function IntegerInput({ field }: IntegerComponentProps) {
+  return (
+    <NumberInputBase field={field} parseValue={(v) => parseInt(v, 10)} />
+  );
+}

package/src/defaults/components/ObjectField.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import type { ObjectComponentProps } from "../../types.js";
+
+export function ObjectField({ field }: ObjectComponentProps) {
+  const hasErrors = field.visibleErrors.length > 0;
+
+  return (
+    <fieldset
+      className="forma-object"
+      aria-invalid={hasErrors || undefined}
+    >
+      <legend className="forma-object__legend">{field.label}</legend>
+      {field.description && (
+        <p className="forma-object__description">{field.description}</p>
+      )}
+      <div className="forma-object__fields">
+        {/* Object child fields are rendered by FormRenderer, not here.
+            The object component is a visual container only. */}
+      </div>
+    </fieldset>
+  );
+}

package/src/defaults/components/SelectInput.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import type { SelectComponentProps } from "../../types.js";
+
+export function SelectInput({ field }: SelectComponentProps) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const describedBy = [
+    field.description ? `${field.name}-description` : null,
+    hasErrors ? `${field.name}-errors` : null,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <select
+      id={field.name}
+      name={field.name}
+      className="forma-select"
+      value={field.value !== null ? String(field.value) : ""}
+      onChange={(e) => {
+        const value = e.target.value;
+        if (!value) {
+          field.onChange(null);
+        } else {
+          // Preserve string value
+          field.onChange(value);
+        }
+      }}
+      onBlur={field.onBlur}
+      disabled={field.disabled}
+      aria-invalid={hasErrors || undefined}
+      aria-required={field.required || undefined}
+      aria-describedby={describedBy || undefined}
+    >
+      {(!field.required || field.value === null) && (
+        <option value="">{field.placeholder ?? "Select..."}</option>
+      )}
+      {field.options.map((opt) => (
+        <option key={String(opt.value)} value={String(opt.value)}>
+          {opt.label}
+        </option>
+      ))}
+    </select>
+  );
+}

package/src/defaults/components/TextInput.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import type { TextComponentProps } from "../../types.js";
+
+export function TextInput({ field }: TextComponentProps) {
+  const inputType = field.fieldType === "phone" ? "tel" : field.fieldType;
+
+  const hasErrors = field.visibleErrors.length > 0;
+  const describedBy = [
+    field.description ? `${field.name}-description` : null,
+    hasErrors ? `${field.name}-errors` : null,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const input = (
+    <input
+      id={field.name}
+      name={field.name}
+      type={inputType}
+      className="forma-input"
+      value={field.value}
+      onChange={(e) => field.onChange(e.target.value)}
+      onBlur={field.onBlur}
+      disabled={field.disabled}
+      readOnly={field.readonly}
+      placeholder={field.placeholder}
+      aria-invalid={hasErrors || undefined}
+      aria-required={field.required || undefined}
+      aria-describedby={describedBy || undefined}
+    />
+  );
+
+  if (field.prefix || field.suffix) {
+    return (
+      <div className="forma-input-adorner">
+        {field.prefix && (
+          <span className="forma-input-adorner__prefix">{field.prefix}</span>
+        )}
+        {input}
+        {field.suffix && (
+          <span className="forma-input-adorner__suffix">{field.suffix}</span>
+        )}
+      </div>
+    );
+  }
+
+  return input;
+}