@peers-app/peers-ui 0.27.3 → 0.27.4

package/src/components/qr-scanner.tsx

@@ -1,180 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-
-/** Props for {@link QrScanner}. */
-export interface QrScannerProps {
-  /** Called once with the decoded text of the first QR code seen; scanning stops after this. */
-  onScan: (text: string) => void;
-  /** Called when the camera cannot be opened. */
-  onError?: (message: string) => void;
-  /** Optional filter; return `false` to keep scanning past a code that is not ours. */
-  accept?: (text: string) => boolean;
-  /** Square edge length in CSS pixels. */
-  size?: number;
-}
-
-type BarcodeDetectorLike = {
-  detect(source: ImageBitmapSource): Promise<Array<{ rawValue: string }>>;
-};
-
-type BarcodeDetectorCtor = new (options?: { formats?: string[] }) => BarcodeDetectorLike;
-
-function nativeDetector(): BarcodeDetectorLike | undefined {
-  const ctor = (globalThis as { BarcodeDetector?: BarcodeDetectorCtor }).BarcodeDetector;
-  if (!ctor) {
-    return undefined;
-  }
-  try {
-    return new ctor({ formats: ["qr_code"] });
-  } catch {
-    return undefined;
-  }
-}
-
-/** Whether this host can plausibly scan (secure context with a camera API). */
-export function canScanQr(): boolean {
-  return (
-    typeof navigator !== "undefined" &&
-    Boolean(navigator.mediaDevices?.getUserMedia) &&
-    (typeof window === "undefined" || window.isSecureContext !== false)
-  );
-}
-
-/**
- * Live camera QR scanner. Uses the platform `BarcodeDetector` when available and falls
- * back to `jsqr` on a canvas. Stops the camera on unmount or after the first accepted code.
- */
-export function QrScanner(props: QrScannerProps) {
-  const { onScan, onError, accept, size = 280 } = props;
-  const videoRef = useRef<HTMLVideoElement>(null);
-  const [status, setStatus] = useState<"starting" | "scanning" | "error">("starting");
-
-  useEffect(() => {
-    let cancelled = false;
-    let stream: MediaStream | undefined;
-    let frame = 0;
-    const canvas = document.createElement("canvas");
-    const detector = nativeDetector();
-    let jsqr: typeof import("jsqr").default | undefined;
-
-    const stop = () => {
-      cancelled = true;
-      if (frame) {
-        cancelAnimationFrame(frame);
-      }
-      for (const track of stream?.getTracks() ?? []) {
-        track.stop();
-      }
-    };
-
-    const deliver = (text: string) => {
-      if (cancelled || (accept && !accept(text))) {
-        return false;
-      }
-      stop();
-      onScan(text);
-      return true;
-    };
-
-    const tick = async () => {
-      const video = videoRef.current;
-      if (cancelled || !video || video.readyState < 2) {
-        frame = requestAnimationFrame(() => void tick());
-        return;
-      }
-      try {
-        if (detector) {
-          const codes = await detector.detect(video);
-          for (const code of codes) {
-            if (deliver(code.rawValue)) {
-              return;
-            }
-          }
-        } else if (jsqr) {
-          const width = video.videoWidth;
-          const height = video.videoHeight;
-          if (width && height) {
-            canvas.width = width;
-            canvas.height = height;
-            const ctx = canvas.getContext("2d", { willReadFrequently: true });
-            if (ctx) {
-              ctx.drawImage(video, 0, 0, width, height);
-              const image = ctx.getImageData(0, 0, width, height);
-              const result = jsqr(image.data, width, height, { inversionAttempts: "dontInvert" });
-              if (result?.data && deliver(result.data)) {
-                return;
-              }
-            }
-          }
-        }
-      } catch {
-        // A single bad frame is not fatal; keep scanning.
-      }
-      if (!cancelled) {
-        frame = requestAnimationFrame(() => void tick());
-      }
-    };
-
-    (async () => {
-      try {
-        if (!detector) {
-          jsqr = (await import("jsqr")).default;
-        }
-        stream = await navigator.mediaDevices.getUserMedia({
-          video: { facingMode: { ideal: "environment" } },
-          audio: false,
-        });
-        if (cancelled) {
-          stop();
-          return;
-        }
-        const video = videoRef.current;
-        if (!video) {
-          return;
-        }
-        video.srcObject = stream;
-        await video.play();
-        setStatus("scanning");
-        frame = requestAnimationFrame(() => void tick());
-      } catch (error) {
-        if (cancelled) {
-          return;
-        }
-        setStatus("error");
-        onError?.(
-          error instanceof DOMException && error.name === "NotAllowedError"
-            ? "Camera access was denied."
-            : "Could not open the camera.",
-        );
-      }
-    })();
-
-    return stop;
-  }, [onScan, onError, accept]);
-
-  return (
-    <div
-      className="position-relative bg-black rounded overflow-hidden mx-auto"
-      style={{ width: size, height: size }}
-    >
-      <video
-        ref={videoRef}
-        muted
-        playsInline
-        style={{ width: "100%", height: "100%", objectFit: "cover" }}
-        aria-label="Camera preview"
-      />
-      {status === "starting" ? (
-        <output className="position-absolute top-50 start-50 translate-middle text-light small">
-          Starting camera…
-        </output>
-      ) : null}
-      {status === "scanning" ? (
-        <div
-          aria-hidden="true"
-          className="position-absolute top-50 start-50 translate-middle border border-2 border-light rounded"
-          style={{ width: "60%", height: "60%", opacity: 0.7 }}
-        />
-      ) : null}
-    </div>
-  );
-}

package/src/components/responsive-section-nav.test.tsx

@@ -1,88 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { ResponsiveSectionNav } from "./responsive-section-nav";
-
-jest.mock("../globals", () => {
-  const { observable: createObservable } =
-    jest.requireActual<typeof import("@peers-app/peers-sdk")>("@peers-app/peers-sdk");
-  return { isDesktop: createObservable(true) };
-});
-
-import { isDesktop } from "../globals";
-
-const sections = [
-  { id: "activity", label: "Activity", iconClassName: "bi-inbox", badge: 2 },
-  { id: "people", label: "People", iconClassName: "bi-person" },
-  { id: "groups", label: "Groups" },
-  { id: "devices", label: "Devices" },
-];
-
-describe("ResponsiveSectionNav", () => {
-  beforeEach(() => {
-    isDesktop(true);
-  });
-
-  it("uses a vertical sidebar on desktop and marks the selected section", () => {
-    render(
-      <ResponsiveSectionNav
-        label="Identity"
-        sections={sections}
-        activeSectionId="people"
-        onSelect={() => undefined}
-        toolbar={<div>Quick actions</div>}
-      >
-        <div>People body</div>
-      </ResponsiveSectionNav>,
-    );
-
-    expect(screen.getByRole("navigation", { name: "Identity" }).querySelector("ul")).toHaveClass(
-      "nav-pills",
-      "flex-column",
-    );
-    expect(screen.getByRole("button", { name: /People/ })).toHaveAttribute("aria-current", "page");
-    expect(screen.getByText("People body")).toBeInTheDocument();
-    expect(screen.getByText("Quick actions")).toBeInTheDocument();
-    expect(screen.getByText("Quick actions").closest("[data-section-scroll-container]")).toBeNull();
-    expect(screen.getByText("People body").closest("[data-section-scroll-container]")).toHaveClass(
-      "overflow-auto",
-    );
-  });
-
-  it("uses a non-wrapping horizontal strip on a narrow screen", () => {
-    isDesktop(false);
-    render(
-      <ResponsiveSectionNav
-        label="Identity"
-        sections={sections}
-        activeSectionId="activity"
-        onSelect={() => undefined}
-      >
-        <div>Activity body</div>
-      </ResponsiveSectionNav>,
-    );
-
-    expect(screen.getByRole("navigation", { name: "Identity" }).querySelector("ul")).toHaveClass(
-      "nav-tabs",
-      "flex-nowrap",
-      "overflow-x-auto",
-      "overflow-y-hidden",
-    );
-  });
-
-  it("reports the section chosen from the keyboard-focusable button", async () => {
-    const onSelect = jest.fn();
-    render(
-      <ResponsiveSectionNav
-        label="Identity"
-        sections={sections}
-        activeSectionId="activity"
-        onSelect={onSelect}
-      >
-        <div>Activity body</div>
-      </ResponsiveSectionNav>,
-    );
-
-    await userEvent.click(screen.getByRole("button", { name: /Groups/ }));
-    expect(onSelect).toHaveBeenCalledWith("groups");
-  });
-});

package/src/components/responsive-section-nav.tsx

@@ -1,92 +0,0 @@
-import type { ReactNode } from "react";
-import { isDesktop } from "../globals";
-import { useObservable } from "../hooks";
-
-/** One destination in {@link ResponsiveSectionNav}. */
-export interface ISectionNavItem {
-  /** Stable id passed to {@link ResponsiveSectionNavProps.onSelect}. */
-  id: string;
-  /** Visible label. */
-  label: string;
-  /** Bootstrap icon class, without a leading markup wrapper. */
-  iconClassName?: string;
-  /** Optional count. Hidden when zero or omitted. */
-  badge?: number;
-}
-
-/** Props for {@link ResponsiveSectionNav}. */
-export interface ResponsiveSectionNavProps {
-  /** Accessible name for the section navigation. */
-  label: string;
-  /** Sections in display order. */
-  sections: ISectionNavItem[];
-  /** Id of the selected section. */
-  activeSectionId: string;
-  /** Called when a section button is activated. */
-  onSelect: (sectionId: string) => void;
-  /** Optional controls that remain visible above the scrolling section body. */
-  toolbar?: ReactNode;
-  /** Selected section body. */
-  children: ReactNode;
-}
-
-/**
- * Section navigation that uses a left sidebar on a wide screen and a
- * non-wrapping horizontal strip on a narrow one.
- *
- * The parent owns the route. This component only reports the selected id.
- */
-export function ResponsiveSectionNav(props: ResponsiveSectionNavProps) {
-  const [desktop] = useObservable(isDesktop);
-  return (
-    <div
-      className={`d-flex h-100 overflow-hidden ${desktop ? "flex-row" : "flex-column"}`}
-      style={{ minHeight: 0, minWidth: 0 }}
-    >
-      <nav
-        aria-label={props.label}
-        className={desktop ? "border-end p-3 overflow-auto" : "border-bottom px-2 pt-2 pb-1"}
-        style={desktop ? { flex: "0 0 220px", width: 220 } : undefined}
-      >
-        <ul
-          className={`nav ${desktop ? "nav-pills flex-column" : "nav-tabs flex-nowrap overflow-x-auto overflow-y-hidden"}`}
-        >
-          {props.sections.map((section) => {
-            const selected = section.id === props.activeSectionId;
-            return (
-              <li className="nav-item" key={section.id}>
-                <button
-                  type="button"
-                  className={`nav-link d-flex align-items-center gap-2 w-100 text-start ${selected ? "active" : ""}`}
-                  aria-current={selected ? "page" : undefined}
-                  onClick={() => props.onSelect(section.id)}
-                >
-                  {section.iconClassName ? <i className={section.iconClassName} /> : null}
-                  <span>{section.label}</span>
-                  {section.badge ? (
-                    <span className={`badge ${selected ? "bg-light text-primary" : "bg-primary"}`}>
-                      {section.badge}
-                    </span>
-                  ) : null}
-                </button>
-              </li>
-            );
-          })}
-        </ul>
-      </nav>
-      <div
-        className="d-flex flex-column flex-grow-1 overflow-hidden"
-        style={{ minHeight: 0, minWidth: 0 }}
-      >
-        {props.toolbar ? <div className="flex-shrink-0">{props.toolbar}</div> : null}
-        <div
-          className="flex-grow-1 overflow-auto"
-          style={{ minHeight: 0, minWidth: 0 }}
-          data-section-scroll-container
-        >
-          {props.children}
-        </div>
-      </div>
-    </div>
-  );
-}

package/src/components/router.tsx

@@ -1,175 +0,0 @@
-import * as globals from "../globals";
-import { useObservable } from "../hooks";
-import { AssistantDetails } from "../screens/assistants/assistant-details";
-import { AssistantList } from "../screens/assistants/assistant-list";
-import { canonicalizeRoute } from "../screens/identity/identity-routes";
-import { PackageDetails } from "../screens/packages/package-details";
-import { PackageList } from "../screens/packages/package-list";
-import { PackageNewLocal } from "../screens/packages/package-new-local";
-import { PeerTypeDetails } from "../screens/peer-types/peer-type-details";
-import { PeerTypeLists } from "../screens/peer-types/peer-type-list";
-import { GlobalSearch } from "../screens/search/global-search";
-import { SettingsPage } from "../screens/settings/settings-page";
-// import { TaskDetails } from "../screens/tasks/task-details";
-// import { TaskList } from "../screens/tasks/task-list";
-import { ToolDetails } from "../screens/tools/tool-details";
-import { ToolList } from "../screens/tools/tool-list";
-import { ToolTestDetails } from "../screens/tools/tool-test-details";
-import { VariableDetails } from "../screens/variables/variable-details";
-import { VariableList } from "../screens/variables/variable-list";
-import { WorkflowDetails } from "../screens/workflows/workflow-details";
-import { WorkflowList } from "../screens/workflows/workflow-list";
-import { UIRouter } from "../ui-router/ui-loader";
-import { ChannelMessages } from "./messages/channel-view";
-import { ThreadMessageList } from "./messages/thread-message-list";
-import "../screens/console-logs/console-logs-list";
-import "../screens/identity";
-import "../screens/network-viewer";
-import "../screens/data-explorer";
-
-/** Render the built-in or registered UI that owns a canonicalized route. */
-export function Router({ path: providedPath }: { path?: string } = {}) {
-  // Hooks must run unconditionally (same order every render)
-  const [globalPath] = useObservable(globals.mainContentPath);
-
-  try {
-    // Use provided path or fall back to global mainContentPath.
-    // Legacy contacts, groups, devices, invites, and account paths render as Identity.
-    let path = canonicalizeRoute(providedPath ?? globalPath);
-    const originalPath = path;
-    path = path.toLowerCase().trim();
-    path = path.split("?")[0]; // remove query string
-
-    // remove leading '/'
-    if (path.startsWith("/")) {
-      path = path.substring(1);
-    }
-    // remove trailing '/'
-    if (path.endsWith("/")) {
-      path = path.substring(0, path.length - 1);
-    }
-
-    if (path === "search") {
-      return <GlobalSearch />;
-    }
-    if (path === "settings" || path === "profile") {
-      return <SettingsPage />;
-    }
-    if (path === "threads" || path === "") {
-      return <ChannelMessages />;
-    }
-
-    const ui = UIRouter({ path, props: {}, uiCategory: "screen" });
-    if (ui) {
-      return ui;
-    }
-
-    if (path.match(/^channel\//)) {
-      const parts = path.split("/");
-      parts.shift();
-      const channelId = parts[0];
-      // todo add additional params as props if they exist
-      return <ChannelMessages channelId={channelId} />;
-    }
-
-    if (path === "assistants") {
-      return <AssistantList />;
-    }
-    if (path.match(/^assistants\//)) {
-      const parts = path.split("/");
-      parts.shift();
-      const id = parts[0];
-      return <AssistantDetails assistantId={id} />;
-    }
-
-    // if (path === 'tasks') {
-    //   return <TaskList />;
-    // }
-    // if (path.match(/^tasks\//)) {
-    //   const parts = path.split('/');
-    //   parts.shift();
-    //   const taskId = parts[0];
-    //   return <TaskDetails taskId={taskId} />;
-    // }
-
-    if (path === "workflows") {
-      return <WorkflowList />;
-    }
-    if (path.match(/^workflows\//)) {
-      const parts = path.split("/");
-      parts.shift();
-      const workflowId = parts[0];
-      return <WorkflowDetails workflowId={workflowId} />;
-    }
-
-    if (path === "tools") {
-      return <ToolList />;
-    }
-    if (path.match(/^tools\/tests\//)) {
-      const parts = path.split("/");
-      parts.shift();
-      parts.shift();
-      const toolTestId = parts[0];
-      return <ToolTestDetails toolTestId={toolTestId} />;
-    }
-    if (path.match(/^tools\//)) {
-      const parts = path.split("/");
-      parts.shift();
-      const toolId = parts[0];
-      return <ToolDetails toolId={toolId} />;
-    }
-
-    if (path === "packages") {
-      return <PackageList />;
-    }
-    if (path.match(/^packages\//)) {
-      const parts = path.split("/");
-      parts.shift();
-      const id = parts[0];
-      if (id.toLowerCase() === "newlocal") {
-        return <PackageNewLocal />;
-      }
-      return <PackageDetails packageId={id} />;
-    }
-
-    if (path === "variables") {
-      return <VariableList />;
-    }
-    if (path.match(/^variables\//)) {
-      const parts = path.split("/");
-      parts.shift();
-      const id = parts[0];
-      return <VariableDetails persistentVarId={id} />;
-    }
-
-    if (path === "peer-types") {
-      return <PeerTypeLists />;
-    }
-    if (path.match(/^peer-types\//)) {
-      const parts = path.split("/");
-      parts.shift();
-      const id = parts[0];
-      return <PeerTypeDetails peerTypeId={id} />;
-    }
-
-    if (path.match(/^threads\//)) {
-      const parts = path.split("/");
-      parts.shift();
-      const threadId = parts[0];
-      return <ThreadMessageList threadId={threadId} />;
-    }
-
-    throw new Error(`Unrecognized route: ${originalPath}`);
-  } catch (err) {
-    return (
-      <div className="p-3">
-        <a href="#threads">Home</a>
-        <h3>Error loading route</h3>
-        <pre>
-          route: {`${globals.mainContentPath()}\n`}
-          {String(err)}
-        </pre>
-      </div>
-    );
-  }
-}

package/src/components/save-button.tsx

@@ -1,134 +0,0 @@
-import type { IDoc } from "@peers-app/peers-sdk";
-import type React from "react";
-import { isDesktop, mainContentPath } from "../globals";
-import { useObservable } from "../hooks";
-
-/** Props for {@link SaveButton}. */
-export interface ISaveButtonProps {
-  /** Used with many concrete table row shapes; IDoc stays generic at call sites. */
-  doc: IDoc<any>;
-  /** Save handler; defaults to `doc.save`. */
-  onClick?: () => void | Promise<void>;
-  /** Extra dropdown actions: buttons, or arbitrary nodes such as dividers. */
-  addActions?: (
-    | {
-        label: string;
-        onClick: () => void;
-        className?: string;
-      }
-    | React.ReactNode
-  )[];
-  /** Hide the built-in Discard Changes and Delete actions. */
-  noBuiltInActions?: boolean;
-  /** Label for the built-in delete action. Default: `Delete`. */
-  deleteLabel?: string;
-  /**
-   * Replace the built-in delete (`doc.delete()`), for records whose removal must go through
-   * a Runtime contract. Runs after the user confirms; the screen then navigates up.
-   */
-  onDelete?: () => void | Promise<void>;
-}
-
-/**
- * Save button with a dropdown of extra actions plus built-in Discard Changes and Delete.
- * Enabled only while the document has unsaved changes.
- */
-export const SaveButton = (props: ISaveButtonProps) => {
-  let { doc, addActions } = props;
-  useObservable(doc.q);
-  const q = doc.q;
-
-  if (!addActions) {
-    addActions = [];
-  }
-  const allActions: ISaveButtonProps["addActions"] = props.addActions ? [...addActions] : [];
-
-  if (!props.noBuiltInActions) {
-    if (q()) {
-      allActions.unshift({
-        label: "Discard Changes",
-        className: "text-bg-warning",
-        onClick: () => {
-          if (confirm("Are you sure you want to discard your changes?")) {
-            doc.load().then(() => {
-              setTimeout(() => doc.q(0), 100);
-            });
-          }
-        },
-      });
-    }
-    if (allActions.length) {
-      allActions.push(<hr className="dropdown-divider mt-3" />);
-    }
-    const deleteLabel = props.deleteLabel ?? "Delete";
-    allActions.push({
-      label: deleteLabel,
-      className: `text-bg-danger`,
-      onClick: async () => {
-        if (confirm(`Are you sure you want to ${deleteLabel.toLowerCase()} this?`)) {
-          try {
-            await (props.onDelete ? props.onDelete() : doc.delete());
-          } catch (err) {
-            alert(`${deleteLabel} failed: ${err instanceof Error ? err.message : String(err)}`);
-            return;
-          }
-          const pathParts = mainContentPath().split("/");
-          pathParts.pop();
-          const path = pathParts.join("/") ?? "";
-          mainContentPath(path);
-        }
-      },
-    });
-  }
-
-  let className = `btn `;
-  if (q()) {
-    className += "btn-primary";
-  } else {
-    className += "disabled";
-  }
-
-  if (!addActions?.length && props.noBuiltInActions) {
-    return (
-      <button className={className} onClick={props.onClick ?? doc.save} disabled={!q()}>
-        {isDesktop() ? "Save Changes" : "Save"}
-      </button>
-    );
-  }
-
-  return (
-    <div style={{ display: "inline-block" }}>
-      <div className="input-group">
-        <button className={className} onClick={props.onClick ?? doc.save} disabled={!q()}>
-          {isDesktop() ? "Save Changes" : "Save"}
-        </button>
-        <button
-          type="button"
-          data-bs-toggle="dropdown"
-          aria-expanded="false"
-          // className={`btn dropdown-toggle dropdown-toggle-split ${q() ? 'btn-primary' : 'btn-secondary'}`}
-          className={`btn dropdown-toggle dropdown-toggle-split btn-secondary`}
-        >
-          <span className="visually-hidden">Toggle Dropdown</span>
-        </button>
-        <ul className="dropdown-menu dropdown-menu-end">
-          {allActions.map((action) => {
-            if (typeof action !== "object" || action === null || !("label" in action)) {
-              return <li key={Math.random()}>{action}</li>;
-            }
-            return (
-              <li key={action.label}>
-                <button
-                  className={`dropdown-item rounded mt-2 ${action.className || ""}`}
-                  onClick={action.onClick}
-                >
-                  {action.label}
-                </button>
-              </li>
-            );
-          })}
-        </ul>
-      </div>
-    </div>
-  );
-};