Save page data form values in application state with support for undo/redo

I discussed next steps with @bnjmnm on a call last week. We agreed on the followings:

1. We will make use of FormStateContext implemented by @/components/form/components/Form to provide the information of what form is being rendered: currently this will mean the component props form or page data form.
2. InputBehaviors can make use of this information and return different higher-order components (or the same with different props) to adjust the behaviors according to the form's needs.
3. We will not change how the Twig to JSX mapping is done, so reverting my previous commits, twig-to-jsx-component-map.js will stay unchanged.
4. All mapped components will be split into two (or more) components, where a component with its name prefixed with Drupal will render another component (or components) which are purely presentational. The Drupal-prefixed component will wrap the component(s) it renders in InputBehaviors. This is what I already started in 1631cd12. The separation will help with our Storybook implementation, implementing designs in isolation etc.

Here is a high-level overview of what InputBehavior does today. Validation and store update are the two areas where we need to allow different logic for each form. They're currently implemented for component props.

Good callout! It's out of scope for this issue, but I'm definitely keeping an eye on #3488368: Also convert metadata (page data) fields in ClientDataToEntityConverter to make saving easier — maybe quite soon.

@jessebaker wisely suggested that I consider extracting a piece of this work into a separate issue, and it made a lot of sense to do so for #4.4: #3491265: Split form components into `Drupal`-prefixed behavioral wrappers and presentational components.

It's nice to wrap up that piece, and it will make the review of this issue much easier. 😌

Draft code is up showing the idea:

1. InputBehaviors wraps the input in one of InputBehaviorsComponentPropsForm or InputBehaviorsEntityForm. (We can also add a fallback later.)
2. These wrappers both wrap the input in InputBehaviorsCommon which essentially does what InputBehaviors did before, but using the following callbacks it receives as props:
   • commitFormState;
   • parseNewValue;
   • validateNewValue — with an optional setInputMessages argument.

This new approach already works and does everything it did before for the component props form.

Undo/redo isn't working yet for the page data form. I need a way to initially get the entire entity data, so I can put it in the Redux store all at once instead of saving each input one by one, which would pollute the history for undo/redo. I chatted about this with @larowlan, I'll return that data in the response of \Drupal\experience_builder\Controller\ApiLayoutController for now, and save it to the appropriate slice in onquerystarted.

@bnjmnm is kind enough to take over for the rest of this week as I'll be mostly on holiday until early January.

Here is what's left:

1. Reroll to incorporate changes from #3492511: Move form state into the global store;
2. Sending page data to backend;
3. Test coverage;
4. Code clean-up.

Follow-up issues opened:

• #3494581: Add Media button in page data form is clickable before fully initialized;
• #3494584: Handle fields with multiple form control elements on the page data form.

Re: #13

Very good catch! Those are introducing new functionality — only used by the page data form for now. They are not covered in prop-types.cy.js, because no prop type is using those elements. I'll create the issue to write tests.

Thanks, everyone, for the great reviews, the collaboration, and the patience with this issue! 💫