@peers-app/peers-ui 0.14.0 → 0.15.0

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

@@ -1,5 +1,13 @@
-import React, { useState } from "react";
-import { computePackageVersionHash, IDoc, IPackage, IPackageVersion, Packages, PackageVersions, Users } from "@peers-app/peers-sdk";
+import {
+  computePackageVersionHash,
+  type IDoc,
+  type IPackage,
+  type IPackageVersion,
+  Packages,
+  PackageVersions,
+  Users,
+} from "@peers-app/peers-sdk";
+import { useState } from "react";
 import { useObservable, useObservableState, usePromise } from "../../hooks";
 
 function formatDate(iso: string): string {
@@ -8,7 +16,7 @@ function formatDate(iso: string): string {
     const now = new Date();
     const diffMs = now.getTime() - d.getTime();
     const diffMins = Math.floor(diffMs / 60000);
-    if (diffMins < 1) return 'just now';
+    if (diffMins < 1) return "just now";
     if (diffMins < 60) return `${diffMins}m ago`;
     const diffHours = Math.floor(diffMins / 60);
     if (diffHours < 24) return `${diffHours}h ago`;
@@ -21,10 +29,10 @@ function formatDate(iso: string): string {
 }
 
 function tagBadgeClass(tag?: string): string {
-  if (!tag) return 'text-bg-secondary';
-  if (tag.startsWith('beta')) return 'text-bg-warning';
-  if (tag === 'stable') return 'text-bg-info';
-  return 'text-bg-secondary';
+  if (!tag) return "text-bg-secondary";
+  if (tag.startsWith("beta")) return "text-bg-warning";
+  if (tag === "stable") return "text-bg-info";
+  return "text-bg-secondary";
 }
 
 export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
@@ -35,29 +43,35 @@ export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
   const [activating, setActivating] = useState<string | null>(null);
   const [deleting, setDeleting] = useState<string | null>(null);
   const [pinning, setPinning] = useState(false);
-  const isPinned = versionFollowRange === 'pinned';
+  const isPinned = versionFollowRange === "pinned";
 
-  const versions = usePromise(async () => {
-    const all = await PackageVersions().list({ packageId: pkg.packageId });
-    const parse = (v: string) => v.split('.').map(Number);
-    const sorted = all.sort((a, b) => {
-      const [aMaj, aMin, aPat] = parse(a.version || '0.0.0');
-      const [bMaj, bMin, bPat] = parse(b.version || '0.0.0');
-      if (bMaj !== aMaj) return bMaj - aMaj;
-      if (bMin !== aMin) return bMin - aMin;
-      if (bPat !== aPat) return bPat - aPat;
-      return (b.createdAt || '').localeCompare(a.createdAt || '');
-    });
-    const uniqueCreatorIds = [...new Set(sorted.map(pv => pv.createdBy).filter(Boolean))];
-    const userMap = new Map<string, string>();
-    await Promise.all(uniqueCreatorIds.map(async (uid) => {
-      try {
-        const user = await Users().get(uid, { useCache: true });
-        if (user?.name) userMap.set(uid, user.name);
-      } catch {}
-    }));
-    return { sorted, userMap };
-  }, undefined, [pkg.packageId, refreshKey()]);
+  const versions = usePromise(
+    async () => {
+      const all = await PackageVersions().list({ packageId: pkg.packageId });
+      const parse = (v: string) => v.split(".").map(Number);
+      const sorted = all.sort((a, b) => {
+        const [aMaj, aMin, aPat] = parse(a.version || "0.0.0");
+        const [bMaj, bMin, bPat] = parse(b.version || "0.0.0");
+        if (bMaj !== aMaj) return bMaj - aMaj;
+        if (bMin !== aMin) return bMin - aMin;
+        if (bPat !== aPat) return bPat - aPat;
+        return (b.createdAt || "").localeCompare(a.createdAt || "");
+      });
+      const uniqueCreatorIds = [...new Set(sorted.map((pv) => pv.createdBy).filter(Boolean))];
+      const userMap = new Map<string, string>();
+      await Promise.all(
+        uniqueCreatorIds.map(async (uid) => {
+          try {
+            const user = await Users().get(uid, { useCache: true });
+            if (user?.name) userMap.set(uid, user.name);
+          } catch {}
+        }),
+      );
+      return { sorted, userMap };
+    },
+    undefined,
+    [pkg.packageId, refreshKey()],
+  );
 
   async function activateVersion(pv: IPackageVersion) {
     setActivating(pv.packageVersionId);
@@ -77,7 +91,8 @@ export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
   }
 
   async function deleteVersion(pv: IPackageVersion) {
-    if (!confirm(`Delete version v${pv.version} (${pv.packageVersionHash?.substring(0, 8)})?`)) return;
+    if (!confirm(`Delete version v${pv.version} (${pv.packageVersionHash?.substring(0, 8)})?`))
+      return;
     setDeleting(pv.packageVersionId);
     try {
       await PackageVersions().delete(pv.packageVersionId);
@@ -91,7 +106,13 @@ export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
 
   async function promoteVersion(pv: IPackageVersion, newTag: string) {
     try {
-      const pvHash = computePackageVersionHash(pv.version, newTag, pv.packageBundleFileHash, pv.routesBundleFileHash, pv.uiBundleFileHash);
+      const pvHash = computePackageVersionHash(
+        pv.version,
+        newTag,
+        pv.packageBundleFileHash,
+        pv.routesBundleFileHash,
+        pv.uiBundleFileHash,
+      );
       const updated = { ...pv, versionTag: newTag, packageVersionHash: pvHash };
       await PackageVersions().signAndSave(updated, { saveAsSnapshot: true });
       refreshKey(refreshKey() + 1);
@@ -102,7 +123,13 @@ export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
 
   async function updateVersion(pv: IPackageVersion, newSemver: string) {
     try {
-      const pvHash = computePackageVersionHash(newSemver, pv.versionTag || 'beta', pv.packageBundleFileHash, pv.routesBundleFileHash, pv.uiBundleFileHash);
+      const pvHash = computePackageVersionHash(
+        newSemver,
+        pv.versionTag || "beta",
+        pv.packageBundleFileHash,
+        pv.routesBundleFileHash,
+        pv.uiBundleFileHash,
+      );
       const updated = { ...pv, version: newSemver, packageVersionHash: pvHash };
       await PackageVersions().signAndSave(updated, { saveAsSnapshot: true });
       refreshKey(refreshKey() + 1);
@@ -116,7 +143,7 @@ export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
     try {
       const current = await Packages().get(pkg.packageId);
       if (current) {
-        current.versionFollowRange = 'pinned';
+        current.versionFollowRange = "pinned";
         await Packages().signAndSave(current);
         await pkg.load();
       }
@@ -128,7 +155,11 @@ export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
   }
 
   if (!versions) {
-    return <div className="text-center p-3"><div className="spinner-border spinner-border-sm" /></div>;
+    return (
+      <div className="text-center p-3">
+        <div className="spinner-border spinner-border-sm" />
+      </div>
+    );
   }
 
   const { sorted, userMap } = versions;
@@ -144,9 +175,11 @@ export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
 
   return (
     <div>
-      <small className="text-muted">{sorted.length} version{sorted.length !== 1 ? 's' : ''}</small>
+      <small className="text-muted">
+        {sorted.length} version{sorted.length !== 1 ? "s" : ""}
+      </small>
       <div className="list-group mt-2">
-        {sorted.map(pv => (
+        {sorted.map((pv) => (
           <VersionRow
             key={pv.packageVersionId}
             pv={pv}
@@ -168,7 +201,7 @@ export const PackageVersionsList = (props: { pkg: IDoc<IPackage> }) => {
   );
 };
 
-const TAG_OPTIONS = ['beta', 'stable'];
+const TAG_OPTIONS = ["beta", "stable"];
 
 function VersionRow(props: {
   pv: IPackageVersion;
@@ -202,31 +235,30 @@ function VersionRow(props: {
     setEditingVersion(false);
   }
 
-  const currentTag = pv.versionTag || 'beta';
-  const promoteTargets = TAG_OPTIONS.filter(t => t !== currentTag);
+  const currentTag = pv.versionTag || "beta";
+  const promoteTargets = TAG_OPTIONS.filter((t) => t !== currentTag);
 
   return (
-    <div className={`list-group-item ${isActive ? 'list-group-item-success' : ''}`}>
+    <div className={`list-group-item ${isActive ? "list-group-item-success" : ""}`}>
       <div className="d-flex align-items-center justify-content-between">
         <div className="d-flex align-items-center flex-wrap">
           {editingVersion ? (
             <input
               type="text"
               className="form-control form-control-sm me-2"
-              style={{ width: '7em' }}
+              style={{ width: "7em" }}
               value={versionDraft}
-              onChange={e => setVersionDraft(e.target.value)}
+              onChange={(e) => setVersionDraft(e.target.value)}
               onBlur={commitVersion}
-              onKeyDown={e => {
-                if (e.key === 'Enter') commitVersion();
-                if (e.key === 'Escape') setEditingVersion(false);
+              onKeyDown={(e) => {
+                if (e.key === "Enter") commitVersion();
+                if (e.key === "Escape") setEditingVersion(false);
               }}
-              autoFocus
             />
           ) : (
             <strong
               className="me-2"
-              style={{ cursor: 'pointer' }}
+              style={{ cursor: "pointer" }}
               onClick={startEditing}
               title="Click to edit version"
             >
@@ -234,17 +266,11 @@ function VersionRow(props: {
             </strong>
           )}
           {pv.versionTag && (
-            <span className={`badge ${tagBadgeClass(pv.versionTag)} me-2`}>
-              {pv.versionTag}
-            </span>
+            <span className={`badge ${tagBadgeClass(pv.versionTag)} me-2`}>{pv.versionTag}</span>
           )}
-          <code className="text-muted small me-2">
-            {pv.packageVersionHash?.substring(0, 8)}
-          </code>
+          <code className="text-muted small me-2">{pv.packageVersionHash?.substring(0, 8)}</code>
           <small className="text-muted me-2">{formatDate(pv.createdAt)}</small>
-          {creatorName && (
-            <small className="text-muted">by {creatorName}</small>
-          )}
+          {creatorName && <small className="text-muted">by {creatorName}</small>}
         </div>
         <div className="d-flex gap-1 align-items-center">
           {promoteTargets.length > 0 && (
@@ -257,12 +283,9 @@ function VersionRow(props: {
                 Promote
               </button>
               <ul className="dropdown-menu dropdown-menu-end">
-                {promoteTargets.map(tag => (
+                {promoteTargets.map((tag) => (
                   <li key={tag}>
-                    <button
-                      className="dropdown-item"
-                      onClick={() => props.onPromote(pv, tag)}
-                    >
+                    <button className="dropdown-item" onClick={() => props.onPromote(pv, tag)}>
                       {currentTag} &rarr; {tag}
                     </button>
                   </li>
@@ -270,22 +293,24 @@ function VersionRow(props: {
               </ul>
             </div>
           )}
-          {isActive ? (<>
-            <button
-              className="btn btn-sm btn-outline-secondary"
-              disabled={isPinned || pinning}
-              onClick={() => props.onPin()}
-              title={isPinned ? 'Already pinned' : 'Pin to this version (disable auto-updates)'}
-            >
-              {pinning ? (
-                <span className="spinner-border spinner-border-sm" />
-              ) : (
-                <i className="bi bi-pin-fill"></i>
-              )}
-              {isPinned ? ' Pinned' : ' Pin'}
-            </button>
-            <span className="badge text-bg-success align-self-center">active</span>
-          </>) : (
+          {isActive ? (
+            <>
+              <button
+                className="btn btn-sm btn-outline-secondary"
+                disabled={isPinned || pinning}
+                onClick={() => props.onPin()}
+                title={isPinned ? "Already pinned" : "Pin to this version (disable auto-updates)"}
+              >
+                {pinning ? (
+                  <span className="spinner-border spinner-border-sm" />
+                ) : (
+                  <i className="bi bi-pin-fill"></i>
+                )}
+                {isPinned ? " Pinned" : " Pin"}
+              </button>
+              <span className="badge text-bg-success align-self-center">active</span>
+            </>
+          ) : (
             <button
               className="btn btn-sm btn-outline-primary"
               disabled={activating === pv.packageVersionId}

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

@@ -1,5 +1,11 @@
-import { IDoc, IOSchema, IPeerType, Observable, PeerTypes } from "@peers-app/peers-sdk";
-import React, { useEffect } from "react";
+import {
+  type IDoc,
+  type IOSchema,
+  type IPeerType,
+  type Observable,
+  PeerTypes,
+} from "@peers-app/peers-sdk";
+import { useEffect } from "react";
 import { Input } from "../../components/input";
 import { IOSchemaEditor } from "../../components/io-schema";
 import { LoadingIndicator } from "../../components/loading-indicator";
@@ -15,26 +21,31 @@ interface IProps {
 }
 
 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]);
-
+  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, '');
+      valueType.name = valueType.qs
+        .name()
+        .replaceAll(/\s/g, "_")
+        .replaceAll(/[^a-zA-Z0-9_-]/g, "");
     });
     return () => {
       sub.dispose();
-    }
+    };
   }, [valueType]);
 
   if (!valueType) {
@@ -43,7 +54,6 @@ export const PeerTypeDetails = (props: IProps) => {
 
   return (
     <div className="container-fluid p-3">
-
       <div className="d-flex">
         <div>
           <h4>
@@ -54,17 +64,14 @@ export const PeerTypeDetails = (props: IProps) => {
           <h4>
             <Input
               key={valueType.peerTypeId}
-              className='border border-0'
-              style={{ width: '100%', outline: 'none', backgroundColor: 'transparent' }}
+              className="border border-0"
+              style={{ width: "100%", outline: "none", backgroundColor: "transparent" }}
               value={valueType.qs.name}
             />
           </h4>
         </div>
         <div>
-          <SaveButton
-            key={valueType.peerTypeId}
-            doc={valueType}
-          />
+          <SaveButton key={valueType.peerTypeId} doc={valueType} />
         </div>
       </div>
 
@@ -72,32 +79,34 @@ export const PeerTypeDetails = (props: IProps) => {
         key={valueType.peerTypeId}
         tabs={[
           {
-            name: 'Info', content:
+            name: "Info",
+            content: (
               <ScreenTabBody>
                 <VariableInfo valueType={valueType} />
               </ScreenTabBody>
+            ),
           },
           {
-            name: 'Schema', content:
+            name: "Schema",
+            content: (
               <ScreenTabBody>
                 <VariableSchema valueType={valueType} />
               </ScreenTabBody>
+            ),
           },
         ]}
       />
     </div>
-  )
-}
-
+  );
+};
 
 const VariableInfo = (props: { valueType: IDoc<IPeerType> }) => {
-  const { valueType } = props
+  const { valueType } = props;
 
-  valueType.description = valueType.description || '';
+  valueType.description = valueType.description || "";
 
   return (
     <div>
-
       <small className="text-body-secondary">Name:</small>
       <Input
         value={valueType.qs.name}
@@ -109,33 +118,34 @@ const VariableInfo = (props: { valueType: IDoc<IPeerType> }) => {
       <small className="text-body-secondary">
         Icon Class:
         <small>
-          <Tooltip markdownContent={[
-            'Icon classes can be found at:',
-            '[Bootstrap Icons](https://icons.getbootstrap.com/)',
-          ].join(' ')} />
+          <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>}
-      />
-
+      <MarkdownEditorInline value={valueType.qs.description as Observable<string>} />
     </div>
-  )
-}
+  );
+};
 
 const VariableSchema = (props: { valueType: IDoc<IPeerType> }) => {
-  const { valueType } = props
+  const { valueType } = props;
 
   return (
     <div>
-      <IOSchemaEditor ioSchema={valueType.qs.schema as Observable<IOSchema>} simpleValueName="value" />
+      <IOSchemaEditor
+        ioSchema={valueType.qs.schema as Observable<IOSchema>}
+        simpleValueName="value"
+      />
     </div>
-  )
-}
+  );
+};
 
 export const IconPicker = (props: { icon: Observable<string | undefined> }) => {
   const { icon } = props;
@@ -143,7 +153,7 @@ export const IconPicker = (props: { icon: Observable<string | undefined> }) => {
   useObservable(icon);
 
   if (icon() === undefined) {
-    icon('');
+    icon("");
   }
 
   return (
@@ -153,10 +163,10 @@ export const IconPicker = (props: { icon: Observable<string | undefined> }) => {
         className="form-control mb-3 p-0 ps-2"
         placeholder="icon class"
         title="Icon"
-      />      
-      <div className="me-2 ms-2" style={{ width: '22px'}}>
+      />
+      <div className="me-2 ms-2" style={{ width: "22px" }}>
         <i className={icon()}></i>
       </div>
     </div>
-  )
-}
+  );
+};

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

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