feat: add advanced pattern validation

Support for Granular Regex Patterns in OTP Input Component

Objective

This pull request introduces enhancements to the OTP (One-Time Password) input component, enabling it to accept and validate input based on distinct regex patterns for each character slot. Previously, the component supported a single regex pattern that applied universally to all input slots, which limited flexibility in scenarios where different input validation rules were required for each slot.

Changes

Pattern Prop Enhancement: Modified the pattern prop to accept either a single regex pattern as a string or an array of objects with regex properties, where each object corresponds to a specific input slot.
Validation Logic Update:
- Updated the _changeListener and _pasteListener functions to handle both the single regex and the array of regexes. Now, each character input is validated against its corresponding regex pattern if provided, otherwise against a universal regex.
- Removed the pattern attribute from the <input> HTML element and managed validation entirely through React's event handling to allow complex validation scenarios.
Component's Robustness:
- Ensured that the component gracefully handles a mix of single and multiple regex patterns, providing developers with the flexibility to dictate input behavior on a per-character basis.
- Added comprehensive checks and balances to ensure that any invalid input is immediately recognized and prevented, enhancing the component's reliability and usability in diverse applications.
Dependencies and Propagations:
- Cleaned up unnecessary dependencies from React.useMemo and React.useCallback hooks to streamline component updates and re-rendering processes.
- Maintained all previous props and event handlers, ensuring backward compatibility and seamless integration with existing codebases.

Impact

These changes allow developers to implement more sophisticated input validation strategies for OTP fields, such as differentiating between numeric, alphabetic, and alphanumeric characters, or applying specific security requirements for each slot. This enhancement is crucial for applications requiring high levels of customization and security, such as banking and secure communications.

Conclusion

This update significantly enhances the OTP input component's flexibility and functionality, making it a robust choice for applications requiring detailed input validation configurations. The implementation follows best practices in software development, ensuring high maintainability and performance.

guilhermerodz / input-otp