@supersoniks/concorde 2.0.7 → 3.0.0

package/src/core/components/functional/date/date.md

@@ -0,0 +1,290 @@
+# Date
+
+## No attribute
+
+**Nothing** is displayed.
+
+<sonic-code>
+  <template>
+    <sonic-date></sonic-date>
+  </template>
+</sonic-code>
+
+## Now
+
+Displays the **current date**.
+
+<sonic-code>
+  <template>
+    <sonic-date now></sonic-date>
+  </template>
+</sonic-code>
+
+
+## Date  
+
+Displays a date from a **timestamp**.
+
+<sonic-code>
+  <template>
+    <sonic-date date= "1640265629"></sonic-date>
+  </template>
+</sonic-code>
+
+## Date_string  
+
+Displays a date from a **string**.
+
+<sonic-code>
+  <template>
+    <sonic-date date_string="July 20, 69 20:17:40 GMT+00:00"></sonic-date>
+  </template>
+</sonic-code>
+
+## Start_date / end_date  
+
+Displays a period of time **from start_date to end_date**.  
+When by itself **start_date** will act as **date**  
+if a **start_date is not specified** it will be set by the **current date**.  
+if the **end_date is anterior** to start date date it will be **used as the start_date**. 
+
+<sonic-code>
+  <template>
+    <!-- from start_date to end_date -->
+    <sonic-date start_date="1640265629" end_date= "1640365629"></sonic-date>
+    <br>
+    <!-- start_date is not specified -->
+    <sonic-date end_date= "2640365629"></sonic-date>
+    <br>
+    <!-- end_date is anterior -->
+    <sonic-date end_date= "640365629"></sonic-date>
+  </template>
+</sonic-code>
+
+
+## Start_date_string / end_date_string
+
+<sonic-code>
+  <template>
+    <!-- from start_date to end_date -->
+    <sonic-date date_string="July 20, 90 20:17:40 GMT+00:00" end_date_string= "June 20, 94 20:17:40 GMT+00:00"></sonic-date>
+    <br>
+    <!-- start_date is not specified -->
+    <sonic-date end_date_string= "May 20, 34 20:17:40 GMT+00:00"></sonic-date>
+    <br>
+    <!-- end_date is anterior -->
+    <sonic-date end_date_string= "April 20, 06 20:17:40 GMT+00:00"></sonic-date>
+  </template>
+</sonic-code>
+
+## Wording_billet_periode_validite
+
+<sonic-code>
+  <template>
+    <sonic-date wording_billet_periode_validite= "À partir du %s jusqu'au %s" start_date="1640265629" end_date= "1640365629"></sonic-date>
+  </template>
+</sonic-code>
+
+
+## Weekday
+
+<sonic-code>
+  <template>
+    <b>narrow : </b>
+    <sonic-date weekday="narrow" now></sonic-date>
+    <br>
+    <b>short (default) : </b>
+    <sonic-date weekday="short" now></sonic-date>
+    <br>
+    <b>long : </b>
+    <sonic-date weekday="long" now></sonic-date>
+    <br>
+    <b>hidden : </b>
+    <sonic-date weekday="hidden" now></sonic-date>
+  </template>
+</sonic-code>
+
+## Day
+
+<sonic-code>
+  <template>
+    <b>numeric : </b>
+    <sonic-date day="numeric" date_string="July 01, 69"></sonic-date>
+    <br>
+    <b>2-digit (default) : </b>
+    <sonic-date day="2-digit" date_string="July 01, 69"></sonic-date>
+  </template>
+</sonic-code>
+
+## Month
+
+<sonic-code>
+  <template>
+    <b>numeric : </b>
+    <sonic-date month="numeric" now></sonic-date>
+    <br>
+    <b>2-digit : </b>
+    <sonic-date month="2-digit" now></sonic-date>
+    <br>
+    <b>narrow : </b>
+    <sonic-date month="narrow" now></sonic-date>
+    <br>
+    <b>short (default) : </b>
+    <sonic-date month="short" now></sonic-date>
+    <br>
+    <b>long : </b>
+    <sonic-date month="long" now></sonic-date>
+  </template>
+</sonic-code>
+
+## Year
+
+<sonic-code>
+  <template>
+    <b>numeric (default) : </b>
+    <sonic-date year="numeric" now></sonic-date>
+    <br>
+    <b>2-digit : </b>
+    <sonic-date year="2-digit" now></sonic-date>
+  </template>
+</sonic-code>
+
+## Hour
+
+<sonic-code>
+  <template>
+    <b>numeric : </b>
+    <sonic-date hour="numeric" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
+    <br>
+    <b>2-digit (default) : </b>
+    <sonic-date hour="2-digit" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
+    <br>
+    <b>hidden : </b>
+    <sonic-date hour="hidden" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
+  </template>
+</sonic-code>
+
+## Minute
+
+<sonic-code>
+  <template>
+    <b>numeric : </b>
+    <sonic-date minute="numeric" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
+    <br>
+    <b>2-digit (default) : </b>
+    <sonic-date minute="2-digit" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
+    <br>
+    <b>hidden : </b>
+    <sonic-date minute="hidden" date_string= "June 20, 04 02:06:02 GMT+00:00"></sonic-date>
+  </template>
+</sonic-code>
+
+## Language  
+
+<sonic-button href="https://www.w3schools.com/tags/ref_language_codes.asp" target="_blank" type="info" size="sm">ISO 639-1 Language Codes</sonic-button>
+
+<sonic-code>
+  <template>
+    <b>fr : </b>
+    <sonic-date language="fr" now></sonic-date>
+    <br>
+    <b>en : </b>
+    <sonic-date language="en" now></sonic-date>
+    <br>
+    <b>zh : </b>
+    <sonic-date language="zh" now></sonic-date>
+    <br>
+    <b>ja : </b>
+    <sonic-date language="ja" now></sonic-date>
+  </template>
+</sonic-code>
+
+## Time_zone
+
+For the list of supported timeZones, run <b class="text-info">Intl.supportedValuesOf('timeZone')</b> in the console
+
+<sonic-code>
+  <template>
+    <b>Europe/London : </b>
+    <sonic-date time_zone="Europe/London" now></sonic-date>
+    <br>
+    <b>Europe/Paris : </b>
+    <sonic-date time_zone="Europe/Paris" now></sonic-date>
+    <br>
+    <b>America/Tijuana : </b>
+    <sonic-date time_zone="America/Tijuana" now></sonic-date>
+  </template>
+</sonic-code>
+
+## Era  
+
+<sonic-code>
+  <template>
+    <b>narrow : </b>
+    <sonic-date era="narrow" now></sonic-date>
+    <br>
+    <b>short : </b>
+    <sonic-date era="short" now></sonic-date>
+    <br>
+    <b>long : </b>
+    <sonic-date era="long" now></sonic-date>
+  </template>
+</sonic-code>
+
+## .renderIf  
+
+<sonic-alert status="error" background>Deprecated</sonic-alert>
+
+<sonic-code>
+  <template>
+    <b>True statement : </b>
+    <sonic-date data-bind ::render-if="|10>2" now></sonic-date>
+    <br>
+    <b>False statement : </b>
+    <sonic-date data-bind ::render-if="|10<2" now></sonic-date>
+  </template>
+</sonic-code>
+
+## DesignMode  
+
+<sonic-code>
+  <template>
+    <div class="relative max-w-lg rounded-lg overflow-hidden">
+      <div class="absolute top-0 h-1/2 w-full bg-gradient-to-b from-[rgba(0,0,10,.2)] z-10 "></div>
+      <sonic-date
+        designMode
+        noShadowDom
+        start_date= "1640265629"
+        end_date= "1640365629"
+        language= "fr"
+        wording_billet_periode_validite= "Du %s au %s"
+        year= "numeric"
+        month= "short"
+        weekday= "short"
+        hour= "2-digit"
+        minute= "2-digit"
+        class="py-4 drop-shadow-lg text-contrast-content p-4 inline-block text-center absolute left-0 z-20 text-sm"
+      >
+        <template data-value="weekday">
+          <span class="hidden"></span>
+        </template>
+        <template data-value="day">
+          <span class="text-4xl block uppercase leading-none font-bold"></span>
+        </template>
+        <template data-value="month">
+          <span class="text-xl block uppercase leading-tight font-bold"></span>
+        </template>
+        <template data-value="year">
+          <span class="text-lg  mb-1 font-bold  block uppercase leading-tight "></span>
+        </template>
+        <template data-value="to">
+          <span class="font-medium block my-1 text-3xl leading-none">↓</span>
+        </template>
+      </sonic-date>
+      <sonic-image 
+      ratio="1/1" src="https://picsum.photos/id/237/700/700">
+      </sonic-image>
+    </div>
+  </template>
+</sonic-code>
+

package/src/core/components/functional/date/date.ts

@@ -0,0 +1,206 @@
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+import TemplatesContainer from "@supersoniks/concorde/core/mixins/TemplatesContainer";
+import Format from "@supersoniks/concorde/core/utils/Format";
+import HTML from "@supersoniks/concorde/core/utils/HTML";
+import { LitElement, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+
+const tagName = "sonic-date";
+
+type DateTimeFormatPartExtended = {
+  hidden?: boolean;
+  source?: string;
+  type: string;
+  value: string;
+};
+
+type DateTimeFormatExtened = Intl.DateTimeFormat & {
+  formatRangeToParts: (
+    startDate: Date,
+    endDate: Date
+  ) => DateTimeFormatPartExtended[];
+};
+
+@customElement(tagName)
+export class SonicDate extends Subscriber(TemplatesContainer(LitElement)) {
+  pageLanguage = "fr";
+  private duAu: string[] = [];
+  private _wording_billet_periode_validite = "";
+  @property() get wording_billet_periode_validite(): string {
+    return this._wording_billet_periode_validite;
+  }
+  set wording_billet_periode_validite(value: string) {
+    if (!value) value = "Du %s au %s";
+    this._wording_billet_periode_validite = value;
+    this.duAu = this.wording_billet_periode_validite
+      ?.split("%s")
+      .map((str) => str.trim());
+    this.duAu.pop();
+    this.requestUpdate();
+  }
+  @property({ type: Boolean }) designMode: boolean | null = null;
+  @property({ type: String }) time_zone: string | null = null;
+  @property({ type: Number }) date: number | null = null;
+  @property({ type: String }) date_string: string | null = null;
+  @property({ type: String }) start_date_string: string | null = null;
+  @property({ type: String }) end_date_string: string | null = null;
+  @property({ type: Number }) start_date = 0;
+  @property({ type: Boolean }) hide_hours = false;
+  @property({ type: Number }) end_date = 0;
+  @property({ type: String }) era: "narrow" | "short" | "long" | "" = "";
+  @property({ type: String }) year: "numeric" | "2-digit" = "numeric";
+  @property({ type: String }) month:
+    | "numeric"
+    | "2-digit"
+    | "narrow"
+    | "short"
+    | "long" = "short";
+  @property({ type: String }) day: "numeric" | "2-digit" = "2-digit";
+  @property({ type: String }) weekday: "narrow" | "short" | "long" | "hidden" =
+    "short";
+  @property({ type: String }) hour: "numeric" | "2-digit" | "hidden" =
+    "2-digit";
+  @property({ type: Boolean }) hour12 = false;
+  @property({ type: String }) minute: "numeric" | "2-digit" | "hidden" =
+    "2-digit";
+  @property({ type: String }) language = "";
+  @property({ type: Boolean }) renderIf = true;
+  @property({ type: Boolean }) now = false;
+  // @property({type:String}) second: 'numeric' | '2-digit'= "2-digit"
+  // @property({ type: String }) hour12: boolean = false;
+  private startDateObject = new Date();
+  private endDateObject = new Date();
+  connectedCallback(): void {
+    if (!this.hasAttribute("wording_billet_periode_validite"))
+      this.wording_billet_periode_validite = "Du %s au %s";
+    this.pageLanguage = HTML.getLanguage();
+    super.connectedCallback();
+  }
+  /**
+   * Retourne un tableau des différentes parties de la date en fonction des options données, de la date de début et de fin.
+   */
+  getDatesParts(
+    start_date: number,
+    end_date: number,
+    options: Intl.DateTimeFormatOptions
+  ) {
+    const start = this.startDateObject;
+    start.setTime(start_date * 1000);
+
+    let parts: DateTimeFormatPartExtended[] = [];
+    if (end_date > 0) {
+      const end = this.endDateObject;
+      end.setTime(end_date * 1000);
+      //
+      //on affiche pas l'heure si les dates sont les mêmes
+      const isSameDay = start.toDateString() == end.toDateString();
+      if (!isSameDay || this.hide_hours) {
+        delete options.hour;
+        delete options.minute;
+      }
+
+      const format: DateTimeFormatExtened = new Intl.DateTimeFormat(
+        this.language || this.pageLanguage,
+        options
+      ) as DateTimeFormatExtened;
+      parts = format.formatRangeToParts(start, end);
+      //on affiche du au uniquement si on a deux dates différentes
+      if (!isSameDay) {
+        const to = parts.find(
+          (part) =>
+            part.type == "literal" &&
+            part.source == "shared" &&
+            part.value.trim().length > 0
+        );
+        if (to) {
+          to.value = " " + this.duAu[1] + " ";
+          to.type = "to";
+        }
+        if (!this.designMode)
+          parts.unshift({
+            type: "from",
+            value: this.duAu[0] + " ",
+            source: "shared",
+          });
+      }
+    } else {
+      const format: Intl.DateTimeFormat = new Intl.DateTimeFormat(
+        this.language || this.pageLanguage,
+        options
+      );
+      parts = format.formatToParts(start);
+    }
+    //En mode  design on cache les ","
+    if (this.designMode) {
+      // parts.forEach((part) => (part.hidden = part.value.trim() == ","));
+      // replace all "," by " "
+      parts.forEach((part) => (part.value = part.value.replace(/,/g, " ")));
+    }
+    parts[0].value = Format.ucFirst(parts[0].value);
+    return parts.filter((p: DateTimeFormatPartExtended) => p.hidden !== true);
+  }
+  dateStringToSeconds(dateString: string) {
+    return new Date(dateString).getTime() / 1000;
+  }
+
+  render() {
+    if (!this.renderIf) return nothing;
+    /* *
+     * Normalisation en fonction des valeurs de dates passées        *
+     * */
+    if (this.date_string)
+      this.date = this.dateStringToSeconds(this.date_string);
+    if (this.date) this.start_date = this.date;
+    if (this.start_date_string)
+      this.start_date = this.dateStringToSeconds(this.start_date_string);
+    if (this.end_date_string)
+      this.end_date = this.dateStringToSeconds(this.end_date_string);
+
+    if (!this.start_date && !this.now && !this.end_date) return nothing;
+    if (!this.start_date) this.start_date = Date.now() / 1000;
+    if (this.end_date > 0 && this.end_date < this.start_date) {
+      const copy = this.start_date;
+      this.start_date = this.end_date;
+      this.end_date = copy;
+    }
+    /* *
+     * gestion des options d'affichage des dates
+     * */
+    const options: Intl.DateTimeFormatOptions = {
+      year: this.year,
+      month: this.month,
+      day: this.day,
+      hour12: this.hour12,
+    };
+
+    if (this.weekday !== "hidden") options.weekday = this.weekday;
+    if (this.hour !== "hidden") options.hour = this.hour;
+    if (this.minute !== "hidden") options.minute = this.minute;
+    if (this.era) options.era = this.era;
+    if (this.time_zone) options.timeZone = this.time_zone;
+
+    /**
+     * On récupère les différentes partie affichées en vu de l'injection dans le template
+     */
+    const parts = this.getDatesParts(this.start_date, this.end_date, options);
+
+    return unsafeHTML(
+      `${parts
+        .map((part: DateTimeFormatPartExtended) => {
+          const template = this.templateParts[part.type];
+          if (template) {
+            const clone = document.importNode(template.content, true);
+            const child: HTMLElement = clone.children[0] as HTMLElement;
+            if (child.innerText.trim() == "") child.innerText = part.value;
+            return child.outerHTML;
+          }
+          const span = document.createElement("span");
+          span.innerText = part.value;
+          span.className = part.type;
+          return `<span class="${part.type}">${part.value}</span>`;
+        })
+        .join("")}`
+    );
+  }
+}

package/src/core/components/functional/example/example.ts

@@ -0,0 +1,11 @@
+import {html, LitElement} from "lit";
+import {customElement, property} from "lit/decorators.js";
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+const tagName = "sonic-example"; // For Astro.build
+@customElement(tagName)
+export class SonicComponent extends Subscriber(LitElement) {
+  @property() text = "Example";
+  render() {
+    return html`<div>${this.text}</div>`;
+  }
+}

package/src/core/components/functional/fetch/fetch.md

@@ -0,0 +1,117 @@
+# Fetch
+The **sonic-fetch** component is used to request and store data from an API.
+Fetch extends the mixins Fetcher and [Subscriber](#docs/_core-concept/subscriber.md/subscriber)
+
+## Basic usage
+In order to work properly the <b>sonic-fetch</b> component needs at least the following attributes.  
+- **serviceURL** : A base service url. This attribute can be inherited from an ancestor.
+  *ex : https://reqres.in*
+- **endPoint** : the specific location where requests for information are sent (see the api docs).  
+  *ex : api/users | api/users?page=2 | api/users/2*
+- **dataProvider *(Required)*** : An ID that is used as a reference to the object storing the data returned by the API.
+This attribute can be inherited from an ancestor.
+
+<sonic-code>
+  <template>
+    <sonic-fetch serviceURL="https://reqres.in" endPoint="api/users?page=2" dataProvider="myDataObj"></sonic-fetch>
+    <sonic-button dataProvider="myDataObj" debug>Hover to see the data</sonic-button>
+  </template>
+</sonic-code>
+
+## DataProvider as an endPoint
+If no **endPoint** is specified it will be filled by the **dataProvider ID** instead  
+
+<sonic-code>
+  <template>
+    <sonic-fetch serviceURL="https://reqres.in" dataProvider="api/users?page=2" ></sonic-fetch>
+    <sonic-button dataProvider="api/users?page=2" debug>Hover to see the data</sonic-button>
+  </template>
+</sonic-code>
+
+## HeadersDataProvider
+
+<sonic-alert status="error" background>Deprecated</sonic-alert>
+
+## Key
+When the **key** attribute is present, only a sub-part of the data received is injected into the **dataProvider**.
+We can use the dot syntax to target what we want to keep.
+
+For example if the data is `{my:{data:{a:1,b:2}}}` and the key is `key="my.data"`, the data available in the **dataProvider** will be `{a:1 , b:2}`
+
+<sonic-code>
+  <template>
+    <sonic-fetch serviceURL="https://reqres.in" dataProvider="api/users/2" ></sonic-fetch>
+    <sonic-button dataProvider="api/users/2" debug>dataProvider object</sonic-button>
+    <!-- Get the user ID -->
+    <sonic-fetch serviceURL="https://reqres.in" dataProvider="id" endPoint="api/users/2" key="data.id"></sonic-fetch>
+    <sonic-button dataProvider="id" debug>data.id</sonic-button>
+    <!-- Get the user First name -->
+    <sonic-fetch serviceURL="https://reqres.in" dataProvider="first_name" endPoint="api/users/2" key="data.first_name"></sonic-fetch>
+    <sonic-button dataProvider="first_name" debug>data.first_name</sonic-button>
+    <!-- Get the user Last name -->
+    <sonic-fetch serviceURL="https://reqres.in" dataProvider="last_name" endPoint="api/users/2" key="data.last_name"></sonic-fetch>
+    <sonic-button dataProvider="last_name" debug>data.last_name</sonic-button>
+    <!-- Get the user email -->
+    <sonic-fetch serviceURL="https://reqres.in" dataProvider="email" endPoint="api/users/2" key="data.email"></sonic-fetch>
+    <sonic-button dataProvider="email" debug>data.email</sonic-button>
+  </template>
+</sonic-code>
+
+## Text mode
+
+if the mime type of the content returned by the service begins with **text/**, then the dataProvider has a key named "text" which contains the text returned by the service.
+
+<sonic-code>
+  <template>
+    <sonic-fetch endPoint="README.md" dataProvider="fetchText"></sonic-fetch>
+    <sonic-button dataProvider="fetchText" debug>Hover to see the data</sonic-button>
+  </template>
+</sonic-code>
+
+## NoLoader
+
+The noLoader attribute disables display of the default loader
+
+<sonic-code>
+  <template>
+    <sonic-fetch noLoader serviceURL="https://reqres.in" endPoint="api/users?page=2" dataProvider="myDataObj"></sonic-fetch>
+    <sonic-button dataProvider="myDataObj" debug>Basic fetch with noLoader attribute</sonic-button>
+  </template>
+</sonic-code>
+
+
+
+
+<!--
+ ## Summary
+ Extends mixins : Fetcher, [Subscriber](#core/components/functional/subscriber/subscriber.md/subscriber)
+ 
+ ### Configuration via les attributs
+
+| nom          | sur quelle balise | Description | Exemple de valeur | défaut / requis |
+|-----|-----|---|---|---|
+| serviceURL   |Fetcher ou un de ses parents | URL de base des services. | http://la-billetterie.net/api/v2 | domain du site |
+| endpoint   |Fetcher | point d'accès d'un service | user/2 | valeur de l'attribut dataProvider |
+| dataProvider  |Fetcher ou un de ses parents | Identifiant d'un publisher qui stock les données, voir [subscriber](#core/components/functional/subscriber/subscriber.md/subscriber). | billetterie/user/2 | *REQUIS* |
+| headersDataProvider  |Fetcher ou un de ses parents | Identifiant d'un publisher qui stock les données destinées à être envoyées en entêtes de la requetes | MyCoockieHEaders | null |
+| key  |Fetcher  | extrait une sous propriété de la donnée chargée avant de l'assignée à son publisher | ma.data | null |
+
+ *Si la données est `{ma:{data:{a:1,b:2}}}` et `key="ma.data"`, la données disponible dans le composant sera `{a:1, b:2}`*
+ 
+ ### Intégration auto de basic auth (pour tester une api qui nécessite une authentification) 
+
+ Fetch utilise le service pour générer le token et l'ajoute au header de l'appel qui récupère les données.
+
+| nom           | sur quelle balise | Description | Exemple de valeur | défaut / requis |
+|-----|-----|---|---|---|
+| userName      | Fetcher ou un de ses parents | Nom de l'utilisateur | DjuDju | null |
+| password      | Fetcher ou un de ses parents | mot de passe | pom_549 | null |
+| tokenProvider | Fetcher ou un de ses parents | point d'accès du service fournissant le token | auth | null |
+| token | Fetcher ou un de ses parents | A fournir à la place des autres attributs si on le possède | q<d34gb | null |
+
+ ### Autres choses utiles
+ L'attribut *noLoader* du composant permet de désactiver l'affichage du loader par défaut.
+ On peut appeler la methode invalidate() sur le publisher associé au  composant pour declencher le rechargement des données.
+ endPoint est une propriété réctive, par conséquent, sa modification, manuelle via template ou data binbding provoque la mise à jour du contenu.
+-->
+