@supersoniks/concorde 4.6.0 → 4.7.0

package/src/docs/example/docs-api-config-demos.ts

@@ -0,0 +1,234 @@
+import { html, LitElement, nothing } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import { get } from "@supersoniks/concorde/core/decorators/api";
+import type { ApiGetResult } from "@supersoniks/concorde/core/utils/api";
+import { Endpoint } from "@supersoniks/concorde/core/utils/endpoint";
+import { set } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { wording } from "@supersoniks/concorde/core/directives/Wording";
+import { DOCS_MOCK_API_BASE } from "../mock-api/urls";
+import {
+  DOCS_MOCK_EVENTS_API_TOKEN,
+  DOCS_MOCK_TOKEN_FRESH,
+  DOCS_MOCK_TOKEN_STALE,
+  DOCS_MOCK_TOKEN_VALID,
+} from "../mock-api/api-config-mock";
+import {
+  docsApiConfBearerKey,
+  docsApiConfStaleTokenKey,
+  docsApiConfTokenProviderKey,
+  docsApiConfWordingVersionKey,
+} from "./docs-provider-keys";
+import { tailwind } from "../tailwind";
+
+import "../../core/components/functional/fetch/fetch";
+import "../../core/components/functional/sonic-scope/sonic-scope";
+import "../../core/components/ui/button/button";
+
+type ProtectedResult = {
+  ok?: boolean;
+  message?: string;
+  tokenUsed?: string | null;
+  error?: string;
+};
+
+const protectedEndpoint = new Endpoint<ProtectedResult>("api/config/protected");
+
+function resultPanel(payload: ApiGetResult<ProtectedResult> | null | undefined) {
+  const status = payload?.response?.status;
+  const r = payload?.result;
+  if (payload === null) {
+    return html`<p class="text-sm text-neutral-500">Loading…</p>`;
+  }
+  if (!payload?.response) {
+    return html`<p class="text-sm text-neutral-500">Waiting for request…</p>`;
+  }
+  return html`
+    <p class="text-sm">
+      HTTP <span class="font-mono">${status}</span>
+      ${r?.message
+        ? html` — <span class="font-medium">${r.message}</span>`
+        : r?.error
+          ? html` — <span class="text-red-600">${r.error}</span>`
+          : nothing}
+      ${r?.tokenUsed
+        ? html`<span class="block text-xs text-neutral-500 mt-1"
+            >token: ${r.tokenUsed}</span
+          >`
+        : nothing}
+    </p>
+  `;
+}
+
+/** Static Bearer token on APIConfiguration (`token` attribute / publisher). */
+@customElement("docs-api-config-bearer-demo")
+export class DocsApiConfigBearerDemo extends LitElement {
+  static styles = [tailwind];
+
+  @get(protectedEndpoint, docsApiConfBearerKey)
+  @state()
+  private payload: ApiGetResult<ProtectedResult> | null = null;
+
+  render() {
+    return html`
+      <p class="mb-2 text-sm text-neutral-600">
+        Config <code>${docsApiConfBearerKey.path}</code> —
+        <code>token="${DOCS_MOCK_TOKEN_VALID}"</code>
+      </p>
+      ${resultPanel(this.payload)}
+    `;
+  }
+}
+
+/** Basic auth + <code>tokenProvider</code> → GET <code>/auth/token</code> then Bearer. */
+@customElement("docs-api-config-token-provider-demo")
+export class DocsApiConfigTokenProviderDemo extends LitElement {
+  static styles = [tailwind];
+
+  @get(protectedEndpoint, docsApiConfTokenProviderKey)
+  @state()
+  private payload: ApiGetResult<ProtectedResult> | null = null;
+
+  render() {
+    return html`
+      <p class="mb-2 text-sm text-neutral-600">
+        <code>userName</code> / <code>password</code> +
+        <code>tokenProvider="auth/token"</code> (no static
+        <code>token</code>)
+      </p>
+      ${resultPanel(this.payload)}
+    `;
+  }
+}
+
+/** Stale Bearer → HTTP 498 → refresh via <code>tokenProvider</code> → retry. */
+@customElement("docs-api-config-stale-token-demo")
+export class DocsApiConfigStaleTokenDemo extends LitElement {
+  static styles = [tailwind];
+
+  @get(protectedEndpoint, docsApiConfStaleTokenKey)
+  @state()
+  private payload: ApiGetResult<ProtectedResult> | null = null;
+
+  render() {
+    const refreshed =
+      this.payload?.result?.tokenUsed === DOCS_MOCK_TOKEN_FRESH;
+    return html`
+      <p class="mb-2 text-sm text-neutral-600">
+        Starts with <code>token="${DOCS_MOCK_TOKEN_STALE}"</code> (mock returns
+        498), then <code>auth()</code> fetches
+        <code>${DOCS_MOCK_TOKEN_FRESH}</code>.
+      </p>
+      ${resultPanel(this.payload)}
+      ${refreshed
+        ? html`<p class="mt-1 text-xs text-green-700">
+            Retry succeeded with refreshed token.
+          </p>`
+        : nothing}
+    `;
+  }
+}
+
+/** Ancestor attributes: <code>wordingProvider</code> + directive <code>wording()</code>. */
+@customElement("docs-api-config-wording-demo")
+export class DocsApiConfigWordingDemo extends LitElement {
+  static styles = [tailwind];
+
+  render() {
+    return html`
+      <div
+        serviceURL=${DOCS_MOCK_API_BASE}
+        wordingProvider="wording/labels?lang=fr"
+        wordingVersionProvider=${docsApiConfWordingVersionKey.path}
+      >
+        <p class="text-sm space-y-2">
+          <span class="block">${wording("api-config.greeting")}</span>
+          <span class="block">${wording("api-config.farewell")}</span>
+          <span class="block text-neutral-500"
+            >${wording("api-config.hint")}</span
+          >
+        </p>
+        <sonic-button
+          size="sm"
+          class="mt-3"
+          @click=${() => set(docsApiConfWordingVersionKey, Date.now())}
+          >Bump wording version (reload)</sonic-button
+        >
+      </div>
+    `;
+  }
+}
+
+/** Scoped attributes on <code>sonic-scope</code> (read by <code>HTML.getApiConfiguration</code>). */
+@customElement("docs-api-config-scoped-attrs-demo")
+export class DocsApiConfigScopedAttrsDemo extends LitElement {
+  static styles = [tailwind];
+
+  render() {
+    return html`
+      <sonic-scope
+        serviceURL=${DOCS_MOCK_API_BASE}
+        token=${DOCS_MOCK_TOKEN_VALID}
+        credentials="same-origin"
+        addHTTPResponse
+        class="text-sm space-y-2 block"
+      >
+        <p>
+          Descendant components inherit
+          <code>serviceURL</code>, <code>token</code>,
+          <code>credentials</code>, <code>addHTTPResponse</code> from this
+          scope (see table above).
+        </p>
+        <sonic-fetch dataProvider=${protectedEndpoint.path}></sonic-fetch>
+        <sonic-button dataProvider=${protectedEndpoint.path} debug
+          >Hover — protected fetch payload</sonic-button
+        >
+      </sonic-scope>
+    `;
+  }
+}
+
+/** <code>eventsApiToken</code> → Bearer on <code>/auth/token</code> (no Basic). */
+@customElement("docs-api-config-events-token-demo")
+export class DocsApiConfigEventsTokenDemo extends LitElement {
+  static styles = [tailwind];
+
+  @state()
+  private token: string | null = null;
+
+  @state()
+  private error: string | null = null;
+
+  async connectedCallback() {
+    super.connectedCallback();
+    try {
+      const res = await fetch(
+        `${DOCS_MOCK_API_BASE}/auth/token?serviceHost=${encodeURIComponent(window.location.origin)}`,
+        {
+          headers: {
+            Authorization: `Bearer ${DOCS_MOCK_EVENTS_API_TOKEN}`,
+          },
+        },
+      );
+      const data = (await res.json()) as { token?: string; error?: string };
+      if (res.ok && data.token) this.token = data.token;
+      else this.error = data.error ?? `HTTP ${res.status}`;
+    } catch (e) {
+      this.error = String(e);
+    }
+  }
+
+  render() {
+    return html`
+      <p class="text-sm text-neutral-600 mb-2">
+        Ancêtre <code>eventsApiToken</code> (mapped to
+        <code>authToken</code> in config) — utilisé par
+        <code>API.auth()</code> pour appeler <code>tokenProvider</code>.
+      </p>
+      ${this.token
+        ? html`<p class="font-mono text-sm">token: ${this.token}</p>`
+        : this.error
+          ? html`<p class="text-red-600 text-sm">${this.error}</p>`
+          : html`<p class="text-sm text-neutral-500">Loading…</p>`}
+    `;
+  }
+}

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

@@ -0,0 +1,297 @@
+import { html, LitElement, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import {
+  ancestorAttribute,
+  subscribe,
+} from "@supersoniks/concorde/core/decorators/Subscriber";
+import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
+import { DOCS_MOCK_JOKES_SERVICE } from "../mock-api/urls";
+import {
+  docsJokeCheckboxFilterKey,
+  docsJokeInputFilterKey,
+  docsJokeRadioFilterKey,
+  docsJokeSelectFilterKey,
+  docsJokeSwitchFilterKey,
+} from "./docs-provider-keys";
+import { tailwind } from "../tailwind";
+
+import "../../core/components/functional/queue/queue";
+import "../../core/components/ui/form/input/input";
+import "../../core/components/ui/form/select/select";
+import "../../core/components/ui/form/checkbox/checkbox";
+import "../../core/components/ui/form/radio/radio";
+import "../../core/components/ui/form/switch/switch";
+
+type JokeRow = {
+  joke: string;
+  setup?: string;
+  delivery?: string;
+};
+
+const jokeRowKey = new DataProviderKey<
+  JokeRow,
+  { dataProvider: string | null }
+>("${dataProvider}");
+
+const filterFieldKey = new DataProviderKey<
+  string,
+  { filterProvider: string; field: string }
+>("${filterProvider}.${field}");
+
+@customElement("docs-joke-item")
+export class DocsJokeItem extends LitElement {
+  static styles = [tailwind];
+
+  @ancestorAttribute("dataProvider")
+  dataProvider: string | null = null;
+
+  @subscribe(jokeRowKey)
+  @state()
+  row: JokeRow | null = null;
+
+  render() {
+    const r = this.row;
+    if (!r) return nothing;
+    return html`
+      <div
+        class="space-y-1 border-0 border-b border-dotted border-neutral-300 py-3"
+      >
+        <div>${r.joke}</div>
+        ${r.setup
+          ? html`<div class="text-sm text-neutral-500">${r.setup}</div>`
+          : nothing}
+        ${r.delivery
+          ? html`<div class="text-sm text-neutral-500">${r.delivery}</div>`
+          : nothing}
+      </div>
+    `;
+  }
+}
+
+@customElement("docs-joke-filter-caption")
+export class DocsJokeFilterCaption extends LitElement {
+  @property() filterProvider = "";
+  @property() field = "";
+  @property() label = "";
+
+  @subscribe(filterFieldKey)
+  @state()
+  value = "";
+
+  render() {
+    return html`
+      <p class="my-4 block text-xl font-bold">
+        ${this.label} « <span class="text-info">${this.value || "…"}</span> » :
+      </p>
+    `;
+  }
+}
+
+@customElement("docs-joke-queue")
+export class DocsJokeQueue extends LitElement {
+  @property() filterProvider = "";
+  @property() expression = "joke/Any?amount=10&lang=fr";
+
+  private jokeItem = () => html`<docs-joke-item></docs-joke-item>`;
+
+  render() {
+    return html`
+      <sonic-queue
+        lazyload
+        dataProviderExpression=${this.expression}
+        dataFilterProvider=${this.filterProvider}
+        serviceURL=${DOCS_MOCK_JOKES_SERVICE}
+        key="jokes"
+        .items=${this.jokeItem}
+      ></sonic-queue>
+    `;
+  }
+}
+
+@customElement("docs-joke-search-demo")
+export class DocsJokeSearchDemo extends LitElement {
+  static styles = [tailwind];
+
+  render() {
+    return html`
+      <sonic-input
+        formDataProvider=${docsJokeInputFilterKey.path}
+        name="contains"
+        value="chien"
+        class="mb-4"
+      ></sonic-input>
+      <docs-joke-filter-caption
+        filterProvider=${docsJokeInputFilterKey.path}
+        field="contains"
+        label="Blagues trouvées pour"
+      ></docs-joke-filter-caption>
+      <docs-joke-queue
+        filterProvider=${docsJokeInputFilterKey.path}
+        expression="joke/Any?amount=10&lang=fr"
+      ></docs-joke-queue>
+    `;
+  }
+}
+
+@customElement("docs-joke-lang-demo")
+export class DocsJokeLangDemo extends LitElement {
+  static styles = [tailwind];
+
+  render() {
+    return html`
+      <sonic-select
+        formDataProvider=${docsJokeSelectFilterKey.path}
+        name="lang"
+        value="fr"
+      >
+        <option value="fr">fr</option>
+        <option value="en">en</option>
+      </sonic-select>
+      <docs-joke-filter-caption
+        filterProvider=${docsJokeSelectFilterKey.path}
+        field="lang"
+        label="Blagues pour la langue"
+      ></docs-joke-filter-caption>
+      <docs-joke-queue
+        filterProvider=${docsJokeSelectFilterKey.path}
+        expression="joke/Any?amount=10"
+      ></docs-joke-queue>
+    `;
+  }
+}
+
+const jokeQueueRow = (row: JokeRow) => html`
+  <div class="border-0 border-b border-neutral-300 py-3 leading-tight">
+    <div>${row.joke}</div>
+    ${row.setup ? html`<div class="font-bold">${row.setup}</div>` : nothing}
+    ${row.delivery ? html`<div>${row.delivery}</div>` : nothing}
+  </div>
+`;
+
+const BLACKLIST_CONTROLS = html`
+  <sonic-checkbox name="blacklistFlags" value="nsfw">nsfw</sonic-checkbox>
+  <sonic-checkbox name="blacklistFlags" value="religious">religious</sonic-checkbox>
+  <sonic-checkbox name="blacklistFlags" value="political">political</sonic-checkbox>
+  <sonic-checkbox name="blacklistFlags" value="racist" checked>racist</sonic-checkbox>
+  <sonic-checkbox name="blacklistFlags" value="sexist" checked>sexist</sonic-checkbox>
+  <sonic-checkbox name="blacklistFlags" value="explicit">explicit</sonic-checkbox>
+`;
+
+/** Checkbox — « Remove following jokes » (blacklistFlags → mock API). */
+@customElement("docs-joke-blacklist-demo")
+export class DocsJokeBlacklistDemo extends LitElement {
+  static styles = [tailwind];
+
+  private items = jokeQueueRow;
+
+  render() {
+    return html`
+      <p class="my-4 block text-xl font-bold">Remove following jokes :</p>
+      <div
+        formDataProvider=${docsJokeCheckboxFilterKey.path}
+        class="mb-3 grid grid-cols-2 gap-x-6 gap-y-2 lg:grid-cols-3"
+      >
+        ${BLACKLIST_CONTROLS}
+      </div>
+      <sonic-queue
+        lazyload
+        dataProviderExpression="joke/Any?offset=$offset&limit=$limit&lang=en"
+        dataFilterProvider=${docsJokeCheckboxFilterKey.path}
+        serviceURL=${DOCS_MOCK_JOKES_SERVICE}
+        key="jokes"
+        limit="5"
+        class="grid max-h-96 overflow-y-auto"
+        .items=${this.items}
+        debug
+      ></sonic-queue>
+    `;
+  }
+}
+
+/** Radio group — same API, single `blacklistFlags` value. */
+@customElement("docs-joke-blacklist-radio-demo")
+export class DocsJokeBlacklistRadioDemo extends LitElement {
+  static styles = [tailwind];
+
+  private items = jokeQueueRow;
+
+  render() {
+    return html`
+      <p class="my-4 block text-xl font-bold">Remove following jokes :</p>
+      <div
+        formDataProvider=${docsJokeRadioFilterKey.path}
+        class="mb-3 grid grid-cols-2 gap-x-6 gap-y-2 lg:grid-cols-3"
+      >
+        <sonic-radio name="blacklistFlags" value="nsfw">nsfw</sonic-radio>
+        <sonic-radio name="blacklistFlags" value="religious"
+          >religious</sonic-radio
+        >
+        <sonic-radio name="blacklistFlags" value="political"
+          >political</sonic-radio
+        >
+        <sonic-radio name="blacklistFlags" value="racist" checked
+          >racist</sonic-radio
+        >
+        <sonic-radio name="blacklistFlags" value="sexist">sexist</sonic-radio>
+        <sonic-radio name="blacklistFlags" value="explicit"
+          >explicit</sonic-radio
+        >
+      </div>
+      <sonic-queue
+        lazyload
+        dataProviderExpression="joke/Any?offset=$offset&limit=$limit&lang=en"
+        dataFilterProvider="jokeFilterRadio"
+        serviceURL=${DOCS_MOCK_JOKES_SERVICE}
+        key="jokes"
+        limit="5"
+        class="grid max-h-96 overflow-y-auto"
+        .items=${this.items}
+        debug
+      ></sonic-queue>
+    `;
+  }
+}
+
+/** Switch — same blacklist filter. */
+@customElement("docs-joke-blacklist-switch-demo")
+export class DocsJokeBlacklistSwitchDemo extends LitElement {
+  static styles = [tailwind];
+
+  private items = jokeQueueRow;
+
+  render() {
+    return html`
+      <p class="my-4 block text-xl font-bold">Remove following jokes :</p>
+      <div
+        formDataProvider=${docsJokeSwitchFilterKey.path}
+        class="mb-3 grid grid-cols-2 gap-x-6 gap-y-2 lg:grid-cols-3"
+      >
+        <sonic-switch name="blacklistFlags" value="nsfw">nsfw</sonic-switch>
+        <sonic-switch name="blacklistFlags" value="religious"
+          >religious</sonic-switch
+        >
+        <sonic-switch name="blacklistFlags" value="political"
+          >political</sonic-switch
+        >
+        <sonic-switch name="blacklistFlags" value="racist" checked
+          >racist</sonic-switch
+        >
+        <sonic-switch name="blacklistFlags" value="sexist">sexist</sonic-switch>
+        <sonic-switch name="blacklistFlags" value="explicit"
+          >explicit</sonic-switch
+        >
+      </div>
+      <sonic-queue
+        lazyload
+        dataProviderExpression="joke/Any?offset=$offset&limit=$limit&lang=en"
+        dataFilterProvider=${docsJokeSwitchFilterKey.path}
+        serviceURL=${DOCS_MOCK_JOKES_SERVICE}
+        key="jokes"
+        limit="5"
+        class="grid max-h-96 overflow-y-auto"
+        .items=${this.items}
+        debug
+      ></sonic-queue>
+    `;
+  }
+}