Investigate reducing the number of Psammead dependencies we have to integrate into Simorgh

[andrewscfc]

Is your feature request related to a problem? Please describe.
Psammead is a monorepo of visual components primarily used in Simorgh but also by other BBC teams and potentially other open source projects; currently, we build, publish the components individually. As a consequence, in Simorgh we have to integrate each component individually. This approach allows for a 'mix and match' integration of Psammead components, e.g. a newer version of psammead-consent-banner while other components are left pinned to older versions. Allowing this though has consequences, particularly around sub-dependencies, in the example above in Simorgh we would have:

psammead-consent-banner 
|_psammead-styles 7.5.0

installed alongside

psammead-byline
|_psammead-styles 7.0.0

This means that two versions of psammead-styles will be bundled with the Simorgh application, bloating the production bundle and giving a poorer experience to users through an increased download size. This situation could become a lot worse depending on how many combinations of psammead components are installed simulataneously in Simorgh at different versions.

We mitigate a lot of these problems using two approaches:

• The talos bumping bot, raising PRs to update components that depend on new release of sub-dependencies
  • e.g. psammead-styles is released, psammead-consent-banner and psammead-byline etc, are bumped to a newer version and updated to use the new version of psammead-styles
  • on merge these a published to npm
• In Simorgh we generally integrate all the latest versions of psammead components, assuming talos has bumped all the components we can be assured only one version of a given psammead dependency will be bundled with Simorgh

As above, when we deviate from the second point we get a bloated production bundle.

Additionaly using an inconsistent combination of psammead packages can cause visual inconsitencies, recently we nearly released Simorgh with components using two different versions of a BBC font for RTL languages as we were fixing a bug in one component at the same time as upgrading a fonts in a common, shared dependency of most psammead packages.

Supporting all this flexibility causes us to need a package bumping bot and tooling to publish the packages invidiually.

Describe the solution you'd like
Create a spike branch for psammead implementing the following:

Add a new psammead package that exports all psammead packages via one package taking a similar approach to the chakra component library; the package could be published under a new name such as psammead-react to allow us to test without interfering with live integrations in Simorgh and beyond. We could then install this into Simorgh (see approach from chakra: https://github.com/chakra-ui/chakra-ui/tree/main/packages/react#installing-chakra-ui) on a spike branch and verify a hypothesis:

• We can change our psammead package imports to use the new single package and demonstrate this has no significant effect on our bundle size
  • We don't want a situation where psammead is added as a single giant bundle and therefore downloaded on every page type, regardless of which components are actually used on that page type

The theory behind this is that rather than facilitating a 'mix and match' approach to installing psammead packages, this approach allows us to release one single package with all our dependencies setup in a predictable way. We will make it no longer possible to use two different versions of psammead styles at the same time; we keep releases simple and focused and what new functionality they are enabling. If we need to do patches on older versions of the single psammead package, we could consider practicing gitflow where we could branch off a previous version and a hotfix release to fix a bug while a new version with some new functionality is in progress.

Describe alternatives you've considered
In discussions we have suggested various other approaches to this problem:

Simplify our package structure
Decrease the number and depth of dependencies in our psammead dependency tree, our existing model works better with a shallower dependency tree as we don't need to run talos and publish packages as many times.

Move some packages to Simorgh
Some packages are quite tightly coupled to Simorgh and are not so much 'atomic' components you would expect to find in a component library, e.g. radio-schedules; lifting these into Simorgh would simplify our dependency tree and decrease the amount of packages to manage in psammead.

Testing notes
[Tester to complete]

Dev insight: Will there be any potential regression? etc

• This feature is expected to need manual testing.

Additional context

Example Psammead Dependency Tree

├── @bbc/gel-foundations@6.0.0
├─┬ @bbc/moment-timezone-include@1.1.4
│ ├─┬ find-cache-dir@3.3.1
│ │ ├── commondir@1.0.1
│ │ ├─┬ make-dir@3.1.0
│ │ │ └── semver@6.3.0
│ │ └── pkg-dir@4.2.0 deduped
│ ├─┬ mkdirp@0.5.5
│ │ └── minimist@1.2.5 deduped
│ ├─┬ moment-timezone@0.5.32
│ │ └── moment@2.29.1 deduped
│ └── object-hash@1.3.1
├── @bbc/psammead-amp-geo@1.2.0
├── @bbc/psammead-assets@3.1.2
├─┬ @bbc/psammead-brand@7.0.19
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ ├── @bbc/psammead-visually-hidden-text@2.0.1 deduped
│ └── UNMET PEER DEPENDENCY @emotion/styled@^10.0.27
├─┬ @bbc/psammead-bulleted-list@3.0.7
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├─┬ @bbc/psammead-bulletin@5.0.18
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ ├── @bbc/psammead-assets@3.1.2 deduped
│ ├── @bbc/psammead-live-label@2.0.8 deduped
│ ├── @bbc/psammead-story-promo@8.0.9 deduped
│ ├── @bbc/psammead-styles@7.0.3 deduped
│ ├── @bbc/psammead-visually-hidden-text@2.0.1 deduped
│ └── UNMET PEER DEPENDENCY @emotion/styled@^10.0.27
├─┬ @bbc/psammead-byline@3.0.7
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├─┬ @bbc/psammead-calendars@2.0.19
│ ├── @bbc/psammead-locales@5.0.0 deduped
│ ├── UNMET PEER DEPENDENCY @emotion/styled@^10.0.27
│ └── jalaali-js@1.1.0
├─┬ @bbc/psammead-caption@4.1.3
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├─┬ @bbc/psammead-consent-banner@4.0.7
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├─┬ @bbc/psammead-content-anchor@1.0.0-alpha.1
│ ├── @juggle/resize-observer@2.5.0
│ └── intersection-observer@0.7.0
├─┬ @bbc/psammead-copyright@3.0.7
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├── @bbc/psammead-detokeniser@1.0.0
├─┬ @bbc/psammead-embed-error@3.0.9
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ ├── @bbc/psammead-assets@3.1.2 deduped
│ ├── @bbc/psammead-styles@7.0.3 deduped
│ └── UNMET PEER DEPENDENCY @emotion/styled@^10.0.27
├─┬ @bbc/psammead-episode-list@1.0.7
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ ├── @bbc/psammead-assets@3.1.2 deduped
│ ├── @bbc/psammead-image-placeholder@3.0.9 deduped
│ ├── @bbc/psammead-styles@7.0.3 deduped
│ └── UNMET PEER DEPENDENCY @emotion/styled@^10.0.27
├─┬ @bbc/psammead-figure@2.0.1
│ └── @bbc/gel-foundations@6.0.0 deduped
├─┬ @bbc/psammead-grid@3.0.10
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├─┬ @bbc/psammead-heading-index@3.0.7
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├─┬ @bbc/psammead-headings@5.0.7
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├─┬ @bbc/psammead-image@2.0.1
│ └── ramda@0.27.1 deduped
├─┬ @bbc/psammead-image-placeholder@3.0.9
│ ├── @bbc/psammead-assets@3.1.2 deduped
│ ├── @bbc/psammead-styles@7.0.3 deduped
│ └── UNMET PEER DEPENDENCY @emotion/styled@^10.0.27
├─┬ @bbc/psammead-inline-link@3.0.6
│ └── @bbc/psammead-styles@7.0.3 deduped
├─┬ @bbc/psammead-live-label@2.0.8
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ ├── @bbc/psammead-styles@7.0.3 deduped
│ ├── @bbc/psammead-visually-hidden-text@2.0.1 deduped
│ └── UNMET PEER DEPENDENCY @emotion/styled@^10.0.27
├─┬ @bbc/psammead-locales@5.0.0
│ ├── jalaali-js@1.1.0 deduped
│ └── moment@2.29.1
├─┬ @bbc/psammead-media-indicator@6.0.9
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ ├── @bbc/psammead-assets@3.1.2 deduped
│ ├── @bbc/psammead-styles@7.0.3 deduped
│ └── UNMET PEER DEPENDENCY @emotion/styled@^10.0.27
├─┬ @bbc/psammead-media-player@5.0.17
│ ├── @bbc/psammead-assets@3.1.2 deduped
│ ├── @bbc/psammead-image@2.0.1 deduped
│ ├── @bbc/psammead-image-placeholder@3.0.9 deduped
│ ├── @bbc/psammead-play-button@3.0.9 deduped
│ └── UNMET PEER DEPENDENCY @emotion/styled@^10.0.27
├─┬ @bbc/psammead-most-read@6.0.16
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ ├── @bbc/psammead-grid@3.0.10 deduped
│ ├── @bbc/psammead-styles@7.0.3 deduped
│ └── UNMET PEER DEPENDENCY @emotion/styled@^10.0.27
├─┬ @bbc/psammead-navigation@9.0.1
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ ├── @bbc/psammead-assets@3.1.2 deduped
│ ├── @bbc/psammead-styles@7.0.3 deduped
│ ├── @bbc/psammead-visually-hidden-text@2.0.1 deduped
│ └── UNMET PEER DEPENDENCY @emotion/styled@^10.0.27
├─┬ @bbc/psammead-paragraph@4.0.7
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├─┬ @bbc/psammead-play-button@3.0.9
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ ├── @bbc/psammead-assets@3.1.2 deduped
│ ├── @bbc/psammead-styles@7.0.3 deduped
│ └── UNMET PEER DEPENDENCY @emotion/styled@^10.0.27
├─┬ @bbc/psammead-radio-schedule@5.1.10
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ ├── @bbc/psammead-assets@3.1.2 deduped
│ ├── @bbc/psammead-detokeniser@1.0.0 deduped
│ ├── @bbc/psammead-grid@3.0.10 deduped
│ ├── @bbc/psammead-live-label@2.0.8 deduped
│ ├── @bbc/psammead-styles@7.0.3 deduped
│ ├── @bbc/psammead-timestamp-container@5.0.17 deduped
│ └── UNMET PEER DEPENDENCY @emotion/styled@^10.0.27
├─┬ @bbc/psammead-rich-text-transforms@2.0.2
│ ├── ramda@0.26.1
│ └─┬ xmldoc@1.1.2
│   └── sax@1.2.4
├─┬ @bbc/psammead-script-link@3.0.8
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├─┬ @bbc/psammead-section-label@7.0.8
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├─┬ @bbc/psammead-sitewide-links@6.0.7
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├─┬ @bbc/psammead-social-embed@3.1.4
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├─┬ @bbc/psammead-story-promo@8.0.9
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├─┬ @bbc/psammead-story-promo-list@6.0.7
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├─┬ @bbc/psammead-storybook-helpers@9.0.7
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── react-helmet@6.1.0 deduped
├── @bbc/psammead-styles@7.0.3
├── @bbc/psammead-test-helpers@5.0.2
├─┬ @bbc/psammead-timestamp@4.0.8
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├─┬ @bbc/psammead-timestamp-container@5.0.17
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ ├── @bbc/psammead-timestamp@4.0.8 deduped
│ ├── UNMET PEER DEPENDENCY @emotion/styled@^10.0.27
│ └── moment-timezone@0.5.32 deduped
├─┬ @bbc/psammead-useful-links@3.0.8
│ ├── @bbc/gel-foundations@6.0.0 deduped
│ └── @bbc/psammead-styles@7.0.3 deduped
├── @bbc/psammead-visually-hidden-text@2.0.1