From a333a1b123f8e3e44a435a4ea6c56af4a6b5e2cd Mon Sep 17 00:00:00 2001 From: Daniel Naab Date: Thu, 9 Oct 2025 23:23:47 -0500 Subject: [PATCH 1/3] Add submit (next page) simulation on form preview --- packages/design/src/Form/Form.tsx | 27 ++++++++++++++----- .../FormManager/FormPreview/FormPreview.tsx | 24 +++++++++++++++-- 2 files changed, 42 insertions(+), 9 deletions(-) diff --git a/packages/design/src/Form/Form.tsx b/packages/design/src/Form/Form.tsx index a5ddb89b..4be68576 100644 --- a/packages/design/src/Form/Form.tsx +++ b/packages/design/src/Form/Form.tsx @@ -115,9 +115,24 @@ export default function Form({ ) : ( -
+
{ + event?.preventDefault(); + onSubmit(data); + }) + : (event) => { + event.preventDefault(); + } + } + method="POST" + aria-label={session.form.summary.title || 'Form'} + > -
+ )} @@ -134,10 +149,8 @@ const FormContents = ({ prompt: Prompt; }) => { return ( - <> -
- {renderPromptComponents(context, prompt.components)} -
- +
+ {renderPromptComponents(context, prompt.components)} +
); }; diff --git a/packages/design/src/FormManager/FormPreview/FormPreview.tsx b/packages/design/src/FormManager/FormPreview/FormPreview.tsx index 94c3835b..dcffb840 100644 --- a/packages/design/src/FormManager/FormPreview/FormPreview.tsx +++ b/packages/design/src/FormManager/FormPreview/FormPreview.tsx @@ -1,4 +1,5 @@ import React, { useEffect } from 'react'; +import { useNavigate } from 'react-router-dom'; import { mergeSession } from '@flexion/forms-core'; @@ -12,7 +13,8 @@ export const FormPreview = () => { setSession: state.setSession, })); const session = useFormManagerStore(state => state.session); - const { routeParams } = useRouteParams(); + const { routeParams, pathname } = useRouteParams(); + const navigate = useNavigate(); useEffect(() => { if (routeParams.page !== session.route?.params.page) { @@ -27,5 +29,23 @@ export const FormPreview = () => { } }, [routeParams.page]); - return
; + const handleSubmit = () => { + // Simple navigation: just go to the next page + const currentPage = Number(routeParams.page) || 0; + const nextPage = currentPage + 1; + const newParams = new URLSearchParams({ + ...routeParams, + page: nextPage.toString(), + }); + navigate(`${pathname}?${newParams.toString()}`); + }; + + return ( + + ); }; From ea2e796e1904694968ab434ce58b1a402080401f Mon Sep 17 00:00:00 2001 From: Daniel Naab Date: Fri, 10 Oct 2025 09:08:05 -0500 Subject: [PATCH 2/3] Improve preview by clearing form data between pages --- packages/design/src/Form/Form.tsx | 8 ++++++++ .../FormManager/FormPreview/FormPreview.tsx | 20 ++++++++++++++++--- 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/packages/design/src/Form/Form.tsx b/packages/design/src/Form/Form.tsx index 4be68576..3df44511 100644 --- a/packages/design/src/Form/Form.tsx +++ b/packages/design/src/Form/Form.tsx @@ -78,6 +78,14 @@ export default function Form({ const formMethods = useForm>({}); + // Reset React Hook Form when route changes (e.g., page navigation) + // This prevents field values from bleeding across pages + useEffect(() => { + if (isPreview) { + formMethods.reset({}); + } + }, [session.route?.params.page, isPreview]); + return (
diff --git a/packages/design/src/FormManager/FormPreview/FormPreview.tsx b/packages/design/src/FormManager/FormPreview/FormPreview.tsx index dcffb840..dd840805 100644 --- a/packages/design/src/FormManager/FormPreview/FormPreview.tsx +++ b/packages/design/src/FormManager/FormPreview/FormPreview.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; -import { mergeSession } from '@flexion/forms-core'; +import { applyPromptResponse, mergeSession } from '@flexion/forms-core'; import Form from '../../Form/Form.js'; import { useRouteParams } from '../hooks.js'; @@ -29,8 +29,22 @@ export const FormPreview = () => { } }, [routeParams.page]); - const handleSubmit = () => { - // Simple navigation: just go to the next page + const handleSubmit = (data: Record) => { + // Validate and update session with form data + const result = applyPromptResponse(context.config, session, { + action: 'submit', + data, + }); + + if (!result.success) { + console.warn('Error applying prompt response in preview...', result.error); + return; + } + + // Update session with validated data + setSession(result.data); + + // Navigate to next page const currentPage = Number(routeParams.page) || 0; const nextPage = currentPage + 1; const newParams = new URLSearchParams({ From ac15b385a19801741d9bd8160a51c06524fc8062 Mon Sep 17 00:00:00 2001 From: Daniel Naab Date: Fri, 10 Oct 2025 09:48:02 -0500 Subject: [PATCH 3/3] Fix preview behavior in storybook tests --- packages/design/src/Form/Form.tsx | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/design/src/Form/Form.tsx b/packages/design/src/Form/Form.tsx index 3df44511..8716a7e8 100644 --- a/packages/design/src/Form/Form.tsx +++ b/packages/design/src/Form/Form.tsx @@ -78,13 +78,15 @@ export default function Form({ const formMethods = useForm>({}); - // Reset React Hook Form when route changes (e.g., page navigation) + // Reset React Hook Form when route changes (e.g., page navigation in FormPreview) // This prevents field values from bleeding across pages + // Only reset when we have an onSubmit handler (FormPreview mode), not in FormEdit mode + const hasOnSubmit = !!onSubmit; useEffect(() => { - if (isPreview) { + if (isPreview && hasOnSubmit) { formMethods.reset({}); } - }, [session.route?.params.page, isPreview]); + }, [session.route?.params.page, isPreview, hasOnSubmit]); return ( @@ -122,25 +124,23 @@ export default function Form({ > - ) : ( + ) : onSubmit ? (
{ - event?.preventDefault(); - onSubmit(data); - }) - : (event) => { - event.preventDefault(); - } - } + onSubmit={formMethods.handleSubmit(async (data, event) => { + event?.preventDefault(); + onSubmit(data); + })} method="POST" aria-label={session.form.summary.title || 'Form'} > + ) : ( +
+ +
)}