@getcircuit/components

Circuit's Components

Circuit's collection of reusable components.

Live Storybook

• Installation and usage
• Development
  • Main Workflow
  • Components with external CSS
  • How to add a new icon
  • Running Tests
  • Using locally
  • 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/web-packages
cd web-packages
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:

cd packages/components
yarn run storybook:dev

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

To build the the library package:

cd packages/components
yarn run build

Components with external CSS

Some components may have an external CSS file. The file must be manually imported by the consumer of the library, your app for example. This is because your app build setup has no way to know what it should do with a CSS import.

• VideoPlayer: import from '@getcircuit/components/dist/css/VideoPlayer.css'

How to add a new icon

This is how to add a new icon component to the existing ones located inside src/components/icons (further referred to as icons/ for brevity)

• Use this Figma file: https://www.figma.com/file/SaBI4s1jJBoOWgZ25mNEqP/Cardboard%3A-Icons?node-id=2%3A3

• Make sure to copy the SVG from the 24x24 icon selection. See: https://share.cleanshot.com/go2IRW

• Change all fill properties to currentColor

• Add the new icon component to the icons/Icons.story.tsx

• Add it to the exports of icons/index.ts

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".

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)