Validate exist area

[TexLuciano]

🎯 Summary

Adds a robust validation system for steps, allowing developers to define custom validations before allowing progression in onboarding tours.

✨ Features Added

�� Validation System

• Custom validations per step: Each step can have its own validation logic
• Customizable error messages: Clear and specific feedback for users
• Synchronous and asynchronous validations: Support for functions returning boolean or Promise<boolean>
• Performance optimized: Validation executed only when user tries to advance

🎨 User Interface

• Visual feedback during validation: "Validating..." indicator on buttons
• Highlighted error messages: Consistent design with alert colors
• Custom card integration: validationError and isValidating props available
• Full compatibility: Works with all existing adapters (Next.js, React Router, Remix, Window)

🚀 How to Use

Basic Example

{
  icon: "📋",
  title: "Open Modal",
  content: "Click the button to open the modal",
  selector: "#modal-button",
  validation: {
    validate: () => isModalOpen,
    errorMessage: 'You need to open the modal before continuing',
  },
}

Complex Validation Example

{
  icon: "👤",
  title: "Contact Data",
  content: "View customer information",
  selector: "#protocol-info",
  validation: {
    validate: () => {
      const element = document.querySelector('#protocol-info');
      return !!element;
    },
    errorMessage: 'You need to open protocol details first',
  },
}

📁 Files Modified

Core

• src/types/index.ts - Added StepValidation interface
• src/NextStepReact.tsx - Implemented validation logic
• src/DefaultCard.tsx - Added error display support

Documentation

• README.md - Complete validation system guide
• src/docs/validation-feature.md - Detailed documentation
• src/examples/ - Practical usage examples

Build

• package.json - Updated exports and scripts
• src/index.ts - Exported new types

�� Common Use Cases

✅ Implemented Validations

• Modals: Verify modal is open before continuing
• Forms: Validate required fields are filled
• Dropdowns: Confirm option selection
• Checkboxes: Verify terms acceptance
• Dynamic elements: Wait for content loading
• Sequential flows: Ensure correct action order

�� Compatibility

• ✅ Next.js: Fully compatible
• ✅ React Router: Fully compatible
• ✅ Remix: Fully compatible
• ✅ Window: Fully compatible
• ✅ Custom Cards: Validation props available
• ✅ TypeScript: Complete types included

📚 Documentation

• Quick guide: Examples in main README
• Detailed docs: src/docs/validation-feature.md
• Practical examples: src/examples/simple-validation.tsx
• Use cases: src/examples/validation-example.tsx

🎯 Benefits

1. Improves UX: Users cannot skip important steps
2. Reduces errors: Validation ensures necessary actions
3. Flexibility: Each step can have specific validation
4. Performance: Validation only when needed
5. Maintainability: Clean and well-documented code

🔄 Breaking Changes

None - This is a purely optional addition that doesn't affect existing functionality.

🧪 Tested

• Synchronous validations
• Asynchronous validations
• Custom error messages
• Custom card integration
• All adapters compatibility
• Performance in different scenarios

---

Closes #[issue-number-if-any]

Related to: More robust and intuitive onboarding system

[juanco-itmu]

@enszrlu Can you please look at this PR. It would add a lot to the repo.

[enszrlu]

@TexLuciano @juanco-itmu text for the contribution. Great idea!
only thing is that I am not sure if this is the right way to handle it. I always want to keep NextStep simple to use and 99% of the users will not need validation. If we make the changes done in this PR, custom card will get complicated with additional checks for isValidating etc.

Also passing down validation functions between server and client components will need testing.

I have added an alternative to documentation on how you can run validation with current library.
https://nextstepjs.com/docs/nextjs/validation

I will come back to this later.

Ps PR has some unnecessary diffs and Portuguese text on different places.