@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/screens/network-viewer/usage-graph.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef } from 'react';
+import { useEffect, useRef, useState } from "react";
 
 interface IDataPoint {
   timestamp: number;
@@ -71,12 +71,12 @@ export function UsageGraph({
   durationMinutes = 5,
   updateInterval = 5000,
   minHeight = 80,
-  color = 'rgba(13, 110, 253, 1)',
-  overlayTextColor = 'rgba(255, 255, 255, 0.7)',
+  color = "rgba(13, 110, 253, 1)",
+  overlayTextColor = "rgba(255, 255, 255, 0.7)",
   minValue = 0,
   maxValue = 100,
   formatOverlayText,
-  colorZones
+  colorZones,
 }: IUsageGraphProps) {
   const [dataPoints, setDataPoints] = useState<IDataPoint[]>([]);
   const [currentValue, setCurrentValue] = useState<number>(0);
@@ -120,12 +120,12 @@ export function UsageGraph({
         setDataPoints((prev) => {
           const newPoint: IDataPoint = {
             timestamp: Date.now(),
-            value: value
+            value: value,
           };
 
           const updated = [...prev, newPoint];
           const oldestAllowedTime = Date.now() - durationMinutes * 60 * 1000;
-          const filtered = updated.filter(point => point.timestamp >= oldestAllowedTime);
+          const filtered = updated.filter((point) => point.timestamp >= oldestAllowedTime);
           return filtered;
         });
       } catch (error) {
@@ -144,7 +144,7 @@ export function UsageGraph({
         clearInterval(intervalRef.current);
       }
     };
-  }, [fetchUsage, updateInterval, label]);
+  }, [fetchUsage, updateInterval, label, durationMinutes]);
 
   // Get color for a value based on color zones
   const getColorForValue = (value: number): string => {
@@ -193,12 +193,14 @@ export function UsageGraph({
 
     // If no color zones, return single segment
     if (!colorZones || colorZones.length === 0) {
-      const pathData = points.map((point, idx) => {
-        if (idx === 0) {
-          return `M ${point.x} ${point.y}`;
-        }
-        return `L ${point.x} ${point.y}`;
-      }).join(' ');
+      const pathData = points
+        .map((point, idx) => {
+          if (idx === 0) {
+            return `M ${point.x} ${point.y}`;
+          }
+          return `L ${point.x} ${point.y}`;
+        })
+        .join(" ");
       return [{ path: pathData, color }];
     }
 
@@ -231,7 +233,7 @@ export function UsageGraph({
 
   // Calculate SVG path (for gradient fill)
   const getLinePath = (): string => {
-    if (dataPoints.length < 2) return '';
+    if (dataPoints.length < 2) return "";
 
     const paddingLeft = 25;
     const paddingRight = 10;
@@ -258,12 +260,14 @@ export function UsageGraph({
     });
 
     // Create SVG path
-    const pathData = points.map((point, idx) => {
-      if (idx === 0) {
-        return `M ${point.x} ${point.y}`;
-      }
-      return `L ${point.x} ${point.y}`;
-    }).join(' ');
+    const pathData = points
+      .map((point, idx) => {
+        if (idx === 0) {
+          return `M ${point.x} ${point.y}`;
+        }
+        return `L ${point.x} ${point.y}`;
+      })
+      .join(" ");
 
     return pathData;
   };
@@ -271,7 +275,7 @@ export function UsageGraph({
   // Get gradient path for fill
   const getGradientPath = (): string => {
     const linePath = getLinePath();
-    if (!linePath) return '';
+    if (!linePath) return "";
 
     const paddingLeft = 25;
     const paddingRight = 10;
@@ -281,7 +285,7 @@ export function UsageGraph({
     return `${linePath} L ${width - paddingRight} ${height - paddingBottom} L ${paddingLeft} ${height - paddingBottom} Z`;
   };
 
-  const linePath = getLinePath();
+  const _linePath = getLinePath();
   const gradientPath = getGradientPath();
   const lineSegments = getLineSegments();
 
@@ -289,25 +293,32 @@ export function UsageGraph({
   const rgbaMatch = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*[\d.]+)?\)/);
   const gradientColor = rgbaMatch
     ? `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0.3)`
-    : 'rgba(13, 110, 253, 0.3)';
+    : "rgba(13, 110, 253, 0.3)";
   const gradientColorLight = rgbaMatch
     ? `rgba(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]}, 0.05)`
-    : 'rgba(13, 110, 253, 0.05)';
+    : "rgba(13, 110, 253, 0.05)";
 
   return (
     <div
       ref={containerRef}
       className="usage-graph"
-      style={{ margin: 0, padding: 0, position: 'relative', width: '100%', height: '100%', minHeight: `${minHeight}px` }}
+      style={{
+        margin: 0,
+        padding: 0,
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        minHeight: `${minHeight}px`,
+      }}
     >
       <svg
         width={width}
         height={height}
         style={{
-          border: '1px solid rgba(128, 128, 128, 0.2)',
-          borderRadius: '4px',
-          backgroundColor: 'rgba(0, 0, 0, 0.02)',
-          display: 'block'
+          border: "1px solid rgba(128, 128, 128, 0.2)",
+          borderRadius: "4px",
+          backgroundColor: "rgba(0, 0, 0, 0.02)",
+          display: "block",
         }}
       >
         <defs>
@@ -350,12 +361,7 @@ export function UsageGraph({
         })}
 
         {/* Fill area under the line */}
-        {gradientPath && (
-          <path
-            d={gradientPath}
-            fill={`url(#${label}Gradient)`}
-          />
-        )}
+        {gradientPath && <path d={gradientPath} fill={`url(#${label}Gradient)`} />}
 
         {/* Line segments with color zones */}
         {lineSegments.map((segment, idx) => (
@@ -424,23 +430,25 @@ export function UsageGraph({
       {/* Centered overlay text */}
       <div
         style={{
-          position: 'absolute',
-          top: '50%',
-          left: '50%',
-          transform: 'translate(-50%, -50%)',
-          fontSize: '2rem',
-          fontWeight: 'bold',
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          fontSize: "2rem",
+          fontWeight: "bold",
           color: overlayTextColor,
-          pointerEvents: 'none',
-          userSelect: 'none',
-          textAlign: 'center',
-          lineHeight: '1.2',
-          whiteSpace: 'nowrap',
-          maxWidth: '95%',
-          overflowWrap: 'break-word'
+          pointerEvents: "none",
+          userSelect: "none",
+          textAlign: "center",
+          lineHeight: "1.2",
+          whiteSpace: "nowrap",
+          maxWidth: "95%",
+          overflowWrap: "break-word",
         }}
       >
-        {formatOverlayText ? formatOverlayText(currentValue, label) : `${label}  ${Math.round(currentValue)}%`}
+        {formatOverlayText
+          ? formatOverlayText(currentValue, label)
+          : `${label}  ${Math.round(currentValue)}%`}
       </div>
     </div>
   );

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

@@ -1,67 +1,71 @@
 import { Packages, rpcServerCalls } from "@peers-app/peers-sdk";
 import React from "react";
+import { Input } from "../../components/input";
 import { LoadingIndicator } from "../../components/loading-indicator";
-import { ISaveButtonProps, SaveButton } from "../../components/save-button";
+import { type ISaveButtonProps, SaveButton } from "../../components/save-button";
 import { ScreenTabBody, Tabs } from "../../components/tabs";
-import { PackageInfo } from "./package-info";
-import { PackageVersionsList } from "./package-versions";
 import { useObservableState, usePromise } from "../../hooks";
-import { Input } from "../../components/input";
 import { updateActiveTabTitle } from "../../tabs-layout/tabs-state";
-
+import { PackageInfo } from "./package-info";
+import { PackageVersionsList } from "./package-versions";
 
 interface IProps {
   packageId: string;
 }
 
 export const PackageDetails = (props: IProps) => {
-
   const refresh = useObservableState(Date.now());
   const saveDeviceTagRef = React.useRef<(() => Promise<void>) | null>(null);
 
-  const pkg = usePromise(async () => {
-    const pkg = await Packages().get(props.packageId);
-    if (!pkg) {
-      throw new Error('Workflow not found');
-    }
-    updateActiveTabTitle(pkg.name || "Package");
-    return Packages().initDoc(pkg);
-  }, undefined, [props.packageId, refresh()]);
+  const pkg = usePromise(
+    async () => {
+      const pkg = await Packages().get(props.packageId);
+      if (!pkg) {
+        throw new Error("Workflow not found");
+      }
+      updateActiveTabTitle(pkg.name || "Package");
+      return Packages().initDoc(pkg);
+    },
+    undefined,
+    [props.packageId, refresh()],
+  );
 
   if (!pkg) {
     return <LoadingIndicator />;
   }
 
-  const addActions: ISaveButtonProps['addActions'] = [
+  const addActions: ISaveButtonProps["addActions"] = [
     {
-      label: 'Reload Package',
+      label: "Reload Package",
       onClick: async () => {
         await rpcServerCalls.addOrUpdatePackage(pkg.packageId, { update: true });
         await pkg.load();
         window.location.reload();
-      }
+      },
     },
   ];
   if (!pkg.remoteRepo) {
     addActions.push({
-      label: 'Make Remote ',
+      label: "Make Remote ",
       // className: 'text-bg-warning',
       onClick: async () => {
         if (confirm(`Create a remote repository from this local one: ${pkg.name}`)) {
           try {
-            await rpcServerCalls.addOrUpdatePackage(pkg.packageId, { linkRemote: true, update: true });
+            await rpcServerCalls.addOrUpdatePackage(pkg.packageId, {
+              linkRemote: true,
+              update: true,
+            });
             refresh(Date.now());
           } catch (err) {
             alert(`Error linking remote repo: ${err}`);
           }
         }
-      }
+      },
     });
   }
 
   return (
     <div className="container-fluid p-3">
-
       <div className="d-flex">
         <div>
           <h4>
@@ -72,8 +76,8 @@ export const PackageDetails = (props: IProps) => {
           <h4>
             <Input
               key={pkg.packageId}
-              className='border border-0'
-              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              className="border border-0"
+              style={{ width: "100%", outline: "none", backgroundColor: "transparent" }}
               value={pkg.qs.name}
             />
           </h4>
@@ -86,9 +90,7 @@ export const PackageDetails = (props: IProps) => {
               await pkg.save();
               await saveDeviceTagRef.current?.();
             }}
-            addActions={[
-              ...addActions
-            ]}
+            addActions={[...addActions]}
           />
         </div>
       </div>
@@ -97,31 +99,37 @@ export const PackageDetails = (props: IProps) => {
         key={pkg.packageId}
         tabs={[
           {
-            name: 'Info', content:
+            name: "Info",
+            content: (
               <ScreenTabBody>
                 <PackageInfo pkg={pkg} saveDeviceTagRef={saveDeviceTagRef} />
               </ScreenTabBody>
+            ),
           },
           {
-            name: 'Versions', content:
+            name: "Versions",
+            content: (
               <ScreenTabBody>
                 <PackageVersionsList pkg={pkg} />
               </ScreenTabBody>
+            ),
           },
           {
-            name: 'Components', content:
+            name: "Components",
+            content: (
               <ScreenTabBody>
                 TODO - show all of the different components in the package
               </ScreenTabBody>
+            ),
           },
           {
-            name: 'Dependencies', content:
-              <ScreenTabBody>
-                TODO - show all of the dependencies of the package
-              </ScreenTabBody>
+            name: "Dependencies",
+            content: (
+              <ScreenTabBody>TODO - show all of the dependencies of the package</ScreenTabBody>
+            ),
           },
         ]}
       />
     </div>
-  )
-}
+  );
+};

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

@@ -1,15 +1,24 @@
+import {
+  doesTagMatch,
+  groupDeviceVar,
+  type IDoc,
+  type IPackage,
+  type IPackageVersion,
+  PackageVersions,
+  packagesRootDir,
+  rpcServerCalls,
+} from "@peers-app/peers-sdk";
 import React from "react";
-import { rpcServerCalls, IDoc, IPackage, IPackageVersion, PackageVersions, packagesRootDir, groupDeviceVar, doesTagMatch } from "@peers-app/peers-sdk";
+import { Input } from "../../components/input";
 import { MarkdownWithMentions } from "../../components/markdown-with-mentions";
 import { Tooltip } from "../../components/tooltip";
-import { Input } from "../../components/input";
 import { useObservable, usePromise } from "../../hooks";
 
-const deviceVersionTagVar = groupDeviceVar<string | undefined>('deviceVersionTag');
+const deviceVersionTagVar = groupDeviceVar<string | undefined>("deviceVersionTag");
 
 export const PackageInfo = (props: {
-  pkg: IDoc<IPackage>,
-  saveDeviceTagRef?: React.MutableRefObject<(() => Promise<void>) | null>,
+  pkg: IDoc<IPackage>;
+  saveDeviceTagRef?: React.MutableRefObject<(() => Promise<void>) | null>;
 }) => {
   const { pkg } = props;
   const [activeVersionId] = useObservable(pkg.qs.activePackageVersionId);
@@ -22,16 +31,16 @@ export const PackageInfo = (props: {
   });
   const [localPath, setLocalPath] = useObservable(localPathVar);
 
-  const [deviceTagDraft, setDeviceTagDraft] = React.useState(deviceTag || '');
+  const [deviceTagDraft, setDeviceTagDraft] = React.useState(deviceTag || "");
   const savingRef = React.useRef(false);
 
   React.useEffect(() => {
     if (!savingRef.current) {
-      setDeviceTagDraft(deviceTag || '');
+      setDeviceTagDraft(deviceTag || "");
     }
   }, [deviceTag]);
 
-  const deviceTagDirty = deviceTagDraft.trim() !== (deviceTag || '');
+  const deviceTagDirty = deviceTagDraft.trim() !== (deviceTag || "");
   const prevDirtyRef = React.useRef(false);
   React.useEffect(() => {
     if (deviceTagDirty && !prevDirtyRef.current) {
@@ -40,12 +49,12 @@ export const PackageInfo = (props: {
       pkg.q(Math.max(0, (pkg.q() || 0) - 1));
     }
     prevDirtyRef.current = deviceTagDirty;
-  }, [deviceTagDirty]);
+  }, [deviceTagDirty, pkg.q]);
 
   if (props.saveDeviceTagRef) {
     props.saveDeviceTagRef.current = async () => {
       const val = deviceTagDraft.trim();
-      if (val !== (deviceTag || '')) {
+      if (val !== (deviceTag || "")) {
         savingRef.current = true;
         try {
           if (val) {
@@ -60,32 +69,55 @@ export const PackageInfo = (props: {
     };
   }
 
-  const activeVersion = usePromise(async () => {
-    if (!activeVersionId) return null;
-    return PackageVersions().get(activeVersionId) as Promise<IPackageVersion | null>;
-  }, undefined, [activeVersionId]);
-
-  const newerLevel = usePromise(async (): Promise<'major' | 'minor' | 'patch' | 'uptodate'> => {
-    if (!activeVersionId) return 'uptodate';
-    const all = await PackageVersions().list({ packageId: pkg.packageId });
-    const active = all.find(v => v.packageVersionId === activeVersionId);
-    if (!active?.version) return 'uptodate';
-    const parse = (v: string) => v.split('.').map(Number);
-    const [aMaj, aMin, aPat] = parse(active.version);
-    let highest: 'major' | 'minor' | 'patch' | null = null;
-    for (const v of all) {
-      if (!v.version || v.packageVersionId === activeVersionId) continue;
-      if (!doesTagMatch(active.versionTag, v.versionTag, followVersionTags, deviceTag)) continue;
-      const [maj, min, pat] = parse(v.version);
-      if (maj > aMaj) return 'major';
-      if (maj === aMaj && min > aMin) { highest = 'minor'; continue; }
-      if (maj === aMaj && min === aMin && pat > aPat && !highest) { highest = 'patch'; continue; }
-      if (maj === aMaj && min === aMin && pat === aPat && (v.createdAt || '') > (active.createdAt || '') && !highest) { highest = 'patch'; }
-    }
-    return highest || 'uptodate';
-  }, undefined, [activeVersionId, pkg.packageId, followVersionTags, deviceTag]);
+  const activeVersion = usePromise(
+    async () => {
+      if (!activeVersionId) return null;
+      return PackageVersions().get(activeVersionId) as Promise<IPackageVersion | null>;
+    },
+    undefined,
+    [activeVersionId],
+  );
 
-  const isPinned = versionFollowRange === 'pinned';
+  const newerLevel = usePromise(
+    async (): Promise<"major" | "minor" | "patch" | "uptodate"> => {
+      if (!activeVersionId) return "uptodate";
+      const all = await PackageVersions().list({ packageId: pkg.packageId });
+      const active = all.find((v) => v.packageVersionId === activeVersionId);
+      if (!active?.version) return "uptodate";
+      const parse = (v: string) => v.split(".").map(Number);
+      const [aMaj, aMin, aPat] = parse(active.version);
+      let highest: "major" | "minor" | "patch" | null = null;
+      for (const v of all) {
+        if (!v.version || v.packageVersionId === activeVersionId) continue;
+        if (!doesTagMatch(active.versionTag, v.versionTag, followVersionTags, deviceTag)) continue;
+        const [maj, min, pat] = parse(v.version);
+        if (maj > aMaj) return "major";
+        if (maj === aMaj && min > aMin) {
+          highest = "minor";
+          continue;
+        }
+        if (maj === aMaj && min === aMin && pat > aPat && !highest) {
+          highest = "patch";
+          continue;
+        }
+        if (
+          maj === aMaj &&
+          min === aMin &&
+          pat === aPat &&
+          (v.createdAt || "") > (active.createdAt || "") &&
+          !highest
+        ) {
+          highest = "patch";
+        }
+      }
+      return highest || "uptodate";
+    },
+    undefined,
+    [activeVersionId, pkg.packageId, followVersionTags, deviceTag],
+  );
+
+  const isPinned = versionFollowRange === "pinned";
+  const remoteRepoUrl = pkg.remoteRepo;
 
   return (
     <div>
@@ -102,45 +134,49 @@ export const PackageInfo = (props: {
         <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`} />
+            <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(localPath || packagesRootDir);
               }}
-            >Open Local</button>
+            >
+              Open Local
+            </button>
           </small>
         </small>
         <input
           type="text"
           className="form-control mb-3 p-0 ps-2"
           placeholder="~/peers/packages/my-package"
-          value={localPath || ''}
-          onChange={e => setLocalPath(e.target.value)}
+          value={localPath || ""}
+          onChange={(e) => setLocalPath(e.target.value)}
         />
       </div>
 
-      {pkg.remoteRepo && (
+      {remoteRepoUrl ? (
         <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.`} />
+              <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!);
+                  rpcServerCalls.openLinkInBrowser(remoteRepoUrl);
                 }}
-              >Open Remote</button>
+              >
+                Open Remote
+              </button>
             </small>
           </small>
-          <Input
-            value={pkg.qs.remoteRepo}
-            className="form-control mb-3 p-0 ps-2"
-            disabled
-          />
+          <Input value={pkg.qs.remoteRepo} className="form-control mb-3 p-0 ps-2" disabled />
         </div>
-      )}
+      ) : null}
 
       <div className="mt-2">
         <hr />
@@ -152,15 +188,21 @@ export const PackageInfo = (props: {
           <div className="d-flex align-items-center mt-1 mb-3">
             <strong className="me-2">v{activeVersion.version}</strong>
             {activeVersion.versionTag && (
-              <span className={`badge ${activeVersion.versionTag.startsWith('beta') ? 'text-bg-warning' : 'text-bg-info'} me-2`}>
+              <span
+                className={`badge ${activeVersion.versionTag.startsWith("beta") ? "text-bg-warning" : "text-bg-info"} me-2`}
+              >
                 {activeVersion.versionTag}
               </span>
             )}
-            <code className="text-muted small me-2">{activeVersion.packageVersionHash?.substring(0, 8)}</code>
-            {newerLevel === 'uptodate' ? (
+            <code className="text-muted small me-2">
+              {activeVersion.packageVersionHash?.substring(0, 8)}
+            </code>
+            {newerLevel === "uptodate" ? (
               <span className="badge text-bg-success">Up to date</span>
             ) : newerLevel ? (
-              <span className={`badge text-bg-${newerLevel === 'major' ? 'danger' : newerLevel === 'minor' ? 'warning' : 'info'}`}>
+              <span
+                className={`badge text-bg-${newerLevel === "major" ? "danger" : newerLevel === "minor" ? "warning" : "info"}`}
+              >
                 Newer {newerLevel} version available
               </span>
             ) : null}
@@ -176,10 +218,10 @@ export const PackageInfo = (props: {
           </small>
           <select
             className="form-select form-select-sm"
-            value={versionFollowRange || 'latest'}
+            value={versionFollowRange || "latest"}
             onChange={(e) => {
-              const val = e.target.value as 'pinned' | 'patch' | 'minor' | 'latest';
-              pkg.versionFollowRange = val === 'latest' ? undefined : val;
+              const val = e.target.value as "pinned" | "patch" | "minor" | "latest";
+              pkg.versionFollowRange = val === "latest" ? undefined : val;
             }}
           >
             <option value="latest">Latest (auto-update to newest)</option>
@@ -189,7 +231,7 @@ export const PackageInfo = (props: {
           </select>
         </div>
 
-        <div className={`mb-3 ${isPinned ? 'opacity-50' : ''}`}>
+        <div className={`mb-3 ${isPinned ? "opacity-50" : ""}`}>
           <small>
             Follow Version Tags:
             <Tooltip markdownContent="Which version tags to auto-activate. Leave empty for **current** (follows the active version's tag). Use `*` for any tag, or a comma-separated list like `stable,prod`." />
@@ -197,7 +239,7 @@ export const PackageInfo = (props: {
           <Input
             value={pkg.qs.followVersionTags}
             className="form-control form-control-sm p-0 ps-2"
-            placeholder={`Following "${activeVersion?.versionTag || 'stable'}"`}
+            placeholder={`Following "${activeVersion?.versionTag || "stable"}"`}
             disabled={isPinned}
           />
         </div>
@@ -219,7 +261,7 @@ export const PackageInfo = (props: {
               <button
                 className="btn btn-sm btn-outline-secondary"
                 title="Clear device tag override"
-                onClick={() => setDeviceTagDraft('')}
+                onClick={() => setDeviceTagDraft("")}
               >
                 <i className="bi bi-x-lg"></i>
               </button>
@@ -232,13 +274,12 @@ export const PackageInfo = (props: {
         <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.`} />
+          <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>
-        <MarkdownWithMentions
-          content={pkg.description || ''}
-        />
+        <MarkdownWithMentions content={pkg.description || ""} />
       </div>
-
     </div>
-  )
-}
+  );
+};