@peers-app/peers-ui 0.0.14

package/src/screens/packages/package-info.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import { rpcServerCalls, IDoc, IPackage, packagesRootDir } from "@peers-app/peers-sdk";
+import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
+import { Tooltip } from "../../components/tooltip";
+import { Input } from "../../components/input";
+
+export const PackageInfo = (props: { pkg: IDoc<IPackage> }) => {
+  const { pkg } = props;
+
+  return (
+    <div>
+      <small>Name:</small>
+      <Input
+        value={pkg.qs.name}
+        className="form-control mb-3 p-0 ps-2"
+        placeholder="Package name"
+        title="Package name"
+        disabled
+      />
+
+      <div className="mt-2">
+        <small>
+          Local Path:
+          <small>
+            <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`} />
+            <button
+              className="btn btn-sm btn-link"
+              onClick={() => {
+                rpcServerCalls.openPackage(pkg.localPath || packagesRootDir());
+              }}
+            >Open Local</button>
+          </small>
+        </small>
+        <Input
+          value={pkg.qs.localPath}
+          className="form-control mb-3 p-0 ps-2"
+          disabled
+        />
+      </div>
+
+      {pkg.remoteRepo && (
+        <div className="mt-2">
+          <small>
+            Source URL:
+            <small>
+              <Tooltip markdownContent={`The remote source of this package.  Often a github repository URL or a link to the Peers page for the package.`} />
+              <button
+                className="btn btn-sm btn-link"
+                onClick={() => {
+                  rpcServerCalls.openLinkInBrowser(pkg.remoteRepo!);
+                }}
+              >Open Remote</button>
+            </small>
+          </small>
+          <Input
+            value={pkg.qs.remoteRepo}
+            className="form-control mb-3 p-0 ps-2"
+            disabled
+          />
+        </div>
+      )}
+
+      <div className="mt-2">
+        <hr />
+        <small>
+          Description:
+          <Tooltip markdownContent={`This should be edited in the package's README.md.  It will automatically update when you restart Peers or reload the package.`} />
+        </small>
+        {/* <div className="border rounded border-dark-subtle p-1">
+          <MarkdownWithMentions
+            content={pkg.description || ''}
+          />
+        </div> */}
+        
+        <MarkdownWithMentions
+          content={pkg.description || ''}
+        />
+      </div>
+
+    </div>
+  )
+}
+

package/src/screens/packages/package-list.tsx

@@ -0,0 +1,191 @@
+import { camelCaseToHyphens, ICursorIterable, IPackage, observable, Packages, packagesRootDir, rpcServerCalls } from "@peers-app/peers-sdk";
+import React, { useEffect, useState } from 'react';
+import { Input } from "../../components/input";
+import { LazyList } from "../../components/lazy-list";
+import { LoadingIndicator } from '../../components/loading-indicator';
+import { Tooltip } from '../../components/tooltip';
+import { isDesktop, mainContentPath } from '../../globals';
+import { useObservable, useObservableState } from "../../hooks";
+import { registerInternalPeersUI } from "../../ui-router/ui-loader";
+
+export const PackageList = () => {
+  const [searchTextObs] = useState(() => observable(''));
+  const [searchText] = useObservable(searchTextObs);
+  const addingPackage = useObservableState(false);
+
+  const [cursorObs] = useState(() => observable<ICursorIterable<IPackage>>());
+
+  async function newCursor() {
+    const cursor = await Packages().cursor({
+      $or: [
+        { name: { $matchWords: searchText } },
+        { description: { $matchWords: searchText } },
+        { remoteRepo: { $matchWords: searchText } },
+      ]
+    }, { sortBy: ['-packageId'] });
+    cursorObs(cursor);
+    return cursor;
+  }
+
+  useEffect(() => {
+    newCursor();
+  }, [searchText]);
+
+  async function loadMore(existing: IPackage[]): Promise<IPackage[]> {
+    let moreMatches: IPackage[] = [];
+    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: React.KeyboardEvent<HTMLInputElement>) {
+    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 rpcServerCalls.addRemotePackage(name);
+        const pkg = await Packages().get(packageId);
+        if (pkg) {
+          mainContentPath(`packages/${packageId}`);
+        }
+      } catch (err: any) {
+        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 = camelCaseToHyphens(packageFolderName);
+    const packageLocationDefault = packagesRootDir() + '/' + packageFolderName;
+
+    try {
+      addingPackage(true);
+      const packageId = await rpcServerCalls.createLocalPackage(name, packageLocationDefault);
+      const pkg = await Packages().get(packageId);
+      if (pkg) {
+        mainContentPath(`packages/${packageId}`);
+        rpcServerCalls.openPackage(pkg.localPath);
+      }
+    } catch (err) {
+      confirm('Error creating package: ' + err);
+    } finally {
+      addingPackage(false);
+    }
+  }
+
+  if (addingPackage()) {
+    return (
+      <div>
+        <div className='container-fluid d-flex justify-content-center mt-5'>
+          <i className="bi bi-box-seam"></i>&nbsp;
+          Adding Package
+        </div>
+        <div className='container-fluid d-flex justify-content-center mt-2'>
+          <div className="progress" role="progressbar" aria-label="Animated striped example" aria-valuenow={100} aria-valuemin={0} aria-valuemax={100}>
+            <div className="progress-bar progress-bar-striped progress-bar-animated" style={{ width: 150 }}></div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className='container-fluid'>
+
+      <div className="input-group mt-3 mb-3">
+        <Input value={searchTextObs} className="form-control" placeholder="Search, add, or create package"
+          autoFocus={isDesktop() ? true : false}
+          onKeyUp={evt => searchSubmit(evt)}
+        />
+        <button className="btn btn-outline-secondary dropdown-toggle sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+          <i className="bi bi-plus-lg"></i>
+        </button>
+        <ul className="dropdown-menu dropdown-menu-end">
+          <li><a className="dropdown-item" href="#packages/newlocal">New Local Package</a></li>
+          <li><a className="dropdown-item disabled" href="#">Add Local Package</a></li>
+          <li><a className="dropdown-item disabled" href="#">Add Remote Package</a></li>
+          <li><hr className="dropdown-divider" /></li>
+          <li><a className="dropdown-item"
+            onClick={() => rpcServerCalls.openPath(packagesRootDir())}
+            style={{ cursor: 'pointer' }}
+          >Open Packages Directory</a></li>
+
+        </ul>
+      </div>
+
+      <div className="peers-list-container">
+        <LazyList
+          resetTrigger={searchText}
+          loadMore={loadMore}
+          scrollThreshold={0.6}
+          renderItems={(packages) => {
+            return packages.map(pkg => {
+              return (
+                <div
+                  key={pkg.packageId}
+                  className='container-fluid pb-4'
+                >
+                  <i className="bi bi-box-fill"></i>&nbsp;&nbsp;
+                  <a href={`#packages/${pkg.packageId}`}>
+                    {pkg.name}
+                  </a>
+                  <Tooltip
+                    markdownContent={pkg.description}
+                    positions={['bottom', 'top', 'right', 'left']}
+                  />
+
+                </div>
+              )
+            })
+          }}
+          loadingIndicator={
+            <div className="d-flex justify-content-center" style={{ height: 200 }}>
+              <LoadingIndicator />
+            </div>
+          }
+          endOfList={
+            <div className="d-flex justify-content-center" style={{ height: 200 }}>
+              {/* <span className="h3">End of List</span> */}
+            </div>
+          }
+        />
+      </div>
+    </div>
+  );
+};
+
+registerInternalPeersUI({
+  peersUIId: '00m5fre6r5m2p2wd1m4x6nx0b',
+  component: PackageList,
+  routes: [
+    {
+      isMatch: (props, context) => context.path == 'packages',
+      uiCategory: 'screen',
+      priority: 1
+    }
+  ]
+})

package/src/screens/packages/package-new-local.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+import { mainContentPath } from '../../globals';
+import { rpcServerCalls, Packages, packagesRootDir, camelCaseToHyphens } from "@peers-app/peers-sdk";
+
+export const PackageNewLocal = () => {
+
+  const defaultName = "New Package";
+  const [packageName, setPackageName] = useState('');
+
+  const [packageLocation, setPackageLocation] = useState('');
+
+  let packageFolderName = packageName || defaultName;
+  packageFolderName = packageFolderName.replace(/[^a-zA-Z0-9]/g, ' ');
+  packageFolderName = packageFolderName.replace(/\s+/g, ' ').trim();
+  packageFolderName = camelCaseToHyphens(packageFolderName);
+
+  const packageLocationDefault = packagesRootDir() + '/' + packageFolderName;
+
+  const hiddenFileInput = React.useRef<HTMLInputElement>(null);
+
+  const handleFolderSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    // @ts-ignore
+    const path = e.target.files?.[0]?.path;
+    const folderPath = path;
+    if (folderPath) {
+      setPackageLocation(folderPath);
+    }
+  };
+
+  const createLocalPackage = async () => {
+    try {
+      const packageId = await rpcServerCalls.createLocalPackage(packageName, packageLocation || packageLocationDefault);
+      const pkg = await Packages().get(packageId);
+      if (pkg) {
+        mainContentPath(`packages/${packageId}`);
+        rpcServerCalls.openPackage(pkg.localPath);
+      }
+    } catch (err) {
+      confirm('Error creating package: ' + err);
+    }
+  };
+
+  return (
+    <div className='container mt-2'>
+      <h4 className='text-center'>
+        New Local Package
+      </h4>
+
+      <div className="input-group mt-3 mb-3">
+        <input type="text" className="form-control"
+          placeholder="Package Name"
+          value={packageName}
+          onChange={e => setPackageName(e.target.value)}
+          autoFocus
+        />
+      </div>
+
+      <input
+        ref={hiddenFileInput}
+        type="file"
+        className='visually-hidden'
+        onChange={handleFolderSelect}
+        // @ts-ignore
+        directory=""
+        webkitdirectory=""
+      />
+      <div className="input-group mt-3 mb-3">
+        <input
+          type="text"
+          className="form-control"
+          placeholder={packageLocationDefault}
+          value={packageLocation}
+          onChange={e => setPackageLocation(e.target.value)}
+          disabled
+        />
+        {/* <button className="btn btn-outline-secondary" type="button" 
+          onClick={() => hiddenFileInput.current?.click()}>
+          <i className="bi bi-folder-fill"></i>
+        </button> */}
+      </div>
+
+      <button 
+        className="btn btn-primary float-end" 
+        type="button" 
+        onClick={() => createLocalPackage()}
+        disabled={!packageName}
+      >
+        Create Package
+      </button>
+
+    </div>
+  );
+};

package/src/screens/peer-types/peer-type-details.tsx

@@ -0,0 +1,162 @@
+import { IDoc, IOSchema, IPeerType, Observable, PeerTypes } from "@peers-app/peers-sdk";
+import React, { useEffect } from "react";
+import { Input } from "../../components/input";
+import { IOSchemaEditor } from "../../components/io-schema";
+import { LoadingIndicator } from "../../components/loading-indicator";
+import { MarkdownEditorInline } from "../../components/markdown-editor/editor-inline";
+import { SaveButton } from "../../components/save-button";
+import { ScreenTabBody, Tabs } from "../../components/tabs";
+import { Tooltip } from "../../components/tooltip";
+import { useObservable, usePromise } from "../../hooks";
+import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
+
+interface IProps {
+  peerTypeId: string;
+}
+
+export const PeerTypeDetails = (props: IProps) => {
+
+  const valueType = usePromise(async () => {
+    const valueType = await PeerTypes().get(props.peerTypeId);
+    if (!valueType) {
+      throw new Error('Variable not found');
+    }
+    const doc = PeerTypes().initDoc(valueType);
+    updateActiveTabTitle(doc.name || "Type");
+    return doc;
+  }, undefined, [props.peerTypeId]);
+
+
+  useEffect(() => {
+    if (!valueType) return;
+    const sub = valueType.qs.name.subscribe(() => {
+      valueType.name = valueType.qs.name().replaceAll(/\s/g, '_').replaceAll(/[^a-zA-Z0-9_-]/g, '');
+    });
+    return () => {
+      sub.dispose();
+    }
+  }, [valueType]);
+
+  if (!valueType) {
+    return <LoadingIndicator />;
+  }
+
+  return (
+    <div className="container-fluid p-3">
+
+      <div className="d-flex">
+        <div>
+          <h4>
+            <i className="bi bi-code-square me-2"></i>
+          </h4>
+        </div>
+        <div className="flex-grow-1">
+          <h4>
+            <Input
+              key={valueType.peerTypeId}
+              className='border border-0'
+              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              value={valueType.qs.name}
+            />
+          </h4>
+        </div>
+        <div>
+          <SaveButton
+            key={valueType.peerTypeId}
+            doc={valueType}
+          />
+        </div>
+      </div>
+
+      <Tabs
+        key={valueType.peerTypeId}
+        tabs={[
+          {
+            name: 'Info', content:
+              <ScreenTabBody>
+                <VariableInfo valueType={valueType} />
+              </ScreenTabBody>
+          },
+          {
+            name: 'Schema', content:
+              <ScreenTabBody>
+                <VariableSchema valueType={valueType} />
+              </ScreenTabBody>
+          },
+        ]}
+      />
+    </div>
+  )
+}
+
+
+const VariableInfo = (props: { valueType: IDoc<IPeerType> }) => {
+  const { valueType } = props
+
+  valueType.description = valueType.description || '';
+
+  return (
+    <div>
+
+      <small className="text-body-secondary">Name:</small>
+      <Input
+        value={valueType.qs.name}
+        className="form-control mb-3 p-0 ps-2"
+        placeholder="Variable name"
+        title="Variable name"
+      />
+
+      <small className="text-body-secondary">
+        Icon Class:
+        <small>
+          <Tooltip markdownContent={[
+            'Icon classes can be found at:',
+            '[Bootstrap Icons](https://icons.getbootstrap.com/)',
+          ].join(' ')} />
+        </small>
+      </small>
+      <IconPicker icon={valueType.qs.iconClass} />
+      
+
+      <small className="mt-2 text-body-secondary">Description:</small>
+      <MarkdownEditorInline
+        value={valueType.qs.description as Observable<string>}
+      />
+
+    </div>
+  )
+}
+
+const VariableSchema = (props: { valueType: IDoc<IPeerType> }) => {
+  const { valueType } = props
+
+  return (
+    <div>
+      <IOSchemaEditor ioSchema={valueType.qs.schema as Observable<IOSchema>} simpleValueName="value" />
+    </div>
+  )
+}
+
+export const IconPicker = (props: { icon: Observable<string | undefined> }) => {
+  const { icon } = props;
+
+  useObservable(icon);
+
+  if (icon() === undefined) {
+    icon('');
+  }
+
+  return (
+    <div className="d-flex">
+      <Input
+        value={icon}
+        className="form-control mb-3 p-0 ps-2"
+        placeholder="icon class"
+        title="Icon"
+      />      
+      <div className="me-2 ms-2" style={{ width: '22px'}}>
+        <i className={icon()}></i>
+      </div>
+    </div>
+  )
+}

package/src/screens/peer-types/peer-type-list.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { IOSchemaType, IPeerType, newid, PeerTypes } from "@peers-app/peers-sdk";
+import { MarkdownWithMentions } from '../../components/markdown-with-mentions';
+import { mainContentPath } from '../../globals';
+import { ListScreen } from '../../components/list-screen';
+import { registerInternalPeersUI } from '../../ui-router/ui-loader';
+
+export function PeerTypeLists() {
+  async function newRecord(name: string) {
+    const peerTypeName = name.replace(/\s+/g, '_');
+    let valueType = await PeerTypes().insert({
+      peerTypeId: newid(),
+      name: peerTypeName,
+      description: '',
+      schema: {
+        type: IOSchemaType.none,
+        fields: [],
+      },
+    });
+    valueType = await PeerTypes().save(valueType);
+    mainContentPath(`peer-types/${valueType.peerTypeId}`);
+    return valueType;
+  }
+
+  function getFilter(searchText: string) {
+    return {
+      $or: [
+        { name: { $matchWords: searchText } },
+        { description: { $matchWords: searchText } },
+      ],
+    };
+  }
+
+  function renderItem(item: IPeerType) {
+    return (
+      <div
+        key={item.peerTypeId}
+        className='container-fluid pb-4'
+      >
+        <i className={item.iconClass ?? "bi bi-code-square"}></i>&nbsp;
+        <a href={`#peer-types/${item.peerTypeId}`}>
+          {item.name || '<empty-name>'}
+        </a>
+        <div style={{ paddingLeft: '20px' }}>
+          <MarkdownWithMentions content={item.description || ''} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <ListScreen
+      table={PeerTypes()}
+      newRecord={newRecord}
+      getFilter={getFilter}
+      sortBy={['name']}
+      renderItem={renderItem}
+      placeholderName="value type"
+    />
+  );
+}
+
+
+registerInternalPeersUI({
+  peersUIId: '00m5fshz2g6ea23v8z6y0a1cj',
+  component: PeerTypeLists,
+  routes: [
+    {
+      isMatch: (props, context) => context.path === 'peer-types',
+      uiCategory: 'screen',
+      priority: 2
+    }
+  ]
+});