From 1f249ac807201f9da8e5210f5b5c6d02fc7c20d0 Mon Sep 17 00:00:00 2001 From: "codegen-sh[bot]" <131295404+codegen-sh[bot]@users.noreply.github.com> Date: Sat, 31 May 2025 00:42:36 +0000 Subject: [PATCH 1/3] Add debugging tools for RemixHookForm context issues - Add FormContextDebugger to textarea.stories.tsx with real-time context monitoring - Add DebugWrapper to text-field.stories.tsx with timing analysis - Create context-debug-comparison.stories.tsx for side-by-side comparison - Add console logging to track when context becomes available/null - Compare working pattern (direct DOM) vs broken pattern (components) This will help identify why form context is missing in static builds but works in dev. --- .../context-debug-comparison.stories.tsx | 200 + .../remix-hook-form/text-field.stories.tsx | 109 +- .../src/remix-hook-form/textarea.stories.tsx | 49 +- package-lock.json | 23623 +++++++++++++++ yarn.lock | 23918 ++++++---------- 5 files changed, 33130 insertions(+), 14769 deletions(-) create mode 100644 apps/docs/src/remix-hook-form/context-debug-comparison.stories.tsx create mode 100644 package-lock.json diff --git a/apps/docs/src/remix-hook-form/context-debug-comparison.stories.tsx b/apps/docs/src/remix-hook-form/context-debug-comparison.stories.tsx new file mode 100644 index 00000000..610ce5dd --- /dev/null +++ b/apps/docs/src/remix-hook-form/context-debug-comparison.stories.tsx @@ -0,0 +1,200 @@ +import { zodResolver } from '@hookform/resolvers/zod'; +import { Textarea } from '@lambdacurry/forms/remix-hook-form/textarea'; +import { Button } from '@lambdacurry/forms/ui/button'; +import type { Meta, StoryObj } from '@storybook/react-vite'; +import { type ActionFunctionArgs, useFetcher } from 'react-router'; +import { RemixFormProvider, getValidatedFormData, useRemixForm, useRemixFormContext } from 'remix-hook-form'; +import { z } from 'zod'; +import { withReactRouterStubDecorator } from '../lib/storybook/react-router-stub'; +import * as React from 'react'; + +const formSchema = z.object({ + message: z.string().min(10, 'Message must be at least 10 characters'), +}); + +type FormData = z.infer; + +// Context monitoring component +const ContextMonitor = ({ label }: { label: string }) => { + const [status, setStatus] = React.useState('Checking...'); + + React.useEffect(() => { + try { + const context = useRemixFormContext(); + if (context && context.handleSubmit) { + setStatus(`✅ ${label}: Context OK`); + console.log(`[${label}] Context available:`, context); + } else { + setStatus(`❌ ${label}: Context NULL`); + console.log(`[${label}] Context is null:`, context); + } + } catch (error) { + setStatus(`🚨 ${label}: Error - ${error.message}`); + console.error(`[${label}] Context error:`, error); + } + }, [label]); + + return ( +
+ {status} +
+ ); +}; + +// Working pattern (like textarea-custom) +const WorkingPatternExample = () => { + const fetcher = useFetcher<{ message: string }>(); + const methods = useRemixForm({ + resolver: zodResolver(formSchema), + defaultValues: { message: '' }, + fetcher, + submitConfig: { action: '/', method: 'post' }, + }); + + const messageId = React.useId(); + + return ( + +
+

✅ Working Pattern (Direct DOM)

+ + + +
+ +