Create React Library

This project was bootstrapped with Create React Library.

npm start

runs rollup with watch flag

npm test

Launches the test runner.

npm test:unit ${componentName} single component

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

Es:

npm test:unit button

Test coverage

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

npm run test:unit -- --coverage

npm run build

Builds the library for production to the dist folder.

It will produce a list of files:

• index.js
• index.js.map
• index.modern.js
• index.modern.js.map

Storybook

Storybook is a development environment for UI components. (https://storybook.js.org/)

Run locally

npm run storybook

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/

Add a component

There is a command-line script

Es: ./make_component.sh atoms Button

This will create a folder with the given name (second argument) of the Component (Button in the example above) inside the first argument (atoms) and these files:

• index.js
• Button.js
• StyledButton.js
• Button.spec.js

And

• Button.stories.js in the proper stories folder

The generation bash file is /make_component.sh

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, npm_publish, deploy-storybook.

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

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

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

• checking out the repo
• npm install dependecies
• running tests
• building storybook
• Deploying static storybook to http://components.helixa.ai

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

• checking out the repo
• npm install dependecies
• running tests
• running semantic-release, pls check the docs (https://github.com/semantic-release/semantic-release)

Release a new Feature

There are few very important steps in order to release a new feature.

Let's say thata for example we want to add a new component called HxComponent

Steps:

• Create a new feature branch
• Use the make_component script (Es: ./make_component.sh atoms HxComponent)
• Implement the new component
• Add unit tests
• Add stories
• Git add .
• npm run cz
• Follow the semantic release step by step guide (In this scenario we would select the Feature option)
• Git push

After the PR is merged to master semantic-release will manage to release a new version.

Testing the components locally

Before publishing a new version of the library, we might need to test it locally.

There is an example folder that is a simple cra app.

Components that need to be tested can be simply imported there like so:

import { Tooltip } from 'hx-react-components';

In order to test the latest version of library, rember to run a build locally.

Run the build command in the root folder.