Our web components can be consumed from any frontend project. They are extremely lightweight and built for speed.

Components are published as separate packages and they need to be installed individually. Some components depend on others so their dependencies will need to be installed.

Component packages are prefixed with @no-gravity-elements/, for example:

yarn @no-gravity-elements/button

TODO

No Gravity Elements provides adapters for Angular and React frameworks.

Angular adapter

React adapter

• Typography
• Card
• Button
• Link

No Gravity Elements is a monorepo where each component is a separate package. We use Preact to write our components and then we convert them into web components.

We use yarn as package manager. Just run

yarn

Branches must be prefixed with the code NGE-XXX_ where the Xs are the issue code.

We use storybook for development. Run it with

yarn storybook

Pushing a branch will deploy a storybook build of the branch on the url https://<branch-code>--65edfeddcbe58bb4d259538f.chromatic.com/

You can find the generated url in the github pipeline summary and in any open PRs for the branch.

We use jest with enzyme for unit testing and cypress for integration testing. Storybook needs to be running for integration tests to run.

We have a tool that will generate all the boilerplate for a component.

yarn component-generator --name Button --type atoms

Component return statement must be wrapped in a Preact <Fragment>.

CICD will run tests and deploy storybook on all pushes. When merging into master it will also publish modified components.

Upon opening a PR, another workflow will add the branch storybook link to the description

The node version is fixed in this repo, if you are experiencing issues you need to run nvm use. If you do not have the correct node version installed, you will need to run nvm install before that.

We use husky to run a precommit hook that checks typings, lints and formats code. It is installed after running yarn.

We leverage Lerna to handle automatic versioning and changelog generation. Upon merging a feature branch into main, Lerna will automatically bump the packages and update the changelogs, and then publish the modified packages.

It is configured to work with Conventional Commits. Following this specification tells Lerna which semver version it should bump and what it should write in the changelogs.