Juvo Rafa Library v2.1.0

Complete Angular component library with all real-world components and validators extracted from the Juvo Rafa backoffice application.

🚀 Features

• Complete Component Suite: All backoffice components now available
• Production-Ready: Battle-tested components from real enterprise applications
• Comprehensive Validators: Network and device validation utilities
• Standalone Components: Modern Angular architecture with standalone components
• TypeScript Support: Full TypeScript definitions and documentation
• Zero Dependencies: Only requires Angular as peer dependency

📦 Installation

npm install juvo-rafa-library

🎯 Components

Action Components

JuvoButtonActionComponent

Button group component for form actions.

import { JuvoButtonActionComponent } from 'juvo-rafa-library';

Loading Components

JuvoLoadingComponent

Flexible loading indicator with overlay support.

JuvoScreenLoadingComponent

Screen-wide loading overlay for blocking interactions during operations.

import { JuvoLoadingComponent, JuvoScreenLoadingComponent } from 'juvo-rafa-library';

Form Components

JuvoInputComponent

Comprehensive input component supporting text, email, password, number, textarea, and select inputs.

import { JuvoInputComponent } from 'juvo-rafa-library';

// Basic usage
<juvo-input
  label="Full Name"
  placeholder="Enter your full name"
  [(ngModel)]="name">
</juvo-input>

// Select dropdown
<juvo-input
  type="select"
  label="Country"
  [options]="countryOptions"
  [(ngModel)]="selectedCountry">
</juvo-input>

Data Display Components

JuvoListComponent

Simple list component for displaying tabular data with basic functionality.

JuvoTableComponent

Comprehensive table component with pagination, sorting, selection, and actions.

import { JuvoListComponent, JuvoTableComponent } from 'juvo-rafa-library';

// Table example
<juvo-table
  [data$]="tableData$"
  [columns]="[
    { key: 'id', label: 'ID', width: '80px' },
    { key: 'name', label: 'Name', sortable: true },
    { key: 'email', label: 'Email', sortable: true },
    { key: 'actions', label: 'Actions', type: 'actions' }
  ]"
  [paginator]="true"
  [rows]="10"
  (rowSelected)="onRowSelected($event)">
</juvo-table>

Navigation Components

JuvoTabMenuComponent

Horizontal tab navigation component with icons, badges, and multiple variants.

import { JuvoTabMenuComponent } from 'juvo-rafa-library';

<juvo-tab-menu
  [items]="[
    { id: 'overview', label: 'Overview', icon: '📊' },
    { id: 'users', label: 'Users', icon: '👥', badge: '12' },
    { id: 'settings', label: 'Settings', icon: '⚙️' }
  ]"
  [activeItemId]="currentTab"
  variant="pills"
  (tabChange)="handleTabChange($event)">
</juvo-tab-menu>

Feedback Components

JuvoNotificationComponent

Flexible notification system with different types and positions.

JuvoConfirmationDialogComponent

Modal confirmation dialog for critical actions.

import { JuvoNotificationComponent, JuvoConfirmationDialogComponent } from 'juvo-rafa-library';

// Notification
<juvo-notification
  type="success"
  title="Operation successful"
  message="The item was saved successfully."
  [duration]="5000">
</juvo-notification>

// Confirmation Dialog
<juvo-confirmation-dialog
  *ngIf="showDialog"
  header="Delete Item"
  message="Are you sure you want to delete this item?"
  (actionAcceptTriggered)="onConfirm()"
  (actionCancelTriggered)="onCancel()">
</juvo-confirmation-dialog>

File Upload Components

JuvoImagePickerComponent

Drag-and-drop image picker with preview and validation.

import { JuvoImagePickerComponent } from 'juvo-rafa-library';

<juvo-image-picker
  [multiple]="true"
  [maxFiles]="5"
  [showPreview]="true"
  acceptedTypes="image/*"
  (filesSelected)="onFilesSelected($event)">
</juvo-image-picker>

🔧 Validators

Network Validators

import { 
  ipAddressValidator,
  macAddressValidator,
  portValidator,
  serialPortValidator 
} from 'juvo-rafa-library';

// Form usage
this.form = this.fb.group({
  serverIp: ['', [Validators.required, ipAddressValidator()]],
  macAddress: ['', [Validators.required, macAddressValidator()]],
  port: ['', [Validators.required, portValidator()]],
  serialPort: ['', [Validators.required, serialPortValidator()]]
});

Available Validators:

• ipAddressValidator() - Validates IPv4 addresses
• macAddressValidator() - Validates MAC addresses (colon/hyphen format)
• portValidator() - Validates network ports (0-65535)
• serialPortValidator() - Validates serial port names (Windows/Linux/macOS)

📄 Complete Component List

| Component | Description | Version | |-----------|-------------|---------| | JuvoButtonActionComponent | Form action buttons | 2.0.0+ | | JuvoLoadingComponent | Loading indicator | 2.0.0+ | | JuvoScreenLoadingComponent | Screen overlay loading | 2.1.0+ | | JuvoInputComponent | Form input component | 2.1.0+ | | JuvoListComponent | Data list display | 2.1.0+ | | JuvoTableComponent | Data table with features | 2.1.0+ | | JuvoTabMenuComponent | Tab navigation | 2.1.0+ | | JuvoNotificationComponent | Notification system | 2.1.0+ | | JuvoConfirmationDialogComponent | Confirmation dialog | 2.1.0+ | | JuvoImagePickerComponent | File upload component | 2.1.0+ |

🔄 Migration Guide

From v2.0.x to v2.1.0

Version 2.1.0 adds all remaining backoffice components without breaking changes.

New Components:

• JuvoScreenLoadingComponent
• JuvoInputComponent
• JuvoListComponent
• JuvoTableComponent
• JuvoTabMenuComponent
• JuvoNotificationComponent
• JuvoConfirmationDialogComponent
• JuvoImagePickerComponent

No Breaking Changes - All existing components remain unchanged.

📱 Browser Support

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

🤝 Contributing

This library contains components extracted from the Juvo Rafa backoffice application. Components are maintained and updated based on real-world usage patterns.

📄 License

MIT License. See LICENSE file for details.

🔗 Links

• NPM Package
• GitHub Repository
• Issues

Built with ❤️ by the Juvo Rafa Team

Complete backoffice component suite now available!