[manager-components]: Pre-Containerized ODS Module for React-Hook-Form

[tibs245]

Have you already checked if a similar item is present on manager-components?

• Yes, I have already checked the existing components/hooks/utils.

What do you expect from this request?

Component

Description

I would like to propose the creation of a new module that provides a pre-containerized ODS (Design System) to facilitate the use of React-Hook-Form with standardized methods.

This module would help streamline the integration of ODS with React-Hook-Form, ensuring a consistent approach and reducing the need for custom implementations. By providing standardized methods, it would improve the development efficiency and maintainability of forms within our applications.

Where do you expect to use this?

All projects (Similart component used on SAP)

Do you have mock-up?

Same render of ODS

When do you expect this to be delivered?

No response

Additional Information

I have PR to comparaison :

On this PR we can use React hook form with specific encapsulation field for needs :
#14523

On this PR we can use React-hook-form with generic field encapsulation compatible for all needs :
#15207

[anooparveti]

We decide to make a thorough study of the need and validate the request. @aboungnaseng-ovhcloud will create a Jira on Control Tower board for the study.

[aboungnaseng-ovhcloud]

we will add some documentation about react hook form, guideline

[tibs245]

To inform the last discussion avec @aboungnaseng-ovhcloud :

We think it's more relevant use custom field for the moment same we duplicate code. And add documentation to facilitate the implementation.

And the pre-containerized module with ODS component can be created when ODS-19 is released.

This avoid painful migration between 2 modules version not used yet

[aboungnaseng-ovhcloud]

We will handle the documentation in this ticket MANAGER-17263

[tibs245]

Note: Can be useful to implement i18n recommendation and add yield and relevant e2e selector.

<div role="group" data-fieldname="example-name" aria-labelledby="label-id" aria-describedby="helper-id error-id">
  <label for="input-id">Nom</label>
  <input id="input-id" name="example-name" aria-invalid="true|false" aria-describedby="helper-id error-id" />
  <p id="helper-id">Texte d’aide</p>
  <p id="error-id" role="alert">Message d’erreur</p>
</div>