AggieUX MUI

A React component library built with Material-UI (MUI) components following Texas A&M University's AggieUX design system.

Features

• 🎨 AggieUX Design System: Components that follow Texas A&M's visual identity
• 🔧 TypeScript: Full TypeScript support with type definitions
• 📦 Tree Shaking: Optimized bundle size with ES modules
• 🎯 MUI Integration: Built on top of Material-UI for consistency
• 🧪 Testing: Comprehensive test suite with Vitest
• 📖 Documentation: Well-documented components with examples

Installation

npm install @tamu-dor/aggieux-mui

yarn add @tamu-dor/aggieux-mui

pnpm add @tamu-dor/aggieux-mui

Components

AggieUXButton

A customized button component following AggieUX design guidelines.

AggieUXHeading

Typography component for consistent heading styles across your application.

AggieUXLottieLoader

An animated loading component using Lottie animations.

AggieUXGravatar

A profile picture component with Gravatar integration.

Quick Start

import React from "react";
import { AggieUXButton, AggieUXHeading } from "@tamu-dor/aggieux-mui";

function App() {
  return (
    <div>
      <AggieUXHeading variant="h1">Welcome to AggieUX</AggieUXHeading>
      <AggieUXButton variant="contained" color="primary">
        Get Started
      </AggieUXButton>
    </div>
  );
}

export default App;

Theme Integration

The library includes a custom Aggie theme that can be used with MUI's ThemeProvider:

import { ThemeProvider } from "@mui/material/styles";
import { aggieTheme } from "@tamu-dor/aggieux-mui";

function App() {
  return (
    <ThemeProvider theme={aggieTheme}>
      {/* Your app components */}
    </ThemeProvider>
  );
}

Development

Prerequisites

• Node.js (v16 or higher)
• npm, yarn, or pnpm

Setup

1. Clone the repository:

git clone https://github.com/tamu-edu/aggieux-mui.git
cd aggieux-mui

2. Install dependencies:

npm install

3. Start development server:

npm run dev

Available Scripts

• npm run dev - Start development server
• npm run build - Build the library for production
• npm run test - Run tests
• npm run test:coverage - Run tests with coverage report
• npm run lint:scripts - Lint TypeScript files
• npm run format - Format code with Prettier

Building

To build the library:

npm run build

This will generate:

• ES modules in build/dist/
• TypeScript declarations
• Optimized bundle for production

Testing

The library uses Vitest for testing. Run tests with:

npm run test

For coverage reports:

npm run test:coverage

Dependencies

Runtime Dependencies

• React 19.1.0+
• Material-UI 7.2.0+
• Emotion (for styling)
• Lottie React Player (for animations)

Development Dependencies

• TypeScript
• Vite (build tool)
• Vitest (testing)
• ESLint + Prettier (code quality)
• Husky (git hooks)

Browser Support

This library supports all modern browsers that are compatible with React 19 and Material-UI 7.

Contributing

1. Fork the repository
2. Create a feature branch: git checkout -b feature/new-component
3. Make your changes
4. Run tests: npm run test
5. Run linting: npm run lint:scripts
6. Commit your changes: git commit -am 'Add new component'
7. Push to the branch: git push origin feature/new-component
8. Submit a pull request

Code Style

This project uses:

• ESLint for code linting
• Prettier for code formatting
• Husky for pre-commit hooks
• Lint-staged for staged file linting

Code is automatically formatted on commit.

License

MIT © Matt Voss

Links

• Repository
• Issues
• Texas A&M University
• AggieUX Design System

Changelog

1.0.0

• Initial release
• AggieUXButton component
• AggieUXHeading component
• AggieUXLottieLoader component
• AggieUXGravatar component
• Custom Aggie theme integration
• TypeScript support
• Full test coverage