@salesforcedevs/docs-components 1.3.345-spage → 1.3.345-spec-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.3.345-spage",
+    "version": "1.3.345-spec-alpha1",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/contentLayout/contentLayout.ts

@@ -12,6 +12,7 @@ declare const Sprig: (eventType: string, eventNme: string) => void;
 
 const TOC_HEADER_TAG = "doc-heading";
 const RNB_BY_TAB = "docs-tab";
+const SPECIFICATION_TAB_TITLE = "Specification";
 const HIGHLIGHTABLE_SELECTOR = [
     "p",
     "h1",
@@ -116,6 +117,13 @@ export default class ContentLayout extends LightningElement {
         this.updateRNB();
     };
 
+    onRNBClick = () => {
+        const currentTab = this.getSelectedTabId();
+        if (currentTab === SPECIFICATION_TAB_TITLE) {
+            this.didScrollToSelectedHash = false;
+        }
+    };
+
     private getTabPanelList() {
         return document.querySelector("dx-tab-panel-list");
     }
@@ -124,8 +132,14 @@ export default class ContentLayout extends LightningElement {
         const headingElements = this.getHeadingElements();
         headingElements.forEach((headingElement: any) => {
             // Sometimes elements hash and header is not being set when slot content is wrapped with div
-            headingElement.hash = headingElement.attributes.hash?.nodeValue;
-            headingElement.header = headingElement.attributes.header?.nodeValue;
+            if (!headingElement.hash) {
+                headingElement.hash = headingElement.attributes.hash?.nodeValue;
+            }
+
+            if (!headingElement.header) {
+                headingElement.header =
+                    headingElement.attributes.header?.nodeValue;
+            }
         });
         this.updateTocItems(headingElements);
     };
@@ -138,8 +152,19 @@ export default class ContentLayout extends LightningElement {
                 tabPanelListItem?.querySelectorAll("dx-tab-panel");
             for (const tabPanelItem of tabPanels) {
                 if (tabPanelItem.active) {
-                    headingElements =
-                        tabPanelItem.querySelectorAll(TOC_HEADER_TAG);
+                    // This is needed for Specification tab content
+                    const specificationElement = tabPanelItem.querySelector(
+                        "doc-specification-content"
+                    );
+                    if (specificationElement) {
+                        headingElements =
+                            specificationElement.shadowRoot.querySelectorAll(
+                                TOC_HEADER_TAG
+                            );
+                    } else {
+                        headingElements =
+                            tabPanelItem.querySelectorAll(TOC_HEADER_TAG);
+                    }
                     break;
                 }
             }
@@ -278,6 +303,11 @@ export default class ContentLayout extends LightningElement {
             this.setRNBByTab();
             if (this.showTabBasedRNB) {
                 window.addEventListener("tabchanged", this.onTabChanged);
+                window.addEventListener(
+                    "specificationdatarendered",
+                    this.onTabChanged
+                );
+                window.addEventListener("selectedcontent", this.onRNBClick);
                 this.restoreTabSelection();
             }
             this.restoreScroll();
@@ -293,7 +323,14 @@ export default class ContentLayout extends LightningElement {
         window.removeEventListener("scroll", this.adjustNavPosition);
         window.removeEventListener("resize", this.adjustNavPosition);
         window.removeEventListener("tabchanged", this.onTabChanged);
-        window.removeEventListener("popstate", this.handlePopState);
+        if (this.showTabBasedRNB) {
+            window.removeEventListener(
+                "specificationdatarendered",
+                this.onTabChanged
+            );
+            window.removeEventListener("selectedcontent", this.onRNBClick);
+            window.removeEventListener("popstate", this.handlePopState);
+        }
         this.searchSyncer.dispose();
         this.clearRenderObserverTimer();
 

package/src/modules/doc/specificationContent/specificationContent.css

@@ -0,0 +1,3 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/table";

package/src/modules/doc/specificationContent/specificationContent.html

@@ -1,46 +1,145 @@
 <template>
-    <lightning-card title="Fetched Data">
-        <!-- Display Attributes if they exist -->
+    <div class="specification-properties">
         <template if:true={hasAttributes}>
-            <h3>Attributes</h3>
-            <ul>
-                <template for:each={data.attribute} for:item="attr">
-                    <li key={attr.name}>
-                        <strong>{attr.name}:</strong>
-                        {attr.desc}
-                    </li>
-                </template>
-            </ul>
+            <doc-heading
+                header="Attributes"
+                hash="attributes"
+                aria-level="2"
+                id="attributes"
+            ></doc-heading>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                        <th>Type</th>
+                        <th>Default</th>
+                        <th>Required</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={attributes} for:item="attribute">
+                        <tr key={attribute.name}>
+                            <td>{attribute.nameInKebabCase}</td>
+                            <td>{attribute.description}</td>
+                            <td>{attribute.type}</td>
+                            <td>{attribute.default}</td>
+                            <td>
+                                <template lwc:if={attribute.required}>
+                                    <dx-icon
+                                        symbol="success"
+                                        size="large"
+                                        color="green-vibrant-65"
+                                    ></dx-icon>
+                                </template>
+                            </td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
         </template>
 
-        <!-- Display Methods if they exist -->
         <template if:true={hasMethods}>
-            <h3>Methods</h3>
-            <ul>
-                <template for:each={data.method} for:item="method">
-                    <li key={method.name}>
-                        <strong>{method.name}:</strong>
-                        {method.desc}
-                    </li>
-                </template>
-            </ul>
+            <doc-heading
+                header="Methods"
+                hash="methods"
+                aria-level="2"
+                id="methods"
+            ></doc-heading>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                        <th>Argument Name</th>
+                        <th>Argument Type</th>
+                        <th>Argument Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={processedMethods} for:item="method">
+                        <template if:true={method.firstArgument}>
+                            <tr key={method.name}>
+                                <td rowspan={method.arguments.length}>
+                                    {method.nameInKebabCase}
+                                </td>
+                                <td rowspan={method.arguments.length}>
+                                    {method.description}
+                                </td>
+                                <td>{method.firstArgument.name}</td>
+                                <td>{method.firstArgument.type}</td>
+                                <td>{method.firstArgument.description}</td>
+                            </tr>
+                            <template
+                                for:each={method.remainingArguments}
+                                for:item="arg"
+                            >
+                                <tr key={arg.name}>
+                                    <td>{arg.name}</td>
+                                    <td>{arg.type}</td>
+                                    <td>{arg.description}</td>
+                                </tr>
+                            </template>
+                        </template>
+                        <template if:false={method.firstArgument}>
+                            <tr key={method.name}>
+                                <td>{method.nameInKebabCase}</td>
+                                <td>{method.description}</td>
+                                <td colspan="3"></td>
+                            </tr>
+                        </template>
+                    </template>
+                </tbody>
+            </table>
         </template>
 
-        <!-- Display Slots if they exist -->
         <template if:true={hasSlots}>
-            <h3>Slots</h3>
-            <ul>
-                <template for:each={data.slots} for:item="slot">
-                    <li key={slot.name}>
-                        <strong>{slot.name}:</strong>
-                        {slot.desc}
-                    </li>
-                </template>
-            </ul>
+            <doc-heading
+                header="Slots"
+                hash="slots"
+                aria-level="2"
+                id="slots"
+            ></doc-heading>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={slots} for:item="slot">
+                        <tr key={slot.name}>
+                            <td>{slot.nameInKebabCase}</td>
+                            <td>{slot.description}</td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
         </template>
 
-        <template if:true={error}>
-            <p>Error fetching data: {error}</p>
+        <template if:true={hasEvents}>
+            <doc-heading
+                header="Events"
+                hash="events"
+                aria-level="2"
+            ></doc-heading>
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <template for:each={events} for:item="event">
+                        <tr key={event.name}>
+                            <td>{event.nameInKebabCase}</td>
+                            <td>{event.description}</td>
+                        </tr>
+                    </template>
+                </tbody>
+            </table>
         </template>
-    </lightning-card>
+    </div>
 </template>

package/src/modules/doc/specificationContent/specificationContent.ts

@@ -1,41 +1,98 @@
-import { LightningElement, track } from "lwc";
-import { toJson } from "dxUtils/normalizers";
+import { LightningElement, track, api } from "lwc";
+import { Method, Specifiaction } from "typings/custom";
 
-export default class specificationContent extends LightningElement {
-    @track data: any; // Reactive property to store fetched data
-    @track error: any; // To track any errors
+export default class SpecificationContent extends LightningElement {
+    @track data: any;
+    // TODO: added these default values for testing, will drop this once the backend is ready.
+    @api component: string = "button";
+    @api type: string = "lwc";
+    @api subType: string = "lightning";
+
+    /* TODO: The actual URL is as follows:
+     * http://api.salesforce.com/doc-platform/developer/v1/{type}/{sub-type}/{component-name}
+     * Until the API integration is ready, we will go ahead with mocked-router-url.
+     */
+    @api routerUrl: string =
+        "https://cx-mock-router-internal-07a18d7b3f61.herokuapp.com";
+
+    private attributes: Specifiaction[] = [];
+    private methods: Method[] = [];
+    private slots: Specifiaction[] = [];
+    private events: Specifiaction[] = [];
 
-    // Lifecycle method to fetch data when the component is inserted into the DOM
     connectedCallback() {
-        this.loadData();
+        this.fetchComponentMetadata();
     }
 
-    // Method to make the API call
-    loadData() {
-        fetch("http://localhost:3002/card") // Sample API URL
-            .then((response) => response.json()) // Convert response to JSON
-            .then((result) => {
-                this.data = toJson(result); // Store data to update UI
-                this.error = undefined; // Clear any previous errors
-            })
-            .catch((error) => {
-                this.error = error; // Capture any errors
-                this.data = {}; // Clear data on error
-            });
+    async fetchComponentMetadata() {
+        const url = `${this.routerUrl}/${this.type}/${this.subType}/${this.component}`;
+
+        try {
+            const response = await fetch(url);
+
+            if (!response.ok) {
+                // TODO: Will add loader and show error as follow-up
+                throw new Error(`Failed to fetch: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+            this.data = result;
+            ({
+                attributes: this.attributes,
+                methods: this.methods,
+                slots: this.slots,
+                events: this.events
+            } = this.data);
+        } catch (error) {
+            this.data = {};
+            console.error("fetchComponentMetadata() failed for:" + url);
+        }
+    }
+
+    /**
+     * This getting is doing the data processing for Method to display the nested tables.
+     */
+    get processedMethods() {
+        return this.methods.map((method) => {
+            const [firstArgument, ...remainingArguments] =
+                method.arguments || [];
+            return {
+                ...method,
+                firstArgument,
+                remainingArguments,
+                hasArguments: method.arguments && method.arguments.length > 0
+            };
+        });
     }
 
-    // Helper to check if attributes exist
     get hasAttributes() {
-        return this.data?.attribute;
+        return this.attributes?.length > 0;
     }
 
-    // Helper to check if methods exist
     get hasMethods() {
-        return this.data?.method;
+        return this.methods?.length > 0;
     }
 
-    // Helper to check if slots exist
     get hasSlots() {
-        return this.data?.slots;
+        return this.slots?.length > 0;
+    }
+
+    get hasEvents() {
+        return this.events?.length > 0;
+    }
+
+    renderedCallback(): void {
+        this.notifySpecificationDataRendered();
+    }
+
+    notifySpecificationDataRendered() {
+        // Dispatch a custom event to notify the specification tab has rendered.
+        this.dispatchEvent(
+            new CustomEvent("specificationdatarendered", {
+                detail: { name: "doc-specification-content" },
+                bubbles: true,
+                composed: true
+            })
+        );
     }
 }