BAS Design System: React

This package contains React components that use the BAS Design System.

Quick Start

# Copy and fill the .npmrc file
# Be sure to replace the placeholders in this file with the right tokens
cp .npmrc.example .npmrc

# Install the dependencies
npm i

# Link the bas-design-system project and build it
cd ../bas-design-system
npm link
npm run build

# In the current project
cd ../bas-design-system-react
npm link @bas-world/design-system

# Start Storybook
npm start

# Start the development server with the internal theme
npm run start:internal # served on port 6006

# Start the development server with the external theme
npm run start:external # served on port 6007

# Format and lint the code
npm run format

Usage

npm i @bas-world/design-system-react

For the component documentation, please refer to the Storybook docs.

Updating the CSS Package

To update the CSS (@bas-world/design-system) package, you have to make sure to bump the version of both the dependency and the peer dependency in the package.json. This peer dependency is required to ensure consumers of this package also use the correct version of the CSS package.

Development with BAS Design System CSS

To develop with the latest changes from the design system CSS, that package should be linked. To do so, run npm link in the bas-design-system (CSS) project. Then, run npm link @bas-world/design-system in the bas-design-system-react (current) project.

The first time, and whenever you make changes to the CSS, you should run npm run build in the CSS project.

Important notes

bas-design-system-react uses different FontAwesome Pro packages. When using font icons from FontAwesome Pro package, please make sure to import them properly, with enabled tree shaking.

To do:

import { faEye } from '@fortawesome/pro-solid-svg-icons/faEye';

NOT to do:

import { faEye } from '@fortawesome/pro-solid-svg-icons';

If not imported correctly, bundle size will increase by 1-2 Mb because of lack of tree shaking

Versioning strategy

Please see here for the versioning strategy of this project.