cr-fe-ui-components

Welcome to cr-fe-ui-components! This is the official reusable UI component library for ChartRequest's frontend applications. It provides a collection of consistent, tested, and theme-friendly React components designed to streamline development and unify our user experience.

Goals

Our primary goals for this library are to promote efficiency and consistency across all our projects.

• Reusable Components: Build components once and use them everywhere across all ChartRequest projects.
• Design Consistency: Maintain a shared design system with unified styling, behavior, and UX patterns.
• Isolated Development: A dedicated playground to quickly build, test, and iterate on components in isolation.

Project Structure

The repository is organized into two main directories: the library source code and the development playground.

cr-fe-ui-components/
│
├── src/                # Source code for the UI library
│   ├── components/     # Individual React components
│   │   ├── Button/
│   │   │   ├── Button.tsx
│   │   │   ├── Button.test.tsx
│   │   │   └── Button.css
│   │   │── assets     # Assets for reusable components 
│   │   │
│   │   └── ...
│   ├── index.ts       # Main entry point exporting all components
│   └── utility/       # Helper functions for all components
├── playground/        # A standalone app for testing and demoing components
│   ├── App.tsx        # Example usage of library components
│   └── ...
│
├── package.json
└── README.md

src/: Contains all the component code that gets published.

playground/: A Vite/CRA environment for visually testing and verifying components before they are published.

Available Scripts

Main Folder:

1. npm install - install the dependency only

Run the Playground: This command starts the development server for the playground/ app, allowing you to see your components in action.

1. npm install - install dependencies
2. npm run dev - start the app

How to use library?:

1. Use global.css config and tailwind.config.js
2. config file setup: https://drive.google.com/file/d/1k8NoLdUX6xoE3qreR_B61A7To8Jnilya/view?usp=drive_link

Tech Stack

React 18+ TypeScript Tailwind

Contributing

1. Add new components in src/components/.

2. Use the playground to develop and preview your component.

3. Write tests to ensure consistency.

4. Update the documentation accordingly.

5. Documentation

   a. Devplan - https://docs.google.com/document/d/1_cqbxp1bRtyzRW8GsrXXNRjsXAeMykgVPul1uSsuMgY/edit?tab=t.0

   b. Component Usage - soon...