fix: phone input validation error should display red borders like email input

[Nabhag8848]

ISSUE

• closes Phone input validation error should display red borders like email input #13032

[greptile-apps]

Greptile Summary

This PR improves phone number input validation in the form system by adding visual error feedback and preventing the input from closing when invalid numbers are entered. The changes include:

1. Adding red border styling for invalid phone numbers in MultiItemBaseInput
2. Implementing proper phone validation using zod and libphonenumber-js
3. Adding error state handling and propagation through the component hierarchy
4. Creating a new phoneSchema validation module

The change aligns phone input validation behavior with email input validation, providing a more consistent user experience. Instead of silently failing and closing when invalid phone numbers are entered, the input now shows a red border and maintains the user's input.

Confidence score: 4/5

1. This PR is very safe to merge as it improves UX without changing core functionality
2. The score is 4 because while the changes are well-structured, the new phoneSchema.ts has minimal test coverage
3. Files needing attention:
   • packages/twenty-front/src/modules/object-record/record-field/validation-schemas/phoneSchema.ts - Consider adding test cases

_{3 files reviewed, 2 comments
Edit PR Review Bot Settings | Greptile}

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:62052

This environment will automatically shut down when the PR is closed or after 5 hours.

[lucasbordeau]

LGTM

[github-actions]

Thanks @Nabhag8848 for your contribution!
This marks your 28th PR on the repo. You're top 2% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter