ribbit-react

A react component library for ribbit design system built by Leap Wallet.

It's built on top of Shadcn UI.

Installation

To install the package, run the following command:

npm install @leapwallet/ribbit-react

Usage

To use the components in your project, import the components from the package:

import { Button } from '@leapwallet/ribbit-react';
import '@leapwallet/ribbit-react/styles.css';

function App() {
  return (
    <div className="leap-ui">
      <Button>Click Me</Button>
    </div>
  );
}

Full Documentation

You can view the documentation online, hosted on Chromatic.

It includes all the components, theming, and design system guidelines.

If you want to view the documentation locally, you can run the storybook server by following the instructions below.

Development

Project Setup

1. Clone the repository

git clone [email protected]:leapwallet/ribbit-react.git

2. Install dependencies using pnpm

pnpm install

If you don't have pnpm installed, you can install it using npm by running npm install -g pnpm

Development Server

The project is setup using storybook for development. To start the development server, run the following command:

pnpm storybook

This will start the storybook server on http://localhost:6006/.

If you want to test out components outside of storybook, we also have a vite dev server setup. To start the vite dev server, run the following command:

pnpm dev

This will start the vite dev server on http://localhost:5173/.

Contributing

If you want to contribute to the project, please create a new branch with the following naming convention:

git checkout -b your-name/change-name

Making Changes

The library code lives in the lib directory. Here's the project structure:

.
├── lib
│   ├── components
│   ├── hooks
│   ├── utils.ts
│   ├── index.ts

1. Any new components should be added to the components directory.
2. Any new hooks should be added to the hooks directory.
3. Any utility functions should be added to the utils.ts file.
4. The index.ts file should export all the components, hooks, and utility functions that need to be exposed.

Adding New Components

Go to the Shadcn UI documentation and see if the component you want to add is already available there.

For example, if you want to add the context-menu component to this library, you can run the following command:

pnpm dlx shadcn-ui@latest add context-menu

If it's not available, you can add the component to this library. Make sure to follow the naming convention and add the component to the components directory.

Testing

Use Storybook dev server to Vite dev server to test the components locally. Make sure to test the components in different scenarios and screen sizes.

Making Pull Requests

Once you have made your changes, push the branch to the repository and create a draft pull request on the staging branch.

git push origin your-name/change-name

Once the pull request is ready for review, mark it as ready for review and a maintainer will review the changes.

Review Steps

1. Design Review + Testing from the design team
2. Code Review + API Review + Testing from the maintainer

Once approved, the changes will be merged into the staging branch and will be released in the next release cycle from the main branch.

Making Releases

When a release is to be made, the following steps should be followed:

1. Create a new release branch from the staging branch

git checkout -b release/vX.Y.Z

2. Create a Pull Request from the release branch to the main branch

3. Once the PR is approved, merge the PR into the main branch

4. Create a new release with tag vX.Y.Z on GitHub and add Release Notes and Changelog.

Once the PR is merged into the main branch, the documentation and storybook will be updated via the chromatic GH action.

When the GitHub release is created, the package will be published to npm and GH package registry via the publish GH action.