hale-commenting-system 2.2.0 → 2.2.2

package/dist/components/CommentPanel.js

@@ -1,334 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CommentPanel = void 0;
-const React = __importStar(require("react"));
-const react_router_dom_1 = require("react-router-dom");
-const react_core_1 = require("@patternfly/react-core");
-const react_icons_1 = require("@patternfly/react-icons");
-const CommentContext_1 = require("../contexts/CommentContext");
-const DetailsTab_1 = require("./DetailsTab");
-const JiraTab_1 = require("./JiraTab");
-const FloatingWidget_1 = require("./FloatingWidget");
-const version_1 = require("../utils/version");
-const CommentPanel = ({ children }) => {
-    const { getThreadsForRoute, selectedThreadId, setSelectedThreadId, drawerPinnedOpen, setDrawerPinnedOpen, floatingWidgetMode, setFloatingWidgetMode, addReply, updateComment, deleteComment, closeThread, reopenThread, removePin, retrySync, } = (0, CommentContext_1.useComments)();
-    const location = (0, react_router_dom_1.useLocation)();
-    const detectedVersion = (0, version_1.getVersionFromPathOrQuery)(location.pathname, location.search);
-    const [newCommentText, setNewCommentText] = React.useState('');
-    const [replyingToCommentId, setReplyingToCommentId] = React.useState(null);
-    const [replyTextByCommentId, setReplyTextByCommentId] = React.useState({});
-    const [editingCommentId, setEditingCommentId] = React.useState(null);
-    const [editText, setEditText] = React.useState('');
-    const drawerRef = React.useRef(null);
-    const [activeTabKey, setActiveTabKey] = React.useState('comments');
-    const currentThreads = getThreadsForRoute(location.pathname, detectedVersion);
-    const selectedThread = currentThreads.find((t) => t.id === selectedThreadId);
-    const isExpanded = !!selectedThreadId || drawerPinnedOpen || floatingWidgetMode;
-    const onExpand = () => {
-        drawerRef.current && drawerRef.current.focus();
-    };
-    React.useEffect(() => {
-        if (selectedThreadId) {
-            setActiveTabKey('comments');
-        }
-    }, [selectedThreadId]);
-    React.useEffect(() => {
-        if (drawerPinnedOpen && !selectedThreadId) {
-            setActiveTabKey('details');
-        }
-    }, [drawerPinnedOpen, selectedThreadId]);
-    const handleAddComment = () => {
-        if (newCommentText.trim() && selectedThread) {
-            addReply(selectedThread.id, newCommentText.trim());
-            setNewCommentText('');
-        }
-    };
-    const handleStartReply = (commentId) => {
-        setReplyingToCommentId(commentId);
-        setReplyTextByCommentId((prev) => ({ ...prev, [commentId]: prev[commentId] ?? '' }));
-    };
-    const handleCancelReply = () => {
-        setReplyingToCommentId(null);
-    };
-    const handleSubmitReply = (parentCommentId) => {
-        if (!selectedThread)
-            return;
-        const text = (replyTextByCommentId[parentCommentId] || '').trim();
-        if (!text)
-            return;
-        addReply(selectedThread.id, text, parentCommentId);
-        setReplyTextByCommentId((prev) => ({ ...prev, [parentCommentId]: '' }));
-        setReplyingToCommentId(null);
-    };
-    const handleStartEdit = (commentId, currentText) => {
-        setEditingCommentId(commentId);
-        setEditText(currentText);
-    };
-    const handleSaveEdit = (commentId) => {
-        if (editText.trim() && selectedThread) {
-            updateComment(selectedThread.id, commentId, editText.trim());
-            setEditingCommentId(null);
-            setEditText('');
-        }
-    };
-    const handleCancelEdit = () => {
-        setEditingCommentId(null);
-        setEditText('');
-    };
-    const handleDeleteComment = (commentId) => {
-        if (selectedThread) {
-            deleteComment(selectedThread.id, commentId);
-        }
-    };
-    const handleCloseThread = () => {
-        if (selectedThread) {
-            closeThread(selectedThread.id);
-        }
-    };
-    const handleReopenThread = () => {
-        if (selectedThread) {
-            reopenThread(selectedThread.id);
-        }
-    };
-    const handleRemovePin = () => {
-        if (!selectedThread)
-            return;
-        removePin(selectedThread.id);
-    };
-    const handleClose = () => {
-        setSelectedThreadId(null);
-        if (floatingWidgetMode) {
-            setFloatingWidgetMode(false);
-        }
-        else {
-            setDrawerPinnedOpen(false);
-        }
-        setEditingCommentId(null);
-        setEditText('');
-        setNewCommentText('');
-        setReplyingToCommentId(null);
-        setReplyTextByCommentId({});
-    };
-    const formatCommentDate = (isoDate) => {
-        const date = new Date(isoDate);
-        return date.toLocaleString(undefined, {
-            month: 'short',
-            day: 'numeric',
-            hour: '2-digit',
-            minute: '2-digit',
-        });
-    };
-    const stripMarkersForDisplay = (text) => {
-        return text
-            .replace(/<!--\s*hale-reply-to:\d+\s*-->\s*\n?/g, '')
-            .replace(/<!--\s*hale-reply-to-local\s*-->\s*\n?/g, '')
-            .trimEnd();
-    };
-    const deriveStatus = () => {
-        if (!selectedThread)
-            return 'local';
-        if (selectedThread.syncStatus === 'error')
-            return 'error';
-        // If we have an issue and any comment hasn't synced yet, treat as pending.
-        if (selectedThread.issueNumber && selectedThread.comments.some((c) => !c.githubCommentId))
-            return 'pending';
-        if (selectedThread.issueNumber)
-            return 'synced';
-        return selectedThread.syncStatus || 'local';
-    };
-    const renderSyncLabel = (status) => {
-        switch (status) {
-            case 'synced':
-                return (React.createElement(react_core_1.Label, { color: "green", icon: React.createElement(react_icons_1.GithubIcon, null) }, "Synced"));
-            case 'local':
-                return React.createElement(react_core_1.Label, { color: "grey" }, "Local");
-            case 'pending':
-                return React.createElement(react_core_1.Label, { color: "blue" }, "Pending\u2026");
-            case 'syncing':
-                return (React.createElement(react_core_1.Label, { color: "blue", icon: React.createElement(react_core_1.Spinner, { size: "sm" }) }, "Syncing\u2026"));
-            case 'error':
-                return React.createElement(react_core_1.Label, { color: "red" }, "Sync error");
-            default:
-                return null;
-        }
-    };
-    const panelContent = (React.createElement(React.Fragment, null,
-        React.createElement(react_core_1.Tabs, { activeKey: activeTabKey, onSelect: (_event, tabKey) => setActiveTabKey(tabKey), "aria-label": "Hale Commenting System drawer tabs" },
-            React.createElement(react_core_1.Tab, { eventKey: "details", title: React.createElement(react_core_1.TabTitleText, null, "Details") },
-                React.createElement("div", { style: { paddingTop: '1rem' } },
-                    React.createElement(DetailsTab_1.DetailsTab, null))),
-            React.createElement(react_core_1.Tab, { eventKey: "jira", title: React.createElement(react_core_1.TabTitleText, null, "Jira") },
-                React.createElement("div", { style: { paddingTop: '1rem' } },
-                    React.createElement(JiraTab_1.JiraTab, null))),
-            React.createElement(react_core_1.Tab, { eventKey: "comments", title: React.createElement(react_core_1.TabTitleText, null, "Comments") },
-                React.createElement("div", { style: { paddingTop: '1rem' } }, !selectedThread ? (React.createElement(react_core_1.EmptyState, { icon: react_icons_1.InfoCircleIcon, titleText: "No pin selected", headingLevel: "h3" },
-                    React.createElement(react_core_1.EmptyStateBody, null, "Select or create a comment pin to start a thread."))) : (React.createElement(React.Fragment, null,
-                    React.createElement(react_core_1.Card, { style: { marginBottom: '1rem' } },
-                        React.createElement(react_core_1.CardBody, null,
-                            React.createElement("div", { style: { display: 'grid', gap: '0.5rem' } },
-                                React.createElement("div", { style: { fontSize: '0.875rem' } },
-                                    React.createElement("strong", null, "Location:"),
-                                    " (",
-                                    selectedThread.xPercent.toFixed(1),
-                                    "%, ",
-                                    selectedThread.yPercent.toFixed(1),
-                                    "%)"),
-                                React.createElement("div", { style: { fontSize: '0.875rem' } },
-                                    React.createElement("strong", null, "Comments:"),
-                                    " ",
-                                    selectedThread.comments.length),
-                                React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.875rem' } },
-                                    React.createElement("strong", null, "Status:"),
-                                    renderSyncLabel(deriveStatus()) ?? React.createElement(react_core_1.Label, { color: "grey" }, "Local")),
-                                React.createElement("div", { style: { fontSize: '0.875rem' } }, selectedThread.issueNumber && selectedThread.issueUrl ? (React.createElement("a", { href: selectedThread.issueUrl, target: "_blank", rel: "noopener noreferrer", style: { display: 'inline-flex', alignItems: 'center', gap: '0.25rem' } },
-                                    React.createElement(react_icons_1.GithubIcon, null),
-                                    "Issue #",
-                                    selectedThread.issueNumber,
-                                    React.createElement(react_icons_1.ExternalLinkAltIcon, { style: { fontSize: '0.75rem' } }))) : (React.createElement("span", { style: { display: 'inline-flex', alignItems: 'center', gap: '0.25rem', color: 'var(--pf-t--global--text--color--subtle)' } },
-                                    React.createElement(react_icons_1.GithubIcon, null),
-                                    "Issue pending\u2026"))),
-                                React.createElement("div", null)))),
-                    selectedThread.comments.length > 0 && (React.createElement("div", { style: { marginBottom: '1.5rem' } }, (() => {
-                        const comments = selectedThread.comments;
-                        const byId = new Map(comments.map((c) => [c.id, c]));
-                        const byGitHubId = new Map();
-                        for (const c of comments) {
-                            if (c.githubCommentId)
-                                byGitHubId.set(c.githubCommentId, c.id);
-                        }
-                        const childrenByParent = new Map();
-                        const topLevel = [];
-                        for (const c of comments) {
-                            const parentLocal = c.parentCommentId ||
-                                (c.parentGitHubCommentId ? byGitHubId.get(c.parentGitHubCommentId) : undefined);
-                            if (parentLocal && byId.has(parentLocal)) {
-                                const list = childrenByParent.get(parentLocal) || [];
-                                list.push(c.id);
-                                childrenByParent.set(parentLocal, list);
-                            }
-                            else {
-                                topLevel.push(c.id);
-                            }
-                        }
-                        const sortByCreatedAt = (aId, bId) => {
-                            const a = byId.get(aId);
-                            const b = byId.get(bId);
-                            const at = a ? Date.parse(a.createdAt) : 0;
-                            const bt = b ? Date.parse(b.createdAt) : 0;
-                            return at - bt;
-                        };
-                        topLevel.sort(sortByCreatedAt);
-                        childrenByParent.forEach((list, parentId) => {
-                            list.sort(sortByCreatedAt);
-                            childrenByParent.set(parentId, list);
-                        });
-                        const renderNode = (id, depth, topIndex) => {
-                            const comment = byId.get(id);
-                            if (!comment)
-                                return null;
-                            const isReply = depth > 0;
-                            const title = isReply ? 'Reply' : `Comment #${(topIndex ?? 0) + 1}`;
-                            const children = childrenByParent.get(id) || [];
-                            return (React.createElement("div", { key: id, style: {
-                                    marginLeft: depth * 16,
-                                    marginTop: depth > 0 ? '8px' : undefined,
-                                    marginBottom: depth > 0 ? '8px' : '1rem',
-                                } },
-                                React.createElement(react_core_1.Card, null,
-                                    React.createElement(react_core_1.CardBody, { style: { position: 'relative' } },
-                                        React.createElement(react_core_1.Button, { variant: "plain", icon: React.createElement(react_icons_1.TrashIcon, null), isDanger: true, "aria-label": "Delete comment", title: "Delete comment", onClick: () => handleDeleteComment(comment.id), style: { position: 'absolute', top: '12px', right: '12px' } }),
-                                        React.createElement(react_core_1.Title, { headingLevel: "h3", size: isReply ? 'lg' : 'xl', style: { paddingRight: '2.5rem' } }, title),
-                                        React.createElement("div", { style: {
-                                                marginTop: '0.25rem',
-                                                fontSize: '0.875rem',
-                                                color: 'var(--pf-t--global--text--color--subtle)',
-                                                paddingRight: '2.5rem',
-                                            } },
-                                            "@",
-                                            comment.author ?? '—',
-                                            " \u00A0 ",
-                                            formatCommentDate(comment.createdAt)),
-                                        editingCommentId === comment.id ? (React.createElement("div", { style: { marginTop: '0.5rem' } },
-                                            React.createElement(react_core_1.TextArea, { value: editText, onChange: (_event, value) => setEditText(value), "aria-label": "Edit comment", rows: 3 }),
-                                            React.createElement(react_core_1.ActionList, { style: { marginTop: '0.5rem' } },
-                                                React.createElement(react_core_1.ActionListItem, null,
-                                                    React.createElement(react_core_1.Button, { variant: "primary", onClick: () => handleSaveEdit(comment.id) }, "Save")),
-                                                React.createElement(react_core_1.ActionListItem, null,
-                                                    React.createElement(react_core_1.Button, { variant: "link", onClick: handleCancelEdit }, "Cancel"))))) : (React.createElement("div", null,
-                                            React.createElement("div", { style: { marginTop: '0.75rem', whiteSpace: 'pre-wrap' } }, stripMarkersForDisplay(comment.text)),
-                                            React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginTop: '0.5rem' } },
-                                                React.createElement(react_core_1.Button, { variant: "primary", onClick: () => handleStartReply(comment.id) }, "Reply"),
-                                                React.createElement(react_core_1.Button, { variant: "link", onClick: () => handleStartEdit(comment.id, stripMarkersForDisplay(comment.text)) }, "Edit")))),
-                                        replyingToCommentId === comment.id && (React.createElement("div", { style: { marginTop: '0.75rem' } },
-                                            React.createElement(react_core_1.Title, { headingLevel: "h4", size: "md", style: { marginBottom: '0.5rem' } }, "Reply to this comment"),
-                                            React.createElement(react_core_1.TextArea, { value: replyTextByCommentId[comment.id] || '', onChange: (_event, value) => setReplyTextByCommentId((prev) => ({ ...prev, [comment.id]: value })), placeholder: "Type your reply...", "aria-label": "Reply to comment", rows: 3 }),
-                                            React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginTop: '0.5rem' } },
-                                                React.createElement(react_core_1.Button, { variant: "primary", onClick: () => handleSubmitReply(comment.id), isDisabled: !(replyTextByCommentId[comment.id] || '').trim() }, "Post reply"),
-                                                React.createElement(react_core_1.Button, { variant: "link", onClick: handleCancelReply }, "Cancel")))))),
-                                children.map((childId) => renderNode(childId, depth + 1))));
-                        };
-                        return React.createElement(React.Fragment, null, topLevel.map((id, idx) => renderNode(id, 0, idx)));
-                    })())),
-                    React.createElement("div", null, selectedThread.status === 'closed' ? (React.createElement("div", { style: { marginBottom: '1rem', padding: '1rem', backgroundColor: 'var(--pf-t--global--background--color--secondary--default)', borderRadius: 'var(--pf-t--global--border--radius--medium)' } },
-                        React.createElement(react_core_1.Title, { headingLevel: "h3", size: "md", style: { marginBottom: '0.5rem' } }, "\uD83D\uDD12 Thread Closed"),
-                        React.createElement("p", { style: { color: 'var(--pf-t--global--text--color--subtle)', marginBottom: '1rem' } }, "This thread has been closed and locked. Reopen it to add new comments."),
-                        React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap' } },
-                            React.createElement(react_core_1.Button, { variant: "primary", onClick: handleReopenThread }, "Reopen Thread"),
-                            React.createElement(react_core_1.Button, { variant: "link", isDanger: true, onClick: handleRemovePin }, "Remove pin")))) : (React.createElement(React.Fragment, null,
-                        React.createElement(react_core_1.Title, { headingLevel: "h3", size: "md", style: { marginBottom: '0.5rem' } }, "Add comment"),
-                        React.createElement(react_core_1.TextArea, { value: newCommentText, onChange: (_event, value) => setNewCommentText(value), placeholder: "Type your comment...", "aria-label": "New comment", rows: 4 }),
-                        React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', marginTop: '1rem' } },
-                            React.createElement(react_core_1.Button, { variant: "primary", onClick: handleAddComment, isDisabled: !newCommentText.trim() }, "Add Comment"),
-                            React.createElement(react_core_1.Button, { variant: "secondary", onClick: handleCloseThread }, "Close Thread"),
-                            React.createElement(react_core_1.Button, { variant: "link", isDanger: true, onClick: handleRemovePin }, "Remove pin"))))))))))));
-    if (floatingWidgetMode && isExpanded) {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(FloatingWidget_1.FloatingWidget, { onClose: handleClose, title: "Hale Commenting System" },
-                React.createElement("div", { style: { padding: '1rem' } }, panelContent)),
-            React.createElement("div", { style: { position: 'relative' } }, children)));
-    }
-    const drawerPanelContent = isExpanded ? (React.createElement(react_core_1.DrawerPanelContent, { isResizable: true, defaultSize: '500px', minSize: '300px' },
-        React.createElement(react_core_1.DrawerHead, null,
-            React.createElement("span", { tabIndex: isExpanded ? 0 : -1, ref: drawerRef },
-                React.createElement(react_core_1.Title, { headingLevel: "h2", size: "lg" }, "Hale Commenting System")),
-            React.createElement(react_core_1.DrawerActions, null,
-                React.createElement(react_core_1.DrawerCloseButton, { onClick: handleClose }))),
-        React.createElement(react_core_1.DrawerPanelBody, null, panelContent))) : null;
-    return (React.createElement(react_core_1.Drawer, { isExpanded: isExpanded, isInline: true, onExpand: onExpand },
-        React.createElement(react_core_1.DrawerContent, { panelContent: drawerPanelContent },
-            React.createElement(react_core_1.DrawerContentBody, { style: { position: 'relative' } }, children))));
-};
-exports.CommentPanel = CommentPanel;

package/dist/components/CommentPin.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-interface CommentPinProps {
-    xPercent: number;
-    yPercent: number;
-    commentCount: number;
-    isClosed?: boolean;
-    isSelected: boolean;
-    onClick: () => void;
-}
-export declare const CommentPin: React.FunctionComponent<CommentPinProps>;
-export {};

package/dist/components/CommentPin.js

@@ -1,64 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CommentPin = void 0;
-const React = __importStar(require("react"));
-const react_core_1 = require("@patternfly/react-core");
-const react_icons_1 = require("@patternfly/react-icons");
-const CommentPin = ({ xPercent, yPercent, commentCount, isClosed = false, isSelected, onClick, }) => {
-    return (React.createElement(react_core_1.Button, { variant: "plain", "data-comment-pin": true, style: {
-            position: 'absolute',
-            left: `${xPercent}%`,
-            top: `${yPercent}%`,
-            transform: 'translate(-50%, -50%)',
-            width: '32px',
-            height: '32px',
-            borderRadius: '50%',
-            backgroundColor: isClosed ? 'var(--pf-t--global--icon--color--subtle)' : '#C9190B',
-            color: 'white',
-            border: isSelected ? '3px solid #0066CC' : '2px solid white',
-            boxShadow: isSelected
-                ? '0 0 0 3px rgba(0, 102, 204, 0.3), 0 2px 8px rgba(0,0,0,0.3)'
-                : '0 2px 8px rgba(0,0,0,0.3)',
-            cursor: 'pointer',
-            padding: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            transition: 'all 0.2s ease',
-            pointerEvents: 'auto',
-        }, onClick: onClick, "aria-label": `${isClosed ? 'Closed ' : ''}comment thread with ${commentCount} comment${commentCount !== 1 ? 's' : ''}` }, commentCount === 0 ? (React.createElement(react_icons_1.CommentIcon, { style: { fontSize: '16px' } })) : commentCount === 1 ? (React.createElement(react_icons_1.CommentIcon, { style: { fontSize: '16px' } })) : (React.createElement("span", { style: { fontSize: '14px', fontWeight: 'bold' } }, commentCount))));
-};
-exports.CommentPin = CommentPin;

package/dist/components/DetailsTab.d.ts

@@ -1,2 +0,0 @@
-import * as React from 'react';
-export declare const DetailsTab: React.FunctionComponent;