@fieldtripjs/react 0.1.0 → 0.3.0

package/dist/index.d.ts

@@ -1,2 +1,2 @@
 export { createFlowContext, type FlowContext } from "./context.js";
-export { useFlow, type FieldProps, type FlowController, type UseFlowOptions } from "./use-flow.js";
+export { useFlow, type FieldProps, type FlowController, type SetFlowInputs, type UseFlowOptions } from "./use-flow.js";

package/dist/use-flow.d.ts

@@ -1,4 +1,4 @@
-import { type AnyFlow, type FieldIssues, type FieldName, type FlowState, type FlowValues, type StepName } from "@fieldtripjs/core";
+import { type AnyFlow, type AnyStepInputs, type FieldIssues, type FieldName, type FlowState, type FlowValues, type StepInputs, type StepName } from "@fieldtripjs/core";
 export interface UseFlowOptions<FL extends AnyFlow> {
     readonly initialState?: FlowState<FL>;
     readonly onChange?: (state: FlowState<FL>) => void;
@@ -10,10 +10,15 @@ export interface FieldProps<N extends string = string> {
     readonly visible: boolean;
     readonly onChange: (value: unknown) => void;
 }
+export interface SetFlowInputs<FL extends AnyFlow> {
+    (inputs: AnyStepInputs<FL>): void;
+    <K extends StepName<FL>>(inputs: NoInfer<Partial<StepInputs<FL, K>>>, step: K): void;
+}
 export interface FlowController<FL extends AnyFlow> {
     readonly state: FlowState<FL>;
     readonly step: StepName<FL>;
     readonly path: readonly StepName<FL>[];
+    readonly forecast: readonly StepName<FL>[];
     readonly values: FlowValues<FL>;
     readonly inputs: Readonly<Record<string, unknown>>;
     readonly issues: FieldIssues;
@@ -21,7 +26,9 @@ export interface FlowController<FL extends AnyFlow> {
     readonly isComplete: boolean;
     readonly isPending: boolean;
     readonly canGoBack: boolean;
+    readonly canAdvance: boolean;
     readonly setInput: (name: FieldName<FL>, value: unknown) => void;
+    readonly setInputs: SetFlowInputs<FL>;
     readonly field: <N extends FieldName<FL>>(name: N) => FieldProps<N>;
     readonly next: () => Promise<boolean>;
     readonly back: () => void;

package/dist/use-flow.js

@@ -1,4 +1,4 @@
-import { back as backState, next as nextState, path as pathOf, result, setInputs, start, visibleFields as visibleFieldsOf, } from "@fieldtripjs/core";
+import { back as backState, FlowAsyncError, forecast as forecastOf, next as nextState, path as pathOf, result, setInputs, start, validateStepSync, visibleFields as visibleFieldsOf, } from "@fieldtripjs/core";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 export function useFlow(flow, options = {}) {
     const [state, setState] = useState(() => options.initialState ?? start(flow));
@@ -14,10 +14,14 @@ export function useFlow(flow, options = {}) {
         setState(next);
         onChange.current?.(next);
     }, []);
-    const setInput = useCallback((name, value) => {
-        commit(setInputs(flow, latest.current, { [name]: value }));
-        setIssues(({ [name]: _cleared, ...rest }) => rest);
+    const setStepInputs = useCallback((inputs, step = latest.current.current) => {
+        const current = latest.current;
+        commit(setInputs(flow, current, inputs, step));
+        if (step !== current.current)
+            return;
+        setIssues((issues) => Object.fromEntries(Object.entries(issues).filter(([name]) => !(name in inputs))));
     }, [flow, commit]);
+    const setInput = useCallback((name, value) => setStepInputs({ [name]: value }), [setStepInputs]);
     const next = useCallback(async () => {
         const submitted = latest.current;
         setPending(true);
@@ -48,6 +52,18 @@ export function useFlow(flow, options = {}) {
     }, [flow, commit]);
     const inputs = state.inputs[state.current] ?? {};
     const visibleFields = useMemo(() => visibleFieldsOf(flow, state), [flow, state]);
+    const forecast = useMemo(() => forecastOf(flow, state), [flow, state]);
+    const canAdvance = useMemo(() => {
+        try {
+            return validateStepSync(flow, state).ok;
+        }
+        catch (error) {
+            // An async schema can't be checked during render; next() decides.
+            if (error instanceof FlowAsyncError)
+                return true;
+            throw error;
+        }
+    }, [flow, state]);
     const field = useCallback((name) => ({
         name,
         value: inputs[name],
@@ -59,6 +75,7 @@ export function useFlow(flow, options = {}) {
         state,
         step: state.current,
         path: pathOf(state),
+        forecast,
         values: result(flow, state),
         inputs,
         issues,
@@ -66,10 +83,27 @@ export function useFlow(flow, options = {}) {
         isComplete: state.status === "complete",
         isPending,
         canGoBack: state.history.length > 0 || state.status === "complete",
+        canAdvance,
+        setInput,
+        setInputs: setStepInputs,
+        field,
+        next,
+        back,
+        reset,
+    }), [
+        flow,
+        state,
+        forecast,
+        inputs,
+        issues,
+        visibleFields,
+        isPending,
+        canAdvance,
         setInput,
+        setStepInputs,
         field,
         next,
         back,
         reset,
-    }), [flow, state, inputs, issues, visibleFields, isPending, setInput, field, next, back, reset]);
+    ]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fieldtripjs/react",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Headless React bindings for @fieldtripjs/core.",
   "type": "module",
   "license": "MIT",
@@ -25,7 +25,7 @@
     "react": ">=18"
   },
   "dependencies": {
-    "@fieldtripjs/core": "0.1.0"
+    "@fieldtripjs/core": "0.2.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.3",