UNOPS Angular Components

A comprehensive Angular component library following UNOPS design system standards.

🚀 Installation

npm install @unopsitg/angular-components

IMPORTANT: Please follow the setup guide to get started. There is essential Tailwind configuration that needs to be done.

📚 Quick Start

import { Component } from '@angular/core';
import { ButtonComponent, InputComponent, CardComponent } from '@unopsitg/angular-components';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [ButtonComponent, InputComponent, CardComponent],
  template: `
    <unops-card>
      <h2>Welcome to UNOPS Components</h2>
      <unops-input label="Your Name" placeholder="Enter your name"></unops-input>
      <unops-button variant="primary">Get Started</unops-button>
    </unops-card>
  `
})
export class ExampleComponent {}

🤖 AI-Optimized Development

This component library includes comprehensive documentation specifically designed for AI coding assistants. To get the best AI assistance when working with UNOPS components, create a rules file in the appropriate location (e.g. an mdc file in .cursor/rules in the root of your project if you are using Cursor):

# UNOPS Angular Components - AI Assistant Configuration

You are an expert Angular developer working with the UNOPS Angular Components library (@unopsitg/angular-components).

## Documentation Resources

**PRIMARY DOCUMENTATION**: Always reference these files for complete component information:

1. **API Documentation**: `./node_modules/@unopsitg/angular-components/api-documentation.json`
   - Complete API reference for all components
   - Input/output properties, methods, and examples
   - Usage patterns and accessibility information

2. **Component Details**: `./node_modules/@unopsitg/angular-components/documentation/components/*.json`
   - Detailed metadata for each individual component
   - CSS classes, styling information, and implementation details

3. **Component Examples**: `./node_modules/@unopsitg/angular-components/documentation/examples/*.json`
   - Real-world usage examples for each component
   - Common patterns and configuration options

4. **Source Code**: `./node_modules/@unopsitg/angular-components/src/lib/components/**/*`
   - Complete component implementation
   - TypeScript interfaces, templates, and styles

## Development Guidelines

- **Always check the API documentation first** before suggesting component usage
- **Reference actual examples** from the examples directory
- **Follow UNOPS design system standards** as documented in the component metadata
- **Use proper TypeScript imports**: `import { ComponentName } from '@unopsitg/angular-components';`
- **Suggest appropriate variants and configurations** based on documented options
- **Include accessibility considerations** from the component documentation

## When helping with UNOPS components:

1. First, check if the component exists in the API documentation
2. Reference the specific component's JSON file for detailed properties
3. Provide examples based on the documented usage patterns
4. Ensure proper UNOPS design system compliance
5. Include TypeScript types and interfaces where applicable

Always prioritize the bundled documentation over general Angular knowledge when working with UNOPS components.

Why This Helps

• Complete Context: The bundled documentation provides full component APIs, examples, and implementation details
• Up-to-Date Information: Documentation is generated from the actual component source code
• Design System Compliance: AI assistants can reference UNOPS-specific patterns and standards
• Better Suggestions: AI can provide accurate component usage based on real examples and API documentation

📖 Component Categories

Data-display (7)

• unops-banner - BannerComponent
• unops-card - CardComponent
• unops-list - ListComponent
• unops-markdown-popup - MarkdownPopupComponent
• unops-markdown-renderer - MarkdownRendererComponent
• unops-table - TableComponent
• unops-tree - TreeComponent

Data-entry (3)

• unops-rating - RatingComponent
• unops-slider - SliderComponent
• unops-toggle-button-group - ToggleButtonGroupComponent

Feedback (7)

• unops-alert - AlertComponent
• unops-badge - BadgeComponent
• unops-badge-ribbon - BadgeRibbonComponent
• unops-loading-spinner - LoadingSpinnerComponent
• unops-progress-bar - ProgressBarComponent
• unops-toast-container - ToastContainerComponent
• unops-toast - ToastComponent

Form (10)

• unops-button - ButtonComponent
• unops-checkbox - CheckboxComponent
• unops-date-picker - DatePickerComponent
• unops-file-upload - FileUploadComponent
• unops-input - InputComponent
• unops-radio - RadioComponent
• unops-rich-text-editor - RichTextEditorComponent
• unops-select - SelectComponent
• unops-textarea - TextareaComponent
• unops-toggle - ToggleComponent

Interactive (2)

• unops-modal - ModalComponent
• unops-popover - PopoverComponent

Layout (7)

• unops-ai-interaction - AiInteractionComponent
• unops-card-group - CardGroupComponent
• unops-full-page-layout - FullPageLayoutComponent
• unops-grid-item - GridItemComponent
• unops-grid - GridComponent
• unops-panel - PanelComponent
• unops-splitter - SplitterComponent

Navigation (4)

• unops-breadcrumbs - BreadcrumbsComponent
• unops-navbar - NavbarComponent
• unops-pagination - PaginationComponent
• unops-tabs - TabsComponent

Utility (4)

• unops-avatar - AvatarComponent
• unops-divider - DividerComponent
• unops-feature-not-implemented - FeatureNotImplementedComponent
• unops-icon - IconComponent

Visualization (3)

• unops-chart - ChartComponent
• unops-mermaid-diagram - MermaidDiagramComponent
• unops-metric-card - MetricCardComponent

🔧 Development

# Install dependencies
npm install

# Start development server
ng serve demo

# Run tests
npm test

# Build library
npm run build:lib

📄 Documentation

• Setup Guide: See SETUP_GUIDE.md for detailed setup instructions
• API Reference: See api-documentation.json for complete API documentation. Use this file to provide documentation to your AI agents.
• Accessibility: All components follow WCAG 2.1 AA standards

📝 License

This project is licensed under the MIT License.