@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/screens/console-logs/mobile-log-card.js

@@ -4,93 +4,90 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MobileLogCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
 const moment_1 = __importDefault(require("moment"));
-const react_1 = __importDefault(require("react"));
 const getLevelColor = (level) => {
     switch (level) {
-        case 'error': return '#dc3545';
-        case 'warn': return '#ffc107';
-        case 'info': return '#0dcaf0';
-        case 'log': return '#6c757d';
-        case 'debug': return '#6c757d';
-        default: return '#6c757d';
+        case "error":
+            return "#dc3545";
+        case "warn":
+            return "#ffc107";
+        case "info":
+            return "#0dcaf0";
+        case "log":
+            return "#6c757d";
+        case "debug":
+            return "#6c757d";
+        default:
+            return "#6c757d";
     }
 };
 const getProcessColor = (process) => {
     switch (process) {
-        case 'ui':
-        case 'renderer': return '#0dcaf0';
-        case 'electron':
-        case 'main': return '#d946ef';
-        case 'react-native': return '#61dafb';
-        default: return '#6c757d';
+        case "ui":
+        case "renderer":
+            return "#0dcaf0";
+        case "electron":
+        case "main":
+            return "#d946ef";
+        case "react-native":
+            return "#61dafb";
+        default:
+            return "#6c757d";
     }
 };
 const getLevelIcon = (level) => {
     switch (level) {
-        case 'error': return 'bi-x-circle-fill';
-        case 'warn': return 'bi-exclamation-triangle-fill';
-        case 'info': return 'bi-info-circle-fill';
-        case 'debug': return 'bi-bug-fill';
-        default: return 'bi-chat-square-text';
+        case "error":
+            return "bi-x-circle-fill";
+        case "warn":
+            return "bi-exclamation-triangle-fill";
+        case "info":
+            return "bi-info-circle-fill";
+        case "debug":
+            return "bi-bug-fill";
+        default:
+            return "bi-chat-square-text";
     }
 };
 const MobileLogCard = ({ log, colorMode }) => {
-    const isDark = colorMode === 'dark';
+    const isDark = colorMode === "dark";
     // Parse context if it's a string
     let context = log.context;
-    if (typeof context === 'string') {
+    if (typeof context === "string") {
         try {
             context = (0, peers_sdk_1.fromJSONString)(context);
         }
-        catch (err) { }
+        catch (_err) { }
     }
-    return (react_1.default.createElement("div", { style: {
-            padding: '10px 12px',
-            borderBottom: `1px solid ${isDark ? '#333' : '#e9ecef'}`,
-            backgroundColor: isDark ? '#1a1a1a' : '#fff',
-        } },
-        react_1.default.createElement("div", { className: "d-flex align-items-center gap-2 mb-1", style: { flexWrap: 'wrap' } },
-            react_1.default.createElement("span", { style: { fontSize: '0.7rem', color: isDark ? '#888' : '#666' } }, (0, moment_1.default)(log.timestamp).format('HH:mm:ss.SSS')),
-            react_1.default.createElement("span", { className: "badge text-white", style: {
-                    backgroundColor: getLevelColor(log.level),
-                    fontSize: '0.65rem',
-                    padding: '2px 6px'
-                } },
-                react_1.default.createElement("i", { className: `${getLevelIcon(log.level)} me-1` }),
-                log.level),
-            react_1.default.createElement("span", { className: "badge text-white", style: {
-                    backgroundColor: getProcessColor(log.process),
-                    fontSize: '0.65rem',
-                    padding: '2px 6px'
-                } }, log.process),
-            log.source && (react_1.default.createElement("span", { style: { fontSize: '0.65rem', color: isDark ? '#666' : '#999' } }, log.source))),
-        react_1.default.createElement("div", { style: {
-                fontSize: '0.8rem',
-                wordBreak: 'break-word',
-                color: isDark ? '#e0e0e0' : '#333'
-            } }, log.message),
-        context && (react_1.default.createElement("details", { className: "mt-1" },
-            react_1.default.createElement("summary", { className: "text-muted", style: { cursor: 'pointer', fontSize: '0.7rem' } },
-                react_1.default.createElement("i", { className: "bi bi-code-square me-1" }),
-                "Context"),
-            react_1.default.createElement("pre", { className: "mt-1 p-2 rounded", style: {
-                    fontSize: '0.65rem',
-                    backgroundColor: isDark ? '#252525' : '#f8f9fa',
-                    color: isDark ? '#aaa' : '#333',
-                    overflow: 'auto',
-                    maxHeight: '150px'
-                } }, JSON.stringify(context, null, 2)))),
-        log.stackTrace && (react_1.default.createElement("details", { className: "mt-1" },
-            react_1.default.createElement("summary", { className: "text-danger", style: { cursor: 'pointer', fontSize: '0.7rem' } },
-                react_1.default.createElement("i", { className: "bi bi-bug me-1" }),
-                "Stack Trace"),
-            react_1.default.createElement("pre", { className: "mt-1 p-2 rounded text-danger", style: {
-                    fontSize: '0.6rem',
-                    backgroundColor: isDark ? '#2a1a1a' : '#fff0f0',
-                    overflow: 'auto',
-                    maxHeight: '150px'
-                } }, log.stackTrace)))));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: {
+            padding: "10px 12px",
+            borderBottom: `1px solid ${isDark ? "#333" : "#e9ecef"}`,
+            backgroundColor: isDark ? "#1a1a1a" : "#fff",
+        }, children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-2 mb-1", style: { flexWrap: "wrap" }, children: [(0, jsx_runtime_1.jsx)("span", { style: { fontSize: "0.7rem", color: isDark ? "#888" : "#666" }, children: (0, moment_1.default)(log.timestamp).format("HH:mm:ss.SSS") }), (0, jsx_runtime_1.jsxs)("span", { className: "badge text-white", style: {
+                            backgroundColor: getLevelColor(log.level),
+                            fontSize: "0.65rem",
+                            padding: "2px 6px",
+                        }, children: [(0, jsx_runtime_1.jsx)("i", { className: `${getLevelIcon(log.level)} me-1` }), log.level] }), (0, jsx_runtime_1.jsx)("span", { className: "badge text-white", style: {
+                            backgroundColor: getProcessColor(log.process),
+                            fontSize: "0.65rem",
+                            padding: "2px 6px",
+                        }, children: log.process }), log.source && ((0, jsx_runtime_1.jsx)("span", { style: { fontSize: "0.65rem", color: isDark ? "#666" : "#999" }, children: log.source }))] }), (0, jsx_runtime_1.jsx)("div", { style: {
+                    fontSize: "0.8rem",
+                    wordBreak: "break-word",
+                    color: isDark ? "#e0e0e0" : "#333",
+                }, children: log.message }), context && ((0, jsx_runtime_1.jsxs)("details", { className: "mt-1", children: [(0, jsx_runtime_1.jsxs)("summary", { className: "text-muted", style: { cursor: "pointer", fontSize: "0.7rem" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-code-square me-1" }), "Context"] }), (0, jsx_runtime_1.jsx)("pre", { className: "mt-1 p-2 rounded", style: {
+                            fontSize: "0.65rem",
+                            backgroundColor: isDark ? "#252525" : "#f8f9fa",
+                            color: isDark ? "#aaa" : "#333",
+                            overflow: "auto",
+                            maxHeight: "150px",
+                        }, children: JSON.stringify(context, null, 2) })] })), log.stackTrace && ((0, jsx_runtime_1.jsxs)("details", { className: "mt-1", children: [(0, jsx_runtime_1.jsxs)("summary", { className: "text-danger", style: { cursor: "pointer", fontSize: "0.7rem" }, children: [(0, jsx_runtime_1.jsx)("i", { className: "bi bi-bug me-1" }), "Stack Trace"] }), (0, jsx_runtime_1.jsx)("pre", { className: "mt-1 p-2 rounded text-danger", style: {
+                            fontSize: "0.6rem",
+                            backgroundColor: isDark ? "#2a1a1a" : "#fff0f0",
+                            overflow: "auto",
+                            maxHeight: "150px",
+                        }, children: log.stackTrace })] }))] }));
 };
 exports.MobileLogCard = MobileLogCard;

package/dist/screens/console-logs/resizable-table-header.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface Column {
     key: string;
     label: string;
@@ -10,5 +9,5 @@ interface ResizableTableHeaderProps {
     onColumnsChange: (columns: Column[]) => void;
     colorMode: string;
 }
-export declare const ResizableTableHeader: ({ columns, onColumnsChange, colorMode }: ResizableTableHeaderProps) => React.JSX.Element;
+export declare const ResizableTableHeader: ({ columns, onColumnsChange, colorMode, }: ResizableTableHeaderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/screens/console-logs/resizable-table-header.js

@@ -1,41 +1,9 @@
 "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.ResizableTableHeader = void 0;
-const react_1 = __importStar(require("react"));
-const ResizableTableHeader = ({ columns, onColumnsChange, colorMode }) => {
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ResizableTableHeader = ({ columns, onColumnsChange, colorMode, }) => {
     const [resizingColumn, setResizingColumn] = (0, react_1.useState)(null);
     const startXRef = (0, react_1.useRef)(0);
     const startWidthRef = (0, react_1.useRef)(0);
@@ -51,47 +19,43 @@ const ResizableTableHeader = ({ columns, onColumnsChange, colorMode }) => {
                 return;
             const diff = e.clientX - startXRef.current;
             const newWidth = Math.max(startWidthRef.current + diff, 50); // Min width 50px
-            const updatedColumns = columns.map(col => col.key === resizingColumn ? { ...col, width: newWidth } : col);
+            const updatedColumns = columns.map((col) => col.key === resizingColumn ? { ...col, width: newWidth } : col);
             onColumnsChange(updatedColumns);
         };
         const handleMouseUp = () => {
             setResizingColumn(null);
         };
         if (resizingColumn) {
-            document.addEventListener('mousemove', handleMouseMove);
-            document.addEventListener('mouseup', handleMouseUp);
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
             return () => {
-                document.removeEventListener('mousemove', handleMouseMove);
-                document.removeEventListener('mouseup', handleMouseUp);
+                document.removeEventListener("mousemove", handleMouseMove);
+                document.removeEventListener("mouseup", handleMouseUp);
             };
         }
     }, [resizingColumn, columns, onColumnsChange]);
-    return (react_1.default.createElement("table", { className: "table table-sm mb-0", style: { fontSize: '0.85rem', tableLayout: 'fixed', width: '100%' } },
-        react_1.default.createElement("thead", { style: { backgroundColor: colorMode === 'dark' ? '#2a2a2a' : '#ffffff' } },
-            react_1.default.createElement("tr", null, columns.map((column) => (react_1.default.createElement("th", { key: column.key, style: {
-                    width: `${column.width}px`,
-                    position: 'relative',
-                    padding: '0.5rem',
-                    borderRight: '1px solid #dee2e6',
-                } },
-                column.label,
-                column.key !== 'message' && (react_1.default.createElement("div", { onMouseDown: (e) => handleMouseDown(e, column.key, column.width), style: {
-                        position: 'absolute',
-                        right: 0,
-                        top: 0,
-                        bottom: 0,
-                        width: '5px',
-                        cursor: 'col-resize',
-                        userSelect: 'none',
-                        backgroundColor: resizingColumn === column.key ? '#0d6efd' : 'transparent',
-                    }, onMouseEnter: (e) => {
-                        if (!resizingColumn) {
-                            e.currentTarget.style.backgroundColor = '#dee2e6';
-                        }
-                    }, onMouseLeave: (e) => {
-                        if (!resizingColumn) {
-                            e.currentTarget.style.backgroundColor = 'transparent';
-                        }
-                    } })))))))));
+    return ((0, jsx_runtime_1.jsx)("table", { className: "table table-sm mb-0", style: { fontSize: "0.85rem", tableLayout: "fixed", width: "100%" }, children: (0, jsx_runtime_1.jsx)("thead", { style: { backgroundColor: colorMode === "dark" ? "#2a2a2a" : "#ffffff" }, children: (0, jsx_runtime_1.jsx)("tr", { children: columns.map((column) => ((0, jsx_runtime_1.jsxs)("th", { style: {
+                        width: `${column.width}px`,
+                        position: "relative",
+                        padding: "0.5rem",
+                        borderRight: "1px solid #dee2e6",
+                    }, children: [column.label, column.key !== "message" && ((0, jsx_runtime_1.jsx)("div", { onMouseDown: (e) => handleMouseDown(e, column.key, column.width), style: {
+                                position: "absolute",
+                                right: 0,
+                                top: 0,
+                                bottom: 0,
+                                width: "5px",
+                                cursor: "col-resize",
+                                userSelect: "none",
+                                backgroundColor: resizingColumn === column.key ? "#0d6efd" : "transparent",
+                            }, onMouseEnter: (e) => {
+                                if (!resizingColumn) {
+                                    e.currentTarget.style.backgroundColor = "#dee2e6";
+                                }
+                            }, onMouseLeave: (e) => {
+                                if (!resizingColumn) {
+                                    e.currentTarget.style.backgroundColor = "transparent";
+                                }
+                            } }))] }, column.key))) }) }) }));
 };
 exports.ResizableTableHeader = ResizableTableHeader;

package/dist/screens/contacts/contact-details.d.ts

@@ -1,6 +1,5 @@
-import React from "react";
 interface IProps {
     userId: string;
 }
-export declare const ContactDetails: (props: IProps) => React.JSX.Element;
+export declare const ContactDetails: (props: IProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/screens/contacts/contact-details.js

@@ -1,16 +1,13 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ContactDetails = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = __importDefault(require("react"));
 const input_1 = require("../../components/input");
 const loading_indicator_1 = require("../../components/loading-indicator");
 const save_button_1 = require("../../components/save-button");
-const trust_level_dropdown_1 = require("../../components/trust-level-dropdown");
 const tabs_1 = require("../../components/tabs");
+const trust_level_dropdown_1 = require("../../components/trust-level-dropdown");
 const hooks_1 = require("../../hooks");
 const tabs_state_1 = require("../../tabs-layout/tabs-state");
 const ui_loader_1 = require("../../ui-router/ui-loader");
@@ -19,55 +16,28 @@ const ContactDetails = (props) => {
         const userContext = await (0, peers_sdk_1.getUserContext)();
         const contact = await (0, peers_sdk_1.Users)(userContext.userDataContext).get(props.userId);
         if (!contact) {
-            throw new Error('Contact not found');
+            throw new Error("Contact not found");
         }
         (0, tabs_state_1.updateActiveTabTitle)(contact.name || "Contact");
         return (0, peers_sdk_1.Users)(userContext.userDataContext).initDoc(contact);
     }, undefined, [props.userId]);
     if (!contact) {
-        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+        return (0, jsx_runtime_1.jsx)(loading_indicator_1.LoadingIndicator, {});
     }
-    return (react_1.default.createElement("div", { className: "container-fluid p-3" },
-        react_1.default.createElement("div", { className: "d-flex" },
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("h4", null,
-                    react_1.default.createElement("i", { className: "bi-person-fill-check me-2" }))),
-            react_1.default.createElement("div", { className: "flex-grow-1" },
-                react_1.default.createElement("h4", null,
-                    react_1.default.createElement(input_1.Input, { key: contact.userId, className: 'border border-0', style: { width: '100%', outline: 'none', backgroundColor: 'transparent' }, value: contact.qs.name }))),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement(save_button_1.SaveButton, { key: contact.userId, doc: contact }))),
-        react_1.default.createElement(tabs_1.Tabs, { key: contact.userId, tabs: [
-                {
-                    name: 'Info', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
-                        react_1.default.createElement(ContactInfo, { contact: contact }))
-                },
-            ] })));
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "container-fluid p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "d-flex", children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("h4", { children: (0, jsx_runtime_1.jsx)("i", { className: "bi-person-fill-check me-2" }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex-grow-1", children: (0, jsx_runtime_1.jsx)("h4", { children: (0, jsx_runtime_1.jsx)(input_1.Input, { className: "border border-0", style: { width: "100%", outline: "none", backgroundColor: "transparent" }, value: contact.qs.name }, contact.userId) }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(save_button_1.SaveButton, { doc: contact }, contact.userId) })] }), (0, jsx_runtime_1.jsx)(tabs_1.Tabs, { tabs: [
+                    {
+                        name: "Info",
+                        content: ((0, jsx_runtime_1.jsx)(tabs_1.ScreenTabBody, { children: (0, jsx_runtime_1.jsx)(ContactInfo, { contact: contact }) })),
+                    },
+                ] }, contact.userId)] }));
 };
 exports.ContactDetails = ContactDetails;
 const ContactInfo = (props) => {
     const { contact } = props;
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("div", { className: "mb-3" },
-            react_1.default.createElement("div", { className: "d-flex align-items-center gap-3" },
-                react_1.default.createElement("div", { className: "flex-grow-1" },
-                    react_1.default.createElement("small", { className: "text-muted d-block mb-1" }, "Name"),
-                    react_1.default.createElement(input_1.Input, { value: contact.qs.name, className: "form-control mb-3 ps-2", placeholder: "Contact name", title: "Contact name" })),
-                react_1.default.createElement("div", { className: "border-start ps-3" },
-                    react_1.default.createElement("small", { className: "text-muted d-block mb-1" }, "User ID"),
-                    react_1.default.createElement("code", { className: "small" }, contact.userId)),
-                react_1.default.createElement("div", { className: "border-start ps-3" },
-                    react_1.default.createElement("small", { className: "text-muted d-block mb-1" }, "Trust Level"),
-                    react_1.default.createElement(trust_level_dropdown_1.TrustLevelDropdown, { userId: contact.userId })))),
-        react_1.default.createElement("div", { className: "mb-3" },
-            react_1.default.createElement("small", null, "Public Key:"),
-            react_1.default.createElement(input_1.Input, { value: contact.qs.publicKey, className: "form-control mb-3 p-0 ps-2", placeholder: "Public key", title: "Public key" })),
-        react_1.default.createElement("div", { className: "mb-3" },
-            react_1.default.createElement("small", null, "Public Box Key:"),
-            react_1.default.createElement(input_1.Input, { value: contact.qs.publicBoxKey, className: "form-control mb-3 p-0 ps-2", placeholder: "Public box key", title: "Public box key" }))));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "mb-3", children: (0, jsx_runtime_1.jsxs)("div", { className: "d-flex align-items-center gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex-grow-1", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted d-block mb-1", children: "Name" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: contact.qs.name, className: "form-control mb-3 ps-2", placeholder: "Contact name", title: "Contact name" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-start ps-3", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted d-block mb-1", children: "User ID" }), (0, jsx_runtime_1.jsx)("code", { className: "small", children: contact.userId })] }), (0, jsx_runtime_1.jsxs)("div", { className: "border-start ps-3", children: [(0, jsx_runtime_1.jsx)("small", { className: "text-muted d-block mb-1", children: "Trust Level" }), (0, jsx_runtime_1.jsx)(trust_level_dropdown_1.TrustLevelDropdown, { userId: contact.userId })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("small", { children: "Public Key:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: contact.qs.publicKey, className: "form-control mb-3 p-0 ps-2", placeholder: "Public key", title: "Public key" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "mb-3", children: [(0, jsx_runtime_1.jsx)("small", { children: "Public Box Key:" }), (0, jsx_runtime_1.jsx)(input_1.Input, { value: contact.qs.publicBoxKey, className: "form-control mb-3 p-0 ps-2", placeholder: "Public box key", title: "Public box key" })] })] }));
 };
 (0, ui_loader_1.registerInternalPeersUI)({
-    peersUIId: '00contact00details00component',
+    peersUIId: "00contact00details00component",
     component: exports.ContactDetails,
     routes: [
         {
@@ -79,8 +49,8 @@ const ContactInfo = (props) => {
                 }
                 return false;
             },
-            uiCategory: 'screen',
-            priority: 2
-        }
-    ]
+            uiCategory: "screen",
+            priority: 2,
+        },
+    ],
 });

package/dist/screens/contacts/contact-list.d.ts

@@ -1,2 +1 @@
-import React from 'react';
-export declare function ContactList(): React.JSX.Element;
+export declare function ContactList(): import("react/jsx-runtime").JSX.Element;