UAF Components Library

A comprehensive UI component library for Angular applications, built with PrimeNG and designed for user authentication and dashboard interfaces.

Features

• Complete UI Components: Includes HTML, SCSS, and TypeScript implementations
• Theme Support: Built-in light and dark mode themes
• PrimeNG Integration: Seamlessly works with PrimeNG components
• Responsive Design: Mobile-friendly components
• Connection Management: Built-in service for managing API connections
• Standalone Components: All components are Angular standalone components

Installation

NPM Installation

To install the UAF Components library from NPM, run:

npm install @amarhbaneen/uaf-components

Peer Dependencies

This library requires the following peer dependencies:

npm install primeng@^19.1.3 primeicons@^7.0.0 primeflex@^4.0.0 @primeng/themes@^19.1.3

Usage

Importing Components

Since all components are standalone, you can import them directly in your component:

import { Component } from '@angular/core';
import { UafLoginComponent } from '@amarhbaneen/uaf-components';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [UafLoginComponent],
  template: `
    <uaf-login (loginSubmit)="onLoginSubmit($event)"></uaf-login>
  `
})
export class AppComponent {
  onLoginSubmit(data: {username: string, password: string, connection: any}) {
    console.log('Login submitted:', data);
    // Handle login logic
  }
}

Importing Styles

Import the library styles in your styles.scss file:

// Import UAF Components theme
@import '@amarhbaneen/uaf-components/src/lib/themes/index.scss';

// Your other styles...

Theme Configuration

The library includes a built-in theme with light and dark mode support. To toggle between modes:

// Toggle dark mode
const isDarkMode = document.body.classList.contains('dark');
document.body.classList.toggle('dark', !isDarkMode);
localStorage.setItem('theme', !isDarkMode ? 'dark' : 'light');

To apply the saved theme preference on application startup:

// In your app initialization
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
  document.body.classList.add('dark');
}

Advanced Theme Configuration

The library also provides TypeScript theme objects that can be used for programmatic theme configuration:

import { egFactoryTheme, baseTheme, buttonTheme } from '@amarhbaneen/uaf-components';

// Use the complete theme object
console.log(egFactoryTheme);

// Or use individual theme components
console.log(baseTheme);
console.log(buttonTheme);

// Apply theme programmatically
const applyTheme = (theme) => {
  // Your theme application logic
};

applyTheme(egFactoryTheme);

Accessing Component Files Directly

The library includes all component files (HTML, SCSS, TypeScript) that can be accessed directly in your application:

HTML Templates

You can access component HTML templates directly:

// In your component
import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-login',
  // Import the HTML template directly
  templateUrl: 'node_modules/@amarhbaneen/uaf-components/src/lib/components/login/login.component.html',
  styleUrls: ['./custom-login.component.scss']
})
export class CustomLoginComponent {
  // Your custom implementation
}

SCSS Styles

You can import component SCSS files in your stylesheets:

// In your component's SCSS file
@import 'node_modules/@amarhbaneen/uaf-components/src/lib/components/login/login.component.scss';

// Add your custom styles
.custom-login {
  // Your custom styles
}

TypeScript Implementation

You can reference the TypeScript implementation for guidance:

// View the implementation for reference
// node_modules/@amarhbaneen/uaf-components/src/lib/components/login/login.component.ts

// Then create your own implementation based on it
import { Component } from '@angular/core';

@Component({
  selector: 'app-custom-login',
  templateUrl: './custom-login.component.html',
  styleUrls: ['./custom-login.component.scss']
})
export class CustomLoginComponent {
  // Your implementation based on the original component
}

Available Components

Login Component

A complete login form with connection management:

<uaf-login 
  (loginSubmit)="onLoginSubmit($event)">
</uaf-login>

The login component emits a loginSubmit event with the following data:

{
  username: string;
  password: string;
  connection: {
    id: string;
    name: string;
    url: string;
    username: string;
    password: string;
    withCredentials?: boolean;
  }
}

Navbar Component

A responsive navigation bar:

<uaf-navbar
  [title]="'My Application'"
  [user]="currentUser"
  (settingsClick)="onSettingsClick()"
  (logoutClick)="onLogoutClick()">
</uaf-navbar>

Dashboard Component

A dashboard layout component:

<uaf-dashboard
  [items]="dashboardItems"
  (itemClick)="onDashboardItemClick($event)">
</uaf-dashboard>

Settings Component

A settings management component:

<uaf-settings
  [settings]="appSettings"
  (settingsChange)="onSettingsChange($event)">
</uaf-settings>

Services

ConnectionService

The library includes a ConnectionService for managing API connections:

import { ConnectionService, Connection } from '@amarhbaneen/uaf-components';

@Component({...})
export class MyComponent {
  connections: Connection[] = [];

  constructor(private connectionService: ConnectionService) {
    // Get all saved connections
    this.connections = this.connectionService.getConnections();

    // Configure global connection options
    this.connectionService.configure({
      withCredentials: true
    });
  }

  testConnection(connection: Connection) {
    this.connectionService.testConnection(connection).subscribe({
      next: (result) => console.log('Connection successful', result),
      error: (error) => console.error('Connection failed', error)
    });
  }

  saveConnection(connection: Connection) {
    this.connectionService.saveConnection(connection);
  }
}

Building and Publishing

Building the Library

To build the library, run:

npm run build:lib

This will create the distribution files in the dist/uaf-components directory.

Publishing to NPM

To publish the library to NPM:

1. Update the version in both package.json and projects/uaf-components/package.json
2. Build the library: npm run build:lib
3. Publish: npm run publish:lib

Or use the shortcut command:

npm run publish:lib

This will automatically build and publish the library.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.