Project Setup

1. 1. Introduction

The CBP Design System repo is set up as a monorepo that uses the "[workspaces](https://docs.npmjs.com/cli/v8/using-npm/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:

Run `npm run stencil-sb` to start the Storybook instance for the `web-components` workspace.

1. 1. Commands

$ cd design-system
$ npm install

$ npm run build-tokens     # builds CSS and SCSS files from the JSON design tokens
$ npm run stencil-sb       # builds the web components and runs storybook for the web components package
$ npm run react-build      # builds the react-components package
$ npm run build-all        # builds web components and React components packages

1. 1. Workspaces

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

1. 1. 1. Example

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