@supersoniks/concorde 5.1.0 → 5.1.2

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

@@ -0,0 +1,147 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { DOCS_MOCK_API_BASE } from "../mock-api/urls";
+import type { DocsFlight, DocsFlightStatus } from "../mock-api/flights";
+import {
+  docsFlightDelayedSwitchKey,
+  docsFlightDirectionFilterKey,
+  docsFlightSearchFilterKey,
+  docsFlightStatusRadioKey,
+} from "./docs-provider-keys";
+import { tailwind } from "../tailwind";
+
+import "../../core/components/functional/queue/queue";
+import "../../core/components/ui/badge/badge";
+import "../../core/components/ui/form/input/input";
+import "../../core/components/ui/form/select/select";
+import "../../core/components/ui/form/radio/radio";
+import "../../core/components/ui/form/switch/switch";
+
+const STATUS: Record<DocsFlightStatus, { label: string; type: string }> = {
+  "on-time": { label: "On time", type: "success" },
+  boarding: { label: "Boarding", type: "info" },
+  delayed: { label: "Delayed", type: "warning" },
+  landed: { label: "Landed", type: "neutral" },
+  cancelled: { label: "Cancelled", type: "danger" },
+};
+
+const flightRow = (f: DocsFlight) => html`
+  <div
+    class="grid grid-cols-[3.5rem_4.5rem_1fr_auto] items-center gap-3 border-0 border-b border-dotted border-neutral-300 py-2 text-sm"
+  >
+    <span class="font-mono">${f.time}</span>
+    <span class="font-mono">${f.code}</span>
+    <span>${f.city} <span class="text-neutral-500">(${f.airport})</span></span>
+    <sonic-badge size="xs" type=${STATUS[f.status].type}
+      >${STATUS[f.status].label}</sonic-badge
+    >
+  </div>
+`;
+
+/** Flight board: a sonic-queue on `/flights`, filtered by `filterProvider`. */
+@customElement("docs-flight-board")
+export class DocsFlightBoard extends LitElement {
+  static styles = [tailwind];
+
+  @property() filterProvider = "";
+  @property() direction = "";
+
+  render() {
+    const direction = this.direction ? `&direction=${this.direction}` : "";
+    return html`
+      <sonic-queue
+        serviceURL=${DOCS_MOCK_API_BASE}
+        dataProviderExpression="flights?offset=$offset&limit=$limit${direction}"
+        dataFilterProvider=${this.filterProvider}
+        key="flights"
+        limit="8"
+        class="mt-4 block max-h-80 overflow-y-auto"
+        .items=${flightRow}
+      ></sonic-queue>
+    `;
+  }
+}
+
+@customElement("docs-flight-search-demo")
+export class DocsFlightSearchDemo extends LitElement {
+  static styles = [tailwind];
+
+  render() {
+    return html`
+      <sonic-input
+        formDataProvider=${docsFlightSearchFilterKey.path}
+        name="q"
+        label="Search flights"
+        placeholder="City, airport or flight number"
+      ></sonic-input>
+      <docs-flight-board
+        filterProvider=${docsFlightSearchFilterKey.path}
+        direction="departures"
+      ></docs-flight-board>
+    `;
+  }
+}
+
+@customElement("docs-flight-direction-demo")
+export class DocsFlightDirectionDemo extends LitElement {
+  static styles = [tailwind];
+
+  render() {
+    return html`
+      <sonic-select
+        formDataProvider=${docsFlightDirectionFilterKey.path}
+        name="direction"
+        label="Board"
+      >
+        <option value="departures">Departures</option>
+        <option value="arrivals">Arrivals</option>
+      </sonic-select>
+      <docs-flight-board
+        filterProvider=${docsFlightDirectionFilterKey.path}
+      ></docs-flight-board>
+    `;
+  }
+}
+
+@customElement("docs-flight-status-radio-demo")
+export class DocsFlightStatusRadioDemo extends LitElement {
+  static styles = [tailwind];
+
+  render() {
+    return html`
+      <div
+        formDataProvider=${docsFlightStatusRadioKey.path}
+        class="flex flex-wrap gap-4"
+      >
+        <sonic-radio name="status" value="all" checked>All</sonic-radio>
+        <sonic-radio name="status" value="on-time">On time</sonic-radio>
+        <sonic-radio name="status" value="delayed">Delayed</sonic-radio>
+        <sonic-radio name="status" value="cancelled">Cancelled</sonic-radio>
+      </div>
+      <docs-flight-board
+        filterProvider=${docsFlightStatusRadioKey.path}
+        direction="arrivals"
+      ></docs-flight-board>
+    `;
+  }
+}
+
+@customElement("docs-flight-delayed-switch-demo")
+export class DocsFlightDelayedSwitchDemo extends LitElement {
+  static styles = [tailwind];
+
+  render() {
+    return html`
+      <sonic-switch
+        formDataProvider=${docsFlightDelayedSwitchKey.path}
+        name="status"
+        value="delayed"
+        >Delayed flights only</sonic-switch
+      >
+      <docs-flight-board
+        filterProvider=${docsFlightDelayedSwitchKey.path}
+        direction="departures"
+      ></docs-flight-board>
+    `;
+  }
+}

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,31 +86,31 @@ 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",
 );
 export const docsToggleLoaderFormKey = new DataProviderKey<{ toggleLoader?: string }>(
   "toggleLoaderForm",
 );
+export const docsBoardingPassKey = new DataProviderKey<{
+  firstName?: string;
+  lastName?: string;
+  destination?: string;
+  firstClass?: string;
+}>("boardingPass");
 
 /** User / preview scopes */
 export const docsUserScopeAKey = new DataProviderKey<DocsUserData>(
@@ -180,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 {
@@ -190,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());
@@ -216,12 +216,17 @@ 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: "" });
+  set(docsBoardingPassKey, {
+    firstName: "André",
+    lastName: "Turcat",
+    destination: "JFK",
+    firstClass: "true",
+  });
 
   set(docsUserScopeAKey, {
     first_name: "Paul",
@@ -253,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, [