jeanbauer / matchbox

🔥 A react UI component library

Matchbox

Matchbox is an open source React component library, built for SparkPost's UI.

Links:

• Component Demo
• Sass Documentation
• Unreleased Changes

---

Usage

1. Installation

In your React project, use npm to install matchbox:

npm install @sparkpost/matchbox --save

2. Include Styles

 // Import matchbox's styles
 @import '~@sparkpost/matchbox/styles.scss';
 // Optionally include config.scss for sass functions and mixins
 @import '~@sparkpost/matchbox/src/styles/config.scss';

3. Use the React components

In-depth usage docs coming in the future. For now, reference storybook.

import React from ‘react’;
import { Panel } from '@sparkpost/matchbox';

const YourComponent = () => (
 <Panel accent title='Hey!'>
  <Panel.Section>
    Section Content
  </Panel.Section>
 </Panel>
);

Storybook Development

React Storybook is included for local development.

# Runs storybook at localhost:9001
npm run start:storybook

Running Tests

Unit Testing

When running tests for the first time locally:

npm run pretest

After the initial setup, tests can be run at any time via:

npm run test:unit

End to End Testing

End to end tests can be run locally, either in headless mode or with a GUI.

First, run storybook with a local server:

npm run start:storybook

Then, either run Cypress in headless mode:

npm run test:e2e:headless

Or, run Cypress with the GUI

npm run test:e2e:gui

Publishing

# First merge your PR into master
# Move into the package you want to publish
cd packages/matchbox

# Bump version number
npm version x.x.x

# Commit the release
git add .
git commit -m "Publish @sparkpost/matchbox x.x.x"
git push

# Run the build and publish to NPM with your 2fa code
npm run build
npm publish --otp=xxxxxx