@totango-app-team/totango-ui

Totango UI Library

//TODO: Migrate to this in the future: https://github.com/web-infra-dev/rslib

This project is a React component library built with TypeScript, Vite, and Material-UI. It provides a set of reusable UI components and utilities for building Totango applications.

Features

• React components built with Material-UI
• TypeScript support
• Vite for fast development and building
• Storybook for component documentation and testing
• Modular exports for flexible usage

Getting Started

Running Storybook

To start Storybook and view the component documentation:

1. Make sure you have all dependencies installed:

   npm install
   

2. Run the following command:

   npm run storybook
   

3. Open your browser and navigate to http://localhost:6006 to view the Storybook interface.

Local Development with other Repos:

1. Run the following command to start vite in watch mode:

   npm run build:watch
   

2. Create a link to the library in the other repo:

   npm link
   

3. Run the following command in the other repo to link to the library:

   npm link @totango-app-team/totango-ui
   

Using the UI Library

To use the UI library in your project, follow these steps:

1. Install the library:

   npm install @totango-app-team/totango-ui
   

2. Import the theme first thing in your entry file (before your app root):

   import { ThemeProvider } from '@totango-app-team/totango-ui/themes';
   

3. You can then import and use the components in your project from the corresponding folder it's exported from:

   import { Button } from '@totango-app-team/totango-ui/ui';
   

4. If you want to use the core components from MUI that haven't been modified (like ThemeProvider, GlobalStyles, etc.), you can import them from the @totango-ui/core folder:

   import { ThemeProvider } from '@totango-app-team/totango-ui/core';