@supersoniks/concorde 3.1.0 → 3.1.1

package/src/docs/_getting-started/my-first-subscriber.md

@@ -0,0 +1,174 @@
+# My first subscriber component
+
+Learn how to build a subscriber component, styled with tailwind, 
+which could be used as a regular component or could be filled from a dataprovider.
+
+## Create a classic lit component
+
+<sonic-code language="javascript" >
+  <template>
+  import { html, LitElement, nothing } from "lit";
+  import { customElement, property } from "lit/decorators.js";
+  // name component
+  @customElement("docs-user")
+  export class user extends LitElement {
+    // set a few props
+    @property({ type: String }) first_name = "";
+    @property({ type: String }) last_name = "";
+    @property({ type: String }) avatar = "";
+    @property({ type: String }) email = "";
+    // output
+    render() {
+      return html`
+        <img src="${this.avatar}"  /> <br>
+        ${this.first_name} ${this.last_name} <br>
+        ${this.email}`;
+    }
+  }
+  </template>
+</sonic-code>
+
+
+### Style with tailwind and ui components
+
+First export tailwind, in a tailwind.ts file, stylesheet to add it in our component when needed.
+
+<sonic-code language="javascript">
+  <template>
+  import { css, unsafeCSS } from "lit";
+  import tailwindImport from "./css/tailwind.css?inline";
+  export const tailwind = css`${unsafeCSS(tailwindImport)}`;
+  </template>
+</sonic-code>
+
+<sonic-code language="javascript">
+  <template>
+    import { html, LitElement, nothing } from "lit";
+    import { customElement, property } from "lit/decorators.js";
+    // add tailwind and needed components
+    import { tailwind } from "../tailwind";
+    import '@supersoniks/concode/ui/image'
+    import '@supersoniks/concode/ui/button'
+    import '@supersoniks/concode/ui/icon'
+    //
+    @customElement("docs-user")
+    export class user extends LitElement {
+      // add tailwind stylesheed
+      static styles = [tailwind];
+      @property({ type: String }) first_name = "";
+      @property({ type: String }) last_name = "";
+      @property({ type: String }) avatar = "";
+      @property({ type: String }) email = "";
+      // use utility class in your markup
+      render() {
+        return html`<div
+          class="flex items-center gap-3 rounded-md hover:bg-neutral-50 -mx-2 p-2"
+        >
+          <sonic-image
+            src=${this.avatar}
+            rounded="md"
+            ratio="1/1"
+            class="w-16 block"
+          ></sonic-image>
+          <div>
+            <div>
+              ${this.first_name} <span class="font-bold">${this.last_name}</span>
+            </div>
+            <div class="text-sm text-neutral-400">${this.email}</div>
+          </div>
+          <div class="ml-auto relative">
+            <sonic-button
+              href="mailto:${this.email}"
+              size="sm"
+              variant="outline"
+              shape="circle"
+              class="relative"
+              icon
+            >
+              <sonic-icon library="iconoir" name="chat-bubble"></sonic-icon>
+            </sonic-button>
+          </div>
+        </div>`;
+      }
+    }
+  </template>
+</sonic-code>
+
+### Basic usage
+
+Reactive properties can be filled by its attributes as a simple lit component.
+
+<sonic-code>
+<template>
+<docs-user
+  first_name="Paul"
+  last_name="Metrand"
+  avatar="/img/paul_metrand_xs.jpg"
+  email="paulmetrand@concorde.fr"
+  ></docs-user>
+</template>
+</sonic-code>
+
+## Add Subscriber mixin
+
+Import Subscriber mixin, and add it around LitElement.
+<sonic-code language="javascript">
+  <template>
+    import { html, LitElement, nothing } from "lit";
+    import { customElement, property } from "lit/decorators.js";
+    import { tailwind } from "../tailwind";
+    import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+    @customElement("docs-user")
+    export class user extends Subscriber(LitElement) {
+      //...
+    }
+  </template>
+</sonic-code>
+
+## Autofill properties from a dataProvider
+
+Without a dataProvider attribute, a subscriber set its own dataprovider from first ancestor found, and then reactive properties automatically filled and update from it.
+A fetcher is a simple component which set its fetch result to props of its dataprovider.
+<sonic-code >
+<template>
+<sonic-fetch 
+    serviceURL="https://reqres.in"
+    dataProvider="api/users/3" 
+    key="data">
+     <docs-user></docs-user>
+</sonic-fetch>
+</template>
+</sonic-code>
+
+A subscriber can subscribe data from anywhere in the DOM, with its dataprovider set as a provider id.  
+<sonic-code >
+<template>
+<sonic-fetch 
+    serviceURL="https://reqres.in"
+    dataProvider="api/users/2" 
+    key="data"></sonic-fetch>
+<docs-user dataProvider="api/users/2" ></docs-user>
+<docs-user dataProvider="api/users/2" ></docs-user>
+<docs-user dataProvider="api/users/2" ></docs-user>
+</template>
+</sonic-code>
+
+
+<sonic-code >
+<template>
+
+<div class="grid grid-cols-1 gap-4">
+<form formDataProvider="userPreview" class="grid grid-cols-4 gap-3" >
+  <sonic-input label="First name" type="text" name="first_name" placeholder="John" value="Paul"></sonic-input>
+  <sonic-input label="Last name" type="text" name="last_name" placeholder="Doe" value="Metrand"></sonic-input>
+  <sonic-input class="col-span-2"  label="email" type="text" name="email" placeholder="johndoe@concorde.fr" value="paulmetrand@concorde.fr"></sonic-input>
+  <sonic-input type="file" name="avatar" value="/img/paul_metrand_xs.jpg"></sonic-input>
+</form>
+<sonic-divider align="left">Preview before submit</sonic-divider>
+<docs-user dataProvider="userPreview" ></docs-user>
+<sonic-button onClick="alert(JSON.stringify(SonicPublisherManager.get('userPreview').get()))">
+  Update data
+</sonic-button>
+</div>
+</template>
+</sonic-code>

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

@@ -2,7 +2,7 @@
 
 ## What is Concorde ? 
 
-Based on **[lit.dev](https://lit.dev)**, Concorde is a collection of webcomponents made to build shared components, between apps or websites.  
+Based on **[lit.dev](https://lit.dev)**, Concorde is a collection of webcomponents made to build shared 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
@@ -25,7 +25,7 @@ Webcomponents appeared to be a the perfect solution to guarantee that compatibil
 * Fetching data, lists, queue with lazyload
 * Data binding
 * Simple router, state component, ...
-* All ui component, with status variations to build an app with a consistent design
+* And all ui component, with status variants to build an app with a consistent design
 
 
 ## Start a new project easily 

package/src/docs/example/users.ts

@@ -1,64 +1,59 @@
-import { html, LitElement } from "lit";
+import { html, LitElement, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
-import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
 import { tailwind } from "../tailwind";
 
-@customElement("docs-preview-user-item")
+import Subscriber from "@supersoniks/concorde/core/mixins/Subscriber";
+
+@customElement("docs-user")
 export class user extends Subscriber(LitElement) {
+  // add tailwind
   static styles = [tailwind];
 
+  @property({ type: String }) id = "";
   @property({ type: String }) avatar = "";
   @property({ type: String }) first_name = "";
   @property({ type: String }) email = "";
   @property({ type: String }) last_name = "";
-  @property({ type: String }) id = "";
 
   render() {
-    const inList = !!this.props?._metadata_;
-    const isfirst = this.props?._metadata_?.firstChild;
-    return html` ${!isfirst && inList
-        ? html`<div class="border-t my-1 border-neutral-100"></div>`
-        : ""}
-      <div
-        class="flex items-center gap-3 rounded-md hover:bg-neutral-100 -mx-2 p-2"
-      >
-        <sonic-image
-          data-bind=""
-          src=${this.avatar}
-          rounded="md"
-          ratio="1/1"
-          class="w-16 block"
-        ></sonic-image>
+    return html`<div
+      class="flex items-center gap-3 rounded-md hover:bg-neutral-50 -mx-2 p-2"
+    >
+      <sonic-image
+        src=${this.avatar}
+        rounded="md"
+        ratio="1/1"
+        class="w-16 block"
+      ></sonic-image>
+      <div>
         <div>
-          <div class="text-bold">
-            ${this.first_name} <span class="font-bold">${this.last_name}</span>
-          </div>
-          <div class="text-sm text-neutral-400">${this.email}</div>
-        </div>
-        <div class="ml-auto relative">
-          ${this.id == "2" || this.id == "5"
-            ? html`
-                <sonic-badge
-                  type="danger"
-                  size="2xs"
-                  class="absolute left-0 -top-1 z-10"
-                >
-                  ${this.id}</sonic-badge
-                >
-              `
-            : ""}
-          <sonic-button
-            data-bind=""
-            href="mailto:${this.email}"
-            size="sm"
-            variant="outline"
-            shape="circle"
-            class="relative"
-            icon
-          >
-            <sonic-icon library="iconoir" name="chat-bubble"></sonic-icon>
-          </sonic-button>
+          ${this.first_name} <span class="font-bold">${this.last_name}</span>
         </div>
-      </div>`;
+        <div class="text-sm text-neutral-400">${this.email}</div>
+      </div>
+      <div class="ml-auto relative">
+        ${this.id == "2" || this.id == "5"
+          ? html`
+              <sonic-badge
+                type="danger"
+                size="2xs"
+                class="absolute left-0 -top-1 z-10"
+              >
+                ${this.id}</sonic-badge
+              >
+            `
+          : nothing}
+        <sonic-button
+          href="mailto:${this.email}"
+          size="sm"
+          variant="outline"
+          shape="circle"
+          class="relative"
+          icon
+        >
+          <sonic-icon library="iconoir" name="chat-bubble"></sonic-icon>
+        </sonic-button>
+      </div>
+    </div>`;
   }
 }

package/src/docs/navigation/navigation.ts

@@ -11,8 +11,8 @@ export class DocsNavigation extends LitElement {
       href: "#docs/_getting-started/concorde-outside.md/concorde-outside",
     },
     {
-      label: "Creating components",
-      href: "#docs/_getting-started/create-a-component.md/create-a-component",
+      label: "My first subscriber",
+      href: "#docs/_getting-started/my-first-subscriber.md/my-first-subscriber",
     },
     {
       label: "Adding styles",

package/src/docs/search/docs-search.json

@@ -2144,6 +2144,21 @@
       }
     }
   },
+  {
+    "search": "Displays an indicator showing the completion progress of a task.\n",
+    "files": {
+      "core/components/ui/progress/progress.md": {
+        "title": "Progress bar",
+        "hashes": {
+          "progress-bar": {
+            "count": 1,
+            "title": "",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
   {
     "search": "Table",
     "files": {
@@ -2190,14 +2205,14 @@
     }
   },
   {
-    "search": "A scroll bar is automatically added if the content if is wider than the table width\n",
+    "search": "Every table is responsive by default\n",
     "files": {
       "core/components/ui/table/table.md": {
         "title": "Table",
         "hashes": {
-          "scroll-x": {
+          "responsive": {
             "count": 1,
-            "title": "Scroll-x",
+            "title": "Responsive",
             "type": "paragraph"
           }
         }
@@ -2219,6 +2234,21 @@
       }
     }
   },
+  {
+    "search": "By default, tooltip is centered next to its content\n",
+    "files": {
+      "core/components/ui/tooltip/tooltip.md": {
+        "title": "Tooltip",
+        "hashes": {
+          "placement": {
+            "count": 1,
+            "title": "Placement",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
   {
     "search": "lit + tailwind + vite",
     "files": {
@@ -3254,6 +3284,111 @@
       }
     }
   },
+  {
+    "search": "My first subscriber component",
+    "files": {
+      "docs/_getting-started/my-first-subscriber.md": {
+        "title": "My first subscriber component",
+        "hashes": {
+          "my-first-subscriber-component": {
+            "count": 1,
+            "title": "",
+            "type": "page"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Learn how to build a subscriber component, styled with tailwind, \nwhich could be used as a regular component or could be filled from a dataprovider.\n",
+    "files": {
+      "docs/_getting-started/my-first-subscriber.md": {
+        "title": "My first subscriber component",
+        "hashes": {
+          "my-first-subscriber-component": {
+            "count": 1,
+            "title": "",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "First export tailwind, in a tailwind.ts file, stylesheet to add it in our component when needed.\n",
+    "files": {
+      "docs/_getting-started/my-first-subscriber.md": {
+        "title": "My first subscriber component",
+        "hashes": {
+          "style-with-tailwind-and-ui-components": {
+            "count": 1,
+            "title": "Style with tailwind and ui components",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Reactive properties can be filled by its attributes as a simple lit component.\n",
+    "files": {
+      "docs/_getting-started/my-first-subscriber.md": {
+        "title": "My first subscriber component",
+        "hashes": {
+          "basic-usage": {
+            "count": 1,
+            "title": "Basic usage",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Import Subscriber mixin, and add it around LitElement.\n\n",
+    "files": {
+      "docs/_getting-started/my-first-subscriber.md": {
+        "title": "My first subscriber component",
+        "hashes": {
+          "add-subscriber-mixin": {
+            "count": 1,
+            "title": "Add Subscriber mixin",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "Without a dataProvider attribute, a subscriber set its own dataprovider from first ancestor found, and then reactive properties automatically filled and update from it.\nA fetcher is a simple component which set its fetch result to props of its dataprovider.\n\n",
+    "files": {
+      "docs/_getting-started/my-first-subscriber.md": {
+        "title": "My first subscriber component",
+        "hashes": {
+          "autofill-properties-from-a-dataprovider": {
+            "count": 1,
+            "title": "Autofill properties from a dataProvider",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
+  {
+    "search": "A subscriber can subscribe data from anywhere in the DOM, with its dataprovider set as a provider id.\n",
+    "files": {
+      "docs/_getting-started/my-first-subscriber.md": {
+        "title": "My first subscriber component",
+        "hashes": {
+          "autofill-properties-from-a-dataprovider": {
+            "count": 1,
+            "title": "Autofill properties from a dataProvider",
+            "type": "paragraph"
+          }
+        }
+      }
+    }
+  },
   {
     "search": "Sharing data",
     "files": {
@@ -3420,7 +3555,7 @@
     }
   },
   {
-    "search": "Based on 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.\n",
+    "search": "Based on lit.dev, Concorde is a collection of webcomponents made to build shared 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.\n",
     "files": {
       "docs/_getting-started/start.md": {
         "title": "Introduction",

package/src/docs/search/search.ts

@@ -90,10 +90,12 @@ export class DocsSearch extends LitElement {
 
   firstUpdated() {
     if (this.setFocus) {
-      const input = this.shadowRoot?.querySelector(
-        "sonic-input"
-      ) as FormElementInterface;
-      input?.focus();
+      setTimeout(() => {
+        const input = this.shadowRoot?.querySelector(
+          "sonic-input"
+        ) as FormElementInterface;
+        input?.focus();
+      }, 100);
     }
   }