tui-lib22

TUI-Lib2

A modern, tree-shakeable React UI component library built on top of Material-UI, featuring enhanced components with additional functionality and TypeScript support.

🚀 Features

• ✅ Tree-shakeable - Import only what you need
• ✅ TypeScript - Full TypeScript support with comprehensive type definitions
• ✅ Material-UI Based - Built on the solid foundation of Material-UI
• ✅ Enhanced Components - Extended functionality (loading states, better composition)
• ✅ Storybook Documentation - Comprehensive component documentation
• ✅ Modern Build - ESM and CJS builds with source maps
• ✅ Peer Dependencies - Optimized bundle size

📦 Installation

npm install tui-lib2

Peer Dependencies

Make sure you have these peer dependencies installed:

npm install react react-dom @mui/material @emotion/react @emotion/styled

🎯 Quick Start

import React from "react";
import { Button, ThemeProvider, lightTheme } from "tui-lib2";

function App() {
  return (
    <ThemeProvider theme={lightTheme}>
      <Button variant="contained" color="primary">
        Hello World
      </Button>
    </ThemeProvider>
  );
}

🧩 Components

Button

Enhanced button component with loading states and improved composition.

import { Button } from 'tui-lib2';

// Basic usage
<Button variant="contained" color="primary">
  Click me
</Button>

// With loading state
<Button
  variant="contained"
  loading={true}
  loadingPosition="start"
  startIcon={<SaveIcon />}
>
  Save
</Button>

// With icons
<Button
  variant="outlined"
  startIcon={<AddIcon />}
  endIcon={<SendIcon />}
>
  Add & Send
</Button>

Button Props

Prop	Type	Default	Description
variant	'text' | 'outlined' | 'contained'	'text'	The variant to use
color	'inherit' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning'	'primary'	The color of the component
size	'small' | 'medium' | 'large'	'medium'	The size of the component
loading	boolean	false	If true, shows loading indicator
loadingPosition	'start' | 'center' | 'end'	'center'	Position of loading indicator
disabled	boolean	false	If true, the component is disabled

ThemeProvider

Enhanced theme provider with pre-built themes and custom theme support.

import {
  ThemeProvider,
  lightTheme,
  darkTheme,
  createTheme
} from "tui-lib2";

// With pre-built light theme
<ThemeProvider theme={lightTheme}>
  <App />
</ThemeProvider>

// With pre-built dark theme
<ThemeProvider theme={darkTheme}>
  <App />
</ThemeProvider>

// With custom theme
const customTheme = createTheme({
  palette: {
    primary: {
      main: "#6366f1",
    },
  },
});

<ThemeProvider theme={customTheme}>
  <App />
</ThemeProvider>

Pre-built Themes

The library comes with carefully crafted light and dark themes:

• lightTheme: Clean, modern light theme with custom color palette
• darkTheme: Elegant dark theme optimized for low-light environments
• Custom Colors: Both themes include subtle and subtleWhite colors

// Using custom colors
<Button variant="contained" color="subtle">
  Subtle Button
</Button>
<Button variant="outlined" color="subtleWhite">
  Subtle White Button
</Button>

🌳 Tree Shaking

This library is optimized for tree shaking. You can import components individually:

// ✅ Good - Tree shakeable
import { Button } from "tui-lib2";

// ✅ Also good - Individual import
import Button from "tui-lib2/dist/components/Button";

// ❌ Avoid - Imports everything
import * as TUI from "tui-lib2";

📖 TypeScript Support

Full TypeScript support with exported types:

import { ButtonProps, ThemeProviderProps } from "tui-lib2";

// Component with typed props
const MyButton: React.FC<ButtonProps> = (props) => {
  return <Button {...props} />;
};

Available Types

import type {
  // Component Props
  ButtonProps,
  ThemeProviderProps,

  // Shared Types
  BaseComponentProps,
  ComponentSize,
  ComponentColor,
  ComponentVariant,
  LoadingPosition,

  // Material-UI Re-exports
  Theme,
  SxProps,
} from "tui-lib2";

🎨 Customization

Custom Themes

import { ThemeProvider, createTheme } from "@mui/material/styles";

const theme = createTheme({
  palette: {
    primary: {
      main: "#6366f1",
    },
    secondary: {
      main: "#ec4899",
    },
  },
  shape: {
    borderRadius: 12,
  },
});

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>;

Custom Styling

Use the sx prop for custom styling:

<Button
  variant="contained"
  sx={{
    borderRadius: "20px",
    textTransform: "none",
    fontWeight: "bold",
  }}
>
  Custom Styled Button
</Button>

📚 Storybook Documentation

Comprehensive component documentation is available via Storybook:

npm run storybook

Visit http://localhost:6006 to view the interactive documentation.

🔧 Development

Building the Library

npm run build

This creates both ESM and CJS builds in the dist folder.

Development Mode

npm run build:watch

Storybook Development

npm run storybook

📋 Bundle Analysis

Analyze bundle size:

npm run analyze

🤝 Contributing

• Fork the repository
• Create your feature branch (git checkout -b feature/amazing-feature)
• Commit your changes (git commit -m 'Add some amazing feature')
• Push to the branch (git push origin feature/amazing-feature)
• Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🔗 Related

• Material-UI - The underlying component library
• React - The JavaScript library for building user interfaces
• TypeScript - JavaScript with syntax for types

📝 Changelog

v1.0.0

• Initial release
• Button component with loading states
• ThemeProvider component
• Full TypeScript support
• Tree-shaking optimization
• Storybook documentation