fix details documentation and improve code quality

elixir-cloud-aai · Dec 11, 2024 · d7f2aea · d7f2aea
1 parent e6b17fa
commit d7f2aea
Show file tree

Hide file tree

Showing 8 changed files with 238 additions and 271 deletions.
diff --git a/apps/documentation/components/packages/design/details/details.tsx b/apps/documentation/components/packages/design/details/details.tsx
diff --git a/apps/documentation/pages/_meta.json b/apps/documentation/pages/_meta.json
@@ -13,17 +13,6 @@
   },
   "about": {
     "title": "About",
-    "type": "menu",
-    "items": {
-      "contact": {
-        "title": "Contact",
-        "type": "page",
-        "href": "/about/contact"
-      },
-      "contribute": {
-        "title": "Contribute",
-        "type": "page"
-      }
-    }
+    "type": "page"
   }
-}
+}
diff --git a/apps/documentation/pages/about/_meta.json b/apps/documentation/pages/about/_meta.json
@@ -1,10 +1,4 @@
 {
-  "contact": {
-    "title": "Contact",
-    "type": "page"
-  },
-  "contribute": {
-    "title": "Contribute",
-    "type": "page"
-  }
+  "contact": "Contact",
+  "contribute": "Contribute"
 }
diff --git a/packages/ecc-utils-design/demo/details/index.html b/packages/ecc-utils-design/demo/details/index.html
@@ -114,8 +114,6 @@
         html`
           <ecc-d-details>
             <ecc-d-data-item
-              copy
-              label="Company Info"
               type="tab"
               tabs='["Company Info", "Employees", "Clients", "Financials"]'
             >
@@ -240,13 +238,15 @@
               </div>
             </ecc-d-data-item>
 
-            <a href="#" type="action" position="left">text</a>
-            <button type="action" class="action-button danger">Cancel</button>
+            <a href="#" ecc-type="action" ecc-position="left">text</a>
+            <button ecc-type="action" class="ecc-action-button ecc-danger">
+              Cancel
+            </button>
             <button
-              type="action"
-              position="right"
-              class="action-button primary"
-              end-icon="${saveIcon}"
+              ecc-type="action"
+              ecc-position="right"
+              class="ecc-action-button ecc-primary"
+              ecc-end-icon="${saveIcon}"
             >
               Save
             </button>

diff --git a/packages/ecc-utils-design/src/components/details/dataItem.ts b/packages/ecc-utils-design/src/components/details/dataItem.ts
@@ -1,5 +1,5 @@
 import { html, LitElement } from "lit";
-import { property } from "lit/decorators.js";
+import { property, state } from "lit/decorators.js";
 import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
 import "@shoelace-style/shoelace/dist/components/copy-button/copy-button.js";
 import "@shoelace-style/shoelace/dist/components/tab/tab.js";
@@ -21,12 +21,32 @@ export class EccUtilsDesignDataItem extends LitElement {
     dataItemStyles,
   ];
 
-  @property({ type: Array, reflect: true }) tabs = [];
-  @property({ type: Boolean }) copy = false;
-  @property({ type: String }) type = "";
-  @property({ type: String }) value = "";
-  @property({ type: String }) label = "";
-  @property() tooltip = "";
+  @property({ type: Array, reflect: true }) tabs: string[] = [];
+  @property({ type: Boolean, reflect: true }) copy = false;
+  @property({ type: String, reflect: true }) type = "";
+  @property({ type: String, reflect: true }) value = "";
+  @property({ type: String, reflect: true }) label = "";
+  @property({ type: String, reflect: true }) tooltip = "";
+  @state() forceStateUpdate = 0;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    const observer = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === "childList") {
+          // React does not handle custom elements very well
+          // So we have to force a state update whenever the childList changes
+          // so we can have access to its updated attributes
+          this.forceStateUpdate += 1;
+        }
+      });
+    });
+
+    observer.observe(this.shadowRoot!, {
+      childList: true,
+    });
+  }
 
   render() {
     const tabs = () => html`

diff --git a/packages/ecc-utils-design/src/components/details/details.styles.ts b/packages/ecc-utils-design/src/components/details/details.styles.ts
@@ -26,7 +26,7 @@ export const detailsStyles = css`
     text-decoration: underline;
     padding: 0;
   }
-  .action-button {
+  .ecc-action-button {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -43,20 +43,20 @@ export const detailsStyles = css`
     white-space: nowrap;
     font-size: var(--ecc-input-font-size-medium);
   }
-  .action-button:active {
+  .ecc-action-button:active {
     scale: 0.98;
   }
-  .action-button.primary {
+  .ecc-action-button.ecc-primary {
     color: white;
     background-color: var(--ecc-color-primary-600);
     border: none;
   }
-  .action-button.danger {
+  .ecc-action-button.ecc-danger {
     color: white;
     background-color: var(--sl-color-danger-600);
     border: none;
   }
-  .icon {
+  .ecc-icon {
     height: var(--ecc-input-font-size-large);
     width: var(--ecc-input-font-size-large);
   }

diff --git a/packages/ecc-utils-design/src/components/details/details.ts b/packages/ecc-utils-design/src/components/details/details.ts
@@ -23,11 +23,13 @@ export class EccUtilsDesignDetails extends LitElement {
 
   render() {
     const getLeftActionButtons = () =>
-      Array.from(this.querySelectorAll('[type="action"][position="left"]'));
+      Array.from(
+        this.querySelectorAll('[ecc-type="action"][ecc-position="left"]')
+      );
 
     const getRightActionButtons = () =>
       Array.from(
-        this.querySelectorAll('[type="action"]:not([position="left"])')
+        this.querySelectorAll('[ecc-type="action"]:not([ecc-position="left"])')
       );
 
     return html`

diff --git a/packages/ecc-utils-design/src/components/details/utils.ts b/packages/ecc-utils-design/src/components/details/utils.ts
@@ -4,6 +4,7 @@ import * as _ from "lodash-es";
 import "@shoelace-style/shoelace/dist/components/tooltip/tooltip.js";
 
 export const getListData = (input: string) => {
+  if (typeof input !== "string") return input;
   if (input.trim().startsWith("[") && input.trim().endsWith("]")) {
     return JSON.parse(input);
   }
@@ -12,13 +13,14 @@ export const getListData = (input: string) => {
 
 export const getNestedCopyValue = (el: Element) => {
   const dataItems = el.querySelectorAll("ecc-d-data-item");
+
   const data: Record<string, string> = {};
 
   dataItems.forEach((e) => {
     const pathName = e.getAttribute("label") || "label";
 
     if (_.isEqual(el, e.parentElement)) {
-      if (e.getAttribute("type") === null) {
+      if (!e.getAttribute("type")?.trim()) {
         _.set(data, pathName, e.getAttribute("value"));
       } else if (e.getAttribute("type") === "list") {
         _.set(data, pathName, getListData(e.getAttribute("value") || ""));
@@ -44,14 +46,14 @@ export const formatLabel = (str: string) => {
 export const formatBtn = (btn: Element) => {
   const parser = new DOMParser();
   const startIcon = parser
-    .parseFromString(btn.getAttribute("start-icon") || "", "text/html")
+    .parseFromString(btn.getAttribute("ecc-start-icon") || "", "text/html")
     .body.querySelector("*");
-  startIcon?.classList.add("icon", "start-icon");
+  startIcon?.classList.add("ecc-icon", "ecc-start-icon");
 
   const endIcon = parser
-    .parseFromString(btn.getAttribute("end-icon") || "", "text/html")
+    .parseFromString(btn.getAttribute("ecc-end-icon") || "", "text/html")
     .body.querySelector("*");
-  endIcon?.classList.add("icon", "end-icon");
+  endIcon?.classList.add("ecc-icon", "ecc-end-icon");
 
   btn.setAttribute("rel", btn.getAttribute("rel") || "noopener noreferrer");
   btn.setAttribute("target", btn.getAttribute("target") || "_blank");