DRAFT + Exploration : Forms without React Hook Form + Component Shim Pattern

[scotttjob]

Motivations

We have an upcoming need to decouple from react-hook-form. We still want to leverage the library, but we no longer want our form components to be directly coupled, instead we want them to support being used in that environment but not use the library directly.

This PR is the first step towards that future.

In this PR, we've broken down all the requisite parts of FormField and FormFieldWrapper into either smaller bite-sized components, or hooks.

This allows FormFieldWrapper to now just be collating a variety of smaller pieces into a cohesive whole. The purpose of the first part of this refactor was to ensure that nothing changed for the main control flow, which can be verified by our passing test suite (with no changes to tests in this PR. I want to verify passing tests still in our downstream applications).

With FormFieldWrapper/FormField broken down into chunks, we could now leverage those chunks directly in a new version of InputText that bypasses the Form and react-hook-form specific FormField components by leveraging FormFieldWrapper directly, and providing the input html element directly.

You can verify this new component is working through the third part of this refactor, the potential pattern for an Atlantis Shim. Currently if you use InputText directly, you'll get the OG version of the component. If you pass a prop called 'version' set to 2 you'll get the new component. You can see how we handle this swap in index.tsx under InputText.

Testing

To test, open a storybook story (InputText/Web.stories) and add version:2 to any of the prop lists. It'll turn that InputText into a Version 2.0 InputText. It should still be functional in that test.

Efforts were taken to gets tests as good as possible for the new version of the component. If you forcibly swap to the new version (in the shim, force flow to the new component versus the old), you should only have failing tests in Form (which makes sense, react-hook-form is not part of the flow), AutoComplete (some tests rely on react-hook-form functionality) and InputText (some tests rely on react-hook-form functionality). The rest of the tests in the system (which only use InputText downstream with basic examples) pass fine in this scenario.

Changes

• Refactored FormFieldWrapper and FormField to be broken down into smaller chunks, but no actual code changes.
• Added InputTextSPAR (naming TBD) as a potential 'new' implementation of InputText that bypasses react-hook-form.
• Added a potential pattern for an Atlantis Shim to allow existing users of a component to get the legacy version of the component, and consumers wishing to use the new pattern can apply an additional prop version:2 to the prop list.

Mainly looking for discussion on the possible approaches from the team! :)

---

In Atlantis we use Github's built in pull request reviews.

[github-actions[bot]]

⚠️ Pull Request titles in this repo follow the Conventional Commits specification.

No release type found in pull request title "DRAFT + Exploration : Forms without React Hook Form + Component Shim Pattern". Add a prefix to indicate what kind of release this pull request corresponds to. For reference, see https://www.conventionalcommits.org/

Available types:

• feat: A new feature
• fix: A bug fix
• docs: Documentation only changes
• style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
• refactor: A code change that neither fixes a bug nor adds a feature
• perf: A code change that improves performance
• test: Adding missing tests or correcting existing tests
• build: Changes that affect the build system or external dependencies (example scopes: gulp, broccoli, npm)
• ci: Changes to our CI configuration files and scripts (example scopes: Travis, Circle, BrowserStack, SauceLabs)
• chore: Other changes that don't modify src or test files
• revert: Reverts a previous commit

[github-actions[bot]]

Published Pre-release for 2f495b8dcf918e1e3d3f505eca487b3ae5712e68 with versions:

  - @jobber/components@5.46.1-scotttfo-2f495b8.3+2f495b8d

To install the new version(s) for Web run:

npm install @jobber/components@5.46.1-scotttfo-2f495b8.3+2f495b8d