Project Setup

Introduction

The CBP Design System repo is set up as a monorepo that uses the "workspaces" feature from npm for managing multiple packages from a singular top-level, root project.

After running npm install from the root-level project directory, you must build the compiled CSS and bundled JS files in order for Storybook to use these files for showcasing our patterns.

Running npm run vanilla-build will create the /vanilla/dist folder that contains the bundled CSS/SCSS and JS files for the Vanilla package, this is the core of our styles for our design system.

The react-components package uses the compiled css file for its own styling from the vanilla workspace. So the npm run vanilla-build command must be run prior to building or running the development server for Storybook in the react-components package

After building the files, you can run:

1. Run npm run vanilla-sb to start the Storybook instance for the vanilla workspace.
2. Run npm run react-sb to start the Storybook instance for the react-components workspace.

Commands

$ cd design-system
$ npm install

$ npm run vanilla-build    # runs vite build to build out css and js in vanilla package
$ npm run vanilla-sb       # runs storybook for the vanilla package

$ npm run react-sb       # runs storybook for the react-components package
$ npm run react-build    # runs vite build to build out css and js in react-components package

Workspaces

Use the --workspace or -w flag if you are running commands from /root directory for individual packages/projects`

Example

$ npm install --save lodash -w packages/vanilla # adds the lodash npm dependency to the vanilla project.