@supersoniks/concorde 3.0.12 → 3.1.0

package/src/core/components/ui/theme/theme.ts

@@ -1,9 +1,9 @@
-import {html, LitElement, css} from "lit";
-import {customElement, property} from "lit/decorators.js";
-import {coreVariables} from "@supersoniks/concorde/core/components/ui/theme/theme-collection/core-variables";
-import {light} from "@supersoniks/concorde/core/components/ui/theme/theme-collection/light";
-import {dark} from "@supersoniks/concorde/core/components/ui/theme/theme-collection/dark";
-import {PublisherManager} from "@supersoniks/concorde/utils";
+import { html, LitElement, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { coreVariables } from "@supersoniks/concorde/core/components/ui/theme/theme-collection/core-variables";
+import { light } from "@supersoniks/concorde/core/components/ui/theme/theme-collection/light";
+import { dark } from "@supersoniks/concorde/core/components/ui/theme/theme-collection/dark";
+import { PublisherManager } from "@supersoniks/concorde/utils";
 
 const tagName = "sonic-theme";
 
@@ -40,12 +40,12 @@ export class Theme extends LitElement {
     return Theme.instance || document.body;
   }
 
-  @property({type: String, reflect: true})
+  @property({ type: String, reflect: true })
   theme = "light";
 
-  @property({type: Boolean, reflect: true}) background = false;
-  @property({type: Boolean, reflect: true}) color = false;
-  @property({type: Boolean, reflect: true}) font = false;
+  @property({ type: Boolean, reflect: true }) background = false;
+  @property({ type: Boolean, reflect: true }) color = false;
+  @property({ type: Boolean, reflect: true }) font = false;
 
   connectedCallback(): void {
     super.connectedCallback();
@@ -60,22 +60,25 @@ export class Theme extends LitElement {
     const fontUrls: string[] = [];
     for (let i = 0; i < ssLength; i++) {
       const ss = stylesheets[i];
-      if (ss.href && (ss.href.includes("googleapis") || ss.href.includes("typekit.net"))) fontUrls.push(ss.href);
+      if (
+        ss.href &&
+        (ss.href.includes("googleapis") || ss.href.includes("typekit.net"))
+      )
+        fontUrls.push(ss.href);
     }
     const theme = {
       variables: this.getCssVariables(),
       fonts: fontUrls,
     };
     PublisherManager.get("sonic-theme")?.set(theme);
-    document.querySelectorAll("iframe").forEach(
-      (elt) =>
-        elt.contentWindow?.postMessage(
-          {
-            type: "SonicTheme",
-            ...theme,
-          },
-          "*"
-        )
+    document.querySelectorAll("iframe").forEach((elt) =>
+      elt.contentWindow?.postMessage(
+        {
+          type: "SonicTheme",
+          ...theme,
+        },
+        "*"
+      )
     );
   }
 
@@ -87,8 +90,11 @@ export class Theme extends LitElement {
 
   getCssVariables() {
     const names: Array<string> = [];
-    const stylesheets = [...Theme.styles.map((s) => s.styleSheet), ...Array.from(document.styleSheets)] as {
-      cssRules: {style: string[]}[] | CSSRuleList;
+    const stylesheets = [
+      ...Theme.styles.map((s) => s.styleSheet),
+      ...Array.from(document.styleSheets),
+    ] as {
+      cssRules: { style: string[] }[] | CSSRuleList;
     }[];
     for (const stylesheet of stylesheets) {
       try {

package/src/core/components/ui/toast/toast.ts

@@ -207,9 +207,7 @@ export class SonicToast extends LitElement {
 
 declare const __SONIC_PREFIX__: string;
 if (typeof window !== "undefined") {
-  if (__SONIC_PREFIX__ == "sonic") {
-    window.SonicToast = window.SonicToast || SonicToast;
-  }
+  window.SonicToast = window.SonicToast || SonicToast;
 }
 
 /**

package/src/core/utils/PublisherProxy.ts

@@ -26,19 +26,23 @@ const queueTaskPromise = async () => {
 
 declare const __BUILD_DATE__: string;
 declare const __SONIC_PREFIX__: string;
+let SONIC_PREFIX = "sonic";
 
 if (typeof __BUILD_DATE__ === "undefined") {
   (window as any).__BUILD_DATE__ = "No build date";
 }
 
+// console.log("PublisherProxy.ts loaded", (import.meta as any).env?.MODE);
+
 if (typeof __SONIC_PREFIX__ === "undefined") {
-  (window as any).__SONIC_PREFIX__ = "sonic";
+  SONIC_PREFIX = "sonic" + Math.floor(Math.random() * 1000000);
 }
+export const prefix = SONIC_PREFIX;
 
 const localStorageDataKey =
-  __SONIC_PREFIX__ == "sonic"
+  SONIC_PREFIX == "sonic"
     ? "publisher-proxies-data"
-    : __SONIC_PREFIX__ + "-publisher-proxies-data";
+    : SONIC_PREFIX + "-publisher-proxies-data";
 
 /**
  * Custom Proxy contient les méthodes des publishers retournés par PublisherManager.get(publisherId) qui seront utilisées couramment
@@ -365,11 +369,11 @@ export class PublisherProxy<T = any> {
     PublisherProxy.instances.set(this._instanceCounter_, this);
     const str =
       "<" +
-      __SONIC_PREFIX__ +
+      SONIC_PREFIX +
       '-publisher-proxy publisher="' +
       this._instanceCounter_ +
       '"></' +
-      __SONIC_PREFIX__ +
+      SONIC_PREFIX +
       "-publisher-proxy>";
     return str;
   }
@@ -430,8 +434,6 @@ export class PublisherManager {
             }
           }
           resolve(true);
-          // compressedData = await this.compress(JSON.stringify(this.localStorageData), "gzip");
-          // localStorage.setItem(__SONIC_PREFIX__+"-publisher-proxies-data", compressedData);
         } catch (e) {
           window.requestAnimationFrame(() => {
             resolve(false);
@@ -832,7 +834,9 @@ class PublisherWebComponent extends HTMLElement {
     this.innerHTML = value.toString();
   };
 }
-customElements.define(
-  __SONIC_PREFIX__ + "-publisher-proxy",
-  PublisherWebComponent
-);
+try {
+  customElements.define(
+    SONIC_PREFIX + "-publisher-proxy",
+    PublisherWebComponent
+  );
+} catch (e) {}

package/src/docs/_core-concept/subscriber.md

@@ -1,4 +1,4 @@
-# 🔔 The subscriber mixin
+# The subscriber mixin
 
 This is a mixin that is commonly extended by Concorde core components and destination components. Pure UI components usually don't extend it, especially those outside of form components.
 

package/src/docs/_getting-started/concorde-outside.md

@@ -1,9 +1,8 @@
-# installation
+# Installation
 
 ## Starter
 
-The easiest way to use Concorde is by using the Concorde starter.
-
+The easiest way to use Concorde is by using the Concorde starter.  
 The following command creates a new Vite project in TypeScript mode with Tailwind and an example component to get started.
 
 <sonic-code language="shell">
@@ -12,10 +11,12 @@ npx @supersoniks/create-concorde-ts-starter "project_name"
   </template>
 </sonic-code>
 
+## Brand New Vite Project
+
+
 For a more manual configuration, you can refer to the following sections. <br/>
 However, the Tailwind configuration is not mentioned at the moment.
 
-## Brand New Vite Project
 
 ### Creating the Project
 
@@ -23,9 +24,11 @@ However, the Tailwind configuration is not mentioned at the moment.
   <template>
 # Pure JavaScript project
 yarn create vite --template vanilla-js
-# TypeScript project (it is recommended to use this approach, which installs Lit separately if needed, via "yarn add lit")
+# TypeScript project
+# (it is recommended to use this approach, which installs Lit separately if needed, via "yarn add lit")
 yarn create vite --template vanilla-ts
-# TypeScript + Lit project (creating new web components, for example, to extend the fetch or subscriber mixins)
+# TypeScript + Lit project
+# (creating new web components, for example, to extend the fetch or subscriber mixins)
 yarn create vite --template lit-ts
   </template>
 </sonic-code>
@@ -81,8 +84,7 @@ The original paths remain accessible. Shortcut imports are used for the examples
 
 ### Simple Integration in HTML
 
-For example, to use a button:
-In `main.ts` or `main.js` to be compiled:
+Import needed component in `main.ts` or wherever you want to use it:
 
 <sonic-code language="typescript">
   <template>
@@ -90,7 +92,7 @@ import "@supersoniks/concorde/ui/button";
   </template>
 </sonic-code>
 
-In the HTML of a JS or TS component or in the HTML of the web page that includes the compiled JS:
+Then in the render function ofyour component or in the HTML of the web page that includes the compiled JS, use the component as follows:
 
 <sonic-code>
   <template>
@@ -124,7 +126,7 @@ export class SonicComponent extends Fetcher(Subscriber(LitElement)) {
   </template>
 </sonic-code>
 
-In `main.ts` or `main.js` or any other component that uses it to be compiled
+Import component `main.ts` or `main.js` or any other component that uses it to be compiled
 
 <sonic-code language="typescript">
   <template>

package/src/docs/_getting-started/create-a-component.md

@@ -1,4 +1,4 @@
-# 🧱 Creating components
+# Creating components
 
 ## Where to put it?
 

package/src/docs/_getting-started/pubsub.md

@@ -1,4 +1,4 @@
-# 🥨 Sharing data
+# Sharing data
 
 This section describes how we share data between graphical and non graphical components and classes.
 

package/src/docs/_getting-started/start.md

@@ -2,33 +2,35 @@
 
 ## What is Concorde ? 
 
-Based on [lit.dev](https://lit.dev), Concorde is a collection of functional & UI webcomponents, created to build easily shared components, beetween apps and websites. Or even to build a website or an app from scratch.
-It's like a toolbox to build user interfaces, faster, where everything is scoped, but preserving graphical consistency in set a few css variables.
+Based on **[lit.dev](https://lit.dev)**, Concorde is a collection of webcomponents made to build shared components, between apps or websites.  
+Develop user interfaces without thinking about the implementation context, where everything is scoped, but preserving graphic consistency by setting the strict minimum of css variables.
 
 ## Why and use case
 
-At Supersoniks, we've created a ticketing management system that needs shared components which could be implemented in mobile apps, modern websites, and also old ones made in php, without bundlers or whatever.  
-Instead of creating a new library for each type of project, which would become hard to maintain, we've decided to create one shared library, that could be used in any environment and pre-bundled for legacy environment.
-Webcomponents appeared to be a the perfect solution to guarantee that compatibility with all past, present and futures stacks.
+In 2022, Supersoniks wanted to create a new version of his ticketing app, in production un nearly 100 websites. We needed shared components which could be implemented in mobile apps, modern websites, and also old ones made in php, without bundlers or whatever.  
+Instead of building a new app for each type of project, which would become impossible to maintain, we've decided to create one app, composed by a few webcomponents wich could easily be recomposed on any website.
+Webcomponents appeared to be a the perfect solution to guarantee that compatibility with all past, present and futures environment, and lit seemed to be the best choice to build them.
 
-### Functionnal features
+### Stack
+
+* Lit
+* Typescript
+* Vite
+* Tailwind, not in the core, but in the starter kit
+
+### Functionnal features and components
 
-* Fetching data, lists, queue with lazyload, etc.
 * Data management with Publisher / Subscriber pattern
+* Form management
+* Fetching data, lists, queue with lazyload
 * Data binding
-* Form management ("doux Jésus")
-* Simple router, state component,...
+* Simple router, state component, ...
+* All ui component, with status variations to build an app with a consistent design
 
-### Tools
-
-* Lit, of course
-* Typescript
-* Vite
-* Tailwind (not in the core, but in the starter kit)
 
-## Start a new project from scratch ? 
+## Start a new project easily 
 
-A new project with Vite, Typescript and Tailwind already configured and a simple example of a subscriber component :  
+A new project with Vite, Typescript and Tailwind already configured and a simple example of a subscriber component : 
 
 <sonic-code language="bash">
   <template>

package/src/docs/docs.ts

@@ -2,5 +2,6 @@ import "./search/search";
 import "./search/page";
 import "./search/markdown-renderer";
 import "./code";
+import "./header/header";
 import "./navigation/navigation";
 import "./example/users";

package/src/docs/header/header.ts

@@ -0,0 +1,217 @@
+import { html, LitElement, nothing } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import { tailwind } from "../tailwind";
+import { animate } from "@lit-labs/motion";
+import { Theme } from "@supersoniks/concorde/core/components/ui/theme/theme";
+const tagName = "sonic-docs-header"; // For Astro.build
+@customElement(tagName)
+export class SonicComponent extends Subscriber(LitElement) {
+  static styles = [tailwind];
+
+  @state() theme: "dark" | "light" = "light";
+  @state() searchVisible = false;
+
+  connectedCallback() {
+    this.handleColorScheme();
+    super.connectedCallback();
+
+    // if escape key is pressed and search is visible, hide search
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape" && this.searchVisible) {
+        this.hideSearch();
+      }
+    });
+
+    // ctrl + k to toggle search
+    document.addEventListener("keydown", (e) => {
+      if (e.ctrlKey && e.key === "k") {
+        this.toggleSearch();
+        e.preventDefault();
+      }
+      // command + k to toggle search
+      if (e.metaKey && e.key === "k") {
+        this.toggleSearch();
+        e.preventDefault();
+      }
+    });
+
+    // on hash change, hide search
+    window.addEventListener("hashchange", () => {
+      this.hideSearch();
+    });
+  }
+
+  handleColorScheme() {
+    const themeComponent = document.querySelector("sonic-theme") as Theme;
+    if (
+      localStorage.sonicTheme === "dark" ||
+      (!("sonicTheme" in localStorage) &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches)
+    ) {
+      document.documentElement.setAttribute("data-concorde-theme", "dark");
+      document.documentElement.classList.add("dark");
+      this.theme = "dark";
+      themeComponent.theme = "dark";
+    } else {
+      document.documentElement.classList.remove("dark");
+      document.documentElement.setAttribute("data-concorde-theme", "light");
+      this.theme = "light";
+      themeComponent.theme = "light";
+    }
+  }
+
+  setMode(theme: "dark" | "light") {
+    localStorage.sonicTheme = theme;
+    this.handleColorScheme();
+  }
+
+  hideSearch() {
+    this.searchVisible = false;
+  }
+  toggleSearch() {
+    this.searchVisible = !this.searchVisible;
+  }
+
+  render() {
+    return html`<div
+        class="flex items-center gap-4 border-b-[.18rem]  text-content border-current py-3 sticky top-0 z-40  bg-neutral-0"
+      >
+        <div class="">
+          <sonic-link href="/" class="flex items-end gap-x-1">
+            <svg
+              class="size-[2.4rem] inline-block  rotate-[55deg] "
+              viewBox="0 0 66 66"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+
+            >
+              <circle cx="33" cy="33" r="30" fill="var(--sc-base-content)"  />
+              <path
+                d="M33.2499 62.03C33.8799 59.24 34.26 56.17 34.39 53.08C34.57 52.78 34.9099 52.6 35.2599 52.64H35.39C35.48 52.64 35.5799 52.64 35.6899 52.64H35.7599C35.7599 52.64 35.7999 52.64 35.8299 52.64C36.2499 52.62 36.6799 52.58 36.9099 52.56C36.9399 52.56 36.9599 52.56 36.9799 52.56C37.0099 52.56 37.0299 52.56 37.0499 52.56H37.0899L37.2099 51.93H37.4799L37.5799 52.4L37.6899 52.49H39.2699L39.39 52.38L39.5099 51.93H39.7899L39.8399 52.21L39.9999 52.29L45.2099 51.86L46.2799 51.29C46.2799 51.29 46.2799 50.85 46.2399 50.25V50.18C46.2399 50.18 46.2399 50.13 46.2399 50.11C46.2099 49.62 46.1399 49.13 46.0399 48.65C45.7899 47.45 45.29 46 42.2 41.58C39.11 37.16 38.04 35.52 35.89 27.63C35.85 27.48 35.8199 27.35 35.7899 27.2C35.1399 24.53 34.6899 22.95 34.5199 22.38V10.89C34.4999 9.60996 34.3999 8.33996 34.2099 7.07996C34.0499 5.97996 33.6099 4.89996 33.3499 3.95996H32.6299C32.3599 4.89996 31.9299 5.97996 31.7699 7.06996C31.5799 8.33996 31.4799 9.60996 31.4599 10.89V22.38C31.2899 22.95 30.8299 24.52 30.1899 27.2C30.1599 27.35 30.1199 27.49 30.0899 27.63C27.9499 35.52 26.8699 37.16 23.7799 41.58C20.6899 46 20.1899 47.45 19.9399 48.65C19.8399 49.13 19.7799 49.62 19.7399 50.11C19.7399 50.13 19.7399 50.16 19.7399 50.18V50.25C19.6999 50.85 19.7 51.29 19.7 51.29L20.7699 51.86L25.9799 52.29L26.14 52.21L26.1899 51.93H26.4799L26.5999 52.38L26.7299 52.49H28.2999L28.4099 52.4L28.5099 51.93H28.7699L28.89 52.56H28.9399C28.9399 52.56 28.9799 52.56 29.0099 52.56C29.0299 52.56 29.0499 52.56 29.0799 52.56C29.3099 52.58 29.7499 52.63 30.1599 52.64C30.1799 52.64 30.2099 52.64 30.2299 52.64H30.2999C30.4099 52.64 30.5099 52.64 30.5999 52.64H30.7299C31.0799 52.6 31.4299 52.77 31.6099 53.08C31.7299 56.17 32.1099 59.24 32.7399 62.03H33.2499Z"
+                fill="var(--sc-base)"
+              />
+            </svg>
+
+            <span class="font-headings text-4xl leading-none inline-block italic font-medium"
+              >concorde</span
+            >
+          </sonic-link>
+        </div>
+
+        <div class="ml-auto flex gap-x-3 ">
+          <sonic-button
+            @click=${() => (this.searchVisible = !this.searchVisible)}
+            class="lg:min-w-[19rem]"
+            align="left"
+          >
+            Quick search...
+            <sonic-icon
+              name="magnifying-glass"
+              library="custom"
+              slot="prefix"
+            ></sonic-icon>
+          </sonic-button>
+
+          <sonic-pop>
+            <sonic-button shape="circle" variant="ghost" icon>
+              ${
+                this.theme == "light"
+                  ? html`<sonic-icon name="sun" library="custom"></sonic-icon>`
+                  : html`<sonic-icon name="moon" library="custom"></sonic-icon>`
+              }
+            </sonic-button>
+
+            <sonic-menu slot="content">
+              <sonic-menu-item
+                ?active="${this.theme == "light"}"
+                @click=${() => this.setMode("light")}
+              >
+                <sonic-icon
+                  name="sun"
+                  library="custom"
+                  slot="prefix"
+                ></sonic-icon>
+                light
+              </sonic-menu-item>
+              <sonic-menu-item
+                ?active="${this.theme == "dark"}"
+                @click=${() => this.setMode("dark")}
+              >
+                <sonic-icon
+                  name="moon"
+                  library="custom"
+                  slot="prefix"
+                ></sonic-icon>
+                dark
+              </sonic-menu-item>
+            </sonic-menu>
+          </sonic-pop>
+        </div>
+      </div>
+
+
+
+  ${
+    this.searchVisible
+      ? html`
+          <div
+            ${animate({
+              keyframeOptions: {
+                duration: 250,
+              },
+              in: [
+                {
+                  opacity: 0,
+                },
+              ],
+              out: [
+                {
+                  opacity: 0,
+                },
+              ],
+              stabilizeOut: true,
+            })}
+            class="fixed top-0 w-full left-0  z-[3000] pt-[20vh] flex items-center justify-center "
+          >
+            <div
+              @click=${() => this.hideSearch()}
+              class="bg-neutral-0 dark:bg-neutral-300 opacity-90 fixed top-0 left-0 w-full h-full "
+            ></div>
+
+            <div
+              ${animate({
+                keyframeOptions: {
+                  duration: 250,
+                  easing: `cubic-bezier(0.250, 0.250, 0.420, 1.225)`,
+                },
+                in: [
+                  {
+                    transform: "translateY(1rem) scale(1.05)",
+                    opacity: 0,
+                  },
+                ],
+                out: [
+                  {
+                    transform: "scale(.90) ",
+                    opacity: 0,
+                    duration: 3000,
+                    easing: `ease-in-out`,
+                  },
+                ],
+                stabilizeOut: true,
+              })}
+              class="relative z-20   w-full max-w-[40rem] w-full block   "
+            >
+              <docs-search setFocus class="max-w-[40rem] w-full block">
+              </docs-search>
+            </div>
+          </div>
+        `
+      : nothing
+  }
+      </div>
+
+      </div> `;
+  }
+}