BR UI Library

Welcome to the BR UI Library! This repository uses Vite's library mode to create tree-shakable components. The components are built using Shadcn and Tailwind CSS, and we have a Storybook website to showcase them.

Getting Started

This section will guide you on how to set up and work with the BR UI Library repository using pnpm.

Available Commands

• pnpm dev: Start a simple introductory home page for the UI library locally.
• pnpm build: Build the components and create a distribution folder.
• pnpm storybook: Run the Storybook website locally.
• pnpm lint: Lint the repository according to the configured ESLint rules.
• pnpm storybook-build: Build the Storybook website and create a static folder for deployment if needed.

Creating New Components

We use Shadcn as the base for our components. Please refer to their documentation for more information on how to leverage this library.

Folder Structure

Ensure your components follow this structure:

src/components/ComponentFolder/Component.tsx

Always create an index.ts file to export the component at the same directory level:

src/components/button/button.tsx
src/components/button/index.ts

Exposing Components

We use a multiple entry approach to export components. Use the following import syntax:

import { Button } from '@br/ui_library/button';

To make this work, add an export entry in package.json:

"exports": {
  "./button": {
    "import": "./dist/button.js",
    "require": "./dist/button.cjs",
    "types": "./dist/button.d.ts"
  }
}

Creating Storybook Stories

Within the src directory, there is a stories folder for all Storybook stories. Follow an existing example or refer to the Storybook documentation for guidance.

Versioning the Package with @changeset/cli

We use @changeset/cli in our Bitbucket CI/CD for versioning.

Workflow

1. Create a branch for your changes.
2. Implement the required changes.
3. IMPORTANT: Run pnpm changeset to add a changeset file indicating your intent to release. If you are not releasing package changes (e.g., just adding a new Storybook story), run pnpm changeset-empty.
4. Merge the latest main into your branch and create a PR for review.
5. When the PR is merged into main, CI/CD will detect the changeset files, bump the package version, and create a proper changelog. A new "bump PR" will be generated with these changes for your review and merge.
6. Once the "bump PR" is merged, CI/CD will publish the package to the npm registry.

Creating intermediary package versions for testing purposes

During development, you may want to publish test versions of the package, to be able to import it in any consumer app.

You have 2 options:

1. Create a version test and publish it to npm, eg.: if the current version of the package is 0.1.0, you can manually publish a 0.1.0-test.1 and use it temporary until the final version using semver is released using changesets.
2. Use npm link to make the local package available in your system. More on Npm link here

Conclusion

Thank you for contributing to the BR UI Library. Your efforts help improve the quality and usability of our component library. If you have any questions or need further assistance, please refer to our documentation or contact the maintainers.