@hegoatek/ui-angular

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

Installation

npm install @hegoatek/ui-angular

Composants

ButtonComponent

Bouton réutilisable avec variantes et états.

Usage :

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

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [ButtonComponent],
  template: `
    <hg-button variant="primary" (clicked)="handleClick($event)"> Click me </hg-button>

    <hg-button variant="secondary" size="lg" [disabled]="isDisabled"> Secondary </hg-button>

    <hg-button variant="danger" [loading]="isLoading" type="submit"> Delete </hg-button>
  `,
})
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

InputComponent

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

Usage :

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

@Component({
  selector: 'app-form',
  standalone: true,
  imports: [InputComponent, FormsModule],
  template: `
    <hg-input
      [(ngModel)]="email"
      name="email"
      type="email"
      label="Email"
      placeholder="[email protected]"
      [error]="emailError"
      [disabled]="isDisabled"
    />

    <hg-input
      [(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.

CardComponent

Conteneur de contenu avec styling cohérent.

Usage :

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

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CardComponent],
  template: `
    <hg-card>
      <h2>Card Title</h2>
      <p>Card content goes here.</p>
    </hg-card>

    <hg-card>
      <div class="card-header">
        <h3>User Profile</h3>
      </div>
      <div class="card-body">
        <!-- Content -->
      </div>
    </hg-card>
  `,
})
export class DashboardComponent {}

ContainerComponent

Layout wrapper pour centrer et dimensionner le contenu.

Usage :

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

@Component({
  selector: 'app-login',
  standalone: true,
  imports: [ContainerComponent],
  template: `
    <!-- Centré, largeur réduite -->
    <hg-container [centered]="true" [narrow]="true">
      <h1>Login</h1>
      <!-- Form content -->
    </hg-container>

    <!-- Full width -->
    <hg-container>
      <h2>Dashboard</h2>
      <!-- Dashboard content -->
    </hg-container>
  `,
})
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

AuthService

Service centralisé d'authentification avec signaux Angular.

Usage :

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

@Component({
  selector: 'app-login',
  standalone: true,
  template: `
    <form (ngSubmit)="onSubmit()">
      <input [(ngModel)]="email" name="email" type="email" />
      <input [(ngModel)]="password" name="password" type="password" />

      @if (authService.error()) {
        <p class="error">{{ authService.error() }}</p>
      }

      <button [disabled]="authService.loading()">
        @if (authService.loading()) {
          Loading...
        } @else {
          Login
        }
      </button>
    </form>
  `,
})
export class LoginComponent {
  authService = inject(AuthService);
  email = '';
  password = '';

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

Signaux :

• isAuthenticated: Signal - État d'authentification
• loading: Signal - État de chargement
• error: Signal<string | null> - Message d'erreur

Méthodes :

• login(credentials: { email: string; password: string }): Promise<void>
• logout(): Promise<void>
• refreshToken(): Promise<void>

Configuration :

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

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

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

LocalStorageService

Service typé pour gérer le localStorage.

Usage :

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<T>(key: string, value: T): void - Sauvegarde avec sérialisation JSON
• getItem<T>(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 :

: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

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: `
    <hg-container [centered]="true" [narrow]="true">
      <hg-card>
        <h2>Welcome</h2>

        @if (authService.isAuthenticated()) {
          <p>You are logged in!</p>
          <hg-button variant="danger" (clicked)="handleLogout()"> Logout </hg-button>
        } @else {
          <form (ngSubmit)="handleLogin()">
            <hg-input
              [(ngModel)]="email"
              name="email"
              type="email"
              label="Email"
              [error]="authService.error()"
            />

            <hg-input [(ngModel)]="password" name="password" type="password" label="Password" />

            <hg-button
              type="submit"
              [loading]="authService.loading()"
              [disabled]="!email || !password"
            >
              Login
            </hg-button>
          </form>
        }
      </hg-card>
    </hg-container>
  `,
})
export class AppComponent {
  authService = inject(AuthService);
  email = '';
  password = '';

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

  async handleLogout(): Promise<void> {
    await this.authService.logout();
  }
}

Licence

MIT