alexdisdier / react-helium

a react components library

Home Page:https://alexdisdier.github.io/react-helium/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

npm CircleCI codecov semantic-release License: MIT

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

About

a react components library

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

License:MIT License


Languages

Language:TypeScript 95.5%Language:JavaScript 2.9%Language:CSS 1.6%