@salesforcedevs/docs-components 1.17.0-hack-alpha3 → 1.17.0-hack-alpha5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.17.0-hack-alpha3",
+    "version": "1.17.0-hack-alpha5",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

package/src/modules/doc/commentPopup/README.md

@@ -0,0 +1,212 @@
+# Comment Popup Component - Local Storage Implementation
+
+This component provides a commenting system that uses browser localStorage for data persistence while the backend API is being developed.
+
+## Features
+
+-   ✅ **Local Storage**: Comments are stored in browser localStorage
+-   ✅ **API-Ready**: Code structure prepared for backend integration
+-   ✅ **Development Tools**: Helper utilities for managing comments
+-   ✅ **Export/Import**: Ability to export comments to JSON files
+-   ✅ **Migration Ready**: Tools to convert data for backend migration
+
+## How It Works
+
+### Storage Structure
+
+Comments are stored in localStorage under the key `dsc_comments` with the following structure:
+
+```json
+{
+    "branch_filepath_headingtitle": [
+        {
+            "email": "user@example.com",
+            "comment_text": "This is a comment",
+            "timestamp": "2024-01-15T10:30:00Z"
+        }
+    ]
+}
+```
+
+### API Payload Format
+
+When posting comments, the component uses this exact format (ready for backend):
+
+```json
+{
+    "branch": "feature/documentation-updates",
+    "file_path": "docs/installation.md",
+    "heading_title": "Installation Guide",
+    "comment": {
+        "comment_text": "This installation guide is very helpful for new users.",
+        "email": "john.doe@example.com",
+        "timestamp": "2024-01-15T10:30:00Z"
+    }
+}
+```
+
+## Development Tools
+
+### Console Commands
+
+When the component is loaded, you can access these functions in the browser console:
+
+```javascript
+// Export all comments to a JSON file
+CommentDevHelper.exportCommentsToFile();
+
+// Clear all comments from localStorage
+CommentDevHelper.clearAllComments();
+
+// Get statistics about stored comments
+CommentDevHelper.getCommentsStats();
+
+// Convert comments to API format (for backend migration)
+CommentDevHelper.convertToApiFormat();
+
+// Add a sample comment for testing
+CommentDevHelper.addSampleComment();
+
+// Show all comments in console
+CommentDevHelper.showAllComments();
+```
+
+### Development UI
+
+In development mode (localhost), a floating UI will appear in the top-right corner with buttons to:
+
+-   Export comments
+-   Clear all comments
+-   View statistics
+-   Show API format
+
+## Migration to Backend
+
+When the backend is ready, follow these steps:
+
+### 1. Export Current Comments
+
+```javascript
+// Export all comments to JSON file
+CommentDevHelper.exportCommentsToFile();
+```
+
+### 2. Convert to API Format
+
+```javascript
+// Get comments in API format
+const apiFormat = CommentDevHelper.convertToApiFormat();
+console.log(apiFormat);
+```
+
+### 3. Uncomment API Code
+
+In `commentPopup.ts`, uncomment the API implementation sections:
+
+```typescript
+// Remove the localStorage implementation and uncomment:
+/*
+const response = await fetch('/post-comment', {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json'
+    },
+    body: JSON.stringify(payload)
+});
+*/
+```
+
+### 4. Update Endpoints
+
+Update the API endpoints in the component:
+
+-   POST: `/post-comment` (for adding comments)
+-   GET: `/api/comments` (for fetching comments)
+
+## File Structure
+
+```
+commentPopup/
+├── commentPopup.ts          # Main component
+├── commentPopup.html        # Template
+├── commentPopup.css         # Styles
+├── commentUtils.ts          # Utility functions
+├── commentDevHelper.ts      # Development tools
+└── README.md               # This file
+```
+
+## Usage
+
+### Basic Usage
+
+```html
+<c-comment-popup
+    heading-title="Installation Guide"
+    file-path="docs/installation.md"
+    current-branch="main"
+>
+</c-comment-popup>
+```
+
+### Required Properties
+
+-   `heading-title`: The title of the section being commented on
+-   `file-path`: The file path where the comment is located
+-   `current-branch`: The current git branch
+
+### Optional Properties
+
+-   `start-line`: Starting line number (for future line-specific comments)
+-   `end-line`: Ending line number (for future line-specific comments)
+-   `open`: Boolean to control popup visibility
+
+## Events
+
+The component dispatches these events:
+
+```javascript
+// When a comment is added
+element.addEventListener("commentadded", (event) => {
+    console.log("New comment:", event.detail);
+});
+```
+
+## Browser Compatibility
+
+-   Modern browsers with localStorage support
+-   IE10+ (with polyfills if needed)
+
+## Storage Limits
+
+-   localStorage typically has a 5-10MB limit
+-   Comments are stored as JSON strings
+-   Monitor storage usage with `CommentDevHelper.getCommentsStats()`
+
+## Troubleshooting
+
+### Comments Not Appearing
+
+1. Check browser console for errors
+2. Verify localStorage is enabled
+3. Check if the comment key matches: `branch_filepath_headingtitle`
+
+### Storage Issues
+
+1. Clear localStorage: `CommentDevHelper.clearAllComments()`
+2. Export existing comments before clearing
+3. Check browser storage limits
+
+### Development UI Not Showing
+
+1. Ensure you're on localhost
+2. Check if the UI was manually closed
+3. Refresh the page to recreate the UI
+
+## Future Enhancements
+
+-   [ ] Line-specific comments
+-   [ ] Comment threading/replies
+-   [ ] Comment moderation
+-   [ ] User authentication integration
+-   [ ] Real-time comment updates
+-   [ ] Comment search and filtering

package/src/modules/doc/commentPopup/commentDevHelper.ts

@@ -0,0 +1,152 @@
+// Development Helper for Comment Management
+// This file provides a simple interface to manage comments during development
+// You can use this in the browser console or create a simple UI for it
+
+import {
+    exportCommentsToFile,
+    importCommentsFromFile,
+    getAllComments,
+    clearAllComments,
+    getCommentsStats,
+    convertToApiFormat,
+    addComment
+} from "./commentUtils";
+
+// Make functions available globally for console access
+if (typeof window !== "undefined") {
+    (window as any).CommentDevHelper = {
+        exportCommentsToFile,
+        importCommentsFromFile,
+        getAllComments,
+        clearAllComments,
+        getCommentsStats,
+        convertToApiFormat,
+        addComment
+    };
+}
+
+/**
+ * Create a simple UI for managing comments during development
+ */
+export function createDevUI(): void {
+    if (typeof document === "undefined") {
+        return;
+    }
+
+    // Check if UI already exists
+    if (document.getElementById("comment-dev-ui")) {
+        return;
+    }
+
+    const ui = document.createElement("div");
+    ui.id = "comment-dev-ui";
+    ui.style.cssText = `
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        width: 300px;
+        background: white;
+        border: 2px solid #007bff;
+        border-radius: 8px;
+        padding: 16px;
+        font-family: Arial, sans-serif;
+        font-size: 14px;
+        z-index: 10000;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+    `;
+
+    const stats = getCommentsStats();
+
+    ui.innerHTML = `
+        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px;">
+            <h3 style="margin: 0; color: #007bff;">Comment Dev Helper</h3>
+            <button onclick="document.getElementById('comment-dev-ui').remove()" style="background: none; border: none; font-size: 18px; cursor: pointer;">×</button>
+        </div>
+        
+        <div style="margin-bottom: 12px;">
+            <strong>Stats:</strong><br>
+            Locations: ${stats.totalLocations}<br>
+            Total Comments: ${stats.totalComments}
+        </div>
+        
+        <div style="display: flex; flex-direction: column; gap: 8px;">
+            <button onclick="CommentDevHelper.exportCommentsToFile()" style="padding: 8px; background: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                Export Comments
+            </button>
+            
+            <button onclick="CommentDevHelper.clearAllComments()" style="padding: 8px; background: #dc3545; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                Clear All Comments
+            </button>
+            
+            <button onclick="CommentDevHelper.getCommentsStats()" style="padding: 8px; background: #17a2b8; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                Show Stats in Console
+            </button>
+            
+            <button onclick="console.log(CommentDevHelper.convertToApiFormat())" style="padding: 8px; background: #6f42c1; color: white; border: none; border-radius: 4px; cursor: pointer;">
+                Show API Format in Console
+            </button>
+        </div>
+        
+        <div style="margin-top: 12px; font-size: 12px; color: #666;">
+            <strong>Console Commands:</strong><br>
+            CommentDevHelper.exportCommentsToFile()<br>
+            CommentDevHelper.clearAllComments()<br>
+            CommentDevHelper.getCommentsStats()<br>
+            CommentDevHelper.convertToApiFormat()
+        </div>
+    `;
+
+    document.body.appendChild(ui);
+}
+
+/**
+ * Remove the development UI
+ */
+export function removeDevUI(): void {
+    const ui = document.getElementById("comment-dev-ui");
+    if (ui) {
+        ui.remove();
+    }
+}
+
+/**
+ * Add a sample comment for testing
+ */
+export function addSampleComment(): void {
+    const samplePayload = {
+        branch: "feature/documentation-updates",
+        file_path: "docs/installation.md",
+        heading_title: "Installation Guide",
+        start_line: "10",
+        end_line: "25",
+        comment: {
+            comment_text: "This is a sample comment for testing purposes.",
+            email: "test@example.com",
+            timestamp: new Date().toISOString()
+        }
+    };
+
+    addComment(samplePayload);
+    console.log("Sample comment added:", samplePayload);
+}
+
+/**
+ * Show all comments in a formatted way in the console
+ */
+export function showAllComments(): void {
+    const allComments = getAllComments();
+    console.log("=== ALL COMMENTS ===");
+    console.table(allComments);
+
+    const stats = getCommentsStats();
+    console.log("=== STATISTICS ===");
+    console.table(stats.locations);
+}
+
+// Auto-create UI when this module is imported (in development)
+if (typeof window !== "undefined" && window.location.hostname === "localhost") {
+    // Only auto-create in development environment
+    setTimeout(() => {
+        createDevUI();
+    }, 1000);
+}

package/src/modules/doc/commentPopup/commentPopup.css

@@ -133,6 +133,72 @@
     padding: 0 24px 24px;
 }
 
+/* Success Message */
+.success-message {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: #e8f5e8;
+    color: #2e7d32;
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    border-left: 4px solid #4caf50;
+    font-size: 14px;
+}
+
+.success-message dx-icon {
+    --sds-c-icon-color-foreground: #4caf50;
+}
+
+/* API Error Message */
+.api-error {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: #ffebee;
+    color: #c62828;
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    border-left: 4px solid #f44336;
+    font-size: 14px;
+}
+
+.api-error dx-icon {
+    --sds-c-icon-color-foreground: #f44336;
+}
+
+/* Loading Message */
+.loading-message {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    background: #e3f2fd;
+    color: #1565c0;
+    padding: 12px 16px;
+    border-radius: 8px;
+    margin-bottom: 16px;
+    border-left: 4px solid #2196f3;
+    font-size: 14px;
+}
+
+.loading-message dx-icon {
+    --sds-c-icon-color-foreground: #2196f3;
+
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
 /* Comment Form */
 .comment-form {
     margin-bottom: 24px;
@@ -277,6 +343,13 @@
         padding: 0 16px 16px;
     }
 
+    .success-message,
+    .api-error,
+    .loading-message {
+        padding: 10px 12px;
+        font-size: 13px;
+    }
+
     .comments-section {
         padding-top: 16px;
     }
@@ -297,6 +370,24 @@
         border-bottom-color: #424242;
     }
 
+    .success-message {
+        background: #1b5e20;
+        color: #a5d6a7;
+        border-left-color: #4caf50;
+    }
+
+    .api-error {
+        background: #b71c1c;
+        color: #ef9a9a;
+        border-left-color: #f44336;
+    }
+
+    .loading-message {
+        background: #0d47a1;
+        color: #90caf9;
+        border-left-color: #2196f3;
+    }
+
     .form-label {
         color: #e0e0e0;
     }

package/src/modules/doc/commentPopup/commentPopup.html

@@ -35,8 +35,27 @@
                 ></dx-button>
             </div>
 
-            <!-- Comment Form -->
+            <!-- Popup Content -->
             <div class="popup-content">
+                <!-- Success Message -->
+                <div if:true={submitSuccess} class="success-message">
+                    <dx-icon icon-symbol="success" icon-size="small"></dx-icon>
+                    <span>Comment posted successfully!</span>
+                </div>
+
+                <!-- API Error Message -->
+                <div if:true={apiError} class="error-message api-error">
+                    <dx-icon icon-symbol="error" icon-size="small"></dx-icon>
+                    <span>{apiError}</span>
+                </div>
+
+                <!-- Loading State -->
+                <div if:true={isLoading} class="loading-message">
+                    <dx-icon icon-symbol="spinner" icon-size="small"></dx-icon>
+                    <span>Loading comments...</span>
+                </div>
+
+                <!-- Comment Form -->
                 <form class="comment-form" onsubmit={handleSubmit}>
                     <div class="form-group">
                         <label for="email-input" class="form-label">