feat: Add comprehensive Storybook examples for scroll-to-error functionality

[codegen-sh]

📚 Storybook Examples for Scroll-to-Error Functionality

This PR adds comprehensive Storybook examples demonstrating the scroll-to-error functionality implemented in LC-321.

🎯 What's Included

New Story File: apps/docs/src/remix-hook-form/scroll-to-error.stories.tsx

Two Implementation Approaches:

1. Hook Approach - Using useScrollToErrorOnSubmit hook
2. Component Approach - Using ScrollToErrorOnSubmit component

🏗️ Form Structure for Testing

The story includes a comprehensive form with multiple sections to demonstrate scrolling behavior:

• Personal Information (name, email, phone)
• Address Information (street, city, state, zip)
• Communication Preferences (newsletter, notifications)
• Professional Information (company, job, experience)
• Terms and Conditions

🧪 Interactive Test Scenarios

Validation Testing:

• Submit empty form to trigger validation errors
• Automatic scroll to first error field
• Focus management for accessibility

Success Testing:

• Fill out complete form
• Successful submission handling
• Success message display

✨ Key Features Demonstrated

• Smart Element Targeting using existing data-slot selectors
• Retry Logic for async rendering scenarios (Remix SSR)
• Configurable Options (offset, behavior, focus management)
• Accessibility Support with proper focus handling
• Performance Optimization with memoized options

🔧 Technical Improvements

• Fixed TypeScript issues (replaced any with Record<string, unknown>)
• Improved accessibility (replaced non-interactive labels with divs)
• Performance optimizations (moved regex patterns to constants)
• Clean code organization and comprehensive documentation

📖 Usage Examples

The stories provide clear examples of both integration approaches:

// Hook approach
useScrollToErrorOnSubmit({
  offset: 80,
  scrollOnServerErrors: true,
  delay: 100
});

// Component approach
<ScrollToErrorOnSubmit
  offset={80}
  scrollOnServerErrors={true}
  retryAttempts={3}
/>

🎨 Visual Design

• Long form layout to demonstrate scroll behavior
• Clear section headers and spacing
• Professional styling consistent with existing components
• Responsive design for different screen sizes

This implementation provides developers with comprehensive examples of how to integrate and use the scroll-to-error functionality in their forms, making it easy to understand and implement the feature.

---

Related: LC-321 - Complete Implementation Guide: Adding Scroll-to-Error to @lambdacurry/forms
Base Branch: codegen/lc-321-complete-implementation-guide-adding-scroll-to-error-to

---

💻 View my work • 👤 Initiated by Jake Ruesink • About Codegen
⛔ Remove Codegen from PR • 🚫 Ban action checks

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch codegen/lc-322-lets-create-a-storybook-examples

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codegen-sh]

🔍 Broken test auto-fixer • Learn more

Check Suite	Agent	Status	Commit	Time
GitHub Actions	Agent	Started 🔄	06f8435	Sep 18, 04:10:25 UTC
GitHub Actions	Agent	Fix ✅	f9fcaf6	Sep 18, 04:10:58 UTC
GitHub Actions	Agent	Started 🔄	0a24c56	Sep 18, 04:16:31 UTC

💻 View my work • 🛑 Stop • 🚫 Ban all checks

⚙️ Check suite settings

[codegen-sh]

✅ Fixed failing check suites on PR #141

Issue Identified

The build was failing due to an incorrect import in the scroll-to-error story file:

"RadioGroupItem" is not exported by "../../packages/components/src/remix-hook-form/radio-group.tsx"

Root Cause

The story file was trying to import both RadioGroup and RadioGroupItem from the same file:

import { RadioGroup, RadioGroupItem } from '@lambdacurry/forms/remix-hook-form/radio-group';

However, RadioGroupItem is actually exported from a separate file (radio-group-item.tsx), not from radio-group.tsx.

Solution Applied

Fixed the import by splitting it into two separate import statements:

import { RadioGroup } from '@lambdacurry/forms/remix-hook-form/radio-group';
import { RadioGroupItem } from '@lambdacurry/forms/remix-hook-form/radio-group-item';

Verification

• ✅ Storybook build now completes successfully
• ✅ All components are properly imported and accessible
• ✅ The scroll-to-error story is included in the build output

The fix has been committed and pushed to the PR branch. Both the "Run Tests" and "Deploy PR Preview" workflows should now pass.

💻 View my work • 🛑 Stop • 🚫 Ban all checks • React 👍 or 👎

[github-actions]

📝 Storybook Preview: View Storybook

This preview will be updated automatically when you push new changes to this PR.

Note: The preview will be available after the workflow completes and the PR is approved for deployment.

[codegen-sh]

✅ Fixed the failing check suite on PR #141!

🐛 Issue Identified

The test was failing with this error:

TypeError: Cannot read properties of null (reading 'handleSubmit')

This was happening in the useScrollToErrorOnSubmit hook when it tried to access formState from formMethods that could be null.

🔧 Solution Applied

1. Fixed the null reference error in the hook:

• Added a null check in useScrollToErrorOnSubmit hook before accessing formMethods
• Added early return with warning message when no form methods are available
• This prevents the crash when the hook is used outside of a form context

2. Cleaned up duplicate component:

• Removed duplicate ScrollToErrorComponentExample component declaration that was causing build issues

📝 Changes Made

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

// Added null check and early return
if (!formMethods) {
  console.warn('useScrollToErrorOnSubmit: No form methods available. Make sure you are either inside a RemixFormProvider or passing methods explicitly.');
  return;
}

File: apps/docs/src/remix-hook-form/scroll-to-error.stories.tsx

• Removed duplicate component declaration

✅ Result

• ✅ Build now passes successfully
• ✅ Storybook builds without errors
• ✅ Hook gracefully handles missing form context
• ✅ No more null reference errors

The fix has been pushed to the PR branch in commit 6ef7938 and should resolve the failing GitHub Actions check. The hook now safely handles cases where it's used outside of a proper form context.

---

Initiated by Jake Ruesink • 💻 View my work

[codegen-sh]

✅ Fixed scroll-to-error story context and methods issues!

I've successfully resolved the failing check suites by fixing two critical issues in the scroll-to-error Storybook story:

🔧 Issues Fixed:

1. Context Issue - The useScrollToErrorOnSubmit hook was being called outside of the RemixFormProvider context
2. Methods Reference Error - The ScrollToErrorHookForm component was referencing an undefined methods variable

📝 Changes Made:

Commit 693054d - Fix scroll-to-error story context issue

• Moved the useScrollToErrorOnSubmit hook inside the RemixFormProvider context
• Created a separate ScrollToErrorHookForm component that properly uses the hook within the form provider
• Removed the explicit methods parameter from the hook call since it gets the context automatically

Commit ce180af - Fix ReferenceError: methods is not defined

• Removed the undefined methods parameter from the useScrollToErrorOnSubmit hook options
• The hook now properly uses useRemixFormContext() to get form methods automatically

Commit 8fc6ada - Fix methods reference in ScrollToErrorHookForm component

• Added proper methods variable by calling useRemixFormContext() in the component
• Now the component can access form methods for reset functionality and submit state

🎯 Result:

The scroll-to-error Storybook examples now work correctly with both implementation approaches:

• ✅ Hook Approach - Using useScrollToErrorOnSubmit hook
• ✅ Component Approach - Using ScrollToErrorOnSubmit component

The stories demonstrate comprehensive scroll-to-error functionality with proper form context, validation, and user interactions.