@getcircuit/components v0.1.0

Circuit's Components

Circuit's collection of reusable components.

Live Storybook

• Installation and usage
• Development
  • Main Workflow
  • Running Tests
  • Icons (and SVGs in general)
  • IDE tooling
• Contributing

Installation and usage

First things first, install it with yarn:

yarn add @getcircuit/components

Then, you're ready to import any exported component:

import { Button } from '@getcircuit/components'

export default () => {
  return (
    <div>
      <Button>Submit</Button>
    </div>
  )
}

Development

Main Workflow

Clone the repository and install its dependencies.

git clone https://github.com/getcircuit/component-library
cd component-library
yarn

Do not use npm to install the dependencies, as the specific package versions in yarn.lock are used to build and test the library.

To have an isolated environment to develop components, we use Storybook:

yarn run storybook:dev

This will bootstrap a local storybook and open it in your browser.

To build the the library package:

yarn run build

To publish the library to npm (it will automatically run the build and test steps):

yarn publish

Running Tests

yarn test

Using locally

To use the package locally, first create a link to it:

$ yarn link
# success Registered "@getcircuit/components".
# info You can now run `yarn link "@getcircuit/components"` in the projects where you want to use this package and it will be used instead.

If you want the link to be updated whenever a file changes, you can run the yarn dev command to automatically build the library and its types.

Then, go to the project that will use the local version of the package:

$ yarn link @getcircuit/components
# success Using linked package for "@getcircuit/components".

Icons (and SVGs in general)

We use a tool called SVGR for transforming SVG into ready-to-use components. This means that any .svg import can be used directly as a React component:

import BackIcon from './components/Icons/back.svg'

<BackIcon tw="w-4 h-4 text-red-500">

IDE tooling

If your IDE of preference is VS Code, there's a recommended set of extensions and their configurations attached to this project. To install them, just go to your extensions panel and filter them by Recommended.

Contributing

This repository follows the Conventional Commit standard. A new version of the library is automatically released for any relevant PR merged into the main branch.

We highly encourage the usage of git-cz to write your commit messages. git-cz automatically adds a git alias to git, so commits can be written with:

$ git cz
? Select the type of change that you're committing: (Use arrow keys or type to search)
❯ 💍  test:       Adding missing tests
  🎸  feat:       A new feature
  🐛  fix:        A bug fix
  🤖  chore:      Build process or auxiliary tool changes
  ✏️  docs:       Documentation only changes
  💡  refactor:   A code change that neither fixes a bug or adds a feature
  💄  style:      Markup, white-space, formatting, missing semi-colons...
(Move up and down to reveal more choices)