Our design repository contains:

  • Design system styles, components and patterns
  • Solar website codebase
  • Component and additional documentation.
  • Tools, such as visual regression

Set up local development

Clone the github repository.

This repository is split into multiple yarn workspaces:

  • @bulb/design - component library for the design system.
  • e2e - end to end tests for the various components in this repo, mainly vr-tests for the component library.
  • website - documentation website for the design system.

To install dependencies, just run yarn install in any workspace folder (preferably the repo root).

You would develop new components by running the website, which contains the documentation for all styles, components, and patterns. To run the documentation website locally run the following command.

yarn workspace website start

This will run it in a hot mode and will update any browser windows (on modern browsers) with any changes you make locally.

Consuming the design library

To use the patterns in your project, first, add the @bulb/design package.

yarn add @bulb/design

You can then simply import the components you wish to use, for example:

import { Dropdown } from '@bulb/design/modules/Dropdown';
<Dropdown {...props} />;