@peers-app/peers-ui 0.27.3 → 0.27.4

package/src/components/sortable-list.tsx

@@ -1,130 +0,0 @@
-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;
-}
-
-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) => 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>,
-  Record<string, never>
-> {
-  constructor(props: ISortableListProps<T>) {
-    super(props);
-    this.sortHandle =
-      (this.props.dragHandleClassName && `.${this.props.dragHandleClassName}`) || this.sortHandle;
-  }
-
-  items: T[] = [];
-
-  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) {
-      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;
-  }
-
-  componentDidMount() {
-    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 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: [newIndex] });
-        }
-      },
-
-      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 && evt.newIndex !== undefined) {
-            const itemId = evt.item.id;
-            this.props.onAdd(itemId, this.calculateSortOrder(evt.newIndex));
-          }
-        }
-      },
-    });
-  }
-
-  public render() {
-    let items = unwrapObservable(this.props.items);
-    if (this.props.sortDirection === "asc") {
-      items = sortBy(items, (i) => i.sortOrder ?? -Infinity);
-    } else {
-      // @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>
-    );
-  }
-}

package/src/components/tabs.tsx

@@ -1,76 +0,0 @@
-import type React from "react";
-import { useState } from "react";
-import { queryParam } from "../globals";
-
-interface ITabsProps {
-  tabs: {
-    name: string;
-    content: JSX.Element;
-    active?: true;
-  }[];
-  contentClassName?: string;
-  activeTabName?: string;
-}
-
-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;
-    activeTabName = activeTabName.toLowerCase();
-    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)
-    : activeTab;
-
-  function setActiveTab(tab: { name: string; content: JSX.Element }) {
-    _setActiveTab(tab);
-    lastActive = tab.name;
-  }
-
-  return (
-    <>
-      <ul className="nav nav-tabs">
-        {tabs.map((tab) => {
-          return (
-            <li key={tab.name} className="nav-item">
-              <a
-                href="#"
-                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) => {
-          return (
-            <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>
-  );
-};

package/src/components/tooltip.tsx

@@ -1,43 +0,0 @@
-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;
-}
-
-export const Tooltip = (props: IProps) => {
-  const { handle } = props;
-  let [markdownContent] = useObservable(props.markdownContent);
-
-  markdownContent = markdownContent ?? "";
-
-  const showPopover = useObservableState(false);
-
-  return (
-    <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>
-      )}
-    >
-      <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>
-  );
-};

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

@@ -1,44 +0,0 @@
-import { TrustLevel } from "@peers-app/peers-sdk";
-
-interface TrustLevelBadgeProps {
-  level: TrustLevel;
-}
-
-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" },
-  ];
-
-  // 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" };
-  for (const trustConfig of sortedConfigs) {
-    if (level >= trustConfig.value) {
-      config = trustConfig;
-    } else {
-      break;
-    }
-  }
-
-  return (
-    <span className={`badge bg-${config.color} d-flex align-items-center gap-1`}>
-      <i className={config.icon} />
-      {config.text}
-    </span>
-  );
-};

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

@@ -1,136 +0,0 @@
-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";
-}
-
-/** Select a context-scoped user or device trust level, including the full-access Self grant. */
-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 (full remote contract access)",
-    },
-    { 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,
-  );
-
-  useEffect(() => {
-    async function loadTrustLevel() {
-      const userContext = await getUserContext();
-      const contextToUse = dataContext || userContext.userDataContext;
-      const level = await getUserTrustLevel(contextToUse, userId);
-      setTrustLevelState(level);
-      setLoading(false);
-    }
-    loadTrustLevel();
-  }, [userId, dataContext]);
-
-  async function handleTrustLevelChange(newLevel: TrustLevel) {
-    const userContext = await getUserContext();
-    const contextToUse = dataContext || userContext.userDataContext;
-    await setUserTrustLevel(userId, newLevel, contextToUse);
-    setTrustLevelState(newLevel);
-    if (onChange) {
-      onChange(newLevel);
-    }
-  }
-
-  // Find current config
-  const sortedConfigs = trustLevelConfigs.sort((a, b) => a.value - b.value);
-  let currentConfig = { color: "secondary", icon: "bi-shield", text: "Unknown" };
-  for (const config of sortedConfigs) {
-    if (trustLevel >= config.value) {
-      currentConfig = config;
-    } else {
-      break;
-    }
-  }
-
-  if (loading) {
-    return <LoadingIndicator />;
-  }
-
-  return (
-    <div className="dropdown">
-      <button
-        className={`btn btn-sm btn-${currentConfig.color} dropdown-toggle d-flex align-items-center gap-1`}
-        type="button"
-        data-bs-toggle="dropdown"
-        data-bs-auto-close="true"
-        data-bs-popper-config='{"strategy":"fixed"}'
-        aria-expanded="false"
-      >
-        <i className={currentConfig.icon} />
-        {currentConfig.text}
-      </button>
-      <ul className="dropdown-menu">
-        {trustLevelConfigs.map((config) => (
-          <li key={config.value}>
-            <button
-              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" : ""
-                }`}
-              >
-                <i className={config.icon} />
-                {config.text}
-              </span>
-            </button>
-          </li>
-        ))}
-      </ul>
-    </div>
-  );
-};