@supersoniks/concorde 4.6.0 → 4.7.0

package/src/docs/example/users.ts

@@ -1,50 +1,67 @@
 import { html, LitElement, nothing } from "lit";
-import { customElement, property } from "lit/decorators.js";
+import { customElement, state } from "lit/decorators.js";
+import {
+  ancestorAttribute,
+  subscribe,
+} from "@supersoniks/concorde/core/decorators/Subscriber";
+import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
 import { tailwind } from "../tailwind";
 
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import "../../core/components/ui/image/image";
+import "../../core/components/ui/button/button";
+import "../../core/components/ui/icon/icon";
+
+/** Shape of a user row in the docs mock API and static demos. */
+export type DocsUserData = {
+  id?: string;
+  first_name: string;
+  last_name: string;
+  email: string;
+  avatar: string;
+};
+
+/**
+ * Row scope: resolved from the nearest ancestor `dataProvider`
+ * (static host, form preview, or `…/list-item/n` from sonic-list).
+ */
+export const docsUserRowKey = new DataProviderKey<
+  DocsUserData,
+  { dataProvider: string | null }
+>("${dataProvider}");
 
 @customElement("docs-user")
-export class user extends Subscriber(LitElement) {
-  // add tailwind
+export class DocsUser extends LitElement {
   static styles = [tailwind];
 
-  @property({ type: String }) id = "";
-  @property({ type: String }) avatar = "";
-  @property({ type: String }) first_name = "";
-  @property({ type: String }) email = "";
-  @property({ type: String }) last_name = "";
+  @ancestorAttribute("dataProvider")
+  dataProvider: string | null = null;
+
+  @subscribe(docsUserRowKey)
+  @state()
+  user: DocsUserData | null = null;
 
   render() {
+    const u = this.user;
+    if (!u) return nothing;
+
     return html`<div
       class="flex items-center gap-3 rounded-md hover:bg-neutral-50 -mx-2 p-2"
     >
       <sonic-image
-        src=${this.avatar}
+        src=${u.avatar}
         rounded="md"
         ratio="1/1"
         class="w-16 block"
       ></sonic-image>
       <div>
         <div>
-          ${this.first_name} <span class="font-bold">${this.last_name}</span>
+          ${u.first_name} <span class="font-bold">${u.last_name}</span>
         </div>
-        <div class="text-sm text-neutral-400">${this.email}</div>
+        <div class="text-sm text-neutral-400">${u.email}</div>
       </div>
       <div class="ml-auto relative">
-        ${this.id == "2" || this.id == "5"
-          ? html`
-              <sonic-badge
-                type="danger"
-                size="2xs"
-                class="absolute left-0 -top-1 z-10"
-              >
-                ${this.id}</sonic-badge
-              >
-            `
-          : nothing}
         <sonic-button
-          href="mailto:${this.email}"
+          href=${u.email ? `mailto:${u.email}` : undefined}
           size="sm"
           variant="outline"
           shape="circle"

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

@@ -0,0 +1,152 @@
+import { DOCS_MOCK_API_BASE } from "./urls";
+
+/** Bearer accepté par GET /api/config/protected */
+export const DOCS_MOCK_TOKEN_VALID = "docs-mock-valid-token";
+/** Déclenche HTTP 498 → renouvellement via tokenProvider */
+export const DOCS_MOCK_TOKEN_STALE = "docs-mock-stale-token";
+/** Émis par GET /auth/token après Basic auth ou eventsApiToken */
+export const DOCS_MOCK_TOKEN_FRESH = "docs-mock-fresh-token";
+
+const DOCS_MOCK_BASIC_USER = "demo";
+const DOCS_MOCK_BASIC_PASSWORD = "secret";
+/** Valeur de l’attribut ancêtre `eventsApiToken` (Bearer pour /auth/token) */
+export const DOCS_MOCK_EVENTS_API_TOKEN = "docs-mock-events-token";
+
+const WORDING_CATALOG: Record<string, Record<string, string>> = {
+  "api-config.greeting": { fr: "Bonjour", en: "Hello" },
+  "api-config.farewell": { fr: "Au revoir", en: "Goodbye" },
+  "api-config.hint": {
+    fr: "Libellés servis par le mock /wording/labels",
+    en: "Labels served by mock /wording/labels",
+  },
+};
+
+function json(body: unknown, init: ResponseInit = {}): Response {
+  const headers = new Headers(init.headers);
+  headers.set("Content-Type", "application/json; charset=utf-8");
+  headers.set("Access-Control-Allow-Origin", "*");
+  headers.set("X-Docs-Mock-Api", "concorde-api-config");
+  return new Response(JSON.stringify(body), { ...init, headers });
+}
+
+type ParsedAuth =
+  | { kind: "none" }
+  | { kind: "basic"; user: string; password: string }
+  | { kind: "bearer"; token: string };
+
+function parseAuthorization(request: Request): ParsedAuth {
+  const header = request.headers.get("authorization");
+  if (!header) return { kind: "none" };
+  const basic = header.match(/^Basic\s+(.+)$/i);
+  if (basic) {
+    try {
+      const decoded = atob(basic[1]);
+      const sep = decoded.indexOf(":");
+      if (sep < 0) return { kind: "none" };
+      return {
+        kind: "basic",
+        user: decoded.slice(0, sep),
+        password: decoded.slice(sep + 1),
+      };
+    } catch {
+      return { kind: "none" };
+    }
+  }
+  const bearer = header.match(/^Bearer\s+(.+)$/i);
+  if (bearer) return { kind: "bearer", token: bearer[1].trim() };
+  return { kind: "none" };
+}
+
+function isValidBasic(auth: ParsedAuth): boolean {
+  return (
+    auth.kind === "basic" &&
+    auth.user === DOCS_MOCK_BASIC_USER &&
+    auth.password === DOCS_MOCK_BASIC_PASSWORD
+  );
+}
+
+function wordingLabels(url: URL): Response {
+  const lang = url.searchParams.get("lang") || "fr";
+  const labels = url.searchParams.getAll("labels[]").length
+    ? url.searchParams.getAll("labels[]")
+    : url.searchParams.getAll("labels");
+  const result: Record<string, string> = {};
+  for (const key of labels) {
+    const entry = WORDING_CATALOG[key];
+    result[key] =
+      entry?.[lang] ?? entry?.en ?? `[missing:${key}]`;
+  }
+  return json({ lang, labels: result, ...result });
+}
+
+/**
+ * Routes mock pour la page doc APIConfiguration (token, 498, wording).
+ */
+export function handleApiConfigMockRequest(
+  request: Request,
+  subPath: string,
+  method: string,
+): Response | null {
+  if (subPath === "/auth/token" && method === "GET") {
+    const auth = parseAuthorization(request);
+    if (isValidBasic(auth)) {
+      return json({
+        token: DOCS_MOCK_TOKEN_FRESH,
+        source: "basic",
+        serviceHost: new URL(request.url).searchParams.get("serviceHost"),
+      });
+    }
+    if (
+      auth.kind === "bearer" &&
+      auth.token === DOCS_MOCK_EVENTS_API_TOKEN
+    ) {
+      return json({
+        token: DOCS_MOCK_TOKEN_FRESH,
+        source: "eventsApiToken",
+      });
+    }
+    return json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  if (subPath === "/api/config/protected" && method === "GET") {
+    const auth = parseAuthorization(request);
+    if (auth.kind === "bearer") {
+      if (auth.token === DOCS_MOCK_TOKEN_STALE) {
+        return json({ error: "Token expired", code: "token_stale" }, { status: 498 });
+      }
+      if (
+        auth.token === DOCS_MOCK_TOKEN_VALID ||
+        auth.token === DOCS_MOCK_TOKEN_FRESH
+      ) {
+        return json({
+          ok: true,
+          message: "Protected resource",
+          tokenUsed: auth.token,
+        });
+      }
+    }
+    if (isValidBasic(auth)) {
+      return json({
+        ok: true,
+        message: "Protected resource (basic)",
+        tokenUsed: null,
+      });
+    }
+    return json({ error: "Unauthorized" }, { status: 401 });
+  }
+
+  if (
+    (subPath === "/wording/labels" || subPath.startsWith("/wording/labels")) &&
+    method === "GET"
+  ) {
+    return wordingLabels(new URL(request.url));
+  }
+
+  return null;
+}
+
+export const API_CONFIG_MOCK_PATHS = [
+  `${DOCS_MOCK_API_BASE}/auth/token`,
+  `${DOCS_MOCK_API_BASE}/api/config/protected`,
+  `${DOCS_MOCK_API_BASE}/wording/labels`,
+] as const;

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

@@ -0,0 +1,377 @@
+/** Données type ReqRes pour les démos doc (sans appel externe). */
+
+export type ReqresUser = {
+  id: number;
+  email: string;
+  first_name: string;
+  last_name: string;
+  avatar: string;
+};
+
+const reqresAvatar = (seed: string) =>
+  `https://i.pravatar.cc/150?u=${encodeURIComponent(seed)}`;
+
+const REQRES_EXTRA_NAMES: [string, string][] = [
+  ["Michael", "Lawson"],
+  ["Tobias", "Funke"],
+  ["Lindsay", "Funke"],
+  ["Maeby", "Funke"],
+  ["George", "Michael"],
+  ["Annye", "Vang"],
+  ["Rachel", "Howe"],
+  ["Terry", "Medhurst"],
+  ["Bette", "Haag"],
+  ["Lester", "Solomon"],
+  ["April", "Douglas"],
+  ["Marian", "Roberts"],
+  ["Kathryn", "Murphy"],
+  ["Gloria", "Armstrong"],
+  ["Adam", "Bradley"],
+  ["Angela", "Hicks"],
+  ["Rose", "Wheeler"],
+  ["Sara", "Berry"],
+  ["Glen", "Kuhn"],
+  ["Roger", "Cox"],
+];
+
+function buildReqresUser(
+  id: number,
+  first_name: string,
+  last_name: string,
+): ReqresUser {
+  const slug = `${first_name}-${last_name}`.toLowerCase();
+  return {
+    id,
+    email: `${first_name.toLowerCase()}.${last_name.toLowerCase()}@example.com`,
+    first_name,
+    last_name,
+    avatar: reqresAvatar(slug),
+  };
+}
+
+/** Jeu étendu pour démos queue / lazyload (pagination par offset). */
+export const DOCS_REQRES_USERS: ReqresUser[] = [
+  buildReqresUser(1, "George", "Bluth"),
+  buildReqresUser(2, "Janet", "Weaver"),
+  buildReqresUser(3, "Emma", "Wong"),
+  buildReqresUser(4, "Eve", "Holt"),
+  ...REQRES_EXTRA_NAMES.map(([first_name, last_name], index) =>
+    buildReqresUser(5 + index, first_name, last_name),
+  ),
+];
+
+export type ReqresUserResponse = { data: ReqresUser };
+export type ReqresUsersListResponse = {
+  page: number;
+  per_page: number;
+  total: number;
+  total_pages: number;
+  data: ReqresUser[];
+};
+
+/** Filter users for mock search (`q` — first name, last name, email). Same logic as the TS starter. */
+export function filterDocsUsers(
+  users: ReqresUser[],
+  query: string | null | undefined,
+): ReqresUser[] {
+  const q = query?.trim().toLowerCase();
+  if (!q) return users;
+  return users.filter((user) => {
+    const haystack =
+      `${user.first_name} ${user.last_name} ${user.email}`.toLowerCase();
+    return haystack.includes(q);
+  });
+}
+
+export type GeoCommuneRow = { nom: string; code: string };
+
+export const DOCS_GEO_COMMUNES: GeoCommuneRow[] = [
+  { nom: "Paris", code: "75056" },
+  { nom: "Lyon", code: "69123" },
+  { nom: "Marseille", code: "13055" },
+  { nom: "Toulouse", code: "31555" },
+  { nom: "Lille", code: "59350" },
+  { nom: "Bordeaux", code: "33063" },
+  { nom: "Nantes", code: "44109" },
+  { nom: "Strasbourg", code: "67482" },
+  { nom: "Montpellier", code: "34172" },
+  { nom: "Rennes", code: "35238" },
+];
+
+/** JokeAPI-style content flags (checkbox / radio / switch blacklist demos). */
+export type DocsJokeFlagKey =
+  | "nsfw"
+  | "religious"
+  | "political"
+  | "racist"
+  | "sexist"
+  | "explicit";
+
+/** Forme proche de JokeAPI v2 (`key="jokes"` sur sonic-queue / list). */
+export type DocsJokeItem = {
+  categories: string[];
+  createdAt: string;
+  id: number;
+  joke: string;
+  lang: "fr" | "en";
+  flags: Record<DocsJokeFlagKey, boolean>;
+  safe: boolean;
+  type: string;
+  setup?: string;
+  delivery?: string;
+};
+
+const jokeFlags = (
+  partial: Partial<Record<DocsJokeFlagKey, boolean>> = {},
+): Record<DocsJokeFlagKey, boolean> => ({
+  nsfw: false,
+  religious: false,
+  political: false,
+  racist: false,
+  sexist: false,
+  explicit: false,
+  ...partial,
+});
+
+export type DocsJokeApiResponse = {
+  error: boolean;
+  amount: number;
+  jokes: DocsJokeItem[];
+};
+
+const SAMPLE_JOKES: DocsJokeItem[] = [
+  {
+    categories: ["Programming"],
+    createdAt: "2020-01-01 00:00:00",
+    id: 1,
+    lang: "en",
+    joke: "Why do programmers prefer dark mode? Because light attracts bugs.",
+    flags: jokeFlags(),
+    safe: true,
+    type: "single",
+  },
+  {
+    categories: ["Misc"],
+    createdAt: "2020-01-02 00:00:00",
+    id: 2,
+    lang: "en",
+    joke: "I told my computer I needed a break — it said: no problem, I'll go to sleep.",
+    flags: jokeFlags({ nsfw: true }),
+    safe: false,
+    type: "single",
+  },
+  {
+    categories: ["Pun"],
+    createdAt: "2020-01-03 00:00:00",
+    id: 3,
+    lang: "en",
+    joke: "Concorde docs run offline: even the API is a local joke.",
+    flags: jokeFlags(),
+    safe: true,
+    type: "single",
+  },
+  {
+    categories: ["Animals"],
+    createdAt: "2020-01-04 00:00:00",
+    id: 4,
+    lang: "en",
+    joke: "The dog ate my homework and my pull request.",
+    flags: jokeFlags({ political: true }),
+    safe: true,
+    type: "single",
+  },
+  {
+    categories: ["Animals", "Pun"],
+    createdAt: "2020-01-05 00:00:00",
+    id: 5,
+    lang: "fr",
+    joke: "Quel est le chien préféré des développeurs ? Le labrador Retriever.",
+    flags: jokeFlags(),
+    safe: true,
+    type: "single",
+  },
+  {
+    categories: ["Animals"],
+    createdAt: "2020-01-06 00:00:00",
+    id: 6,
+    lang: "fr",
+    joke: "Un chat et un chien discutent de TypeScript : le chien dit « woof », le chat compile.",
+    flags: jokeFlags({ racist: true }),
+    safe: false,
+    type: "single",
+  },
+  {
+    categories: ["Misc"],
+    createdAt: "2020-01-07 00:00:00",
+    id: 7,
+    lang: "fr",
+    joke: "Pourquoi les blagues offline sont-elles fiables ? Parce qu'elles passent par le Service Worker.",
+    flags: jokeFlags({ religious: true }),
+    safe: true,
+    type: "single",
+  },
+  {
+    categories: ["Programming"],
+    createdAt: "2020-01-08 00:00:00",
+    id: 8,
+    lang: "fr",
+    joke: "Mon compilateur et mon chien : tous deux ignorent mes commandes jusqu'au build.",
+    flags: jokeFlags({ sexist: true }),
+    safe: false,
+    type: "single",
+  },
+  {
+    categories: ["Misc"],
+    createdAt: "2020-01-09 00:00:00",
+    id: 9,
+    lang: "en",
+    joke: "A SQL query walks into a bar, walks up to two tables and asks: Can I join you?",
+    flags: jokeFlags({ explicit: true }),
+    safe: false,
+    type: "single",
+  },
+  {
+    categories: ["Pun"],
+    createdAt: "2020-01-10 00:00:00",
+    id: 10,
+    lang: "fr",
+    joke: "J'ai cherché « chien » dans la doc : le mock API a répondu.",
+    flags: jokeFlags(),
+    safe: true,
+    type: "single",
+  },
+  {
+    categories: ["Misc"],
+    createdAt: "2020-01-11 00:00:00",
+    id: 11,
+    lang: "en",
+    joke: "There are only two hard things in Computer Science: cache invalidation and naming things.",
+    flags: jokeFlags({ political: true, explicit: true }),
+    safe: false,
+    type: "single",
+  },
+  {
+    categories: ["Animals"],
+    createdAt: "2020-01-12 00:00:00",
+    id: 12,
+    lang: "fr",
+    joke: "Le golden retriever a récupéré la donnée du publisher.",
+    flags: jokeFlags({ racist: true, sexist: true }),
+    safe: false,
+    type: "two-liner",
+    setup: "Pourquoi le chien aime Concorde ?",
+    delivery: "Parce qu'il sait fetch.",
+  },
+  {
+    categories: ["Misc"],
+    createdAt: "2020-01-13 00:00:00",
+    id: 13,
+    lang: "en",
+    joke: "My code and my conscience: both have too many warnings.",
+    flags: jokeFlags(),
+    safe: true,
+    type: "single",
+  },
+  {
+    categories: ["Programming"],
+    createdAt: "2020-01-14 00:00:00",
+    id: 14,
+    lang: "en",
+    joke: "Git blame is just a mirror.",
+    flags: jokeFlags({ religious: true, political: true }),
+    safe: false,
+    type: "single",
+  },
+];
+
+/** `blacklistFlags` from queue filter form (comma-separated or repeated param). */
+export function parseBlacklistFlags(url: URL): DocsJokeFlagKey[] {
+  const keys = new Set<DocsJokeFlagKey>();
+  const valid: DocsJokeFlagKey[] = [
+    "nsfw",
+    "religious",
+    "political",
+    "racist",
+    "sexist",
+    "explicit",
+  ];
+  const add = (raw: string) => {
+    raw
+      .split(",")
+      .map((s) => s.trim().toLowerCase())
+      .forEach((part) => {
+        if (valid.includes(part as DocsJokeFlagKey)) keys.add(part as DocsJokeFlagKey);
+      });
+  };
+  url.searchParams.getAll("blacklistFlags").forEach(add);
+  const single = url.searchParams.get("blacklistFlags");
+  if (single) add(single);
+  return [...keys];
+}
+
+/** Exclude jokes that match any blacklisted flag (JokeAPI-style). */
+export function applyJokeBlacklist(
+  jokes: DocsJokeItem[],
+  blacklist: DocsJokeFlagKey[],
+): DocsJokeItem[] {
+  if (!blacklist.length) return jokes;
+  return jokes.filter(
+    (j) => !blacklist.some((flag) => j.flags[flag] === true),
+  );
+}
+
+/** Filtre doc joke queue (`contains`, `lang`, `blacklistFlags` via `dataFilterProvider`). */
+export function filterDocsJokes(
+  jokes: DocsJokeItem[],
+  url: URL,
+): DocsJokeItem[] {
+  let pool = jokes;
+  const contains = url.searchParams.get("contains")?.trim().toLowerCase();
+  if (contains) {
+    pool = pool.filter((j) => {
+      const haystack = [j.joke, j.setup, j.delivery, ...j.categories]
+        .filter(Boolean)
+        .join(" ")
+        .toLowerCase();
+      return haystack.includes(contains);
+    });
+  }
+  const lang = url.searchParams.get("lang")?.trim().toLowerCase();
+  if (lang === "fr" || lang === "en") {
+    pool = pool.filter((j) => j.lang === lang);
+  }
+  pool = applyJokeBlacklist(pool, parseBlacklistFlags(url));
+  return pool;
+}
+
+/**
+ * Réponse type JokeAPI v2.
+ * - `amount` : taille du lot si pas de `offset`
+ * - `offset` + `limit` / `per_page` : pagination (sonic-queue lazy)
+ * - `contains`, `lang`, `blacklistFlags` : filtres formulaire (queue « Remove following jokes »)
+ */
+export function buildJokeApiResponse(url: URL): DocsJokeApiResponse {
+  const pool = filterDocsJokes(SAMPLE_JOKES, url);
+  const amount = Math.max(
+    1,
+    parseInt(url.searchParams.get("amount") || "10", 10),
+  );
+  const hasOffset = url.searchParams.has("offset");
+  const limit = Math.max(
+    1,
+    parseInt(
+      url.searchParams.get("limit") ||
+        url.searchParams.get("per_page") ||
+        String(amount),
+      10,
+    ),
+  );
+  const offset = Math.max(0, parseInt(url.searchParams.get("offset") || "0", 10));
+  const start = hasOffset ? offset : 0;
+  const count = hasOffset ? limit : amount;
+  const jokes = pool.slice(start, start + count).map((j, i) => ({
+    ...j,
+    id: start + i + 1,
+  }));
+  return { error: false, amount: jokes.length, jokes };
+}

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

@@ -0,0 +1,25 @@
+const SW_URL = "/docs-mock-api-sw.js";
+
+/** Enregistre le SW qui sert /docs-mock-api/* (démos doc hors ligne des APIs tierces). */
+export async function registerDocsMockApiServiceWorker(): Promise<
+  ServiceWorkerRegistration | undefined
+> {
+  if (!("serviceWorker" in navigator)) {
+    console.warn("[docs-mock-api] Service Workers not supported");
+    return undefined;
+  }
+
+  try {
+    const registration = await navigator.serviceWorker.register(SW_URL, {
+      scope: "/",
+    });
+    if (registration.waiting) {
+      await registration.update();
+    }
+    await navigator.serviceWorker.ready;
+    return registration;
+  } catch (error) {
+    console.error("[docs-mock-api] Service Worker registration failed", error);
+    return undefined;
+  }
+}