@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/components/main-content-container.js

@@ -1,92 +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;
-    };
-})();
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MainContentContainer = void 0;
-const react_1 = __importStar(require("react"));
-const react_split_pane_1 = __importDefault(require("react-split-pane"));
-const globals_1 = require("../globals");
-const thread_view_1 = require("./messages/thread-view");
-const router_1 = require("./router");
-const hooks_1 = require("../hooks");
-const LEFT_BAR_WIDTH_KEY = 'leftBarWidth';
-const DEFAULT_LEFT_BAR_WIDTH = 300;
-const MainContentContainer = () => {
-    const splitPositionGlobalName = 'mainContentContainerSplitPos';
-    let [splitPos, setSplitPos] = (0, react_1.useState)(localStorage.getItem(splitPositionGlobalName) || '800');
-    (0, hooks_1.useObservable)(globals_1.threadViewOpen);
-    if (!(0, globals_1.threadViewOpen)()) {
-        return (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("button", { className: "btn small m-0 p-0 thread-view-open-button", onClick: () => {
-                    const lastThread = (0, globals_1.openThreads)()[0];
-                    if (!lastThread) {
-                        (0, thread_view_1.startNewThread)();
-                    }
-                    else {
-                        (0, globals_1.threadViewOpen)(true);
-                    }
-                }, style: {
-                    position: 'fixed',
-                    // top: '3px',
-                    // right: '16px',
-                    top: '-5px',
-                    right: '6px',
-                    zIndex: 1000,
-                    // backgroundColor: 'white',  
-                    backgroundColor: 'transparent'
-                } }, "+"),
-            react_1.default.createElement(router_1.Router, null)));
-    }
-    return (
-    // @ts-ignore
-    react_1.default.createElement(react_split_pane_1.default, { split: "vertical", defaultSize: parseInt(splitPos), onChange: (size) => {
-            localStorage.setItem(splitPositionGlobalName, String(size));
-            setSplitPos(String(size));
-        }, style: {
-            position: 'unset',
-            height: `calc(100vh - 25px)`,
-        } },
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(router_1.Router, null)),
-        react_1.default.createElement("div", { className: 'thread-view', style: {
-                height: `calc(100vh - 25px)`,
-                overflowY: 'scroll',
-                width: `calc(100vw - ${splitPos}px - ${parseInt(localStorage.getItem(LEFT_BAR_WIDTH_KEY) || String(DEFAULT_LEFT_BAR_WIDTH), 10)}px)`,
-            } },
-            react_1.default.createElement(thread_view_1.ThreadContainer, null))));
-};
-exports.MainContentContainer = MainContentContainer;

package/dist/components/messages/thread-view.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export declare function startNewThread(): void;
-export interface IThreadContainerProps {
-    closeThreadBtn?: React.ReactNode;
-}
-export declare const ThreadContainer: (props: IThreadContainerProps) => false | React.JSX.Element;

package/dist/components/messages/thread-view.js

@@ -1,174 +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.ThreadContainer = void 0;
-exports.startNewThread = startNewThread;
-const hooks_1 = require("../../hooks");
-const react_1 = __importStar(require("react"));
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const globals_1 = require("../../globals");
-const message_compose_1 = require("./message-compose");
-const message_display_1 = require("./message-display");
-const thread_message_list_1 = require("./thread-message-list");
-const markdown_with_mentions_1 = require("../markdown-with-mentions");
-function closeThread(thread) {
-    if (typeof thread === 'object') {
-        // Clear the draft content - this triggers auto-delete via the pvar subscription
-        (0, message_compose_1.getContentPersistenceValue)(thread.channelId, thread.messageId)('');
-        thread = thread.messageId;
-    }
-    (0, globals_1.openThreads)((0, globals_1.openThreads)().filter(t => (typeof t === 'string' && t !== thread) || (typeof t === 'object' && t.messageId !== thread)));
-    if ((0, globals_1.openThreads)().length === 0) {
-        startNewThread();
-    }
-}
-function startNewThread() {
-    const threadParent = (0, peers_sdk_1.Messages)().initRecord({
-        messageId: (0, peers_sdk_1.newid)(),
-        userId: globals_1.me.userId,
-        channelId: globals_1.me.userId,
-        message: '',
-    });
-    (0, globals_1.openThread)(threadParent);
-}
-const ThreadContainer = (props) => {
-    const [[thread]] = (0, hooks_1.useObservable)(globals_1.openThreads);
-    if (!thread) {
-        setTimeout(startNewThread, 0);
-        return false;
-    }
-    return (react_1.default.createElement("div", { className: "thread-container" },
-        react_1.default.createElement("div", { className: 'sticky-top container-fluid border shadow-sm thread-header', style: { height: '50px' } },
-            react_1.default.createElement("div", { className: 'd-flex' },
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("button", { className: "btn fs-4", onClick: startNewThread },
-                        react_1.default.createElement("i", { className: "bi bi-plus-lg" }))),
-                react_1.default.createElement("div", { className: 'flex-grow-1' },
-                    react_1.default.createElement("div", { className: 'pt-1' },
-                        react_1.default.createElement(OpenThreads, null))),
-                react_1.default.createElement("div", null,
-                    react_1.default.createElement("button", { className: "btn fs-4", onClick: () => {
-                            let currentThreadId = (0, globals_1.openThreads)()[0];
-                            closeThread(currentThreadId);
-                        } },
-                        react_1.default.createElement("i", { className: "bi bi-x-lg" })),
-                    props.closeThreadBtn === undefined && (react_1.default.createElement("button", { className: "btn fs-4", onClick: () => (0, globals_1.threadViewOpen)(false) },
-                        react_1.default.createElement("i", { className: "bi bi-box-arrow-in-up-right" }))),
-                    !!props.closeThreadBtn && props.closeThreadBtn))),
-        thread && typeof thread === 'string' &&
-            react_1.default.createElement(thread_message_list_1.ThreadMessageList, { threadId: thread }),
-        thread && typeof thread !== 'string' &&
-            react_1.default.createElement(NewThreadView, { message: thread })));
-};
-exports.ThreadContainer = ThreadContainer;
-const NewThreadView = (props) => {
-    const message = (0, peers_sdk_1.Messages)().initDoc(props.message);
-    // TODO let the user set the channel
-    message.channelId = globals_1.me.userId;
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("p", { className: 'p-2 fs-4 text-center' }, "New Thread"),
-        react_1.default.createElement("div", { className: 'p-2' },
-            react_1.default.createElement(message_compose_1.MessageCompose, { channelId: message.channelId, threadId: message.messageId, onMessageSubmit: async (messageData) => {
-                    message.message = messageData.message;
-                    message.createdAt = new Date();
-                    message.userId = globals_1.me.userId;
-                    await message.save();
-                    const threadsWithoutDraft = (0, globals_1.openThreads)().filter(t => !(typeof t === 'object' && t.messageId === message.messageId));
-                    (0, globals_1.openThreads)([message.messageId, ...threadsWithoutDraft]);
-                    (0, globals_1.threadViewOpen)(true);
-                } }))));
-};
-const OpenThreads = () => {
-    const [threads] = (0, hooks_1.useObservable)(globals_1.openThreads);
-    return (react_1.default.createElement("div", { className: "dropdown" },
-        react_1.default.createElement("button", { className: "btn btn-secondary dropdown-toggle", type: "button", "data-bs-toggle": "dropdown", "aria-expanded": "false" }, "Open Threads"),
-        react_1.default.createElement("ul", { className: "dropdown-menu", style: { maxHeight: '70vh', overflowY: 'auto', minWidth: '90%' } }, threads.map(thread => {
-            let threadId = '';
-            if (typeof thread === 'object') {
-                threadId = thread.messageId;
-            }
-            else {
-                threadId = thread;
-            }
-            return (react_1.default.createElement(OpenThreadsMenuItem, { key: threadId, thread: thread }));
-        }))));
-};
-const OpenThreadsMenuItem = (props) => {
-    const { thread } = props;
-    const [menuText, setMenuText] = (0, react_1.useState)('loading...');
-    const [message, setMessage] = (0, react_1.useState)();
-    const isDraft = typeof thread !== 'string';
-    (0, react_1.useEffect)(() => {
-        let sub = undefined;
-        let disposed = false;
-        (async () => {
-            if (typeof thread === 'string') {
-                const message = await (0, peers_sdk_1.Messages)().get(thread);
-                if (disposed)
-                    return;
-                setMenuText(message?.message ?? `Thread ${thread} not found`);
-                setMessage(message);
-            }
-            else {
-                setMessage(thread);
-                const pVar = (0, message_compose_1.getContentPersistenceValue)(thread.channelId, thread.messageId);
-                await pVar.loadingPromise;
-                if (disposed)
-                    return;
-                setMenuText(pVar() || 'New Thread');
-                sub = pVar.subscribe(() => {
-                    setMenuText(pVar() || 'New Thread');
-                });
-            }
-        })();
-        return () => {
-            sub?.dispose();
-        };
-    }, [thread]);
-    function _closeThread(evt) {
-        evt.preventDefault();
-        evt.stopPropagation();
-        closeThread(thread);
-    }
-    return (react_1.default.createElement("li", null,
-        react_1.default.createElement("div", { className: 'border rounded m-2 mb-3', onClick: () => (0, globals_1.openThread)(thread) },
-            !message && 'loading...',
-            message && !isDraft && (react_1.default.createElement("div", { style: { position: 'relative' } },
-                react_1.default.createElement("button", { className: 'btn-close', style: { position: 'absolute', right: 8, top: -10, fontSize: '.7em' }, onClick: _closeThread }),
-                react_1.default.createElement(message_display_1.MessageDisplay, { message: message, isThreadParent: true }))),
-            message && isDraft &&
-                react_1.default.createElement("div", { className: 'p-1' },
-                    react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: 'DRAFT - ' + menuText })))));
-};

package/dist/components/off-canvas.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-interface IProps {
-    id: string;
-    children: any;
-    position: 'left' | 'right' | 'top' | 'bottom';
-    keepOpen?: boolean;
-    dataBackdrop?: boolean;
-    effects?: {
-        hide: (() => any);
-    };
-}
-export declare const OffCanvas: (props: IProps) => React.JSX.Element;
-export {};

package/dist/components/off-canvas.js

@@ -1,89 +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.OffCanvas = void 0;
-const react_1 = __importStar(require("react"));
-const bootstrap_1 = require("bootstrap");
-// function removeExtraFadeFromOffcanvas(canvasId: string) {
-//   const offcanvas = document.getElementById(canvasId);
-//   offcanvas?.addEventListener('shown.bs.offcanvas', event => {
-//     let fade = document.getElementsByClassName('offcanvas-backdrop fade show');
-//     for (let i = 0; i < fade.length; i++) {
-//       if (fade.length > 1) {
-//         fade[i].remove();
-//       }
-//     }
-//   });
-// }
-// function preventMultipleOffcanvasFades(canvasId: string) {
-//   const offcanvas = document.getElementById(canvasId);
-//   offcanvas?.addEventListener('show.bs.offcanvas', function () {
-//     const backdrops = document.querySelectorAll('.offcanvas-backdrop');
-//     if (backdrops.length > 1) {
-//       for (let i = 1; i < backdrops.length; i++) {
-//         backdrops[i].remove();
-//       }
-//     }
-//   });
-// }
-const OffCanvas = (props) => {
-    console.log('OffCanvas');
-    const { id, position, keepOpen, effects } = props;
-    const computedProps = {};
-    if (keepOpen) {
-        computedProps['data-bs-scroll'] = "true";
-        computedProps['data-bs-backdrop'] = "false";
-    }
-    if (props.dataBackdrop !== undefined) {
-        computedProps['data-bs-backdrop'] = String(props.dataBackdrop);
-    }
-    const offCanvasPosition = position == 'left' ? 'start'
-        : position == 'right' ? 'end' : position;
-    const offCanvasRef = (0, react_1.useRef)();
-    if (effects) {
-        effects.hide = () => {
-            if (offCanvasRef.current) {
-                let offCanvas = bootstrap_1.Offcanvas.getInstance(offCanvasRef.current);
-                offCanvas?.hide();
-            }
-        };
-    }
-    (0, react_1.useEffect)(() => {
-        // removeExtraFadeFromOffcanvas(id);
-        // preventMultipleOffcanvasFades(id);
-    }, [offCanvasRef, offCanvasRef.current]);
-    return (react_1.default.createElement("div", { id: id, ref: offCanvasRef, tabIndex: -1, className: `offcanvas offcanvas-${offCanvasPosition} ${keepOpen ? 'show' : ''}`, style: { width: "300px", visibility: keepOpen ? 'visible' : '' }, ...computedProps }, props.children));
-};
-exports.OffCanvas = OffCanvas;

package/dist/components/text-list-editor.tsx/text-list-editor.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { IMarkdownEditorProps } from '../markdown-editor/editor';
-interface TextListEditorProps extends IMarkdownEditorProps {
-}
-export declare const TextListEditor: (props: TextListEditorProps) => React.JSX.Element;
-export {};

package/dist/components/text-list-editor.tsx/text-list-editor.js

@@ -1,13 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextListEditor = void 0;
-const react_1 = __importDefault(require("react"));
-const editor_1 = require("../markdown-editor/editor");
-const TextListEditor = (props) => {
-    return (react_1.default.createElement("div", { className: "border rounded border-dark-subtle" },
-        react_1.default.createElement(editor_1.MarkdownEditor, { ...props })));
-};
-exports.TextListEditor = TextListEditor;

package/dist/components/top-bar.d.ts

@@ -1,2 +0,0 @@
-import React from 'react';
-export declare const TopBar: () => React.JSX.Element;

package/dist/components/top-bar.js

@@ -1,51 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TopBar = void 0;
-const react_1 = __importDefault(require("react"));
-// import { visibleNotifications } from '../notifications';
-const TopBar = () => {
-    // const [_notifications] = useObservable(visibleNotifications);
-    // const unreadNotifications = _notifications.filter(n => !n.status);
-    // const unreadNotificationCount = unreadNotifications.length;
-    // const [group] = useObservable(globals.activeGroup);
-    let connections = [1, 2, 3];
-    let connectionsSyncing = [1, 2];
-    let unreadNotificationCount = 0;
-    return (react_1.default.createElement("nav", { className: "navbar navbar-expand-lg navbar-dark bg-body-tertiary fixed-top peers-top-bar", 
-        // style={{ borderLeft: 'solid', borderColor: '#606365', borderWidth: globals.isDesktop() ? '1px' : 0,   }}
-        // style={{ borderBottom: 'solid', borderColor: '#606365', borderWidth: '1px',   }}
-        style: { height: '50px' } },
-        react_1.default.createElement("div", { className: "container-fluid" },
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("button", { className: "navbar-toggler collapsed", type: "button", "data-bs-toggle": "offcanvas", "data-bs-target": "#leftBar", "aria-controls": "leftBar", "aria-expanded": "false", "aria-label": "Toggle Left Bar" },
-                    react_1.default.createElement("span", { className: "navbar-toggler-icon" }))),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("span", { className: "text-white" }, " open tabs here")),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement("span", { className: "navbar-text", style: { marginRight: 8, fontSize: "12pt" } },
-                    react_1.default.createElement("span", { style: { display: 'inline-block' } },
-                        Boolean(connectionsSyncing.length) && [
-                            connectionsSyncing.length + " ",
-                            react_1.default.createElement("i", { key: "1", className: "bi bi-arrow-repeat" }),
-                            react_1.default.createElement("span", { key: "2" }, "\u00A0\u00A0\u00A0")
-                        ],
-                        connections.length,
-                        " ",
-                        react_1.default.createElement("i", { className: "bi bi-arrow-down-up" }))),
-                react_1.default.createElement("button", { type: "button", className: "btn btn-dark position-relative", "data-bs-toggle": "offcanvas", "data-bs-target": "#rightBar", "aria-controls": "rightBar", "aria-expanded": "false", "aria-label": "Toggle Right Bar", 
-                    // TODO take this out once we are ready to show content in the right bar
-                    hidden: true },
-                    react_1.default.createElement("i", { className: `bi bi-bell${unreadNotificationCount > 0 ? '-fill' : ''}` }),
-                    react_1.default.createElement("span", { className: "translate-middle badge rounded-pill bg-danger", style: {
-                            display: unreadNotificationCount < 1 ? 'none' : '',
-                            position: 'absolute',
-                            top: unreadNotificationCount > 9 ? 4 : 7,
-                            right: unreadNotificationCount > 9 ? -27 : -16
-                        } },
-                        unreadNotificationCount > 9 ? "9+" : unreadNotificationCount,
-                        react_1.default.createElement("span", { className: "visually-hidden" }, "unread notifications")))))));
-};
-exports.TopBar = TopBar;

package/dist/components/typeahead/mentions-plugin.d.ts

@@ -1,7 +0,0 @@
-import { Observable } from "@peers-app/peers-sdk";
-import { IMentionConfig } from '../../mention-configs';
-export declare const MENTIONS_MAX_RESULTS = 10;
-export declare function MentionsPlugin(props: {
-    mentionConfigs?: IMentionConfig[];
-    mentionsOpen?: Observable<boolean>;
-}): JSX.Element | null;