React Helium library

🚧 under construction 🚧

Usage Example

See demo - https://alexdisdier.github.io/react-helium/

---

Getting Started

If you wish to use this components' library in your project.

npm install react-helium

or

yarn add react-helium

You then need to pass a theme or use react-helium default. This is usually done in the root level of your application.

e.g: (using react-jss for styling)

import React from 'react';
import { ThemeProvider } from 'react-jss';
import { theme, Button } from 'react-helium';
import 'react-helium/lib/style/base.css'; // Can be replaced with your custom reset.

<ThemeProvider theme={theme}>
  <div classname="root">
    <Button onClick={() => alert('hello world')} round color="green">
      I am THE button
    </Button>
  </div>
</ThemeProvider>;

Using react-helium

You can check out the documentation using storybook.

Install

For the commands, you can use either npm or yarn.

Clone this repository :

git clone https://github.com/alexdisdier/react-helium.git

cd react-helium

yarn

Running the components

You can use storybook.js for running and visualizing the components:

You will get directions about each components usage, how to import them and the required and optional props.

yarn start

and visit localhost:6007

Exporting Storybook

By exporting it as a static app, you can then serve your story on the network

yarn build-storybook
npx http-server .storybook-static

Testing

yarn test:unit

yarn test:coverage

Release process

React-helium uses semantic-release to publish the package on the NPM registry.

Commits need to respect the Angular Commit message format:

Type

Must be one of the following:

• feat: A new feature
• fix: A bug fix
• docs: Documentation only changes
• style: Changes that do not affect the meaning of the code (white-space, - formatting, missing semi-colons, etc)
• refactor: A code change that neither fixes a bug nor adds a feature
• perf: A code change that improves performance
• test: Adding missing or correcting existing tests
• chore: Changes to the build process or auxiliary tools and libraries such as documentation generation

Scope

The scope could be anything specifying place of the commit change. For example $location, $browser, $compile, $rootScope, ngHref, ngClick, ngView, etc...

You can use * when the change affects more than a single scope.

Subject

The subject contains succinct description of the change:

• use the imperative, present tense: "change" not "changed" nor "changes"
• don't capitalize first letter
• no dot (.) at the end

Breaking Changes

It should start with the word BREAKING CHANGE: with a space or two newlines. The rest of the commit message is then used for this.

A few examples of commit messages:

Commit message	Release type
fix(pencil): stop graphite breaking when too much pressure applied	Patch Release
feat(pencil): add 'graphiteWidth' option	Minor Feature Release
perf(pencil): remove graphiteWidth option	Major Breaking Release
BREAKING CHANGE: The graphiteWidth option has been removed. The default ...	Major Breaking Release

Contribution

I welcome any pull requests. I will soon draft a contributing document

License

react-helium is MIT licensed.

Acknowledgments

• Building Design Systems with Atomic Design
• Typescript-cheatsheets
• Semantic-release
• yalc