traboda / chaya

Modern, Functional Design System & Component Library for React

Chaya UI

Chaya UI is a modern, functional design system & component library for React.

Chaya features a collection of reusable components, and other frontend utility functions for React, that are used to design a consistent, modern and accessible frontend for Traboda platforms. Chaya makes it seamless to build a consistent and accessible frontend for your platforms made with React.

• 40+ UI components, 4+ hooks, and even more to come
• Built with TypeScript, fully typed
• Styled with Tailwind CSS (v3)
• Supports Dark Mode & Custom Theming

Looking to Explore?

Checkout examples from our Storybook: chaya.traboda.com

Installing Chaya

1. Install the package by running -

npm install chaya-ui

or with yarn, as

yarn add chaya-ui

Setting Up & Usage

To start using the components, please follow the below steps:

1. Wrap your Application in a DSRContextProvider provided by chaya-ui

   import { ReactNode } from "react";
   
   // external libraries for example usecase
   import Link from 'next/link';
   import { Search, X } from 'react-feather';
   
   import { DSRContextProvider } from 'chaya-ui';
   
   const AppView = ({ children }: { children: ReactNode }) => (
     <DSRContextProvider
       linkWrapper={(link: string, component: ReactElement) => <Link href={link}>{component}</Link>}
       theme={{
         primary: '#019e4b',
         secondary: '#019e4b',
         background: '#fff',
         color: '#333'
       }}
       iconWrapper={(icon, props) => ({
         search: <Search {...props} />,
         times: <X {...props} />,
         // ...
       })[icon] ?? <>n/a</>}
     >
       {children}
     </DSRContextProvider>
   );

   • linkWrapper lets you wrap links with a custom component, for example, next/link or react-router-dom/Link so that the links are handled by the router of your choice.
   • theme lets you define the primary, secondary, background and color colors for the theme. These colors are used to generate the CSS variables for the theme.
   • iconWrapper lets you wrap icons with a custom component, for example, react-feather or react-icons so that the icons are rendered by the icon library of your choice.

2. Update your tailwind.config.js to process styles for components from chaya-ui

   const theme = require('chaya-ui/tailwind-theme');
   
   /** @type {import('tailwindcss').Config} */
   module.exports = {
    content: [
        'node_modules/chaya-ui/**/*.js',
        // ...
    ],
    // ...
    theme: {
        extend: theme,
    },
    // ...
   };

3. Import the components from chaya-ui and use them in your application.

   import { Button } from 'chaya-ui';
   
   const App = () => (
     <Button 
       onClick={() => console.log('I was clicked')} 
       variant="outline" 
       color="danger"
     >
         Click Me
     </Button>
   );

Development Guide

We use npm as the package manager

npm run dev

This will start the storybook and loads the stories from ./stories at localhost:6006.

The package can be build using the command:

npm run build

Type checks and linting commands are also available in the package

npm run lint
npm run type-check

Credits

• Icons used in the package are from Remix Icons.

Contributions

Contributions are welcome. Please open an issue or a PR.

Licensing

This project is licensed under the GNU General Public License V3.

Made by Traboda with ❤️ in India 🇮🇳.