@peers-app/peers-ui 0.0.14

package/dist/components/io-schema.js

@@ -0,0 +1,163 @@
+"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.ComplexInputSchema = exports.SimpleInputSchema = exports.IOSchemaEditor = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const hooks_1 = require("../hooks");
+const editor_inline_1 = require("./markdown-editor/editor-inline");
+const IOSchemaEditor = (props) => {
+    const { ioSchema, simpleValueName } = props;
+    if (!ioSchema().type) {
+        ioSchema().type = peers_sdk_1.IOSchemaType.none;
+    }
+    if (!ioSchema().fields) {
+        ioSchema().fields = [];
+    }
+    const q = (0, hooks_1.useObservableState)(0);
+    (0, react_1.useEffect)(() => {
+        let schemaType = ioSchema().type;
+        const sub = ioSchema.subscribe(() => {
+            if (schemaType !== ioSchema().type) {
+                q(q() + 1);
+            }
+        });
+        return () => sub.dispose();
+    }, [ioSchema, q()]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("select", { className: "form-select form-select-sm", style: { width: "150px", display: "inline-block" }, defaultValue: ioSchema().type, onChange: evt => {
+                ioSchema({
+                    ...ioSchema(),
+                    type: evt.target.value,
+                });
+            } },
+            react_1.default.createElement("option", { value: "none" }, "None"),
+            react_1.default.createElement("option", { value: "simple" }, "Simple Value"),
+            react_1.default.createElement("option", { value: "complex" }, "Complex Value")),
+        react_1.default.createElement("div", { className: "ms-4" },
+            ioSchema().type === peers_sdk_1.IOSchemaType.simple && react_1.default.createElement(exports.SimpleInputSchema, { ioSchema: ioSchema, simpleValueName: simpleValueName }),
+            ioSchema().type === peers_sdk_1.IOSchemaType.complex && react_1.default.createElement(exports.ComplexInputSchema, { ioSchema: ioSchema }))));
+};
+exports.IOSchemaEditor = IOSchemaEditor;
+const SimpleInputSchema = (props) => {
+    const { ioSchema, simpleValueName } = props;
+    (0, hooks_1.useObservable)(ioSchema);
+    const [ioValueType] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(ioSchema()?.fields?.[0]?.type || peers_sdk_1.FieldType.string));
+    const [ioValueDesc] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(ioSchema()?.fields?.[0]?.description || ""));
+    const setSimpleInputSchema = () => {
+        const _ioSchema = { ...ioSchema() };
+        _ioSchema.type = peers_sdk_1.IOSchemaType.simple;
+        _ioSchema.fields = _ioSchema.fields || [];
+        _ioSchema.fields[0] = {
+            name: simpleValueName,
+            description: ioValueDesc(),
+            type: ioValueType(),
+        };
+        ioSchema(_ioSchema);
+    };
+    (0, react_1.useEffect)(() => {
+        const sub = ioValueType.subscribe(() => {
+            setSimpleInputSchema();
+        });
+        const sub2 = ioValueDesc.subscribe(() => {
+            setSimpleInputSchema();
+        });
+        return () => {
+            sub.dispose();
+            sub2.dispose();
+        };
+    }, [ioSchema]);
+    const simpleValueTypes = Object.values(peers_sdk_1.FieldType);
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("small", null, "Value Type:"),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("select", { className: "form-select form-select-sm mt-2 mb-2", defaultValue: ioValueType(), onChange: evt => ioValueType(evt.target.value), style: { width: "150px", display: "inline-block" } }, simpleValueTypes.map((type) => react_1.default.createElement("option", { key: type, value: type }, type))),
+        react_1.default.createElement("br", null),
+        react_1.default.createElement("small", null, "Value Description:"),
+        react_1.default.createElement(editor_inline_1.MarkdownEditorInline, { value: ioValueDesc, hideToolbar: true })));
+};
+exports.SimpleInputSchema = SimpleInputSchema;
+const ComplexInputSchema = (props) => {
+    const { ioSchema } = props;
+    (0, hooks_1.useObservable)(ioSchema);
+    const [[fields, newRow], __setState] = (0, react_1.useState)(() => {
+        const _fields = ioSchema().fields || [];
+        // @ts-ignore
+        _fields.forEach(f => f.fakeId = (0, peers_sdk_1.newid)());
+        const inMemoryTable = (0, peers_sdk_1.arrayAsTable)(_fields, {
+            primaryKeyName: "fakeId",
+            fields: [
+                { name: "fakeId", type: peers_sdk_1.FieldType.string, description: '', defaultValue: () => (0, peers_sdk_1.newid)() },
+                { name: "name", type: peers_sdk_1.FieldType.string, description: '' },
+                { name: "type", type: peers_sdk_1.FieldType.string, description: '' },
+                { name: "description", type: peers_sdk_1.FieldType.string, description: '' },
+                { name: "default", type: peers_sdk_1.FieldType.string, description: '' },
+                { name: "optional", type: peers_sdk_1.FieldType.string, description: '' },
+                { name: "isArray", type: peers_sdk_1.FieldType.string, description: '' },
+            ]
+        });
+        const _fieldsDocs = _fields.map(f => (0, peers_sdk_1.initDoc)(f, inMemoryTable));
+        const _fieldsDocsObs = (0, peers_sdk_1.observable)(_fieldsDocs);
+        const newRow = () => {
+            const newField = (0, peers_sdk_1.initDoc)({
+                // @ts-ignore
+                fakeId: (0, peers_sdk_1.newid)(),
+                name: "",
+                description: "",
+                type: peers_sdk_1.FieldType.string,
+                optional: false,
+                default: "",
+                isArray: false,
+            }, inMemoryTable);
+            _fieldsDocsObs([..._fieldsDocsObs(), newField]);
+            return newField;
+        };
+        return [_fieldsDocsObs, newRow];
+    });
+    (0, hooks_1.useObservable)(fields);
+    function updateSchemaFields() {
+        ioSchema({
+            ...ioSchema(),
+            type: peers_sdk_1.IOSchemaType.complex,
+            fields: fields().map(f => f.toJS()),
+        });
+    }
+    (0, react_1.useEffect)(() => {
+        const subs = fields().map(f => f.q.subscribe(() => updateSchemaFields()));
+        return () => subs.forEach(s => s.dispose());
+    }, [fields()]);
+    return (react_1.default.createElement("div", { style: { fontSize: '9pt' }, className: "mt-2" }, "TODO - Move Datagrid over from peers-kore"));
+};
+exports.ComplexInputSchema = ComplexInputSchema;

package/dist/components/lazy-list.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+interface IProps<T> {
+    loadMore: (existingItems: T[]) => Promise<T[]>;
+    renderItems: (items: T[]) => React.ReactNode;
+    filterItems?: (existingItems: T[]) => T[];
+    endOfList?: React.ReactNode;
+    loadingIndicator?: React.ReactNode;
+    scrollThreshold?: number | string;
+    lazyListStyle?: React.CSSProperties;
+    resetTrigger?: any;
+}
+export declare function LazyList<T>(props: IProps<T>): React.JSX.Element;
+export {};

package/dist/components/lazy-list.js

@@ -0,0 +1,91 @@
+"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.LazyList = LazyList;
+const react_1 = __importStar(require("react"));
+const react_infinite_scroll_component_1 = __importDefault(require("react-infinite-scroll-component"));
+const hooks_1 = require("../hooks");
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+function LazyList(props) {
+    const [itemsObsAry] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)([]));
+    const [items] = (0, hooks_1.useObservable)(itemsObsAry);
+    const [allLoaded, setAllLoaded] = (0, react_1.useState)(false);
+    const [loading] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(false));
+    (0, hooks_1.useObservable)(loading);
+    const isLoadingSync = (0, react_1.useRef)(false); // Synchronous loading flag
+    async function loadMore() {
+        if (loading() || isLoadingSync.current) {
+            return;
+        }
+        isLoadingSync.current = true;
+        loading(true);
+        const moreItems = await props.loadMore(items);
+        if (!moreItems.length) {
+            setAllLoaded(true);
+        }
+        else {
+            itemsObsAry([...itemsObsAry(), ...moreItems]);
+        }
+        loading(false);
+        isLoadingSync.current = false;
+    }
+    let renderItems = items;
+    if (props.filterItems) {
+        renderItems = props.filterItems(items);
+    }
+    (0, react_1.useEffect)(() => {
+        if (renderItems.length < 50 && !allLoaded && !loading() && !isLoadingSync.current) {
+            loadMore();
+        }
+    }, [renderItems.length, allLoaded, loading()]);
+    (0, react_1.useEffect)(() => {
+        itemsObsAry([]);
+        setAllLoaded(false);
+        isLoadingSync.current = false; // Reset sync loading flag when resetting
+    }, [props.resetTrigger]);
+    // console.log('existing tasks', items.length);
+    // console.log('rendering tasks', renderItems.length);
+    return (react_1.default.createElement("div", { id: "scrollableDiv", style: props.lazyListStyle },
+        react_1.default.createElement(react_infinite_scroll_component_1.default, { dataLength: renderItems.length, next: loadMore, hasMore: !allLoaded, scrollThreshold: props.scrollThreshold, loader: props.loadingIndicator ??
+                react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("div", { className: "d-flex justify-content-center" },
+                        react_1.default.createElement("div", null, "loading..."))), endMessage: props.endOfList ??
+                react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("div", { className: "d-flex justify-content-center" },
+                        react_1.default.createElement("i", null, "end of list"))) }, props.renderItems(renderItems))));
+}

package/dist/components/lazy-sortable-list.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ISortable } 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 declare function LazySortableList<T extends ISortable>(props: IProps<T>): React.JSX.Element;
+export {};

package/dist/components/lazy-sortable-list.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LazySortableList = LazySortableList;
+const react_1 = __importDefault(require("react"));
+const lazy_list_1 = require("./lazy-list");
+const sortable_list_1 = require("./sortable-list");
+function LazySortableList(props) {
+    return (react_1.default.createElement(lazy_list_1.LazyList, { lazyListStyle: props.lazyListStyle, loadMore: props.loadMore, filterItems: props.filterItems, endOfList: props.endOfList, loadingIndicator: props.loadingIndicator, scrollThreshold: props.scrollThreshold, renderItems: items => (react_1.default.createElement(sortable_list_1.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 })) }));
+}

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

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

package/dist/components/left-bar.js

@@ -0,0 +1,130 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LeftBarContent = exports.LeftBar = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importDefault(require("react"));
+const globals_1 = require("../globals");
+const hooks_1 = require("../hooks");
+const off_canvas_1 = require("./off-canvas");
+// import { useObservable } from 'peers-ui';
+const offCanvasEffects = { hide: () => { } };
+const LeftBar = () => {
+    const [_isDesktop] = (0, hooks_1.useObservable)(globals_1.isDesktop);
+    // const [usersAndGroups, setUsersAndGroups] = useState<(IUser | IGroup)[]>([]);
+    if (_isDesktop) {
+        return (react_1.default.createElement("div", { className: 'left-bar-desktop', style: { position: 'fixed', top: 0, left: 0 } },
+            react_1.default.createElement(exports.LeftBarContent, null)));
+    }
+    else {
+        return (react_1.default.createElement(off_canvas_1.OffCanvas, { id: "leftBar", position: "left", keepOpen: _isDesktop, effects: offCanvasEffects },
+            react_1.default.createElement(exports.LeftBarContent, null)));
+    }
+};
+exports.LeftBar = LeftBar;
+const LeftBarContent = () => {
+    const [contentPath] = (0, hooks_1.useObservable)(globals_1.mainContentPath);
+    const [_isDesktop] = (0, hooks_1.useObservable)(globals_1.isDesktop);
+    const packagesWithNavItems = (0, hooks_1.usePromise)(async () => {
+        const packages = await (0, peers_sdk_1.Packages)().list();
+        return packages.filter(pkg => pkg.appNavs?.length);
+    }, []);
+    const knowledgeSublinks = [
+        { text: "Frames", icon: "bi bi-window-dock", path: "knowledge-frames", left: 15 },
+        { text: "Predicates", icon: "bi bi-node-plus-fill", left: 15 },
+        { text: "Graph", icon: "bi bi-diagram-3-fill", left: 15 },
+    ];
+    const knowledgeSublinkActive = contentPath.startsWith('knowledge-') || knowledgeSublinks.find(ks => contentPath.startsWith(ks.path || ks.text.toLowerCase()));
+    const containerClassName = `d-flex flex-column flex-shrink-0 p-2 text-white ` + (_isDesktop ? 'bg-dark-subtle' : 'bg-dark');
+    const content = (react_1.default.createElement("div", { className: containerClassName, style: { width: "300px", height: "100vh" } },
+        react_1.default.createElement("div", { className: "clearfix" },
+            react_1.default.createElement("div", { className: "dropdown", style: { display: 'inline-block', width: '200px' } },
+                react_1.default.createElement("a", { id: "dropdownUser1", "data-bs-toggle": "dropdown", "aria-expanded": "false", className: "d-flex align-items-center text-white text-decoration-none", href: "#", tabIndex: -1 },
+                    react_1.default.createElement("span", { className: "fs-4" }, "Peers"),
+                    "\u00A0\u00A0\u00A0",
+                    react_1.default.createElement("i", { className: "bi bi-three-dots-vertical", style: { fontSize: '12pt' } })),
+                react_1.default.createElement("ul", { className: "dropdown-menu dropdown-menu-end dropdown-menu-dark text-small shadow", style: { border: '1px grey solid' }, "aria-labelledby": "dropdownUser1" },
+                    react_1.default.createElement("li", null,
+                        react_1.default.createElement("a", { className: "dropdown-item", href: "#profile" }, "Profile")),
+                    react_1.default.createElement("li", null,
+                        react_1.default.createElement("a", { className: "dropdown-item", href: "#settings" }, "Settings"))))),
+        react_1.default.createElement("hr", { className: 'p-0' }),
+        react_1.default.createElement(MenuSection, { menuItems: [
+                // { text: "Shell", icon: "bi bi-robot" },
+                // { text: "Threads", icon: "bi bi-terminal", path: "shell" },
+                // { text: "Journal", icon: "bi bi-journal-text" },
+                // { text: "Journal", icon: "bi bi-journal-bookmark" },
+                // { text: "Tasks", icon: "bi bi-list-task" },
+                // { text: "Calendar", icon: "bi bi-calendar-week", link: "calendar" },
+                // { text: "AI Models", icon: "bi bi-cpu" },
+                { text: "Variables", icon: "bi bi-braces" },
+                { text: "Types", icon: "bi bi-code-square", path: "peer-types" },
+                { text: "Assistants", icon: "bi bi-person-fill-gear" },
+                { text: "Tools", icon: "bi bi-tools" },
+                { text: "Workflows", icon: "bi bi-database-fill-gear" },
+                { text: "Events", icon: "bi bi-lightning-charge-fill" },
+                { text: "Packages", icon: "bi bi-box-fill" },
+                // { text: "Notes", icon: "bi bi-collection" },
+            ] }),
+        react_1.default.createElement("hr", null),
+        react_1.default.createElement(MenuSection, { menuItems: [
+                { text: "Threads", icon: "bi bi-cpu", path: "shell" },
+                { text: `Knowledge ${knowledgeSublinkActive ? '' : '+'}`, icon: "bi bi-journal-bookmark-fill", path: "knowledge-values" },
+                ...(knowledgeSublinkActive && knowledgeSublinks || []),
+            ] }),
+        (packagesWithNavItems?.length ?? 0) > 0 && packagesWithNavItems?.map(p => react_1.default.createElement(PackageNavItems, { key: p.packageId, pkg: p }))));
+    return content;
+};
+exports.LeftBarContent = LeftBarContent;
+function MenuItem(props) {
+    (0, hooks_1.useObservable)(globals_1.mainContentPath);
+    const link = props.path ?? props.text.replace(/\s/g, '-').toLowerCase();
+    const href = window.location.href.split('#')[1]?.trim() ?? '';
+    // let isActive = href.endsWith(link);
+    let isActive = href.split('/')[0] === link || href.startsWith(link);
+    if (link === 'shell' && !href) {
+        isActive = true;
+    }
+    return (react_1.default.createElement("div", { className: `nav-link text-white ${isActive && 'active' || ''} ${props.className || ''}`, 
+        // onClick={() => window.location = (window.origin + props.link) as any}
+        style: { cursor: "pointer", marginLeft: `${props.left || 0}px` }, onClick: () => {
+            offCanvasEffects.hide?.();
+            (0, globals_1.mainContentPath)(link);
+        } },
+        react_1.default.createElement("a", { className: `text-white`, style: { textDecoration: 'none' } },
+            react_1.default.createElement("i", { className: props.icon }),
+            "\u00A0",
+            props.text)));
+}
+function MenuSection(props) {
+    return (react_1.default.createElement("div", { className: "nav flex-column nav-pills me-3", id: "v-pills-tab", role: "tablist", "aria-orientation": "vertical" }, props.menuItems.map(mi => react_1.default.createElement(MenuItem, { key: mi.text + mi.path, ...mi }))));
+}
+function PackageNavItems(props) {
+    const pkg = props.pkg;
+    if (!pkg.appNavs || pkg.appNavs.length === 0) {
+        return null;
+    }
+    // if (pkg.appNavs?.length === 1 && pkg.appNavs[0].name === pkg.name) {
+    //   const iconClassName = pkg.appNavs[0].iconClassName || "bi bi-question-square";
+    //   // this package only has one nav item and it's named the same as the package so just show it as a top level item
+    //   return <MenuItem
+    //     text={pkg.name}
+    //     icon={iconClassName}
+    //   />
+    // }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        pkg.appNavs.length !== 1 || pkg.appNavs[0].name !== pkg.name && (react_1.default.createElement("label", { style: { color: 'silver' } }, pkg.name)),
+        react_1.default.createElement(MenuSection, { menuItems: pkg.appNavs.map(ni => {
+                let path = `package-nav/${pkg.packageId}/${(ni.navigationPath ?? ni.name).replace(/[^a-zA-Z0-9]/g, '-').toLowerCase()}`;
+                while (path.includes('//')) {
+                    path = path.replace('//', '/');
+                }
+                return {
+                    text: ni.name,
+                    icon: ni.iconClassName || "bi bi-box-seam",
+                    path,
+                };
+            }) })));
+}

package/dist/components/list-screen.d.ts

@@ -0,0 +1,16 @@
+import { DataFilter, SortBy, Table } from "@peers-app/peers-sdk";
+import React from 'react';
+interface IProps<T extends {
+    [key: string]: any;
+}> {
+    table: Table<T>;
+    newRecord: (text: string) => Promise<T>;
+    getFilter?: (text: string) => DataFilter<T>;
+    sortBy?: SortBy<T>;
+    renderItem: (record: T) => JSX.Element;
+    placeholderName?: string;
+}
+export declare function ListScreen<T extends {
+    [key: string]: any;
+}>(props: IProps<T>): React.JSX.Element;
+export {};

package/dist/components/list-screen.js

@@ -0,0 +1,100 @@
+"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.ListScreen = ListScreen;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const _ = __importStar(require("lodash"));
+const react_1 = __importStar(require("react"));
+const globals_1 = require("../globals");
+const hooks_1 = require("../hooks");
+const input_1 = require("./input");
+const lazy_list_1 = require("./lazy-list");
+const loading_indicator_1 = require("./loading-indicator");
+function ListScreen(props) {
+    const { table, newRecord, sortBy, } = props;
+    const [searchTextObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(''));
+    const [searchText] = (0, hooks_1.useObservable)(searchTextObs);
+    const [cursorObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)());
+    async function newCursor() {
+        const filter = props.getFilter ? props.getFilter(searchText) : null;
+        const cursor = await table.cursor(filter || {}, { sortBy, ...(filter ? {} : { textSearch: searchText }) });
+        cursorObs(cursor);
+        return cursor;
+    }
+    (0, react_1.useEffect)(() => {
+        newCursor();
+    }, [searchText]);
+    const idFieldName = table.metaData.primaryKeyName;
+    async function loadMore(existing) {
+        let moreMatches = [];
+        let cursor = cursorObs() || await newCursor();
+        for await (const nextRecord of cursor) {
+            if (existing.find(e => e[idFieldName] === nextRecord[idFieldName]))
+                continue;
+            moreMatches.push(nextRecord);
+            if (searchText.length && moreMatches.length > 5)
+                break;
+            if (moreMatches.length >= 10)
+                break;
+        }
+        if (moreMatches.length === 0) {
+            cursorObs(undefined);
+        }
+        // if we're using default textSearch, list items with the most words matched in the name first
+        if (!props.getFilter && moreMatches && searchText && table.metaData.fields.find(f => f.name === 'name')) {
+            const words = searchText.toLowerCase().split(' ');
+            moreMatches = _.sortBy(moreMatches, r => words.filter(w => r.name.toLowerCase().includes(w)).length).reverse();
+        }
+        return moreMatches;
+    }
+    async function searchSubmit(evt) {
+        if (evt.key !== "Enter")
+            return;
+        const name = searchText.trim();
+        if (!name)
+            return;
+        searchTextObs('');
+        await newRecord(name);
+    }
+    return (react_1.default.createElement("div", { className: 'container-fluid' },
+        react_1.default.createElement("div", { className: "input-group mt-3 mb-3" },
+            react_1.default.createElement(input_1.Input, { value: searchTextObs, className: "form-control", placeholder: `Search or create ${props.placeholderName || table.metaData.name}`, autoFocus: (0, globals_1.isDesktop)() ? true : false, onKeyUp: evt => searchSubmit(evt) })),
+        react_1.default.createElement("div", { className: "peers-list-container" },
+            react_1.default.createElement(lazy_list_1.LazyList, { resetTrigger: searchText, loadMore: loadMore, scrollThreshold: 0.6, renderItems: (notes) => {
+                    return notes.map(props.renderItem);
+                }, loadingIndicator: react_1.default.createElement("div", { className: "d-flex justify-content-center", style: { height: 200 } },
+                    react_1.default.createElement(loading_indicator_1.LoadingIndicator, null)), endOfList: react_1.default.createElement("div", { className: "d-flex justify-content-center", style: { height: 200 } }) }))));
+}
+;

package/dist/components/loading-indicator.d.ts

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

package/dist/components/loading-indicator.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingIndicator = void 0;
+const react_1 = __importDefault(require("react"));
+const LoadingIndicator = () => {
+    return (react_1.default.createElement("span", { className: "spinner-grow spinner-grow-sm text-secondary m-4", role: "status" },
+        react_1.default.createElement("span", { className: "visually-hidden" }, "Loading...")));
+};
+exports.LoadingIndicator = LoadingIndicator;

package/dist/components/main-content-container.d.ts

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