@hegoatek/ui-angular

Bibliothèque de composants et services Angular réutilisables pour les projets HegoaTek.

Installation

``bash
npm install @hegoatek/ui-angular
`

Composants

$3

Bouton réutilisable avec variantes et états.

Usage :

`typescript
import { ButtonComponent } from '@hegoatek/ui-angular';

@Component({
selector: 'app-example',
standalone: true,
imports: [ButtonComponent],
template:
Click me

Secondary

Delete
,
})
export class ExampleComponent {
isDisabled = false;
isLoading = false;

handleClick(event: MouseEvent): void {
console.log('Button clicked', event);
}
}
`

Propriétés :

- variant: 'primary' | 'secondary' | 'danger' (défaut: 'primary')
- size: 'sm' | 'md' | 'lg' (défaut: 'md')
- disabled: boolean (défaut: false)
- loading: boolean (défaut: false)
- type: 'button' | 'submit' | 'reset' (défaut: 'button')

Événements :

- clicked: EventEmitter

---

$3

Input text avec support ControlValueAccessor, label et gestion d'erreurs.

Usage :

`typescript
import { InputComponent } from '@hegoatek/ui-angular';
import { FormsModule } from '@angular/forms';

@Component({
selector: 'app-form',
standalone: true,
imports: [InputComponent, FormsModule],
template:
[(ngModel)]="email"
name="email"
type="email"
label="Email"
placeholder="user@example.com"
[error]="emailError"
[disabled]="isDisabled"
/>

[(ngModel)]="password"
name="password"
type="password"
label="Password"
[error]="passwordError"
/>
,
})
export class FormComponent {
email = '';
password = '';
emailError: string | null = null;
isDisabled = false;
}
`

Propriétés :

- label: string (optionnel)
- type: string (défaut: 'text')
- placeholder: string (optionnel)
- error: string | null (optionnel)
- disabled: boolean (défaut: false)
- id: string (généré automatiquement si non fourni)

Implémente ControlValueAccessor pour une intégration réactive formulaire.

---

$3

Conteneur de contenu avec styling cohérent.

Usage :

`typescript
import { CardComponent } from '@hegoatek/ui-angular';

@Component({
selector: 'app-dashboard',
standalone: true,
imports: [CardComponent],
template:

Card Title

Card content goes here.

User Profile

,
})
export class DashboardComponent {}
`

---

$3

Layout wrapper pour centrer et dimensionner le contenu.

Usage :

`typescript
import { ContainerComponent } from '@hegoatek/ui-angular';

@Component({
selector: 'app-login',
standalone: true,
imports: [ContainerComponent],
template:

Login

Dashboard

,
})
export class LayoutComponent {}
`

Propriétés :

- centered: boolean (défaut: false) - Centre le contenu
- narrow: boolean (défaut: false) - Réduit la largeur maximale

---

Services

$3

Service centralisé d'authentification avec signaux Angular.

Usage :

`typescript
import { AuthService } from '@hegoatek/ui-angular';
import { inject } from '@angular/core';

@Component({
selector: 'app-login',
standalone: true,
template:

@if (authService.error()) {

{{ authService.error() }}

}


@if (authService.loading()) {
Loading...
} @else {
Login
}

,
})
export class LoginComponent {
authService = inject(AuthService);
email = '';
password = '';

async onSubmit(): Promise {
await this.authService.login({
email: this.email,
password: this.password,
});
}
}
`

Signaux :

- isAuthenticated: Signal - État d'authentification
- loading: Signal - État de chargement
- error: Signal - Message d'erreur

Méthodes :

- login(credentials: { email: string; password: string }): Promise
- logout(): Promise
- refreshToken(): Promise

Configuration :

La configuration peut être modifiée en fournissant le token AUTH_CONFIG :

`typescript
import { AUTH_CONFIG } from '@hegoatek/ui-angular';

providers: [
{
provide: AUTH_CONFIG,
useValue: {
apiUrl: 'https://api.example.com',
tokenKey: 'auth_token',
loginRedirect: '/dashboard',
logoutRedirect: '/login',
},
},
];
`

---

$3

Service typé pour gérer le localStorage.

Usage :

`typescript
import { LocalStorageService } from '@hegoatek/ui-angular';
import { inject } from '@angular/core';

@Component({
selector: 'app-preferences',
standalone: true,
})
export class PreferencesComponent {
storageService = inject(LocalStorageService);

saveUserPreferences(): void {
const preferences = {
theme: 'dark',
language: 'fr',
notifications: true,
};

this.storageService.setItem('userPreferences', preferences);
}

loadUserPreferences(): void {
const preferences = this.storageService.getItem('userPreferences');
console.log(preferences);
}

clearPreferences(): void {
this.storageService.removeItem('userPreferences');
}
}
`

Méthodes :

- setItem(key: string, value: T): void - Sauvegarde avec sérialisation JSON
- getItem(key: string): T | null - Récupère avec désérialisation JSON
- removeItem(key: string): void - Supprime une clé
- clear(): void - Vide tout le localStorage

---

Thèmes et Styles

Les composants utilisent des variables CSS pour le thème. Vous pouvez personnaliser l'apparence en définissant les variables CSS racine :

`css
:root {
--hg-primary: #3b82f6;
--hg-secondary: #6b7280;
--hg-danger: #ef4444;
--hg-border-radius: 0.5rem;
--hg-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
`

---

Exemple complet

`typescript
import { Component, inject } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
AuthService,
ButtonComponent,
CardComponent,
ContainerComponent,
InputComponent,
} from '@hegoatek/ui-angular';

@Component({
selector: 'app-root',
standalone: true,
imports: [FormsModule, ButtonComponent, CardComponent, ContainerComponent, InputComponent],
template:

Welcome

@if (authService.isAuthenticated()) {

You are logged in!

Logout
} @else {

[(ngModel)]="email"
name="email"
type="email"
label="Email"
[error]="authService.error()"
/>



type="submit"
[loading]="authService.loading()"
[disabled]="!email || !password"
>
Login


}

,
})
export class AppComponent {
authService = inject(AuthService);
email = '';
password = '';

async handleLogin(): Promise {
await this.authService.login({
email: this.email,
password: this.password,
});
}

async handleLogout(): Promise {
await this.authService.logout();
}
}
``

---

Licence

MIT