@supersoniks/concorde 4.2.1 → 4.3.0

package/src/docs/example/decorators-demo-bind-demos.ts

@@ -0,0 +1,210 @@
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { bind } from "@supersoniks/concorde/decorators";
+import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
+import { sub } from "@supersoniks/concorde/directives";
+import {
+  PublisherManager,
+  PublisherProxy,
+} from "@supersoniks/concorde/core/utils/PublisherProxy";
+import { Objects } from "@supersoniks/concorde/utils";
+import { tailwind } from "../tailwind";
+import "./decorators-demo-init";
+
+@customElement("demo-bind")
+export class DemoBind extends LitElement {
+  static styles = [tailwind];
+
+  @bind("demoData.firstName")
+  @state()
+  firstName = "";
+
+  @bind("demoData.lastName")
+  @state()
+  lastName: string = "";
+
+  @bind("demoData.count")
+  @state()
+  count: number = 0;
+
+  render() {
+    return html`
+      <div>
+        <sonic-button @click=${this.updateData}>Update Data</sonic-button>
+      </div>
+      <div class="p-3">
+        <p>Title: <strong>${this.firstName || "Not set"}</strong></p>
+        <p>User Name: <strong>${this.lastName || "Not set"}</strong></p>
+        <p>Number of updates: <strong>${this.count}</strong></p>
+      </div>
+    `;
+  }
+
+  updateData() {
+    const demoData = PublisherManager.get("demoData");
+    const demoUsers = PublisherManager.get("demoUsers");
+    const randomIndex = Math.floor(Math.random() * demoUsers.get().length);
+    const randomUser = demoUsers.get()[randomIndex];
+    demoData.set({
+      firstName: randomUser.firstName,
+      lastName: randomUser.lastName,
+      count: (demoData.count.get() || 0) + 1,
+    });
+  }
+}
+
+@customElement("demo-bind-reflect")
+export class DemoBindReflect extends LitElement {
+  static styles = [tailwind];
+
+  @bind("bindReflectDemo.count", { reflect: true })
+  @state()
+  withReflect: number = 0;
+
+  @bind("bindReflectDemo.count")
+  @state()
+  withoutReflect: number = 0;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.resetData();
+  }
+
+  resetData() {
+    PublisherManager.get("bindReflectDemo").set({ count: 0 });
+  }
+  render() {
+    return html`
+      <div class="mb-3">
+        from publisher : ${sub("bindReflectDemo.count")} <br />
+        from component with reflect : ${this.withReflect} <br />
+        from component without reflect : ${this.withoutReflect}
+      </div>
+      <sonic-button @click=${() => this.withReflect++}
+        >Increment with reflect</sonic-button
+      >
+      <sonic-button @click=${() => this.withoutReflect++}
+        >Increment without reflect</sonic-button
+      >
+      <sonic-button @click=${this.resetData}>Reset publisher data</sonic-button>
+    `;
+  }
+}
+
+type BindReflectDemoData = { count: number };
+const bindReflectDemoKey = new DataProviderKey<BindReflectDemoData>("bindReflectDemo");
+
+@customElement("demo-bind-key")
+export class DemoBindKey extends LitElement {
+  static styles = [tailwind];
+
+  @bind(bindReflectDemoKey.count, { reflect: true })
+  @state()
+  count: number = 0;
+
+  connectedCallback() {
+    super.connectedCallback();
+    PublisherManager.get("bindReflectDemo").set({ count: 0 });
+  }
+
+  render() {
+    return html`
+      <div class="mb-3">
+        <p>@bind with DataProviderKey&lt;number&gt; (type-safe): ${this.count}</p>
+      </div>
+      <sonic-button @click=${() => this.count++}>Increment</sonic-button>
+    `;
+  }
+}
+
+@customElement("demo-bind-dynamic")
+export class DemoBindDynamic extends LitElement {
+  static styles = [tailwind];
+
+  @property({ type: String })
+  dataProvider: "demoUsers" | "demoUsersAlt" = "demoUsers";
+
+  @property({ type: Number })
+  userIndex: number = 1;
+
+  @bind("${dataProvider}.${userIndex}")
+  @state()
+  user: any = {};
+
+  updateUserIndex(e: Event) {
+    this.userIndex = parseInt((e.target as HTMLInputElement).value);
+  }
+
+  updateDataProvider(e: Event) {
+    this.dataProvider = (e.target as HTMLSelectElement).value as
+      | "demoUsers"
+      | "demoUsersAlt";
+  }
+
+  updateCurrentUserData() {
+    const usersPublisher = PublisherManager.get(this.dataProvider);
+    const userPublisher = Objects.traverse(usersPublisher, [
+      String(this.userIndex),
+    ]) as PublisherProxy;
+
+    if (userPublisher) {
+      const randomNames = [
+        { firstName: "Alice", lastName: "Wonder" },
+        { firstName: "Bob", lastName: "Builder" },
+        { firstName: "Charlie", lastName: "Chaplin" },
+        { firstName: "Diana", lastName: "Prince" },
+        { firstName: "Eve", lastName: "Adams" },
+      ];
+
+      const randomName =
+        randomNames[Math.floor(Math.random() * randomNames.length)];
+      const randomEmail = `${randomName.firstName.toLowerCase()}.${randomName.lastName.toLowerCase()}@example.com`;
+
+      const currentUser = userPublisher.get() || {};
+      userPublisher.set({
+        ...currentUser,
+        firstName: randomName.firstName,
+        lastName: randomName.lastName,
+        email: randomEmail,
+      });
+    }
+  }
+
+  render() {
+    return html`
+      <div class="flex flex-col gap-2">
+        <sonic-select
+          .value=${this.dataProvider}
+          label="Users set"
+          @change=${this.updateDataProvider}
+        >
+          <option value="demoUsers">First set of users</option>
+          <option value="demoUsersAlt">Second set of users</option>
+        </sonic-select>
+        <sonic-input
+          type="number"
+          .value=${this.userIndex}
+          @input=${this.updateUserIndex}
+          min="0"
+          max="9"
+          label="Index"
+          class="block"
+        >
+        </sonic-input>
+        <sonic-button @click=${this.updateCurrentUserData}
+          >Update current user data</sonic-button
+        >
+        <div class="flex flex-col gap-2 border p-2">
+          <div>
+            <sonic-icon name="user" library="heroicons"></sonic-icon>
+            ${this.user?.firstName} ${this.user?.lastName}
+          </div>
+          <div>
+            <sonic-icon name="envelope" library="heroicons"></sonic-icon>
+            ${this.user?.email}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/docs/example/decorators-demo-geo.ts

@@ -0,0 +1,45 @@
+import type { APIConfiguration } from "@supersoniks/concorde/core/utils/api";
+import type { ApiGetResult } from "@supersoniks/concorde/core/utils/api";
+import { Endpoint } from "@supersoniks/concorde/core/utils/endpoint";
+import { DataProviderKey } from "@supersoniks/concorde/core/utils/dataProviderKey";
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
+import "./decorators-demo-init";
+
+export type GeoCommuneRow = { nom: string; code: string };
+
+export const geoApiDemoConfiguration: APIConfiguration = {
+  serviceURL: "https://geo.api.gouv.fr/",
+  token: null,
+  userName: null,
+  password: null,
+  authToken: null,
+  tokenProvider: null,
+};
+
+const docsDemoGeoApiConfigurationId = "docsDemoGeoApiConfiguration";
+PublisherManager.get(docsDemoGeoApiConfigurationId).set(geoApiDemoConfiguration);
+
+export const docsDemoGeoApiConfigurationKey = new DataProviderKey<APIConfiguration>(
+  docsDemoGeoApiConfigurationId,
+);
+
+export const geoCommunesApiGetEndpoint = new Endpoint<GeoCommuneRow[]>(
+  "communes?limit=5&fields=nom,code",
+);
+
+export const docsDemoDynApiConfKeyTemplate = new DataProviderKey<APIConfiguration>(
+  "docsDemoDynApiConf${configSlot}",
+);
+
+PublisherManager.get("docsDemoDynApiConfA").set(geoApiDemoConfiguration);
+PublisherManager.get("docsDemoDynApiConfB").set({
+  ...geoApiDemoConfiguration,
+  serviceURL: "https://geo.api.gouv.fr/",
+});
+
+export const geoCommunesApiGetEndpointDynamic = new Endpoint<GeoCommuneRow[]>(
+  "communes?limit=${communeLimit}&fields=nom,code",
+);
+
+export const geoCommunesApiGetPublishKey =
+  new DataProviderKey<ApiGetResult<GeoCommuneRow[]>>(geoCommunesApiGetEndpoint.path);

package/src/docs/example/decorators-demo-init.ts

@@ -0,0 +1,228 @@
+import { PublisherManager } from "@supersoniks/concorde/core/utils/PublisherProxy";
+
+export const ensurePublisherValue = <T>(
+  publisherId: string,
+  defaultValue: T,
+): void => {
+  const publisher = PublisherManager.get(publisherId);
+  const currentValue =
+    typeof publisher.get === "function" ? publisher.get() : undefined;
+
+  const isUnset =
+    currentValue === undefined ||
+    currentValue === null ||
+    (typeof currentValue === "object" &&
+      !Array.isArray(currentValue) &&
+      Object.keys(currentValue).length === 0);
+
+  if (isUnset) {
+    publisher.set(defaultValue as T);
+  }
+};
+
+export const initializeDecoratorsDemoData = () => {
+  ensurePublisherValue("demoData", {
+    title: "Initial Title",
+    user: { name: "Initial User" },
+    count: 0,
+  });
+
+  ensurePublisherValue("demoUser", {
+    name: "Demo User",
+    email: "demo@example.com",
+  });
+
+  ensurePublisherValue("demoSettings", {
+    theme: "light",
+    language: "en",
+  });
+
+  ensurePublisherValue("demoUserSettings", {
+    theme: "light",
+    language: "en",
+  });
+
+  ensurePublisherValue("autoValue1", 10);
+  ensurePublisherValue("autoValue2", 20);
+  ensurePublisherValue("waitAncestorDemo", {
+    message: "Context from ancestor",
+  });
+
+  ensurePublisherValue("combinedData", { title: "Combined Title" });
+  ensurePublisherValue("combinedUser", { name: "Combined User" });
+  ensurePublisherValue("combinedSettings", { theme: "dark" });
+
+  ensurePublisherValue("reflectData", {
+    title: "Initial Reflected Title",
+    count: 0,
+  });
+
+  ensurePublisherValue("publishDemo", {
+    email: "",
+    message: "",
+  });
+
+  ensurePublisherValue("dynamicProfiles", {
+    alpha: { info: { title: "Profil Alpha" } },
+    beta: { info: { title: "Profil Beta" } },
+  });
+
+  ensurePublisherValue("dynamicProfilesAlt", {
+    alpha: { info: { title: "Profil Alpha (Alt)" } },
+    beta: { info: { title: "Profil Beta (Alt)" } },
+  });
+
+  ensurePublisherValue("demoUsers", [
+    {
+      id: 1,
+      firstName: "Alice",
+      lastName: "Smith",
+      email: "alice.smith@example.com",
+    },
+    {
+      id: 2,
+      firstName: "Bob",
+      lastName: "Johnson",
+      email: "bob.johnson@example.com",
+    },
+    {
+      id: 3,
+      firstName: "Carol",
+      lastName: "Williams",
+      email: "carol.williams@example.com",
+    },
+    {
+      id: 4,
+      firstName: "David",
+      lastName: "Brown",
+      email: "david.brown@example.com",
+    },
+    {
+      id: 5,
+      firstName: "Eve",
+      lastName: "Jones",
+      email: "eve.jones@example.com",
+    },
+    {
+      id: 6,
+      firstName: "Frank",
+      lastName: "Garcia",
+      email: "frank.garcia@example.com",
+    },
+    {
+      id: 7,
+      firstName: "Grace",
+      lastName: "Miller",
+      email: "grace.miller@example.com",
+    },
+    {
+      id: 8,
+      firstName: "Henry",
+      lastName: "Davis",
+      email: "henry.davis@example.com",
+    },
+    {
+      id: 9,
+      firstName: "Ivy",
+      lastName: "Martinez",
+      email: "ivy.martinez@example.com",
+    },
+    {
+      id: 10,
+      firstName: "Jack",
+      lastName: "Taylor",
+      email: "jack.taylor@example.com",
+    },
+  ]);
+
+  ensurePublisherValue("demoUsersAlt", [
+    {
+      id: 11,
+      firstName: "Sophie",
+      lastName: "Lindquist",
+      email: "sophie.lindquist@example.com",
+    },
+    {
+      id: 12,
+      firstName: "Mateo",
+      lastName: "Ortega",
+      email: "mateo.ortega@example.com",
+    },
+    {
+      id: 13,
+      firstName: "Jin",
+      lastName: "Park",
+      email: "jin.park@example.com",
+    },
+    {
+      id: 14,
+      firstName: "Fatima",
+      lastName: "El-Sayed",
+      email: "fatima.el-sayed@example.com",
+    },
+    {
+      id: 15,
+      firstName: "Lars",
+      lastName: "Johansson",
+      email: "lars.johansson@example.com",
+    },
+    {
+      id: 16,
+      firstName: "Amara",
+      lastName: "Singh",
+      email: "amara.singh@example.com",
+    },
+    {
+      id: 17,
+      firstName: "Zuri",
+      lastName: "Okafor",
+      email: "zuri.okafor@example.com",
+    },
+    {
+      id: 18,
+      firstName: "Luca",
+      lastName: "Rossi",
+      email: "luca.rossi@example.com",
+    },
+    {
+      id: 19,
+      firstName: "Ava",
+      lastName: "Murphy",
+      email: "ava.murphy@example.com",
+    },
+    {
+      id: 20,
+      firstName: "Noah",
+      lastName: "Keller",
+      email: "noah.keller@example.com",
+    },
+  ]);
+
+  ensurePublisherValue("demoUsersSettings", [
+    { theme: "light", language: "en" },
+    { theme: "dark", language: "fr" },
+    { theme: "auto", language: "es" },
+    { theme: "light", language: "en" },
+    { theme: "dark", language: "fr" },
+    { theme: "auto", language: "es" },
+    { theme: "light", language: "en" },
+    { theme: "dark", language: "fr" },
+    { theme: "auto", language: "es" },
+    { theme: "light", language: "en" },
+  ]);
+
+  ensurePublisherValue("demoUsersAltSettings", [
+    { theme: "dark", language: "de" },
+    { theme: "light", language: "it" },
+    { theme: "auto", language: "ja" },
+    { theme: "dark", language: "pt" },
+    { theme: "light", language: "ru" },
+    { theme: "auto", language: "zh" },
+    { theme: "dark", language: "ar" },
+    { theme: "light", language: "sv" },
+    { theme: "auto", language: "nl" },
+    { theme: "dark", language: "pl" },
+  ]);
+};
+
+initializeDecoratorsDemoData();