@supersoniks/concorde 4.2.1 → 4.3.0

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

@@ -0,0 +1,324 @@
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import {
+  get,
+  publish,
+  subscribe,
+} from "@supersoniks/concorde/decorators";
+import type {
+  APIConfiguration,
+  ApiGetResult,
+} from "@supersoniks/concorde/core/utils/api";
+import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
+import { sub } from "@supersoniks/concorde/directives";
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { tailwind } from "../tailwind";
+import "./decorators-demo-init";
+import {
+  docsDemoDynApiConfKeyTemplate,
+  docsDemoGeoApiConfigurationKey,
+  geoCommunesApiGetEndpoint,
+  geoCommunesApiGetEndpointDynamic,
+  geoCommunesApiGetPublishKey,
+  type GeoCommuneRow,
+} from "./decorators-demo-geo";
+
+type PublishDemoData = {
+  email: string;
+  message: string;
+};
+
+const publishDemoKey = new DataProviderKey<PublishDemoData>("publishDemo");
+
+@customElement("demo-publish")
+export class DemoPublish extends LitElement {
+  static styles = [tailwind];
+
+  @publish(publishDemoKey.email)
+  @state()
+  email = "";
+
+  @publish(publishDemoKey.message)
+  @state()
+  message = "";
+
+  connectedCallback() {
+    super.connectedCallback();
+    PublisherManager.get("publishDemo").set({ email: "", message: "" });
+  }
+
+  render() {
+    return html`
+      <div class="space-y-4">
+        <p class="text-sm text-neutral-600 dark:text-neutral-400">
+          Les champs publient vers le publisher ; les valeurs ci-dessous passent
+          par <code>sub()</code>.
+        </p>
+        <sonic-input
+          .value=${this.email}
+          @input=${(e: Event) =>
+            (this.email = (e.target as HTMLInputElement).value)}
+          label="Email"
+          placeholder="your@email.com"
+        ></sonic-input>
+        <sonic-input
+          .value=${this.message}
+          @input=${(e: Event) =>
+            (this.message = (e.target as HTMLInputElement).value)}
+          label="Message"
+          placeholder="Type a message..."
+        ></sonic-input>
+        <div
+          class="rounded border border-neutral-200 dark:border-neutral-700 p-3"
+        >
+          <p
+            class="text-xs font-medium text-neutral-500 dark:text-neutral-400 mb-1"
+          >
+            Published values (from sub):
+          </p>
+          <p>Email: ${sub("publishDemo.email") || "—"}</p>
+          <p>Message: ${sub("publishDemo.message") || "—"}</p>
+        </div>
+      </div>
+    `;
+  }
+}
+
+@customElement("demo-api-get")
+export class DemoApiGet extends LitElement {
+  static styles = [tailwind];
+
+  @get(geoCommunesApiGetEndpoint, docsDemoGeoApiConfigurationKey)
+  @state()
+  geoApiPayload?: ApiGetResult<GeoCommuneRow[]>;
+
+  render() {
+    const rows = this.geoApiPayload?.result;
+    const status = this.geoApiPayload?.response?.status;
+    return html`
+      <div class="space-y-2">
+        <p class="text-sm text-neutral-600 dark:text-neutral-400">
+          <code>@get</code> — même service que
+          <code>sonic-queue</code> (<code>https://geo.api.gouv.fr/</code>).
+          Propriété typée <code>ApiGetResult&lt;T&gt;</code>.
+        </p>
+        ${status != null
+          ? html`<p class="text-xs text-neutral-500">HTTP ${status}</p>`
+          : ""}
+        ${this.geoApiPayload === null
+          ? html`<p class="text-neutral-500">Chargement…</p>`
+          : !rows || rows.length === 0
+            ? html`<p class="text-neutral-500">Aucune commune</p>`
+            : html`
+                <ul class="list-disc pl-5 space-y-1">
+                  ${rows.map(
+                    (c) =>
+                      html`<li>
+                        <span class="font-medium">${c.nom}</span>
+                        <span class="text-neutral-500 text-sm">
+                          — ${c.code}</span
+                        >
+                      </li>`,
+                  )}
+                </ul>
+              `}
+      </div>
+    `;
+  }
+}
+
+@customElement("demo-api-get-configuration-key")
+export class DemoApiGetConfigurationKey extends LitElement {
+  static styles = [tailwind];
+
+  @property({ type: String })
+  configSlot: "A" | "B" = "A";
+
+  @property({ type: Number })
+  communeLimit = 5;
+
+  @get(geoCommunesApiGetEndpointDynamic, docsDemoDynApiConfKeyTemplate)
+  @state()
+  geoApiPayloadDyn?: ApiGetResult<GeoCommuneRow[]>;
+
+  private touchCurrentConfigPublisher() {
+    const id = `docsDemoDynApiConf${this.configSlot}`;
+    const pub = PublisherManager.get(id);
+    const cur = pub.get() as APIConfiguration;
+    pub.set({
+      ...cur,
+      blockUntilDone: !cur.blockUntilDone,
+    });
+  }
+
+  render() {
+    const rows = this.geoApiPayloadDyn?.result;
+    const status = this.geoApiPayloadDyn?.response?.status;
+    return html`
+      <div class="space-y-3">
+        <p class="text-sm text-neutral-600 dark:text-neutral-400">
+          Config dynamique (<code>docsDemoDynApiConf\${configSlot}</code>) +
+          path d’endpoint avec <code>communeLimit</code>. « Toucher la config »
+          déclenche un nouveau GET.
+        </p>
+        <div class="flex flex-wrap gap-2 items-center">
+          <span class="text-xs text-neutral-500">Limite API :</span>
+          ${[3, 5, 10].map(
+            (n) => html`
+              <sonic-button
+                size="sm"
+                type=${this.communeLimit === n ? "primary" : "neutral"}
+                @click=${() => {
+                  this.communeLimit = n;
+                }}
+                >${n}</sonic-button
+              >
+            `,
+          )}
+        </div>
+        <div class="flex flex-wrap gap-2 items-center">
+          <span class="text-xs text-neutral-500">Publisher config :</span>
+          <sonic-button
+            size="sm"
+            type=${this.configSlot === "A" ? "primary" : "neutral"}
+            @click=${() => {
+              this.configSlot = "A";
+            }}
+            >docsDemoDynApiConfA</sonic-button
+          >
+          <sonic-button
+            size="sm"
+            type=${this.configSlot === "B" ? "primary" : "neutral"}
+            @click=${() => {
+              this.configSlot = "B";
+            }}
+            >docsDemoDynApiConfB</sonic-button
+          >
+          <sonic-button
+            size="sm"
+            @click=${() => this.touchCurrentConfigPublisher()}
+            >Toucher la config</sonic-button
+          >
+        </div>
+        ${status != null
+          ? html`<p class="text-xs text-neutral-500">
+              HTTP ${status} · limit=${this.communeLimit} · conf=
+              docsDemoDynApiConf${this.configSlot}
+            </p>`
+          : ""}
+        ${this.geoApiPayloadDyn === null
+          ? html`<p class="text-neutral-500">Chargement…</p>`
+          : !rows || rows.length === 0
+            ? html`<p class="text-neutral-500">Aucune commune</p>`
+            : html`
+                <ul class="list-disc pl-5 space-y-1">
+                  ${rows.map(
+                    (c) =>
+                      html`<li>
+                        <span class="font-medium">${c.nom}</span>
+                        <span class="text-neutral-500 text-sm">
+                          — ${c.code}</span
+                        >
+                      </li>`,
+                  )}
+                </ul>
+              `}
+      </div>
+    `;
+  }
+}
+
+@customElement("demo-api-get-publish-subscribe")
+export class DemoApiGetPublishSubscribe extends LitElement {
+  static styles = [tailwind];
+
+  @get(geoCommunesApiGetEndpoint)
+  @publish(geoCommunesApiGetPublishKey)
+  @state()
+  geoApiPayloadPublished: ApiGetResult<GeoCommuneRow[]> | null = null;
+
+  @state()
+  @subscribe(geoCommunesApiGetPublishKey.result)
+  geoCommunesFromSubscribe: GeoCommuneRow[] | null = null;
+
+  render() {
+    const rows =
+      this.geoCommunesFromSubscribe ?? this.geoApiPayloadPublished?.result;
+    const status = this.geoApiPayloadPublished?.response?.status;
+    return html`
+      <div class="space-y-2">
+        <p class="text-sm text-neutral-600 dark:text-neutral-400">
+          <code>@get</code> (scoped) + <code>@publish</code> sur la clé du
+          payload + <code>@subscribe</code> sur <code>.result</code> — même
+          rendu que <code>&lt;demo-api-get&gt;</code> (doc @get).
+        </p>
+        ${status != null
+          ? html`<p class="text-xs text-neutral-500">HTTP ${status}</p>`
+          : ""}
+        ${this.geoApiPayloadPublished === null
+          ? html`<p class="text-neutral-500">Chargement…</p>`
+          : !rows || rows.length === 0
+            ? html`<p class="text-neutral-500">Aucune commune</p>`
+            : html`
+                <ul class="list-disc pl-5 space-y-1">
+                  ${rows.map(
+                    (c) =>
+                      html`<li>
+                        <span class="font-medium">${c.nom}</span>
+                        <span class="text-neutral-500 text-sm">
+                          — ${c.code}</span
+                        >
+                      </li>`,
+                  )}
+                </ul>
+              `}
+      </div>
+    `;
+  }
+}
+
+type User = { firstName: string; lastName: string; email: string };
+
+@customElement("demo-subscribe-dynamic")
+export class DemoSubscribeDynamic extends LitElement {
+  static styles = [tailwind];
+
+  @property({ type: Number })
+  userIndex = 0;
+
+  @subscribe(new DataProviderKey<User>("demoUsers.${userIndex}"))
+  @state()
+  user: User | null = null;
+
+  render() {
+    return html`
+      <div class="space-y-4">
+        <p class="text-sm text-neutral-600 dark:text-neutral-400">
+          <code>@subscribe</code> avec chemin dynamique
+          <code>demoUsers.\${userIndex}</code>
+        </p>
+        <sonic-input
+          type="number"
+          .value=${String(this.userIndex)}
+          @input=${(e: Event) =>
+            (this.userIndex = parseInt((e.target as HTMLInputElement).value))}
+          min="0"
+          max="9"
+          label="User index"
+        ></sonic-input>
+        ${this.user
+          ? html`
+              <div
+                class="rounded border border-neutral-200 dark:border-neutral-700 p-3"
+              >
+                <p>${this.user.firstName} ${this.user.lastName}</p>
+                <p class="text-sm text-neutral-500">${this.user.email}</p>
+              </div>
+            `
+          : html`<p class="text-neutral-500">
+              No user at index ${this.userIndex}
+            </p>`}
+      </div>
+    `;
+  }
+}