[WIP] feat(showcase): add tanstack usage for server state

apps/showcase/db/contacts.json

@@ -0,0 +1,109 @@
+{
+  "contacts": [
+    {
+      "id": "1",
+      "firstName": "Winnie",
+      "lastName": "The Pooh"
+    },
+    {
+      "id": "2",
+      "firstName": "Christopher",
+      "lastName": "Robin"
+    },
+    {
+      "id": "3",
+      "firstName": "Eyeore",
+      "lastName": "The Donkey"
+    },
+    {
+      "id": "5",
+      "firstName": "Scrooge",
+      "lastName": "McDuck"
+    },
+    {
+      "id": "6",
+      "firstName": "Tinker",
+      "lastName": "Bell"
+    },
+    {
+      "id": "7",
+      "firstName": "Peter",
+      "lastName": "Pan"
+    },
+    {
+      "id": "8",
+      "firstName": "Capitan",
+      "lastName": "Hook"
+    },
+    {
+      "id": "9",
+      "firstName": "Snow",
+      "lastName": "White"
+    },
+    {
+      "id": "10",
+      "firstName": "Prince",
+      "lastName": "Charming"
+    },
+    {
+      "id": "11",
+      "firstName": "Fairy",
+      "lastName": "Godmother"
+    },
+    {
+      "id": "12",
+      "firstName": "Simba",
+      "lastName": "The Lion"
+    },
+    {
+      "id": "13",
+      "firstName": "Mufasa",
+      "lastName": "The Lion King"
+    },
+    {
+      "id": "14",
+      "firstName": "Mike",
+      "lastName": "Wazowski"
+    },
+    {
+      "id": "15",
+      "firstName": "James",
+      "lastName": "P. Sullivan"
+    },
+    {
+      "id": "16",
+      "firstName": "Randall",
+      "lastName": "Boggs"
+    },
+    {
+      "id": "17",
+      "firstName": "Buzz",
+      "lastName": "Lightyear"
+    },
+    {
+      "id": "18",
+      "firstName": "Launchpad",
+      "lastName": "McQuack"
+    },
+    {
+      "id": "19",
+      "firstName": "Minnie",
+      "lastName": "Mouse"
+    },
+    {
+      "id": "20",
+      "firstName": "Mickey",
+      "lastName": "Mouse"
+    },
+    {
+      "id": "21",
+      "firstName": "Donald",
+      "lastName": "Duck"
+    },
+    {
+      "id": "22",
+      "firstName": "Daisy",
+      "lastName": "Duck"
+    }
+  ]
+}

apps/showcase/package.json

@@ -9,6 +9,7 @@
     "nx": "nx",
     "start": "ng run showcase:run",
     "build": "yarn run generate:translations && ng build",
+    "db": "json-server --watch db/contacts.json",
     "watch": "ng compile --watch --configuration development",
     "test": "ng test",
     "start:no-translation": "ng serve",
@@ -61,6 +62,9 @@
     "@o3r/styling": "workspace:^",
     "@o3r/testing": "workspace:^",
     "@popperjs/core": "^2.11.5",
+    "@tanstack/angular-query-devtools-experimental": "^5.32.1",
+    "@tanstack/angular-query-experimental": "^5.32.1",
+    "@tanstack/query-persist-client-core": "^5.32.1",
     "ag-grid-angular": "~31.1.0",
     "ag-grid-community": "~31.1.0",
     "bootstrap": "5.3.3",
@@ -112,6 +116,7 @@
     "jest-environment-jsdom": "~29.7.0",
     "jest-junit": "~16.0.0",
     "jest-preset-angular": "~14.0.3",
+    "json-server": "^1.0.0-alpha.23",
     "jsonc-eslint-parser": "~2.4.0",
     "lighthouse": "9.6.8",
     "playwright-lighthouse": "2.2.2",

apps/showcase/project.json

@@ -135,8 +135,18 @@
         "^build"
       ]
     },
+    "serve-db": {
+      "executor": "nx:run-commands",
+      "options": {
+        "commands": ["yarn db", "yarn ng serve showcase"],
+        "parallel": true
+      }
+    },
     "serve-app": {
       "executor": "@angular-devkit/build-angular:dev-server",
+      "options": {
+        "proxyConfig": "./proxy.config.js"
+      },
       "configurations": {
         "production": {
           "buildTarget": "showcase:compile:production"

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

@@ -13,6 +13,7 @@ const appRoutes: Routes = [
   {path: 'run-app-locally', loadComponent: () => import('./run-app-locally/index').then((m) => m.RunAppLocallyComponent), title: 'Otter Showcase - Run App Locally'},
   {path: 'sdk', loadComponent: () => import('./sdk/index').then((m) => m.SdkComponent), title: 'Otter Showcase - SDK'},
   {path: 'placeholder', loadComponent: () => import('./placeholder/index').then((m) => m.PlaceholderComponent), title: 'Otter Showcase - Placeholder'},
+  {path: 'tanstack', loadComponent: () => import('./tanstack/index').then((m) => m.TanstackComponent)},
   {path: '**', redirectTo: '/home', pathMatch: 'full'}
 ];
 

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

@@ -39,6 +39,12 @@ export class AppComponent implements OnDestroy {
       links: [
         { url: '/sdk', label: 'Generator' }
       ]
+    },
+    {
+      label: 'Server side storage',
+      links: [
+        { url: '/tanstack', label: 'Tanstack' }
+      ]
     }
   ];
 

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

@@ -33,6 +33,13 @@ import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
 
+// Tanstack
+import {
+  provideAngularQuery,
+  QueryClient
+} from '@tanstack/angular-query-experimental';
+import { HttpClientModule } from '@angular/common/http';
+
 const runtimeChecks: Partial<RuntimeChecks> = {
   strictActionImmutability: false,
   strictActionSerializability: false,
@@ -87,6 +94,7 @@ export function registerCustomComponents(): Map<string, any> {
   ],
   imports: [
     BrowserModule,
+    HttpClientModule,
     BrowserAnimationsModule.withConfig({disableAnimations: prefersReducedMotion()}),
     EffectsModule.forRoot([]),
     StoreModule.forRoot({}, { runtimeChecks }),
@@ -133,7 +141,8 @@ export function registerCustomComponents(): Map<string, any> {
     {provide: OTTER_RULES_ENGINE_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}},
     {provide: OTTER_COMPONENTS_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}},
     {provide: OTTER_APPLICATION_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}},
-    {provide: OTTER_STYLING_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}}
+    {provide: OTTER_STYLING_DEVTOOLS_OPTIONS, useValue: {isActivatedOnBootstrap: true}},
+    provideAngularQuery(new QueryClient())
   ],
   bootstrap: [AppComponent]
 })

apps/showcase/src/app/tanstack/README.md

@@ -0,0 +1,3 @@
+# Tanstack usage
+
+the Tanstack query page

apps/showcase/src/app/tanstack/index.ts

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

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

@@ -0,0 +1,40 @@
+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,
+  IN_PAGE_NAV_PRES_DIRECTIVES,
+  InPageNavLink,
+  InPageNavLinkDirective,
+  InPageNavPresService,
+  TanstackPresComponent
+} from '../../components';
+
+@O3rComponent({ componentType: 'Page' })
+@Component({
+  selector: 'o3r-tanstack',
+  standalone: true,
+  imports: [
+    CopyTextPresComponent,
+    RouterLink,
+    TanstackPresComponent,
+    IN_PAGE_NAV_PRES_DIRECTIVES,
+    AsyncPipe
+  ],
+  templateUrl: './tanstack.template.html',
+  styleUrls: ['./tanstack.style.scss'],
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class TanstackComponent 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/tanstack/tanstack.spec.ts

@@ -0,0 +1,35 @@
+import { PetApi } from '@ama-sdk/showcase-sdk';
+import { PetApiFixture } from '@ama-sdk/showcase-sdk/fixtures';
+import { AsyncPipe } from '@angular/common';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
+
+import { TanstackComponent } from './tanstack.component';
+import '@angular/localize/init';
+
+describe('TanstackComponent', () => {
+  let component: TanstackComponent;
+  let fixture: ComponentFixture<TanstackComponent>;
+  const petApiFixture = new PetApiFixture();
+  petApiFixture.findPetsByStatus = petApiFixture.findPetsByStatus.mockResolvedValue([]);
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TanstackComponent,
+        RouterModule.forRoot([]),
+        AsyncPipe
+      ],
+      providers: [
+        {provide: PetApi, useValue: petApiFixture}
+      ]
+    });
+    fixture = TestBed.createComponent(TanstackComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,46 @@
+<h1>SDK Generator</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="tanstack-nav"
+      [links]="links$ | async"
+    >
+    </o3r-in-page-nav-pres>
+  </div>
+  <div class="order-2 order-lg-1 col-12 col-lg-10">
+    <h2 id="tanstack-description">Description</h2>
+    <div>
+      <p>This module provide generators to create an SDK that can be used to simplify the communication with an API.</p>
+      <p>It also generates the Typescript classes matching the models of the API.</p>
+    </div>
+
+    <h2 id="tanstack-example">Example</h2>
+    <div>
+      <p>
+        Let's try to use the API <a href="https://petstore3.swagger.io" target="_blank" rel="noopener">https://petstore3.swagger.io</a>
+        <br>
+        Fortunately, this API provides the specification as <a href="https://github.com/swagger-api/swagger-petstore/blob/master/src/main/resources/openapi.yaml" target="_blank" rel="noopener">Yaml file</a>
+        that we can use to generate an SDK.
+        <br>
+        Here, you can check the <a href="https://github.com/AmadeusITGroup/otter/blob/main/packages/@ama-sdk/showcase-sdk" target="_blank" rel="noopener">generated SDK</a>
+      </p>
+      <o3r-tanstack-pres></o3r-tanstack-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/sdk" target="_blank" rel="noopener">Source code</a>
+    </div>
+
+    <h2 id="rules-engine-install">How to use</h2>
+    <div>
+      <o3r-copy-text-pres [wrap]="true" language="bash" text="yarn create @ama-sdk typescript <project-name> [--spec-path=./path/to/spec.yaml]"></o3r-copy-text-pres>
+    </div>
+
+    <h2 id="rules-engine-references">References</h2>
+    <ul>
+      <li>
+        <a href="https://docs.otter.digitalforairlines.com/additional-documentation/api-sdk/sdk-models-hierarchy.html" target="_blank" rel="noopener">Documentation</a>
+      </li>
+    </ul>
+  </div>
+</div>

apps/showcase/src/components/showcase/index.ts

@@ -6,3 +6,4 @@ export * from './localization/index';
 export * from './placeholder/index';
 export * from './rules-engine/index';
 export * from './sdk/index';
+export * from './tanstack/index';