@supersoniks/concorde 5.1.1 → 5.1.3

package/src/docs/example/docs-jsonata-demos.ts

@@ -2,7 +2,6 @@ import { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
 import { tailwind } from "../tailwind";
 import { DOCS_MOCK_API_BASE } from "../mock-api/urls";
-import { Endpoint } from "@supersoniks/concorde/core/utils/endpoint";
 import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
 import { set } from "@supersoniks/concorde/utils";
 
@@ -11,54 +10,58 @@ import "../../core/components/functional/jsonata/jsonata";
 import "../../core/components/functional/list/list";
 import "../../core/components/functional/value/value";
 import "../../core/components/ui/form/input/input";
+import "../../core/components/ui/form/select/select";
 
-const missions = new Endpoint<unknown>("api/space-cats");
-const topForm = new DataProviderKey<{ top: number | string }>(
-  "jsonataTopForm",
+const directionForm = new DataProviderKey<{ direction: string }>(
+  "jsonataDirectionForm",
 );
 
-const order = new Endpoint<unknown>("api/market-order");
-const taxForm = new DataProviderKey<{ taxPercent: number | string }>(
-  "jsonataTaxForm",
+type FuelPhase = { phase: string; kg: number };
+const fuelPlan = new DataProviderKey<FuelPhase[]>("jsonataFuelPlan");
+const reserveForm = new DataProviderKey<{ reservePercent: number | string }>(
+  "jsonataReserveForm",
 );
 
-/** Cas 1 — groupby + top N (recalcul via form, sans refetch). */
+/** Group by + sort: flights per status, filtered by a form variable. */
 @customElement("docs-jsonata-space-cats-demo")
 export class DocsJsonataSpaceCatsDemo extends LitElement {
   static styles = [tailwind];
 
   connectedCallback(): void {
     super.connectedCallback();
-    set(topForm, { top: 3 });
+    set(directionForm, { direction: "departures" });
   }
 
   render() {
     return html`
       <div serviceURL=${DOCS_MOCK_API_BASE} class="flex flex-col gap-3">
-        <div formDataProvider=${topForm.path} class="max-w-xs">
-          <sonic-input name="top" type="number" label="Top N" value="3"></sonic-input>
+        <div formDataProvider=${directionForm.path} class="max-w-xs">
+          <sonic-select name="direction" label="Board" value="departures">
+            <option value="departures">Departures</option>
+            <option value="arrivals">Arrivals</option>
+          </sonic-select>
         </div>
 
         <sonic-fetch
-          dataProvider=${missions.path}
-          endPoint=${missions.path}
-          key="data"
+          dataProvider="jsonataFlights"
+          endPoint="flights"
+          key="flights"
         ></sonic-fetch>
 
         <sonic-jsonata
-          inputProvider=${missions.path}
-          outputProvider="spaceCatLeaderboard"
-          formDataProvider=${topForm.path}
-          expression='$input{name: $sum(points)} ~> $each(function($v,$k){{"name":$k,"points":$v}}) ^(>points)[[0..$number($top)-1]]'
+          inputProvider="jsonataFlights"
+          outputProvider="jsonataFlightsByStatus"
+          formDataProvider=${directionForm.path}
+          expression='$append([], ($input[direction=$direction]){status: $count(code)} ~> $each(function($v, $k) {{"status": $k, "flights": $v}}) ^(>flights))'
         ></sonic-jsonata>
 
         <sonic-list
-          dataProvider="spaceCatLeaderboard"
-          class="flex flex-col gap-1"
-          .items=${({ name, points }: { name: string; points: number }) =>
+          dataProvider="jsonataFlightsByStatus"
+          class="flex max-w-xs flex-col gap-1"
+          .items=${({ status, flights }: { status: string; flights: number }) =>
             html`<div class="flex gap-3 text-sm">
-              <span class="font-medium">${name}</span>
-              <span class="ml-auto tabular-nums text-neutral-500">${points}</span>
+              <span>${status}</span>
+              <span class="ml-auto tabular-nums">${flights}</span>
             </div>`}
         ></sonic-list>
       </div>
@@ -66,60 +69,57 @@ export class DocsJsonataSpaceCatsDemo extends LitElement {
   }
 }
 
-/** Cas 2 — totaux d’un tableau (somme + taxe via form). */
+/** Totals: trip fuel, reserve and block fuel from a table of flight phases. */
 @customElement("docs-jsonata-table-totals-demo")
 export class DocsJsonataTableTotalsDemo extends LitElement {
   static styles = [tailwind];
 
   connectedCallback(): void {
     super.connectedCallback();
-    set(taxForm, { taxPercent: 10 });
+    set(fuelPlan, [
+      { phase: "Taxi", kg: 1200 },
+      { phase: "Climb", kg: 21500 },
+      { phase: "Cruise", kg: 58300 },
+      { phase: "Descent", kg: 3600 },
+    ]);
+    set(reserveForm, { reservePercent: 5 });
   }
 
   render() {
     return html`
-      <div serviceURL=${DOCS_MOCK_API_BASE} class="flex flex-col gap-3">
-        <div formDataProvider=${taxForm.path} class="max-w-xs">
+      <div class="flex flex-col gap-3">
+        <div formDataProvider=${reserveForm.path} class="max-w-xs">
           <sonic-input
-            name="taxPercent"
+            name="reservePercent"
             type="number"
-            label="Tax %"
-            value="10"
+            label="Reserve (%)"
+            value="5"
           ></sonic-input>
         </div>
 
-        <sonic-fetch
-          dataProvider=${order.path}
-          endPoint=${order.path}
-          key="data"
-        ></sonic-fetch>
-
         <sonic-jsonata
-          inputProvider=${order.path}
-          outputProvider="marketOrderTotals"
-          formDataProvider=${taxForm.path}
+          inputProvider=${fuelPlan.path}
+          outputProvider="jsonataFuelTotals"
+          formDataProvider=${reserveForm.path}
           expression='(
-            $sub := $sum($input.(qty * unitPrice));
-            {
-              "subtotal": $round($sub, 2),
-              "tax": $round($sub * $number($taxPercent) / 100, 2),
-              "grandTotal": $round($sub * (1 + $number($taxPercent) / 100), 2)
-            }
+            $trip := $sum($input.kg);
+            $reserve := $round($trip * $number($reservePercent) / 100);
+            { "trip": $trip, "reserve": $reserve, "block": $trip + $reserve }
           )'
         ></sonic-jsonata>
 
-        <div dataProvider="marketOrderTotals" class="flex gap-6 text-sm">
+        <div dataProvider="jsonataFuelTotals" class="flex gap-6 text-sm">
           <div>
-            <div class="text-neutral-400">Subtotal</div>
-            <sonic-value key="subtotal"></sonic-value>
+            <div class="text-neutral-400">Trip fuel (kg)</div>
+            <sonic-value key="trip"></sonic-value>
           </div>
           <div>
-            <div class="text-neutral-400">Tax</div>
-            <sonic-value key="tax"></sonic-value>
+            <div class="text-neutral-400">Reserve (kg)</div>
+            <sonic-value key="reserve"></sonic-value>
           </div>
           <div>
-            <div class="text-neutral-400">Total</div>
-            <span class="font-semibold"><sonic-value key="grandTotal"></sonic-value></span>
+            <div class="text-neutral-400">Block fuel (kg)</div>
+            <span class="font-semibold"><sonic-value key="block"></sonic-value></span>
           </div>
         </div>
       </div>

package/src/docs/example/docs-list-demos.ts

@@ -1,115 +1,36 @@
-import { html, LitElement, nothing } from "lit";
+import { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
 import { tailwind } from "../tailwind";
+import type { DocsFlight } from "../mock-api/flights";
+import type { ListItemMetadata } from "../../core/components/functional/list/list";
 
 import "../../core/components/functional/list/list";
-import "../../core/components/ui/image/image";
-
-const GRID_PROPS = [
-  { id: "1" },
-  { id: "2" },
-  { id: "3" },
-  { id: "4" },
-  { id: "5" },
-  { id: "6" },
-  { id: "7" },
-  { id: "8" },
-  { id: "9" },
-];
-
-const TEMPLATE_KEY_PROPS = [
-  { id: "1", default: "The first template with no data-value is used" },
-  { id: "2", default: "The second template with no data-value is used" },
-  { id: "3", default: "Back to the first template with no data-value" },
-  { id: "4", tpl: "custom-tpl-danger" },
-  { id: "5", tpl: "custom-tpl-info" },
-  { id: "6", tpl: "custom-tpl-success" },
-  { id: "7", tpl: "Non-valid tpl name, Back to the first template with no data-value" },
-];
-
-const TPL_PARTS: Record<string, (item: { id: string }) => ReturnType<typeof html>> = {
-  "custom-tpl-danger": (item) => html`
-    <div class="rounded border border-danger p-2 text-danger">
-      ${item.id} :
-      data-value : <b>custom-tpl-danger</b>
-    </div>
-  `,
-  "custom-tpl-info": (item) => html`
-    <div class="rounded border border-info p-2 text-info">
-      ${item.id} :
-      data-value : <b>custom-tpl-info</b>
-    </div>
-  `,
-  "custom-tpl-success": (item) => html`
-    <div class="rounded border border-success p-2 text-success">
-      ${item.id} :
-      data-value : <b>custom-tpl-success</b>
-    </div>
-  `,
-};
 
 @customElement("docs-list-alternate-demo")
 export class DocsListAlternateDemo extends LitElement {
   static styles = [tailwind];
 
-  private items = (item: { id: string }, meta: { even?: boolean }) =>
-    meta.even
-      ? html`<div class="bg-neutral-100 p-3 text-center">
-          ${item.id}
-          <div class="text-xs">1st template</div>
-        </div>`
-      : html`<div class="bg-neutral-100 p-3 text-center text-info">
-          ${item.id}
-          <div class="text-xs">2nd template</div>
-        </div>`;
+  private items = (flight: DocsFlight, metadata: ListItemMetadata) => html`
+    <div
+      class="grid grid-cols-[3.5rem_4.5rem_1fr_3rem] gap-3 px-3 py-2 text-sm ${metadata.even
+        ? "bg-neutral-100"
+        : ""}"
+    >
+      <span class="font-mono">${flight.time}</span>
+      <span class="font-mono">${flight.code}</span>
+      <span>${flight.city} <span class="text-neutral-500">(${flight.airport})</span></span>
+      <span class="font-mono">${flight.gate}</span>
+    </div>
+  `;
 
   render() {
     return html`
       <sonic-list
-        dataProvider="listTemplateExample"
-        class="grid grid-cols-3 gap-4"
-        .props=${GRID_PROPS}
+        fetch
+        serviceURL="/docs-mock-api"
+        dataProvider="flights?direction=departures"
+        key="flights"
         .items=${this.items}
-        debug
-      ></sonic-list>
-    `;
-  }
-}
-
-@customElement("docs-list-template-key-demo")
-export class DocsListTemplateKeyDemo extends LitElement {
-  static styles = [tailwind];
-
-  render() {
-    let counter = -1;
-    const items = (item: (typeof TEMPLATE_KEY_PROPS)[number]) => {
-      const tplName = item.tpl;
-      const part = tplName ? TPL_PARTS[tplName] : undefined;
-      if (part) {
-        counter = -1;
-        return part(item);
-      }
-      counter++;
-      return counter % 2 === 0
-        ? html`<div class="rounded border p-2 text-neutral-900">
-            ${item.id} :
-            <b>First</b> template with no <b>data-value</b> attribute
-          </div>`
-        : html`<div class="rounded border p-2 text-neutral-400">
-            ${item.id} :
-            <b>Second</b> template with no <b>data-value</b> attribute <br />
-            Used when it <b>follows</b> another row with <b>no tpl</b> in props
-          </div>`;
-    };
-
-    return html`
-      <sonic-list
-        templateKey="tpl"
-        class="grid gap-3"
-        dataProvider="TemplateKeyExample"
-        .props=${TEMPLATE_KEY_PROPS}
-        .items=${items}
-        debug
       ></sonic-list>
     `;
   }
@@ -117,27 +38,35 @@ export class DocsListTemplateKeyDemo extends LitElement {
 
 @customElement("docs-list-separator-demo")
 export class DocsListSeparatorDemo extends LitElement {
-  private items = (item: { id: string }) => html`${item.id}`;
-  private separator = () => html` 🤜 `;
+  static styles = [tailwind];
+
+  private items = (flight: DocsFlight) =>
+    html`<span class="font-mono">${flight.airport}</span>`;
+  private separator = () => html`<span class="text-neutral-400"> · </span>`;
   private noItems = () =>
-    html`<p class="text-neutral-500">No items (noItems callback)</p>`;
+    html`<p class="text-neutral-500">No flights match this status.</p>`;
 
   render() {
     return html`
+      <p class="mb-2 text-sm text-neutral-500">Departures</p>
       <sonic-list
-        dataProvider="ListSeparatorDemo"
-        .props=${[{ id: "1" }, { id: "2" }, { id: "3" }]}
+        fetch
+        serviceURL="/docs-mock-api"
+        dataProvider="docsListSeparatorDemo"
+        endPoint="flights?direction=departures"
+        key="flights"
         .items=${this.items}
         .separator=${this.separator}
-        debug
       ></sonic-list>
-      <hr class="my-6 border-neutral-200" />
+      <p class="mb-2 mt-6 text-sm text-neutral-500">Diverted</p>
       <sonic-list
-        dataProvider="ListEmptyDemo"
-        .props=${[]}
+        fetch
+        serviceURL="/docs-mock-api"
+        dataProvider="docsListEmptyDemo"
+        endPoint="flights?status=diverted"
+        key="flights"
         .items=${this.items}
         .noItems=${this.noItems}
-        debug
       ></sonic-list>
     `;
   }
@@ -147,30 +76,21 @@ export class DocsListSeparatorDemo extends LitElement {
 export class DocsListExtractValuesDemo extends LitElement {
   static styles = [tailwind];
 
-  private items = (item: { key: string; value: string }) => html`
-    <div class="flex items-center gap-3">
+  private items = (item: { key: string; value: string | number }) => html`
+    <div class="flex gap-3 text-sm">
       <span class="w-24 font-bold">${item.key}</span>
-      <span>${item.value}</span>
-      ${item.key === "avatar"
-        ? html`<sonic-image
-            src=${item.value}
-            rounded="full"
-            ratio="1/1"
-            class="w-20 block"
-          ></sonic-image>`
-        : nothing}
+      <span class="font-mono">${item.value}</span>
     </div>
   `;
 
   render() {
     return html`
       <sonic-list
-        debug
         fetch
         serviceURL="/docs-mock-api"
-        dataProvider="list-extract-values-test"
-        endPoint="api/users/2"
-        key="data"
+        dataProvider="docsListExtractValuesDemo"
+        endPoint="flights?limit=1"
+        key="flights.0"
         extractValues
         .items=${this.items}
       ></sonic-list>

package/src/docs/example/docs-provider-keys.ts

@@ -86,25 +86,19 @@ export const docsApiConfWordingVersionKey = new DataProviderKey<number>(
   "docsApiConfWordingVersion",
 );
 
-/** Joke / queue / toggle filters */
-export const docsJokeInputFilterKey = new DataProviderKey<{ contains?: string }>(
-  "input-filter",
+/** Flight board filters (input / select / radio / switch demos) */
+export const docsFlightSearchFilterKey = new DataProviderKey<{ q?: string }>(
+  "flightSearchFilter",
 );
-export const docsJokeSelectFilterKey = new DataProviderKey<{ lang?: string }>(
-  "select-filter",
-);
-export const docsJokeCheckboxFilterKey = new DataProviderKey<{
-  blacklistFlags?: string;
-}>("jokeFilter");
-export const docsJokeRadioFilterKey = new DataProviderKey<{
-  blacklistFlags?: string;
-}>("jokeFilterRadio");
-export const docsJokeSwitchFilterKey = new DataProviderKey<{
-  blacklistFlags?: string;
-}>("jokeFilterswitch");
-export const docsQueueUsersFilterKey = new DataProviderKey<{ q?: string }>(
-  "filter",
+export const docsFlightDirectionFilterKey = new DataProviderKey<{
+  direction?: string;
+}>("flightDirectionFilter");
+export const docsFlightStatusRadioKey = new DataProviderKey<{ status?: string }>(
+  "flightStatusRadioFilter",
 );
+export const docsFlightDelayedSwitchKey = new DataProviderKey<{
+  status?: string | null;
+}>("flightDelayedSwitchFilter");
 export const docsToggleVisibilityKey = new DataProviderKey<{ togglePlan?: string }>(
   "visibilitySettings",
 );
@@ -186,8 +180,8 @@ export const demoUsersAltSettingsKey = new DataProviderKey<
 >("demoUsersAltSettings");
 
 const defaultRegisterForm = (): RegisterForm => ({
-  email: "eve.holt@reqres.in",
-  password: "pistol",
+  email: "ada.lindqvist@example.com",
+  password: "concorde",
 });
 
 export function initDocsProviderDefaults(): void {
@@ -196,8 +190,8 @@ export function initDocsProviderDefaults(): void {
   set(submitNestedFormKey, defaultRegisterForm());
   set(submitFormDataFormKey, defaultRegisterForm());
   set(submitGetFormKey, {
-    email: "demo@example.com",
-    password: "secret",
+    email: "leo.marchand@example.com",
+    password: "mach2",
   });
   set(submitNativeFormKey, defaultRegisterForm());
   set(submitEventFormKey, defaultRegisterForm());
@@ -222,9 +216,8 @@ export function initDocsProviderDefaults(): void {
   });
   set(docsApiConfWordingVersionKey, 1);
 
-  set(docsJokeInputFilterKey, { contains: "chien" });
-  set(docsJokeSelectFilterKey, { lang: "fr" });
-  set(docsQueueUsersFilterKey, { q: "" });
+  set(docsFlightSearchFilterKey, { q: "" });
+  set(docsFlightDirectionFilterKey, { direction: "departures" });
 
   set(docsToggleVisibilityKey, { togglePlan: "true" });
   set(docsToggleLoaderFormKey, { toggleLoader: "" });
@@ -265,13 +258,13 @@ export function initDocsProviderDefaults(): void {
     user: { name: "Initial User" },
     count: 0,
   });
-  set(demoUserKey, { name: "Demo User", email: "demo@example.com" });
+  set(demoUserKey, { name: "Ada Lindqvist", email: "ada.lindqvist@example.com" });
   set(demoSettingsKey, { theme: "light", language: "en" });
   set(demoUserSettingsKey, { theme: "light", language: "en" });
   set(publishDemoKey, { email: "", message: "" });
-  set(waitAncestorDemoKey, { message: "Context from ancestor" });
-  set(autoValue1Key, 10);
-  set(autoValue2Key, 20);
+  set(waitAncestorDemoKey, { message: "Gate B12" });
+  set(autoValue1Key, 92);
+  set(autoValue2Key, 9);
   set(bindReflectDemoKey, { count: 0 });
 
   set(demoUsersKey, [

package/src/docs/example/docs-queue-demos.ts

@@ -1,113 +1,73 @@
 import { html, LitElement } from "lit";
 import { customElement } from "lit/decorators.js";
-import {
-  DOCS_MOCK_GEO_SERVICE,
-  DOCS_MOCK_REQRES_SERVICE,
-} from "../mock-api/urls";
-import { docsQueueUsersFilterKey } from "./docs-provider-keys";
+import { DataProviderKey } from "@supersoniks/concorde/dataProviderKey";
+import { DOCS_MOCK_API_BASE } from "../mock-api/urls";
+import type { DocsFlight } from "../mock-api/flights";
 import { tailwind } from "../tailwind";
 
 import "../../core/components/functional/queue/queue";
-import "../../core/components/ui/image/image";
+import "../../core/components/ui/badge/badge";
 import "../../core/components/ui/form/input/input";
 
-type CommuneRow = { nom: string; code?: string };
+const flightFilter = new DataProviderKey<{ q?: string }>("queueFlightFilter");
 
-type UserRow = {
-  first_name: string;
-  last_name: string;
-  email: string;
-  avatar: string;
-};
-
-const userRow = ({ first_name, last_name, email, avatar }: UserRow) =>
-  html`<div class="flex items-center gap-3 rounded-md p-2 hover:bg-neutral-50">
-    <sonic-image
-      src=${avatar}
-      rounded="md"
-      ratio="1/1"
-      class="w-12 block"
-    ></sonic-image>
-    <div>
-      <div>${first_name} <span class="font-bold">${last_name}</span></div>
-      <div class="text-sm text-neutral-500">${email}</div>
-    </div>
+const flightRow = ({ time, code, city, airport, gate, status }: DocsFlight) =>
+  html`<div
+    class="grid grid-cols-[3.5rem_4.5rem_1fr_3rem_auto] items-center gap-3 border-0 border-b border-dotted border-neutral-300 py-2 text-sm"
+  >
+    <span class="font-mono">${time}</span>
+    <span class="font-mono">${code}</span>
+    <span>${city} <span class="text-neutral-500">(${airport})</span></span>
+    <span class="font-mono text-neutral-500">${gate}</span>
+    <sonic-badge size="xs">${status}</sonic-badge>
   </div>`;
 
-/** Communes — one batch (`limit` only, no `$offset` in the expression). */
+/** Lazy load: batches of 4 departures, the next one loads on scroll. */
 @customElement("docs-queue-geo-demo")
 export class DocsQueueGeoDemo extends LitElement {
-  private items = (item: CommuneRow) =>
-    html`<div class="rounded bg-neutral-100 p-2 text-sm">
-      <div class="font-medium">${item.nom}</div>
-      ${item.code
-        ? html`<div class="text-neutral-500">${item.code}</div>`
-        : null}
-    </div>`;
+  static styles = [tailwind];
 
   render() {
     return html`
       <sonic-queue
-        class="grid grid-cols-3 gap-3"
-        dataProviderExpression="communes?limit=$limit"
-        limit="6"
-        serviceURL=${DOCS_MOCK_GEO_SERVICE}
-        .items=${this.items}
-        debug
+        serviceURL=${DOCS_MOCK_API_BASE}
+        dataProviderExpression="flights?offset=$offset&limit=$limit&direction=departures"
+        key="flights"
+        limit="4"
+        class="block max-h-48 overflow-y-auto"
+        .items=${flightRow}
       ></sonic-queue>
     `;
   }
 }
 
-/**
- * Users — lazy load + search (`q`), aligned with create-concorde-ts-starter demo-queue.
- * Mock: `filterDocsUsers` + `paginateUsers` in `src/docs/mock-api/`.
- */
+/** Filter: the `q` field is added to every request; a change reloads from offset 0. */
 @customElement("docs-queue-users-demo")
 export class DocsQueueUsersDemo extends LitElement {
   static styles = [tailwind];
 
-  private items = userRow;
-
-  private separator = () => html`
-    <div class="my-1 border-t border-dashed border-neutral-200"></div>
-  `;
-
   private noItems = () => html`
-    <p class="p-4 text-center text-sm italic text-neutral-500">
-      No users — try another search (e.g. <code>zzz</code>)
-    </p>
+    <p class="p-4 text-center text-sm text-neutral-500">No flight found.</p>
   `;
 
   render() {
     return html`
-      <div formDataProvider=${docsQueueUsersFilterKey.path} class="mb-3 max-w-md">
-        <sonic-input
-          name="q"
-          type="search"
-          label="Search"
-          placeholder="First name, last name, or email"
-          size="sm"
-        ></sonic-input>
-      </div>
-      <p class="mb-3 text-sm text-neutral-500">
-        Typing updates <code>?q=…</code> on each request. Scroll inside the box
-        to load the next batch (<code>offset</code> += <code>limit</code>).
-      </p>
+      <sonic-input
+        formDataProvider=${flightFilter.path}
+        name="q"
+        type="search"
+        label="Search flights"
+        placeholder="City, airport or flight number"
+      ></sonic-input>
       <sonic-queue
-        lazyload
-        dataProviderExpression="api/users?offset=$offset&limit=$limit"
-        dataFilterProvider="filter"
+        serviceURL=${DOCS_MOCK_API_BASE}
+        dataProviderExpression="flights?offset=$offset&limit=$limit"
+        dataFilterProvider=${flightFilter.path}
+        key="flights"
         limit="4"
-        offset="0"
-        idKey="id"
-        serviceURL=${DOCS_MOCK_REQRES_SERVICE}
-        key="data"
-        class="grid max-h-96 max-w-md gap-2 overflow-y-auto"
-        .items=${this.items}
-        .separator=${this.separator}
+        class="mt-4 block max-h-48 overflow-y-auto"
+        .items=${flightRow}
         .noItems=${this.noItems}
-        debug
       ></sonic-queue>
     `;
   }