@salesforcedevs/docs-components 0.0.4 → 0.0.5-edit

package/src/modules/doc/editFile/editFile.html

@@ -0,0 +1,164 @@
+<template>
+    <!-- Edit File Trigger Button -->
+    <button
+        class="edit-file-trigger"
+        onclick={handleEditClick}
+        disabled={disabled}
+        aria-label="Edit file"
+        title="Edit file"
+    >
+        <svg
+            class="edit-file-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+        >
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+            />
+        </svg>
+        <span class="edit-file-trigger-text">Edit</span>
+    </button>
+
+    <!-- Popover Overlay -->
+    <template lwc:if={isPopoverOpen}>
+        <div
+            class={overlayClass}
+            onclick={handleOverlayClick}
+        >
+            <div class={popoverClass}>
+                <!-- Popover Header -->
+                <div class="edit-file-header">
+                    <h2 class="edit-file-title">{title}</h2>
+                    <template lwc:if={fileName}>
+                        <p class="edit-file-filename">
+                            <svg
+                                class="edit-file-file-icon"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                            >
+                                <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                                />
+                            </svg>
+                            {fileName}
+                        </p>
+                    </template>
+                    <button
+                        class="edit-file-close"
+                        onclick={handleCancel}
+                        aria-label="Close editor"
+                    >
+                        <svg
+                            class="edit-file-close-icon"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                        >
+                            <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M6 18L18 6M6 6l12 12"
+                            />
+                        </svg>
+                    </button>
+                </div>
+
+                <!-- Popover Content -->
+                <div class="edit-file-content">
+                    <!-- Loading State -->
+                    <template lwc:if={isLoading}>
+                        <div class="edit-file-loading">
+                            <div class="edit-file-spinner"></div>
+                            <p class="edit-file-loading-text">Loading file content...</p>
+                        </div>
+                    </template>
+
+                    <!-- Error Message -->
+                    <template lwc:if={errorMessage}>
+                        <div class="edit-file-error">
+                            <svg
+                                class="edit-file-error-icon"
+                                viewBox="0 0 24 24"
+                                fill="none"
+                                stroke="currentColor"
+                            >
+                                <circle cx="12" cy="12" r="10"></circle>
+                                <line x1="15" y1="9" x2="9" y2="15"></line>
+                                <line x1="9" y1="9" x2="15" y2="15"></line>
+                            </svg>
+                            <span class="edit-file-error-text">{errorMessage}</span>
+                        </div>
+                    </template>
+
+                    <!-- Content Editor -->
+                    <template lwc:if={fileContent}>
+                        <div class="edit-file-editor">
+                            <label class="edit-file-label" for="file-content">
+                                File Content
+                            </label>
+                            <textarea
+                                id="file-content"
+                                class="edit-file-textarea"
+                                value={fileContent}
+                                oninput={handleContentChange}
+                                placeholder="Enter file content..."
+                                rows="20"
+                                spellcheck="false"
+                            ></textarea>
+                        </div>
+                    </template>
+                </div>
+
+                <!-- Popover Footer -->
+                <div class="edit-file-footer">
+                    <div class="edit-file-status">
+                        <template lwc:if={isSaving}>
+                            <div class="edit-file-saving">
+                                <div class="edit-file-mini-spinner"></div>
+                                <span>Saving...</span>
+                            </div>
+                        </template>
+                        <template lwc:elseif={isContentUnchanged}>
+                            <span class="edit-file-unchanged">No changes</span>
+                        </template>
+                        <template lwc:else>
+                            <span class="edit-file-modified">Modified</span>
+                        </template>
+                    </div>
+
+                    <div class="edit-file-actions">
+                        <button
+                            class="edit-file-button edit-file-button_secondary"
+                            onclick={handleCancel}
+                            disabled={isSaving}
+                        >
+                            Cancel
+                        </button>
+                        <button
+                            class={saveButtonClass}
+                            onclick={handleSave}
+                            disabled={isSaving}
+                        >
+                            <template lwc:if={isSaving}>
+                                <div class="edit-file-button-spinner"></div>
+                                Saving...
+                            </template>
+                            <template lwc:else>
+                                Save
+                            </template>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </template>
+</template> 

package/src/modules/doc/editFile/editFile.ts

@@ -0,0 +1,213 @@
+import { LightningElement, api, track } from "lwc";
+import cx from "classnames";
+import { normalizeBoolean } from "dxUtils/normalizers";
+
+interface ApiResponse {
+    success: boolean;
+    data?: string;
+    message?: string;
+    error?: string;
+}
+
+export default class EditFile extends LightningElement {
+    @api fileName: string = "";
+    @api apiEndpoint: string = "/api/edit-file";
+    @api title: string = "Edit File";
+
+    @api
+    get disabled() {
+        return this._disabled;
+    }
+
+    set disabled(value) {
+        this._disabled = normalizeBoolean(value);
+    }
+
+    @track isPopoverOpen: boolean = false;
+    @track isLoading: boolean = false;
+    @track isSaving: boolean = false;
+    @track fileContent: string = "";
+    @track originalContent: string = "";
+    @track errorMessage: string = "";
+
+    private _disabled: boolean = false;
+
+    // API Configuration
+    private static readonly FETCH_ENDPOINT = "/api/file/fetch";
+    private static readonly SAVE_ENDPOINT = "/api/file/save";
+
+    get popoverClass() {
+        return cx(
+            "edit-file-popover",
+            this.isPopoverOpen && "edit-file-popover_open"
+        );
+    }
+
+    get overlayClass() {
+        return cx(
+            "edit-file-overlay",
+            this.isPopoverOpen && "edit-file-overlay_open"
+        );
+    }
+
+    get saveButtonClass() {
+        return cx(
+            "edit-file-button",
+            "edit-file-button_primary",
+            (this.isSaving || this.isContentUnchanged) && "edit-file-button_disabled"
+        );
+    }
+
+    get isContentUnchanged() {
+        return this.fileContent === this.originalContent;
+    }
+
+    // Open the edit file popover
+    async handleEditClick() {
+        if (this.disabled) return;
+
+        this.isPopoverOpen = true;
+        this.errorMessage = "";
+        await this.fetchFileContent();
+    }
+
+    // Fetch file content from API
+    private async fetchFileContent() {
+        if (!this.fileName) {
+            this.errorMessage = "No file specified to edit";
+            return;
+        }
+
+        this.isLoading = true;
+
+        try {
+            const response = await fetch(EditFile.FETCH_ENDPOINT, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    fileName: this.fileName,
+                    action: "fetch"
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(`Failed to fetch file: ${response.status}`);
+            }
+
+            const data: ApiResponse = await response.json();
+
+            if (data.success && data.data !== undefined) {
+                this.fileContent = data.data;
+                this.originalContent = data.data;
+                this.errorMessage = "";
+            } else {
+                this.errorMessage = data.error || data.message || "Failed to load file content";
+            }
+        } catch (error) {
+            console.error("Error fetching file content:", error);
+            this.errorMessage = error instanceof Error ? error.message : "Failed to connect to server";
+        } finally {
+            this.isLoading = false;
+        }
+    }
+
+    // Handle content change in textarea
+    handleContentChange(event: Event) {
+        const target = event.target as HTMLTextAreaElement;
+        this.fileContent = target.value;
+    }
+
+    // Handle cancel action
+    handleCancel() {
+        this.isPopoverOpen = false;
+        this.fileContent = "";
+        this.originalContent = "";
+        this.errorMessage = "";
+        this.isLoading = false;
+        this.isSaving = false;
+
+        // Dispatch cancel event
+        this.dispatchEvent(
+            new CustomEvent("editcancel", {
+                detail: { fileName: this.fileName }
+            })
+        );
+    }
+
+    // Handle save action
+    async handleSave() {
+        if (this.isSaving || this.isContentUnchanged || this.disabled) return;
+
+        this.isSaving = true;
+        this.errorMessage = "";
+
+        try {
+            const response = await fetch(EditFile.SAVE_ENDPOINT, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify({
+                    fileName: this.fileName,
+                    content: this.fileContent,
+                    action: "save"
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(`Failed to save file: ${response.status}`);
+            }
+
+            const data: ApiResponse = await response.json();
+
+            if (data.success) {
+                this.originalContent = this.fileContent;
+                this.isPopoverOpen = false;
+                
+                // Dispatch success event
+                this.dispatchEvent(
+                    new CustomEvent("editsuccess", {
+                        detail: { 
+                            fileName: this.fileName,
+                            content: this.fileContent,
+                            message: data.message || "File saved successfully"
+                        }
+                    })
+                );
+            } else {
+                this.errorMessage = data.error || data.message || "Failed to save file";
+            }
+        } catch (error) {
+            console.error("Error saving file:", error);
+            this.errorMessage = error instanceof Error ? error.message : "Failed to connect to server";
+        } finally {
+            this.isSaving = false;
+        }
+    }
+
+    // Handle overlay click to close popover
+    handleOverlayClick(event: Event) {
+        if (event.target === event.currentTarget) {
+            this.handleCancel();
+        }
+    }
+
+    // Handle escape key to close popover
+    handleKeyDown(event: KeyboardEvent) {
+        if (event.key === "Escape" && this.isPopoverOpen) {
+            this.handleCancel();
+        }
+    }
+
+    connectedCallback() {
+        // Add escape key listener
+        document.addEventListener("keydown", this.handleKeyDown.bind(this));
+    }
+
+    disconnectedCallback() {
+        // Remove escape key listener
+        document.removeEventListener("keydown", this.handleKeyDown.bind(this));
+    }
+} 

package/src/modules/doc/header/header.css

@@ -0,0 +1,132 @@
+@import "dxHelpers/commonHeader";
+
+dx-logo {
+    min-width: fit-content;
+}
+
+.dev-center-link {
+    display: inline-block;
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg) 0
+        var(--dx-g-global-header-padding-horizontal);
+    height: var(--dx-g-spacing-xl);
+}
+
+.dev-center-content {
+    display: flex;
+    align-items: center;
+    text-decoration: none;
+    color: inherit;
+    font-weight: var(--dx-g-font-bold);
+}
+
+dx-icon {
+    --dx-c-icon-size: var(--dx-g-icon-size-xs);
+    --dx-c-icon-color: var(--dx-g-blue-vibrant-20);
+}
+
+.dev-center-content > * + * {
+    margin-left: 8px; /* Adjust this value to your desired spacing */
+}
+
+.header_l2 {
+    justify-content: space-between;
+    height: var(--dx-g-doc-header-main-nav-height);
+}
+
+.has-brand .header_l2 {
+    height: var(--dx-g-spacing-3xl);
+}
+
+.nav_menu-button {
+    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-20);
+    --dx-c-button-secondary-color-hover: var(
+        --dx-g-brand-default-button-color-background-inactive
+    );
+}
+
+.has-brand.has-scoped-nav-items {
+    border-bottom: 1px solid var(--dx-g-gray-90);
+    border-top: 1px solid var(--dx-g-gray-90);
+}
+
+.nav_menu-ctas {
+    margin-right: var(--dx-g-spacing-sm);
+}
+
+header:not(.has-brand) > .header_l1 {
+    background: white;
+    border-bottom: 1px solid var(--dx-g-gray-90);
+}
+
+header:not(.has-brand) > .header_l2 {
+    border-bottom: 1px solid var(--dx-g-gray-90);
+    border-top: 1px solid var(--dx-g-gray-90);
+}
+
+.header_l2_group.header_l2_group-right-ctas {
+    align-items: baseline;
+}
+
+.has-brand .header_l2_group-title {
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-xl)
+        calc(var(--dx-g-spacing-smd) - 1px) 0;
+    min-width: 320px;
+}
+
+.no-header-content {
+    border-top: 1px solid var(--dx-g-gray-90);
+}
+
+@media (max-width: 768px) {
+    .header_l2 {
+        padding: 0;
+        flex-wrap: wrap;
+        height: 100%;
+    }
+
+    .has-nav-items .header_l2 {
+        height: initial;
+    }
+
+    .header_l2_group {
+        width: 100%;
+    }
+
+    .header_l2_group-title {
+        margin-right: 0;
+        padding: var(--dx-g-spacing-sm) 0 2px
+            var(--dx-g-global-header-padding-horizontal);
+        min-height: var(--dx-g-doc-header-main-nav-height);
+    }
+
+    .header_l2_group-nav {
+        height: var(--dx-g-spacing-3xl);
+        padding: 0;
+        margin-top: calc(var(--dx-g-spacing-2xs) + 1px);
+    }
+
+    .header_l2_group-nav_overflow {
+        height: var(--dx-g-spacing-3xl);
+        margin-right: var(--dx-g-spacing-sm);
+    }
+
+    .subtitle {
+        font-weight: var(--dx-g-font-demi);
+        letter-spacing: -0.08px;
+    }
+
+    .has-brand .header_l2_group-title {
+        margin-right: 0;
+        padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-2xs)
+            var(--dx-g-global-header-padding-horizontal);
+    }
+
+    .has-scoped-nav-items > .header_l2 {
+        height: unset;
+    }
+
+    header:not(.has-brand) > .header_l2 {
+        padding-bottom: 0;
+        border: 0;
+    }
+}

package/src/modules/doc/header/header.html

@@ -0,0 +1,55 @@
+<template>
+    <template lwc:if={shouldRender}>
+        <dx-brand-theme-provider brand={brand}>
+            <header class={className}>
+                <dx-banner
+                    lwc:if={showBanner}
+                    banner-markup={bannerMarkup}
+                ></dx-banner>
+                <!-- To-Do: Move the devCenter as a new component and use it here, as devCenter is also used in Sidebar now -->
+                <div lwc:if={devCenter} class="dev-center-link">
+                    <a href={devCenter.link} class="dev-center-content">
+                        <dx-icon symbol="back"></dx-icon>
+                        <dx-icon
+                            class="brand-icon"
+                            lwc:if={devCenter.icon}
+                            sprite="salesforcebrand"
+                            symbol={brand}
+                            size="large"
+                        ></dx-icon>
+                        <span class="subtitle dx-text-body-4">
+                            {devCenter.title}
+                        </span>
+                    </a>
+                </div>
+                <div class="header_l2">
+                    <div class="header_l2_group header_l2_group-title">
+                        <a href={headerHref} class="home-link">
+                            <span class="subtitle dx-text-display-7">
+                                {subtitle}
+                            </span>
+                        </a>
+                    </div>
+                    <div
+                        lwc:if={showScopedNavItems}
+                        class="header_l2_group header_l2_group-nav"
+                    >
+                        <div
+                            class="header_l2_group-nav_overflow"
+                            onscroll={onNavScroll}
+                        >
+                            <dx-header-nav
+                                aria-label="Scoped Navigation Bar"
+                                nav-items={scopedNavItems}
+                                pathname={pathname}
+                            ></dx-header-nav>
+                        </div>
+                    </div>
+                </div>
+            </header>
+        </dx-brand-theme-provider>
+    </template>
+    <template lwc:if={shouldHideHeader}>
+        <div class="no-header-content"></div>
+    </template>
+</template>

package/src/modules/doc/header/header.ts

@@ -0,0 +1,120 @@
+import { api } from "lwc";
+import cx from "classnames";
+import type { OptionWithNested, DevCenterConfig } from "typings/custom";
+import { HeaderBase } from "dxBaseElements/headerBase";
+import { toJson, normalizeBoolean } from "dxUtils/normalizers";
+
+const TABLET_MATCH = "980px";
+const MOBILE_MATCH = "768px";
+
+const isStorybook = () => {
+    const { host } = window.location;
+    return (
+        host === "localhost:6006" || /^dsc-comp.*\.herokuapp\.com$/.test(host)
+    );
+};
+
+export default class Header extends HeaderBase {
+    @api langValuePath: string = "id"; // allows to override how language property is interpreted, follows valuePath dropdown api.
+    @api headerHref: string = "/";
+
+    @api
+    get hideDocHeader() {
+        return this._hideDocHeader;
+    }
+
+    set hideDocHeader(value) {
+        this._hideDocHeader = normalizeBoolean(value);
+    }
+
+    @api
+    get scopedNavItems() {
+        return this._scopedNavItems;
+    }
+
+    set scopedNavItems(value) {
+        this._scopedNavItems = toJson(value);
+    }
+
+    @api
+    get devCenter(): DevCenterConfig {
+        return this._devCenter;
+    }
+
+    set devCenter(value) {
+        this._devCenter = toJson(value);
+    }
+
+    private _scopedNavItems!: OptionWithNested[];
+    private tablet = false;
+    private tabletMatchMedia!: MediaQueryList;
+    private shouldRender: boolean = false;
+    private showDocDivider: boolean = false;
+    private _devCenter!: DevCenterConfig;
+    private _hideDocHeader: boolean = false;
+
+    protected mobileBreakpoint(): string {
+        return MOBILE_MATCH;
+    }
+
+    private get showScopedNavItems(): boolean {
+        return (
+            this.scopedNavItems &&
+            this.scopedNavItems.length > 0 &&
+            !this.hideDocHeader
+        );
+    }
+
+    /**
+     * This function returns true if the hideDocHeader is true and the view is not mobile.
+     * Also we need to show the header border in case the doc is hidden or if the brand information doesn't exists.
+     */
+    private get shouldHideHeader(): boolean {
+        return (this.hideDocHeader && !this.mobile) || this.showDocDivider;
+    }
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        this.tabletMatchMedia = window.matchMedia(
+            `(max-width: ${TABLET_MATCH})`
+        );
+        this.onTabletChange(this.tabletMatchMedia);
+        this.tabletMatchMedia.addEventListener("change", this.onTabletChange);
+
+        if (
+            (!this.shouldHideHeader &&
+                window.location.pathname.includes("/docs/") &&
+                window.location.pathname !== "/docs/apis") ||
+            window.location.pathname ===
+                "/tableau/embedding-playground/overview" ||
+            isStorybook()
+        ) {
+            this.shouldRender = true;
+        }
+
+        if (this.shouldRender && window.location.pathname.includes("/docs/")) {
+            if (!this.brand && !this.mobile) {
+                this.shouldRender = false;
+                this.showDocDivider = true;
+            }
+        }
+    }
+
+    disconnectedCallback(): void {
+        super.disconnectedCallback();
+        this.tabletMatchMedia.removeEventListener(
+            "change",
+            this.onTabletChange
+        );
+    }
+
+    private onTabletChange = (e: MediaQueryListEvent | MediaQueryList) =>
+        (this.tablet = e.matches);
+
+    protected additionalClasses(): string {
+        return cx(
+            this.brand && "has-brand",
+            this.showScopedNavItems && "has-scoped-nav-items"
+        );
+    }
+}