@salesforcedevs/docs-components 0.0.0 → 0.0.1-edit

package/src/modules/doc/editFile/editFile.css

@@ -0,0 +1,514 @@
+/* Host container */
+:host {
+    font-family: "Salesforce Sans", -apple-system, BlinkMacSystemFont,
+        "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",
+        sans-serif;
+}
+
+/* Edit File Trigger Button - positioned in top right corner */
+.edit-file-trigger {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
+    color: white;
+    border: none;
+    border-radius: 12px;
+    padding: 12px 16px;
+    cursor: pointer;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    box-shadow: 0 4px 16px rgb(1 118 211 / 25%), 0 2px 8px rgb(1 118 211 / 15%);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    font-size: 14px;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    backdrop-filter: blur(10px);
+}
+
+.edit-file-trigger:hover:not(:disabled) {
+    background: linear-gradient(135deg, #005fb2 0%, #003e73 100%);
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgb(1 118 211 / 35%), 0 4px 12px rgb(1 118 211 / 25%);
+}
+
+.edit-file-trigger:active:not(:disabled) {
+    transform: translateY(0);
+    box-shadow: 0 2px 8px rgb(1 118 211 / 30%);
+}
+
+.edit-file-trigger:disabled {
+    background: #d8dde6;
+    color: #706e6b;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: 0 1px 3px rgb(0 0 0 / 12%);
+}
+
+.edit-file-icon {
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+}
+
+.edit-file-trigger-text {
+    font-weight: 500;
+    white-space: nowrap;
+}
+
+/* Overlay */
+.edit-file-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgb(0 0 0 / 50%);
+    backdrop-filter: blur(4px);
+    z-index: 10000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.edit-file-overlay_open {
+    opacity: 1;
+    visibility: visible;
+}
+
+/* Popover */
+.edit-file-popover {
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 20px 60px rgb(0 0 0 / 20%), 0 8px 24px rgb(0 0 0 / 15%);
+    width: 100%;
+    max-width: 900px;
+    max-height: 90vh;
+    display: flex;
+    flex-direction: column;
+    transform: scale(0.9) translateY(20px);
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    overflow: hidden;
+}
+
+.edit-file-popover_open {
+    transform: scale(1) translateY(0);
+}
+
+/* Popover Header */
+.edit-file-header {
+    padding: 24px 24px 20px;
+    border-bottom: 1px solid #e5e7ea;
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    background: linear-gradient(180deg, #fafbfc 0%, #f7f9fb 100%);
+    position: relative;
+}
+
+.edit-file-title {
+    margin: 0;
+    font-size: 24px;
+    font-weight: 700;
+    color: #181818;
+    letter-spacing: -0.02em;
+}
+
+.edit-file-filename {
+    margin: 8px 0 0;
+    font-size: 14px;
+    color: #706e6b;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 500;
+}
+
+.edit-file-file-icon {
+    width: 16px;
+    height: 16px;
+    color: #0176d3;
+}
+
+.edit-file-close {
+    width: 40px;
+    height: 40px;
+    border: none;
+    background: transparent;
+    border-radius: 10px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    color: #706e6b;
+    flex-shrink: 0;
+}
+
+.edit-file-close:hover {
+    background: #f3f3f3;
+    color: #181818;
+    transform: scale(1.05);
+}
+
+.edit-file-close-icon {
+    width: 20px;
+    height: 20px;
+}
+
+/* Popover Content */
+.edit-file-content {
+    flex: 1;
+    padding: 24px;
+    overflow-y: auto;
+    min-height: 0;
+}
+
+/* Loading State */
+.edit-file-loading {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 60px 20px;
+    gap: 16px;
+}
+
+.edit-file-spinner {
+    width: 32px;
+    height: 32px;
+    border: 3px solid #e5e7ea;
+    border-top: 3px solid #0176d3;
+    border-radius: 50%;
+    animation: edit-file-spin 1s linear infinite;
+}
+
+.edit-file-loading-text {
+    margin: 0;
+    color: #706e6b;
+    font-size: 16px;
+    font-weight: 500;
+}
+
+/* Error State */
+.edit-file-error {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 20px;
+    background: #fef7f7;
+    border: 1px solid #fecaca;
+    border-radius: 12px;
+    color: #dc2626;
+    margin-bottom: 20px;
+}
+
+.edit-file-error-icon {
+    width: 20px;
+    height: 20px;
+    flex-shrink: 0;
+}
+
+.edit-file-error-text {
+    font-size: 14px;
+    font-weight: 500;
+}
+
+/* Editor */
+.edit-file-editor {
+    width: 100%;
+}
+
+.edit-file-label {
+    display: block;
+    margin-bottom: 8px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #181818;
+}
+
+.edit-file-textarea {
+    width: 100%;
+    min-height: 400px;
+    padding: 16px;
+    border: 2px solid #e5e7ea;
+    border-radius: 12px;
+    font-family: "SF Mono", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
+    font-size: 14px;
+    line-height: 1.5;
+    resize: vertical;
+    outline: none;
+    background: #fafbfc;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    box-sizing: border-box;
+}
+
+.edit-file-textarea:focus {
+    border-color: #0176d3;
+    background: white;
+    box-shadow: 0 0 0 3px rgb(1 118 211 / 10%);
+}
+
+.edit-file-textarea::placeholder {
+    color: #9ca3af;
+}
+
+/* Popover Footer */
+.edit-file-footer {
+    padding: 20px 24px 24px;
+    border-top: 1px solid #e5e7ea;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    background: linear-gradient(180deg, #fafbfc 0%, #f7f9fb 100%);
+}
+
+/* Status Indicators */
+.edit-file-status {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.edit-file-saving {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #0176d3;
+}
+
+.edit-file-mini-spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid #e5e7ea;
+    border-top: 2px solid #0176d3;
+    border-radius: 50%;
+    animation: edit-file-spin 1s linear infinite;
+}
+
+.edit-file-unchanged {
+    color: #706e6b;
+}
+
+.edit-file-modified {
+    color: #059669;
+    position: relative;
+}
+
+.edit-file-modified::before {
+    content: "●";
+    margin-right: 6px;
+    color: #059669;
+}
+
+/* Action Buttons */
+.edit-file-actions {
+    display: flex;
+    gap: 12px;
+}
+
+.edit-file-button {
+    padding: 12px 24px;
+    border-radius: 10px;
+    font-size: 14px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    border: none;
+    white-space: nowrap;
+}
+
+.edit-file-button_secondary {
+    background: #f3f3f3;
+    color: #181818;
+    border: 1px solid #e5e7ea;
+}
+
+.edit-file-button_secondary:hover:not(:disabled) {
+    background: #e5e7ea;
+    transform: translateY(-1px);
+}
+
+.edit-file-button_primary {
+    background: linear-gradient(135deg, #0176d3 0%, #005fb2 100%);
+    color: white;
+}
+
+.edit-file-button_primary:hover:not(:disabled) {
+    background: linear-gradient(135deg, #005fb2 0%, #003e73 100%);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgb(1 118 211 / 25%);
+}
+
+.edit-file-button_disabled {
+    background: #d8dde6 !important;
+    color: #706e6b !important;
+    cursor: not-allowed !important;
+    transform: none !important;
+    box-shadow: none !important;
+}
+
+.edit-file-button:disabled {
+    background: #d8dde6;
+    color: #706e6b;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+}
+
+.edit-file-button-spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid transparent;
+    border-top: 2px solid currentColor;
+    border-radius: 50%;
+    animation: edit-file-spin 1s linear infinite;
+}
+
+/* Animations */
+@keyframes edit-file-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+    .edit-file-trigger {
+        top: 16px;
+        right: 16px;
+        padding: 10px 14px;
+        font-size: 13px;
+    }
+
+    .edit-file-trigger-text {
+        display: none;
+    }
+
+    .edit-file-overlay {
+        padding: 16px;
+    }
+
+    .edit-file-popover {
+        max-width: 100%;
+        max-height: 95vh;
+    }
+
+    .edit-file-header {
+        padding: 20px 20px 16px;
+    }
+
+    .edit-file-title {
+        font-size: 20px;
+    }
+
+    .edit-file-content {
+        padding: 20px;
+    }
+
+    .edit-file-textarea {
+        min-height: 300px;
+        font-size: 13px;
+    }
+
+    .edit-file-footer {
+        padding: 16px 20px 20px;
+        flex-direction: column;
+        align-items: stretch;
+        gap: 12px;
+    }
+
+    .edit-file-actions {
+        width: 100%;
+        justify-content: stretch;
+    }
+
+    .edit-file-button {
+        flex: 1;
+        justify-content: center;
+    }
+}
+
+@media (max-width: 480px) {
+    .edit-file-trigger {
+        top: 12px;
+        right: 12px;
+        padding: 8px 12px;
+    }
+
+    .edit-file-overlay {
+        padding: 12px;
+    }
+
+    .edit-file-header {
+        padding: 16px;
+    }
+
+    .edit-file-title {
+        font-size: 18px;
+    }
+
+    .edit-file-content {
+        padding: 16px;
+    }
+
+    .edit-file-footer {
+        padding: 12px 16px 16px;
+    }
+
+    .edit-file-textarea {
+        min-height: 250px;
+        padding: 12px;
+    }
+}
+
+/* Accessibility improvements */
+@media (prefers-reduced-motion: reduce) {
+    .edit-file-trigger,
+    .edit-file-overlay,
+    .edit-file-popover,
+    .edit-file-close,
+    .edit-file-button,
+    .edit-file-textarea {
+        transition: none;
+    }
+
+    .edit-file-spinner,
+    .edit-file-mini-spinner,
+    .edit-file-button-spinner {
+        animation: none;
+    }
+}
+
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+    .edit-file-trigger {
+        border: 2px solid;
+    }
+
+    .edit-file-popover {
+        border: 2px solid #000;
+    }
+
+    .edit-file-textarea {
+        border: 2px solid #000;
+    }
+
+    .edit-file-button {
+        border: 2px solid;
+    }
+} 

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>