RFC: Component package consolidation

[mchadwickweb]

Background

We currently have two types of component packages.

shared-component--[name]

These were created to serve the One Web Platform and serve a components CSS as well as a Jinja template coupled to a CMS module.

component-[name]

These components were built pre One Web Platform, and were a platform agnostic component to supply CSS and HTML examples.

Problem

In 2022 we will be looking to grow the adoption of our design system components. A big part of that is to adopt React to help serve a number of our product teams using React.

With this we will look to support the following as our chosen component templating frameworks.

• HTML (As examples)
• Jinja (For One Web Platform)
• React (Platform agnostic)

We see these three supporting all use cases across the Co-op, including other frameworks as well. As they will still be able to use both the CSS and the HTML examples to build on top of. So you will still receive all the visual consistency, usability and accessibility built in to our examples.

To make supporting these as easy as possible we want to distribute them as a single component package rather than three packages, one per framework.

Proposal

We migrate all shared-componet--[name] to component-[name]

We plan to do the following to make these migration as painless as possible for product teams.

• Rename the package only at this time. No code changes as part of the migration, including the addition of React. We will move that to a later phase.
• Maintain version numbers. This will make it easier to match the current package you have installed.
• Maintain the existing packages in NPM but apply a deprecation messages to ensure it is clear we should stop using them.
• Provide extensive migration documentation.
• Work with teams directly in order to make sure the migration happens with no impact to current services.

Future phases

1. Review our current component stock and their usage to see if we still need to support.
2. Build the refined list of components in React.
3. Build component documentation website with testing and playground support.