@supersoniks/concorde 4.5.2 → 4.7.0

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>
+    `;
+  }
+}

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

@@ -0,0 +1,179 @@
+import { html, LitElement, nothing } from "lit";
+import { customElement } from "lit/decorators.js";
+import { tailwind } from "../tailwind";
+
+import "../../core/components/functional/list/list";
+import "../../core/components/ui/image/image";
+
+const GRID_PROPS = [
+  { id: "1" },
+  { id: "2" },
+  { id: "3" },
+  { id: "4" },
+  { id: "5" },
+  { id: "6" },
+  { id: "7" },
+  { id: "8" },
+  { id: "9" },
+];
+
+const TEMPLATE_KEY_PROPS = [
+  { id: "1", default: "The first template with no data-value is used" },
+  { id: "2", default: "The second template with no data-value is used" },
+  { id: "3", default: "Back to the first template with no data-value" },
+  { id: "4", tpl: "custom-tpl-danger" },
+  { id: "5", tpl: "custom-tpl-info" },
+  { id: "6", tpl: "custom-tpl-success" },
+  { id: "7", tpl: "Non-valid tpl name, Back to the first template with no data-value" },
+];
+
+const TPL_PARTS: Record<string, (item: { id: string }) => ReturnType<typeof html>> = {
+  "custom-tpl-danger": (item) => html`
+    <div class="rounded border border-danger p-2 text-danger">
+      ${item.id} :
+      data-value : <b>custom-tpl-danger</b>
+    </div>
+  `,
+  "custom-tpl-info": (item) => html`
+    <div class="rounded border border-info p-2 text-info">
+      ${item.id} :
+      data-value : <b>custom-tpl-info</b>
+    </div>
+  `,
+  "custom-tpl-success": (item) => html`
+    <div class="rounded border border-success p-2 text-success">
+      ${item.id} :
+      data-value : <b>custom-tpl-success</b>
+    </div>
+  `,
+};
+
+@customElement("docs-list-alternate-demo")
+export class DocsListAlternateDemo extends LitElement {
+  static styles = [tailwind];
+
+  private items = (item: { id: string }, meta: { even?: boolean }) =>
+    meta.even
+      ? html`<div class="bg-neutral-100 p-3 text-center">
+          ${item.id}
+          <div class="text-xs">1st template</div>
+        </div>`
+      : html`<div class="bg-neutral-100 p-3 text-center text-info">
+          ${item.id}
+          <div class="text-xs">2nd template</div>
+        </div>`;
+
+  render() {
+    return html`
+      <sonic-list
+        dataProvider="listTemplateExample"
+        class="grid grid-cols-3 gap-4"
+        .props=${GRID_PROPS}
+        .items=${this.items}
+        debug
+      ></sonic-list>
+    `;
+  }
+}
+
+@customElement("docs-list-template-key-demo")
+export class DocsListTemplateKeyDemo extends LitElement {
+  static styles = [tailwind];
+
+  render() {
+    let counter = -1;
+    const items = (item: (typeof TEMPLATE_KEY_PROPS)[number]) => {
+      const tplName = item.tpl;
+      const part = tplName ? TPL_PARTS[tplName] : undefined;
+      if (part) {
+        counter = -1;
+        return part(item);
+      }
+      counter++;
+      return counter % 2 === 0
+        ? html`<div class="rounded border p-2 text-neutral-900">
+            ${item.id} :
+            <b>First</b> template with no <b>data-value</b> attribute
+          </div>`
+        : html`<div class="rounded border p-2 text-neutral-400">
+            ${item.id} :
+            <b>Second</b> template with no <b>data-value</b> attribute <br />
+            Used when it <b>follows</b> another row with <b>no tpl</b> in props
+          </div>`;
+    };
+
+    return html`
+      <sonic-list
+        templateKey="tpl"
+        class="grid gap-3"
+        dataProvider="TemplateKeyExample"
+        .props=${TEMPLATE_KEY_PROPS}
+        .items=${items}
+        debug
+      ></sonic-list>
+    `;
+  }
+}
+
+@customElement("docs-list-separator-demo")
+export class DocsListSeparatorDemo extends LitElement {
+  private items = (item: { id: string }) => html`${item.id}`;
+  private separator = () => html` 🤜 `;
+  private noItems = () =>
+    html`<p class="text-neutral-500">No items (noItems callback)</p>`;
+
+  render() {
+    return html`
+      <sonic-list
+        dataProvider="ListSeparatorDemo"
+        .props=${[{ id: "1" }, { id: "2" }, { id: "3" }]}
+        .items=${this.items}
+        .separator=${this.separator}
+        debug
+      ></sonic-list>
+      <hr class="my-6 border-neutral-200" />
+      <sonic-list
+        dataProvider="ListEmptyDemo"
+        .props=${[]}
+        .items=${this.items}
+        .noItems=${this.noItems}
+        debug
+      ></sonic-list>
+    `;
+  }
+}
+
+@customElement("docs-list-extract-values-demo")
+export class DocsListExtractValuesDemo extends LitElement {
+  static styles = [tailwind];
+
+  private items = (item: { key: string; value: string }) => html`
+    <div class="flex items-center gap-3">
+      <span class="w-24 font-bold">${item.key}</span>
+      <span>${item.value}</span>
+      ${item.key === "avatar"
+        ? html`<sonic-image
+            src=${item.value}
+            rounded="full"
+            ratio="1/1"
+            class="w-20 block"
+          ></sonic-image>`
+        : nothing}
+    </div>
+  `;
+
+  render() {
+    return html`
+      <sonic-list
+        debug
+        fetch
+        serviceURL="/docs-mock-api"
+        dataProvider="list-extract-values-test"
+        endPoint="api/users/2"
+        key="data"
+        extractValues
+        .items=${this.items}
+      ></sonic-list>
+    `;
+  }
+}