@supersoniks/concorde 5.1.0 → 5.1.2

package/src/docs/example/decorators-demo-post.ts

@@ -2,143 +2,102 @@ import { html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { post, publish, type ApiResult } from "@supersoniks/concorde/decorators";
 import type { APIConfiguration } from "@supersoniks/concorde/core/utils/api";
-import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
-import { Endpoint } from "@supersoniks/concorde/core/utils/endpoint";
-import {
-  dp,
-  set,
-} from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
+import { Endpoint } from "@supersoniks/concorde/endpoint";
+import { dp, set } from "@supersoniks/concorde/core/utils/PublisherProxy";
 import { DOCS_MOCK_REQRES_SERVICE } from "../mock-api/urls";
 import { tailwind } from "../tailwind";
 import "./decorators-demo-init";
 
-type RegisterResult = {
-  id?: number;
-  token?: string;
-  email?: string;
-};
-
-type RegisterRequest = {
-  email: string;
-  password: string;
-};
+type SignUpResult = { id?: number; token?: string; email?: string };
+type SignUpRequest = { email: string; password: string };
+type CheckInResult = { ok?: boolean; sessionId?: string; echo?: { seat?: string } };
+type CheckInRequest = { seat: string };
 
-const registerPostEndpoint = new Endpoint<RegisterResult>("api/register");
+/** Mock route: POST /docs-mock-api/api/register (email + password required). */
+const signUpEndpoint = new Endpoint<SignUpResult>("api/register");
 
-type SessionSyncResult = {
-  ok?: boolean;
-  sessionId?: string;
-  serverTime?: number;
-  echo?: { note?: string };
-};
-
-type SessionSyncRequest = {
-  note: string;
-};
+/** Mock route: POST /docs-mock-api/api/sessions/:id/sync (echoes the body). */
+const checkInEndpoint = new Endpoint<CheckInResult, { flight: string }>(
+  "api/sessions/${flight}/sync",
+);
 
-const sessionSyncPostEndpoint = new Endpoint<
-  SessionSyncResult,
-  { sessionId: string }
->("api/sessions/${sessionId}/sync");
+export const docsDemoReqresApiConfigurationKey =
+  new DataProviderKey<APIConfiguration>("docsDemoReqresApiConfiguration");
 
-const reqresApiConfiguration: APIConfiguration = {
+set(docsDemoReqresApiConfigurationKey, {
   serviceURL: DOCS_MOCK_REQRES_SERVICE,
   token: null,
   userName: null,
   password: null,
   authToken: null,
   tokenProvider: null,
-};
-
-export const docsDemoReqresApiConfigurationKey =
-  new DataProviderKey<APIConfiguration>("docsDemoReqresApiConfiguration");
+});
 
-set(docsDemoReqresApiConfigurationKey, reqresApiConfiguration);
+const ADA: SignUpRequest = {
+  email: "ada.lindqvist@example.com",
+  password: "concorde",
+};
+const LEO: SignUpRequest = {
+  email: "leo.marchand@example.com",
+  password: "mach2",
+};
 
-export const docsDemoPostRequestKey = new DataProviderKey<RegisterRequest>(
+export const docsDemoPostRequestKey = new DataProviderKey<SignUpRequest>(
   "docsDemoPostRequest",
 );
-/** Clé body distincte — la page doc monte les deux démos live en même temps. */
-export const docsDemoPostPublishRequestKey = new DataProviderKey<RegisterRequest>(
+/** Separate body: several live demos can be mounted on the same page. */
+export const docsDemoPostPublishRequestKey = new DataProviderKey<SignUpRequest>(
   "docsDemoPostPublishRequest",
 );
-export const docsDemoPostTriggerKey = new DataProviderKey<number>(
-  "docsDemoPostTrigger",
-);
-export const docsDemoPostMethodRequestKey = new DataProviderKey<RegisterRequest>(
+export const docsDemoPostMethodRequestKey = new DataProviderKey<SignUpRequest>(
   "docsDemoPostMethodRequest",
 );
 export const docsDemoPostMethodTriggerKey = new DataProviderKey<number>(
   "docsDemoPostMethodTrigger",
 );
-export const docsDemoPostDynamicRequestKey = new DataProviderKey<SessionSyncRequest>(
+export const docsDemoPostDynamicRequestKey = new DataProviderKey<CheckInRequest>(
   "docsDemoPostDynamicRequest",
 );
 
+const crewSignUp = post(
+  signUpEndpoint,
+  docsDemoPostRequestKey,
+  docsDemoReqresApiConfigurationKey,
+);
+
 @customElement("demo-api-post")
 export class DemoApiPost extends LitElement {
   static styles = [tailwind];
 
-  @post(
-    registerPostEndpoint,
-    docsDemoPostRequestKey,
-    docsDemoReqresApiConfigurationKey,
-    { triggerKey: docsDemoPostTriggerKey },
-  )
+  @crewSignUp
   @state()
-  payload?: ApiResult<RegisterResult> | null;
+  payload?: ApiResult<SignUpResult> | null;
 
   connectedCallback() {
     super.connectedCallback();
-    set(docsDemoPostRequestKey, {
-      email: "demo@concorde.local",
-      password: "demo-password",
-    });
-    set(docsDemoPostTriggerKey, 0);
-  }
-
-  private send() {
-    set(docsDemoPostRequestKey, {
-      email: "demo@concorde.local",
-      password: "demo-password",
-    });
-  }
-
-  private resendSameBody() {
-    dp(docsDemoPostTriggerKey).invalidate();
+    set(docsDemoPostRequestKey, ADA);
   }
 
   render() {
     const result = this.payload?.result;
-    const status = this.payload?.response?.status;
     return html`
-      <div class="space-y-4">
-        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          <code>@post</code> vers le mock
-          <code>POST /docs-mock-api/api/register</code> — body lu depuis
-          <code>docsDemoPostRequest</code>.
-        </p>
+      <div class="space-y-3">
         <div class="flex flex-wrap gap-2">
-          <sonic-button @click=${this.send}>Set body &amp; POST</sonic-button>
-          <sonic-button variant="secondary" @click=${this.resendSameBody}>
-            invalidate trigger (re-POST)
+          <sonic-button @click=${() => set(docsDemoPostRequestKey, ADA)}>
+            Sign up Ada Lindqvist
+          </sonic-button>
+          <sonic-button @click=${() => set(docsDemoPostRequestKey, LEO)}>
+            Sign up Captain Leo Marchand
+          </sonic-button>
+          <sonic-button variant="outline" @click=${() => crewSignUp.send(this)}>
+            Send again
           </sonic-button>
         </div>
-        <div
-          class="rounded border border-neutral-200 dark:border-neutral-700 p-3 text-sm space-y-1"
-        >
-          <p>HTTP status: <strong>${status ?? "—"}</strong></p>
-          ${result?.id != null
-            ? html`<p>id: <span class="font-mono">${result.id}</span></p>`
-            : nothing}
-          ${result?.email
-            ? html`<p>email: <span class="font-mono">${result.email}</span></p>`
-            : nothing}
-          ${result?.token
-            ? html`<p>
-                token:
-                <span class="font-mono break-all">${result.token}</span>
-              </p>`
+        <div class="rounded border p-3 text-sm">
+          <p>HTTP status: <strong>${this.payload?.response?.status ?? "—"}</strong></p>
+          ${result
+            ? html`<p>Crew member #${result.id}: <strong>${result.email}</strong></p>`
             : nothing}
         </div>
       </div>
@@ -151,60 +110,32 @@ export class DemoApiPostMethod extends LitElement {
   static styles = [tailwind];
 
   @state()
-  private payload?: ApiResult<RegisterResult>;
+  private lastEmail = "—";
 
   connectedCallback() {
     super.connectedCallback();
-    set(docsDemoPostMethodRequestKey, {
-      email: "method@concorde.local",
-      password: "method-password",
-    });
-    set(docsDemoPostMethodTriggerKey, 0);
+    set(docsDemoPostMethodRequestKey, LEO);
   }
 
   @post(
-    registerPostEndpoint,
+    signUpEndpoint,
     docsDemoPostMethodRequestKey,
     docsDemoReqresApiConfigurationKey,
     { triggerKey: docsDemoPostMethodTriggerKey },
   )
-  handlePayload(payload?: ApiResult<RegisterResult>) {
-    this.payload = payload;
-  }
-
-  private updateBody() {
-    set(docsDemoPostMethodRequestKey, {
-      email: `method-${Date.now()}@concorde.local`,
-      password: "method-password",
-    });
-  }
-
-  private resend() {
-    dp(docsDemoPostMethodTriggerKey).invalidate();
+  onSignedUp(payload?: ApiResult<SignUpResult>) {
+    this.lastEmail = payload?.result?.email ?? "—";
   }
 
   render() {
-    const result = this.payload?.result;
     return html`
-      <div class="space-y-3">
-        <div class="flex flex-wrap items-center gap-2">
-          <span class="text-sm font-medium">✉️ POST function mode</span>
-          <sonic-button size="sm" @click=${this.updateBody}>
-            Update body &amp; POST
-          </sonic-button>
-          <sonic-button size="sm" variant="secondary" @click=${this.resend}>
-            Invalidate trigger
-          </sonic-button>
-        </div>
-        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          The <code>@post</code> decorator calls
-          <code>handlePayload</code> with the complete API payload.
-        </p>
-        <p class="text-xs text-neutral-500">
-          HTTP status:
-          <strong>${this.payload?.response?.status ?? "loading…"}</strong>
-          · email: <strong>${result?.email ?? "—"}</strong>
-        </p>
+      <div class="flex flex-wrap items-center gap-2">
+        <sonic-button
+          @click=${() => dp(docsDemoPostMethodTriggerKey).invalidate()}
+        >
+          Invalidate trigger
+        </sonic-button>
+        <span class="text-sm">Last sign-up: <strong>${this.lastEmail}</strong></span>
       </div>
     `;
   }
@@ -214,62 +145,43 @@ export class DemoApiPostMethod extends LitElement {
 export class DemoApiPostDynamic extends LitElement {
   static styles = [tailwind];
 
-  @property({ type: String }) sessionId = "alpha";
+  @property({ type: String }) flight = "CN001";
 
   @post(
-    sessionSyncPostEndpoint,
+    checkInEndpoint,
     docsDemoPostDynamicRequestKey,
     docsDemoReqresApiConfigurationKey,
   )
   @state()
-  payload?: ApiResult<SessionSyncResult> | null;
+  payload?: ApiResult<CheckInResult> | null;
 
   connectedCallback() {
     super.connectedCallback();
-    set(docsDemoPostDynamicRequestKey, { note: "docs @post dynamic path" });
-  }
-
-  private setSession(sessionId: string) {
-    this.sessionId = sessionId;
+    set(docsDemoPostDynamicRequestKey, { seat: "1A" });
   }
 
   render() {
-    const result = this.payload?.result;
-    const status = this.payload?.response?.status;
-    const requestUrl = this.payload?.request?.url ?? "";
     return html`
-      <div class="space-y-4">
-        <p class="text-sm text-neutral-600 dark:text-neutral-400">
-          <code>@post</code> vers
-          <code>api/sessions/${"${sessionId}"}/sync</code> — changer
-          <code>sessionId</code> sur l'hôte relance le POST (même body).
-        </p>
-        <div class="flex flex-wrap items-center gap-2">
-          <span class="text-sm text-neutral-500">sessionId :</span>
-          ${(["alpha", "beta", "gamma"] as const).map(
-            (id) => html`
+      <div class="space-y-3">
+        <div class="flex flex-wrap gap-2">
+          ${["CN001", "CN002", "CN003"].map(
+            (flight) => html`
               <sonic-button
-                variant=${this.sessionId === id ? "primary" : "secondary"}
                 size="sm"
-                @click=${() => this.setSession(id)}
+                type=${this.flight === flight ? "primary" : "default"}
+                @click=${() => (this.flight = flight)}
               >
-                ${id}
+                ${flight}
               </sonic-button>
             `,
           )}
         </div>
-        <div
-          class="rounded border border-neutral-200 dark:border-neutral-700 p-3 text-sm space-y-1"
-        >
-          <p>HTTP status: <strong>${status ?? "—"}</strong></p>
+        <div class="rounded border p-3 text-sm">
           <p>
-            Dernier path :
-            <span class="font-mono text-xs break-all">${requestUrl || "—"}</span>
-          </p>
-          <p>
-            Réponse <code>sessionId</code> :
-            <strong class="font-mono">${result?.sessionId ?? "—"}</strong>
+            Request:
+            <span class="font-mono text-xs">${this.payload?.request?.url ?? "—"}</span>
           </p>
+          <p>Checked in on: <strong>${this.payload?.result?.sessionId ?? "—"}</strong></p>
         </div>
       </div>
     `;
@@ -281,39 +193,29 @@ export class DemoApiPostPublish extends LitElement {
   static styles = [tailwind];
 
   @post(
-    registerPostEndpoint,
+    signUpEndpoint,
     docsDemoPostPublishRequestKey,
     docsDemoReqresApiConfigurationKey,
   )
   @publish(
-    registerPostEndpoint.getDataProviderKey() as DataProviderKey<
-      ApiResult<RegisterResult>
+    signUpEndpoint.getDataProviderKey() as DataProviderKey<
+      ApiResult<SignUpResult>
     >,
   )
   @state()
-  payload?: ApiResult<RegisterResult> | null;
+  payload?: ApiResult<SignUpResult> | null;
 
   connectedCallback() {
     super.connectedCallback();
-    set(docsDemoPostPublishRequestKey, {
-      email: "publish@concorde.local",
-      password: "secret",
-    });
+    set(docsDemoPostPublishRequestKey, ADA);
   }
 
   render() {
-    const email = this.payload?.result?.email;
     return html`
-      <div class="space-y-3 text-sm">
-        <p class="text-neutral-600 dark:text-neutral-400">
-          <code>@post</code> + <code>@publish</code> sur le même champ — même
-          pattern que <code>@get</code> + <code>@publish</code>.
-        </p>
-        <p>
-          Result email:
-          <strong class="font-mono">${email ?? "—"}</strong>
-        </p>
-      </div>
+      <p class="text-sm">
+        Published sign-up:
+        <strong>${this.payload?.result?.email ?? "—"}</strong>
+      </p>
     `;
   }
 }