npm package: @gardenfi/garden-book
Description: Garden Book is a UI component library designed specifically for [garden.finance](https://garden.finance). Built with React, Vite TailwindCSS and [Storybook](https://garden-book.onrender.com) for testing components, this library uses molecular design princ
Latest version: 0.2.30

# Garden Book

Garden Book is a UI component library designed specifically for [garden.finance](https://garden.finance). Built with React, Vite TailwindCSS and [Storybook](https://garden-book.onrender.com) for testing components, this library uses molecular design principles for components.

## Why Garden Book?

Maintaining consistency and quality, Garden Book aims to offer a unified collection of pre-designed and customizable UI components. Our goal is to:

- **Enhance Productivity**: By providing ready-to-use components, developers can focus on building functionality rather than designing UI elements from scratch.
- **Ensure Consistency**: A shared library promotes a consistent look and feel across all projects within an organization.

## Folder Structure

```
garden-book/
├── dist/                    # Compiled files for distribution
├── src/                     # Source files
│   ├── components/          # Component files
│   │   ├── atoms/           # Atomic components (e.g., buttons, inputs)
│   │   ├── molecules/       # Composite components (e.g., form groups)
│   │   ├── organisms/       # Complex components (e.g., headers, footers)
│   ├── fonts/               # Font files
│   ├── index.ts             # Exporting all components
│   ├── tailwind-entry.css   # Tailwind css and font faces
│   ├── utils/               # Utility functions
├── .gitignore               # Git ignore file
├── .yarnrc.yml              # yarn registry configuration
├── index.ts                 # Entry point for library
├── package.json             # NPM package configuration
├── README.md                # Project documentation
├── tailwind.config.js       # TailwindCSS configuration
├── tsconfig.json            # TypeScript configuration
├── vite.config.ts           # Vite configuration
└── yarn.lock                # Yarn lock file for dependencies
```

## Installation Guide

To install and use Garden Book in your project:

1. **Install the library**:

   ```sh
   yarn add @gardenfi/garden-book

   or

   npm i @gardenfi/garden-book
   ```

2. **Use the Library in Your Project**:
   Import the desired components in your project files:

   ```tsx
   import { Button } from "@gardenfi/garden-book";
   import "@gardenfi/gardenbook/styles.css";

   <Button variant="primary" size="md">
     Connect Wallet
   </Button>;
   ```

### Development Setup

To set up a local development environment:

1. **Install Dependencies**:

   ```sh
   yarn
   ```

2. **Run Storybook**: This will open a Storybook environment in your browser to test all components

   ```sh
   yarn storybook
   ```

3. **Build the Library**: For production
   ```sh
   yarn build
   ```

## Contribution

We welcome contributions to Garden Book! If you would like to contribute, please follow these guidelines:

1. **Fork the Repository**
2. **Create a Branch**
3. **Commit Your Changes**
4. **Push to the Branch**
5. **Create a Pull Request**

### License

Garden Book is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.