@salesforcedevs/docs-components 0.0.10-edit → 0.0.11-chat

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

@@ -1,162 +0,0 @@
-<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">{project}</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"
-                                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

@@ -1,254 +0,0 @@
-import { LightningElement, api, track } from "lwc";
-import cx from "classnames";
-import { normalizeBoolean } from "dxUtils/normalizers";
-
-interface ApiResponse {
-    success: boolean;
-    data?: {
-        content: string;
-    };
-    message?: string;
-    error?: string;
-}
-
-export default class EditFile extends LightningElement {
-    @api fileName: string = "";
-    @api repoName: string = "";
-    @api source: string = "";
-    @api apiEndpoint: string = "/api/edit-file";
-    @api project: 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 =
-        "https://1208ddd77328.ngrok-free.app/api/file-retrieval/retrieve";
-    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({
-                    source: this.source,
-                    href: this.fileName
-                })
-            });
-
-            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.content;
-                this.originalContent = data.data.content;
-                this.errorMessage = "";
-
-                // Set textarea value directly using ref
-                this.updateTextareaValue();
-            } 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();
-        }
-    }
-
-    // Update textarea value using ref
-    private updateTextareaValue() {
-        // Use setTimeout to ensure DOM is updated
-        setTimeout(() => {
-            const textarea = this.template.querySelector(
-                "#file-content"
-            ) as HTMLTextAreaElement;
-            if (textarea && this.fileContent !== undefined) {
-                textarea.value = this.fileContent;
-            }
-        }, 0);
-    }
-
-    connectedCallback() {
-        // Add escape key listener
-        document.addEventListener("keydown", this.handleKeyDown.bind(this));
-    }
-
-    renderedCallback() {
-        // Ensure textarea value is set correctly when component renders
-        if (this.isPopoverOpen && this.fileContent && !this.isLoading) {
-            this.updateTextareaValue();
-        }
-    }
-
-    disconnectedCallback() {
-        // Remove escape key listener
-        document.removeEventListener("keydown", this.handleKeyDown.bind(this));
-    }
-}