@peers-app/peers-ui 0.14.0 → 0.15.0

package/dist/components/typeahead/mentions-plugin.js

@@ -1,203 +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.MENTIONS_MAX_RESULTS = void 0;
-exports.MentionsPlugin = MentionsPlugin;
-const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
-const LexicalTypeaheadMenuPlugin_1 = require("@lexical/react/LexicalTypeaheadMenuPlugin");
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const lexical_1 = require("lexical");
-const lodash_1 = require("lodash");
-const React = __importStar(require("react"));
-const react_1 = require("react");
-const ReactDOM = __importStar(require("react-dom"));
-const mention_node_1 = require("../markdown-editor/mention-node");
-// At most, 5 suggestions are shown in the popup.
-const SUGGESTION_LIST_LENGTH_LIMIT = 10;
-exports.MENTIONS_MAX_RESULTS = 10;
-function useMentionLookupService(mentionString, mentionConfigs = []) {
-    const [results, setResults] = (0, react_1.useState)([]);
-    (0, react_1.useEffect)(() => {
-        if (!mentionString) {
-            setResults([]);
-            return;
-        }
-        (async () => {
-            mentionString = mentionString || '';
-            const prefix = mentionString[0];
-            // TODO simplify how users can include completed tasks in their search
-            let searchCompletedTasks = prefix === '$' && mentionString.startsWith('done');
-            if (searchCompletedTasks) {
-                mentionString = mentionString.slice(4);
-            }
-            let kind = '';
-            if (mentionString.includes(':')) {
-                const parts = mentionString.split(':');
-                kind = parts[0];
-                mentionString = parts[1] || '';
-            }
-            const config = mentionConfigs?.find(c => c.kind === kind);
-            if (config) {
-                let results = await config.query(mentionString);
-                results = results.map(r => ({ ...r, clickable: false }));
-                setResults(results);
-                return;
-            }
-            const results = await Promise.all(mentionConfigs?.map(c => c.query(mentionString || '')));
-            let allResults = results.flat();
-            allResults = (0, lodash_1.uniqBy)(allResults, 'id');
-            let filteredResults = allResults;
-            if (prefix === '@') {
-                filteredResults = filteredResults.filter((result) => result.kind === 'user' || result.kind === 'assistant');
-            }
-            else {
-                filteredResults = filteredResults.filter((result) => result.kind !== 'user' && result.kind !== 'assistant');
-            }
-            if (kind) {
-                filteredResults = allResults.filter((result) => result.kind.toLowerCase() === kind.toLowerCase());
-            }
-            else if (!filteredResults.length) {
-                filteredResults = allResults;
-            }
-            filteredResults = (0, lodash_1.sortBy)(filteredResults, r => {
-                return r.name.toLowerCase().indexOf((mentionString).toLowerCase());
-            });
-            filteredResults = filteredResults.slice(0, SUGGESTION_LIST_LENGTH_LIMIT);
-            filteredResults = filteredResults.map(r => ({ ...r, clickable: false }));
-            setResults(filteredResults);
-        })();
-    }, [mentionString]);
-    return results;
-}
-class MentionTypeaheadOption extends LexicalTypeaheadMenuPlugin_1.MenuOption {
-    data;
-    name;
-    picture;
-    id;
-    userId;
-    constructor(data, picture) {
-        super(data.name);
-        this.data = data;
-        this.name = data.name;
-        this.picture = picture;
-        this.id = data.id;
-        // if (data.kind === 'assistant') {
-        //   this.userId = data.userId;
-        // }
-    }
-}
-function MentionsTypeaheadMenuItem({ index, isSelected, onClick, onMouseEnter, option, }) {
-    let className = 'item';
-    if (isSelected) {
-        className += ' selected';
-    }
-    return (React.createElement("li", { key: option.key, tabIndex: -1, className: className, ref: option.setRefElement, role: "option", "aria-selected": isSelected, id: 'typeahead-item-' + index, onMouseEnter: onMouseEnter, onClick: onClick, "data-kind": option.data.kind, "data-id": option.id, "data-user-id": option.userId || undefined },
-        option.picture,
-        React.createElement("span", { className: "text" }, option.name)));
-}
-function MentionsPlugin(props) {
-    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
-    const [queryString, setQueryString] = (0, react_1.useState)(null);
-    const results = useMentionLookupService(queryString, props.mentionConfigs);
-    const [_mentionsOpen] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(false));
-    if (props.mentionsOpen) {
-        const finalMentionsOpen = _mentionsOpen() && results.length > 0;
-        if (props.mentionsOpen() !== finalMentionsOpen) {
-            props.mentionsOpen(finalMentionsOpen);
-        }
-    }
-    const checkForSlashTriggerMatch = (0, LexicalTypeaheadMenuPlugin_1.useBasicTypeaheadTriggerMatch)('/', {
-        minLength: 0,
-    });
-    const options = (0, react_1.useMemo)(() => results
-        .map((result) => {
-        let picture = React.createElement("i", { className: "bi bi-question pe-1" });
-        const config = props.mentionConfigs?.find(c => c.kind === result.kind);
-        if (config) {
-            if (config.picture) {
-                picture = config.picture(result);
-            }
-            else {
-                picture = React.createElement("i", { className: config.iconClass + ' pe-1' });
-            }
-        }
-        else {
-            picture = React.createElement("i", { className: 'bi bi-question pe-1' });
-        }
-        return new MentionTypeaheadOption(result, picture);
-    })
-        .slice(0, SUGGESTION_LIST_LENGTH_LIMIT), [results]);
-    const onSelectOption = (0, react_1.useCallback)((selectedOption, nodeToReplace, closeMenu) => {
-        editor.update(() => {
-            const mentionNode = (0, mention_node_1.$createMentionNode)(selectedOption.data);
-            if (nodeToReplace) {
-                nodeToReplace.replace(mentionNode);
-            }
-            mentionNode.selectNext(); // Move cursor to the position after the mention
-            const selection = (0, lexical_1.$getSelection)();
-            if (selection !== null) {
-                selection.insertText(' '); // Insert a space after the mention
-            }
-            closeMenu();
-        });
-    }, [editor]);
-    const checkForMentionMatch = (0, react_1.useCallback)((text) => {
-        const textTrimmed = text.trimStart();
-        return {
-            leadOffset: text.length - textTrimmed.length,
-            matchingString: text.trim(),
-            replaceableString: text.trim(),
-        };
-    }, [checkForSlashTriggerMatch, editor]);
-    return (React.createElement(LexicalTypeaheadMenuPlugin_1.LexicalTypeaheadMenuPlugin, { onQueryChange: setQueryString, onSelectOption: onSelectOption, triggerFn: checkForMentionMatch, options: options, onOpen: () => _mentionsOpen(true), onClose: () => _mentionsOpen(false), menuRenderFn: (anchorElementRef, { selectedIndex, selectOptionAndCleanUp, setHighlightedIndex }) => {
-            if (!(anchorElementRef.current && results.length)) {
-                return null;
-            }
-            // distance from the top of the viewport to the top of the anchor element
-            const anchorTop = anchorElementRef.current.getBoundingClientRect().top;
-            const viewportHeight = window.innerHeight;
-            let className = 'typeahead-popover mentions-menu';
-            if (anchorTop > (viewportHeight / 2)) {
-                className += ' mentions-menu-popup';
-            }
-            return ReactDOM.createPortal(React.createElement("div", { className: className },
-                React.createElement("ul", null, options.map((option, i) => (React.createElement(MentionsTypeaheadMenuItem, { index: i, isSelected: selectedIndex === i, onClick: () => {
-                        setHighlightedIndex(i);
-                        selectOptionAndCleanUp(option);
-                    }, onMouseEnter: () => {
-                        setHighlightedIndex(i);
-                    }, key: option.key, option: option }))))), anchorElementRef.current);
-        } }));
-}

package/dist/components/typeahead/typeahead-editor.d.ts

@@ -1,15 +0,0 @@
-import { Observable } from "@peers-app/peers-sdk";
-import React from 'react';
-import { IMentionConfig } from '../../mention-configs';
-export interface IEditorEffects {
-    onKeyDown?: (e: React.KeyboardEvent) => (boolean | void);
-    focus?: () => void;
-}
-export interface ITypeaheadEditorProps {
-    value: Observable<string>;
-    effects?: IEditorEffects;
-    autoFocus?: boolean;
-    maxHeight?: string | number;
-    mentionConfigs?: IMentionConfig[];
-}
-export declare function TypeaheadEditor(props: ITypeaheadEditorProps): React.JSX.Element;

package/dist/components/typeahead/typeahead-editor.js

@@ -1,134 +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.TypeaheadEditor = TypeaheadEditor;
-const code_1 = require("@lexical/code");
-const link_1 = require("@lexical/link");
-const list_1 = require("@lexical/list");
-const LexicalAutoFocusPlugin_1 = require("@lexical/react/LexicalAutoFocusPlugin");
-const LexicalComposer_1 = require("@lexical/react/LexicalComposer");
-const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
-const LexicalContentEditable_1 = require("@lexical/react/LexicalContentEditable");
-const LexicalErrorBoundary_1 = require("@lexical/react/LexicalErrorBoundary");
-const LexicalHistoryPlugin_1 = require("@lexical/react/LexicalHistoryPlugin");
-const LexicalRichTextPlugin_1 = require("@lexical/react/LexicalRichTextPlugin");
-const rich_text_1 = require("@lexical/rich-text");
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const lexical_1 = require("lexical");
-const react_1 = __importStar(require("react"));
-const markdown_plugin_1 = require("../markdown-editor/markdown-plugin");
-const mention_node_1 = require("../markdown-editor/mention-node");
-const theme_1 = __importDefault(require("../markdown-editor/theme"));
-const mentions_plugin_1 = require("./mentions-plugin");
-const mention_configs_1 = require("../../mention-configs");
-const editorConfig = {
-    namespace: 'PeersEditor',
-    nodes: [
-        rich_text_1.HeadingNode,
-        rich_text_1.QuoteNode,
-        code_1.CodeNode,
-        list_1.ListNode,
-        list_1.ListItemNode,
-        mention_node_1.MentionNode,
-        link_1.AutoLinkNode,
-        link_1.LinkNode,
-    ],
-    // Handling of errors during update
-    onError(error) {
-        throw error;
-    },
-    // The editor theme
-    theme: theme_1.default,
-};
-function TypeaheadEditor(props) {
-    const { effects } = props;
-    const editorRef = react_1.default.useRef(null);
-    const [mentionsOpen] = (0, react_1.useState)(() => {
-        const obs = (0, peers_sdk_1.observable)(false);
-        return obs;
-    });
-    if (effects) {
-        effects.focus = () => {
-            if (editorRef.current?.children[0]) {
-                const div = editorRef.current.children[0];
-                setTimeout(() => {
-                    div.focus();
-                    // Set the selection to the end of the div content
-                    const range = document.createRange();
-                    range.selectNodeContents(div);
-                    range.collapse(false);
-                    const selection = window.getSelection();
-                    if (selection) {
-                        selection.removeAllRanges();
-                        selection.addRange(range);
-                    }
-                }, 10);
-            }
-        };
-    }
-    const _mentionConfigs = props.mentionConfigs ?? mention_configs_1.mentionConfigs;
-    return (react_1.default.createElement("div", { className: "border rounded border-dark-subtle" },
-        react_1.default.createElement(LexicalComposer_1.LexicalComposer, { initialConfig: { ...editorConfig } },
-            react_1.default.createElement("div", { className: "editor-container" },
-                react_1.default.createElement("div", { className: "editor-inner", ref: editorRef, style: { maxHeight: props.maxHeight ?? 30, overflowY: 'hidden' } },
-                    react_1.default.createElement(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: react_1.default.createElement(LexicalContentEditable_1.ContentEditable, { className: "editor-input p-1" }), 
-                        // placeholder={(isEditable) => !isEditable ? <div className="text-muted">Type here...</div> : null}
-                        ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }),
-                    react_1.default.createElement(LexicalHistoryPlugin_1.HistoryPlugin, null),
-                    props.autoFocus && react_1.default.createElement(LexicalAutoFocusPlugin_1.AutoFocusPlugin, { defaultSelection: 'rootEnd' }),
-                    _mentionConfigs.length > 0 && (react_1.default.createElement(mentions_plugin_1.MentionsPlugin, { mentionConfigs: _mentionConfigs, mentionsOpen: mentionsOpen })),
-                    react_1.default.createElement(markdown_plugin_1.MarkdownPlugin, { markdownObs: props.value }),
-                    react_1.default.createElement(OnKeyDownPlugin, { effects: props.effects, mentionsOpen: mentionsOpen }))))));
-}
-const OnKeyDownPlugin = (props) => {
-    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
-    (0, react_1.useEffect)(() => {
-        const removeListener = editor.registerCommand(lexical_1.KEY_DOWN_COMMAND, (event) => {
-            if (props.mentionsOpen()) {
-                return false;
-            }
-            if (props.effects?.onKeyDown) {
-                const result = props.effects.onKeyDown(event);
-                return !!result;
-            }
-            return false;
-        }, lexical_1.COMMAND_PRIORITY_LOW);
-        return removeListener;
-    }, [editor]);
-    return null;
-};

package/dist/components/typeahead/typeahead.d.ts

@@ -1,12 +0,0 @@
-import { Observable } from "@peers-app/peers-sdk";
-import React from 'react';
-import { IMentionConfig } from '../../mention-configs';
-interface IProps<T> {
-    value: Observable<string> | Observable<string | undefined>;
-    textValue?: Observable<string>;
-    mentionConfigs: IMentionConfig[];
-    autoFocus?: boolean;
-    onSubmit?: (value: string, textValue: string) => void;
-}
-export declare function Typeahead<T>(props: IProps<T>): React.JSX.Element;
-export {};

package/dist/components/typeahead/typeahead.js

@@ -1,94 +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.Typeahead = Typeahead;
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = __importStar(require("react"));
-const hooks_1 = require("../../hooks");
-const typeahead_editor_1 = require("./typeahead-editor");
-function Typeahead(props) {
-    const { value: sourceValue } = props;
-    // const typeaheadValue = useObservableState('', true);
-    const [typeaheadValue] = (0, react_1.useState)(() => {
-        if (props.textValue) {
-            return props.textValue;
-        }
-        else {
-            return (0, peers_sdk_1.observable)('');
-        }
-    });
-    (0, hooks_1.useObservable)(typeaheadValue);
-    const existingMention = (0, hooks_1.usePromise)(async () => {
-        const id = sourceValue();
-        if (!id)
-            return true;
-        for (const config of props.mentionConfigs) {
-            const refValue = await config.getById(id);
-            if (refValue) {
-                typeaheadValue((0, peers_sdk_1.formatMention)({ kind: config.kind, id, name: refValue.name }) + ' ');
-                return true;
-            }
-        }
-        return true;
-    });
-    (0, hooks_1.useSubscription)(typeaheadValue, () => {
-        const mentions = (0, peers_sdk_1.getAllMentions)(typeaheadValue());
-        const resolvedMention = mentions.find(m => m.id !== sourceValue()) || mentions[0];
-        const resolvedId = resolvedMention?.id;
-        if (resolvedId !== sourceValue() || mentions.length > 1) {
-            sourceValue(resolvedId);
-            if (resolvedId) {
-                const newTypeaheadValue = (0, peers_sdk_1.formatMention)(resolvedMention) + ' ';
-                typeaheadValue(newTypeaheadValue);
-            }
-        }
-    }, true);
-    if (!existingMention) {
-        return react_1.default.createElement("div", null, "...");
-    }
-    return (react_1.default.createElement(typeahead_editor_1.TypeaheadEditor, { value: typeaheadValue, mentionConfigs: props.mentionConfigs, autoFocus: props.autoFocus, 
-        // these settings configure it for a single line input
-        effects: {
-            onKeyDown(e) {
-                if (e.key === 'Enter') {
-                    e.preventDefault();
-                    if (props.onSubmit) {
-                        props.onSubmit(sourceValue() ?? '', typeaheadValue());
-                    }
-                    return true;
-                }
-            },
-        } }));
-}

package/dist/screens/profile.d.ts

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

package/dist/screens/profile.js

@@ -1,76 +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.Profile = void 0;
-const peers_sdk_1 = require("@peers-app/peers-sdk");
-const react_1 = __importDefault(require("react"));
-const input_1 = require("../components/input");
-const save_button_1 = require("../components/save-button");
-const tooltip_1 = require("../components/tooltip");
-const globals = __importStar(require("../globals"));
-const hooks_1 = require("../hooks");
-const Profile = () => {
-    const me = (0, hooks_1.usePromise)(async () => {
-        const userContext = await (0, peers_sdk_1.getUserContext)();
-        return (0, peers_sdk_1.Users)(userContext.userDataContext).initDoc(globals.me);
-    });
-    if (!me) {
-        return;
-    }
-    return (react_1.default.createElement("div", { className: "container mt-4" },
-        react_1.default.createElement("div", { className: "d-flex mb-2" },
-            react_1.default.createElement("div", { className: "flex-grow-1" },
-                react_1.default.createElement("h4", null, "Profile")),
-            react_1.default.createElement("div", null,
-                react_1.default.createElement(save_button_1.SaveButton, { doc: me, noBuiltInActions: true }))),
-        react_1.default.createElement("small", null, "Name:"),
-        react_1.default.createElement(input_1.Input, { value: me.qs.name, className: "form-control mb-3" }),
-        react_1.default.createElement("small", null, "User Id:"),
-        react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies you to all other users." }),
-        react_1.default.createElement(input_1.Input, { value: me.userId, className: "form-control mb-3", disabled: true }),
-        react_1.default.createElement("small", null, "Device Id:"),
-        react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "This uniquely identifies this device on Peers networks." }),
-        react_1.default.createElement(input_1.Input, { value: (0, peers_sdk_1.thisDeviceId)(), className: "form-control mb-3", disabled: true }),
-        react_1.default.createElement("small", null, "Public Key:"),
-        react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "This is your public key that other users will use to verify your signatures and thereby confirm a message was actually from you." }),
-        react_1.default.createElement(input_1.Input, { value: me.publicKey, className: "form-control mb-3", disabled: true }),
-        react_1.default.createElement("small", null, "Public Box Key:"),
-        react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: "This is the public key that other users can use to encrypt data so that only you can open it with your secret key." }),
-        react_1.default.createElement(input_1.Input, { value: me.publicBoxKey, className: "form-control mb-3", disabled: true })));
-};
-exports.Profile = Profile;

package/src/components/input-datetime.tsx

@@ -1,41 +0,0 @@
-import { Observable } from "@peers-app/peers-sdk";
-import React from "react";
-import { useObservable } from "../hooks";
-
-
-interface IProps extends React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> {
-  datetime: Observable<Date | undefined> | Date | undefined
-}
-export const InputDatetime = (props: IProps) => {
-
-  const [datetime, setDatetime] = useObservable<Date | undefined>(props.datetime);
-
-  const inputProps = { ...props };
-  // @ts-ignore
-  delete inputProps.datetime;
-  
-  return (
-    <input
-      {...inputProps}
-      type='datetime-local'
-      value={(() => {
-        if (!datetime) return;
-        if (String(datetime) === 'Invalid Date') return;
-        return datetime.toISOString?.()?.substring(0, 16);
-      })()}
-      onChange={e => {
-        let value = e.target.value;
-        if (value) {
-          value += (new Date()).toISOString().substring(value.length);
-          const dt = new Date(value);
-          if (String(dt) !== 'Invalid Date') {
-            setDatetime(new Date(value));
-            return;
-          }
-        } 
-        setDatetime(undefined);
-        if (props.onChange) props.onChange(e);
-      }}
-    />
-  )
-}

package/src/components/lazy-sortable-list.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-import { LazyList } from './lazy-list';
-import { ISortable, SortableList } from './sortable-list';
-
-interface IProps<T> {
-  loadMore: (existingItems: T[]) => Promise<T[]>
-  filterItems?: (existingItems: T[]) => T[]
-  renderItem: (props: { item: T, listId: string, sortHandle: string }) => React.ReactNode,
-  listsGroup?: string
-  onAdd?: ((itemId: string, sortOrder: number) => any),
-  onUpdate?: ((args: { items: T[], ixMoved: number[] }) => any),
-  hidden?: boolean,
-  containerProps?: Record<string, any>
-  dragHandleClassName?: string
-  sortDirection?: 'asc' | 'desc'
-  minHeight?: string | number
-  paddingBottom?: string | number
-  endOfList?: React.ReactNode
-  loadingIndicator?: React.ReactNode
-  scrollThreshold?: string | number
-  lazyListStyle?: React.CSSProperties
-}
-
-export function LazySortableList<T extends ISortable>(props: IProps<T>) {
-
-  return (
-    <LazyList
-      lazyListStyle={props.lazyListStyle}
-      loadMore={props.loadMore}
-      filterItems={props.filterItems}
-      endOfList={props.endOfList}
-      loadingIndicator={props.loadingIndicator}
-      scrollThreshold={props.scrollThreshold}
-      renderItems={items => (
-        <SortableList
-          items={items}
-          sortDirection={props.sortDirection}
-          renderItem={props.renderItem}
-          listsGroup={props.listsGroup}
-          onAdd={props.onAdd}
-          onUpdate={props.onUpdate}
-          hidden={props.hidden}
-          containerProps={props.containerProps}
-          dragHandleClassName={props.dragHandleClassName}
-          minHeight={props.minHeight}
-          paddingBottom={props.paddingBottom}
-        />
-      )}
-    />
-  )
-}