🎨 Tamu UI Library

A cross-framework web components library built with Lit, featuring React and Angular wrappers, comprehensive theming support, and a modern design system.

✨ Features

• 🔄 Cross-Framework Support: Core web components with React and Angular wrappers
• 🎨 Theme System: Built-in support for Tera and CYNK company themes
• 📱 Modern Components: Built with Lit, TypeScript, and Tailwind CSS
• 📚 Storybook Integration: Interactive component documentation and testing
• 🚀 Automated Workflows: Version management, component creation, and release automation

📦 Installation

Core Web Components (Lit)

npm install @tamu-group/components-core

React Components

npm install @tamu-group/components-react

Angular Components

npm install @tamu-group/components-angular

🚀 Quick Start

Core Components

import { TamuButton } from '@tamu-group/components-core';

// Use in your HTML
<tamu-button variant="primary" theme="tera">
  Click me!
</tamu-button>

React Components

import { TamuButton } from '@tamu-group/components-react';

function App() {
  return (
    <TamuButton variant="primary" theme="tera">
      Click me!
    </TamuButton>
  );
}

Angular Components

import { TamuButtonComponent } from '@tamu-group/components-angular';

// In your component template
<tamu-button variant="primary" theme="tera">
  Click me!
</tamu-button>

🎨 Theming

The library supports multiple company themes out of the box:

// Tera Theme (Default)
<tamu-button theme="tera" variant="primary">Tera Button</tamu-button>

// CYNK Theme
<tamu-button theme="cynk" variant="primary">CYNK Button</tamu-button>

Available Themes

• Tera: Primary color #225E3B (green)
• CYNK: Primary color #19690C (darker green)

🧩 Available Components

Button

• Variants: primary, secondary, danger, boxed-primary, boxed-secondary, boxed-danger, outline-danger
• Sizes: sm, md, lg
• Themes: tera, cynk

Modal

• Variants: default, primary, secondary
• Themes: tera, cynk

Card

• Variants: default, primary, secondary
• Themes: tera, cynk

🔧 Development

Prerequisites

• Node.js >= 22.0.0
• npm >= 11.0.0

Setup

# Clone the repository
git clone https://github.com/Tamu-Group/tamu-ui-library.git
cd tamu-ui-library

# Install dependencies
npm install

# Setup the workspace
npm run setup

# Start Storybook
npm run storybook

Available Scripts

Development

npm run dev:core          # Start core package development
npm run storybook         # Start Storybook
npm run build             # Build all packages
npm run build:core        # Build core package only
npm run build:react       # Build React package only
npm run build:angular     # Build Angular package only

Component Management

npm run component:create <Name>    # Create new component
npm run component:create Card      # Create Card component
npm run component:create Modal --skip-angular  # Skip Angular wrapper

Version Management

npm run version:show              # Show current versions
npm run version:bump core patch   # Bump core package patch version
npm run version:release patch     # Release all packages with patch bump
npm run release:patch             # Quick patch release
npm run release:minor             # Quick minor release
npm run release:major             # Quick major release

Publishing

npm run publish:all               # Publish all packages to npm
npm run publish:core              # Publish core package only
npm run publish:react             # Publish React package only
npm run publish:angular           # Publish Angular package only

📚 Documentation

• VERSIONING.md - Comprehensive versioning and release guide
• Storybook - Interactive component documentation (when running locally)

🏗️ Architecture

tamu-ui-library/
├── packages/
│   ├── core/           # Core web components (Lit)
│   ├── react/          # React component wrappers
│   ├── angular/        # Angular component wrappers
│   └── docs/           # Storybook documentation
├── scripts/            # Automation scripts
└── VERSIONING.md       # Versioning guide

🎯 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'feat: add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Development Workflow

# Create a new component
npm run component:create MyComponent

# Customize the component
# ... edit files ...

# Build and test
npm run build
npm run storybook

# Version and release
npm run version:bump core patch
npm run publish:all

📄 License

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

🤝 Support

• Issues: GitHub Issues
• Documentation: VERSIONING.md
• Storybook: Run npm run storybook locally

🚀 Roadmap

• [ ] Additional component variants
• [ ] Dark theme support
• [ ] Accessibility improvements
• [ ] Performance optimizations
• [ ] More framework wrappers
• [ ] Internationalization (i18n)

Built with ❤️ by the Tamu Group team.