@fogpipe/forma-react 0.17.0 → 0.18.0

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>
+  );
+}

package/src/defaults/layout/WizardLayout.tsx

@@ -0,0 +1,130 @@
+import React, { useCallback } from "react";
+import type { LayoutProps } from "../../types.js";
+import { useFormaContext } from "../../context.js";
+
+export function WizardLayout({
+  children,
+  onSubmit,
+  isSubmitting,
+}: LayoutProps) {
+  const { wizard } = useFormaContext();
+
+  const handleNext = useCallback(() => {
+    if (!wizard) return;
+    wizard.touchCurrentPageFields();
+    if (wizard.validateCurrentPage()) {
+      wizard.nextPage();
+    }
+  }, [wizard]);
+
+  const handleSubmit = useCallback(
+    (e: React.FormEvent<HTMLFormElement>) => {
+      e.preventDefault();
+
+      if (!wizard) {
+        onSubmit();
+        return;
+      }
+
+      const nativeEvent = e.nativeEvent as SubmitEvent;
+      const submitter = nativeEvent.submitter as HTMLButtonElement | null;
+
+      if (wizard.isLastPage && submitter?.dataset.action === "submit") {
+        onSubmit();
+      } else if (!wizard.isLastPage) {
+        handleNext();
+      }
+    },
+    [wizard, onSubmit, handleNext],
+  );
+
+  // Fallback to simple form layout if no wizard
+  if (!wizard) {
+    return (
+      <form
+        className="forma-form"
+        onSubmit={handleSubmit}
+        noValidate
+      >
+        {children}
+        <div className="forma-form__actions">
+          <button
+            type="submit"
+            className="forma-button forma-button--primary forma-submit"
+            disabled={isSubmitting}
+            aria-busy={isSubmitting || undefined}
+          >
+            {isSubmitting ? "Submitting..." : "Submit"}
+          </button>
+        </div>
+      </form>
+    );
+  }
+
+  return (
+    <form className="forma-wizard" onSubmit={handleSubmit} noValidate>
+      {/* Step indicator */}
+      <div className="forma-wizard__steps" role="navigation" aria-label="Form progress">
+        {wizard.pages.map((page, index) => {
+          const isCompleted = index < wizard.currentPageIndex;
+          const isCurrent = index === wizard.currentPageIndex;
+          const stepClass = [
+            "forma-step",
+            isCompleted && "forma-step--completed",
+            isCurrent && "forma-step--current",
+            !isCompleted && !isCurrent && "forma-step--upcoming",
+          ]
+            .filter(Boolean)
+            .join(" ");
+
+          return (
+            <div key={page.id} className={stepClass} aria-current={isCurrent ? "step" : undefined}>
+              <span className="forma-step__indicator">
+                {isCompleted ? "\u2713" : index + 1}
+              </span>
+              <span className="forma-step__label">{page.title}</span>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Page content */}
+      {children}
+
+      {/* Navigation */}
+      <div className="forma-wizard__nav">
+        {wizard.hasPreviousPage ? (
+          <button
+            type="button"
+            className="forma-button forma-button--secondary"
+            onClick={() => wizard.previousPage()}
+          >
+            Previous
+          </button>
+        ) : (
+          <div />
+        )}
+
+        {wizard.isLastPage ? (
+          <button
+            type="submit"
+            data-action="submit"
+            className={`forma-button forma-button--primary forma-submit${isSubmitting ? " forma-submit--loading" : ""}`}
+            disabled={isSubmitting}
+            aria-busy={isSubmitting || undefined}
+          >
+            {isSubmitting ? "Submitting..." : "Submit"}
+          </button>
+        ) : (
+          <button
+            type="button"
+            className="forma-button forma-button--primary"
+            onClick={handleNext}
+          >
+            Next
+          </button>
+        )}
+      </div>
+    </form>
+  );
+}