Description
The library Components is based on React and styled-components. It contains basic components, "atoms", and more complex "molecules" that are used on the Blockchain.com ecosystem.
Tooling
Both yarn
and npm
are supported.
The commands are given using npm
however you can use the yarn
equivalent and it will Just Work™
Installation
Just a quick npm i @blockchain-com/components
and you are good to go!
Development
Link
If you want to change the library and reflect your changes on your consumer app without having to push to the repo and release, just:
git clone git@github.com:blockchain/components.git
cd path-to/components
npm link
cd path-to/my-app
npm link @blockchain-com/components
You can also use the task npm run build:watch
on components
to automatically recompile the library and trigger a refresh on your app :fire:.
:zap: you need to run npm link @blockchain-com/components
everytime you run npm i
or yarn
...
Storybook
- Ensure Node version >= 8.0 is installed
- Install packages:
npm i
- Start application in dev mode:
npm run start
- The library will now be accessible at localhost:6006
Tips
Icons usage
1. FontAwesome icons (free version)
Use <Fas... />
-
Fas
is the type ("Fab", "Far" and "Fas" are avaible)
Fab
matches the brand iconsetFas
matches the solid iconsetFar
matches the regular iconset
-
...
is the FontAwesome icon name formatted as PascalCase.
The full icon list is available here
Examples:
<FasCheckCircle />
<FarCheckCircle />
<FabFacebook />
2. Custom icons
Use <Bc... />
Examples:
<BcBitcoin />
<BcEthereum />
Architecture
This library follows the Atomic Design principles.
An additional attention has be taken to ensure that all components are available and fully functional accross major web browsers*, as well as responsive on any screen sizes.
Browsers with > 1% usage:
- IE 11
- Safari 11+
- Chrome / Edge / Firefox latest 2 major versions
Code Quality
1. Linting
The coding style rules are defined by Prettier and enforced by Eslint
The good practices™
that we follow are defined by the Javascript Standard Style
Following commands are available:
npm run lint:js
npm run lint:css
2. Unit Tests
Testing is done using Jest and Enzyme.
Following commands is available:
3. Git Hooks
We use Husky to automatically deploy git hooks
On every git commit
and git push
we run the unit tests and the linting tasks.
The commit messages are also validated and must follow the Conventional Commits spec.