gridplus-ui-components

ui-components

A React component library, comprised of reusable components created to be shared across web projects at Grid+. By using this library we ensure design and brand consistency across platforms while minimizing code copypasta.

Getting Started

Installing in your project

To install this project as a package in your web app, run:

npm i -S git+ssh://[e-mail]/GridPlus/ui-components.git ui-components

By default, npm will install the latest tagged version of ui-components from git. From here you should be able to include any of the available components like so:

import { Button } from 'ui-components'

<Button label="click me" primary onClick={() => console.log('click')} />

To see full documentation, clone the repo, and run npm i && npm run start. This will run your tests, generate the documentation, and start up storybook.

Contributing

Please ensure all changes are made by the alpha branch. The reasoning for this is explained in the deployment section.

Updating current components

When updating components, ensure that the component is well documented, and has each of their propTypes listed. If you look at the current components, you will see their documentation format which you will want to copy. The comments for a component are used to automatically generate documentation which will be shown in Storybook. A comment above the component definition will be used as the description. Each of your declared propTypes will be added to a table within storybook, and the comments above each of your prop type definitions will be used as their descriptions.

Adding new components

To add a new component you will want to run the npm run new-comp ComponentName command in your terminal. This will do the following:

1. Generate a folder in src/components directory with a .js file of the same name as well as an index.js file exporting the component.
2. Export the component from src/components/index.js
3. Add a folder to the /stories directory, which pulls in your component and displays it as a story.

Deployment

Once all your changes have been committed, deploying is very easy. When deploying we want to keep all branches and tags to be in sync. To do this, you have a simple command available to run using npm run release. This will prompt you to enter the type of change this is using semantic versioning; either major/minor/patch. Type in your version and hit enter. This will update the package.json version for you correctly, push your changes, jump over to master to do the same thing, and then jump back to alpha.