@salesforcedevs/docs-components 0.0.4 → 0.0.5-edit

package/src/modules/doc/container/__mocks__/mockPageReference.js

@@ -1,8 +0,0 @@
-export default {
-    domain: "http://localhost:3000",
-    page: "docs",
-    docId: "atlas.en-us.apexcode.meta",
-    deliverable: "apexcode",
-    contentDocumentId: "apex_dev_guide.htm",
-    hash: ""
-};

package/src/modules/doc/container/__mocks__/mockPdfUrl.js

@@ -1 +0,0 @@
-export default "https://resources.docs.salesforce.com/228/latest/en-us/sfdc/pdf/salesforce_apex_language_reference.pdf";

package/src/modules/doc/container/__mocks__/mockSelectedLanguage.js

@@ -1,8 +0,0 @@
-export default [
-    {
-        label: "ENGLISH",
-        code: "EN",
-        locale: "en-us",
-        url: "atlas.en-us.228.0.apexcode.meta"
-    }
-];

package/src/modules/doc/container/__mocks__/mockSelectedVersion.js

@@ -1,8 +0,0 @@
-export default [
-    {
-        version_text: "Winter '21 (API version 50.0)",
-        release_version: "50.0",
-        doc_version: "228.0",
-        version_url: "atlas.en-us.apexcode.meta"
-    }
-];

package/src/modules/doc/container/__mocks__/mockToc.js

@@ -1,146 +0,0 @@
-export default [
-    {
-        children: [
-            {
-                text: "Overview",
-                a_attr: {
-                    href: "actions_intro_overview.htm"
-                },
-                id: "actions_intro_overview"
-            },
-            {
-                text: "Invoking Actions",
-                a_attr: {
-                    href: "actions_intro_invoking.htm"
-                },
-                id: "actions_intro_invoking"
-            },
-            {
-                text: "Available Actions",
-                a_attr: {
-                    href: "actions_intro_list.htm"
-                },
-                id: "actions_intro_list"
-            }
-        ],
-        text: "Introducing Actions",
-        a_attr: {
-            href: "actions_intro.htm"
-        },
-        id: "actions_intro"
-    },
-    {
-        children: [
-            {
-                text: "Apex Actions",
-                a_attr: {
-                    href: "actions_obj_apex.htm"
-                },
-                id: "actions_obj_apex"
-            },
-            {
-                text: "Create Service Report Actions",
-                a_attr: {
-                    href: "actions_obj_create_service_report.htm"
-                },
-                id: "actions_obj_create_service_report"
-            },
-            {
-                text: "Custom Notification Actions",
-                a_attr: {
-                    href: "actions_obj_custom_notification.htm"
-                },
-                id: "actions_obj_custom_notification"
-            },
-            {
-                text: "Email Alert Actions",
-                a_attr: {
-                    href: "actions_obj_email_alert.htm"
-                },
-                id: "actions_obj_email_alert"
-            },
-            {
-                text: "Flow Actions",
-                a_attr: {
-                    href: "actions_obj_flow.htm"
-                },
-                id: "actions_obj_flow"
-            },
-            {
-                text: "Generate Work Orders Actions",
-                a_attr: {
-                    href: "actions_obj_generate_work_orders.htm"
-                },
-                id: "actions_obj_generate_work_orders"
-            },
-            {
-                text: "Knowledge Actions",
-                a_attr: {
-                    href: "actions_obj_knowledge.htm"
-                },
-                id: "actions_obj_knowledge"
-            },
-            {
-                text: "Omni-Channel Action",
-                a_attr: {
-                    href: "actions_obj_omni_channel.htm"
-                },
-                id: "actions_obj_omni_channel"
-            },
-            {
-                text: "PlatformAction",
-                a_attr: {
-                    href: "sforce_api_objects_platformaction.htm"
-                },
-                id: "sforce_api_objects_platformaction"
-            },
-            {
-                text: "Post to Chatter Actions",
-                a_attr: {
-                    href: "actions_obj_post_to_chatter.htm"
-                },
-                id: "actions_obj_post_to_chatter"
-            },
-            {
-                text: "Quick Actions",
-                a_attr: {
-                    href: "actions_obj_quick_action.htm"
-                },
-                id: "actions_obj_quick_action"
-            },
-            {
-                text: "Refresh Metric Actions",
-                a_attr: {
-                    href: "actions_obj_refresh_metric.htm"
-                },
-                id: "actions_obj_refresh_metric"
-            },
-            {
-                text: "Salesforce Order Management Actions",
-                a_attr: {
-                    href: "actions_obj_order_management.htm"
-                },
-                id: "actions_obj_order_management"
-            },
-            {
-                text: "Simple Email Actions",
-                a_attr: {
-                    href: "actions_obj_email_simple.htm"
-                },
-                id: "actions_obj_email_simple"
-            },
-            {
-                text: "Submit for Approval Actions",
-                a_attr: {
-                    href: "actions_obj_submit_for_approval.htm"
-                },
-                id: "actions_obj_submit_for_approval"
-            }
-        ],
-        text: "Action Objects",
-        a_attr: {
-            href: "actions_obj.htm"
-        },
-        id: "actions_obj"
-    }
-];

package/src/modules/doc/container/__tests__/container.test.ts

@@ -1,82 +0,0 @@
-/* eslint-disable jest/no-mocks-import */
-import { createElement } from "lwc";
-import Container from "../container";
-import mockAvailableLanguages from "../__mocks__/mockAvailableLanguages";
-import mockAvailableVersions from "../__mocks__/mockAvailableVersions";
-import mockSelectedLanguage from "../__mocks__/mockSelectedLanguage";
-import mockSelectedVersion from "../__mocks__/mockSelectedVersion";
-import mockPdfUrl from "../__mocks__/mockPdfUrl";
-import mockToc from "../__mocks__/mockToc";
-import mockDocContent from "../__mocks__/mockDocContent";
-import mockPageReference from "../__mocks__/mockPageReference";
-window.scrollTo = jest.fn();
-
-const mockContentFetchResponse = require("../__mocks__/mockContentFetchResponse.json");
-const mockNavigationFetchResponse = require("../__mocks__/mockNavigationFetchResponse.json");
-
-const create = (props?: object) => {
-    const component = createElement("doc-container", {
-        is: Container
-    });
-
-    Object.assign(component, {
-        selectedLanguage: mockSelectedLanguage,
-        selectedVersion: mockSelectedVersion,
-        availableLanguages: mockAvailableLanguages,
-        availableVersion: mockAvailableVersions,
-        pdfUrl: mockPdfUrl,
-        toc: mockToc,
-        docContent: mockDocContent,
-        pageReference: mockPageReference,
-        storybookDomain: "https://developer.salesforce.com",
-        storybookPage: "docs",
-        storybookDocId: "atlas.en-us.228.0.apexcode.meta",
-        storybookDeliverable: "apexcode",
-        storybookContentDocumentId: "apex_dev_guide.htm",
-        ...(props || {})
-    });
-
-    return component;
-};
-
-function mockFetch() {
-    return jest.fn().mockImplementation((url) => {
-        let data = mockContentFetchResponse;
-        switch (url) {
-            case "https://developer.salesforce.com/docs/get_document/atlas.en-us.228.0.apexcode.meta":
-                data = mockNavigationFetchResponse;
-                break;
-            default:
-                data = mockContentFetchResponse;
-        }
-        return Promise.resolve({
-            ok: true,
-            json: () => data
-        });
-    });
-}
-
-describe("doc-container", () => {
-    it("renders the content", async () => {
-        global.fetch = mockFetch();
-        const component = create();
-        document.body.appendChild(component);
-        return Promise.resolve(() => {
-            const contentEl = component.shadowRoot.querySelector(
-                ".doc-content"
-            );
-            expect(contentEl).not.toBeNull();
-        });
-    });
-
-    it("renders the navigation", async () => {
-        global.fetch = mockFetch();
-        const component = create();
-        document.body.appendChild(component);
-
-        return Promise.resolve(() => {
-            const navEl = component.shadowRoot.querySelector(".doc-nav");
-            expect(navEl).not.toBeNull();
-        });
-    });
-});

package/src/modules/doc/container/container.css

@@ -1,33 +0,0 @@
-div {
-    display: flex;
-}
-
-.doc-nav {
-    margin: 10px;
-    min-width: 20% !important;
-    max-width: 20% !important;
-}
-
-.doc-content {
-    margin: 10px;
-}
-
-doc-nav {
-    min-width: 100% !important;
-    max-width: 100% !important;
-}
-
-doc-content {
-    min-width: 100% !important;
-    max-width: 100% !important;
-}
-
-lwc-doc-nav {
-    min-width: 100% !important;
-    max-width: 100% !important;
-}
-
-lwc-doc-content {
-    min-width: 100% !important;
-    max-width: 100% !important;
-}

package/src/modules/doc/container/container.html

@@ -1,23 +0,0 @@
-<template>
-    <div if:true={loaded}>
-        <div class="doc-nav">
-            <doc-nav
-                toc={toc}
-                available-languages={availableLanguages}
-                selected-language={selectedLanguage}
-                pdf-url={pdfUrl}
-                available-versions={availableVersions}
-                selected-version={selectedVersion}
-                page-reference={pageReference}
-                selected-navigation-item={selectedNavigationItem}
-            ></doc-nav>
-        </div>
-        <div class="doc-content">
-            <doc-content
-                docs-data={docContent}
-                page-reference={pageReference}
-                is-storybook={_isStorybook}
-            ></doc-content>
-        </div>
-    </div>
-</template>

package/src/modules/doc/container/container.stories.ts

@@ -1,18 +0,0 @@
-export default {
-    title: "docs/doc-container",
-    component: "doc-container"
-};
-
-export const Base = (args: any) => {
-    return `
-    <doc-container storybook-domain='${args.domain}' storybook-page='${args.page}' storybook-doc-id='${args.docId}' storybook-deliverable='${args.deliverable}' storybook-content-document-id='${args.contentDocumentId}' ></doc-container>
-`;
-};
-
-Base.args = {
-    domain: "https://developer.salesforce.com",
-    page: "docs",
-    docId: "atlas.en-us.226.0.apexcode.meta",
-    deliverable: "apexcode",
-    contentDocumentId: "apex_dev_guide.htm"
-};

package/src/modules/doc/container/container.ts

@@ -1,360 +0,0 @@
-import { LightningElement, api } from "lwc";
-import {
-    AvailableLanguages,
-    AvailableVersions,
-    ContentLoaded,
-    DocContent,
-    NavigationLoaded,
-    NormalizedToc,
-    PageReference,
-    SelectedVersion,
-    SelectedLanguage,
-    SelectedNavigationItem,
-    DocToc,
-    PdfUrl
-} from "../../../../../../../typings/custom-new";
-
-const API_MAIN_URL = "https://developer.salesforce.com/docs/get_document/";
-const API_DETAIL_URL =
-    "https://developer.salesforce.com/docs/get_document_content";
-
-export default class Container extends LightningElement {
-    // TODO: We have to evaluate if we can find a better way to do component testing in Storybook.
-    @api
-    set storybookDomain(value: string) {
-        this.pageReference.domain = value;
-        this._isStorybook = true;
-    }
-    get storybookDomain() {
-        return this.pageReference.domain;
-    }
-    @api
-    set storybookPage(value: string) {
-        this.pageReference.page = value;
-    }
-    get storybookPage() {
-        return this.pageReference.page;
-    }
-    @api
-    set storybookDocId(value: string) {
-        this.pageReference.docId = value;
-    }
-    get storybookDocId() {
-        return this.pageReference.docId;
-    }
-    @api
-    set storybookDeliverable(value: string) {
-        this.pageReference.deliverable = value;
-    }
-    get storybookDeliverable() {
-        return this.pageReference.deliverable;
-    }
-    @api
-    set storybookContentDocumentId(value: string) {
-        this.pageReference.contentDocumentId = value;
-    }
-    get storybookContentDocumentId() {
-        return this.pageReference.contentDocumentId;
-    }
-
-    // Navigation
-    toc: DocToc = [
-        {
-            children: [],
-            text: "",
-            a_attr: {
-                href: ""
-            },
-            id: ""
-        }
-    ];
-
-    // Toolbar
-    availableLanguages: AvailableLanguages = [
-        {
-            label: "",
-            code: "",
-            locale: "",
-            url: ""
-        }
-    ];
-
-    availableVersions: AvailableVersions = [
-        {
-            version_test: "",
-            release_version: "",
-            doc_version: "",
-            version_url: ""
-        }
-    ];
-
-    pdfUrl: PdfUrl = "";
-
-    selectedLanguage: SelectedLanguage = [
-        {
-            label: "",
-            code: "",
-            locale: "",
-            url: ""
-        }
-    ];
-
-    selectedVersion: SelectedVersion = [
-        {
-            version_test: "",
-            release_version: "",
-            doc_version: "",
-            version_url: ""
-        }
-    ];
-
-    // Content
-    docContent: DocContent = "";
-
-    // TODO: Impliment dx-tree component
-    selectedNavigationItem: SelectedNavigationItem = "";
-
-    normalizedToc: NormalizedToc = [
-        {
-            name: "",
-            label: "",
-            items: []
-        }
-    ];
-
-    // Storybook Properties
-    selectedContentDocumentId: string | undefined;
-    selectedContentId: string | undefined;
-    selectedVersionUrl: string | undefined;
-    _isStorybook = false;
-
-    // State
-    navigationLoaded: NavigationLoaded = false;
-
-    contentLoaded: ContentLoaded = false;
-
-    pageReference: PageReference = {
-        domain: "",
-        page: "",
-        docId: "",
-        deliverable: "",
-        contentDocumentId: "",
-        hash: ""
-    };
-
-    constructor() {
-        super();
-        this.template.addEventListener(
-            "navclick",
-            this.handleNavEvent.bind(this) // eslint-disableline no-use-before-define
-        );
-        this.template.addEventListener(
-            "versionselected",
-            this.handleToolbarEvent.bind(this) // eslint-disable-line no-use-before-define
-        );
-        this.template.addEventListener(
-            "languageselected",
-            this.handleToolbarEvent.bind(this) // eslint-disable-line no-use-before-define
-        );
-    }
-
-    connectedCallback() {
-        if (!this._isStorybook) {
-            this.getPageContext();
-        }
-        this.fetchDocData("navigation");
-        window.onpopstate = () => {
-            this.getPageContext();
-            this.fetchDocData("content");
-        };
-    }
-
-    getPageContext() {
-        [
-            this.pageReference.domain,
-            this.pageReference.page,
-            this.pageReference.docId,
-            this.pageReference.deliverable,
-            this.pageReference.contentDocumentId
-        ] = window.location.pathname.split("/");
-        this.pageReference.hash = window.location.hash;
-        this.pageReference.domain = `${window.location.protocol}//${window.location.host}`;
-        //this.updateSelectedItem();
-    }
-
-    handleNavEvent(event: CustomEvent) {
-        if (event.detail.pageReference) {
-            const newPageReference = event.detail.pageReference;
-            const docIdPartials = window.location.pathname.split("/");
-            if (
-                this.pageReference.contentDocumentId ===
-                    newPageReference.contentDocumentId &&
-                newPageReference.hash
-            ) {
-                this.updatePageReference(newPageReference);
-                this.rewriteUrl(docIdPartials, newPageReference);
-            } else {
-                this.updatePageReference(newPageReference);
-                this.rewriteUrl(docIdPartials, newPageReference);
-                this.fetchDocData("content");
-            }
-            if (newPageReference.hash) {
-                this.navigateToHash(newPageReference.hash);
-            }
-        }
-    }
-
-    navigateToHash(hash: String) {
-        // eslint-disable-next-line no-use-before-define
-        this.template.querySelector("doc-content").navigateToHash(hash);
-    }
-
-    rewriteUrl(docIdPartials: string[], newPageReference: PageReference) {
-        if (!this._isStorybook) {
-            docIdPartials[4] = newPageReference.contentDocumentId;
-            let urlRewrite = docIdPartials.join("/");
-            if (this.pageReference.hash) {
-                urlRewrite = `${urlRewrite}#${newPageReference.hash}`;
-            }
-            window.history.pushState("Docs", "Docs", urlRewrite);
-        }
-    }
-
-    updatePageReference(newPageReference: PageReference) {
-        if (
-            newPageReference.page &&
-            this.pageReference.page !== newPageReference.page
-        ) {
-            this.pageReference.page = newPageReference.page;
-        }
-        if (
-            newPageReference.docId &&
-            this.pageReference.docId !== newPageReference.docId
-        ) {
-            this.pageReference.docId = newPageReference.docId;
-        }
-        if (
-            newPageReference.deliverable &&
-            this.pageReference.deliverable !== newPageReference.deliverable
-        ) {
-            this.pageReference.deliverable = newPageReference.deliverable;
-        }
-        if (
-            newPageReference.contentDocumentId &&
-            this.pageReference.contentDocumentId !==
-                newPageReference.contentDocumentId
-        ) {
-            if (
-                newPageReference.contentDocumentId.endsWith(".htm") ||
-                newPageReference.contentDocumentId.includes("#")
-            ) {
-                this.pageReference.contentDocumentId =
-                    newPageReference.contentDocumentId;
-            } else {
-                this.pageReference.contentDocumentId =
-                    newPageReference.contentDocumentId + ".htm";
-            }
-            //this.updateSelectedItem();
-        }
-        if (
-            newPageReference.hash &&
-            this.pageReference.hash !== newPageReference.hash
-        ) {
-            this.pageReference.hash = newPageReference.hash;
-        } else {
-            this.pageReference.hash = "";
-        }
-    }
-
-    /*
-    TODO: use set selected item for new navigation components
-    updateSelectedItem() {
-        if (this.pageReference.contentDocumentId) {
-            let item = "";
-            if (this.pageReference.contentDocumentId.includes(".htm")) {
-                item = this.pageReference.contentDocumentId.replace(".htm", "");
-            }
-            if (this.pageReference.hash) {
-                item = `${item}-${this.pageReference.hash.replace("#", "")}`;
-            }
-            this.selectedItem = item;
-        }
-    }
-    */
-
-    handleToolbarEvent(event: CustomEvent) {
-        if (event.detail.type === "language") {
-            this.selectedLanguage = this.availableLanguages.filter(
-                (language) => language.locale === event.detail.value
-            );
-        } else if (event.detail.type === "version") {
-            this.selectedVersion = this.availableVersions.filter(
-                (version) => version.doc_version === event.detail.value
-            );
-        }
-        const newPageReference = { ...this.pageReference };
-        newPageReference.docId = `atlas.${this.selectedLanguage[0].locale}.${this.selectedVersion[0].doc_version}.${this.pageReference.deliverable}.meta`;
-        const docIdPartials = window.location.pathname.split("/");
-        this.updatePageReference(newPageReference);
-        docIdPartials[2] = newPageReference.docId;
-        const urlRewrite = docIdPartials.join("/");
-        window.history.pushState("Docs", "Docs", urlRewrite);
-        this.fetchDocData("navigation");
-    }
-
-    fetchDocData(docType: String) {
-        const docRestUrl = this.generateCalloutURL(docType);
-        fetch(docRestUrl)
-            .then((result) => {
-                return result.json();
-            })
-            .then((json) => {
-                const docData = json;
-                if (docType === "navigation") {
-                    this.toc = this.normalizeToc(docData.toc);
-                    this.availableLanguages = docData.available_languages;
-                    this.availableVersions = docData.available_versions;
-                    this.selectedLanguage = [docData.language];
-                    this.selectedVersion = [docData.version];
-                    this.pdfUrl = docData.pdf_url;
-                    this.navigationLoaded = true;
-                    if (this.pageReference.contentDocumentId === undefined) {
-                        this.pageReference.contentDocumentId =
-                            docData.content_document_id + ".htm";
-                    }
-                    this.fetchDocData("content");
-                } else if (docType === "content") {
-                    this.docContent = docData.content;
-                    this.contentLoaded = true;
-                    if (!this.pageReference.hash) {
-                        window.scrollTo({ top: 0, behavior: "smooth" });
-                    }
-                }
-            })
-            .catch((error) => console.log(error));
-    }
-
-    // Generate the callout URL for the fetch based on the docType
-    generateCalloutURL(docType: String) {
-        if (docType === "navigation") {
-            return API_MAIN_URL + this.pageReference.docId;
-        } else if (docType === "content") {
-            return `${API_DETAIL_URL}/${this.pageReference.deliverable}/${this.pageReference.contentDocumentId}/${this.selectedLanguage[0].locale}/${this.selectedVersion[0].doc_version}`;
-        }
-        console.log("Incorrect Doc Type");
-        return "";
-    }
-
-    // Render page only with navigation and content are both loaded
-    get loaded() {
-        return this.navigationLoaded && this.contentLoaded;
-    }
-
-    normalizeToc(toc) {
-        let normalizedToc = JSON.stringify(toc).replace(/"text"/g, '"label"');
-        normalizedToc = normalizedToc.replace(/"id"/g, '"name"');
-        const jsonToc = JSON.parse(normalizedToc)[0];
-        jsonToc.isExpanded = true;
-        return jsonToc;
-    }
-}