@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/screens/workflows/workflow-list.tsx

@@ -1,30 +1,39 @@
-import { ICursorIterable, IWorkflow, newid, observable, Workflows } 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 { MarkdownWithMentions } from '../../components/markdown-with-mentions';
-import { isDesktop, mainContentPath, me } from '../../globals';
-import { useObservable } from '../../hooks';
+import {
+  type ICursorIterable,
+  type IWorkflow,
+  newid,
+  observable,
+  Workflows,
+} 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 { MarkdownWithMentions } from "../../components/markdown-with-mentions";
+import { isDesktop, mainContentPath, me } from "../../globals";
+import { useObservable } from "../../hooks";
 
 export function WorkflowList() {
-
-  const [searchTextObs] = useState(() => observable(''));
+  const [searchTextObs] = useState(() => observable(""));
   const [searchText] = useObservable(searchTextObs);
 
   const [cursorObs] = useState(() => observable<ICursorIterable<IWorkflow> | undefined>());
   const [cursorId] = useState(() => observable(newid()));
 
-  async function newCursor() {
-    const cursor = await Workflows().cursor({ name: { $matchWords: searchText } }, { sortBy: ['-updatedAt'] });
+  const newCursor = useCallback(async () => {
+    const cursor = await Workflows().cursor(
+      { name: { $matchWords: searchText } },
+      { sortBy: ["-updatedAt"] },
+    );
     cursorObs(cursor);
     cursorId(newid());
     return cursor;
-  }
+  }, [searchText, cursorObs, cursorId]);
 
   useEffect(() => {
-    newCursor();
-  }, [searchText]);
+    void newCursor();
+  }, [newCursor]);
 
   async function searchSubmit(evt: React.KeyboardEvent<HTMLInputElement>) {
     if (evt.key !== "Enter") return;
@@ -32,10 +41,12 @@ export function WorkflowList() {
     const workflowName = searchText.trim();
     const workflow = await Workflows().initRecord({
       name: workflowName,
-      description: '',
-      instructions: [{
-        markdown: '// TODO add a link to workflow documentation and examples',
-      }],
+      description: "",
+      instructions: [
+        {
+          markdown: "// TODO add a link to workflow documentation and examples",
+        },
+      ],
       createdBy: me.userId,
       // defaultAssistantId: '',
     });
@@ -43,27 +54,30 @@ export function WorkflowList() {
     mainContentPath(`workflows/${workflow.workflowId}`);
   }
 
-
   async function loadMore(existingWorkflows: IWorkflow[]): Promise<IWorkflow[]> {
-    let moreMatches: IWorkflow[] = [];
-    let cursor = cursorObs() || await newCursor();
+    const moreMatches: IWorkflow[] = [];
+    const cursor = cursorObs() || (await newCursor());
     for await (const workflow of cursor) {
-      if (existingWorkflows.find(w => w.workflowId === workflow.workflowId)) continue;
+      if (existingWorkflows.find((w) => w.workflowId === workflow.workflowId)) continue;
       moreMatches.push(workflow);
       if (searchText.length && moreMatches.length > 5) break;
       if (moreMatches.length >= 50) break;
     }
     if (moreMatches.length === 0) {
       cursorObs(undefined);
-    }    
+    }
     return moreMatches;
   }
 
   return (
-    <div className='container-fluid'>
-      <Input value={searchTextObs} className="form-control mt-3" style={{ marginBottom: "10px" }} placeholder="Search or create new workflow"
-        autoFocus={isDesktop() ? true : false}
-        onKeyUp={evt => searchSubmit(evt)}
+    <div className="container-fluid">
+      <Input
+        value={searchTextObs}
+        className="form-control mt-3"
+        style={{ marginBottom: "10px" }}
+        placeholder="Search or create new workflow"
+        autoFocus={!!isDesktop()}
+        onKeyUp={(evt) => searchSubmit(evt)}
       />
 
       <div className="peers-list-container">
@@ -72,23 +86,19 @@ export function WorkflowList() {
           loadMore={loadMore}
           scrollThreshold={0.6}
           renderItems={(workflows) => {
-            return workflows.map(workflow => {
-              const markdownContent = workflow.description || workflow.instructions[0].markdown || '';
+            return workflows.map((workflow) => {
+              const markdownContent =
+                workflow.description || workflow.instructions[0].markdown || "";
               return (
-                <div
-                  key={workflow.workflowId}
-                  className='container-fluid pb-4'
-                >
+                <div key={workflow.workflowId} className="container-fluid pb-4">
                   <i className="bi bi-database-fill-gear"></i>&nbsp;
-                  <a href={`#workflows/${workflow.workflowId}`}>
-                    {workflow.name}
-                  </a>
-                  <div style={{ paddingLeft: '20px' }}>
+                  <a href={`#workflows/${workflow.workflowId}`}>{workflow.name}</a>
+                  <div style={{ paddingLeft: "20px" }}>
                     <MarkdownWithMentions content={markdownContent} />
                   </div>
                 </div>
-              )
-            })
+              );
+            });
           }}
           loadingIndicator={
             <div className="d-flex justify-content-center" style={{ height: 200 }}>

package/src/setupTests.ts

@@ -1,22 +1,23 @@
-import '@testing-library/jest-dom';
-import { TextEncoder, TextDecoder } from 'util';
+import "@testing-library/jest-dom";
+import { TextDecoder, TextEncoder } from "node:util";
 
 // Polyfill TextEncoder/TextDecoder for jsdom environment
-global.TextEncoder = TextEncoder;
-global.TextDecoder = TextDecoder as any;
+global.TextEncoder = TextEncoder as typeof globalThis.TextEncoder;
+global.TextDecoder = TextDecoder as typeof globalThis.TextDecoder;
 
-// Mock IntersectionObserver
-(global as any).IntersectionObserver = class {
-  constructor() {}
+const MockIntersectionObserver = class {
   disconnect() {}
   observe() {}
   unobserve() {}
 };
+(
+  globalThis as typeof globalThis & { IntersectionObserver: typeof IntersectionObserver }
+).IntersectionObserver = MockIntersectionObserver as unknown as typeof IntersectionObserver;
 
 // Mock window.matchMedia
-Object.defineProperty(window, 'matchMedia', {
+Object.defineProperty(window, "matchMedia", {
   writable: true,
-  value: jest.fn().mockImplementation(query => ({
+  value: jest.fn().mockImplementation((query) => ({
     matches: false,
     media: query,
     onchange: null,
@@ -28,10 +29,10 @@ Object.defineProperty(window, 'matchMedia', {
   })),
 });
 
-// Mock ResizeObserver
-(global as any).ResizeObserver = class {
-  constructor() {}
+const MockResizeObserver = class {
   disconnect() {}
   observe() {}
   unobserve() {}
-};
+};
+(globalThis as typeof globalThis & { ResizeObserver: typeof ResizeObserver }).ResizeObserver =
+  MockResizeObserver as unknown as typeof ResizeObserver;

package/src/system-apps/assistants.app.ts

@@ -1,7 +1,7 @@
-import { IAppNav } from "@peers-app/peers-sdk";
+import type { IAppNav } from "@peers-app/peers-sdk";
 
 export const assistantsApp: IAppNav = {
-  name: 'Assistants',
-  iconClassName: 'bi-person-fill-gear',
-  navigationPath: 'assistants'
-};
+  name: "Assistants",
+  iconClassName: "bi-person-fill-gear",
+  navigationPath: "assistants",
+};

package/src/system-apps/console-logs.app.ts

@@ -1,7 +1,7 @@
-import { IAppNav } from "@peers-app/peers-sdk";
+import type { IAppNav } from "@peers-app/peers-sdk";
 
 export const consoleLogsApp: IAppNav = {
-  name: 'Console Logs',
-  iconClassName: 'bi-terminal',
-  navigationPath: 'console-logs'
+  name: "Console Logs",
+  iconClassName: "bi-terminal",
+  navigationPath: "console-logs",
 };

package/src/system-apps/contacts.app.ts

@@ -1,8 +1,8 @@
-import { IAppNav } from "@peers-app/peers-sdk";
+import type { IAppNav } from "@peers-app/peers-sdk";
 
 export const contactsApp: IAppNav = {
-  name: 'Contacts',
-  displayName: 'Contacts',
-  iconClassName: 'bi-person-fill-check',
-  navigationPath: 'contacts'
-};
+  name: "Contacts",
+  displayName: "Contacts",
+  iconClassName: "bi-person-fill-check",
+  navigationPath: "contacts",
+};

package/src/system-apps/data-explorer.app.ts

@@ -1,8 +1,8 @@
-import { IAppNav } from "@peers-app/peers-sdk";
+import type { IAppNav } from "@peers-app/peers-sdk";
 
 export const dataExplorerApp: IAppNav = {
-  name: 'Data Explorer',
-  displayName: 'Data',
-  iconClassName: 'bi-database',
-  navigationPath: 'data-explorer'
+  name: "Data Explorer",
+  displayName: "Data",
+  iconClassName: "bi-database",
+  navigationPath: "data-explorer",
 };

package/src/system-apps/groups.app.ts

@@ -1,8 +1,8 @@
-import { IAppNav } from "@peers-app/peers-sdk";
+import type { IAppNav } from "@peers-app/peers-sdk";
 
 export const groupsApp: IAppNav = {
-  name: 'Groups',
-  displayName: 'Groups',
-  iconClassName: 'bi-people-fill',
-  navigationPath: 'groups'
-};
+  name: "Groups",
+  displayName: "Groups",
+  iconClassName: "bi-people-fill",
+  navigationPath: "groups",
+};

package/src/system-apps/index.ts

@@ -1,44 +1,44 @@
-import { IAppNav, IPackage } from "@peers-app/peers-sdk";
+import type { IAppNav, IPackage } from "@peers-app/peers-sdk";
 
+export { assistantsApp } from "./assistants.app";
+export { consoleLogsApp } from "./console-logs.app";
+export { contactsApp } from "./contacts.app";
+export { dataExplorerApp } from "./data-explorer.app";
+export { groupsApp } from "./groups.app";
+export { joinGroupApp } from "./join-group.app";
+export { mobileSettingsApp } from "./mobile-settings.app";
+export { networkViewerApp } from "./network-viewer.app";
+export { packagesApp } from "./packages.app";
 // Import all system apps
-export { searchApp } from './search.app';
-export { assistantsApp } from './assistants.app';
-export { toolsApp } from './tools.app';
-export { workflowsApp } from './workflows.app';
-export { variablesApp } from './variables.app';
-export { typesApp } from './types.app';
-export { packagesApp } from './packages.app';
-export { threadsApp } from './threads.app';
-export { settingsApp } from './settings.app';
-export { groupsApp } from './groups.app';
-export { joinGroupApp } from './join-group.app';
-export { contactsApp } from './contacts.app';
-export { consoleLogsApp } from './console-logs.app';
-export { networkViewerApp } from './network-viewer.app';
-export { dataExplorerApp } from './data-explorer.app';
-export { mobileSettingsApp } from './mobile-settings.app';
+export { searchApp } from "./search.app";
+export { settingsApp } from "./settings.app";
+export { threadsApp } from "./threads.app";
+export { toolsApp } from "./tools.app";
+export { typesApp } from "./types.app";
+export { variablesApp } from "./variables.app";
+export { workflowsApp } from "./workflows.app";
 
+import { assistantsApp } from "./assistants.app";
+import { consoleLogsApp } from "./console-logs.app";
+import { contactsApp } from "./contacts.app";
+import { dataExplorerApp } from "./data-explorer.app";
+import { groupsApp } from "./groups.app";
+import { joinGroupApp } from "./join-group.app";
+import { mobileSettingsApp } from "./mobile-settings.app";
+import { networkViewerApp } from "./network-viewer.app";
+import { packagesApp } from "./packages.app";
 // Import individual apps
-import { searchApp } from './search.app';
-import { assistantsApp } from './assistants.app';
-import { toolsApp } from './tools.app';
-import { workflowsApp } from './workflows.app';
-import { variablesApp } from './variables.app';
-import { typesApp } from './types.app';
-import { packagesApp } from './packages.app';
-import { threadsApp } from './threads.app';
-import { settingsApp } from './settings.app';
-import { groupsApp } from './groups.app';
-import { joinGroupApp } from './join-group.app';
-import { contactsApp } from './contacts.app';
-import { consoleLogsApp } from './console-logs.app';
-import { networkViewerApp } from './network-viewer.app';
-import { dataExplorerApp } from './data-explorer.app';
-import { mobileSettingsApp } from './mobile-settings.app';
+import { searchApp } from "./search.app";
+import { settingsApp } from "./settings.app";
+import { threadsApp } from "./threads.app";
+import { toolsApp } from "./tools.app";
+import { typesApp } from "./types.app";
+import { variablesApp } from "./variables.app";
+import { workflowsApp } from "./workflows.app";
 
 // Helper to check if running in React Native
 function isReactNative(): boolean {
-  return typeof (window as any).__NATIVE_THEME !== 'undefined';
+  return typeof (window as Window & { __NATIVE_THEME?: unknown }).__NATIVE_THEME !== "undefined";
 }
 
 // Collection of all system apps
@@ -47,35 +47,35 @@ export const systemApps: IAppNav[] = [
   searchApp,
   threadsApp,
 
+  // System Tools & Debugging
+  networkViewerApp,
+  consoleLogsApp,
+  dataExplorerApp,
+
   // Core Management Apps
-  variablesApp,
   typesApp,
-  assistantsApp,
+  variablesApp,
   toolsApp,
   workflowsApp,
+  assistantsApp,
   packagesApp,
+  contactsApp,
   groupsApp,
   joinGroupApp,
-  contactsApp,
-  
+
   // User & Settings Apps
   settingsApp,
   // Mobile Settings (only in React Native)
   ...(isReactNative() ? [mobileSettingsApp] : []),
-
-  // System Tools & Debugging
-  consoleLogsApp,
-  networkViewerApp,
-  dataExplorerApp,
 ];
 
 // Virtual system package for tabs integration
 export const systemPackage: IPackage = {
-  packageId: 'system-apps',
-  name: 'System Apps',
-  description: 'Core system functionality and management tools',
+  packageId: "system-apps",
+  name: "System Apps",
+  description: "Core system functionality and management tools",
   appNavs: systemApps,
-  createdBy: 'system',
+  createdBy: "system",
   disabled: false,
-  signature: '',
-};
+  signature: "",
+};

package/src/system-apps/join-group.app.ts

@@ -1,8 +1,8 @@
-import { IAppNav } from "@peers-app/peers-sdk";
+import type { IAppNav } from "@peers-app/peers-sdk";
 
 export const joinGroupApp: IAppNav = {
-  name: 'Join Group',
-  displayName: 'Join Group',
-  iconClassName: 'bi-box-arrow-in-right',
-  navigationPath: 'join-group'
+  name: "Join Group",
+  displayName: "Join Group",
+  iconClassName: "bi-box-arrow-in-right",
+  navigationPath: "join-group",
 };

package/src/system-apps/mobile-settings.app.ts

@@ -1,8 +1,7 @@
-import { IAppNav } from "@peers-app/peers-sdk";
+import type { IAppNav } from "@peers-app/peers-sdk";
 
 export const mobileSettingsApp: IAppNav = {
-  name: 'Mobile Settings',
-  iconClassName: 'bi-phone-fill',
-  navigationPath: 'mobile-settings'
+  name: "Mobile Settings",
+  iconClassName: "bi-phone-fill",
+  navigationPath: "mobile-settings",
 };
-

package/src/system-apps/network-viewer.app.ts

@@ -1,8 +1,8 @@
-import { IAppNav } from "@peers-app/peers-sdk";
+import type { IAppNav } from "@peers-app/peers-sdk";
 
 export const networkViewerApp: IAppNav = {
-  name: 'Network Viewer',
-  displayName: 'Network',
-  iconClassName: 'bi-diagram-3-fill',
-  navigationPath: 'network-viewer'
+  name: "Network Viewer",
+  displayName: "Network",
+  iconClassName: "bi-diagram-3-fill",
+  navigationPath: "network-viewer",
 };

package/src/system-apps/packages.app.ts

@@ -1,7 +1,7 @@
-import { IAppNav } from "@peers-app/peers-sdk";
+import type { IAppNav } from "@peers-app/peers-sdk";
 
 export const packagesApp: IAppNav = {
-  name: 'Packages',
-  iconClassName: 'bi-box-fill',
-  navigationPath: 'packages'
-};
+  name: "Packages",
+  iconClassName: "bi-box-fill",
+  navigationPath: "packages",
+};

package/src/system-apps/search.app.ts

@@ -1,8 +1,8 @@
-import { IAppNav } from "@peers-app/peers-sdk";
+import type { IAppNav } from "@peers-app/peers-sdk";
 
 export const searchApp: IAppNav = {
-  name: 'Search',
-  displayName: 'Search',
-  iconClassName: 'bi-search',
-  navigationPath: 'search',  
-};
+  name: "Search",
+  displayName: "Search",
+  iconClassName: "bi-search",
+  navigationPath: "search",
+};

package/src/system-apps/settings.app.ts

@@ -1,7 +1,7 @@
-import { IAppNav } from "@peers-app/peers-sdk";
+import type { IAppNav } from "@peers-app/peers-sdk";
 
 export const settingsApp: IAppNav = {
-  name: 'Settings',
-  iconClassName: 'bi-gear-fill',
-  navigationPath: 'settings'
-};
+  name: "Settings",
+  iconClassName: "bi-gear-fill",
+  navigationPath: "settings",
+};

package/src/system-apps/threads.app.ts

@@ -1,7 +1,7 @@
-import { IAppNav } from "@peers-app/peers-sdk";
+import type { IAppNav } from "@peers-app/peers-sdk";
 
 export const threadsApp: IAppNav = {
-  name: 'Threads',
-  iconClassName: 'bi-cpu',
-  navigationPath: 'threads'
-};
+  name: "Threads",
+  iconClassName: "bi-cpu",
+  navigationPath: "threads",
+};

package/src/system-apps/tools.app.ts

@@ -1,7 +1,7 @@
-import { IAppNav } from "@peers-app/peers-sdk";
+import type { IAppNav } from "@peers-app/peers-sdk";
 
 export const toolsApp: IAppNav = {
-  name: 'Tools',
-  iconClassName: 'bi-tools',
-  navigationPath: 'tools'
-};
+  name: "Tools",
+  iconClassName: "bi-tools",
+  navigationPath: "tools",
+};

package/src/system-apps/types.app.ts

@@ -1,7 +1,7 @@
-import { IAppNav } from "@peers-app/peers-sdk";
+import type { IAppNav } from "@peers-app/peers-sdk";
 
 export const typesApp: IAppNav = {
-  name: 'Types',
-  iconClassName: 'bi-code-square',
-  navigationPath: 'peer-types'
-};
+  name: "Types",
+  iconClassName: "bi-code-square",
+  navigationPath: "peer-types",
+};

package/src/system-apps/variables.app.ts

@@ -1,7 +1,7 @@
-import { IAppNav } from "@peers-app/peers-sdk";
+import type { IAppNav } from "@peers-app/peers-sdk";
 
 export const variablesApp: IAppNav = {
-  name: 'Variables',
-  iconClassName: 'bi-braces',
-  navigationPath: 'variables'
-};
+  name: "Variables",
+  iconClassName: "bi-braces",
+  navigationPath: "variables",
+};

package/src/system-apps/workflows.app.ts

@@ -1,7 +1,7 @@
-import { IAppNav } from "@peers-app/peers-sdk";
+import type { IAppNav } from "@peers-app/peers-sdk";
 
 export const workflowsApp: IAppNav = {
-  name: 'Workflows',
-  iconClassName: 'bi-database-fill-gear',
-  navigationPath: 'workflows'
-};
+  name: "Workflows",
+  iconClassName: "bi-database-fill-gear",
+  navigationPath: "workflows",
+};