Fix: resolve hook crash and stabilize Storybook tests

- Use useFormContext in useOnFormValueChange to prevent crash outside providers\n- Memoize Stub component in react-router-stub to prevent unnecessary remounts\n- Initialize date in calendar stories to match test expectations\n- Use screen and data-testid selectors for more robust interaction tests

Author: jaruesink

apps/docs/src/lib/storybook/react-router-stub.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import type { Decorator } from '@storybook/react-vite';
 import type { ComponentType } from 'react';
 import {
@@ -32,10 +33,14 @@ export const withReactRouterStubDecorator = (options: RemixStubOptions): Decorat
 
   return (Story, context) => {
     // Map routes to include the Story component if no Component is provided
-    const mappedRoutes = routes.map((route) => ({
-      ...route,
-      Component: route.Component ?? (() => <Story {...context.args} />),
-    }));
+    const mappedRoutes = useMemo(
+      () =>
+        routes.map((route) => ({
+          ...route,
+          Component: route.Component ?? Story,
+        })),
+      [routes, Story],
+    );
 
     // Get the base path (without existing query params from options)
     const basePath = initialPath.split('?')[0];
@@ -48,9 +53,13 @@ export const withReactRouterStubDecorator = (options: RemixStubOptions): Decorat
     const actualInitialPath = `${basePath}${currentWindowSearch}`;
 
     // Use React Router's official createRoutesStub
-    const Stub = createRoutesStub(mappedRoutes);
+    // We memoize the Stub component to prevent unnecessary remounts of the entire story
+    // when the decorator re-renders.
+    const Stub = useMemo(() => createRoutesStub(mappedRoutes), [mappedRoutes]);
 
-    return <Stub initialEntries={[actualInitialPath]} />;
+    const initialEntries = useMemo(() => [actualInitialPath], [actualInitialPath]);
+
+    return <Stub initialEntries={initialEntries} />;
   };
 };
 

apps/docs/src/remix-hook-form/calendar-with-month-year-select.stories.tsx

@@ -86,7 +86,7 @@ const ControlledCalendarWithFormExample = () => {
   });
 
   const [dropdown, setDropdown] = React.useState<'dropdown' | 'dropdown-months' | 'dropdown-years'>('dropdown');
-  const [date, setDate] = React.useState<Date | undefined>();
+  const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12));
 
   const dropdownOptions = [
     { label: 'Month and Year', value: 'dropdown' },

apps/docs/src/remix-hook-form/use-on-form-value-change.stories.tsx

@@ -4,7 +4,7 @@ import { useOnFormValueChange } from '@lambdacurry/forms/remix-hook-form/hooks/u
 import { Select } from '@lambdacurry/forms/remix-hook-form/select';
 import { TextField } from '@lambdacurry/forms/remix-hook-form/text-field';
 import type { Meta, StoryContext, StoryObj } from '@storybook/react-vite';
-import { expect, userEvent, within } from '@storybook/test';
+import { expect, userEvent, within, screen } from '@storybook/test';
 import { useState } from 'react';
 import { type ActionFunctionArgs, useFetcher } from 'react-router';
 import { getValidatedFormData, RemixFormProvider, useRemixForm } from 'remix-hook-form';
@@ -87,6 +87,7 @@ const CascadingDropdownExample = () => {
   // When country changes, update available states and reset state selection
   useOnFormValueChange({
     name: 'country',
+    methods,
     onChange: (value) => {
       const states = statesByCountry[value] || [];
       setAvailableStates(states);
@@ -160,7 +161,7 @@ export const CascadingDropdowns: Story = {
     await userEvent.click(countryTrigger);
 
     // Wait for dropdown to open and select USA
-    const usaOption = await canvas.findByRole('option', { name: /united states/i });
+    const usaOption = await screen.findByTestId('select-option-usa');
     await userEvent.click(usaOption);
 
     // Verify state dropdown is now enabled
@@ -169,7 +170,7 @@ export const CascadingDropdowns: Story = {
 
     // Select a state
     await userEvent.click(stateTrigger);
-    const californiaOption = await canvas.findByRole('option', { name: /california/i });
+    const californiaOption = await screen.findByTestId('select-option-california');
     await userEvent.click(californiaOption);
 
     // Enter city
@@ -240,18 +241,21 @@ const AutoCalculationExample = () => {
   // Recalculate when quantity changes
   useOnFormValueChange({
     name: 'quantity',
+    methods,
     onChange: calculateTotal,
   });
 
   // Recalculate when price changes
   useOnFormValueChange({
     name: 'pricePerUnit',
+    methods,
     onChange: calculateTotal,
   });
 
   // Recalculate when discount changes
   useOnFormValueChange({
     name: 'discount',
+    methods,
     onChange: calculateTotal,
   });
 
@@ -395,6 +399,7 @@ const ConditionalFieldsExample = () => {
   // Show/hide fields based on delivery type
   useOnFormValueChange({
     name: 'deliveryType',
+    methods,
     onChange: (value) => {
       setShowShipping(value === 'delivery');
       setShowPickup(value === 'pickup');
@@ -480,7 +485,7 @@ export const ConditionalFields: Story = {
     const deliveryTypeTrigger = canvas.getByRole('combobox', { name: /delivery type/i });
     await userEvent.click(deliveryTypeTrigger);
 
-    const deliveryOption = await canvas.findByRole('option', { name: /home delivery/i });
+    const deliveryOption = await screen.findByTestId('select-option-delivery');
     await userEvent.click(deliveryOption);
 
     // Shipping address field should appear
@@ -489,8 +494,10 @@ export const ConditionalFields: Story = {
     await userEvent.type(shippingInput, '123 Main St');
 
     // Switch to pickup
-    await userEvent.click(deliveryTypeTrigger);
-    const pickupOption = await canvas.findByRole('option', { name: /store pickup/i });
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    await userEvent.click(canvas.getByRole('combobox', { name: /delivery type/i }));
+    await screen.findByRole('listbox');
+    const pickupOption = await screen.findByTestId('select-option-pickup');
     await userEvent.click(pickupOption);
 
     // Store location should appear, shipping address should be gone
@@ -499,7 +506,7 @@ export const ConditionalFields: Story = {
 
     // Select a store
     await userEvent.click(storeSelect);
-    const mallOption = await canvas.findByRole('option', { name: /shopping mall/i });
+    const mallOption = await screen.findByTestId('select-option-mall');
     await userEvent.click(mallOption);
 
     // Submit form

packages/components/src/remix-hook-form/hooks/use-on-form-value-change.ts

@@ -1,7 +1,6 @@
 import { useEffect } from 'react';
-import type { FieldPath, FieldValues, PathValue } from 'react-hook-form';
+import { useFormContext, type FieldPath, type FieldValues, type PathValue } from 'react-hook-form';
 import type { UseRemixFormReturn } from 'remix-hook-form';
-import { useRemixFormContext } from 'remix-hook-form';
 
 export interface UseOnFormValueChangeOptions<
   TFieldValues extends FieldValues = FieldValues,
@@ -20,7 +19,7 @@ export interface UseOnFormValueChangeOptions<
   /**
    * Optional form methods if not using RemixFormProvider context
    */
-  methods?: UseRemixFormReturn<TFieldValues>;
+  methods?: any;
   /**
    * Whether the hook is enabled (default: true)
    */
@@ -64,9 +63,11 @@ export const useOnFormValueChange = <
 ) => {
   const { name, onChange, methods: providedMethods, enabled = true } = options;
 
-  // Use provided methods or fall back to context
-  const contextMethods = useRemixFormContext<TFieldValues>();
-  const formMethods = providedMethods || contextMethods;
+  // Use provided methods or fall back to context.
+  // We use useFormContext from react-hook-form instead of useRemixFormContext from remix-hook-form
+  // because useRemixFormContext crashes if it's called outside of a provider.
+  const contextMethods = useFormContext<TFieldValues>();
+  const formMethods = (providedMethods || contextMethods) as any;
 
   useEffect(() => {
     // Early return if no form methods are available or hook is disabled
@@ -75,7 +76,7 @@ export const useOnFormValueChange = <
     const { watch, getValues } = formMethods;
 
     // Subscribe to the field value changes
-    const subscription = watch((value, { name: changedFieldName }) => {
+    const subscription = watch((value: TFieldValues, { name: changedFieldName }: { name?: string }) => {
       // Only trigger onChange if the watched field changed
       if (changedFieldName === name) {
         const currentValue = value[name] as PathValue<TFieldValues, TName>;