chore: upgrade version of Design Factory (AmadeusITGroup#2081)

## Proposed change

<!-- Please include a summary of the changes and the related issue.
Please also include relevant motivation and context. List any
dependencies that is required for this change. -->

## Related issues

- 🐛 Fixes :
  - https://github.com/AmadeusITGroup/otter/security/dependabot/63
  - https://github.com/AmadeusITGroup/otter/security/dependabot/62
  - https://github.com/AmadeusITGroup/otter/security/dependabot/61
- 🚀 Feature : #26
-  Pull Request : AmadeusITGroup#1963 AmadeusITGroup#1892

<!-- Please make sure to follow the contributing guidelines on
https://github.com/amadeus-digital/Otter/blob/main/CONTRIBUTING.md -->

.yarnrc.yml

@@ -11,9 +11,6 @@ packageExtensions:
   "@actions/github@^6.0.0":
     dependencies:
       undici: ^5.25.4
-  "@design-factory/design-factory@*":
-    dependencies:
-      "@ng-select/ng-select": ~12.0.7
   "@storybook/manager-api@*":
     dependencies:
       react: ^18.0.0

apps/chrome-devtools/package.json

@@ -77,7 +77,8 @@
     "typescript": "~5.5.4"
   },
   "dependencies": {
-    "@agnos-ui/angular": "~0.2.0",
+    "@agnos-ui/angular-bootstrap": "~0.4.1",
+    "@agnos-ui/core-bootstrap": "~0.4.1",
     "@amadeus-it-group/tansu": "~1.0.0",
     "@angular/animations": "~18.2.0",
     "@angular/common": "~18.2.0",
@@ -87,9 +88,9 @@
     "@angular/platform-browser": "~18.2.0",
     "@angular/platform-browser-dynamic": "~18.2.0",
     "@angular/router": "~18.2.0",
-    "@design-factory/design-factory": "~17.1.0",
+    "@design-factory/design-factory": "~18.0.3",
     "@ng-bootstrap/ng-bootstrap": "^17.0.0",
-    "@ng-select/ng-select": "^12.0.7",
+    "@ng-select/ng-select": "~13.7.0",
     "@ngrx/entity": "~18.0.0",
     "@ngrx/store": "~18.0.0",
     "@o3r/application": "workspace:^",

apps/chrome-devtools/src/app-devtools/app.component.ts

@@ -23,7 +23,7 @@ import { ThemingPanelPresComponent } from './theming-panel/theming-panel-pres.co
   templateUrl: './app.component.html',
   styles: `
     :host ::ng-deep ng-select.local-change .ng-select-container {
-      border-color: var(--bs-recommend-warning-color);
+      border-color: var(--df-recommend-warning-color);
       border-width: medium;
       box-sizing: content-box;
     }

apps/chrome-devtools/src/app-devtools/component-panel/component-panel-pres.template.html

@@ -1,6 +1,6 @@
 @if (isComponentSelectionAvailable$ | async) {
   <div class="d-flex p-2 border-bottom align-items-center gap-2">
-    <i (click)="toggleInspector()" class="icon-external-link-square" [class.text-primary]="inspectorRunning"></i>
+    <i (click)="toggleInspector()" class="fa-external-link-square" [class.text-primary]="inspectorRunning"></i>
     @if ((isLookingToContainer$ | async) || (selectedComponentInfo$ | async)?.container) {
       <button class="btn btn-primary" (click)="toggleContainerPresenter()">
         Switch to {{(isLookingToContainer$ | async) ? 'Presenter' : 'Container'}}

apps/chrome-devtools/src/app-devtools/config-panel/config-panel-pres.template.html

@@ -1,7 +1,7 @@
 <form class="mb-2" [formGroup]="form">
   <div class="input-group">
     <label class="input-group-text" for="search-config">
-      <i class="mx-1 icon-search" aria-label="Search"></i>
+      <i class="mx-1 fa-search" aria-label="Search"></i>
     </label>
     <input class="form-control" formControlName="search" type="text" id="search-config" placeholder="Search for configuration or property" />
   </div>

apps/chrome-devtools/src/app-devtools/localization-panel/localization-panel-pres.template.html

@@ -37,7 +37,7 @@
   @if (hasLocalizations()) {
     <div class="mb-2 input-group">
       <label class="input-group-text" for="search-localization">
-        <i class="mx-1 icon-search" aria-label="Search"></i>
+        <i class="mx-1 fa-search" aria-label="Search"></i>
       </label>
       <input class="form-control" formControlName="search" type="text" id="search-localization" placeholder="Search for localization" />
     </div>
@@ -59,7 +59,7 @@ <h3 ngbAccordionHeader>
                         <input [attr.aria-describedby]="localization.key" class="form-control" type="text" [formControlName]="localization.key" />
                       </ng-container>
                       @if (localizationActiveStateOverridesForCurrentLang()[localization.key] || localizationLocalStateOverridesForCurrentLang()[localization.key]) {
-                        <i class="form-text text-warning icon-undo position-absolute end-0 me-3"
+                        <i class="form-text text-warning fa-undo position-absolute end-0 me-3"
                           [ngbTooltip]="
                             activeStateName() && localizationActiveStateOverridesForCurrentLang()[localization.key] !== localizationLocalStateOverridesForCurrentLang()[localization.key]
                               ? 'Reset value to the one from ' + activeStateName() + ': ' + (localizationActiveStateOverridesForCurrentLang()[localization.key] || localization.value)

apps/chrome-devtools/src/app-devtools/state-panel/state-panel.template.html

@@ -3,7 +3,7 @@
     <div>
       <label for="download">
         <span class="btn btn-outline-primary text-nowrap" tabindex="0" role="button" aria-controls="download" dfTriggerClick>
-          <i class="me-2 icon-download"></i>
+          <i class="me-2 fa-download"></i>
           Import state
         </span>
         <input type="file" accept="application/JSON" id="download" class="d-none" (change)="onFileChange($event)" />
@@ -20,7 +20,7 @@
       <button class="btn btn-primary text-nowrap" (click)="saveNewState()"
         [disabled]="form.controls.newStateName.invalid || form.controls.newStateName.disabled"
         [ngbTooltip]="newStateNameErrorMessage()">
-        <i class="me-2 icon-plus"></i>
+        <i class="me-2 fa-plus"></i>
         Create new state
       </button>
     </div>
@@ -39,16 +39,16 @@
           <input type="color" formControlName="color" class="form-control form-control-color" />
           <input type="text" formControlName="name" class="form-control" />
         </div>
-        <button type="button" class="ms-auto btn btn-outline-primary df-btn-icononly icon-save"
+        <button type="button" class="ms-auto btn btn-outline-primary df-btn-icononly fa-save"
           (click)="updateState(state.key)"
           [ngbTooltip]="activeState()?.name !== state.key ? 'Only the selected state can be saved' : 'Save changes'"
           [disabled]="activeState()?.name !== state.key"
         ></button>
-        <button type="button" class="ms-auto btn btn-outline-primary df-btn-icononly icon-share-square"
+        <button type="button" class="ms-auto btn btn-outline-primary df-btn-icononly fa-share-square"
           (click)="exportState(state.key)"
           ngbTooltip="Share"
         ></button>
-        <button type="button" class="ms-auto btn btn-outline-primary df-btn-icononly icon-trash-alt"
+        <button type="button" class="ms-auto btn btn-outline-primary df-btn-icononly fa-trash-alt"
           (click)="deleteState(state.key)"
           [ngbTooltip]="activeState()?.name === state.key ? 'Selected state cannot be deleted' : 'Delete'"
           [disabled]="activeState()?.name === state.key"

apps/chrome-devtools/src/app-devtools/theming-panel/theming-panel-pres.template.html

@@ -3,7 +3,7 @@
     <div class="mb-4 d-flex gap-4 justify-content-between">
       <div class="input-group">
         <label class="input-group-text" for="search-styling">
-          <i class="mx-1 icon-search" aria-label="Search"></i>
+          <i class="mx-1 fa-search" aria-label="Search"></i>
         </label>
         <input class="form-control" formControlName="search" type="text" id="search-styling" placeholder="Search for styling variable" />
       </div>
@@ -33,7 +33,7 @@ <h3 ngbAccordionHeader>
                 </div>
                 <label class="form-label text-nowrap fw-semibold my-0 ms-4" [for]="group.name">{{ group.name }}</label>
                 @if (themingActiveStateOverrides()[group.defaultVariable.name] || themingLocalStateOverrides()[group.defaultVariable.name]) {
-                  <i class="form-text text-warning icon-undo position-absolute end-0 me-10"
+                  <i class="form-text text-warning fa-undo position-absolute end-0 me-10"
                     [ngbTooltip]="
                       activeStateName() && themingActiveStateOverrides()[group.defaultVariable.name] !== themingLocalStateOverrides()[group.defaultVariable.name]
                       ? 'Reset all colors of ' + group.name + ' to the ones of ' + activeStateName()
@@ -97,7 +97,7 @@ <h3 ngbAccordionHeader>
                             </ng-template>
                             <input [id]="variable.name" type="text" class="form-control w-100 pe-6" [formControlName]="variable.name" [ngbTypeahead]="variableSearch | memoize : variable" [resultTemplate]="resultTemplate" />
                             @if (themingActiveStateOverrides()[variable.name] || themingLocalStateOverrides()[variable.name]) {
-                              <i class="form-text text-warning icon-undo position-absolute end-0 me-3"
+                              <i class="form-text text-warning fa-undo position-absolute end-0 me-3"
                                 [ngbTooltip]="
                                   activeStateName() && themingActiveStateOverrides()[variable.name] !== themingLocalStateOverrides()[variable.name]
                                     ? 'Reset value to the one from ' + activeStateName() + ': ' + (themingActiveStateOverrides()[variable.name] || variable.defaultValue)

apps/chrome-devtools/src/components/otter-component/otter-component.component.html

@@ -51,7 +51,7 @@ <h3>No ruleset executions</h3>
               <h3 ngbAccordionHeader>
                 {{componentTranslations.key}}
                 @if (componentTranslations.key === componentName) {
-                  <i class="ms-1 icon-star"></i>
+                  <i class="ms-1 fa-star"></i>
                 }
               </h3>
               <div ngbAccordionCollapse>
@@ -86,7 +86,7 @@ <h3>No localizations</h3>
               <h3 ngbAccordionHeader>
                 {{componentAnalytics.key}}
                 @if (componentAnalytics.key === componentName) {
-                  <i class="ms-1 icon-star"></i>
+                  <i class="ms-1 fa-star"></i>
                 }
               </h3>
               <div ngbAccordionCollapse>

apps/chrome-devtools/src/polyfills.ts

@@ -48,6 +48,7 @@
  * Zone JS is required by default for Angular itself.
  */
 import 'zone.js'; // Included with Angular CLI.
+import '@angular/localize/init';
 
 
 /**

apps/chrome-devtools/src/styles/index.scss

@@ -1,9 +1,4 @@
-@use './design-factory-custom' as design-factory with (
-  $prefix: bs-,
-  $df-spinner-circumference: 2rem,
-  $font-path: '@design-factory/design-factory/assets/fonts',
-  $utilities-bg: ()
-);
+@use '@design-factory/design-factory/design-factory.css';
 
 // TODO check why accordion are not working corectly without that
 .collapse:not(.show) {

apps/showcase/package.json

@@ -25,7 +25,8 @@
     "patch:package": "cpy 'package.json' 'dist' && patch-package-json-main"
   },
   "dependencies": {
-    "@agnos-ui/angular": "~0.2.0",
+    "@agnos-ui/angular-bootstrap": "~0.4.1",
+    "@agnos-ui/core-bootstrap": "~0.4.1",
     "@ama-sdk/core": "workspace:^",
     "@ama-sdk/schematics": "workspace:^",
     "@ama-sdk/showcase-sdk": "workspace:^",
@@ -40,9 +41,10 @@
     "@angular/platform-browser": "~18.2.0",
     "@angular/platform-browser-dynamic": "~18.2.0",
     "@angular/router": "~18.2.0",
-    "@design-factory/design-factory": "~17.1.0",
+    "@design-factory/design-factory": "~18.0.3",
     "@formatjs/intl-numberformat": "~8.10.0",
     "@ng-bootstrap/ng-bootstrap": "^17.0.0",
+    "@ng-select/ng-select": "~13.7.0",
     "@ngrx/effects": "~18.0.0",
     "@ngrx/entity": "~18.0.0",
     "@ngrx/store": "~18.0.0",
@@ -124,6 +126,7 @@
     "jest-preset-angular": "~14.2.0",
     "jsonc-eslint-parser": "~2.4.0",
     "lighthouse": "~12.2.0",
+    "minimist": "^1.2.6",
     "playwright-lighthouse": "~4.0.0",
     "rimraf": "^5.0.1",
     "ts-jest": "~29.2.0",

apps/showcase/project.json

@@ -53,7 +53,10 @@
         "outputPath": "apps/showcase/dist",
         "index": "apps/showcase/src/index.html",
         "browser": "apps/showcase/src/main.ts",
-        "polyfills": ["zone.js"],
+        "polyfills": [
+          "zone.js",
+          "@angular/localize/init"
+        ],
         "tsConfig": "apps/showcase/tsconfig.app.json",
         "inlineStyleLanguage": "scss",
         "assets": [
@@ -93,7 +96,7 @@
             {
               "type": "initial",
               "maximumWarning": "500kb",
-              "maximumError": "2mb"
+              "maximumError": "2.5mb"
             },
             {
               "type": "anyComponentStyle",

apps/showcase/scripts/update-screenshots/index.cjs

@@ -8,6 +8,9 @@ const playwrightVersion = require('@playwright/test/package.json').version;
 const childProcess = require('node:child_process');
 const os = require('node:os');
 const path = require('node:path');
+const minimist = require('minimist');
+
+const argv = minimist(process.argv.slice(2));
 
 const absolutePathFromRoot = path.resolve(__dirname, '..', '..', '..', '..');
 
@@ -25,11 +28,11 @@ const ipAddresses = [
   ...Object.values(os.networkInterfaces())
     .flat()
     .filter((net) => net.family === 'IPv4' && net.address !== '127.0.0.1')
-    .map((net) => `http://${net.address}:8080`)
+    .map((net) => `http://${net.address}:${argv.port || '8080'}`)
 ];
 
 // Command to create the docker container and run the script
-const script = 'docker';
+const script = argv.docker || 'docker';
 const args = [
   'run',
   '-it',

apps/showcase/src/app/app.component.html

@@ -1,5 +1,5 @@
 <header class="navbar navbar-expand-lg flex-shrink-0">
-  <button class="navbar-toggler d-inline-block d-xl-none icon-bars" (click)="open(content)" title="Open side navigation">
+  <button class="navbar-toggler d-inline-block d-xl-none fa-bars" (click)="open(content)" title="Open side navigation">
   </button>
   <div class="header-title p-xl-3">
     <div class="header-icon">