A collection of React components used by Harvest Profit to rapidly prototype new ideas without re-inventing the wheel.

Check out the docs!

Installation

You can install this via NPM:

npm install harvest-profit-ui

Or Yarn:

yarn add harvest-profit-ui

Usage

Javascript

Each component is actually exported from the main package, so you would simply do the following:

import { Button, InputString } from 'harvest-profit-ui';

Styles

You will need something to compile SASS, like webpack with sass-loader.

Styles are SCSS files contained separately from the code. You'll have to import those yourself, either in a SASS file, like so:

// Import from the node modules directory directly
@import './node_modules/harvest-profit-ui/scss/index';

// Import after setting up webpack (or other build method) with node_modules included
@import 'harvest-profit-ui/scss/index';

Or you can require it in a bundled Javascript file (when using webpack or other build tool with SASS):

// Using ES6 "import"
import 'harvest-profit-ui/scss/index.scss';

// Using "require" syntax
require('harvest-profit-ui/scss/index.scss');

You can overwrite the default variables by looking at the _variables.scss file, and creating the variables ahead of time, when using your own SCSS file:

/* my-styles.scss */

// Define "blue" before the import
$blue: #3d87bf;

// Anything "blue" will use the new "blue"
@import 'harvest-profit-ui/scss/index';

Documentation

The documentation for this project can be found here.

Development

This project uses React Styleguidist for documentation. While developing, you may find it useful to preview your components. You can do so by running the development server with:

yarn run start

To deploy a new version to NPM, bump the version number, commit/merge to master, and run the following:

yarn run clean
yarn run build

# Either NPM
npm publish
# Or Yarn, they do the same thing
yarn publish

License

This project is MIT licensed