@salesforcedevs/docs-components 0.3.12 → 0.3.14-banner-alpha1

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

@@ -1,367 +0,0 @@
-import { LightningElement, api } from "lwc";
-import {
-    AvailableLanguages,
-    AvailableVersions,
-    ContentLoaded,
-    DocContent,
-    NavigationLoaded,
-    NormalizedToc,
-    PageReference,
-    SelectedVersion,
-    SelectedLanguage,
-    SelectedNavigationItem,
-    DocToc,
-    PdfUrl
-} from "typings/custom";
-
-const DEFAULT_URL = "https://developer.salesforce.com/";
-
-export default class Container extends LightningElement {
-    @api domainApi: string = DEFAULT_URL;
-    // 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: ""
-    };
-
-    showLandingPage: boolean = false;
-
-    apiMainUrl: string = "";
-    apiDetailUrl: string = "";
-
-    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() {
-        const normalizedDomainApi = this.domainApi.endsWith("/")
-            ? this.domainApi
-            : this.domainApi + "/";
-        this.apiMainUrl = `${normalizedDomainApi}docs/get_document/`;
-        this.apiDetailUrl = `${normalizedDomainApi}docs/get_document_content`;
-        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 = "";
-        }
-    }
-
-    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.selectedNavigationItem = 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(() => {
-                this.showLandingPage = true;
-            });
-    }
-
-    // Generate the callout URL for the fetch based on the docType
-    generateCalloutURL(docType: String) {
-        if (docType === "navigation") {
-            return this.apiMainUrl + this.pageReference.docId;
-        } else if (docType === "content") {
-            return `${this.apiDetailUrl}/${this.pageReference.deliverable}/${this.pageReference.contentDocumentId}/${this.selectedLanguage[0].locale}/${this.selectedVersion[0].doc_version}`;
-        }
-        return "";
-    }
-
-    // Render page only with navigation and content are both loaded
-    get loaded() {
-        return this.navigationLoaded && this.contentLoaded;
-    }
-
-    normalizeToc(toc: DocToc) {
-        let normalizedToc = JSON.stringify(toc).replace(/"text"/g, '"label"');
-        normalizedToc = normalizedToc.replace(/"id"/g, '"name"');
-        const jsonToc = JSON.parse(normalizedToc);
-        jsonToc.isExpanded = true;
-        return jsonToc;
-    }
-}

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

@@ -1,99 +0,0 @@
-import { createRenderComponent } from "utils/tests";
-import Content from "../content";
-import * as mockContent from "./mockDocContent";
-import mockPageReference from "./mockPageReference";
-
-const TAG = "doc-content";
-const render = createRenderComponent(TAG, Content);
-
-describe("doc-content", () => {
-    it("renders the content", () => {
-        const component = render({
-            docsData: mockContent.content,
-            pageReference: mockPageReference,
-            _isStorybook: false
-        });
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-        expect(contentEl).not.toBeNull();
-    });
-
-    it("swaps out images", () => {
-        const component = render({
-            docsData: mockContent.withImages,
-            pageReference: mockPageReference,
-            _isStorybook: false
-        });
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-        expect(contentEl).not.toBeNull();
-        const images = component.shadowRoot.querySelectorAll("img");
-        expect(images.length).toEqual(3);
-        const contentMediaEls = component.shadowRoot.querySelectorAll(
-            "doc-content-media"
-        );
-        expect(contentMediaEls.length).toEqual(0);
-    });
-
-    it("swaps out iframes", () => {
-        const component = render({
-            docsData: mockContent.withVideos,
-            pageReference: mockPageReference,
-            _isStorybook: false
-        });
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-        expect(contentEl).not.toBeNull();
-        const images = component.shadowRoot.querySelectorAll("iframe");
-        expect(images.length).toEqual(0);
-        const contentMediaEls = component.shadowRoot.querySelectorAll(
-            "doc-content-media"
-        );
-        expect(contentMediaEls.length).toEqual(2);
-        contentMediaEls.forEach((contentMedia) => {
-            expect(contentMedia.contentType).toEqual("iframe");
-            expect(contentMedia.mediaTitle).not.toBeUndefined();
-            expect(contentMedia.contentSrc).toMatch(
-                "https://play.vidyard.com/"
-            );
-        });
-    });
-
-    it("swaps out notes", () => {
-        const component = render({
-            docsData: mockContent.withNotes,
-            pageReference: mockPageReference,
-            _isStorybook: false
-        });
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-        expect(contentEl).not.toBeNull();
-        const notes = component.shadowRoot.querySelectorAll(".message");
-        expect(notes).toHaveLength(4);
-        notes.forEach((note) => {
-            const noteHeader = note.querySelector("doc-content-callout");
-            expect(noteHeader).not.toBeNull();
-        });
-    });
-
-    it("includes tables, lists, and code blocks in notes", () => {
-        const component = render({
-            docsData: mockContent.withNotes,
-            pageReference: mockPageReference,
-            _isStorybook: false
-        });
-        const contentEl = component.shadowRoot.querySelector(
-            '[data-name="content"]'
-        );
-        expect(contentEl).not.toBeNull();
-        const notes = component.shadowRoot.querySelectorAll(".message");
-        expect(notes[0].querySelector("table")).not.toBeNull();
-        expect(notes[1].querySelector("ul")).not.toBeNull();
-        expect(notes[2].querySelector("ol")).not.toBeNull();
-        expect(notes[3].querySelector("dx-code-block")).not.toBeNull();
-    });
-});