@salesforcedevs/docs-components 0.53.6 → 0.54.0-alpha01

package/lwc.config.json

@@ -4,13 +4,17 @@
         { "npm": "@salesforcedevs/dx-components" }
     ],
     "expose": [
+        "doc/amfReference",
         "doc/breadcrumbs",
+        "doc/content",
         "doc/contentCallout",
+        "doc/contentLayout",
         "doc/contentMedia",
-        "doc/content",
+        "doc/docXmlContent",
         "doc/header",
         "doc/heading",
         "doc/headingAnchor",
-        "doc/phase"
+        "doc/phase",
+        "doc/xmlContent"
     ]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "0.53.6",
+    "version": "0.54.0-alpha01",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -10,5 +10,19 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "a4d2650ea90f41debfeeed590100be7432409a73"
+    "dependencies": {
+        "@api-components/amf-helper-mixin": "^4.5.17",
+        "@lwrjs/types": "^0.6.5",
+        "classnames": "^2.2.6",
+        "kagekiri": "^1.4.1",
+        "lodash.orderby": "^4.6.0",
+        "lodash.uniqby": "^4.7.0",
+        "query-string": "^7.1.1"
+    },
+    "devDependencies": {
+        "@types/classnames": "^2.2.10",
+        "@types/lodash.orderby": "^4.6.7",
+        "@types/lodash.uniqby": "^4.7.7"
+    },
+    "gitHead": "4629fdd9ca18a13480044ad43515b91945d16aad"
 }

package/src/modules/base-elements/lightningElementWithState/lightningElementWithState.ts

@@ -0,0 +1,93 @@
+
+import { LightningElement, track } from "lwc";
+
+/**
+ * This is a helper class for when you want your LWC component to have state
+ * that is automatically tracked _along with_ its previous state, in a React-
+ * like fashion, so that you can compare current state with previous state
+ * after a render (like React's `commponentDidUpdate`). One benefit of doing
+ * things this way is that you can put all of your reactions to state changes
+ * in one place, in `renderedCallback`, rather than having them in various
+ * places throughout the component.
+ *
+ * The API consists in `this.prevState`, `this.state`, and `this.setState`.
+ *
+ * Usage:
+ *
+ * ```
+ * type MyState = {
+ *     isFetchingContent: boolean;
+ * };
+ *
+ * class MyFetchingComponent extends LightningElementWithState<MyState> {
+ *     constructor() {
+ *         // `this.state` can only be initialized once
+ *         this.state = {
+ *             isFetchingContent: false
+ *         };
+ *     }
+ *
+ *     // Queued for execution whenever a `setState` call completes
+ *     renderedCallback() {
+ *         if (this.prevState.isFetchingContent && !this.state.isFetchingContent) {
+ *             // Do something knowing that we just finished fetching.
+ *             notifyFetchSuccessful();
+ *         }
+ *     }
+ *
+ *     fetchSomething() {
+ *         this.setState({
+ *             isFetchingContent: true
+ *         });
+ *
+ *         fetch(whatever).then(() => {
+ *             this.setState({
+ *                 isFetching: false
+ *             }
+ *         });
+ *     }
+ * }
+ * ```
+ */
+export abstract class LightningElementWithState<
+    T extends { [key: string]: unknown }
+> extends LightningElement {
+    private _prevState = {} as T;
+    @track private _state = {} as T;
+
+    private _didInitializeState = false;
+
+    protected get prevState(): T {
+        return Object.freeze({
+            ...this._prevState
+        });
+    }
+
+    protected get state(): T {
+        return Object.freeze({
+            ...this._state
+        });
+    }
+
+    protected set state(initialState: T) {
+        if (!this._didInitializeState) {
+            this._state = {
+                ...initialState
+            };
+            this._didInitializeState = true;
+        } else {
+            throw new Error("To mutate state after initialization, use `this.setState`.");
+        }
+    }
+
+    protected setState = (state: Partial<T>): void => {
+        this._prevState = {
+            ...this._state
+        };
+        this._state = {
+            ...this._state,
+            ...state
+        };
+    };
+}
+

package/src/modules/doc/amfReference/amfReference.css

@@ -0,0 +1,5 @@
+@import "../../helpers/phaseContentLayout/phaseContentLayout.css";
+
+.version-picker {
+    margin-left: auto;
+}

package/src/modules/doc/amfReference/amfReference.html

@@ -0,0 +1,39 @@
+<template>
+    <doc-content-layout
+        use-old-sidebar={useOldSidebar}
+        class="content-type content-type-reference"
+        coveo-organization-id={coveoOrganizationId}
+        coveo-public-access-token={coveoPublicAccessToken}
+        coveo-search-hub={coveoSearchHub}
+        coveo-advanced-query-config={coveoAdvancedQueryConfig}
+        breadcrumbs={breadcrumbs}
+        sidebar-header={sidebarHeader}
+        sidebar-value={selectedSidebarValue}
+        sidebar-content={navigation}
+        onselect={onNavSelect}
+    >
+        <div slot="doc-phase" if:true={docPhaseInfo} class="doc-phase-wrapper">
+            <doc-phase doc-phase-info={docPhaseInfo}></doc-phase>
+        </div>
+        <div slot="sidebar-header" class="version-picker">
+            <template if:true={isVersionEnabled}>
+                <dx-dropdown
+                    suppress-gtm-nav-headings
+                    onchange={handleVersionChange}
+                    data-type="version"
+                    options={versions}
+                    value={selectedVersion.id}
+                    width="290px"
+                >
+                    <dx-button variant="inline">{selectedVersion.id}</dx-button>
+                </dx-dropdown>
+            </template>
+        </div>
+
+        <div class="container">
+            <div class="api-documentation">
+                <doc-amf-topic model={topicModel}></doc-amf-topic>
+            </div>
+        </div>
+    </doc-content-layout>
+</template>