Garden Book

Garden Book is a UI component library designed specifically for garden.finance. Built with React, Vite TailwindCSS and Storybook 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:

   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:

   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:

   yarn

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

   yarn storybook

3. Build the Library: For production

   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 file for more details.