Mango UI Components

A modern Angular component library developed for Mango AM by Tireda. This library provides a collection of accessible, reusable Angular components built with TailwindCSS v3.

🌐 Live Documentation: mango-ui-components.vercel.app

About

The Mango UI component library serves as the foundation for Tireda's Mango project, providing consistent, reusable interface components across the application. The library is built with modern web standards, focusing on accessibility, performance, and developer experience.

Team

• Design: UI/UX crafted by Tobi Olowu
• Development & Architecture: Built and maintained by @aghwotu

Technology Stack

• Angular 18: Leveraging the latest features for optimal performance
• TailwindCSS v3: Utility-first CSS framework for flexible styling
• Angular CDK: Providing battle-tested accessibility primitives
• Storybook 8.4: For component documentation and testing
• Jest: For unit testing
• TypeScript: For type-safe development

Core Principles

• Modern & Maintainable: Built with the latest Angular features and best practices
• Accessible: Following WCAG 2.1 AA standards
• Performance-Focused: Optimized for minimal bundle size
• Developer-Friendly: Intuitive APIs and comprehensive documentation

Getting Started

Prerequisites

• Node.js (v18 or higher)
• npm or yarn

Installation

npm install

Development Server

Run npm start or ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Storybook

Run npm run storybook to start the Storybook development server. Navigate to http://localhost:6006/ to view the component documentation and interact with components in isolation.

Build

Run npm run build or ng build to build the project. The build artifacts will be stored in the dist/ directory.

Build Storybook

Run npm run build-storybook to build a static version of Storybook for deployment.

Testing

Unit Tests

Run npm test to execute the unit tests via Jest.

npm test              # Run tests once
npm run test:watch    # Run tests in watch mode
npm run test:coverage # Run tests with coverage report

Code Scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Resources

• Live Documentation: Interactive component documentation
• Our Decision-Making Framework for Building an Angular UI Library: Read the complete story of how we built this component library

Further Help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.