@peers-app/peers-ui 0.0.14

package/dist/screens/knowledge/knowledge-value-details.js

@@ -0,0 +1,150 @@
+"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.KnowledgeValueDetails = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const input_1 = require("../../components/input");
+const io_schema_values_1 = require("../../components/io-schema-values");
+const loading_indicator_1 = require("../../components/loading-indicator");
+const save_button_1 = require("../../components/save-button");
+const tooltip_1 = require("../../components/tooltip");
+const typeahead_1 = require("../../components/typeahead/typeahead");
+const hooks_1 = require("../../hooks");
+const mention_configs_1 = require("../../mention-configs");
+const tabs_state_1 = require("../../tabs-layout/tabs-state");
+const KnowledgeValueDetails = (props) => {
+    const knowledgeValue = (0, hooks_1.usePromise)(async () => {
+        const knowledgeValue = await (0, peers_sdk_1.KnowledgeValues)().get(props.knowledgeValueId);
+        if (!knowledgeValue) {
+            throw new Error('Knowledge Value not found');
+        }
+        (0, tabs_state_1.updateActiveTabTitle)(knowledgeValue.name || "Knowledge Value");
+        return (0, peers_sdk_1.KnowledgeValues)().initDoc(knowledgeValue);
+    }, undefined, [props.knowledgeValueId]);
+    // Force refresh when value type changes
+    const [forceRefreshOnTypeChange, setForceRefreshOnTypeChange] = (0, react_1.useState)((0, peers_sdk_1.newid)());
+    (0, react_1.useEffect)(() => {
+        if (!knowledgeValue)
+            return;
+        const sub = knowledgeValue.qs.peerTypeId.subscribe(() => {
+            setForceRefreshOnTypeChange((0, peers_sdk_1.newid)());
+        });
+        return () => {
+            sub.dispose();
+        };
+    }, [knowledgeValue]);
+    if (!(knowledgeValue)) {
+        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+    }
+    async function saveChanges() {
+        if (!knowledgeValue)
+            return;
+        const type = await (0, peers_sdk_1.PeerTypes)().get(knowledgeValue.peerTypeId);
+        const existingFields = type?.schema.fields.map(f => f.name) || [];
+        const value = knowledgeValue.value || {};
+        for (const key of Object.keys(value)) {
+            if (!existingFields.includes(key)) {
+                delete value[key];
+            }
+        }
+        knowledgeValue.save();
+    }
+    return (react_1.default.createElement("div", { className: "container-fluid p-1" },
+        react_1.default.createElement(Autosave, { doc: knowledgeValue }),
+        react_1.default.createElement("div", { className: "d-flex" },
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("h4", null,
+                    react_1.default.createElement(KnowledgeValueIcon, { knowledgeValue: knowledgeValue }))),
+            react_1.default.createElement("div", { className: "flex-grow-1" },
+                react_1.default.createElement("h4", null,
+                    react_1.default.createElement(input_1.Input, { className: 'border border-0', style: { width: '100%', outline: 'none', backgroundColor: 'transparent' }, value: knowledgeValue.qs.name, placeholder: "Name" }))),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(save_button_1.SaveButton, { key: knowledgeValue.knowledgeValueId, doc: knowledgeValue, onClick: saveChanges }))),
+        react_1.default.createElement(peers_sdk_1.PeersUI, { key: forceRefreshOnTypeChange, uiEditMode: "edit", uiCategory: "details", props: { knowledgeValue } },
+            react_1.default.createElement(KnowledgeValueDefaultEditor, { knowledgeValue: knowledgeValue }))));
+};
+exports.KnowledgeValueDetails = KnowledgeValueDetails;
+const Autosave = (props) => {
+    let p = setTimeout(() => { }, 0);
+    const oldTypeId = props.doc.peerTypeId;
+    (0, hooks_1.useSubscription)(props.doc.q, () => {
+        clearTimeout(p);
+        p = setTimeout(() => {
+            if (props.doc.q() === 0)
+                return;
+            if (oldTypeId === props.doc.peerTypeId) {
+                props.doc.lastModified = new Date();
+                props.doc.save();
+            }
+            else {
+                console.log('Not auto-saving because type changed which can cause unexpected data loss');
+            }
+        }, 2000);
+    });
+    return null;
+};
+const KnowledgeValueIcon = (props) => {
+    const { knowledgeValue } = props;
+    (0, hooks_1.useObservable)(knowledgeValue.qs.peerTypeId);
+    const valueType = (0, hooks_1.usePromise)(async () => {
+        const valueType = await (0, peers_sdk_1.PeerTypes)().get(knowledgeValue.peerTypeId, { useCache: true });
+        return valueType;
+    }, undefined, [knowledgeValue.peerTypeId]);
+    return (react_1.default.createElement(tooltip_1.Tooltip, { handle: react_1.default.createElement("i", { className: "btn btn-secondary dropdown-toggle me-2 " + (valueType?.iconClass || "bi bi-diagram-2-fill") }, "\u00A0"), positions: ['bottom', 'right', 'left'], genericContent: react_1.default.createElement("div", { style: { minWidth: 200 }, className: "bg-dark p-2" },
+            react_1.default.createElement("small", null, "Knowledge Type:"),
+            react_1.default.createElement(typeahead_1.Typeahead, { value: knowledgeValue.qs.peerTypeId, mentionConfigs: [mention_configs_1.valueTypeMentionConfig] })) }));
+};
+const KnowledgeValueDefaultEditor = (props) => {
+    const { knowledgeValue } = props;
+    const [peerTypeId] = (0, hooks_1.useObservable)(knowledgeValue.qs.peerTypeId);
+    const valueType = (0, hooks_1.usePromise)(async () => {
+        const valueType = await (0, peers_sdk_1.PeerTypes)().get(peerTypeId);
+        if (valueType) {
+            return (0, peers_sdk_1.PeerTypes)().initDoc(valueType);
+        }
+    }, null, [peerTypeId]);
+    if (valueType === undefined) {
+        return react_1.default.createElement("div", null,
+            "Value Type ",
+            peerTypeId,
+            " not found in database");
+    }
+    if (!valueType) {
+        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+    }
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(io_schema_values_1.IOSchemaValues, { q: knowledgeValue.q, ioSchema: valueType.schema, values: knowledgeValue.value || {}, excludeFields: ['name'] })));
+};

package/dist/screens/knowledge/knowledge-value-list-item.d.ts

@@ -0,0 +1,5 @@
+import { IKnowledgeValue } from "@peers-app/peers-sdk";
+import React from 'react';
+export declare const KnowledgeValueListItem: (props: {
+    knowledgeValue: IKnowledgeValue;
+}) => React.JSX.Element;

package/dist/screens/knowledge/knowledge-value-list-item.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KnowledgeValueListItem = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importDefault(require("react"));
+const zod_1 = require("zod");
+const hooks_1 = require("../../hooks");
+const ui_loader_1 = require("../../ui-router/ui-loader");
+const KnowledgeValueListItem = (props) => {
+    const { knowledgeValue } = props;
+    const id = knowledgeValue.knowledgeValueId;
+    const _item = knowledgeValue.value;
+    const description = _item.description || _item.body || _item.content || _item.value;
+    const peerType = (0, hooks_1.usePromise)(async () => {
+        const peerType = await (0, peers_sdk_1.PeerTypes)().get(knowledgeValue.peerTypeId, { useCache: true });
+        return peerType;
+    }, undefined, [knowledgeValue.peerTypeId]);
+    const name = knowledgeValue.name || knowledgeValue.value?.name || knowledgeValue.knowledgeValueId;
+    return (react_1.default.createElement("div", { key: id, className: 'container-fluid pb-3' },
+        react_1.default.createElement("i", { style: { cursor: 'pointer' }, className: peerType?.iconClass || "bi bi-diagram-2-fill" }),
+        "\u00A0\u00A0",
+        react_1.default.createElement("a", { href: `#knowledge-values/${id}` }, name || 'No Name')));
+};
+exports.KnowledgeValueListItem = KnowledgeValueListItem;
+(0, ui_loader_1.registerInternalPeersUI)({
+    peersUIId: '00m5enc2nj313e8neyf35f1gp',
+    component: exports.KnowledgeValueListItem,
+    propsSchema: zod_1.z.object({
+        knowledgeValue: peers_sdk_1.knowledgeValueSchema,
+    }),
+    routes: [{
+            // isMatch: (props) => true,
+            uiCategory: 'list-item',
+            uiEditMode: 'view',
+        }]
+});

package/dist/screens/knowledge/knowledge-value-list.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import './knowledge-value-list-item';
+export declare const KnowledgeValueList: (props: {}) => React.JSX.Element;

package/dist/screens/knowledge/knowledge-value-list.js

@@ -0,0 +1,123 @@
+"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.KnowledgeValueList = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const input_1 = require("../../components/input");
+const lazy_list_1 = require("../../components/lazy-list");
+const loading_indicator_1 = require("../../components/loading-indicator");
+const globals_1 = require("../../globals");
+const hooks_1 = require("../../hooks");
+const ui_loader_1 = require("../../ui-router/ui-loader");
+require("./knowledge-value-list-item");
+const screenPathPart = 'knowledge-values';
+// const icon = 'bi bi-diagram-2-fill';
+const KnowledgeValueList = (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)());
+    const [allLoadedIds] = (0, react_1.useState)(() => new Set());
+    async function newCursor() {
+        const cursor = await (0, peers_sdk_1.KnowledgeValues)().cursor({}, { sortBy: ['-lastModified', '-knowledgeValueId'], textSearch: searchText });
+        cursorObs(cursor);
+        return cursor;
+    }
+    (0, react_1.useEffect)(() => {
+        cursorObs(undefined); // Clear existing cursor first
+        allLoadedIds.clear(); // Clear loaded IDs when search changes
+        newCursor();
+    }, [searchText]);
+    async function loadMore(existing) {
+        let moreMatches = [];
+        let cursor = cursorObs() || await newCursor();
+        for await (const nextRecord of cursor) {
+            // Skip if already loaded globally or in existing items
+            if (allLoadedIds.has(nextRecord.knowledgeValueId) ||
+                existing.some(e => e.knowledgeValueId === nextRecord.knowledgeValueId)) {
+                continue;
+            }
+            allLoadedIds.add(nextRecord.knowledgeValueId); // Track as loaded
+            moreMatches.push(nextRecord);
+            if (searchText.length && moreMatches.length > 5)
+                break;
+            if (moreMatches.length >= 50)
+                break;
+        }
+        if (moreMatches.length === 0) {
+            cursorObs(undefined);
+        }
+        return moreMatches;
+    }
+    async function searchSubmit(evt) {
+        if (evt.key !== "Enter")
+            return;
+        const name = searchText.trim();
+        if (!name)
+            return;
+        const newKV = await (0, peers_sdk_1.KnowledgeValues)().insert({
+            knowledgeValueId: (0, peers_sdk_1.newid)(),
+            lastModified: new Date(),
+            name: name,
+            peerTypeId: "00m3g0ntcop3mrh6ynuzgekiy", // `Note` value type
+            value: {
+                body: '',
+            },
+        });
+        (0, globals_1.mainContentPath)(`${screenPathPart}/${newKV.knowledgeValueId}`);
+    }
+    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 knowledge`, 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: (items) => {
+                    // return items.map(item => <KnowledgeValueListItem key={item.knowledgeValueId} data={item} />);
+                    return items.map(item => react_1.default.createElement(peers_sdk_1.PeersUI, { key: item.knowledgeValueId, uiEditMode: 'view', uiCategory: 'list-item', props: { knowledgeValue: item } }));
+                }, 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 } }) }))));
+};
+exports.KnowledgeValueList = KnowledgeValueList;
+(0, ui_loader_1.registerInternalPeersUI)({
+    peersUIId: '00m5fshz2g6ea23v8z6y0a1ck',
+    component: exports.KnowledgeValueList,
+    routes: [
+        {
+            isMatch: (props, context) => context.path === 'knowledge-values',
+            // path: 'knowledge-values',
+            uiCategory: 'screen',
+            priority: 2
+        }
+    ]
+});

package/dist/screens/packages/package-details.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface IProps {
+    packageId: string;
+}
+export declare const PackageDetails: (props: IProps) => React.JSX.Element;
+export {};

package/dist/screens/packages/package-details.js

@@ -0,0 +1,82 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PackageDetails = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importDefault(require("react"));
+const loading_indicator_1 = require("../../components/loading-indicator");
+const save_button_1 = require("../../components/save-button");
+const tabs_1 = require("../../components/tabs");
+const package_info_1 = require("./package-info");
+const hooks_1 = require("../../hooks");
+const input_1 = require("../../components/input");
+const tabs_state_1 = require("../../tabs-layout/tabs-state");
+const PackageDetails = (props) => {
+    const refresh = (0, hooks_1.useObservableState)(Date.now());
+    const pkg = (0, hooks_1.usePromise)(async () => {
+        const pkg = await (0, peers_sdk_1.Packages)().get(props.packageId);
+        if (!pkg) {
+            throw new Error('Workflow not found');
+        }
+        (0, tabs_state_1.updateActiveTabTitle)(pkg.name || "Package");
+        return (0, peers_sdk_1.Packages)().initDoc(pkg);
+    }, undefined, [props.packageId, refresh()]);
+    if (!pkg) {
+        return react_1.default.createElement(loading_indicator_1.LoadingIndicator, null);
+    }
+    const addActions = [
+        {
+            label: 'Reload Package',
+            onClick: async () => {
+                await peers_sdk_1.rpcServerCalls.installOrUpdatePackage(pkg.packageId);
+                await pkg.load();
+                window.location.reload();
+            }
+        },
+    ];
+    if (!pkg.remoteRepo) {
+        addActions.push({
+            label: 'Make Remote ',
+            // className: 'text-bg-warning',
+            onClick: async () => {
+                if (confirm(`Create a remote repository from this local one: ${pkg.name}`)) {
+                    try {
+                        await peers_sdk_1.rpcServerCalls.linkRemoteRepo(pkg.packageId);
+                        await peers_sdk_1.rpcServerCalls.installOrUpdatePackage(pkg.packageId);
+                        refresh(Date.now());
+                    }
+                    catch (err) {
+                        alert(`Error linking remote repo: ${err}`);
+                    }
+                }
+            }
+        });
+    }
+    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 bi-box-fill 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: pkg.packageId, className: 'border border-0', style: { width: '100%', outline: 'none', backgroundColor: 'transparent' }, value: pkg.qs.name }))),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement(save_button_1.SaveButton, { key: pkg.packageId, doc: pkg, addActions: [
+                        ...addActions
+                    ] }))),
+        react_1.default.createElement(tabs_1.Tabs, { key: pkg.packageId, tabs: [
+                {
+                    name: 'Info', content: react_1.default.createElement(tabs_1.ScreenTabBody, null,
+                        react_1.default.createElement(package_info_1.PackageInfo, { pkg: pkg }))
+                },
+                {
+                    name: 'Components', content: react_1.default.createElement(tabs_1.ScreenTabBody, null, "TODO - show all of the different components in the package")
+                },
+                {
+                    name: 'Dependencies', content: react_1.default.createElement(tabs_1.ScreenTabBody, null, "TODO - show all of the dependencies of the package")
+                },
+            ] })));
+};
+exports.PackageDetails = PackageDetails;

package/dist/screens/packages/package-info.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import { IDoc, IPackage } from "@peers-app/peers-sdk";
+export declare const PackageInfo: (props: {
+    pkg: IDoc<IPackage>;
+}) => React.JSX.Element;

package/dist/screens/packages/package-info.js

@@ -0,0 +1,42 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PackageInfo = void 0;
+const react_1 = __importDefault(require("react"));
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const markdown_with_mentions_1 = require("../../components/markdown-with-mentions");
+const tooltip_1 = require("../../components/tooltip");
+const input_1 = require("../../components/input");
+const PackageInfo = (props) => {
+    const { pkg } = props;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("small", null, "Name:"),
+        react_1.default.createElement(input_1.Input, { value: pkg.qs.name, className: "form-control mb-3 p-0 ps-2", placeholder: "Package name", title: "Package name", disabled: true }),
+        react_1.default.createElement("div", { className: "mt-2" },
+            react_1.default.createElement("small", null,
+                "Local Path:",
+                react_1.default.createElement("small", null,
+                    react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: `The local path to the directory containing the package.  This will open in VS Code if it's installed otherwise this will open in your native file system` }),
+                    react_1.default.createElement("button", { className: "btn btn-sm btn-link", onClick: () => {
+                            peers_sdk_1.rpcServerCalls.openPackage(pkg.localPath || (0, peers_sdk_1.packagesRootDir)());
+                        } }, "Open Local"))),
+            react_1.default.createElement(input_1.Input, { value: pkg.qs.localPath, className: "form-control mb-3 p-0 ps-2", disabled: true })),
+        pkg.remoteRepo && (react_1.default.createElement("div", { className: "mt-2" },
+            react_1.default.createElement("small", null,
+                "Source URL:",
+                react_1.default.createElement("small", null,
+                    react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: `The remote source of this package.  Often a github repository URL or a link to the Peers page for the package.` }),
+                    react_1.default.createElement("button", { className: "btn btn-sm btn-link", onClick: () => {
+                            peers_sdk_1.rpcServerCalls.openLinkInBrowser(pkg.remoteRepo);
+                        } }, "Open Remote"))),
+            react_1.default.createElement(input_1.Input, { value: pkg.qs.remoteRepo, className: "form-control mb-3 p-0 ps-2", disabled: true }))),
+        react_1.default.createElement("div", { className: "mt-2" },
+            react_1.default.createElement("hr", null),
+            react_1.default.createElement("small", null,
+                "Description:",
+                react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: `This should be edited in the package's README.md.  It will automatically update when you restart Peers or reload the package.` })),
+            react_1.default.createElement(markdown_with_mentions_1.MarkdownWithMentions, { content: pkg.description || '' }))));
+};
+exports.PackageInfo = PackageInfo;

package/dist/screens/packages/package-list.d.ts

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

package/dist/screens/packages/package-list.js

@@ -0,0 +1,182 @@
+"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.PackageList = void 0;
+const peers_sdk_1 = require("@peers-app/peers-sdk");
+const react_1 = __importStar(require("react"));
+const input_1 = require("../../components/input");
+const lazy_list_1 = require("../../components/lazy-list");
+const loading_indicator_1 = require("../../components/loading-indicator");
+const tooltip_1 = require("../../components/tooltip");
+const globals_1 = require("../../globals");
+const hooks_1 = require("../../hooks");
+const ui_loader_1 = require("../../ui-router/ui-loader");
+const PackageList = () => {
+    const [searchTextObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)(''));
+    const [searchText] = (0, hooks_1.useObservable)(searchTextObs);
+    const addingPackage = (0, hooks_1.useObservableState)(false);
+    const [cursorObs] = (0, react_1.useState)(() => (0, peers_sdk_1.observable)());
+    async function newCursor() {
+        const cursor = await (0, peers_sdk_1.Packages)().cursor({
+            $or: [
+                { name: { $matchWords: searchText } },
+                { description: { $matchWords: searchText } },
+                { remoteRepo: { $matchWords: searchText } },
+            ]
+        }, { sortBy: ['-packageId'] });
+        cursorObs(cursor);
+        return cursor;
+    }
+    (0, react_1.useEffect)(() => {
+        newCursor();
+    }, [searchText]);
+    async function loadMore(existing) {
+        let moreMatches = [];
+        let cursor = cursorObs() || await newCursor();
+        for await (const nextRecord of cursor) {
+            if (existing.find(e => e.packageId === nextRecord.packageId))
+                continue;
+            moreMatches.push(nextRecord);
+            if (searchText.length && moreMatches.length > 5)
+                break;
+            if (moreMatches.length >= 50)
+                break;
+        }
+        if (moreMatches.length === 0) {
+            cursorObs(undefined);
+        }
+        return moreMatches;
+    }
+    async function searchSubmit(evt) {
+        if (evt.key !== "Enter")
+            return;
+        const name = searchText.trim();
+        if (!name)
+            return;
+        // check if name is a remote repo url
+        if (name.startsWith('http') || name.endsWith('.git')) {
+            if (!confirm(`Add remote package: ${name}`))
+                return;
+            try {
+                addingPackage(true);
+                const packageId = await peers_sdk_1.rpcServerCalls.addRemotePackage(name);
+                const pkg = await (0, peers_sdk_1.Packages)().get(packageId);
+                if (pkg) {
+                    (0, globals_1.mainContentPath)(`packages/${packageId}`);
+                }
+            }
+            catch (err) {
+                let errMessage = err?.message || err;
+                // replace all whitespace with a single space for confirm dialog
+                errMessage = errMessage.replace(/\s+/g, ' ');
+                confirm('Error adding remote package: ' + errMessage);
+            }
+            finally {
+                addingPackage(false);
+            }
+            return;
+        }
+        if (!confirm(`Create or import local package: ${searchText}`))
+            return;
+        let packageFolderName = name;
+        packageFolderName = packageFolderName.replace(/[^a-zA-Z0-9]/g, ' ');
+        packageFolderName = packageFolderName.replace(/\s+/g, ' ').trim();
+        packageFolderName = (0, peers_sdk_1.camelCaseToHyphens)(packageFolderName);
+        const packageLocationDefault = (0, peers_sdk_1.packagesRootDir)() + '/' + packageFolderName;
+        try {
+            addingPackage(true);
+            const packageId = await peers_sdk_1.rpcServerCalls.createLocalPackage(name, packageLocationDefault);
+            const pkg = await (0, peers_sdk_1.Packages)().get(packageId);
+            if (pkg) {
+                (0, globals_1.mainContentPath)(`packages/${packageId}`);
+                peers_sdk_1.rpcServerCalls.openPackage(pkg.localPath);
+            }
+        }
+        catch (err) {
+            confirm('Error creating package: ' + err);
+        }
+        finally {
+            addingPackage(false);
+        }
+    }
+    if (addingPackage()) {
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement("div", { className: 'container-fluid d-flex justify-content-center mt-5' },
+                react_1.default.createElement("i", { className: "bi bi-box-seam" }),
+                "\u00A0 Adding Package"),
+            react_1.default.createElement("div", { className: 'container-fluid d-flex justify-content-center mt-2' },
+                react_1.default.createElement("div", { className: "progress", role: "progressbar", "aria-label": "Animated striped example", "aria-valuenow": 100, "aria-valuemin": 0, "aria-valuemax": 100 },
+                    react_1.default.createElement("div", { className: "progress-bar progress-bar-striped progress-bar-animated", style: { width: 150 } })))));
+    }
+    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, add, or create package", autoFocus: (0, globals_1.isDesktop)() ? true : false, onKeyUp: evt => searchSubmit(evt) }),
+            react_1.default.createElement("button", { className: "btn btn-outline-secondary dropdown-toggle sm", type: "button", "data-bs-toggle": "dropdown", "aria-expanded": "false" },
+                react_1.default.createElement("i", { className: "bi bi-plus-lg" })),
+            react_1.default.createElement("ul", { className: "dropdown-menu dropdown-menu-end" },
+                react_1.default.createElement("li", null,
+                    react_1.default.createElement("a", { className: "dropdown-item", href: "#packages/newlocal" }, "New Local Package")),
+                react_1.default.createElement("li", null,
+                    react_1.default.createElement("a", { className: "dropdown-item disabled", href: "#" }, "Add Local Package")),
+                react_1.default.createElement("li", null,
+                    react_1.default.createElement("a", { className: "dropdown-item disabled", href: "#" }, "Add Remote Package")),
+                react_1.default.createElement("li", null,
+                    react_1.default.createElement("hr", { className: "dropdown-divider" })),
+                react_1.default.createElement("li", null,
+                    react_1.default.createElement("a", { className: "dropdown-item", onClick: () => peers_sdk_1.rpcServerCalls.openPath((0, peers_sdk_1.packagesRootDir)()), style: { cursor: 'pointer' } }, "Open Packages Directory")))),
+        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: (packages) => {
+                    return packages.map(pkg => {
+                        return (react_1.default.createElement("div", { key: pkg.packageId, className: 'container-fluid pb-4' },
+                            react_1.default.createElement("i", { className: "bi bi-box-fill" }),
+                            "\u00A0\u00A0",
+                            react_1.default.createElement("a", { href: `#packages/${pkg.packageId}` }, pkg.name),
+                            react_1.default.createElement(tooltip_1.Tooltip, { markdownContent: pkg.description, positions: ['bottom', 'top', 'right', 'left'] })));
+                    });
+                }, 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 } }) }))));
+};
+exports.PackageList = PackageList;
+(0, ui_loader_1.registerInternalPeersUI)({
+    peersUIId: '00m5fre6r5m2p2wd1m4x6nx0b',
+    component: exports.PackageList,
+    routes: [
+        {
+            isMatch: (props, context) => context.path == 'packages',
+            uiCategory: 'screen',
+            priority: 1
+        }
+    ]
+});

package/dist/screens/packages/package-new-local.d.ts

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