@supersoniks/concorde 4.9.93 → 4.9.95

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",