@peers-app/peers-ui 0.14.0 → 0.15.0

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

@@ -1,36 +1,76 @@
-import { ICursorIterable, IPackage, observable, Packages, PackageVersions, packagesRootDir, rpcServerCalls, doesTagMatch } from "@peers-app/peers-sdk";
-import React, { useEffect, useState } from 'react';
+import {
+  doesTagMatch,
+  type ICursorIterable,
+  type IPackage,
+  observable,
+  Packages,
+  PackageVersions,
+  packagesRootDir,
+  rpcServerCalls,
+} from "@peers-app/peers-sdk";
+import type React from "react";
+import { useCallback, 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 { LoadingIndicator } from "../../components/loading-indicator";
+import { Tooltip } from "../../components/tooltip";
+import { isDesktop, mainContentPath } from "../../globals";
 import { useObservable, useObservableState, usePromise } from "../../hooks";
 import { registerInternalPeersUI } from "../../ui-router/ui-loader";
 
-const PackageVersionBadge = ({ activePackageVersionId, packageId, followVersionTags }: { activePackageVersionId?: string, packageId: string, followVersionTags?: string }) => {
-  const data = usePromise(async () => {
-    if (!activePackageVersionId) return null;
-    const all = await PackageVersions().list({ packageId });
-    const active = all.find(v => v.packageVersionId === activePackageVersionId);
-    if (!active) return null;
-
-    let newerLevel: 'major' | 'minor' | 'patch' | null = null;
-    if (active.version) {
-      const parse = (v: string) => v.split('.').map(Number);
-      const [aMaj, aMin, aPat] = parse(active.version);
-      for (const v of all) {
-        if (!v.version || v.packageVersionId === activePackageVersionId) continue;
-        if (!doesTagMatch(active.versionTag, v.versionTag, followVersionTags, undefined)) continue;
-        const [maj, min, pat] = parse(v.version);
-        if (maj > aMaj) { newerLevel = 'major'; break; }
-        if (maj === aMaj && min > aMin) { newerLevel = 'minor'; continue; }
-        if (maj === aMaj && min === aMin && pat > aPat && !newerLevel) { newerLevel = 'patch'; continue; }
-        if (maj === aMaj && min === aMin && pat === aPat && (v.createdAt || '') > (active.createdAt || '') && !newerLevel) { newerLevel = 'patch'; }
+const PackageVersionBadge = ({
+  activePackageVersionId,
+  packageId,
+  followVersionTags,
+}: {
+  activePackageVersionId?: string;
+  packageId: string;
+  followVersionTags?: string;
+}) => {
+  const data = usePromise(
+    async () => {
+      if (!activePackageVersionId) return null;
+      const all = await PackageVersions().list({ packageId });
+      const active = all.find((v) => v.packageVersionId === activePackageVersionId);
+      if (!active) return null;
+
+      let newerLevel: "major" | "minor" | "patch" | null = null;
+      if (active.version) {
+        const parse = (v: string) => v.split(".").map(Number);
+        const [aMaj, aMin, aPat] = parse(active.version);
+        for (const v of all) {
+          if (!v.version || v.packageVersionId === activePackageVersionId) continue;
+          if (!doesTagMatch(active.versionTag, v.versionTag, followVersionTags, undefined))
+            continue;
+          const [maj, min, pat] = parse(v.version);
+          if (maj > aMaj) {
+            newerLevel = "major";
+            break;
+          }
+          if (maj === aMaj && min > aMin) {
+            newerLevel = "minor";
+            continue;
+          }
+          if (maj === aMaj && min === aMin && pat > aPat && !newerLevel) {
+            newerLevel = "patch";
+            continue;
+          }
+          if (
+            maj === aMaj &&
+            min === aMin &&
+            pat === aPat &&
+            (v.createdAt || "") > (active.createdAt || "") &&
+            !newerLevel
+          ) {
+            newerLevel = "patch";
+          }
+        }
       }
-    }
-    return { pv: active, newerLevel };
-  }, undefined, [activePackageVersionId, packageId, followVersionTags]);
+      return { pv: active, newerLevel };
+    },
+    undefined,
+    [activePackageVersionId, packageId, followVersionTags],
+  );
 
   if (!data) return null;
   const { pv, newerLevel } = data;
@@ -39,53 +79,60 @@ const PackageVersionBadge = ({ activePackageVersionId, packageId, followVersionT
     <span className="ms-2">
       <small className="text-muted">v{pv.version}</small>
       {pv.versionTag && (
-        <span className={`badge ms-1 ${pv.versionTag.startsWith('beta') ? 'text-bg-warning' : 'text-bg-info'}`}
-          style={{ fontSize: '0.65em' }}
+        <span
+          className={`badge ms-1 ${pv.versionTag.startsWith("beta") ? "text-bg-warning" : "text-bg-info"}`}
+          style={{ fontSize: "0.65em" }}
         >
           {pv.versionTag}
         </span>
       )}
       {newerLevel ? (
-        <span className={`badge ms-1 text-bg-${newerLevel === 'major' ? 'danger' : newerLevel === 'minor' ? 'warning' : 'info'}`}
-          style={{ fontSize: '0.65em' }}
+        <span
+          className={`badge ms-1 text-bg-${newerLevel === "major" ? "danger" : newerLevel === "minor" ? "warning" : "info"}`}
+          style={{ fontSize: "0.65em" }}
         >
           {newerLevel} update
         </span>
       ) : (
-        <span className="badge ms-1 text-bg-success" style={{ fontSize: '0.65em' }}>up to date</span>
+        <span className="badge ms-1 text-bg-success" style={{ fontSize: "0.65em" }}>
+          up to date
+        </span>
       )}
     </span>
   );
 };
 
 export const PackageList = () => {
-  const [searchTextObs] = useState(() => observable(''));
+  const [searchTextObs] = useState(() => observable(""));
   const [searchText] = useObservable(searchTextObs);
   const addingPackage = useObservableState(false);
 
   const [cursorObs] = useState(() => observable<ICursorIterable<IPackage> | undefined>());
 
-  async function newCursor() {
-    const cursor = await Packages().cursor({
-      $or: [
-        { name: { $matchWords: searchText } },
-        { description: { $matchWords: searchText } },
-        { remoteRepo: { $matchWords: searchText } },
-      ]
-    }, { sortBy: ['-packageId'] });
+  const newCursor = useCallback(async () => {
+    const cursor = await Packages().cursor(
+      {
+        $or: [
+          { name: { $matchWords: searchText } },
+          { description: { $matchWords: searchText } },
+          { remoteRepo: { $matchWords: searchText } },
+        ],
+      },
+      { sortBy: ["-packageId"] },
+    );
     cursorObs(cursor);
     return cursor;
-  }
+  }, [searchText, cursorObs]);
 
   useEffect(() => {
-    newCursor();
-  }, [searchText]);
+    void newCursor();
+  }, [newCursor]);
 
   async function loadMore(existing: IPackage[]): Promise<IPackage[]> {
-    let moreMatches: IPackage[] = [];
-    let cursor = cursorObs() || await newCursor();
+    const moreMatches: IPackage[] = [];
+    const cursor = cursorObs() || (await newCursor());
     for await (const nextRecord of cursor) {
-      if (existing.find(e => e.packageId === nextRecord.packageId)) continue;
+      if (existing.find((e) => e.packageId === nextRecord.packageId)) continue;
       moreMatches.push(nextRecord);
       if (searchText.length && moreMatches.length > 5) break;
       if (moreMatches.length >= 50) break;
@@ -96,14 +143,13 @@ export const PackageList = () => {
     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 (name.startsWith("http") || name.endsWith(".git")) {
       if (!confirm(`Add remote package: ${name}`)) return;
       try {
         addingPackage(true);
@@ -112,13 +158,12 @@ export const PackageList = () => {
         if (pkg) {
           mainContentPath(`packages/${packageId}`);
         }
-      } catch (err: any) {
-        let errMessage = err?.message || err;
+      } catch (err: unknown) {
+        let errMessage = err instanceof Error ? err.message : String(err);
         // replace all whitespace with a single space for confirm dialog
-        errMessage = errMessage.replace(/\s+/g, ' ');
-        confirm('Error adding remote package: ' + errMessage);
-      }
-      finally {
+        errMessage = errMessage.replace(/\s+/g, " ");
+        confirm(`Error adding remote package: ${errMessage}`);
+      } finally {
         addingPackage(false);
       }
       return;
@@ -133,8 +178,8 @@ export const PackageList = () => {
       if (pkg) {
         mainContentPath(`packages/${packageId}`);
       }
-    } catch (err) {
-      confirm('Error creating package: ' + err);
+    } catch (err: unknown) {
+      confirm(`Error creating package: ${err instanceof Error ? err.message : String(err)}`);
     } finally {
       addingPackage(false);
     }
@@ -143,13 +188,22 @@ export const PackageList = () => {
   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 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 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>
@@ -157,26 +211,51 @@ export const PackageList = () => {
   }
 
   return (
-    <div className='container-fluid'>
-
+    <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)}
+        <Input
+          value={searchTextObs}
+          className="form-control"
+          placeholder="Search, add, or create package"
+          autoFocus={!!isDesktop()}
+          onKeyUp={(evt) => searchSubmit(evt)}
         />
-        <button className="btn btn-outline-secondary dropdown-toggle sm" type="button" data-bs-toggle="dropdown" aria-expanded="false">
+        <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>
-
+          <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>
 
@@ -186,25 +265,23 @@ export const PackageList = () => {
           loadMore={loadMore}
           scrollThreshold={0.6}
           renderItems={(packages) => {
-            return packages.map(pkg => {
+            return packages.map((pkg) => {
               return (
-                <div
-                  key={pkg.packageId}
-                  className='container-fluid pb-4'
-                >
+                <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>
-                  <PackageVersionBadge activePackageVersionId={pkg.activePackageVersionId} packageId={pkg.packageId} followVersionTags={pkg.followVersionTags} />
+                  <a href={`#packages/${pkg.packageId}`}>{pkg.name}</a>
+                  <PackageVersionBadge
+                    activePackageVersionId={pkg.activePackageVersionId}
+                    packageId={pkg.packageId}
+                    followVersionTags={pkg.followVersionTags}
+                  />
                   <Tooltip
                     markdownContent={pkg.description}
-                    positions={['bottom', 'top', 'right', 'left']}
+                    positions={["bottom", "top", "right", "left"]}
                   />
-
                 </div>
-              )
-            })
+              );
+            });
           }}
           loadingIndicator={
             <div className="d-flex justify-content-center" style={{ height: 200 }}>
@@ -223,13 +300,13 @@ export const PackageList = () => {
 };
 
 registerInternalPeersUI({
-  peersUIId: '00m5fre6r5m2p2wd1m4x6nx0b',
+  peersUIId: "00m5fre6r5m2p2wd1m4x6nx0b",
   component: PackageList,
   routes: [
     {
-      isMatch: (props, context) => context.path == 'packages',
-      uiCategory: 'screen',
-      priority: 1
-    }
-  ]
-})
+      isMatch: (_props, context) => context.path === "packages",
+      uiCategory: "screen",
+      priority: 1,
+    },
+  ],
+});

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

@@ -1,25 +1,29 @@
-import React, { useState } from 'react';
-import { mainContentPath } from '../../globals';
-import { rpcServerCalls, Packages, packagesRootDir, camelCaseToHyphens } from "@peers-app/peers-sdk";
+import {
+  camelCaseToHyphens,
+  Packages,
+  packagesRootDir,
+  rpcServerCalls,
+} from "@peers-app/peers-sdk";
+import React, { useState } from "react";
+import { mainContentPath } from "../../globals";
 
 export const PackageNewLocal = () => {
-
   const defaultName = "New Package";
-  const [packageName, setPackageName] = useState('');
+  const [packageName, setPackageName] = useState("");
 
-  const [packageLocation, setPackageLocation] = useState('');
+  const [packageLocation, setPackageLocation] = useState("");
 
   let packageFolderName = packageName || defaultName;
-  packageFolderName = packageFolderName.replace(/[^a-zA-Z0-9]/g, ' ');
-  packageFolderName = packageFolderName.replace(/\s+/g, ' ').trim();
+  packageFolderName = packageFolderName.replace(/[^a-zA-Z0-9]/g, " ");
+  packageFolderName = packageFolderName.replace(/\s+/g, " ").trim();
   packageFolderName = camelCaseToHyphens(packageFolderName);
 
-  const packageLocationDefault = packagesRootDir + '/' + packageFolderName;
+  const packageLocationDefault = `${packagesRootDir}/${packageFolderName}`;
 
   const hiddenFileInput = React.useRef<HTMLInputElement>(null);
 
   const handleFolderSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // @ts-ignore
+    // @ts-expect-error
     const path = e.target.files?.[0]?.path;
     const folderPath = path;
     if (folderPath) {
@@ -30,7 +34,7 @@ export const PackageNewLocal = () => {
   const createLocalPackage = async () => {
     try {
       const packageId = await rpcServerCalls.addOrUpdatePackage(packageName, {
-        packageLocation: packageLocation || packageLocationDefault
+        packageLocation: packageLocation || packageLocationDefault,
       });
       const pkg = await Packages().get(packageId);
       if (pkg) {
@@ -38,31 +42,30 @@ export const PackageNewLocal = () => {
         rpcServerCalls.openPackage(packageLocation || packageLocationDefault);
       }
     } catch (err) {
-      confirm('Error creating package: ' + err);
+      confirm(`Error creating package: ${err}`);
     }
   };
 
   return (
-    <div className='container mt-2'>
-      <h4 className='text-center'>
-        New Local Package
-      </h4>
+    <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"
+        <input
+          type="text"
+          className="form-control"
           placeholder="Package Name"
           value={packageName}
-          onChange={e => setPackageName(e.target.value)}
-          autoFocus
+          onChange={(e) => setPackageName(e.target.value)}
         />
       </div>
 
       <input
         ref={hiddenFileInput}
         type="file"
-        className='visually-hidden'
+        className="visually-hidden"
         onChange={handleFolderSelect}
-        // @ts-ignore
+        // @ts-expect-error
         directory=""
         webkitdirectory=""
       />
@@ -72,7 +75,7 @@ export const PackageNewLocal = () => {
           className="form-control"
           placeholder={packageLocationDefault}
           value={packageLocation}
-          onChange={e => setPackageLocation(e.target.value)}
+          onChange={(e) => setPackageLocation(e.target.value)}
           disabled
         />
         {/* <button className="btn btn-outline-secondary" type="button" 
@@ -81,15 +84,14 @@ export const PackageNewLocal = () => {
         </button> */}
       </div>
 
-      <button 
-        className="btn btn-primary float-end" 
-        type="button" 
+      <button
+        className="btn btn-primary float-end"
+        type="button"
         onClick={() => createLocalPackage()}
         disabled={!packageName}
       >
         Create Package
       </button>
-
     </div>
   );
 };