@fogpipe/forma-react 0.17.1 → 0.19.0

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,22 @@
+import React from "react";
+import type { FormatOptions } from "@fogpipe/forma-core";
+import { formatValue } from "@fogpipe/forma-core";
+import type { DisplayComponentProps } from "../../types.js";
+
+const FORMAT_DEFAULTS: FormatOptions = { nullDisplay: "\u2014" };
+
+export function DisplayField({ field }: DisplayComponentProps) {
+  const options = field.formatOptions
+    ? { ...FORMAT_DEFAULTS, ...field.formatOptions }
+    : FORMAT_DEFAULTS;
+  const content =
+    field.sourceValue !== undefined
+      ? formatValue(field.sourceValue, field.format, options)
+      : 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;
+}

package/src/defaults/components/TextareaInput.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import type { TextComponentProps } from "../../types.js";
+
+export function TextareaInput({ field }: TextComponentProps) {
+  const hasErrors = field.visibleErrors.length > 0;
+  const describedBy = [
+    field.description ? `${field.name}-description` : null,
+    hasErrors ? `${field.name}-errors` : null,
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  const textarea = (
+    <textarea
+      id={field.name}
+      name={field.name}
+      className="forma-textarea"
+      value={field.value}
+      onChange={(e) => field.onChange(e.target.value)}
+      onBlur={field.onBlur}
+      disabled={field.disabled}
+      readOnly={field.readonly}
+      placeholder={field.placeholder}
+      rows={3}
+      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>
+        )}
+        {textarea}
+        {field.suffix && (
+          <span className="forma-input-adorner__suffix">{field.suffix}</span>
+        )}
+      </div>
+    );
+  }
+
+  return textarea;
+}

package/src/defaults/index.ts

@@ -0,0 +1,33 @@
+// Convenience wrapper
+export { DefaultFormRenderer } from "./DefaultFormRenderer.js";
+export type { DefaultFormRendererProps } from "./DefaultFormRenderer.js";
+
+// Component map + layout aliases
+export {
+  defaultComponentMap,
+  defaultFieldWrapper,
+  defaultLayout,
+  defaultWizardLayout,
+  defaultPageWrapper,
+} from "./componentMap.js";
+
+// Individual field components (for override/cherry-pick)
+export { TextInput } from "./components/TextInput.js";
+export { TextareaInput } from "./components/TextareaInput.js";
+export { NumberInput, IntegerInput } from "./components/NumberInput.js";
+export { BooleanInput } from "./components/BooleanInput.js";
+export { DateInput, DateTimeInput } from "./components/DateInput.js";
+export { SelectInput } from "./components/SelectInput.js";
+export { MultiSelectInput } from "./components/MultiSelectInput.js";
+export { ArrayField } from "./components/ArrayField.js";
+export { ObjectField } from "./components/ObjectField.js";
+export { ComputedDisplay } from "./components/ComputedDisplay.js";
+export { DisplayField } from "./components/DisplayField.js";
+export { MatrixField } from "./components/MatrixField.js";
+export { FallbackField } from "./components/FallbackField.js";
+
+// Layout components
+export { FieldWrapper } from "./layout/FieldWrapper.js";
+export { FormLayout } from "./layout/FormLayout.js";
+export { WizardLayout } from "./layout/WizardLayout.js";
+export { PageWrapper } from "./layout/PageWrapper.js";

package/src/defaults/layout/FieldWrapper.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import type { FieldWrapperProps } from "../../types.js";
+import { useFormaContext } from "../../context.js";
+
+export function FieldWrapper({
+  fieldPath,
+  field,
+  children,
+  errors,
+  touched,
+  showRequiredIndicator,
+  visible,
+}: FieldWrapperProps) {
+  const { isSubmitted } = useFormaContext();
+
+  if (!visible) return null;
+
+  const shouldShowMessages = touched || isSubmitted;
+  const visibleErrors = shouldShowMessages
+    ? errors.filter((e) => e.severity === "error")
+    : [];
+  const visibleWarnings = shouldShowMessages
+    ? errors.filter((e) => e.severity === "warning")
+    : [];
+  const hasErrors = visibleErrors.length > 0;
+  const hasWarnings = visibleWarnings.length > 0;
+
+  const classNames = [
+    "forma-field",
+    hasErrors && "forma-field--error",
+    !hasErrors && hasWarnings && "forma-field--warning",
+    showRequiredIndicator && "forma-field--required",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return (
+    <div className={classNames} data-field-path={fieldPath}>
+      {field.label && field.type !== "boolean" && (
+        <label htmlFor={fieldPath} className="forma-label">
+          {field.label}
+          {showRequiredIndicator && (
+            <span className="forma-label__required" aria-hidden="true">
+              {" "}
+              *
+            </span>
+          )}
+        </label>
+      )}
+      {field.description && (
+        <div
+          id={`${fieldPath}-description`}
+          className="forma-field__description"
+        >
+          {field.description}
+        </div>
+      )}
+      {children}
+      {hasErrors && (
+        <div
+          id={`${fieldPath}-errors`}
+          className="forma-field__errors"
+          role="alert"
+        >
+          {visibleErrors.map((error, i) => (
+            <span key={i} className="forma-field__error">
+              {error.message}
+            </span>
+          ))}
+        </div>
+      )}
+      {hasWarnings && (
+        <div className="forma-field__warnings">
+          {visibleWarnings.map((warning, i) => (
+            <span key={i} className="forma-field__warning">
+              {warning.message}
+            </span>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/defaults/layout/FormLayout.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import type { LayoutProps } from "../../types.js";
+
+export function FormLayout({
+  children,
+  onSubmit,
+  isSubmitting,
+}: LayoutProps) {
+  return (
+    <form
+      className="forma-form"
+      onSubmit={(e) => {
+        e.preventDefault();
+        onSubmit();
+      }}
+      noValidate
+    >
+      {children}
+      <div className="forma-form__actions">
+        {/* Submit is not disabled when invalid — intentional. Disabling prevents
+            users from discovering which fields need attention. Instead, clicking
+            submit triggers validation and displays errors via FieldWrapper. */}
+        <button
+          type="submit"
+          className={`forma-button forma-button--primary forma-submit${isSubmitting ? " forma-submit--loading" : ""}`}
+          disabled={isSubmitting}
+          aria-busy={isSubmitting || undefined}
+        >
+          {isSubmitting ? "Submitting..." : "Submit"}
+        </button>
+      </div>
+    </form>
+  );
+}

package/src/defaults/layout/PageWrapper.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import type { PageWrapperProps } from "../../types.js";
+
+export function PageWrapper({
+  title,
+  description,
+  children,
+}: PageWrapperProps) {
+  return (
+    <div className="forma-page">
+      {title && <h2 className="forma-page__title">{title}</h2>}
+      {description && (
+        <p className="forma-page__description">{description}</p>
+      )}
+      {children}
+    </div>
+  );
+}