feat: implement scroll-to-error functionality for @lambdacurry/forms

apps/docs/src/remix-hook-form/phone-input.stories.tsx

@@ -37,11 +37,7 @@ const ControlledPhoneInputExample = () => {
     <RemixFormProvider {...methods}>
       <fetcher.Form onSubmit={methods.handleSubmit}>
         <div className="grid gap-8">
-          <PhoneInput
-            name="usaPhone"
-            label="Phone Number"
-            description="Enter a US phone number"
-          />
+          <PhoneInput name="usaPhone" label="Phone Number" description="Enter a US phone number" />
           <PhoneInput
             name="internationalPhone"
             label="International Phone Number"

apps/docs/src/remix-hook-form/select.test.tsx

@@ -1,80 +1,79 @@
+import type { StoryContext } from '@storybook/react';
 import { expect } from '@storybook/test';
 import { userEvent, within } from '@storybook/testing-library';
-import { StoryContext } from '@storybook/react';
 
 // Test selecting a US state
 export const testUSStateSelection = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
-  
+
   // Find and click the US state dropdown
   const stateDropdown = canvas.getByLabelText('US State');
   await userEvent.click(stateDropdown);
-  
+
   // Select a state (e.g., California)
   const californiaOption = await canvas.findByText('California');
   await userEvent.click(californiaOption);
-  
+
   // Verify the selection
   expect(stateDropdown).toHaveTextContent('California');
 };
 
 // Test selecting a Canadian province
 export const testCanadaProvinceSelection = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
-  
+
   // Find and click the Canada province dropdown
   const provinceDropdown = canvas.getByLabelText('Canadian Province');
   await userEvent.click(provinceDropdown);
-  
+
   // Select a province (e.g., Ontario)
   const ontarioOption = await canvas.findByText('Ontario');
   await userEvent.click(ontarioOption);
-  
+
   // Verify the selection
   expect(provinceDropdown).toHaveTextContent('Ontario');
 };
 
 // Test form submission
 export const testFormSubmission = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
-  
+
   // Select a state
   const stateDropdown = canvas.getByLabelText('US State');
   await userEvent.click(stateDropdown);
   const californiaOption = await canvas.findByText('California');
   await userEvent.click(californiaOption);
-  
+
   // Select a province
   const provinceDropdown = canvas.getByLabelText('Canadian Province');
   await userEvent.click(provinceDropdown);
   const ontarioOption = await canvas.findByText('Ontario');
   await userEvent.click(ontarioOption);
-  
+
   // Select a custom region
   const regionDropdown = canvas.getByLabelText('Custom Region');
   await userEvent.click(regionDropdown);
   const customOption = await canvas.findByText('New York');
   await userEvent.click(customOption);
-  
+
   // Submit the form
   const submitButton = canvas.getByRole('button', { name: 'Submit' });
   await userEvent.click(submitButton);
-  
+
   // Verify the submission (mock response would be shown)
   await expect(canvas.findByText('Selected regions:')).resolves.toBeInTheDocument();
 };
 
 // Test validation errors
 export const testValidationErrors = async ({ canvasElement }: StoryContext) => {
   const canvas = within(canvasElement);
-  
+
   // Submit the form without selecting anything
   const submitButton = canvas.getByRole('button', { name: 'Submit' });
   await userEvent.click(submitButton);
-  
+
   // Verify error messages
   await expect(canvas.findByText('Please select a state')).resolves.toBeInTheDocument();
   await expect(canvas.findByText('Please select a province')).resolves.toBeInTheDocument();
   await expect(canvas.findByText('Please select a region')).resolves.toBeInTheDocument();
 };
-

package.json

@@ -2,10 +2,7 @@
   "name": "forms",
   "version": "0.2.0",
   "private": true,
-  "workspaces": [
-    "apps/*",
-    "packages/*"
-  ],
+  "workspaces": ["apps/*", "packages/*"],
   "scripts": {
     "start": "yarn dev",
     "dev": "turbo run dev",

packages/components/package.json

@@ -26,9 +26,7 @@
       "import": "./dist/ui/*.js"
     }
   },
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "prepublishOnly": "yarn run build",
     "build": "vite build",

packages/components/src/index.ts

@@ -1,5 +1,9 @@
 // Main exports from both remix-hook-form and ui directories
 
+// Add scroll-to-error utilities
+export { scrollToFirstError } from './utils/scrollToError';
+export type { ScrollToErrorOptions } from './utils/scrollToError';
+
 // Export all components from remix-hook-form
 export * from './remix-hook-form';
 

packages/components/src/remix-hook-form/canada-province-select.tsx

@@ -1,16 +1,8 @@
-import * as React from 'react';
-import { Select, type SelectProps } from './select';
 import { CANADA_PROVINCES } from '../ui/data/canada-provinces';
+import { Select, type SelectProps } from './select';
 
 export type CanadaProvinceSelectProps = Omit<SelectProps, 'options'>;
 
 export function CanadaProvinceSelect(props: CanadaProvinceSelectProps) {
-  return (
-    <Select
-      {...props}
-      options={CANADA_PROVINCES}
-      placeholder="Select a province"
-    />
-  );
+  return <Select {...props} options={CANADA_PROVINCES} placeholder="Select a province" />;
 }
-

packages/components/src/remix-hook-form/components/ScrollToErrorOnSubmit.tsx

@@ -0,0 +1,14 @@
+import { type UseScrollToErrorOnSubmitOptions, useScrollToErrorOnSubmit } from '../hooks/useScrollToErrorOnSubmit';
+
+export interface ScrollToErrorOnSubmitProps extends UseScrollToErrorOnSubmitOptions {
+  className?: string;
+}
+
+export const ScrollToErrorOnSubmit = ({ className, ...options }: ScrollToErrorOnSubmitProps) => {
+  useScrollToErrorOnSubmit(options);
+
+  // Return null or hidden div - follows existing patterns
+  return className ? <div className={className} aria-hidden="true" /> : null;
+};
+
+ScrollToErrorOnSubmit.displayName = 'ScrollToErrorOnSubmit';

packages/components/src/remix-hook-form/components/index.ts

@@ -0,0 +1 @@
+export * from './ScrollToErrorOnSubmit';

packages/components/src/remix-hook-form/hooks/index.ts

@@ -0,0 +1 @@
+export * from './useScrollToErrorOnSubmit';

packages/components/src/remix-hook-form/hooks/useScrollToErrorOnSubmit.ts

@@ -0,0 +1,54 @@
+import { useEffect, useMemo } from 'react';
+import { useRemixFormContext } from 'remix-hook-form';
+import { type ScrollToErrorOptions, scrollToFirstError } from '../../utils/scrollToError';
+
+export interface UseScrollToErrorOnSubmitOptions extends ScrollToErrorOptions {
+  delay?: number;
+  enabled?: boolean;
+  scrollOnServerErrors?: boolean;
+  scrollOnMount?: boolean;
+}
+
+export const useScrollToErrorOnSubmit = (options: UseScrollToErrorOnSubmitOptions = {}) => {
+  const { formState } = useRemixFormContext();
+  const { delay = 100, enabled = true, scrollOnServerErrors = true, scrollOnMount = true, ...scrollOptions } = options;
+
+  // Memoize scroll options to prevent unnecessary re-renders
+  const memoizedScrollOptions = useMemo(() => scrollOptions, [
+    scrollOptions.behavior,
+    scrollOptions.block,
+    scrollOptions.inline,
+    scrollOptions.offset,
+    scrollOptions.shouldFocus,
+    scrollOptions.retryAttempts,
+  ]);
+
+  // Handle form submission errors
+  useEffect(() => {
+    if (!enabled) return;
+    const hasErrors = Object.keys(formState.errors).length > 0;
+
+    // Scroll after submission attempt when errors exist
+    if (!formState.isSubmitting && hasErrors) {
+      const timeoutId = setTimeout(() => {
+        scrollToFirstError(formState.errors, memoizedScrollOptions);
+      }, delay);
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [formState.errors, formState.isSubmitting, enabled, delay, memoizedScrollOptions]);
+
+  // Handle server-side validation errors on mount (Remix SSR)
+  useEffect(() => {
+    if (!(enabled && scrollOnMount) || !scrollOnServerErrors) return;
+    const hasErrors = Object.keys(formState.errors).length > 0;
+
+    if (hasErrors && !formState.isSubmitting) {
+      const timeoutId = setTimeout(() => {
+        scrollToFirstError(formState.errors, memoizedScrollOptions);
+      }, delay);
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [enabled, scrollOnMount, scrollOnServerErrors, formState.errors, formState.isSubmitting, delay, memoizedScrollOptions]);
+};

packages/components/src/remix-hook-form/index.ts

@@ -1,3 +1,8 @@
+// Add scroll-to-error functionality
+export * from './hooks/useScrollToErrorOnSubmit';
+export * from './components/ScrollToErrorOnSubmit';
+
+// Keep all existing exports
 export * from './checkbox';
 export * from './form';
 export * from './form-error';
@@ -17,4 +22,3 @@ export * from './use-data-table-url-state';
 export * from './select';
 export * from './us-state-select';
 export * from './canada-province-select';
-

packages/components/src/remix-hook-form/phone-input.tsx

@@ -1,5 +1,8 @@
-import * as React from 'react';
-import { PhoneInputField as BasePhoneInputField, type PhoneInputFieldProps as BasePhoneInputFieldProps } from '../ui/phone-input-field';
+import type * as React from 'react';
+import {
+  PhoneInputField as BasePhoneInputField,
+  type PhoneInputFieldProps as BasePhoneInputFieldProps,
+} from '../ui/phone-input-field';
 import { FormControl, FormDescription, FormLabel, FormMessage } from './form';
 
 import { useRemixFormContext } from 'remix-hook-form';

packages/components/src/remix-hook-form/select.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { useRemixFormContext } from 'remix-hook-form';
-import { FormControl, FormDescription, FormLabel, FormMessage } from './form';
 import { FormField, FormItem } from '../ui/form';
-import { Select as UISelect, type SelectProps as UISelectProps, type SelectUIComponents } from '../ui/select';
+import { type SelectUIComponents, Select as UISelect, type SelectProps as UISelectProps } from '../ui/select';
+import { FormControl, FormDescription, FormLabel, FormMessage } from './form';
 
 export interface SelectProps extends Omit<UISelectProps, 'value' | 'onValueChange'> {
   name: string;
@@ -19,14 +19,7 @@ export interface SelectProps extends Omit<UISelectProps, 'value' | 'onValueChang
   >;
 }
 
-export function Select({
-  name,
-  label,
-  description,
-  className,
-  components,
-  ...props
-}: SelectProps) {
+export function Select({ name, label, description, className, components, ...props }: SelectProps) {
   const { control } = useRemixFormContext();
 
   return (
@@ -50,9 +43,7 @@ export function Select({
               }}
             />
           </FormControl>
-          {description && (
-            <FormDescription Component={components?.FormDescription}>{description}</FormDescription>
-          )}
+          {description && <FormDescription Component={components?.FormDescription}>{description}</FormDescription>}
           <FormMessage Component={components?.FormMessage} />
         </FormItem>
       )}

packages/components/src/remix-hook-form/us-state-select.tsx

@@ -1,16 +1,8 @@
-import * as React from 'react';
-import { Select, type SelectProps } from './select';
 import { US_STATES } from '../ui/data/us-states';
+import { Select, type SelectProps } from './select';
 
 export type USStateSelectProps = Omit<SelectProps, 'options'>;
 
 export function USStateSelect(props: USStateSelectProps) {
-  return (
-    <Select
-      {...props}
-      options={US_STATES}
-      placeholder="Select a state"
-    />
-  );
+  return <Select {...props} options={US_STATES} placeholder="Select a state" />;
 }
-

packages/components/src/ui/canada-province-select.tsx

@@ -1,16 +1,8 @@
-import * as React from 'react';
-import { Select, type SelectProps } from './select';
 import { CANADA_PROVINCES } from './data/canada-provinces';
+import { Select, type SelectProps } from './select';
 
 export type CanadaProvinceSelectProps = Omit<SelectProps, 'options'>;
 
 export function CanadaProvinceSelect(props: CanadaProvinceSelectProps) {
-  return (
-    <Select
-      options={CANADA_PROVINCES}
-      placeholder="Select a province"
-      {...props}
-    />
-  );
+  return <Select options={CANADA_PROVINCES} placeholder="Select a province" {...props} />;
 }
-

packages/components/src/ui/data/canada-provinces.ts

@@ -1,4 +1,4 @@
-import { SelectOption } from '../select';
+import type { SelectOption } from '../select';
 
 export const CANADA_PROVINCES: SelectOption[] = [
   { value: 'AB', label: 'Alberta' },

packages/components/src/ui/data/us-states.ts

@@ -1,4 +1,4 @@
-import { SelectOption } from '../select';
+import type { SelectOption } from '../select';
 
 export const US_STATES: SelectOption[] = [
   { value: 'AL', label: 'Alabama' },

packages/components/src/ui/index.ts

@@ -33,4 +33,3 @@ export * from './us-state-select';
 export * from './canada-province-select';
 export * from './data/us-states';
 export * from './data/canada-provinces';
-

packages/components/src/ui/phone-input.tsx

@@ -109,10 +109,10 @@ export const PhoneNumberInput = ({
       const isNumberKey = NUMBER_KEY_REGEX.test(e.key);
       const isModifier = e.ctrlKey || e.metaKey || e.altKey;
       const allowed = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Home', 'End', 'Enter'];
-      
+
       // Allow typing if we have fewer than 10 digits or if we have 11 digits but the first is '1'
       const isComplete = currentDigits.length >= 10 && !(currentDigits.length === 11 && currentDigits.startsWith('1'));
-      
+
       if (!isModifier && isNumberKey && isComplete) {
         // Prevent adding more digits once 10-digit US number is complete
         e.preventDefault();

packages/components/src/ui/us-state-select.tsx

@@ -1,16 +1,8 @@
-import * as React from 'react';
-import { Select, type SelectProps } from './select';
 import { US_STATES } from './data/us-states';
+import { Select, type SelectProps } from './select';
 
 export type USStateSelectProps = Omit<SelectProps, 'options'>;
 
 export function USStateSelect(props: USStateSelectProps) {
-  return (
-    <Select
-      options={US_STATES}
-      placeholder="Select a state"
-      {...props}
-    />
-  );
+  return <Select options={US_STATES} placeholder="Select a state" {...props} />;
 }
-

packages/components/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './scrollToError';