chore(deps): update linters

apps/chrome-devtools/package.json

@@ -45,7 +45,7 @@
     "@o3r/logger": "workspace:^",
     "@o3r/rules-engine": "workspace:^",
     "@schematics/angular": "~18.2.0",
-    "@stylistic/eslint-plugin-ts": "~2.4.0",
+    "@stylistic/eslint-plugin-ts": "~2.10.0",
     "@types/chrome": "^0.0.280",
     "@types/jest": "~29.5.2",
     "@types/tinycolor2": "^1.4.6",
@@ -60,7 +60,7 @@
     "cpy-cli": "^5.0.0",
     "eslint": "^8.57.0",
     "eslint-import-resolver-node": "^0.3.9",
-    "eslint-plugin-jest": "~28.8.0",
+    "eslint-plugin-jest": "~28.9.0",
     "eslint-plugin-jsdoc": "~48.11.0",
     "eslint-plugin-prefer-arrow": "~1.2.3",
     "eslint-plugin-unicorn": "^54.0.0",

apps/github-cascading-app/package.json

@@ -39,7 +39,7 @@
     "@nx/js": "~19.5.0",
     "@o3r/eslint-config-otter": "workspace:^",
     "@o3r/eslint-plugin": "workspace:^",
-    "@stylistic/eslint-plugin-ts": "~2.4.0",
+    "@stylistic/eslint-plugin-ts": "~2.10.0",
     "@types/ejs": "^3.1.2",
     "@types/express-serve-static-core": "^4.19.5",
     "@types/jest": "~29.5.2",
@@ -52,7 +52,7 @@
     "ejs": "^3.1.9",
     "eslint": "^8.57.0",
     "eslint-import-resolver-node": "^0.3.9",
-    "eslint-plugin-jest": "~28.8.0",
+    "eslint-plugin-jest": "~28.9.0",
     "eslint-plugin-jsdoc": "~48.11.0",
     "eslint-plugin-prefer-arrow": "~1.2.3",
     "eslint-plugin-unicorn": "^54.0.0",

apps/showcase/package.json

@@ -73,6 +73,7 @@
     "@xterm/xterm": "^5.0.0",
     "ag-grid-angular": "~32.3.0",
     "ag-grid-community": "~32.3.0",
+    "angular-split": "^18.0.0",
     "bootstrap": "5.3.3",
     "clipboard": "^2.0.11",
     "intl-messageformat": "~10.7.0",
@@ -110,7 +111,7 @@
     "@o3r/testing": "workspace:^",
     "@playwright/test": "~1.48.0",
     "@schematics/angular": "~18.2.0",
-    "@stylistic/eslint-plugin-ts": "~2.4.0",
+    "@stylistic/eslint-plugin-ts": "~2.10.0",
     "@types/bootstrap": "^5.2.10",
     "@types/jest": "~29.5.2",
     "@types/node": "^20.0.0",
@@ -121,7 +122,7 @@
     "concurrently": "^8.0.0",
     "eslint": "^8.57.0",
     "eslint-import-resolver-node": "^0.3.9",
-    "eslint-plugin-jest": "~28.8.0",
+    "eslint-plugin-jest": "~28.9.0",
     "eslint-plugin-jsdoc": "~48.11.0",
     "eslint-plugin-prefer-arrow": "~1.2.3",
     "eslint-plugin-unicorn": "^54.0.0",

apps/showcase/src/assets/trainings/sdk/program.json

@@ -23,7 +23,7 @@
       "startingFile": "apps/tutorial-app/src/app/app.component.ts",
       "urls": {
         ".": "./shared/monorepo-template.json",
-        "./libs/sdk/src": "o3r/training-sdk/structure/src.json"
+        "./libs/sdk/src": "@o3r-training/training-sdk/structure/src.json"
       },
       "mode": "interactive",
       "commands": ["npm install --legacy-peer-deps --ignore-scripts --force", "npm run ng run sdk:build", "npm run ng run tutorial-app:serve"]
@@ -36,7 +36,7 @@
       "name": "sdk-specification",
       "startingFile": "open-api.yaml",
       "solutionUrls": {
-        ".": "o3r/training-sdk/structure/spec.json"
+        ".": "@o3r-training/training-sdk/structure/spec.json"
       },
       "mode": "readonly",
       "commands": []
@@ -49,8 +49,8 @@
       "name": "generate-sdk",
       "startingFile": "src/api/dummy/dummy-api.ts",
       "solutionUrls": {
-        "src": "o3r/training-sdk/structure/src.json",
-        ".": "o3r/training-sdk/structure/spec.json"
+        "src": "@o3r-training/training-sdk/structure/src.json",
+        ".": "@o3r-training/training-sdk/structure/spec.json"
       },
       "mode": "readonly",
       "commands": []
@@ -63,11 +63,11 @@
       "name": "generate-date-sdk",
       "startingFile": "open-api.yaml",
       "urls": {
-        ".": "o3r/training-sdk/structure/spec.json"
+        ".": "@o3r-training/training-sdk/structure/spec.json"
       },
       "solutionUrls": {
-        ".": "o3r/training-sdk/structure/spec.json",
-        "./src": "o3r/training-sdk/structure/src.json"
+        ".": "@o3r-training/training-sdk/structure/spec.json",
+        "./src": "@o3r-training/training-sdk/structure/src.json"
       },
       "mode": "readonly",
       "commands": []

apps/showcase/src/components/training/code-editor-control/code-editor-control.component.html

@@ -27,12 +27,6 @@
         </code-editor-terminal>
       </ng-template>
     </li>
-  <button type="button" class="btn btn-outline-secondary df-btn-icononly align-self-center ms-auto"
-          [class.fa-chevron-down]="!show"
-          [class.fa-chevron-up]="show"
-          (click)="show = !show">
-    <span class="visually-hidden">{{show ? 'Hide' : 'Show'}}</span>
-  </button>
 </ul>
-<div class="h-100 command-panel" [class.d-none]="!show" [ngbNavOutlet]="nav"></div>
+<div class="h-100 command-panel" [ngbNavOutlet]="nav"></div>
 

apps/showcase/src/components/training/code-editor-control/code-editor-control.component.scss

@@ -1,10 +1,4 @@
 code-editor-control {
-  transition: min-height 100ms ease;
-
-  &:has(.command-panel.d-none) {
-    min-height: 3rem;
-  }
-
   .tab-content {
     --df-tabs-content-tab-pane-padding: 0;
     overflow: hidden;

apps/showcase/src/components/training/code-editor-control/code-editor-control.component.ts

@@ -48,11 +48,6 @@ export class CodeEditorControlComponent implements OnDestroy, AfterViewInit {
    */
   public readonly webContainerService = inject(WebContainerService);
 
-  /**
-   * Whether to show the panels - if set to false, hide all the panels and only display the tab bar
-   */
-  public show = true;
-
   /**
    * Current tab displayed
    */

apps/showcase/src/components/training/code-editor-view/code-editor-view.component.html

@@ -1,19 +1,32 @@
 @if (cwdTree$ | async; as tree) {
   @if (tree.length) {
-    <form [formGroup]="form" class="editor d-flex flex-fill overflow-hidden">
-      <div class="d-flex h-100 w-100 align-items-stretch">
-        <monaco-tree class="overflow-auto w-25" (clickFile)="onClickFile($event)" [tree]="tree" [currentFile]="project?.startingFile" width="fit-content" height="100%"></monaco-tree>
-        <div class="flex-fill h-100 overflow-hidden monaco-editor-wrapper">
-          <ngx-monaco-editor class="h-100 position-relative"
-            [options]="editorOptions$ | async"
-            formControlName="code">
-          </ngx-monaco-editor>
-        </div>
-      </div>
-    </form>
-    @if (editorMode === 'interactive') {
-      <code-editor-control class="d-flex flex-column" [showOutput]="project?.commands.length > 0 && tree.length > 0"></code-editor-control>
-    }
+    <as-split direction="vertical">
+      <as-split-area [size]="50">
+        <form [formGroup]="form" class="editor overflow-hidden h-100">
+            <as-split direction="horizontal">
+              <as-split-area [size]="25">
+                <monaco-tree (clickFile)="onClickFile($event)"
+                             [tree]="tree"
+                             [currentFile]="project?.startingFile"
+                             [width]="'auto'"
+                             [height]="'auto'"
+                             class="w-100"></monaco-tree>
+              </as-split-area>
+              <as-split-area [size]="75">
+                <ngx-monaco-editor class="h-100 position-relative"
+                                   [options]="editorOptions$ | async"
+                                   formControlName="code">
+                </ngx-monaco-editor>
+              </as-split-area>
+            </as-split>
+        </form>
+      </as-split-area>
+      @if (editorMode === 'interactive') {
+        <as-split-area [size]="50">
+          <code-editor-control class="d-flex flex-column h-100" [showOutput]="project?.commands.length > 0 && tree.length > 0"></code-editor-control>
+        </as-split-area>
+      }
+    </as-split>
   }
 }
 @if (!(cwdTree$ | async)?.length) {

apps/showcase/src/components/training/code-editor-view/code-editor-view.component.scss

@@ -1,11 +1,12 @@
 monaco-tree {
-  max-width: 250px;
   background: #1d1d1d;
 
   .monaco-tree {
     display: flex;
     flex-direction: column;
     overflow: unset !important;
+    max-width: 100%;
+    min-height: 100%;
   }
 
   monaco-tree-icons {
@@ -23,7 +24,3 @@ ngx-monaco-editor {
     max-height: 100% !important;
   }
 }
-
-code-editor-control {
-  min-height: 50%;
-}

apps/showcase/src/components/training/code-editor-view/code-editor-view.component.ts

@@ -11,6 +11,7 @@ import {
 } from '@angular/core';
 import {FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {FileSystemTree} from '@webcontainer/api';
+import {AngularSplitModule} from 'angular-split';
 import {MonacoEditorModule} from 'ngx-monaco-editor-v2';
 import {MonacoTreeElement, NgxMonacoTreeComponent} from 'ngx-monaco-tree';
 import {
@@ -65,7 +66,8 @@ export interface TrainingProject {
     JsonPipe,
     MonacoEditorModule,
     NgxMonacoTreeComponent,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    AngularSplitModule
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/components/training/training-step/training-step-pres.component.html

@@ -1,17 +1,22 @@
-<div class="d-flex h-100 gap-5">
-  @if (instructions) {
-    <div class="instructions h-100 col overflow-auto">
-      <h2>{{title}}</h2>
-      <markdown clipboard [data]="instructions"></markdown>
-    </div>
-  }
-  @if (project) {
-    <div class="d-flex h-100 overflow-hidden col">
-      <code-editor-view
-        class="d-flex flex-column justify-content-stretch w-100 flex-fill"
-        [project]="project"
-        [editorMode]="editorMode"
-      ></code-editor-view>
-    </div>
-  }
+<div class="h-100">
+  <as-split direction="horizontal">
+    @if (instructions) {
+      <as-split-area [size]="50">
+        <div class="instructions h-100 overflow-auto">
+          <h2>{{title}}</h2>
+          <markdown clipboard [data]="instructions"></markdown>
+        </div>
+      </as-split-area>
+    }
+    @if (project) {
+      <as-split-area [size]="50">
+        <div class="h-100 overflow-hidden">
+          <code-editor-view
+            [project]="project"
+            [editorMode]="editorMode"
+          ></code-editor-view>
+        </div>
+      </as-split-area>
+    }
+  </as-split>
 </div>

apps/showcase/src/components/training/training-step/training-step-pres.component.ts

@@ -3,14 +3,15 @@ import {
   Component,
   Input
 } from '@angular/core';
+import {AngularSplitModule} from 'angular-split';
 import {MarkdownModule, provideMarkdown} from 'ngx-markdown';
 import {CodeEditorViewComponent, EditorMode, TrainingProject} from '../code-editor-view';
 
 @Component({
   selector: 'o3r-training-step-pres',
   standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CodeEditorViewComponent, MarkdownModule],
+  imports: [AngularSplitModule, CodeEditorViewComponent, MarkdownModule],
   providers: [provideMarkdown()],
   templateUrl: './training-step-pres.component.html',
   styleUrl: './training-step-pres.component.scss'

apps/showcase/src/components/training/training.component.html

@@ -3,9 +3,6 @@
     <h1 class="m-0 flex-grow-1">{{title()}}</h1>
     <div class="d-flex gap-3">
       @if (currentStep.dynamicContent.project() || currentStep.dynamicContent.solutionProject()) {
-        <button type="button" class="btn btn-outline-primary" (click)="toggleDisplayInstructions()">
-          {{showInstructions() ? 'Hide instructions' : 'Show instructions'}}
-        </button>
         <button type="button" class="btn btn-outline-danger"
                 (click)="toggleDisplaySolution()"
                 [disabled]="!showSolution() && !currentStep.dynamicContent.solutionProject() || showSolution() && !currentStep.dynamicContent.project()"
@@ -36,7 +33,7 @@ <h1 class="m-0 flex-grow-1">{{title()}}</h1>
   <o3r-training-step-pres
     class="flex-fill overflow-hidden mb-5"
     [class.constrained]="!!(currentStep.dynamicContent.solutionProject() || currentStep.dynamicContent.project())"
-    [instructions]="showInstructions() ? currentStep.dynamicContent.htmlContent() : ''"
+    [instructions]="currentStep.dynamicContent.htmlContent()"
     [title]="currentStep.description.title"
     [project]="showSolution() ? currentStep.dynamicContent.solutionProject() : currentStep.dynamicContent.project()"
     [editorMode]="currentStep.description.filesConfiguration?.mode">

apps/showcase/src/components/training/training.component.ts

@@ -95,8 +95,6 @@ const currentStepLocationRegExp = new RegExp(/#([0-9]+)$/);
 export class TrainingComponent implements OnInit {
   /** Index of the training step to display */
   public currentStepIndex = signal(0);
-  /** Display instructions */
-  public showInstructions = signal(true);
   /** Display exercise solution */
   public showSolution = signal(false);
   /** Training steps */
@@ -251,13 +249,6 @@ export class TrainingComponent implements OnInit {
     this.showSolution.set(false);
   }
 
-  /**
-   * Update the display of instructions and the corresponding button label
-   */
-  public toggleDisplayInstructions() {
-    this.showInstructions.set(!this.showInstructions());
-  }
-
   /**
    * Update the display of the exercise solution and the corresponding button label
    */

apps/vscode-extension/package.json

@@ -365,7 +365,7 @@
     "@o3r/eslint-plugin": "workspace:^",
     "@o3r/schematics": "workspace:^",
     "@schematics/angular": "~18.2.0",
-    "@stylistic/eslint-plugin-ts": "~2.4.0",
+    "@stylistic/eslint-plugin-ts": "~2.10.0",
     "@types/eslint": "~9.6.0",
     "@types/glob": "^8.0.0",
     "@types/jest": "~29.5.2",
@@ -378,7 +378,7 @@
     "cpy-cli": "^5.0.0",
     "esbuild": "~0.24.0",
     "eslint-import-resolver-node": "^0.3.9",
-    "eslint-plugin-jest": "~28.8.0",
+    "eslint-plugin-jest": "~28.9.0",
     "eslint-plugin-jsdoc": "~48.11.0",
     "eslint-plugin-prefer-arrow": "~1.2.3",
     "eslint-plugin-unicorn": "^54.0.0",

package.json

@@ -202,7 +202,7 @@
     "@playwright/test": "~1.48.0",
     "@popperjs/core": "^2.11.5",
     "@schematics/angular": "~18.2.0",
-    "@stylistic/eslint-plugin-ts": "~2.4.0",
+    "@stylistic/eslint-plugin-ts": "~2.10.0",
     "@swc-node/register": "^1.9.2",
     "@swc/core": "~1.9.0",
     "@swc/helpers": "~0.5.0",
@@ -221,6 +221,7 @@
     "@yarnpkg/sdks": "^3.2.0",
     "ag-grid-angular": "~32.3.0",
     "ag-grid-community": "~32.3.0",
+    "angular-split": "^18.0.0",
     "babel-loader": "^9.0.0",
     "bootstrap": "5.3.3",
     "bootstrap-icons": "^1.11.3",
@@ -232,7 +233,7 @@
     "editorconfig-checker": "^5.1.8",
     "eslint": "^8.57.0",
     "eslint-import-resolver-node": "^0.3.9",
-    "eslint-plugin-jest": "~28.8.0",
+    "eslint-plugin-jest": "~28.9.0",
     "eslint-plugin-jsdoc": "~48.11.0",
     "eslint-plugin-prefer-arrow": "~1.2.3",
     "eslint-plugin-unicorn": "^54.0.0",

packages/@ama-sdk/client-angular/package.json

@@ -86,7 +86,7 @@
     "@o3r/eslint-plugin": "workspace:^",
     "@o3r/test-helpers": "workspace:^",
     "@schematics/angular": "~18.2.0",
-    "@stylistic/eslint-plugin-ts": "~2.4.0",
+    "@stylistic/eslint-plugin-ts": "~2.10.0",
     "@swc/cli": "~0.5.0",
     "@swc/core": "~1.9.0",
     "@types/jest": "~29.5.2",
@@ -98,7 +98,7 @@
     "cpy-cli": "^5.0.0",
     "eslint": "^8.57.0",
     "eslint-import-resolver-node": "^0.3.9",
-    "eslint-plugin-jest": "~28.8.0",
+    "eslint-plugin-jest": "~28.9.0",
     "eslint-plugin-jsdoc": "~48.11.0",
     "eslint-plugin-prefer-arrow": "~1.2.3",
     "eslint-plugin-unicorn": "^54.0.0",