Package Exports

juvo-rafa-library
juvo-rafa-library/package.json

Readme

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>

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

Built with ❤️ by the Juvo Rafa Team

Complete backoffice component suite now available!

JSPM