@supersoniks/concorde 5.1.1 → 5.1.3

package/src/docs/example/decorators-demo-bind-demos.ts

@@ -1,119 +1,111 @@
 import { html, LitElement } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { bind } from "@supersoniks/concorde/decorators";
-import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
+import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
 import { sub } from "@supersoniks/concorde/directives";
 import { get, set } from "@supersoniks/concorde/core/utils/PublisherProxy";
-import {
-  bindReflectDemoKey,
-  demoDataKey,
-  demoUsersAltKey,
-  demoUsersKey,
-} from "./docs-provider-keys";
+import { bindReflectDemoKey } from "./docs-provider-keys";
 import { tailwind } from "../tailwind";
 import "./decorators-demo-init";
 
+type Flight = { flight: string; route: string; gate: string; updates: number };
+type Person = { firstName: string; lastName: string; role: string };
+
+const bindFlightKey = new DataProviderKey<Flight>("bindFlight");
+const bindPassengersKey = new DataProviderKey<Person[]>("bindPassengers");
+const bindCrewKey = new DataProviderKey<Person[]>("bindCrew");
+const bindPersonKey = new DataProviderKey<
+  Person,
+  { dataProvider: string; index: number }
+>("${dataProvider}.${index}");
+
+const GATES = ["B12", "B14", "C2", "D7", "E31"];
+
+set(bindFlightKey, { flight: "CN 001", route: "CDG → JFK", gate: "B12", updates: 0 });
+set(bindPassengersKey, [
+  { firstName: "Ada", lastName: "Lindqvist", role: "Seat 1A" },
+  { firstName: "Noah", lastName: "Keller", role: "Seat 3C" },
+  { firstName: "Amara", lastName: "Singh", role: "Seat 7D" },
+]);
+set(bindCrewKey, [
+  { firstName: "Leo", lastName: "Marchand", role: "Captain" },
+  { firstName: "Jin", lastName: "Park", role: "First officer" },
+  { firstName: "Sophie", lastName: "Lindquist", role: "Flight engineer" },
+]);
+
 @customElement("demo-bind")
 export class DemoBind extends LitElement {
   static styles = [tailwind];
 
-  @bind("demoData.firstName")
+  @bind(bindFlightKey.flight)
   @state()
-  firstName = "";
+  flight = "";
 
-  @bind("demoData.lastName")
+  @bind(bindFlightKey.gate)
   @state()
-  lastName: string = "";
+  gate = "";
 
-  @bind("demoData.count")
+  @bind(bindFlightKey.updates)
   @state()
-  count: number = 0;
+  updates = 0;
+
+  changeGate() {
+    const current = get(bindFlightKey);
+    const others = GATES.filter((gate) => gate !== current.gate);
+    set(bindFlightKey, {
+      ...current,
+      gate: others[Math.floor(Math.random() * others.length)],
+      updates: current.updates + 1,
+    });
+  }
 
   render() {
     return html`
-      <div>
-        <sonic-button @click=${this.updateData}>Update Data</sonic-button>
-      </div>
+      <sonic-button @click=${this.changeGate}>Change gate</sonic-button>
       <div class="p-3">
-        <p>Title: <strong>${this.firstName || "Not set"}</strong></p>
-        <p>User Name: <strong>${this.lastName || "Not set"}</strong></p>
-        <p>Number of updates: <strong>${this.count}</strong></p>
+        <p>Flight: <strong>${this.flight}</strong></p>
+        <p>Gate: <strong>${this.gate}</strong></p>
+        <p>Gate changes: <strong>${this.updates}</strong></p>
       </div>
     `;
   }
-
-  updateData() {
-    const users = get(demoUsersKey);
-    const randomIndex = Math.floor(Math.random() * users.length);
-    const randomUser = users[randomIndex];
-    const data = get(demoDataKey);
-    set(demoDataKey, {
-      ...data,
-      count: data.count + 1,
-      user: { name: `${randomUser.firstName} ${randomUser.lastName}` },
-    });
-  }
 }
 
 @customElement("demo-bind-reflect")
 export class DemoBindReflect extends LitElement {
   static styles = [tailwind];
 
-  @bind("bindReflectDemo.count", { reflect: true })
+  @bind(bindReflectDemoKey.count, { reflect: true })
   @state()
-  withReflect: number = 0;
+  withReflect = 0;
 
-  @bind("bindReflectDemo.count")
+  @bind(bindReflectDemoKey.count)
   @state()
-  withoutReflect: number = 0;
+  withoutReflect = 0;
 
   connectedCallback() {
     super.connectedCallback();
-    this.resetData();
+    this.reset();
   }
 
-  resetData() {
-    set(bindReflectDemoKey, { count: 0 });
-  }
-  render() {
-    return html`
-      <div class="mb-3">
-        from publisher : ${sub("bindReflectDemo.count")} <br />
-        from component with reflect : ${this.withReflect} <br />
-        from component without reflect : ${this.withoutReflect}
-      </div>
-      <sonic-button @click=${() => this.withReflect++}
-        >Increment with reflect</sonic-button
-      >
-      <sonic-button @click=${() => this.withoutReflect++}
-        >Increment without reflect</sonic-button
-      >
-      <sonic-button @click=${this.resetData}>Reset publisher data</sonic-button>
-    `;
-  }
-}
-
-@customElement("demo-bind-key")
-export class DemoBindKey extends LitElement {
-  static styles = [tailwind];
-
-  @bind(bindReflectDemoKey.count, { reflect: true })
-  @state()
-  count: number = 0;
-
-  connectedCallback() {
-    super.connectedCallback();
+  reset() {
     set(bindReflectDemoKey, { count: 0 });
   }
 
   render() {
     return html`
       <div class="mb-3">
-        <p>
-          @bind with DataProviderKey&lt;number&gt; (type-safe): ${this.count}
-        </p>
+        Boarded passengers in the store: ${sub(bindReflectDemoKey.count)}<br />
+        Property with reflect: ${this.withReflect}<br />
+        Property without reflect: ${this.withoutReflect}
       </div>
-      <sonic-button @click=${() => this.count++}>Increment</sonic-button>
+      <sonic-button @click=${() => this.withReflect++}>
+        Board (with reflect)
+      </sonic-button>
+      <sonic-button @click=${() => this.withoutReflect++}>
+        Board (without reflect)
+      </sonic-button>
+      <sonic-button variant="outline" @click=${this.reset}>Reset</sonic-button>
     `;
   }
 }
@@ -123,85 +115,41 @@ export class DemoBindDynamic extends LitElement {
   static styles = [tailwind];
 
   @property({ type: String })
-  dataProvider: typeof demoUsersKey.path | typeof demoUsersAltKey.path =
-    demoUsersKey.path;
+  dataProvider = bindPassengersKey.path;
 
   @property({ type: Number })
-  userIndex: number = 1;
+  index = 0;
 
-  @bind("${dataProvider}.${userIndex}")
+  @bind(bindPersonKey)
   @state()
-  user: any = {};
-
-  updateUserIndex(e: Event) {
-    this.userIndex = parseInt((e.target as HTMLInputElement).value);
-  }
-
-  updateDataProvider(e: Event) {
-    this.dataProvider = (e.target as HTMLSelectElement).value as
-      | typeof demoUsersKey.path
-      | typeof demoUsersAltKey.path;
-  }
-
-  updateCurrentUserData() {
-    const key =
-      this.dataProvider === demoUsersAltKey.path ? demoUsersAltKey : demoUsersKey;
-    const users = [...get(key)];
-    const randomNames = [
-      { firstName: "Alice", lastName: "Wonder" },
-      { firstName: "Bob", lastName: "Builder" },
-      { firstName: "Charlie", lastName: "Chaplin" },
-      { firstName: "Diana", lastName: "Prince" },
-      { firstName: "Eve", lastName: "Adams" },
-    ];
-    const randomName =
-      randomNames[Math.floor(Math.random() * randomNames.length)];
-    const randomEmail = `${randomName.firstName.toLowerCase()}.${randomName.lastName.toLowerCase()}@example.com`;
-    const idx = this.userIndex;
-    if (users[idx]) {
-      users[idx] = {
-        ...users[idx],
-        firstName: randomName.firstName,
-        lastName: randomName.lastName,
-        email: randomEmail,
-      };
-      set(key, users);
-    }
-  }
+  person: Person | null = null;
 
   render() {
     return html`
       <div class="flex flex-col gap-2">
         <sonic-select
+          label="List"
           .value=${this.dataProvider}
-          label="Users set"
-          @change=${this.updateDataProvider}
+          @change=${(e: Event) =>
+            (this.dataProvider = (e.target as HTMLSelectElement).value)}
         >
-          <option value=${demoUsersKey.path}>First set of users</option>
-          <option value=${demoUsersAltKey.path}>Second set of users</option>
+          <option value=${bindPassengersKey.path}>Passengers</option>
+          <option value=${bindCrewKey.path}>Crew</option>
         </sonic-select>
         <sonic-input
           type="number"
-          .value=${this.userIndex}
-          @input=${this.updateUserIndex}
-          min="0"
-          max="9"
           label="Index"
-          class="block"
-        >
-        </sonic-input>
-        <sonic-button @click=${this.updateCurrentUserData}
-          >Update current user data</sonic-button
-        >
-        <div class="flex flex-col gap-2 border p-2">
-          <div>
-            <sonic-icon name="user" library="heroicons"></sonic-icon>
-            ${this.user?.firstName} ${this.user?.lastName}
-          </div>
-          <div>
-            <sonic-icon name="envelope" library="heroicons"></sonic-icon>
-            ${this.user?.email}
-          </div>
+          min="0"
+          max="2"
+          .value=${this.index}
+          @input=${(e: Event) =>
+            (this.index = parseInt((e.target as HTMLInputElement).value) || 0)}
+        ></sonic-input>
+        <div class="border p-2">
+          ${this.person
+            ? html`<strong>${this.person.firstName} ${this.person.lastName}</strong>
+                · ${this.person.role}`
+            : "No one at this index"}
         </div>
       </div>
     `;

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

@@ -1,15 +1,21 @@
+/** Shared setup for the @get demos: API configuration + `/flights` endpoints of the docs mock API. */
 import type { APIConfiguration } from "@supersoniks/concorde/core/utils/api";
-import type { ApiResult } from "@supersoniks/concorde/core/utils/api";
-import { Endpoint } from "@supersoniks/concorde/core/utils/endpoint";
-import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
-import { get, set } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import {
+  DataProviderKey,
+  Endpoint,
+  type ApiResult,
+} from "@supersoniks/concorde/decorators";
+import { set } from "@supersoniks/concorde/utils";
 import "./decorators-demo-init";
-import { DOCS_MOCK_GEO_SERVICE } from "../mock-api/urls";
+import { DOCS_MOCK_API_BASE } from "../mock-api/urls";
+import type { DocsFlight } from "../mock-api/flights";
 
-export type GeoCommuneRow = { nom: string; code: string };
+export type Flight = DocsFlight;
+export type FlightBoard = { flights: Flight[] };
+export type FlightDirection = "departures" | "arrivals";
 
-export const geoApiDemoConfiguration: APIConfiguration = {
-  serviceURL: DOCS_MOCK_GEO_SERVICE,
+export const flightsApiConfiguration: APIConfiguration = {
+  serviceURL: DOCS_MOCK_API_BASE,
   token: null,
   userName: null,
   password: null,
@@ -17,19 +23,24 @@ export const geoApiDemoConfiguration: APIConfiguration = {
   tokenProvider: null,
 };
 
-export const docsDemoGeoApiConfigurationKey =
-  new DataProviderKey<APIConfiguration>("docsDemoGeoApiConfiguration");
+export const flightsApiConfigurationKey = new DataProviderKey<APIConfiguration>(
+  "docsDemoFlightsApiConfiguration",
+);
 
-set(docsDemoGeoApiConfigurationKey, geoApiDemoConfiguration);
+set(flightsApiConfigurationKey, flightsApiConfiguration);
 
-export const geoCommunesApiGetEndpoint = new Endpoint<GeoCommuneRow[]>(
-  "communes?limit=5&fields=nom,code",
+/** Static endpoint: the first departures. */
+export const departuresEndpoint = new Endpoint<FlightBoard>(
+  "flights?direction=departures&limit=4",
 );
 
-export const geoCommunesApiGetEndpointDynamic = new Endpoint<GeoCommuneRow[]>(
-  "communes?limit=${communeLimit}&fields=nom,code",
-);
+/** Dynamic endpoint: `${direction}` is read on the host component. */
+export const flightsByDirectionEndpoint = new Endpoint<
+  FlightBoard,
+  { direction: FlightDirection }
+>("flights?direction=${direction}&limit=4");
 
-export const geoCommunesApiGetPublishKey = new DataProviderKey<
-  ApiResult<GeoCommuneRow[]>
->(geoCommunesApiGetEndpoint.path);
+/** Store key used to share the departures payload with other components. */
+export const departuresPayloadKey = new DataProviderKey<ApiResult<FlightBoard>>(
+  "docsDemoDepartures",
+);