feat(forms): add framework for `ElementInternals` support

[pdesoyres-cc]

What is this PR?

This PR adds support for ElementInternals. It makes our inputs (cc-input-text, cc-input-number, cc-input-date, cc-select) and our button (cc-button) implement the ElementInternals API.

With this PR you get the following improvements:

• one can use our inputs inside a <form>, they will behave like native HTML inputs.
• our inputs have
  • a validationMessage property that will be displayed below the input (and not as a native tooltip)
  • a customValidator property that lets developers add their validation logic
  • a customErrorMessages property that lets developers add their error messages and also, override default error messages.

Also, it adds some utility codes that will make our lives better when dealing with forms inside high-level components:

• a <form> submit event handler that handles all the logic on form submission (validation, error message display, focus)
• a Lit directive to be attached to a <form> element
• a Lit reactive controller when dealing with asynchronous code (typically, when submitting forms that perform HTTP call)

Finally, this PR contains modifications on 3 high-level components containing a form (cc-email-list, cc-orga-member-list, cc-ssh-key-list). It implements form management using this new framework.

How to review?

After many in-sync meetings, you should have a good understanding of the key concepts manipulated in this PR.

Now,

• take a look at the code,
• try the demos in sandbox (and read the code of the demo at the same time),
• check the Storybook documentation and stories,
• if you want to go further, you could take a component that has got a form, and try to use the framework.

[github-actions[bot]]

🔎 A preview has been automatically published : https://clever-components-preview.cellar-c2.services.clever-cloud.com/forms/init/index.html.

This preview will be deleted once this PR is closed.

[roberttran-cc]

Two random thoughts:

• I think it could be nice to have a dedicated page in Storybook, in the "Contributing" section, explaining the responsibilities of the different parts of the framework (directive, controller, utils, etc.), links between them and when to use them (in another issue).
• The demos are really, really cool on how they demonstrate different scenarios and also less-known use cases. Pro stuff.

[hsablonniere]

Hey @pdesoyres-cc, nice work :muscle:

I went through the commits and files of this PR with lots of attention. Before that, I had to try the low level stuffs by myself (element internals and creating your own directives) to really understand the whole thing :wink:

I wrote many remarks and questions in a local file and I also tried a simplification in a branch. I'd like to try some refactorings with you in pair (or mob) programming sessions but I don't want to freeze this ongoing PR.

My proposition would be to discuss and settle the "breaking stuffs" first (the publicly available APIs, the ones used by smart components). Once we (the team) agree on something, we can merge. Then we can make iterative refactoring sessions together that don't break the code but (hopefully simplify it, decouple it or reduce the amount of code).

[github-actions[bot]]

🔎 The preview has been automatically deleted.