Bambus UI Components

Description

Bambus library of UI components used across the frontend projects.

Technical Details

This is a component library that uses React, TypeScript, Styled-Components, Storybook and Rollup.

Package Manager

yarn is used as a package manager. Please use only yarn commands, ex. yarn to install all dependencies.

Local Development

First of all, make sure that all dependencies are installed (by running yarn).

Run Storybook:

yarn storybook

Open http://localhost:6006 in your browser to see the result.

You can start testing the components by creating Storybook stories. Refer to any .stories.tsx file for an example.

Hosting

The library is hosted on npmjs. The npmjs account's details are on the Bambus 1Password account, under 2021 Core Product -> Bambus UI Components Access - npmjs.

Building And Publishing A New Version Of The Library

As this is a library used by other applications, it is essential that the semantic version from package.json (version field) is incremented before publishing a new version (npmjs would reject it anyways).

The theory behind semantic versioning can be read about here.

In essence:

• Increment the MAJOR version when you make incompatible API changes,
• Increment the MINOR version when you add functionality in a backwards compatible manner, and
• Increment the PATCH version when you make backwards compatible bug fixes.

After incrementing the number (either major, minor or patch), build the project by running yarn build.

This will run rollup, transpiling and bundling the files, resulting in a dist folder with the output. This will be consumed by other applications that will use this component library.

Now you're ready to publish the new version of the library to npmjs. You need to run npm publish to push it to npmjs.

Encountering an error?

The most common error may be related to not being authenticated to npmjs in the environment of the CLI.

To fix this, you need a .npmrc file in your local directory of this project.

Take the auth token from npmjs (log in first in the UI using the 1Password account) and add it to .npmrc as described here.

Replace ${NPM_TOKEN} with the actual token you create in the npmjs UI.

IMPORTANT: do not commit/ push this file to GitHub as it contains your personal access token.

Using The Component Library In Other Projects

You may install this component library in other frontend projects easily, as described on the project's npmjs page: https://www.npmjs.com/package/bambus-ui-components.