@bitrise/bitkit

Bitrise React component library

Usage no npm install needed!

<script type="module">
  import bitriseBitkit from 'https://cdn.skypack.dev/@bitrise/bitkit';
</script>

README

@bitrise/bitkit

Library for React UI components and design patterns.

Setup

git clone git@github.com:bitrise-io/bitkit.git
cd bitkit
yarn install

Technology

Managing icons

If you would like to add a new or edit an existing icon:

  1. Export the icon from Figma as an SVG. Make sure that the exported file has the following viewBox: 0 0 24 24, otherwise the icon can make smaller or bigger compared to the existing ones.
  2. Rename the file using this convention: icons-{iconName}.svg (eg.: icons-crown.svg)
  3. Add the file under the ./src/components/Icon/svg folder.
  4. If you are not running yarn start, run the yarn build:icons script to generate the React component from the SVG. You should commit both the .svg and the generated .tsx files.
  5. Make sure to check the new/update icon on the Icons page.

Scripts

$ yarn build

Builds the library and styleguide assets

$ yarn build:icons

Uses @svgr/cli to generate React components and Typescript definitions inside ./src/components/Icon/tsx from the SVG files inside ./src/components/Icon/svg.

$ yarn clean

Cleans up the build directories

$ yarn lint

Runs Javascript and CSS linting

$ yarn serve

Serves up the static files built for the style guide

$ yarn start

Runs the developlement server for the style guide

$ yarn test

Runs the unit tests for the library components