@salesforcedevs/docs-components 0.17.0 → 0.17.12-search-alpha

package/src/modules/doc/amfReference/constants.ts

@@ -0,0 +1,76 @@
+const NAVIGATION_ITEMS = [
+    {
+        label: "Summary",
+        name: "summary",
+        childrenPropertyName: undefined,
+        type: "summary"
+    },
+    {
+        label: "Endpoints",
+        name: "endpoints",
+        childrenPropertyName: "endpoints",
+        type: "endpoint"
+    },
+    {
+        label: "Documentation",
+        name: "documentation",
+        childrenPropertyName: "docs",
+        type: "documentation"
+    },
+    {
+        label: "Types",
+        name: "types",
+        childrenPropertyName: "types",
+        type: "type"
+    },
+    {
+        label: "Security",
+        name: "security",
+        childrenPropertyName: "security",
+        type: "security"
+    }
+];
+
+const URL_CONFIG = {
+    summary: {
+        urlIdentifer: "label"
+    },
+    endpoint: {
+        urlIdentifer: "path"
+    },
+    method: {
+        urlIdentifer: "label"
+    },
+    documentation: {
+        urlIdentifer: "label"
+    },
+    type: {
+        urlIdentifer: "label",
+        prefix: "type:"
+    },
+    security: {
+        urlIdentifer: "label",
+        prefix: "security:"
+    }
+};
+
+export const REFERENCE_TYPES = {
+    markdown: "markdown",
+    raml: "rest-raml",
+    oa2: "rest-oa2",
+    oa3: "rest-oa3"
+};
+
+const oldReferenceIdNewReferenceIdMap: Record<string, string> = {
+    "commerce-api-assignments": "assignments",
+    "commerce-api-campaigns": "campaigns",
+    "commerce-api-catalogs": "catalogs",
+    "cdn-zones": "cdn-api-process-apis",
+    "inventory-impex": "impex",
+    "inventory-reservations": "inventory-reservation-service",
+    "shopper-login-and-api-access-service": "shopper-login",
+    "shopper-login-and-api-access-service-admin": "slas-admin",
+    "einstein-recommendations": "einstein-api-quick-start-guide"
+};
+
+export { NAVIGATION_ITEMS, URL_CONFIG, oldReferenceIdNewReferenceIdMap };

package/src/modules/doc/amfReference/types.ts

@@ -0,0 +1,125 @@
+import { Json, DocPhaseInfo } from "typings/custom";
+
+export interface AmfTopicType {
+    referenceId: string;
+    parentReferencePath: string;
+    amfId: string;
+    elementId: string;
+    type: string;
+}
+
+export interface AmfMetadataTopic extends AmfTopicType {
+    meta: string;
+    identifier: string;
+    navTitle?: string;
+}
+
+export interface AmfMetaTopicType extends AmfTopicType {
+    meta: string;
+}
+
+export interface NavItem {
+    name: string;
+    label: string;
+    children?: ({
+        id: string;
+        label?: string;
+        method: string;
+        domId: string;
+    } & {
+        name: string;
+        label: string;
+    })[];
+    isExpanded?: boolean;
+}
+
+export type AmfModel = Json;
+
+export interface AmfParser {
+    parse(): void;
+    parsedModel: any;
+}
+
+export interface AmfModelRecord {
+    model: AmfModel;
+    parser: AmfParser;
+    parsedModel: Json;
+}
+
+export type ReferenceType = "markdown" | "rest-raml" | "rest-oa2" | "rest-oa3";
+
+/**
+ * Represents parsed topic for the sidebar.
+ */
+export interface ParsedMarkdownTopic {
+    label: string;
+    name: string;
+    children: ParsedMarkdownTopic[];
+    link?: {
+        href: string;
+        target?: string;
+    };
+    isExpanded?: boolean;
+}
+
+export interface AmfConfig {
+    id: string;
+    version?: string;
+    docPhase?: DocPhaseInfo;
+    title: string;
+    href: string;
+    referenceType: ReferenceType;
+
+    // determines if a reference config is the current active and selected one.
+    isSelected: boolean;
+
+    // required for spec based references
+    amf?: string;
+
+    // required for markdown based references
+    topic?: ParsedMarkdownTopic;
+}
+
+export interface ParsedTopicModel {
+    id: string;
+    label: string;
+    domId: string;
+    indent?: number;
+    methods?: {
+        id: string;
+        label?: string;
+        method: string;
+        domId: string;
+    }[];
+}
+export interface TopicModel {
+    id: string;
+    type: string;
+    amf: string;
+    parser: AmfParser;
+}
+
+export interface ReferenceVersion {
+    id: string;
+    label: string;
+    deprecated?: boolean;
+    selected?: boolean;
+    link: {
+        href: string;
+    };
+}
+
+export interface ReferenceSetConfig {
+    refId?: string;
+    versionToRefMap?: Map<string, Array<AmfConfig>>;
+    refList: Array<AmfConfig>;
+    versions: Array<ReferenceVersion>;
+}
+
+export interface RouteMeta {
+    meta: string;
+    referenceId: string;
+    topicId: string;
+    //type is only for spec based references
+    type?: string;
+}

package/src/modules/doc/amfTopic/amfTopic.css

@@ -0,0 +1,21 @@
+@import "docHelpers/amfStyle";
+
+:host {
+    --reference-container-margin-top: var(--dx-g-spacing-sm);
+    --api-documentation-margin-top: var(--dx-g-spacing-3xl);
+}
+
+/**
+ * 1. We need to scroll to top from the tablet size as side nav bar and content in side by side from tablet size
+ * 2. Consider global nav height, doc header height and content margins to scroll to the right position
+ */
+
+@media screen and (min-width: 769px) {
+    .topic-container {
+        scroll-margin-top: calc(
+            var(--dx-g-global-header-height) + var(--dx-g-doc-header-height) +
+                var(--reference-container-margin-top) +
+                var(--api-documentation-margin-top)
+        );
+    }
+}

package/src/modules/doc/amfTopic/amfTopic.html

@@ -0,0 +1,3 @@
+<template>
+    <div class="topic-container" lwc:dom="manual"></div>
+</template>

package/src/modules/doc/amfTopic/amfTopic.ts

@@ -0,0 +1,111 @@
+import { LightningElement, api } from "lwc";
+import {
+    createDocumentationElement,
+    createEndpointElement,
+    createMethodElement,
+    createSecurityElement,
+    createSummaryElement,
+    createTypeElement
+} from "./utils";
+import type { TopicModel } from "./types";
+import { Json } from "typings/custom";
+
+const TABLE_SIZE_MATCH = "769px";
+
+export default class AmfTopic extends LightningElement {
+    private _model: TopicModel | undefined;
+    private amf: Json;
+    private type: string | undefined;
+
+    @api
+    get model(): TopicModel | undefined {
+        return this._model;
+    }
+
+    set model(value: TopicModel) {
+        if (
+            !this.amf ||
+            (value && this._model && value.amf !== this._model?.amf)
+        ) {
+            try {
+                this.amf = value && JSON.parse(value.amf);
+            } catch (error) {
+                console.error(`Error parsing amf model: ${error}`);
+            }
+        }
+        if (
+            !this.type ||
+            (value && this._model && value.type !== this._model?.type)
+        ) {
+            this.type = value && value.type;
+        }
+
+        this._model = value;
+        if (this._model) {
+            this.update();
+        }
+        // else { Remove child? No model, seems like no component should be shown. }
+    }
+
+    update(): void {
+        if (!this.model) {
+            throw new Error("Amf TopicModel undefined when trying to update");
+        }
+
+        const container = this.template.querySelector(".topic-container")!;
+        const { id } = this.model;
+        const type = this.type;
+        const amf = this.amf;
+        const { parser } = this.model;
+        let element;
+
+        if (type === "summary") {
+            element = createSummaryElement(amf);
+        } else if (type === "endpoint") {
+            const endpointModel = parser.computeEndpointApiModel(amf, id);
+            element = createEndpointElement(amf, endpointModel, id);
+        } else if (type === "method") {
+            const endpointMethodModel = parser.computeEndpointApiMethodModel(
+                amf,
+                id
+            );
+            const methodModel = parser.computeMethodApiModel(amf, id);
+            element = createMethodElement(
+                amf,
+                endpointMethodModel,
+                methodModel
+            );
+        } else if (type === "security") {
+            const securityModel = parser.computeSecurityApiModel(amf, id);
+            element = createSecurityElement(amf, securityModel);
+        } else if (type === "type") {
+            const mediaTypes = parser.computeApiMediaTypes(amf);
+            const typeModel = parser.computeTypeApiModel(amf, id);
+            element = createTypeElement(amf, typeModel, mediaTypes);
+        } else if (type === "documentation") {
+            const docsModel = parser.computeDocsApiModel(amf, id);
+            element = createDocumentationElement(amf, docsModel);
+        }
+
+        if (container?.firstChild) {
+            container.firstChild.remove();
+        }
+        container?.appendChild(element as Node);
+
+        const isTabletOrDesktop = window.matchMedia(
+            `(min-width: ${TABLE_SIZE_MATCH})`
+        ).matches;
+
+        if (isTabletOrDesktop) {
+            window.scrollTo(0, 0);
+        }
+    }
+
+    renderedCallback(): void {
+        try {
+            this.update();
+        } catch (error) {
+            console.error(error);
+        }
+    }
+}

package/src/modules/doc/amfTopic/types.ts

@@ -0,0 +1,56 @@
+import { Json } from "typings/custom";
+import { AmfModelParser } from "doc/amfModelParser";
+import {
+    DomainElement,
+    EndPoint,
+    Operation,
+    Shape
+} from "@api-components/amf-helper-mixin";
+
+export type ApiSummaryElement = HTMLElement & {
+    amf: Json;
+    hideToc: boolean;
+    titleLevel: string;
+};
+
+export type ApiEndpointElement = HTMLElement & {
+    amf: Json;
+    inlineMethods: boolean;
+    noNavigation: boolean;
+    selected: string;
+    endpoint: EndPoint;
+    noTryIt: boolean;
+};
+
+export type ApiMethodElement = HTMLElement & {
+    amf: Json;
+    noNavigation: boolean;
+    endpoint: EndPoint | undefined;
+    method: Operation | undefined;
+    noTryIt: boolean;
+};
+
+export type ApiSecurityElement = HTMLElement & {
+    amf: Json;
+    security: DomainElement | undefined;
+};
+
+export type ApiTypeElement = HTMLElement & {
+    amf: Json;
+    type?: Shape;
+    mediaTypes: Json;
+};
+
+export type ApiDocElement = HTMLElement & {
+    amf: Json;
+    shape: DomainElement | undefined;
+};
+
+export type AmfModel = Json;
+
+export interface TopicModel {
+    id: string;
+    type: string;
+    amf: string;
+    parser: AmfModelParser;
+}

package/src/modules/doc/amfTopic/utils.ts

@@ -0,0 +1,136 @@
+import {
+    DomainElement,
+    EndPoint,
+    Operation,
+    Shape
+} from "@api-components/amf-helper-mixin";
+import type {
+    ApiDocElement,
+    ApiEndpointElement,
+    ApiMethodElement,
+    ApiSecurityElement,
+    ApiSummaryElement,
+    ApiTypeElement
+} from "./types";
+import { Json } from "typings/custom";
+
+export function createSummaryElement(amf: Json): HTMLElement {
+    const summaryElement: ApiSummaryElement = document.createElement(
+        "api-summary"
+    ) as ApiSummaryElement;
+    summaryElement.amf = amf;
+    summaryElement.hideToc = true;
+    summaryElement.titleLevel = "1";
+    summaryElement.setAttribute(
+        "exportparts",
+        [
+            "api-title",
+            "api-title-label",
+            "api-version",
+            "marked-description",
+            "info-section",
+            "info-inline-desc",
+            "license-section",
+            "separator",
+            "toc"
+        ].join(",")
+    );
+    return summaryElement;
+}
+
+/**
+ * Creates a `api-endpoint-documentation` web element from web API and current selection.
+ */
+export function createEndpointElement(
+    amf: Json,
+    endpointModel: EndPoint,
+    selected: string
+): HTMLElement {
+    const el: ApiEndpointElement = document.createElement(
+        "api-endpoint-documentation"
+    ) as ApiEndpointElement;
+    el.amf = amf;
+    el.inlineMethods = false;
+    el.noNavigation = true;
+    el.selected = selected;
+    el.endpoint = endpointModel;
+    el.noTryIt = true;
+    return el;
+}
+
+/**
+ * Creates a `api-method-documentation` web element from web API and current selection.
+ */
+export function createMethodElement(
+    amf: Json,
+    endpointMethodModel: EndPoint | undefined,
+    methodModel: Operation | undefined
+): HTMLElement {
+    const el: ApiMethodElement = document.createElement(
+        "api-method-documentation"
+    ) as ApiMethodElement;
+    el.amf = amf;
+    el.noNavigation = true;
+    el.endpoint = endpointMethodModel;
+    el.method = methodModel;
+    el.noTryIt = true;
+    el.setAttribute("renderSecurity", "");
+    el.setAttribute("renderCodeSnippets", "");
+    return el;
+}
+
+/**
+ * Creates a documentation element for Security AMF type
+ *
+ */
+export function createSecurityElement(
+    amf: Json,
+    securityModel: DomainElement | undefined
+): HTMLElement {
+    const el: ApiSecurityElement = document.createElement(
+        "api-security-documentation"
+    ) as ApiSecurityElement;
+    el.setAttribute("exportparts", ["security-title"].join(","));
+    el.amf = amf;
+    el.security = securityModel;
+    return el;
+}
+
+/**
+ * Creates a documentation element for Type AMF type
+ *
+ * @param {string} amfId Reference ID as passed in from amfConfig
+ * @param {string} selected Currently selected `@id`.
+ */
+export function createTypeElement(
+    amf: Json,
+    typeModel: Shape | undefined,
+    mediaTypes: Json
+): HTMLElement {
+    const el: ApiTypeElement = document.createElement(
+        "api-type-documentation"
+    ) as ApiTypeElement;
+    el.setAttribute("exportparts", ["type-title"].join(","));
+    el.amf = amf;
+    el.type = typeModel;
+    el.mediaTypes = mediaTypes;
+    return el;
+}
+
+/**
+ * Creates a documentation element for Docs AMF type
+ *
+ * @param {string} amfId Reference ID as passed in from amfConfig
+ * @param {string} selected Currently selected `@id`.
+ */
+export function createDocumentationElement(
+    amf: Json,
+    docsModel: DomainElement | undefined
+): HTMLElement {
+    const el: ApiDocElement = document.createElement(
+        "api-documentation-document"
+    ) as ApiDocElement;
+    el.amf = amf;
+    el.shape = docsModel;
+    return el;
+}

package/src/modules/doc/breadcrumbItem/breadcrumbItem.css

@@ -0,0 +1,51 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: fit-content;
+}
+
+:host(.breadcrumb_long) {
+    /* ensure 30 character min-width */
+    min-width: 200px;
+}
+
+:host(.breadcrumb_back-arrow) {
+    gap: var(--dx-g-spacing-sm);
+    padding: var(--dx-g-spacing-sm);
+}
+
+:host(.breadcrumb_back-arrow:hover) {
+    background-color: var(--dx-g-cloud-blue-vibrant-90);
+    border-radius: var(--dx-g-spacing-xs);
+}
+
+:host(.breadcrumb_back-arrow) :is(a, dx-icon) {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+a {
+    font-weight: var(--dx-g-font-bold);
+    text-decoration: none;
+    transition: var(--dx-g-transition-hue-1x);
+}
+
+a,
+span {
+    color: var(
+        --dx-c-breadcrumbs-breadcrumb-color,
+        var(--dx-g-blue-vibrant-20)
+    );
+    font-family: var(--dx-g-font-sans);
+    font-size: var(--dx-g-text-sm);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+a:hover {
+    color: var(--dx-g-blue-vibrant-40);
+}

package/src/modules/doc/breadcrumbItem/breadcrumbItem.html

@@ -0,0 +1,5 @@
+<template>
+    <dx-icon if:true={isBackArrowVariant} symbol="back"></dx-icon>
+    <a if:true={href} href={href} onclick={onLinkClick}>{label}</a>
+    <span if:false={href}>{label}</span>
+</template>

package/src/modules/doc/breadcrumbItem/breadcrumbItem.ts

@@ -0,0 +1,71 @@
+import { track } from "dxUtils/analytics";
+import { LightningElement, api } from "lwc";
+import { BreadcrumbItemVariant } from "typings/custom";
+
+const BREADCRUMB_LONG = "breadcrumb_long";
+const BREADCRUMB_BACK_ARROW = "breadcrumb_back-arrow";
+
+const LONG_LABEL_NUMBER = 30;
+export default class BreadcrumbItem extends LightningElement {
+    @api href?: string;
+    @api level?: string;
+    @api breadcrumbLabels?: string;
+
+    @api
+    get label() {
+        return this._label;
+    }
+
+    set label(value) {
+        this._label = value;
+        this.calculateClass();
+    }
+
+    @api
+    get variant() {
+        return this._variant;
+    }
+
+    set variant(value) {
+        this._variant = value;
+        this.calculateClass();
+    }
+
+    _label: string = "";
+    _variant: BreadcrumbItemVariant = "default";
+
+    private calculateClass(): void {
+        this.classList.remove(BREADCRUMB_LONG, BREADCRUMB_BACK_ARROW);
+
+        if (this.label?.length >= LONG_LABEL_NUMBER) {
+            this.classList.add(BREADCRUMB_LONG);
+        }
+
+        if (this._variant === "back-arrow") {
+            this.classList.add(BREADCRUMB_BACK_ARROW);
+        }
+    }
+
+    private get isBackArrowVariant(): boolean {
+        return this._variant === "back-arrow";
+    }
+
+    private onLinkClick(event: Event): void {
+        track(event.target!, "custEv_breadcrumbClick", {
+            click_text: this.label,
+            click_url: `${window.location.origin}${this.href}`,
+            element_type: "link",
+            nav_type: "breadcrumb",
+            nav_level: this.level ? this.level + 1 : 1,
+            nav_item: this.breadcrumbLabels
+        });
+
+        track(event.target!, "custEv_linkClick", {
+            click_text: this.label,
+            click_url: `${window.location.origin}${this.href}`,
+            element_title: this.label,
+            element_type: "link",
+            content_category: "cta"
+        });
+    }
+}

package/src/modules/doc/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,27 @@
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+
+:host {
+    --dx-c-breadcrumbs-title-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-breadcrumbs-breadcrumb-color: var(--dx-g-blue-vibrant-20);
+
+    font-family: var(--dx-g-font-sans);
+}
+
+nav {
+    display: flex;
+    align-items: center;
+    position: relative;
+    gap: var(--dx-g-spacing-sm);
+}
+
+.breadcrumb-item_slash {
+    min-width: fit-content;
+}
+
+dx-dropdown {
+    --dx-c-dropdown-option-font-size: var(--dx-g-text-sm);
+    --dx-c-dropdown-option-label-color: var(
+        --dx-c-breadcrumbs-breadcrumb-color
+    );
+}