feat: add design token page on showcase app

apps/showcase/e2e-playwright/sanity/visual-sanity.e2e.ts

@@ -48,6 +48,12 @@ test.describe.serial('Sanity test', () => {
       await expect(page).toHaveScreenshot([browserName, 'component-replacement.png'], {fullPage: true, mask: [page.locator('.visual-testing-ignore')]});
     });
 
+    await test.step('design-token', async () => {
+      await appFixture.navigateToDesignToken();
+      await page.waitForURL('**/design-token');
+      await expect(page).toHaveScreenshot([browserName, 'design-token.png'], {fullPage: true, mask: [page.locator('.visual-testing-ignore')]});
+    });
+
     await test.step('sdk-generator', async () => {
       const waitForPetStore = page.waitForResponse('**/petstore3.swagger.io/**');
       await appFixture.navigateToSDKGenerator();

apps/showcase/project.json

@@ -33,6 +33,8 @@
         "extract-components",
         "generate-translations",
         "generate-theme",
+        "generate-dark-theme",
+        "generate-horizon-theme",
         "compile"
       ]
     },
@@ -65,7 +67,19 @@
             "output": "/localizations"
           }
         ],
-        "styles": ["apps/showcase/src/styles.scss"],
+        "styles": [
+          "apps/showcase/src/styles.scss",
+          {
+            "inject": false,
+            "input": "apps/showcase/src/style/dark-theme/dark-theme.scss",
+            "bundleName": "dark-theme"
+          },
+          {
+            "inject": false,
+            "input": "apps/showcase/src/style/horizon-theme/horizon-theme.scss",
+            "bundleName": "horizon-theme"
+          }
+        ],
         "scripts": []
       },
       "configurations": {
@@ -95,7 +109,9 @@
       "dependsOn": [
         "^build",
         "generate-translations",
-        "generate-theme"
+        "generate-theme",
+        "generate-dark-theme",
+        "generate-horizon-theme"
       ]
     },
     "serve": {
@@ -104,7 +120,9 @@
         "targets": [
           "showcase:generate-translations:development",
           "showcase:serve-app",
-          "showcase:generate-theme:watch"
+          "showcase:generate-theme:watch",
+          "showcase:generate-dark-theme:watch",
+          "showcase:generate-horizon-theme:watch"
         ]
       },
       "dependsOn": [
@@ -175,7 +193,7 @@
         "{projectRoot}/src/**/*.scss"
       ],
       "inputs": [
-        "{projectRoot}/src/style/design-token.json"
+        "{projectRoot}/src/style/design-token.*.json"
       ],
       "options": {
         "metadataOutput": "apps/showcase/styling.metadata.json",
@@ -192,6 +210,62 @@
         "^build-builders"
       ]
     },
+    "generate-dark-theme": {
+      "executor": "@o3r/design:generate-css",
+      "outputs": [
+        "{options.defaultStyleFile}",
+        "{options.metadataOutput}",
+        "{projectRoot}/src/**/*.scss"
+      ],
+      "inputs": [
+        "{projectRoot}/src/style/dark-theme/dark-theme.*.json",
+        "{projectRoot}/src/style/design-token.app.json"
+      ],
+      "options": {
+        "defaultStyleFile": "apps/showcase/src/style/dark-theme/dark-theme.scss",
+        "designTokenFilePatterns": [
+          "apps/showcase/src/style/design-token.app.json",
+          "apps/showcase/src/style/dark-theme/dark-theme.*.json"
+        ],
+        "rootPath": "apps/showcase/src"
+      },
+      "configurations": {
+        "watch": {
+          "watch": true
+        }
+      },
+      "dependsOn": [
+        "^build-builders"
+      ]
+    },
+    "generate-horizon-theme": {
+      "executor": "@o3r/design:generate-css",
+      "outputs": [
+        "{options.defaultStyleFile}",
+        "{options.metadataOutput}",
+        "{projectRoot}/src/**/*.scss"
+      ],
+      "inputs": [
+        "{projectRoot}/src/style/horizon-theme/horizon-theme.*.json",
+        "{projectRoot}/src/style/design-token.app.json"
+      ],
+      "options": {
+        "defaultStyleFile": "apps/showcase/src/style/horizon-theme/horizon-theme.scss",
+        "designTokenFilePatterns": [
+          "apps/showcase/src/style/design-token.app.json",
+          "apps/showcase/src/style/horizon-theme/horizon-theme.*.json"
+        ],
+        "rootPath": "apps/showcase/src"
+      },
+      "configurations": {
+        "watch": {
+          "watch": true
+        }
+      },
+      "dependsOn": [
+        "^build-builders"
+      ]
+    },
     "test-e2e": {
       "executor": "nx:run-script",
       "options": {

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

@@ -5,6 +5,7 @@ const appRoutes: Routes = [
   {path: '', redirectTo: '/home', pathMatch: 'full'},
   {path: 'configuration', loadComponent: () => import('./configuration/index').then((m) => m.ConfigurationComponent)},
   {path: 'component-replacement', loadComponent: () => import('./component-replacement/index').then((m) => m.ComponentReplacementComponent)},
+  {path: 'design-token', loadComponent: () => import('./design-token/index').then((m) => m.DesignTokenComponent)},
   {path: 'localization', loadComponent: () => import('./localization/index').then((m) => m.LocalizationComponent)},
   {path: 'dynamic-content', loadComponent: () => import('./dynamic-content/index').then((m) => m.DynamicContentComponent)},
   {path: 'rules-engine', loadComponent: () => import('./rules-engine/index').then((m) => m.RulesEngineComponent)},

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

@@ -32,7 +32,8 @@ export class AppComponent implements OnDestroy {
         { url: '/localization', label: 'Localization' },
         { url: '/dynamic-content', label: 'Dynamic content' },
         { url: '/rules-engine', label: 'Rules engine' },
-        { url: '/component-replacement', label: 'Component Replacement' }
+        { url: '/component-replacement', label: 'Component Replacement' },
+        { url: '/design-token', label: 'Design Tokens' }
       ]
     },
     {

apps/showcase/src/app/app.fixture.ts

@@ -23,6 +23,8 @@ export interface AppFixture extends ComponentFixtureProfile {
   navigateToRulesEngine(): Promise<void>;
   /** Go to Component-replacement page */
   navigateToComponentReplacement(): Promise<void>;
+  /** Go to Design-token page */
+  navigateToDesignToken(): Promise<void>;
   /** Go to SDK-generator page */
   navigateToSDKGenerator(): Promise<void>;
 }
@@ -69,8 +71,13 @@ export class AppFixtureComponent extends O3rComponentFixture implements AppFixtu
   }
 
   /** @inheritDoc */
-  public async navigateToSDKGenerator() {
+  public async navigateToDesignToken() {
     await (await this.getSideNav()).clickOnLink(7);
   }
 
+  /** @inheritDoc */
+  public async navigateToSDKGenerator() {
+    await (await this.getSideNav()).clickOnLink(8);
+  }
+
 }

apps/showcase/src/app/design-token/README.md

@@ -0,0 +1,3 @@
+# DesignTokenComponent
+
+the design-token page

apps/showcase/src/app/design-token/design-token.component.ts

@@ -0,0 +1,36 @@
+import { AsyncPipe } from '@angular/common';
+import { AfterViewInit, ChangeDetectionStrategy, Component, 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';
+
+@O3rComponent({ componentType: 'Page' })
+@Component({
+  selector: 'o3r-design-token',
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    CopyTextPresComponent,
+    DesignTokenPresComponent,
+    RouterLink,
+    IN_PAGE_NAV_PRES_DIRECTIVES
+  ],
+  templateUrl: './design-token.template.html',
+  styleUrl: './design-token.style.scss',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DesignTokenComponent implements AfterViewInit {
+  @ViewChildren(InPageNavLinkDirective)
+  private readonly inPageNavLinkDirectives!: QueryList<InPageNavLink>;
+  public links$ = this.inPageNavPresService.links$;
+
+  constructor(
+    private readonly inPageNavPresService: InPageNavPresService
+  ) {
+  }
+
+  public ngAfterViewInit() {
+    this.inPageNavPresService.initialize(this.inPageNavLinkDirectives);
+  }
+}

apps/showcase/src/app/design-token/design-token.spec.ts

@@ -0,0 +1,27 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+
+import { DesignTokenComponent } from './design-token.component';
+
+describe('DesignTokenComponent', () => {
+  let component: DesignTokenComponent;
+  let fixture: ComponentFixture<DesignTokenComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        DesignTokenComponent,
+        RouterModule.forRoot([])
+      ]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(DesignTokenComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/showcase/src/app/design-token/design-token.template.html

@@ -0,0 +1,54 @@
+<h1>Design Tokens</h1>
+<div class="row">
+  <div class="right-nav order-1 order-lg-2 col-12 col-lg-2 sticky-lg-top pt-5 pt-lg-0">
+    <o3r-in-page-nav-pres
+      id="design-token-nav"
+      [links]="links$ | async"
+    >
+    </o3r-in-page-nav-pres>
+  </div>
+  <div class="order-2 order-lg-1 col-12 col-lg-10">
+    <h2 id="design-token-description">Description</h2>
+    <div>
+      <p>
+        This module provides tools to generate css theme using <a href="https://design-tokens.github.io/community-group/format/" target="_blank" rel="noopener">design-tokens</a>.
+        <br/>
+        It can be used to manage the creation of your theme in a tool like <a href="https://www.figma.com/" target="_blank" rel="noopener">Figma</a> and directly integrate it inside your app.
+      </p>
+    </div>
+    <h2 id="design-token-examples">Examples</h2>
+    <div>
+      <p>
+        In the following example, we created 3 themes in Figma (Default, Dark and Horizon).
+      </p>
+        Then, we exported the JSON files inside the app :
+      <ul>
+        <li><a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/src/style/design-token.figma.json" target="_blank" rel="noopener">design-token.figma.json</a></li>
+        <li><a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/src/style/dark-theme/dark-theme.figma.json" target="_blank" rel="noopener">dark-theme.figma.json</a></li>
+        <li><a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/src/style/horizon-theme/horizon-theme.figma.json" target="_blank" rel="noopener">horizon-theme.figma.json</a></li>
+      </ul>
+      <p>
+        Finally, we included the <b>&#64;o3r/design:generate-css</b> builder in the <a href="https://github.com/AmadeusITGroup/otter/blob/main/apps/showcase/project.json" target="_blank" rel="noopener">build process</a> to generate the css based on these files.
+      </p>
+      <o3r-design-token-pres></o3r-design-token-pres>
+      <p>
+        Do not hesitate to run the application locally, if not installed yet, follow the <a routerLink="/run-app-locally">instructions</a>.
+      </p>
+      <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>
+    <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>
+    <h2 id="design-token-references">References</h2>
+    <div>
+      <ul>
+        <li>
+          <a href="https://docs.otter.digitalforairlines.com/additional-documentation/design/overview.html" target="_blank" rel="noopener">Documentation</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>

apps/showcase/src/app/design-token/index.ts

@@ -0,0 +1 @@
+export * from './design-token.component';

apps/showcase/src/components/showcase/design-token/README.md

@@ -0,0 +1,3 @@
+# DesignTokenPres
+
+

apps/showcase/src/components/showcase/design-token/design-token-pres.component.ts

@@ -0,0 +1,53 @@
+import { AsyncPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, DestroyRef, inject, ViewEncapsulation } from '@angular/core';
+import { FormBuilder, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { O3rComponent } from '@o3r/core';
+import { StyleLazyLoader, StyleLazyLoaderModule } from '@o3r/dynamic-content';
+import { DatePickerInputPresComponent } from '../../utilities';
+
+@O3rComponent({ componentType: 'Component' })
+@Component({
+  selector: 'o3r-design-token-pres',
+  standalone: true,
+  imports: [
+    AsyncPipe,
+    DatePickerInputPresComponent,
+    FormsModule,
+    ReactiveFormsModule,
+    StyleLazyLoaderModule
+  ],
+  templateUrl: './design-token-pres.template.html',
+  styleUrl: './design-token-pres.style.scss',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DesignTokenPresComponent {
+
+  /**
+   * Form group
+   */
+  public form: FormGroup<{ theme: FormControl<string | null> }>;
+
+  constructor(fb: FormBuilder, styleLoader: StyleLazyLoader) {
+    this.form = fb.group({
+      theme: new FormControl<string | null>('')
+    });
+
+    let style: HTMLElement | null = null;
+    const cleanUpStyle = () => {
+      if (style?.parentNode) {
+        style.parentNode.removeChild(style);
+        style = null;
+      }
+    };
+    this.form.valueChanges.subscribe((value) => {
+      cleanUpStyle();
+      if (value.theme === 'dark') {
+        style = styleLoader.loadStyleFromURL({href: 'dark-theme.css'});
+      } else if (value.theme === 'horizon') {
+        style = styleLoader.loadStyleFromURL({href: 'horizon-theme.css'});
+      }
+    });
+    inject(DestroyRef).onDestroy(cleanUpStyle);
+  }
+}

apps/showcase/src/components/showcase/design-token/design-token-pres.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DesignTokenPresComponent } from './design-token-pres.component';
+
+describe('DesignTokenPresComponent', () => {
+  let component: DesignTokenPresComponent;
+  let fixture: ComponentFixture<DesignTokenPresComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DesignTokenPresComponent]
+    })
+      .compileComponents();
+
+    fixture = TestBed.createComponent(DesignTokenPresComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

apps/showcase/src/components/showcase/design-token/design-token-pres.style.scss

@@ -0,0 +1,3 @@
+o3r-design-token-pres {
+	// Your component custom SCSS
+}