Overview:

Matchbox is an open source design system and React component library built specifically for SparkPost’s UI. It offers a set of features and tools to help developers easily create user interfaces that are consistent and visually appealing.

Features:

• Design System and Component Library: Matchbox provides a comprehensive design system and a collection of reusable React components, making it easier for developers to build UIs.
• Versioning and Publishing: Matchbox uses changesets for versioning and publishing to NPM. This ensures that each release is accurately documented and accessible.
• Build Process: The theme includes a build process that allows developers to build all the packages at once, ensuring efficient and reliable development workflow.

Installation:

To start using Matchbox, follow these steps:

1. Ensure you are logged into SparkPost’s NPM account locally via the NPM CLI.
2. Run npx changeset in your pull request to create a changeset. Use space to select options and enter to proceed.
3. Verify the accuracy of the changeset summary located in the .changeset directory.
4. Commit the changeset to your pull request.
5. Once merged to main, run npx changeset version to consume any previously created changesets, bump the packages, and update changelogs.
6. Build all packages by running npm run build.
7. Finally, run npx changeset publish to publish all the bumped packages to NPM. You will be prompted to enter your NPM OTP (One-Time Password).

Make sure to also check if the git tags were pushed to the repository’s releases section. If not, push the tags manually.

Summary:

Matchbox is an open source design system and React component library designed for SparkPost’s UI. It offers a range of features including a comprehensive design system, reusable components, versioning and publishing tools, and a streamlined build process. Follow the installation guide to start using Matchbox and create visually appealing user interfaces.