@supersoniks/concorde 3.2.8 → 3.3.2

package/src/docs/_misc/templates-demo.md

@@ -0,0 +1,19 @@
+# Templates Demo
+
+Some test/demos
+
+## States
+
+<sonic-states-demo></sonic-states-demo>
+
+## Queue
+
+
+<sonic-queue-demo></sonic-queue-demo>
+
+## Ressources liées
+
+- [Router](#core/components/functional/router/router.md/router)
+- [States](#core/components/functional/states/states.md/states)
+- [Queue](#core/components/functional/queue/queue.md/queue)
+

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

@@ -0,0 +1,658 @@
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import {
+  bind,
+  ancestorAttribute,
+  onAssign,
+  autoSubscribe,
+} from "@supersoniks/concorde/decorators";
+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";
+
+const demoSectionClasses =
+  "my-6 rounded-2xl border border-neutral-200 dark:border-neutral-800 bg-neutral-0 dark:bg-neutral-900/40 px-6 py-6 md:px-8 md:py-8 space-y-4 shadow-sm";
+
+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);
+  }
+};
+
+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("autoValue1", 10);
+  ensurePublisherValue("autoValue2", 20);
+
+  ensurePublisherValue("combinedData", { title: "Combined Title" });
+  ensurePublisherValue("combinedUser", { name: "Combined User" });
+  ensurePublisherValue("combinedSettings", { theme: "dark" });
+
+  ensurePublisherValue("reflectData", {
+    title: "Initial Reflected Title",
+    count: 0,
+  });
+
+  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();
+
+/**
+ * Demo component showcasing @ancestorAttribute decorator
+ */
+@customElement("demo-ancestor-attribute")
+export class DemoAncestorAttribute extends LitElement {
+  @ancestorAttribute("dataProvider")
+  dataProvider: string | null = null;
+
+  @ancestorAttribute("testAttribute")
+  testAttribute: string | null = null;
+
+  render() {
+    return html`
+      <section>
+        <p>
+          DataProvider property initialized from ancestor:
+          <strong>${this.dataProvider || "null"}</strong>
+        </p>
+        <p>
+          TestAttribute property initialized from ancestor:
+          <strong>${this.testAttribute || "null"}</strong>
+        </p>
+      </section>
+    `;
+  }
+}
+
+/**
+ * Demo component showcasing @bind decorator
+ */
+@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,
+    });
+  }
+}
+
+/**
+ * Demo component showcasing @bind decorator with reflect option
+ */
+@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;
+  // initialize the publisher data
+  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>
+    `;
+  }
+}
+
+/**
+ * Demo component showcasing @bind decorator with dynamic dataProvider/id
+ */
+@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) {
+      // Générer de nouvelles données aléatoires
+      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`;
+
+      // Mettre à jour l'utilisateur directement
+      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>
+    `;
+  }
+}
+
+/**
+ * Demo component showcasing @onAssign decorator
+ */
+@customElement("demo-on-assign")
+export class DemoOnAssign extends LitElement {
+  static styles = [tailwind];
+
+  @state() userWithSettings: any = null;
+  @state() isReady: boolean = false;
+  @state() lastUpdate: string = "";
+
+  @onAssign("demoUser", "demoUserSettings")
+  handleDataReady(user: any, settings: any) {
+    this.isReady =
+      Object.keys(user).length > 0 && Object.keys(settings).length > 0;
+    this.userWithSettings = { ...user, ...settings };
+    this.lastUpdate = new Date().toLocaleTimeString();
+    this.requestUpdate();
+  }
+
+  render() {
+    const { name, email, theme, language } = this.userWithSettings;
+    return html`
+      <div class="mt-2">
+        <sonic-button @click=${this.updateData}>Update Data</sonic-button>
+      </div>
+      <div class="p-3">
+        ${this.isReady === false
+          ? html`<p>No settings yet...</p>`
+          : html`<p>${name || "N/A"}</p>
+              <p>${email || "N/A"}</p>
+              <p>${theme || "N/A"}</p>
+              <p>${language || "N/A"}</p>
+              <p><small>Last updated: ${this.lastUpdate}</small></p> `}
+      </div>
+    `;
+  }
+
+  updateData() {
+    const user = PublisherManager.get("demoUser");
+    const userSettings = PublisherManager.get("demoUserSettings");
+    const userNumber = Math.floor(Math.random() * 100);
+    user.set({
+      name: `User n°${userNumber}`,
+      email: `user-${userNumber}@example.com`,
+    });
+
+    userSettings.set({
+      theme: ["light", "dark", "auto"][Math.floor(Math.random() * 3)],
+      language: ["en", "fr", "es"][Math.floor(Math.random() * 3)],
+    });
+  }
+}
+
+/**
+ * Demo component showcasing @onAssign decorator with dynamic paths
+ */
+@customElement("demo-on-assign-dynamic")
+export class DemoOnAssignDynamic extends LitElement {
+  static styles = [tailwind];
+
+  @property({ type: String })
+  dataProvider: "demoUsers" | "demoUsersAlt" = "demoUsers";
+
+  @property({ type: Number })
+  userIndex: number = 0;
+
+  @state() user: any = null;
+  @state() userSettings: any = null;
+
+  @onAssign(
+    "${dataProvider}.${userIndex}",
+    "${dataProvider}Settings.${userIndex}"
+  )
+  handleUserDataReady(user: any, settings: any) {
+    this.user = user;
+    this.userSettings = settings;
+  }
+
+  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 settingsPublisher = PublisherManager.get(
+      `${this.dataProvider}Settings`
+    );
+    const userPublisher = Objects.traverse(usersPublisher, [
+      String(this.userIndex),
+    ]) as PublisherProxy;
+    const settingPublisher = Objects.traverse(settingsPublisher, [
+      String(this.userIndex),
+    ]) as PublisherProxy;
+
+    if (userPublisher && settingPublisher) {
+      // Générer de nouvelles données aléatoires
+      const randomNames = [
+        { firstName: "Alice", lastName: "Wonder" },
+        { firstName: "Bob", lastName: "Builder" },
+        { firstName: "Charlie", lastName: "Chaplin" },
+        { firstName: "Diana", lastName: "Prince" },
+        { firstName: "Eve", lastName: "Adams" },
+      ];
+      const randomThemes = ["light", "dark", "auto"];
+      const randomLanguages = ["en", "fr", "es", "de", "it"];
+
+      const randomName =
+        randomNames[Math.floor(Math.random() * randomNames.length)];
+      const randomEmail = `${randomName.firstName.toLowerCase()}.${randomName.lastName.toLowerCase()}@example.com`;
+      const randomTheme =
+        randomThemes[Math.floor(Math.random() * randomThemes.length)];
+      const randomLanguage =
+        randomLanguages[Math.floor(Math.random() * randomLanguages.length)];
+
+      // Mettre à jour l'utilisateur directement
+      const currentUser = userPublisher.get() || {};
+      userPublisher.set({
+        ...currentUser,
+        firstName: randomName.firstName,
+        lastName: randomName.lastName,
+        email: randomEmail,
+      });
+
+      // Mettre à jour les settings directement
+      settingPublisher.set({
+        theme: randomTheme,
+        language: randomLanguage,
+      });
+    }
+  }
+
+  render() {
+    return html`
+      <div class="flex flex-col gap-2">
+        <sonic-select 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>
+            Theme: ${this.userSettings?.theme} | Language:
+            ${this.userSettings?.language}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+/**
+ * Demo component showcasing @autoSubscribe decorator
+ */
+@customElement("demo-auto-subscribe")
+export class DemoAutoSubscribe extends LitElement {
+  static styles = [tailwind];
+
+  @state() displayText: string = "";
+  @state() computedValue: number = 0;
+
+  @autoSubscribe()
+  updateDisplay() {
+    const value1 = PublisherManager.get("autoValue1").get() || 0;
+    const value2 = PublisherManager.get("autoValue2").get() || 0;
+
+    this.computedValue = value1 + value2;
+    this.displayText = `${value1} + ${value2} = ${this.computedValue}`;
+  }
+
+  render() {
+    return html`
+      <p><strong>${this.displayText}</strong></p>
+      <div>
+        <sonic-button @click=${() => this.randomizeValue("autoValue1")}>
+          Randomize Value 1
+        </sonic-button>
+        <sonic-button @click=${() => this.randomizeValue("autoValue2")}>
+          Randomize Value 2
+        </sonic-button>
+      </div>
+    `;
+  }
+
+  randomizeValue(publisherId: string) {
+    const value = PublisherManager.get(publisherId);
+    value.set(Math.floor(Math.random() * 100));
+  }
+}

package/src/docs/navigation/navigation.ts

@@ -28,9 +28,6 @@ export class DocsNavigation extends LitElement {
       label: "The subscriber mixin",
       href: "#docs/_core-concept/subscriber.md/subscriber",
     },
-    // "Standalone attributes",
-    // {label: "Data-bind", href: "#"},
-    // {label: "FormDataProvider", href: "#"},
     "Functionnal components",
     { label: "Date", href: "#core/components/functional/date/date.md/date" },
     {
@@ -132,6 +129,28 @@ export class DocsNavigation extends LitElement {
       label: "Tooltip",
       href: "#core/components/ui/tooltip/tooltip.md/tooltip",
     },
+    "Misc",
+    {
+      label: "@ancestorAttribute",
+      href: "#docs/_misc/ancestor-attribute.md/ancestor-attribute",
+    },
+    {
+      label: "@bind",
+      href: "#docs/_misc/bind.md/bind",
+    },
+    {
+      label: "@onAssign",
+      href: "#docs/_misc/on-assign.md/on-assign",
+    },
+    {
+      label: "@autoSubscribe",
+      href: "#docs/_misc/auto-subscribe.md/auto-subscribe",
+    },
+
+    {
+      label: "Templates Demo",
+      href: "#docs/_misc/templates-demo.md/templates-demo",
+    },
   ];
 
   /**