add npm link script for SAE lib to be used in other projects

sae-csc/src/app/app.ts

@@ -1,10 +1,10 @@
 import { Component, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import {SaeLib} from '../../../my-workspace/projects/sae-lib/src/public-api';
+// import {SaeLib} from '@sae-lib/src/public-api';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, SaeLib],
+  imports: [RouterOutlet],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })

sae-csc/src/app/shared/navigation/top-navigation/top-navigation.html

@@ -48,4 +48,6 @@
       </div>
     </div>
   </nav>
+
+  <app-alert-box></app-alert-box>
 </div>

sae-csc/src/app/shared/navigation/top-navigation/top-navigation.scss

@@ -1,4 +1,6 @@
+// TODO importer les variables de la librairie
+@use '../../../../styles/variables-barrel' as variables;
 .top-navigation{
-  background: #ccc;
+  background: variables.$bg-color-nav;
   color: white;
 }

sae-csc/src/app/shared/navigation/top-navigation/top-navigation.ts

@@ -1,11 +1,15 @@
 import {Component} from '@angular/core';
 import {RouterLink, RouterLinkActive} from '@angular/router';
+import {AlertBox} from '../../../../../../my-workspace/projects/sae-lib/alert-box/alert-box';
+
+// import {SaeLib} from 'sae-lib';
 
 @Component({
   selector: 'app-top-navigation',
   imports: [
     RouterLink,
-    RouterLinkActive
+    RouterLinkActive,
+    AlertBox
   ],
   templateUrl: './top-navigation.html',
   styleUrl: './top-navigation.scss'

sae-csc/src/styles.scss

@@ -5,3 +5,19 @@
 // lib SAE Aero styles
 //@use 'sae-lib/src/styles/index.scss';
 @use '../../my-workspace/projects/sae-lib/src/styles/index.scss';
+/* Fichier de styles global pour l'application */
+
+// Importer les styles principaux
+@import 'styles/main.scss';
+
+// Styles globaux supplémentaires
+html, body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+* {
+  box-sizing: border-box;
+}

sae-csc/src/styles/_sae-lib-imports.scss

@@ -0,0 +1,9 @@
+/**
+ * Fichier centralisé pour importer les styles de sae-lib
+ * À utiliser dans les composants avec: @use '@sae-lib/src/styles/_variables' as variables;
+ */
+
+@forward '@sae-lib/src/styles/_variables.scss';
+@forward '@sae-lib/src/styles/_forms.scss';
+@forward '@sae-lib/src/styles/_global.scss';
+@forward '@sae-lib/src/styles/_shadows.scss';

sae-csc/src/styles/_variables-barrel.scss

@@ -0,0 +1,5 @@
+// Ce fichier regroupe toutes les variables de sae-lib pour faciliter l'importation
+@forward 'sae-lib/src/styles/_variables.scss';
+//@forward '../../my-workspace/projects/sae-lib/src/styles/_forms';
+//@forward '../../my-workspace/projects/sae-lib/src/styles/_global';
+//@forward '../../my-workspace/projects/sae-lib/src/styles/_shadows';

sae-csc/src/styles/main.scss

@@ -0,0 +1,45 @@
+/*
+ * Fichier principal pour les styles globaux
+ * Il contient les variables et styles réutilisables dans toute l'application
+ */
+
+// Définir les couleurs de base de l'application
+$primary-color: #3f51b5;
+$secondary-color: #ff4081;
+$bg-color-nav: #333333;
+$text-color: #ffffff;
+
+// Autres variables globales
+$spacing-unit: 8px;
+$border-radius: 4px;
+
+// Mixins utiles
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@mixin shadow-light {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+}
+
+// Styles globaux
+body {
+  font-family: 'Roboto', sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+// Classes d'utilité
+.text-center {
+  text-align: center;
+}
+
+.mt-1 {
+  margin-top: $spacing-unit;
+}
+
+.mb-1 {
+  margin-bottom: $spacing-unit;
+}