Vrai & Oro Component Library

Welcome to the Vrai & Oro Component Library. This site is meant to document all of the small reusable components for vraiandoro.com

Developer Prerequisites

• Node v8+
• Yarn
• Docker (optional, used for deployment only)
• now-cli (optional, used for deployment only)

Using as an npm package

You can add this repo as a dependency to your project with this handy npm package:

yarn add @diamondfoundry/vo-components@latest

Then you can import your components like so:

import React from 'react';
import { Button } from '@diamondfoundry/vo-components';

/* ... */

render() {

    return <Button>Hello world!</Button>
}

Notes on publishing: The build is minified and the source code is not sent to the npm registry, only the minified build. This is to reduce node_modules bloat, and maintain the smallest build size possible.

Updating the npm repository

When your pull request with shiny new components has been merged into master, it is the duty of the reviewer to update the repository's version, tag the commit, and publish on npm. You can do this by running the following:

# get the latest and greated merged stuff from master 
git pull origin master 

# npm uses semver versioning rules. Update the appropriate version number here.
npm version [major|minor|patch] 

# push up your newly tagged branch to git
git push origin master 

# publish your new package on the npm registry
npm publish

Note: It's best not to use yarn for publishing on npm.

Updating Projects dependent on vo-components

After an update has been published to npm, you'll need to tell your project that uses these components that a new version of this project has been released.

1. Get the latest version number of this project (0.1.0, 0.2.2, etc)
2. Inside the package.json file of your project, look for "@diamondfoundry/vo-components": "^x.x.x"
3. Update the ^x.x.x field to latest version number you found in step 1.
4. Run yarn or npm install in your directory to clean and update this dependency in your project.

Developer Installation

1. Clone the repository with git clone
2. Run yarn to install all dependencies
3. Run yarn styleguide to open up the styleguide environment for development

Additional Developer Notes

When you're creating a new component, don't forget to import it into the /src/index.js file.

/src/index.js acts as a "manifest" of all of the components inside the library. They should be exported in this file after a new component is created.

Every component needs 3 parts in order for its pull request to be accepted:

1. Source code for the component - ComponentName.js (lol)
2. Unit tests written - ComponentName.test.js
3. Examples written in a markdown file - ComponentName.md

Deploying to the web

IMPORTANT: Before you deploy, make sure all of your code is pushed and merged into the master branch on GitHub, and that you have a clean working directory.

TODO: Password protect webpack-dev-server

Make sure you have the now CLI tools installed on your machine, and you're logged in as [email protected]

1. Run yarn deploy-styleguide to deploy the styleguide to now.
2. The site should be visible at https://styleguide.vraiandoro.com

That's it!

Unit testing

You can run unit tests with jest - linked to the npm script of yarn test

If you want to run tests as you're developing components, you can use yarn test --watch