Cascading main into 10 next (AmadeusITGroup#1000)

## Proposed change
Cascading main into 10 next

.github/ISSUE_TEMPLATE/1-O3R-ISSUE-FORM.yaml

@@ -19,27 +19,33 @@ body:
         apis-manager,
         application,
         build-helpers,
+        chrome-devtools
         components,
         configuration,
         core,
+        create,
         dev-tools,
         dynamic-content,
         eslint-config-otter,
         eslint-plugin,
         extractors,
         forms,
         github-actions,
+        github-cascading-app,
         localization,
         logger,
         mobile,
         routing,
         rules-engine,
         schematics,
+        showcase,
+        store-sync,
         storybook,
         stylelint-plugin,
         styling,
         testing,
-        third-party
+        third-party,
+        workspace
       ]
     validations:
       required: true

.github/ISSUE_TEMPLATE/2-AMA-SDK-ISSUE-FORM.yaml

@@ -15,7 +15,9 @@ body:
       multiple: true
       options: [
         core,
+        create,
         schematics,
+        showcase-sdk
         swagger-builder
       ]
     validations:

.github/workflows/deploy-showcase.yml

@@ -0,0 +1,46 @@
+# Simple workflow for deploying static content to GitHub Pages
+name: Deploy static content to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    env:
+      NX_CLOUD_ACCESS_TOKEN: ${{ secrets.NX_CLOUD_ACCESS_TOKEN }}
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - uses: ./tools/github-actions/setup
+      - name: build
+        run: yarn nx build showcase
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v2
+        with:
+          path: './apps/showcase/dist'
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v2

.yarnrc.yml

@@ -5,6 +5,10 @@ packageExtensions:
     dependencies:
       bottleneck: "^2.19.5"
       body-parser: "^1.20.2"
+  "@design-factory/design-factory@*":
+    peerDependenciesMeta:
+      "@ng-select/ng-select":
+        optional: true
   "@nx/angular@^16.10.0":
     dependencies:
       "@angular-devkit/build-angular": ~16.2.0

apps/chrome-devtools/package.json

@@ -90,7 +90,7 @@
     "@o3r/localization": "workspace:^",
     "@o3r/rules-engine": "workspace:^",
     "@popperjs/core": "^2.11.5",
-    "bootstrap": "^5.3.1",
+    "bootstrap": "5.2.0",
     "bootstrap-icons": "^1.10.5",
     "rxjs": "^7.8.1",
     "tslib": "^2.5.3",

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

@@ -39,7 +39,7 @@ export class ComponentPanelPresComponent implements OnDestroy {
     rulesetHistoryService: RulesetHistoryService,
     private cd: ChangeDetectorRef
   ) {
-    const selectedComponentInfoMessage$ = connectionService.message$.pipe(filter(isSelectedComponentInfoMessage), shareReplay(1));
+    const selectedComponentInfoMessage$ = connectionService.message$.pipe(filter(isSelectedComponentInfoMessage), shareReplay({bufferSize: 1, refCount: true}));
     this.hasContainer$ = selectedComponentInfoMessage$.pipe(map((info) => !!info.container));
     this.subscription.add(
       selectedComponentInfoMessage$.subscribe((info) => {
@@ -52,7 +52,7 @@ export class ComponentPanelPresComponent implements OnDestroy {
       this.isLookingToContainer$
     ]).pipe(
       map(([info, isLookingToContainer]) => isLookingToContainer ? info.container : info),
-      shareReplay(1)
+      shareReplay({bufferSize: 1, refCount: true})
     );
 
     this.config$ = combineLatest([

apps/chrome-devtools/src/services/ruleset-history.service.ts

@@ -18,7 +18,7 @@ export class RulesetHistoryService {
    */
   public readonly rulesetExecutions$: Observable<RulesetExecutionDebug[]> = this.ruleEngineDebugEvents$.pipe(
     map(({events, rulesetMap}) => rulesetReportToHistory(events, rulesetMap)),
-    shareReplay(1)
+    shareReplay({bufferSize: 1, refCount: true})
   );
 
   /**

apps/showcase/package.json

@@ -33,7 +33,9 @@
     "@angular/platform-browser": "~16.2.0",
     "@angular/platform-browser-dynamic": "~16.2.0",
     "@angular/router": "~16.2.0",
+    "@design-factory/design-factory": "^15.2.2",
     "@formatjs/intl-numberformat": "~8.8.0",
+    "@ng-bootstrap/ng-bootstrap": "^15.1.1",
     "@ngrx/effects": "~16.3.0",
     "@ngrx/entity": "~16.3.0",
     "@ngrx/store": "~16.3.0",
@@ -51,7 +53,9 @@
     "@o3r/rules-engine": "workspace:^",
     "@o3r/testing": "workspace:^",
     "@popperjs/core": "^2.11.5",
-    "bootstrap": "^5.3.1",
+    "ag-grid-angular": "~29.3.5",
+    "ag-grid-community": "~29.3.5",
+    "bootstrap": "5.2.0",
     "bootstrap-icons": "^1.10.5",
     "highlight.js": "^11.8.0",
     "intl-messageformat": "~10.5.1",

apps/showcase/project.json

@@ -85,7 +85,7 @@
             {
               "type": "initial",
               "maximumWarning": "500kb",
-              "maximumError": "1.5mb"
+              "maximumError": "2mb"
             },
             {
               "type": "anyComponentStyle",
@@ -190,7 +190,8 @@
       "inputs": [
         "{projectRoot}/src/assets/locales",
         "{projectRoot}/src/assets/locales/*",
-        "{projectRoot}/src/components/**/i18n"
+        "{projectRoot}/src/components/**/i18n",
+        "{projectRoot}/src/components/**/*.localization.json"
       ],
       "outputs": [
         "{options.outputPath}"

apps/showcase/src/app/app-routing.module.ts

@@ -15,7 +15,7 @@ const appRoutes: Routes = [
 
 @NgModule({
   imports: [
-    RouterModule.forRoot(appRoutes, {scrollPositionRestoration: 'enabled'})
+    RouterModule.forRoot(appRoutes, {scrollPositionRestoration: 'enabled', useHash: true})
   ],
   exports: [RouterModule]
 })

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

@@ -4,7 +4,8 @@
     <div class="header-icon">
       <img src="assets/otter-sticker.svg" width="48" height="48" alt="Otter logo" />
     </div>
-    Otter Showcase
+    <div class="d-block d-sm-none">Otter</div>
+    <div class="d-none d-sm-block">Otter Showcase</div>
   </div>
 </header>
 <div class="container">
@@ -20,7 +21,7 @@
     </div>
   </div>
 </div>
-<footer>
+<footer class="bg-body-tertiary">
   <div class="container">
     <div class="row">
       <div class="col-12 col-md-8">

apps/showcase/src/app/app.component.scss

@@ -30,7 +30,7 @@ header {
 .left-nav {
   position: sticky;
   top: 4rem;
-  padding-top: 3rem;
+  padding-top: 2rem;
   max-height: calc(100vh - 4rem);
   overflow-y: auto;
   flex-grow: 1;
@@ -45,7 +45,6 @@ footer {
   align-items: center;
   height: 12rem;
   width: 100%;
-  background: var(--bs-tertiary-bg);
   color: var(--bs-body-color);
   margin-top: 2rem;
 }

apps/showcase/src/app/app.component.ts

@@ -50,7 +50,7 @@ export class AppComponent implements OnDestroy {
     );
     this.activeUrl$ = onNavigationEnd$.pipe(
       map((event) => event.urlAfterRedirects),
-      shareReplay(1)
+      shareReplay({bufferSize: 1, refCount: true})
     );
     this.subscriptions.add(onNavigationEnd$.subscribe(() => {
       if (this.offcanvasRef) {

apps/showcase/src/app/home/home.component.ts

@@ -2,12 +2,13 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
 import { CommonModule } from '@angular/common';
 import { O3rComponent } from '@o3r/core';
 import { DynamicContentModule } from '@o3r/dynamic-content';
+import { CopyTextPresComponent } from '../../components';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
   selector: 'o3r-home',
   standalone: true,
-  imports: [CommonModule, DynamicContentModule],
+  imports: [CommonModule, DynamicContentModule, CopyTextPresComponent],
   templateUrl: './home.template.html',
   styleUrls: ['./home.style.scss'],
   encapsulation: ViewEncapsulation.None,

apps/showcase/src/app/home/home.style.scss

@@ -1,3 +1,10 @@
 o3r-home {
+  .otter-logo {
+    aspect-ratio: 1 / 1;
+    max-width: 100%;
+  }
 
+  .get-start-section {
+    margin-top: 10em;
+  }
 }

apps/showcase/src/app/home/home.template.html

@@ -1,6 +1,41 @@
 <div class="d-flex flex-column gap-2 align-items-center justify-center flex-fill">
-  <h1>Otter</h1>
-  <p>This is a showcase application.</p>
-  <p>You can find examples of Otter features with some explanations.</p>
-  <img width="500" height="500" [src]="'otter-a.png' | dynamicContent">
+  <img width="350" [src]="'otter-a.svg' | dynamicContent" class="otter-logo" alt="Otter">
+  <h1 class="h1 display-1 text-center mt-0 mb-5"><b>Easily build a customizable Angular based application</b></h1>
+  <h2 class="h4 mt-5 pt-5 text-secondary">
+    The Otter project is a highly modular framework whose goal is to provide a common platform to <b>accelerate</b> and <b>facilitate</b> the development of <span class="text-danger">Angular</span> based Web Applications.<br />
+    The framework offers the capability to customize the application using <b>Content Management System</b>.
+  </h2>
 </div>
+
+<div class="get-start-section d-flex flex-column gap-2 align-items-center justify-center flex-fill">
+  <h3 class="display-3 text-center mt-0 mb-5">Get started with Otter</h3>
+  <p class="text-secondary">
+    To start a new project you just need to follow the <a target="_blank" href="https://github.com/AmadeusITGroup/otter/blob/main/docs/core/START_NEW_APPLICATION.md">new application guide</a> or use the following command lines:
+  </p>
+
+  <div class="section container mt-3">
+    <div class="row g-3 g-md-5 mb-5 pb-5 justify-content-center">
+      <div class="col-lg-6 py-lg-5 pe-lg-5 pt-lg-5">
+        <h3>Setup the project ...</h3>
+        <p class="mt-4 text-secondary">
+          Create a new project <i>(npm)</i>
+          <o3r-copy-text-pres language="bash" text="npm create @o3r <your-project>"></o3r-copy-text-pres>
+          or <i>(yarn)</i>
+          <o3r-copy-text-pres language="bash" text="yarn create @o3r <your-project>"></o3r-copy-text-pres>
+        </p>
+      </div>
+      <div class="col-lg-6 py-lg-5 pe-lg-5 ps-lg-5 border-lg-start">
+        <h3>... and start to create</h3>
+        <p class="mt-4 text-secondary">
+          A new application:
+          <o3r-copy-text-pres language="bash" text="ng g application <app-name>"></o3r-copy-text-pres>
+          A new SDK:
+          <o3r-copy-text-pres language="bash" text="ng g sdk <sdk-name>"></o3r-copy-text-pres>
+          Or a new library:
+          <o3r-copy-text-pres language="bash" text="ng g library <lib-name>"></o3r-copy-text-pres>
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+

apps/showcase/src/assets/rules/rulesets.json

@@ -102,8 +102,8 @@
               {
                 "elementType": "ACTION",
                 "actionType": "UPDATE_ASSET",
-                "asset": "otter.png",
-                "value": "otter-summer.png"
+                "asset": "otter.svg",
+                "value": "otter-summer.svg"
               }
             ],
             "failureElements": []

apps/showcase/src/components/showcase/basic/basic-pres.style.scss

@@ -1,11 +1,18 @@
 @mixin style {
-  h2 {
+  .bubble {
+    border-radius: var(--bs-border-radius-xl);
+
     div {
-      transform: translate(-50%, -50%) rotate(-45deg) ;
-      width: 20px;
-      height: 20px;
+      transform: translate(calc(-50% - var(--bs-border-width)/2), -50%) rotate(-45deg) ;
+      width: 1em;
+      height: 1em;
     }
   }
+
+  .card img {
+    aspect-ratio: 1 / 1;
+    width: 100%;
+  }
 }
 
 o3r-basic-pres {

apps/showcase/src/components/showcase/basic/basic-pres.template.html

@@ -1,7 +1,7 @@
 <div class="card my-3 overflow-hidden">
   <div class="row g-0">
     <div class="col-4 bg-body-tertiary d-flex align-items-center justify-center">
-      <img src="assets/otter.png" class="img-fluid rounded-start" aria-hidden="true">
+      <img src="assets/otter.svg" class="img-fluid rounded-start" aria-hidden="true">
     </div>
     <div class="col-8 container p-3">
       <div class="card-bod d-flex flex-column h-100">

apps/showcase/src/components/showcase/configuration/configuration-pres.config.ts

@@ -5,6 +5,7 @@ import type {Configuration, NestedConfiguration} from '@o3r/core';
 export interface DestinationConfiguration extends NestedConfiguration {
   /**
    * Name of the destination's city
+   * @o3rRequired
    */
   cityName: string;
   /**

apps/showcase/src/components/showcase/configuration/configuration-pres.template.html

@@ -1,12 +1,12 @@
 <div class="card my-3 overflow-hidden">
   <div class="row g-0">
     <div class="col-4 bg-body-tertiary d-flex align-items-center justify-center">
-      <img src="assets/otter.png" class="img-fluid rounded-start" aria-hidden="true">
+      <img src="assets/otter.svg" class="img-fluid rounded-start" aria-hidden="true">
     </div>
     <div class="col-8 container p-3">
       <div class="card-bod d-flex flex-column h-100">
         <div class="row card-title flex-fill d-flex align-items-center m-auto">
-          <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 rounded-pill py-3 px-5 position-relative">
+          <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative">
             Welcome!
             <div aria-hidden="true" class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
           </h2>

apps/showcase/src/components/showcase/dynamic-content/dynamic-content-pres.template.html

@@ -1,12 +1,12 @@
 <div class="card my-3 overflow-hidden">
   <div class="row g-0">
     <div class="col-4 bg-body-tertiary d-flex align-items-center justify-center">
-      <img [src]="'otter-dynamic.png' | dynamicContent" class="img-fluid rounded-start" aria-hidden="true">
+      <img [src]="'otter-dynamic.svg' | dynamicContent" class="img-fluid rounded-start" aria-hidden="true">
     </div>
     <div class="col-8 container p-3">
       <div class="card-bod d-flex flex-column h-100">
         <div class="row card-title flex-fill d-flex align-items-center m-auto">
-          <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 rounded-pill py-3 px-5 position-relative">
+          <h2 class="bg-body-tertiary text-secondary border border-light-subtle border-3 bubble py-3 px-5 position-relative">
             Welcome!
             <div aria-hidden="true" class="bg-body-tertiary position-absolute start-0 top-50 border border-light-subtle border-3 border-end-0 border-bottom-0"></div>
           </h2>