Create new `googlesitekit-components` package for basic Material 2 components (in preparation for Material 3)

A new JS entry point googlesitekit-components should be implemented, in which all basic (Material 2) components are bundled. The file name for it should be specific to the Material version though, i.e. googlesitekit-components-gm2.js. This is in preparation for #5802 (see related https://github.com/google/site-kit-wp/issues/5802#issuecomment-1251368851).

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• All Site Kit components from assets/js/components for which there is an equivalent component in @material/web should be moved into a new assets/js/googlesitekit/components-gm2 directory.
• A new assets/js/googlesitekit/components-gm2/index.js file should be added that imports all these React components and adds them as a property on a Components object (similar to e.g. in assets/js/googlesitekit/data/index.js).
• A new assets/js/googlesitekit-components-gm2.js file should be added that just imports the above object and exposes it on a googlesitekit.components JS global (similar to e.g. in assets/js/googlesitekit-data.js).
• The above entry point file should be added as a new asset in PHP, using the name googlesitekit-components. It should become a dependency to any asset that depends on any of these UI components (likely any JS files that have any components, i.e. most of them; maybe not the pure data store ones).
• All imports (across the entire plugin) for any of those components which are now in the new googlesitekit-components asset should going forward be imported from 'googlesitekit-components' rather than relatively.
• The new entry point / asset should also be added as an external, so that these imports in a production bundle are resolved as coming from the googlesitekit.components global, but otherwise from the assets/js/googlesitekit-components-gm2.js file.

Implementation Brief

Other than the regular IB requirements, the IB should also include the exact list of components to migrate to the new “package”, based on their “counterpart” in the @material/web package.

• Create a new assets/js/googlesitekit/components-gm2 directory and move the following components from assets/js/components to this new directory:
  • Button
  • Checkbox
  • Chip
  • Dialog
  • Menu
  • ProgressBar
  • Radio
  • Switch
  • Any other components that are equivalent in @material/web.
• Create a new assets/js/googlesitekit/components-gm2/index.js file that imports all the components from the above directory and adds them as a property on a Components object (similar to e.g. in assets/js/googlesitekit/data/index.js).
• Create a new assets/js/googlesitekit-components-gm2.js file that imports the above object and exposes it on a googlesitekit.components JavaScript global variable (similar to, e.g., in assets/js/googlesitekit-data.js).
• In Assets::get_assets() method using the Script constructor, add the new googlesitekit-components asset and the source googlesitekit-components-gm2.js.
• Add googlesitekit-components as a dependency to the following assets and any asset that depends on any of these UI components:
  • googlesitekit-user-input
  • googlesitekit-dashboard-splash
  • googlesitekit-dashboard-details
  • googlesitekit-dashboard
  • googlesitekit-settings
  • Any other assets that depend on any of the above components
• Add googlesitekit-components as a dependency in all the Modules’ setup_assets methods:
  • AdSense:setup_assets()
  • Analytics::setup_assets()
  • Analytics_4::setup_assets()
  • Idea_Hub::setup_assets()
  • Optimize::setup_assets()
  • PageSpeed_Insights::setup_assets()
  • Search_Console::setup_assets()
  • Tag_Manager::setup_assets()
  • Thank_With_Google::setup_assets()
• Add googlesitekit-components as an external in the webpack.config.js file.
• Add googlesitekit-components as an entry point and set the source to assets/js/googlesitekit-components-gm2.js in the webpack.config.js file.
• Add googlesitekit-components to settings.import/core-modules in the .eslintrc.json file.
• Update all the imports for the above components to import from googlesitekit-components rather than relatively.

Test Coverage

• No new tests are to be added.
• Ensure all the existing tests are passing.

QA Brief

• This doesn’t include any visual changes in the UI. It just changes how UI components are referenced in the background.
• Check out the entire Site Kit workflow and verify that there are no regressions.
• Try running googlesitekit.components in the browser console in Site Kit screens and verify that it returns an object with components (e.g. Button, Checkbox, Chip, etc.).

Changelog entry

• Add a googlesitekit.components global and entrypoint with Material 2 components.

[felixarntz]

@tofumatt @techanvil @aaemnnosttv I have opened #6112 and #6113 as follow up issues to address the two above (non release blocking) comments.

[aaemnnosttv]

⚠️ Approval

Similar to #4863, this entry point shouldn’t be bundled as part of Module Entry Points as it’s intended to be independent from the rest of our internal modules. i.e. as an external, it shouldn’t need the common runtime.

This package isn’t used yet so this detail need not block the release.