@supersoniks/concorde 4.9.92 → 4.9.94

package/src/docs/components/docs-demo-sources.ts

@@ -81,6 +81,24 @@ export const DOCS_LIT_DEMO_REGISTRY: Record<string, DocsLitDemoConfig> = {
       { path: "src/docs/example/docs-users-list.ts", line: 15, label: "docs-users-list" },
     ],
   },
+  "docs-jsonata-space-cats-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-jsonata-demos.ts",
+        line: 26,
+        label: "top-n",
+      },
+    ],
+  },
+  "docs-jsonata-table-totals-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-jsonata-demos.ts",
+        line: 69,
+        label: "totals",
+      },
+    ],
+  },
   "docs-list-alternate-demo": {
     sources: [
       { path: "src/docs/example/docs-list-demos.ts", line: 51, label: "alternate" },
@@ -204,6 +222,14 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
   "docs-joke-search-demo": [
     { path: "src/docs/example/docs-joke-demos.ts", label: "joke demos" },
   ],
+  "docs-jsonata-space-cats-demo": [
+    { path: "src/docs/example/docs-jsonata-demos.ts", label: "jsonata demos" },
+    { path: "src/docs/mock-api/fixtures-jsonata.ts", label: "fixtures" },
+  ],
+  "docs-jsonata-table-totals-demo": [
+    { path: "src/docs/example/docs-jsonata-demos.ts", label: "jsonata demos" },
+    { path: "src/docs/mock-api/fixtures-jsonata.ts", label: "fixtures" },
+  ],
   "docs-joke-lang-demo": [
     { path: "src/docs/example/docs-joke-demos.ts", label: "joke demos" },
   ],
@@ -252,6 +278,13 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
     { path: "src/docs/example/decorators-demo-geo.ts", label: "geo API" },
     { path: "src/docs/mock-api/router.ts", label: "mock router" },
   ],
+  "demo-api-get-method": [
+    {
+      path: "src/docs/example/decorators-demo-subscribe-publish-get-demos.ts",
+      label: "demo-api-get-method",
+    },
+    { path: "src/docs/example/decorators-demo-geo.ts", label: "geo API" },
+  ],
   "demo-api-get-configuration-key": [
     {
       path: "src/docs/example/decorators-demo-subscribe-publish-get-demos.ts",
@@ -276,6 +309,13 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
     },
     { path: "src/docs/mock-api/router.ts", label: "mock router" },
   ],
+  "demo-api-post-method": [
+    {
+      path: "src/docs/example/decorators-demo-post.ts",
+      label: "demo-api-post-method",
+    },
+    { path: "src/docs/mock-api/router.ts", label: "mock router" },
+  ],
   "demo-api-post-dynamic": [
     {
       path: "src/docs/example/decorators-demo-post.ts",

package/src/docs/docs.ts

@@ -15,6 +15,7 @@ import "./example/docs-joke-demos";
 import "./example/docs-queue-demos";
 import "./example/docs-toggle-demos";
 import "./example/docs-list-demos";
+import "./example/docs-jsonata-demos";
 import "./example/docs-router-demos";
 import "./example/docs-submit-demos";
 import "./example/docs-api-config-demos";

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

@@ -65,6 +65,12 @@ export const docsDemoPostPublishRequestKey = new DataProviderKey<RegisterRequest
 export const docsDemoPostTriggerKey = new DataProviderKey<number>(
   "docsDemoPostTrigger",
 );
+export const docsDemoPostMethodRequestKey = new DataProviderKey<RegisterRequest>(
+  "docsDemoPostMethodRequest",
+);
+export const docsDemoPostMethodTriggerKey = new DataProviderKey<number>(
+  "docsDemoPostMethodTrigger",
+);
 export const docsDemoPostDynamicRequestKey = new DataProviderKey<SessionSyncRequest>(
   "docsDemoPostDynamicRequest",
 );
@@ -140,6 +146,70 @@ export class DemoApiPost extends LitElement {
   }
 }
 
+@customElement("demo-api-post-method")
+export class DemoApiPostMethod extends LitElement {
+  static styles = [tailwind];
+
+  @state()
+  private payload?: ApiResult<RegisterResult>;
+
+  connectedCallback() {
+    super.connectedCallback();
+    set(docsDemoPostMethodRequestKey, {
+      email: "method@concorde.local",
+      password: "method-password",
+    });
+    set(docsDemoPostMethodTriggerKey, 0);
+  }
+
+  @post(
+    registerPostEndpoint,
+    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();
+  }
+
+  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>
+    `;
+  }
+}
+
 @customElement("demo-api-post-dynamic")
 export class DemoApiPostDynamic extends LitElement {
   static styles = [tailwind];

package/src/docs/example/decorators-demo-subscribe-publish-get-demos.ts

@@ -5,6 +5,7 @@ import type { ApiResult } from "@supersoniks/concorde/core/utils/api";
 import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
 import { sub } from "@supersoniks/concorde/directives";
 import {
+  dp,
   get as storeGet,
   set,
 } from "@supersoniks/concorde/core/utils/PublisherProxy";
@@ -28,6 +29,9 @@ const geoCommunesGet = get(
   geoCommunesApiGetEndpoint,
   docsDemoGeoApiConfigurationKey,
 );
+const geoCommunesMethodTriggerKey = new DataProviderKey<number>(
+  "docsDemoGeoCommunesMethodTrigger",
+);
 
 @customElement("demo-publish")
 export class DemoPublish extends LitElement {
@@ -124,6 +128,61 @@ export class DemoApiGet extends LitElement {
   }
 }
 
+@customElement("demo-api-get-method")
+export class DemoApiGetMethod extends LitElement {
+  static styles = [tailwind];
+
+  @state()
+  private payload?: ApiResult<GeoCommuneRow[]>;
+
+  connectedCallback() {
+    super.connectedCallback();
+    set(geoCommunesMethodTriggerKey, 0);
+  }
+
+  @get(geoCommunesApiGetEndpoint, docsDemoGeoApiConfigurationKey, {
+    triggerKey: geoCommunesMethodTriggerKey,
+  })
+  handlePayload(payload?: ApiResult<GeoCommuneRow[]>) {
+    this.payload = payload;
+  }
+
+  private refresh() {
+    dp(geoCommunesMethodTriggerKey).invalidate();
+  }
+
+  render() {
+    const rows = this.payload?.result ?? [];
+    return html`
+      <div class="space-y-3">
+        <div class="flex flex-wrap items-center gap-3">
+          <span class="text-sm font-medium">🗺️ GET function mode</span>
+          <sonic-button size="sm" @click=${this.refresh}>
+            Invalidate trigger
+          </sonic-button>
+        </div>
+        <p class="text-sm text-neutral-600 dark:text-neutral-400">
+          The <code>@get</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>
+        </p>
+        <ul class="grid gap-1 sm:grid-cols-2">
+          ${rows.slice(0, 6).map(
+            (commune) =>
+              html`<li class="text-sm">
+                ${commune.nom}
+                <span class="text-neutral-500">(${commune.code})</span>
+              </li>`,
+          )}
+        </ul>
+      </div>
+    `;
+  }
+}
+
 @customElement("demo-api-get-configuration-key")
 export class DemoApiGetConfigurationKey extends LitElement {
   static styles = [tailwind];

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

@@ -0,0 +1,128 @@
+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";
+
+import "../../core/components/functional/fetch/fetch";
+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";
+
+const missions = new Endpoint<unknown>("api/space-cats");
+const topForm = new DataProviderKey<{ top: number | string }>(
+  "jsonataTopForm",
+);
+
+const order = new Endpoint<unknown>("api/market-order");
+const taxForm = new DataProviderKey<{ taxPercent: number | string }>(
+  "jsonataTaxForm",
+);
+
+/** Cas 1 — groupby + top N (recalcul via form, sans refetch). */
+@customElement("docs-jsonata-space-cats-demo")
+export class DocsJsonataSpaceCatsDemo extends LitElement {
+  static styles = [tailwind];
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    set(topForm, { top: 3 });
+  }
+
+  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>
+
+        <sonic-fetch
+          dataProvider=${missions.path}
+          endPoint=${missions.path}
+          key="data"
+        ></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]]'
+        ></sonic-jsonata>
+
+        <sonic-list
+          dataProvider="spaceCatLeaderboard"
+          class="flex flex-col gap-1"
+          .items=${({ name, points }: { name: string; points: 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>
+            </div>`}
+        ></sonic-list>
+      </div>
+    `;
+  }
+}
+
+/** Cas 2 — totaux d’un tableau (somme + taxe via form). */
+@customElement("docs-jsonata-table-totals-demo")
+export class DocsJsonataTableTotalsDemo extends LitElement {
+  static styles = [tailwind];
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    set(taxForm, { taxPercent: 10 });
+  }
+
+  render() {
+    return html`
+      <div serviceURL=${DOCS_MOCK_API_BASE} class="flex flex-col gap-3">
+        <div formDataProvider=${taxForm.path} class="max-w-xs">
+          <sonic-input
+            name="taxPercent"
+            type="number"
+            label="Tax %"
+            value="10"
+          ></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}
+          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)
+            }
+          )'
+        ></sonic-jsonata>
+
+        <div dataProvider="marketOrderTotals" class="flex gap-6 text-sm">
+          <div>
+            <div class="text-neutral-400">Subtotal</div>
+            <sonic-value key="subtotal"></sonic-value>
+          </div>
+          <div>
+            <div class="text-neutral-400">Tax</div>
+            <sonic-value key="tax"></sonic-value>
+          </div>
+          <div>
+            <div class="text-neutral-400">Total</div>
+            <span class="font-semibold"><sonic-value key="grandTotal"></sonic-value></span>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/docs/mock-api/fixtures-jsonata.ts

@@ -0,0 +1,131 @@
+/**
+ * Fixtures fun pour démos / tests sonic-jsonata (hors billetterie).
+ */
+
+const avatar = (seed: string) =>
+  `https://i.pravatar.cc/150?u=${encodeURIComponent(seed)}`;
+
+/** Missions de chats spatiaux — groupby name + top N points. */
+export type SpaceCatMission = {
+  id: number;
+  name: string;
+  planet: string;
+  mission: string;
+  points: number;
+  avatar: string;
+};
+
+export const DOCS_SPACE_CAT_MISSIONS: SpaceCatMission[] = [
+  {
+    id: 1,
+    name: "Captain Whiskers",
+    planet: "Mars",
+    mission: "Laser hunt",
+    points: 40,
+    avatar: avatar("captain-whiskers"),
+  },
+  {
+    id: 2,
+    name: "Captain Whiskers",
+    planet: "Mars",
+    mission: "Dust nap",
+    points: 25,
+    avatar: avatar("captain-whiskers"),
+  },
+  {
+    id: 3,
+    name: "Nebula Paws",
+    planet: "Europa",
+    mission: "Ice fishing",
+    points: 55,
+    avatar: avatar("nebula-paws"),
+  },
+  {
+    id: 4,
+    name: "Astro Mittens",
+    planet: "Titan",
+    mission: "Methane surf",
+    points: 33,
+    avatar: avatar("astro-mittens"),
+  },
+  {
+    id: 5,
+    name: "Nebula Paws",
+    planet: "Europa",
+    mission: "Comet chase",
+    points: 20,
+    avatar: avatar("nebula-paws"),
+  },
+  {
+    id: 6,
+    name: "Professor Meowington",
+    planet: "Venus",
+    mission: "Cloud tasting",
+    points: 48,
+    avatar: avatar("prof-meowington"),
+  },
+  {
+    id: 7,
+    name: "Astro Mittens",
+    planet: "Titan",
+    mission: "Antenna polish",
+    points: 12,
+    avatar: avatar("astro-mittens"),
+  },
+  {
+    id: 8,
+    name: "Zero-G Socks",
+    planet: "Moon",
+    mission: "Flag knitting",
+    points: 61,
+    avatar: avatar("zero-g-socks"),
+  },
+];
+
+/** Sacs de café — groupby origin + filtre roast. */
+export type CoffeeBag = {
+  id: number;
+  origin: string;
+  roast: "light" | "medium" | "dark";
+  kg: number;
+  farm: string;
+};
+
+export const DOCS_COFFEE_BAGS: CoffeeBag[] = [
+  { id: 1, origin: "Ethiopia", roast: "light", kg: 12, farm: "Yirgacheffe Hills" },
+  { id: 2, origin: "Ethiopia", roast: "medium", kg: 8, farm: "Sidamo Ridge" },
+  { id: 3, origin: "Colombia", roast: "medium", kg: 15, farm: "Huila Valley" },
+  { id: 4, origin: "Colombia", roast: "dark", kg: 6, farm: "Cauca Peak" },
+  { id: 5, origin: "Brazil", roast: "dark", kg: 22, farm: "Minas Gerais" },
+  { id: 6, origin: "Brazil", roast: "medium", kg: 10, farm: "Cerrado" },
+  { id: 7, origin: "Guatemala", roast: "light", kg: 9, farm: "Antigua" },
+  { id: 8, origin: "Guatemala", roast: "dark", kg: 5, farm: "Huehuetenango" },
+  { id: 9, origin: "Ethiopia", roast: "light", kg: 4, farm: "Guji Forest" },
+];
+
+export function filterCoffeeBags(
+  bags: CoffeeBag[],
+  roast: string | null | undefined,
+): CoffeeBag[] {
+  const r = roast?.trim().toLowerCase();
+  if (!r || r === "all") return bags;
+  return bags.filter((b) => b.roast === r);
+}
+
+/** Lignes de commande (table) — total / moyenne par ligne. */
+export type MarketOrderLine = {
+  id: number;
+  name: string;
+  qty: number;
+  unitPrice: number;
+  category: string;
+};
+
+export const DOCS_MARKET_ORDER_LINES: MarketOrderLine[] = [
+  { id: 1, name: "Heirloom tomatoes", qty: 4, unitPrice: 3.5, category: "veg" },
+  { id: 2, name: "Sourdough loaf", qty: 2, unitPrice: 6.0, category: "bakery" },
+  { id: 3, name: "Goat cheese", qty: 1, unitPrice: 8.5, category: "dairy" },
+  { id: 4, name: "Honey jar", qty: 3, unitPrice: 5.2, category: "pantry" },
+  { id: 5, name: "Sunflowers", qty: 5, unitPrice: 2.0, category: "flowers" },
+  { id: 6, name: "Free-range eggs", qty: 2, unitPrice: 4.8, category: "dairy" },
+];

package/src/docs/mock-api/router.ts

@@ -8,6 +8,12 @@ import {
   type ReqresUserResponse,
   type ReqresUsersListResponse,
 } from "./fixtures";
+import {
+  DOCS_COFFEE_BAGS,
+  DOCS_MARKET_ORDER_LINES,
+  DOCS_SPACE_CAT_MISSIONS,
+  filterCoffeeBags,
+} from "./fixtures-jsonata";
 
 export const DOCS_MOCK_API_PREFIX = "/docs-mock-api";
 
@@ -241,6 +247,26 @@ export async function handleDocsMockApiRequest(
     return json(paginateUsers(url));
   }
 
+  if (subPath === "/api/space-cats") {
+    return json({
+      data: DOCS_SPACE_CAT_MISSIONS,
+      total: DOCS_SPACE_CAT_MISSIONS.length,
+    });
+  }
+
+  if (subPath === "/api/coffee-bags") {
+    const roast = url.searchParams.get("roast");
+    const data = filterCoffeeBags(DOCS_COFFEE_BAGS, roast);
+    return json({ data, total: data.length });
+  }
+
+  if (subPath === "/api/market-order") {
+    return json({
+      data: DOCS_MARKET_ORDER_LINES,
+      total: DOCS_MARKET_ORDER_LINES.length,
+    });
+  }
+
   if (subPath === "/geo/communes" || subPath.startsWith("/geo/communes")) {
     return json(geoCommunes(url), {
       headers: { "X-Fetched-At": new Date().toISOString() },

package/src/docs/navigation/navigation.ts

@@ -40,6 +40,10 @@ export class DocsNavigation extends LitElement {
     { label: "If", href: "#core/components/functional/if/if.md/if" },
     { label: "List", href: "#core/components/functional/list/list.md/list" },
     { label: "Mix", href: "#core/components/functional/mix/mix.md/mix" },
+    {
+      label: "Jsonata",
+      href: "#core/components/functional/jsonata/jsonata.md/jsonata",
+    },
     {
       label: "Queue",
       href: "#core/components/functional/queue/queue.md/queue",