@peers-app/peers-ui 0.14.0 → 0.15.0

package/src/components/sortable-list.tsx

@@ -1,83 +1,98 @@
-import React from 'react';
-import Sortable from 'sortablejs';
-import { last, sortBy } from 'lodash';
-import { Observable, unwrapObservable } from "@peers-app/peers-sdk";
-
+import { type Observable, unwrapObservable } from "@peers-app/peers-sdk";
+import { last, sortBy } from "lodash";
+import React from "react";
+import Sortable from "sortablejs";
 
 export interface ISortable {
-  sortOrder: number
+  sortOrder: number;
 }
 
 interface ISortableListProps<T extends ISortable> {
-  items: Observable<T[]> | T[],
-  renderItem: (props: { item: T, listId: string, sortHandle: string }) => React.ReactNode,
-  listsGroup?: string
-  onAdd?: ((itemId: string, sortOrder: number) => any),
-  onUpdate?: ((args: { items: T[], ixMoved: number[] }) => any),
-  hidden?: boolean,
-  containerProps?: Record<string, any>
-  dragHandleClassName?: string
-  sortDirection?: 'asc' | 'desc'
-  minHeight?: string | number
-  paddingBottom?: string | number
+  items: Observable<T[]> | T[];
+  renderItem: (props: { item: T; listId: string; sortHandle: string }) => React.ReactNode;
+  listsGroup?: string;
+  onAdd?: (itemId: string, sortOrder: number) => void;
+  onUpdate?: (args: { items: T[]; ixMoved: number[] }) => void;
+  hidden?: boolean;
+  containerProps?: Record<string, unknown>;
+  dragHandleClassName?: string;
+  sortDirection?: "asc" | "desc";
+  minHeight?: string | number;
+  paddingBottom?: string | number;
 }
 
-export class SortableList<T extends ISortable> extends React.Component<ISortableListProps<T>, {}>
-{
-
-  constructor(props: any) {
+export class SortableList<T extends ISortable> extends React.Component<
+  ISortableListProps<T>,
+  Record<string, never>
+> {
+  constructor(props: ISortableListProps<T>) {
     super(props);
-    this.sortHandle = this.props.dragHandleClassName && `.${this.props.dragHandleClassName}` || this.sortHandle;
+    this.sortHandle =
+      (this.props.dragHandleClassName && `.${this.props.dragHandleClassName}`) || this.sortHandle;
   }
 
-  self: any
+  items: T[] = [];
 
-  items: any[] = [];
-
-  listId = `${Date.now()}_${Math.round(Math.random()*100000)}`;
+  listId = `${Date.now()}_${Math.round(Math.random() * 100000)}`;
   sortHandle = `.sort-handle-${this.listId}`;
 
   calculateSortOrder(index: number) {
     const items = this.items;
     if (index === 0) return Date.now();
-    if (index >= items.length) return last(items).sortOrder - 10000;
+    if (index >= items.length) {
+      const tail = last(items);
+      return (tail?.sortOrder ?? Date.now()) - 10000;
+    }
     const above = items[index - 1].sortOrder ?? Date.now();
     const below = items[index].sortOrder ?? Number.MIN_VALUE;
-    if (above === below) alert('sort order has converged to the same number in this area.  Try moving items to the top or bottom of the list to fix it')
-    return above - ((above - below) / 2)
+    if (above === below)
+      alert(
+        "sort order has converged to the same number in this area.  Try moving items to the top or bottom of the list to fix it",
+      );
+    return above - (above - below) / 2;
   }
 
   componentDidMount() {
-    const self = this;
-    const listDiv = document.getElementById(this.listId) as any;
+    const listDiv = document.getElementById(this.listId);
+    if (!listDiv) {
+      return;
+    }
 
     Sortable.create(listDiv, {
       handle: this.sortHandle,
       group: { name: this.props.listsGroup || this.listId, put: !!this.props.onAdd },
       animation: 100,
 
-      onUpdate: evt => {
-        const items = self.items;
-        const item = items.splice(evt.oldIndex!, 1)[0];
-        item.sortOrder = this.calculateSortOrder(evt.newIndex!);
-        items.splice(evt.newIndex!, 0, item);
+      onUpdate: (evt) => {
+        const oldIndex = evt.oldIndex;
+        const newIndex = evt.newIndex;
+        if (oldIndex === undefined || newIndex === undefined) {
+          return;
+        }
+        const items = this.items;
+        const item = items.splice(oldIndex, 1)[0];
+        if (!item) {
+          return;
+        }
+        item.sortOrder = this.calculateSortOrder(newIndex);
+        items.splice(newIndex, 0, item);
         // console.log(items.map(i => i.toJS()));
         if (this.props.onUpdate) {
-          this.props.onUpdate({ items, ixMoved: [evt.newIndex!] })
+          this.props.onUpdate({ items, ixMoved: [newIndex] });
         }
       },
 
-      onAdd: evt => {
-        const itemEl = evt.item;  // dragged HTMLElement
+      onAdd: (evt) => {
+        const itemEl = evt.item; // dragged HTMLElement
         if (evt.to !== evt.from) {
           // first restore html hierarchy so html doesn't get out of sync with react
           evt.to.removeChild(itemEl);
           evt.from.appendChild(itemEl);
 
           // now if we were given an `onAdd` function, call it
-          if (this.props.onAdd) {
+          if (this.props.onAdd && evt.newIndex !== undefined) {
             const itemId = evt.item.id;
-            this.props.onAdd(itemId, this.calculateSortOrder(evt.newIndex!));
+            this.props.onAdd(itemId, this.calculateSortOrder(evt.newIndex));
           }
         }
       },
@@ -86,17 +101,30 @@ export class SortableList<T extends ISortable> extends React.Component<ISortable
 
   public render() {
     let items = unwrapObservable(this.props.items);
-    if (this.props.sortDirection === 'asc') {
-      items = sortBy(items, i => i.sortOrder ?? -Infinity);
+    if (this.props.sortDirection === "asc") {
+      items = sortBy(items, (i) => i.sortOrder ?? -Infinity);
     } else {
-      // @ts-ignore
-      items = sortBy(items, i => -i.sortOrder ?? Infinity);
+      // @ts-expect-error
+      items = sortBy(items, (i) => -i.sortOrder ?? Infinity);
     }
     this.items = items;
     return (
-      <div id={this.listId} style={{ minHeight: this.props.minHeight ?? "25px", paddingBottom: this.props.paddingBottom ?? "10px" }} {...this.props.containerProps} >
-        {items.map(item => this.props.renderItem({ item, listId: this.listId, sortHandle: this.sortHandle.substring(1) }))}
+      <div
+        id={this.listId}
+        style={{
+          minHeight: this.props.minHeight ?? "25px",
+          paddingBottom: this.props.paddingBottom ?? "10px",
+        }}
+        {...this.props.containerProps}
+      >
+        {items.map((item) =>
+          this.props.renderItem({
+            item,
+            listId: this.listId,
+            sortHandle: this.sortHandle.substring(1),
+          }),
+        )}
       </div>
-    )
+    );
   }
-}
+}

package/src/components/tabs.tsx

@@ -1,35 +1,37 @@
-import React, { useState } from "react";
+import type React from "react";
+import { useState } from "react";
 import { queryParam } from "../globals";
 
 interface ITabsProps {
-  tabs: { 
-    name: string, 
-    content: JSX.Element, 
-    active?: true 
+  tabs: {
+    name: string;
+    content: JSX.Element;
+    active?: true;
   }[];
   contentClassName?: string;
   activeTabName?: string;
 }
 
-let lastActive = '';
+let lastActive = "";
 
 export const Tabs = (props: ITabsProps) => {
   const { tabs } = props;
-  
+
   const [activeTab, _setActiveTab] = useState(() => {
-    let activeTabName = tabs.find(tab => tab.active)?.name || queryParam('tab') || lastActive;
+    let activeTabName = tabs.find((tab) => tab.active)?.name || queryParam("tab") || lastActive;
     activeTabName = activeTabName.toLowerCase();
-    const _activeTab = tabs.find(tab => tab.name.toLowerCase() === activeTabName) || tabs[0];
+    const _activeTab = tabs.find((tab) => tab.name.toLowerCase() === activeTabName) || tabs[0];
     lastActive = _activeTab.name;
     return _activeTab;
   });
 
   // Allow parent to control the active tab imperatively
   const resolvedActiveTab = props.activeTabName
-    ? (tabs.find(tab => tab.name.toLowerCase() === props.activeTabName!.toLowerCase()) ?? activeTab)
+    ? (tabs.find((tab) => tab.name.toLowerCase() === props.activeTabName?.toLowerCase()) ??
+      activeTab)
     : activeTab;
-  
-  function setActiveTab(tab: { name: string, content: JSX.Element }) {
+
+  function setActiveTab(tab: { name: string; content: JSX.Element }) {
     _setActiveTab(tab);
     lastActive = tab.name;
   }
@@ -37,40 +39,38 @@ export const Tabs = (props: ITabsProps) => {
   return (
     <>
       <ul className="nav nav-tabs">
-        {tabs.map((tab, iTab) => {
+        {tabs.map((tab) => {
           return (
-            <li key={tab.name + iTab} className="nav-item">
+            <li key={tab.name} className="nav-item">
               <a
                 href="#"
-                className={"nav-link " + (resolvedActiveTab.name === tab.name ? 'active' : '')}
-                onClick={evt => (evt.preventDefault(), setActiveTab(tab))}
+                className={`nav-link ${resolvedActiveTab.name === tab.name ? "active" : ""}`}
+                onClick={(evt) => {
+                  evt.preventDefault();
+                  setActiveTab(tab);
+                }}
               >
                 {tab.name}
               </a>
             </li>
-          )
+          );
         })}
       </ul>
-      <div className={"tab-content " + (props.contentClassName ?? 'mt-3')}>
-        {tabs.map((tab, iTab) => {
+      <div className={`tab-content ${props.contentClassName ?? "mt-3"}`}>
+        {tabs.map((tab) => {
           return (
-            <div key={tab.name + iTab} hidden={resolvedActiveTab.name !== tab.name}>
+            <div key={tab.name} hidden={resolvedActiveTab.name !== tab.name}>
               {tab.content}
             </div>
-          )
+          );
         })}
       </div>
     </>
-  )
-}
-
+  );
+};
 
 export const ScreenTabBody = (props: React.PropsWithChildren) => {
   return (
-    <div
-      style={{ maxHeight: 'calc(100vh - 138px)', overflowY: 'auto' }}
-    >
-      {props.children}
-    </div>
-  )
-}
+    <div style={{ maxHeight: "calc(100vh - 138px)", overflowY: "auto" }}>{props.children}</div>
+  );
+};

package/src/components/tooltip.tsx

@@ -1,22 +1,22 @@
-import { Observable } from "@peers-app/peers-sdk";
-import React from 'react';
-import { Popover } from 'react-tiny-popover';
-import { MarkdownWithMentions } from './markdown-with-mentions';
+import type { Observable } from "@peers-app/peers-sdk";
+import type React from "react";
+import { Popover } from "react-tiny-popover";
 import { useObservable, useObservableState } from "../hooks";
+import { MarkdownWithMentions } from "./markdown-with-mentions";
 
 interface IProps {
   markdownContent?: string | Observable<string> | Observable<string | undefined>;
   handle?: React.ReactNode;
   handleClassName?: string;
-  positions?: ('right' | 'bottom' | 'left' | 'top')[];
-  genericContent?: React.ReactNode
+  positions?: ("right" | "bottom" | "left" | "top")[];
+  genericContent?: React.ReactNode;
 }
 
 export const Tooltip = (props: IProps) => {
   const { handle } = props;
   let [markdownContent] = useObservable(props.markdownContent);
 
-  markdownContent = markdownContent ?? '';
+  markdownContent = markdownContent ?? "";
 
   const showPopover = useObservableState(false);
 
@@ -24,27 +24,20 @@ export const Tooltip = (props: IProps) => {
     <Popover
       isOpen={showPopover()}
       onClickOutside={() => showPopover(false)}
-      positions={props.positions ?? ['right', 'bottom', 'left', 'top']}
-      content={
-        () => (
-          <div
-            className='card p-2 bg-light-subtle'
-            style={{ maxWidth: 500, maxHeight: 400, overflowY: 'auto', zIndex: 1000001 }}
-          >
-            {
-              props.genericContent ||
-              <MarkdownWithMentions
-                content={markdownContent}
-              />
-            }
-          </div>
-        )
-      }
+      positions={props.positions ?? ["right", "bottom", "left", "top"]}
+      content={() => (
+        <div
+          className="card p-2 bg-light-subtle"
+          style={{ maxWidth: 500, maxHeight: 400, overflowY: "auto", zIndex: 1000001 }}
+        >
+          {props.genericContent || <MarkdownWithMentions content={markdownContent} />}
+        </div>
+      )}
     >
-      <span className={props.handleClassName ?? 'p-2'} onClick={() => showPopover(!showPopover())}>
-        {handle ?? <i className="bi bi-info-circle" style={{ cursor: 'pointer' }}></i>}
+      <span className={props.handleClassName ?? "p-2"} onClick={() => showPopover(!showPopover())}>
+        {handle ?? <i className="bi bi-info-circle" style={{ cursor: "pointer" }}></i>}
         {/* <i className="fa-solid fa-note-sticky" onClick={() => showPopover(!showPopover())}></i> */}
       </span>
-    </Popover >
-  )
-}
+    </Popover>
+  );
+};

package/src/components/trust-level-badge.tsx

@@ -1,5 +1,4 @@
-import { TrustLevel } from '@peers-app/peers-sdk';
-import React from 'react';
+import { TrustLevel } from "@peers-app/peers-sdk";
 
 interface TrustLevelBadgeProps {
   level: TrustLevel;
@@ -8,21 +7,26 @@ interface TrustLevelBadgeProps {
 export const TrustLevelBadge = ({ level }: TrustLevelBadgeProps) => {
   // Define trust level configurations with their numeric values
   const trustLevelConfigs = [
-    { value: TrustLevel.Self, color: 'success', icon: 'bi-shield-fill-check', text: 'Self' },
-    { value: TrustLevel.Trusted, color: 'success', icon: 'bi-shield-check', text: 'Trusted' },
-    { value: TrustLevel.Known, color: 'primary', icon: 'bi-shield-check', text: 'Known' },
-    { value: TrustLevel.NewDevice, color: 'info', icon: 'bi-shield-plus', text: 'New Device' },
-    { value: TrustLevel.NewUser, color: 'info', icon: 'bi-shield-plus', text: 'New User' },
-    { value: TrustLevel.Unknown, color: 'warning', icon: 'bi-shield-exclamation', text: 'Unknown' },
-    { value: TrustLevel.Untrusted, color: 'danger', icon: 'bi-shield-exclamation', text: 'Untrusted' },
-    { value: TrustLevel.Malicious, color: 'danger', icon: 'bi-shield-x', text: 'Malicious' }
+    { value: TrustLevel.Self, color: "success", icon: "bi-shield-fill-check", text: "Self" },
+    { value: TrustLevel.Trusted, color: "success", icon: "bi-shield-check", text: "Trusted" },
+    { value: TrustLevel.Known, color: "primary", icon: "bi-shield-check", text: "Known" },
+    { value: TrustLevel.NewDevice, color: "info", icon: "bi-shield-plus", text: "New Device" },
+    { value: TrustLevel.NewUser, color: "info", icon: "bi-shield-plus", text: "New User" },
+    { value: TrustLevel.Unknown, color: "warning", icon: "bi-shield-exclamation", text: "Unknown" },
+    {
+      value: TrustLevel.Untrusted,
+      color: "danger",
+      icon: "bi-shield-exclamation",
+      text: "Untrusted",
+    },
+    { value: TrustLevel.Malicious, color: "danger", icon: "bi-shield-x", text: "Malicious" },
   ];
 
   // Sort by trust level value (ascending, so lowest first)
   const sortedConfigs = trustLevelConfigs.sort((a, b) => a.value - b.value);
 
   // Find the highest trust level that is at or below the current level
-  let config = { color: 'secondary', icon: 'bi-shield', text: 'Unknown' };
+  let config = { color: "secondary", icon: "bi-shield", text: "Unknown" };
   for (const trustConfig of sortedConfigs) {
     if (level >= trustConfig.value) {
       config = trustConfig;

package/src/components/trust-level-dropdown.tsx

@@ -1,32 +1,60 @@
-import { DataContext, getUserContext, getUserTrustLevel, setUserTrustLevel, TrustLevel } from '@peers-app/peers-sdk';
-import React, { useEffect, useState } from 'react';
-import { LoadingIndicator } from './loading-indicator';
+import {
+  type DataContext,
+  getUserContext,
+  getUserTrustLevel,
+  setUserTrustLevel,
+  TrustLevel,
+} from "@peers-app/peers-sdk";
+import { useEffect, useState } from "react";
+import { LoadingIndicator } from "./loading-indicator";
 
 interface TrustLevelDropdownProps {
   userId: string;
   dataContext?: DataContext;
   onChange?: (newLevel: TrustLevel) => void;
-  type?: 'user' | 'device';
+  type?: "user" | "device";
 }
 
-export const TrustLevelDropdown = ({ userId, dataContext, onChange, type = 'user' }: TrustLevelDropdownProps) => {
+export const TrustLevelDropdown = ({
+  userId,
+  dataContext,
+  onChange,
+  type = "user",
+}: TrustLevelDropdownProps) => {
   const [trustLevel, setTrustLevelState] = useState<TrustLevel>(TrustLevel.Unknown);
   const [loading, setLoading] = useState(true);
 
   const allTrustLevelConfigs = [
-    { value: TrustLevel.Self, color: 'success', icon: 'bi-shield-fill-check', text: 'Self' },
-    { value: TrustLevel.Trusted, color: 'success', icon: 'bi-shield-check', text: 'Trusted' },
-    { value: TrustLevel.Known, color: 'primary', icon: 'bi-shield-check', text: 'Known' },
-    { value: TrustLevel.NewDevice, color: 'info', icon: 'bi-shield-plus', text: 'New Device', showFor: 'device' },
-    { value: TrustLevel.NewUser, color: 'info', icon: 'bi-shield-plus', text: 'New User', showFor: 'user' },
-    { value: TrustLevel.Unknown, color: 'warning', icon: 'bi-shield-exclamation', text: 'Unknown' },
-    { value: TrustLevel.Untrusted, color: 'danger', icon: 'bi-shield-exclamation', text: 'Untrusted' },
-    { value: TrustLevel.Malicious, color: 'danger', icon: 'bi-shield-x', text: 'Malicious' }
+    { value: TrustLevel.Self, color: "success", icon: "bi-shield-fill-check", text: "Self" },
+    { value: TrustLevel.Trusted, color: "success", icon: "bi-shield-check", text: "Trusted" },
+    { value: TrustLevel.Known, color: "primary", icon: "bi-shield-check", text: "Known" },
+    {
+      value: TrustLevel.NewDevice,
+      color: "info",
+      icon: "bi-shield-plus",
+      text: "New Device",
+      showFor: "device",
+    },
+    {
+      value: TrustLevel.NewUser,
+      color: "info",
+      icon: "bi-shield-plus",
+      text: "New User",
+      showFor: "user",
+    },
+    { value: TrustLevel.Unknown, color: "warning", icon: "bi-shield-exclamation", text: "Unknown" },
+    {
+      value: TrustLevel.Untrusted,
+      color: "danger",
+      icon: "bi-shield-exclamation",
+      text: "Untrusted",
+    },
+    { value: TrustLevel.Malicious, color: "danger", icon: "bi-shield-x", text: "Malicious" },
   ];
 
   // Filter configs based on type
-  const trustLevelConfigs = allTrustLevelConfigs.filter(config =>
-    !config.showFor || config.showFor === type
+  const trustLevelConfigs = allTrustLevelConfigs.filter(
+    (config) => !config.showFor || config.showFor === type,
   );
 
   useEffect(() => {
@@ -52,7 +80,7 @@ export const TrustLevelDropdown = ({ userId, dataContext, onChange, type = 'user
 
   // Find current config
   const sortedConfigs = trustLevelConfigs.sort((a, b) => a.value - b.value);
-  let currentConfig = { color: 'secondary', icon: 'bi-shield', text: 'Unknown' };
+  let currentConfig = { color: "secondary", icon: "bi-shield", text: "Unknown" };
   for (const config of sortedConfigs) {
     if (trustLevel >= config.value) {
       currentConfig = config;
@@ -85,9 +113,11 @@ export const TrustLevelDropdown = ({ userId, dataContext, onChange, type = 'user
               className="dropdown-item p-2"
               onClick={() => handleTrustLevelChange(config.value)}
             >
-              <span className={`badge bg-${config.color} d-flex align-items-center gap-2 w-100 py-2 px-3 fs-6 ${
-                trustLevel === config.value ? 'border border-dark border-2' : ''
-              }`}>
+              <span
+                className={`badge bg-${config.color} d-flex align-items-center gap-2 w-100 py-2 px-3 fs-6 ${
+                  trustLevel === config.value ? "border border-dark border-2" : ""
+                }`}
+              >
                 <i className={config.icon} />
                 {config.text}
               </span>