npm package: @leapwallet/ribbit-react
Description: Design system for Leap Wallet
Latest version: 0.0.2

# ribbit-react

A react component library for ribbit design system built by [Leap Wallet](https://leapwallet.io/).

It's built on top of [Shadcn UI](https://ui.shadcn.com/).

## Installation

To install the package, run the following command:

```bash
npm install @leapwallet/ribbit-react
```

## Usage

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

```jsx
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](https://dub.sh/ribbit-react), 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).

## Development

### Project Setup

1. Clone the repository

```bash
git clone git@github.com:leapwallet/ribbit-react.git
```

2. Install dependencies using `pnpm`

```bash
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:

```bash
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:

```bash
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:

```bash
git checkout -b your-name/change-name
```

### Making Changes

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

```bash
.
├── 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](https://ui.shadcn.com/docs/components/accordion) and see if the component you want to add is already available there.

For example, if you want to add the [`context-menu`](https://ui.shadcn.com/docs/components/context-menu) component to this library, you can run the following command:

```bash
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.

```bash
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

```bash
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](.github/workflows/chromatic.yml) GH action.

When the GitHub release is created, the package will be published to npm and GH package registry via the [publish](.github/workflows/publish.yml) GH action.