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

After running npm install from the root-level you can 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 and behavior for our patterns.

After building the files, run npm run vanilla-sb to start the Storybook instance for the Vanilla package, which will showcase the patterns in the CBP Design System.

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

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

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