temp stuff

fpaul-1A · Nov 29, 2024 · 6a454bc · 6a454bc
1 parent 8d032a9
commit 6a454bc
Show file tree

Hide file tree

Showing 47 changed files with 274 additions and 240 deletions.
diff --git a/apps/showcase/package.json b/apps/showcase/package.json
@@ -54,6 +54,7 @@
     "@ngx-translate/core": "~15.0.0",
     "@nx/jest": "~19.5.0",
     "@o3r-training/showcase-sdk": "workspace:^",
+    "@o3r-training/training-sdk": "workspace:^",
     "@o3r-training/training-tools": "workspace:^",
     "@o3r/application": "workspace:^",
     "@o3r/components": "workspace:^",
@@ -77,11 +78,9 @@
     "angular-split": "^18.0.0",
     "bootstrap": "5.3.3",
     "clipboard": "^2.0.11",
-    "highlight.js": "^11.8.0",
     "intl-messageformat": "~10.7.0",
     "marked": "^12.0.0",
     "monaco-editor": "~0.50.0",
-    "ngx-highlightjs": "^12.0.0",
     "ngx-markdown": "^18.1.0",
     "ngx-monaco-editor-v2": "^18.0.0",
     "ngx-monaco-tree": "^18.1.0",

diff --git a/apps/showcase/src/app/app.module.ts b/apps/showcase/src/app/app.module.ts
@@ -26,7 +26,6 @@ import {
 import { ConsoleLogger, Logger, LOGGER_CLIENT_TOKEN, LoggerService } from '@o3r/logger';
 import { OTTER_RULES_ENGINE_DEVTOOLS_OPTIONS, RulesEngineRunnerModule } from '@o3r/rules-engine';
 import { OTTER_STYLING_DEVTOOLS_OPTIONS, StylingDevtoolsModule } from '@o3r/styling';
-import { HIGHLIGHT_OPTIONS } from 'ngx-highlightjs';
 import { CLIPBOARD_OPTIONS, provideMarkdown } from 'ngx-markdown';
 import { MonacoEditorModule } from 'ngx-monaco-editor-v2';
 import { ClipboardButtonPresComponent, DatePickerHebrewInputPresComponent, ScrollBackTopPresComponent, SidenavPresComponent } from '../components/utilities';
@@ -116,19 +115,6 @@ export function registerCustomComponents(): Map<string, any> {
   ],
   providers: [
     {provide: MESSAGE_FORMAT_CONFIG, useValue: {}},
-    {
-      provide: HIGHLIGHT_OPTIONS,
-      useValue: {
-        coreLibraryLoader: () => import('highlight.js/lib/core'),
-        languages: {
-          bash: () => import('highlight.js/lib/languages/bash'),
-          css: () => import('highlight.js/lib/languages/css'),
-          json: () => import('highlight.js/lib/languages/json'),
-          typescript: () => import('highlight.js/lib/languages/typescript'),
-          xml: () => import('highlight.js/lib/languages/xml')
-        }
-      }
-    },
     {provide: LOGGER_CLIENT_TOKEN, useValue: new ConsoleLogger()},
     {provide: PetApi, useFactory: petApiFactory, deps: [LoggerService]},
     {provide: OTTER_CONFIGURATION_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}},

diff --git a/apps/showcase/src/app/component-replacement/component-replacement.component.ts b/apps/showcase/src/app/component-replacement/component-replacement.component.ts
@@ -5,7 +5,7 @@ import { IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavPresComponent } from '../../compo
 import { AsyncPipe } from '@angular/common';
 import { ComponentReplacementPresComponent } from '../../components/showcase/component-replacement/component-replacement-pres.component';
 import { RouterModule } from '@angular/router';
-import { CopyTextPresComponent } from '../../components/utilities/copy-text/copy-text-pres.component';
+import { MarkdownModule } from 'ngx-markdown';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
@@ -15,7 +15,14 @@ import { CopyTextPresComponent } from '../../components/utilities/copy-text/copy
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [RouterModule, InPageNavPresComponent, AsyncPipe, IN_PAGE_NAV_PRES_DIRECTIVES, ComponentReplacementPresComponent, CopyTextPresComponent]
+  imports: [
+    RouterModule,
+    InPageNavPresComponent,
+    AsyncPipe,
+    IN_PAGE_NAV_PRES_DIRECTIVES,
+    ComponentReplacementPresComponent,
+    MarkdownModule
+  ]
 })
 export class ComponentReplacementComponent implements AfterViewInit {
   private readonly inPageNavPresService = inject(InPageNavPresService);

diff --git a/apps/showcase/src/app/component-replacement/component-replacement.spec.ts b/apps/showcase/src/app/component-replacement/component-replacement.spec.ts
@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ComponentReplacementComponent } from './component-replacement.component';
 import { RouterModule } from '@angular/router';
 import { AsyncPipe } from '@angular/common';
+import { provideMarkdown } from 'ngx-markdown';
 import { ComponentReplacementPresComponent } from '../../components/showcase/component-replacement/component-replacement-pres.component';
 
 describe('ComponentReplacementComponent', () => {
@@ -13,7 +14,8 @@ describe('ComponentReplacementComponent', () => {
     await TestBed.configureTestingModule({
       imports: [ComponentReplacementComponent,
         RouterModule.forRoot([]),
-        AsyncPipe]
+        AsyncPipe],
+      providers: [provideMarkdown()]
     }).overrideComponent(ComponentReplacementComponent, {
       remove: { imports: [ComponentReplacementPresComponent] }
     }).compileComponents();

diff --git a/apps/showcase/src/app/component-replacement/component-replacement.template.html b/apps/showcase/src/app/component-replacement/component-replacement.template.html
@@ -28,7 +28,11 @@ <h2 id="component-replacement-example">Example</h2>
     <h2 id="comp-replacement-install">How to install</h2>
     <p> To use the <i>component replacement mechanism</i> you'll need to install the <i>&#64;o3r/components</i> package.</p>
     <div>
-      <o3r-copy-text-pres [wrap]="true" language="bash" text="ng add @o3r/components"></o3r-copy-text-pres>
+      <markdown clipboard ngPreserveWhitespaces>
+        ```bash
+        ng add &#64;o3r/components
+        ```
+      </markdown>
     </div>
 
     <h2 id="comp-replacement-references">References</h2>

diff --git a/apps/showcase/src/app/configuration/configuration.component.ts b/apps/showcase/src/app/configuration/configuration.component.ts
@@ -3,7 +3,8 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, computed, inject, Qu
 import { RouterModule } from '@angular/router';
 import { ConfigurationBaseServiceModule } from '@o3r/configuration';
 import { O3rComponent } from '@o3r/core';
-import { ConfigurationPresComponent, CopyTextPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components/index';
+import { MarkdownModule } from 'ngx-markdown';
+import { ConfigurationPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components/index';
 import { ConfigurationPresConfig } from '../../components/showcase/configuration/configuration-pres.config';
 
 const CONFIG_OVERRIDE: ConfigurationPresConfig = {
@@ -24,9 +25,9 @@ const CONFIG_OVERRIDE: ConfigurationPresConfig = {
     RouterModule,
     ConfigurationPresComponent,
     ConfigurationBaseServiceModule,
-    CopyTextPresComponent,
     IN_PAGE_NAV_PRES_DIRECTIVES,
-    AsyncPipe
+    AsyncPipe,
+    MarkdownModule
   ],
   templateUrl: './configuration.template.html',
   styleUrls: ['./configuration.style.scss'],

diff --git a/apps/showcase/src/app/configuration/configuration.spec.ts b/apps/showcase/src/app/configuration/configuration.spec.ts
@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterModule } from '@angular/router';
 import { StoreModule } from '@ngrx/store';
 import { O3rElement } from '@o3r/testing/core';
+import { provideMarkdown } from 'ngx-markdown';
 import { ConfigurationComponent } from './configuration.component';
 import { ConfigurationFixtureComponent } from './configuration.fixture';
 let componentFixture: ConfigurationFixtureComponent;
@@ -18,7 +19,8 @@ describe('ConfigurationComponent', () => {
         StoreModule.forRoot(),
         RouterModule.forRoot([]),
         AsyncPipe
-      ]
+      ],
+      providers: [provideMarkdown()]
     });
     fixture = TestBed.createComponent(ConfigurationComponent);
     component = fixture.componentInstance;

diff --git a/apps/showcase/src/app/configuration/configuration.template.html b/apps/showcase/src/app/configuration/configuration.template.html
@@ -28,7 +28,7 @@ <h2 id="configuration-examples">Examples</h2>
       </p>
       <o3r-configuration-pres [config]="config()"></o3r-configuration-pres>
       <div class="row">
-        <o3r-copy-text-pres language="html" [text]="codeConfig()" class="col-12 col-md-8 col-lg-9"></o3r-copy-text-pres>
+        <markdown clipboard ngPreserveWhitespaces [data]="codeConfig() | language: 'html'" class="col-12 col-md-8 col-lg-9"></markdown>
         <div class="d-flex gap-2 align-self-start mt-md-2 pb-3 col-12 col-md-4 col-lg-3">
           <button type="button" class="btn btn-primary" id="btn-override-config" [disabled]="!!config()"
                   [class.disabled]="config()" (click)="toggleConfig()">Override</button>
@@ -43,19 +43,39 @@ <h2 id="configuration-examples">Examples</h2>
     </div>
     <h2 id="configuration-install">How to install</h2>
     <div>
-      <o3r-copy-text-pres [wrap]="true" language="bash" text="ng add @o3r/configuration"></o3r-copy-text-pres>
+      <markdown clipboard ngPreserveWhitespaces>
+        ```bash
+        ng add &#64;o3r/configuration
+        ```
+      </markdown>
     </div>
     <h2 id="configuration-component-generation">How to generate a configurable component</h2>
-    <o3r-copy-text-pres [wrap]="true" language="bash" text="ng g component ComponentName --use-otter-config"></o3r-copy-text-pres>
+    <markdown clipboard ngPreserveWhitespaces>
+      ```bash
+      ng g component ComponentName --use-otter-config
+      ```
+    </markdown>
     <h2 id="configuration-add-config-later">How to add configuration to a component</h2>
-    <o3r-copy-text-pres [wrap]="true" language="bash" text="ng g configuration-to-component --path='path/to/the/component/class/file'"></o3r-copy-text-pres>
+    <markdown clipboard ngPreserveWhitespaces>
+      ```bash
+      ng g configuration-to-component --path='path/to/the/component/class/file'
+      ```
+    </markdown>
     <h2 id="configuration-metadata">Metadata</h2>
     <div>
       <h3>How to extract</h3>
-      <o3r-copy-text-pres [wrap]="true" language="bash" text="ng run project-name:extract-components"></o3r-copy-text-pres>
+      <markdown clipboard ngPreserveWhitespaces>
+        ```bash
+        ng run project-name:extract-components
+        ```
+      </markdown>
       <p>It will extract components' configuration and generate the two following files: <code>component.config.metadata.json</code> and <code>component.class.metadata.json</code></p>
       <p>Check the list of options available by running:</p>
-      <o3r-copy-text-pres [wrap]="true" language="bash" text="ng run project-name:extract-components --help"></o3r-copy-text-pres>
+      <markdown clipboard ngPreserveWhitespaces>
+        ```bash
+        ng run project-name:extract-components --help
+        ```
+      </markdown>
     </div>
     <h2 id="configuration-references">References</h2>
     <div>

diff --git a/apps/showcase/src/app/design-token/design-token.component.ts b/apps/showcase/src/app/design-token/design-token.component.ts
@@ -2,18 +2,19 @@ import { AsyncPipe } from '@angular/common';
 import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, ViewChildren, ViewEncapsulation } from '@angular/core';
 import { RouterLink } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
-import { CopyTextPresComponent, DesignTokenPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components';
+import { MarkdownModule } from 'ngx-markdown';
+import { DesignTokenPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
   selector: 'o3r-design-token',
   standalone: true,
   imports: [
     AsyncPipe,
-    CopyTextPresComponent,
     DesignTokenPresComponent,
     RouterLink,
-    IN_PAGE_NAV_PRES_DIRECTIVES
+    IN_PAGE_NAV_PRES_DIRECTIVES,
+    MarkdownModule
   ],
   templateUrl: './design-token.template.html',
   styleUrl: './design-token.style.scss',

diff --git a/apps/showcase/src/app/design-token/design-token.spec.ts b/apps/showcase/src/app/design-token/design-token.spec.ts
@@ -1,5 +1,6 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterModule } from '@angular/router';
+import { provideMarkdown } from 'ngx-markdown';
 
 import { DesignTokenComponent } from './design-token.component';
 
@@ -12,7 +13,8 @@ describe('DesignTokenComponent', () => {
       imports: [
         DesignTokenComponent,
         RouterModule.forRoot([])
-      ]
+      ],
+      providers: [provideMarkdown()]
     })
       .compileComponents();
 

diff --git a/apps/showcase/src/app/design-token/design-token.template.html b/apps/showcase/src/app/design-token/design-token.template.html
@@ -37,11 +37,23 @@ <h2 id="design-token-examples">Examples</h2>
       <a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/src/components/showcase/design" target="_blank" rel="noopener">Source code</a>
     </div>
     <h2 id="design-token-install">How to install</h2>
-    <o3r-copy-text-pres [wrap]="true" language="bash" text="ng add @o3r/design"></o3r-copy-text-pres>
+    <markdown clipboard ngPreserveWhitespaces>
+      ```bash
+      ng add &#64;o3r/design
+      ```
+    </markdown>
     <h2 id="configuration-add-config-later">How to add design-tokens to a component</h2>
-    <o3r-copy-text-pres [wrap]="true" language="bash" text="ng g design-token-to-component --path='path/to/the/component/class/file'"></o3r-copy-text-pres>
-    <h2 id="design-token-install">How to extract design-tokens from Sass files</h2>
-    <o3r-copy-text-pres [wrap]="true" language="bash" text="ng g extract-token --component-file-patterns='path/to/the/components/**/*.scss'"></o3r-copy-text-pres>
+    <markdown clipboard ngPreserveWhitespaces>
+      ```bash
+      ng g design-token-to-component --path='path/to/the/component/class/file'
+      ```
+    </markdown>
+    <h2 id="design-token-extract">How to extract design-tokens from Sass files</h2>
+    <markdown clipboard ngPreserveWhitespaces>
+      ```bash
+      ng g extract-token --component-file-patterns='path/to/the/components/**/*.scss'
+      ```
+    </markdown>
     <h2 id="design-token-references">References</h2>
     <div>
       <ul>

diff --git a/apps/showcase/src/app/dynamic-content/dynamic-content.component.ts b/apps/showcase/src/app/dynamic-content/dynamic-content.component.ts
@@ -3,8 +3,8 @@ import { AfterViewInit, ChangeDetectionStrategy, Component, inject, QueryList, V
 import { RouterModule } from '@angular/router';
 import { O3rComponent } from '@o3r/core';
 import { DynamicContentModule } from '@o3r/dynamic-content';
-import { DynamicContentPresComponent } from '../../components/showcase/dynamic-content';
-import { CopyTextPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components/utilities';
+import { MarkdownModule } from 'ngx-markdown';
+import { DynamicContentPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPageNavLinkDirective, InPageNavPresService } from '../../components/index';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
@@ -15,8 +15,8 @@ import { CopyTextPresComponent, IN_PAGE_NAV_PRES_DIRECTIVES, InPageNavLink, InPa
     DynamicContentModule,
     IN_PAGE_NAV_PRES_DIRECTIVES,
     DynamicContentPresComponent,
-    CopyTextPresComponent,
-    AsyncPipe
+    AsyncPipe,
+    MarkdownModule
   ],
   templateUrl: './dynamic-content.template.html',
   styleUrls: ['./dynamic-content.style.scss'],

diff --git a/apps/showcase/src/app/dynamic-content/dynamic-content.spec.ts b/apps/showcase/src/app/dynamic-content/dynamic-content.spec.ts
@@ -2,6 +2,7 @@ import { AsyncPipe } from '@angular/common';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterModule } from '@angular/router';
 import { O3rElement } from '@o3r/testing/core';
+import { provideMarkdown } from 'ngx-markdown';
 import { DynamicContentComponent } from './dynamic-content.component';
 import { DynamicContentFixtureComponent } from './dynamic-content.fixture';
 let componentFixture: DynamicContentFixtureComponent;
@@ -16,7 +17,8 @@ describe('DynamicContentComponent', () => {
         DynamicContentComponent,
         RouterModule.forRoot([]),
         AsyncPipe
-      ]
+      ],
+      providers: [provideMarkdown()]
     });
     fixture = TestBed.createComponent(DynamicContentComponent);
     component = fixture.componentInstance;

diff --git a/apps/showcase/src/app/dynamic-content/dynamic-content.template.html b/apps/showcase/src/app/dynamic-content/dynamic-content.template.html
@@ -22,7 +22,7 @@ <h2 id="dynamic-content-example">Example</h2>
       </p>
       <o3r-dynamic-content-pres></o3r-dynamic-content-pres>
       <div class="row">
-        <o3r-copy-text-pres class="col-12 col-md-8 col-lg-9" language="html" [text]="codeDataDynamicContentPath"></o3r-copy-text-pres>
+        <markdown clipboard [data]="codeDataDynamicContentPath | language: 'html'" class="col-12 col-md-8 col-lg-9"></markdown>
         <div class="d-flex gap-2 align-self-start mt-md-2 pb-3 col-12 col-md-4 col-lg-3">
           <button type="button" class="btn btn-primary" id="btn-override-config" [disabled]="!!bodyDynamicContentPath"
                   [class.disabled]="bodyDynamicContentPath" (click)="setLocalStorage()">Override</button>
@@ -37,7 +37,11 @@ <h2 id="dynamic-content-example">Example</h2>
     </div>
     <h2 id="dynamic-content-install">How to install</h2>
     <div>
-      <o3r-copy-text-pres [wrap]="true" language="bash" text="ng add @o3r/dynamic-content"></o3r-copy-text-pres>
+      <markdown clipboard ngPreserveWhitespaces>
+        ```bash
+        ng add &#64;o3r/dynamic-content
+        ```
+      </markdown>
     </div>
     <h2 id="dynamic-content-references">References</h2>
     <div>

diff --git a/apps/showcase/src/app/home/home.component.ts b/apps/showcase/src/app/home/home.component.ts
@@ -1,13 +1,13 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
 import { O3rComponent } from '@o3r/core';
 import { DynamicContentModule } from '@o3r/dynamic-content';
-import { CopyTextPresComponent } from '../../components';
+import { MarkdownModule } from 'ngx-markdown';
 
 @O3rComponent({ componentType: 'Page' })
 @Component({
   selector: 'o3r-home',
   standalone: true,
-  imports: [DynamicContentModule, CopyTextPresComponent],
+  imports: [DynamicContentModule, MarkdownModule],
   templateUrl: './home.template.html',
   styleUrls: ['./home.style.scss'],
   encapsulation: ViewEncapsulation.None,

diff --git a/apps/showcase/src/app/home/home.spec.ts b/apps/showcase/src/app/home/home.spec.ts
@@ -1,4 +1,5 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { provideMarkdown } from 'ngx-markdown';
 import { HomeComponent } from './home.component';
 
 describe('HomeComponent', () => {
@@ -7,7 +8,8 @@ describe('HomeComponent', () => {
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [HomeComponent]
+      imports: [HomeComponent],
+      providers: [provideMarkdown()]
     });
     fixture = TestBed.createComponent(HomeComponent);
     component = fixture.componentInstance;