hx-react-library

React

This project was bootstrapped with Create React App.

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm test ${componentName} single component

You can test a single file by passing it's name.

Es:

npm test button

Test coverage

Test coverage goal at Helixa is setted to: 85% A report of coverage can be found by running:

npm run test -- --coverage

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Bit

Bit is a collaborative open source project.

At Helixa we use Bit for sharing reusable react component in every Helixa Front end project.

The hx-collection can be found here: https://bitsrc.io/helixa/hx-components

The Bit workflow

Add component to bit

When a new component need to be added to the bit collection you need to:

The collection is organized following the ATOMIC Design System, you can read more about that here (http://atomicdesign.bradfrost.com/)

• add the component bit add src/components/atoms/Button -t 'src/components/atoms/Button/*.spec.js' --namespace atoms

• tag the component bit tag atoms/button The tag method can be used with version parameters:

  • --patch 0.0.1
  • --minor 0.1.0
  • --major 1.0.0

  The bit tag method runs builds and tests automatically.

• export components bit export helixa.hx-components

Linters and best practice

At Helixa we embrace the airbnb Javascript Styleguide: (https://github.com/airbnb/javascript) and we use the airbnb ES6 lint (https://www.npmjs.com/package/eslint-config-airbnb).

Css Style

The hx-component library and every project front end at Helixa uses Styled Components https://www.styled-components.com/

CircleCI

The reposistory is connected to to the continuous integration and delivery platform called CircleCI.

You can check the file on (.circleci/config.yml)

The pipeline is defined via workflows.

there two workflows defined: Test and Bit.

The Test job runs at every commit on every branch and is:

• checking out the repo
• npm install dependecies
• running tests
• updates coverage

If Tests are passed

The Bit job runs at every commit only on master branch and is:

• checking out the repo
• npm install dependecies
• installs bit cli
• authoring to Bit
• checking out all latest versions of every component
• tagging all components as patch
• exporting to the colleciton
• logs bit status