Fix React hooks rules violations in useOnFormValueChange stories

- Move useOnFormValueChange hook calls before early returns to comply with Rules of Hooks
- Remove explicit methods parameter to use context instead, fixing TypeScript type issues
- All hooks now called unconditionally at the top level of components

Author: codegen-sh[bot]

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

@@ -84,15 +84,9 @@ const CascadingDropdownExample = () => {
     },
   });
 
-  // Don't render if methods is not ready
-  if (!methods || !methods.handleSubmit) {
-    return <div>Loading...</div>;
-  }
-
   // When country changes, update available states and reset state selection
   useOnFormValueChange({
     name: 'country',
-    methods,
     onChange: (value) => {
       const states = statesByCountry[value] || [];
       setAvailableStates(states);
@@ -102,6 +96,11 @@ const CascadingDropdownExample = () => {
     },
   });
 
+  // Don't render if methods is not ready
+  if (!methods || !methods.handleSubmit) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <RemixFormProvider {...methods}>
       <form onSubmit={methods.handleSubmit} className="w-96">
@@ -238,32 +237,29 @@ const AutoCalculationExample = () => {
     methods.setValue('total', total.toFixed(2));
   };
 
-  // Don't render if methods is not ready
-  if (!methods || !methods.handleSubmit) {
-    return <div>Loading...</div>;
-  }
-
   // 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,
   });
 
+  // Don't render if methods is not ready
+  if (!methods || !methods.handleSubmit) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <RemixFormProvider {...methods}>
       <form onSubmit={methods.handleSubmit} className="w-96">
@@ -396,15 +392,9 @@ const ConditionalFieldsExample = () => {
     },
   });
 
-  // Don't render if methods is not ready
-  if (!methods || !methods.handleSubmit) {
-    return <div>Loading...</div>;
-  }
-
   // Show/hide fields based on delivery type
   useOnFormValueChange({
     name: 'deliveryType',
-    methods,
     onChange: (value) => {
       setShowShipping(value === 'delivery');
       setShowPickup(value === 'pickup');
@@ -418,6 +408,11 @@ const ConditionalFieldsExample = () => {
     },
   });
 
+  // Don't render if methods is not ready
+  if (!methods || !methods.handleSubmit) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <RemixFormProvider {...methods}>
       <form onSubmit={methods.handleSubmit} className="w-96">