Smartbox

Smartbox is an open source React component library, built for SmartLogic's Clients.

It is a fork of SparkPost's Matchbox project, so mucho thanks to SparkPost.

Links:

• Component Demo
• Sass Documentation
• Unreleased Changes

---

Usage

1. Installation

In your React project, use npm to install smartbox:

npm install @smartlogic/smartbox --save

2. Include Styles

 // Import smartbox's styles
 @import '~@smartlogic/smartbox/styles.scss';
 // Optionally include config.scss for sass functions and mixins
 @import '~@smartlogic/smartbox/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 '@smartlogic/smartbox';

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/smartbox

# Bump version number
npm version x.x.x

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

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