@peers-app/peers-ui 0.27.2 → 0.27.4

package/src/ui-defaults/index.ts

@@ -1,2 +0,0 @@
-import "./list-screen";
-import "./markdown-field";

package/src/ui-defaults/list-screen.tsx

@@ -1,94 +0,0 @@
-import { FieldType, getAllTables, getIconClassName, newid, z } from "@peers-app/peers-sdk";
-// biome-ignore lint/correctness/noUnusedImports: classic JSX (`jsx: react`) needs React in scope for emit
-import React from "react";
-import { ListScreen } from "../components/list-screen";
-import { mainContentPath } from "../globals";
-import { registerInternalPeersUI } from "../ui-router/ui-loader";
-
-const propsSchema = z.object({
-  // items: zodAnyObject.array().describe('Items to display in the list'),
-});
-
-type IProps = z.infer<typeof propsSchema>;
-
-export const DefaultListScreen = (_props: IProps) => {
-  const path =
-    mainContentPath().toLowerCase().trim().split("?")[0].split("#").pop()?.split("/")[0] || "";
-  const fuzzyTableName = (
-    {
-      variables: "persistent_vars",
-    }[path] || path
-  )
-    .replace(/[_-]/g, "")
-    .trim();
-
-  const allTables = getAllTables();
-  const tableName = Object.keys(allTables).find(
-    (t) => t.toLowerCase().replace(/[_-]/g, "").trim() === fuzzyTableName,
-  );
-  const table = allTables[tableName || ""];
-  if (!table) {
-    return <div className="m-4">Table not found for path: "{path}"</div>;
-  }
-  const idField = table.metaData.fields.find((f) => f.name === table.metaData.primaryKeyName);
-  if (!idField) {
-    throw new Error("No primary key field found for table");
-  }
-  const nameField =
-    table.metaData.fields.find((f) => f.name === "name") ||
-    table.metaData.fields.find((f) => f.name === "title") ||
-    table.metaData.fields.find((f) => f.type === FieldType.string);
-  if (!nameField) {
-    throw new Error("No name field found to create new record with");
-  }
-
-  return (
-    <ListScreen
-      key={path}
-      {...{
-        table,
-        sortBy: [`-${idField.name}`],
-        newRecord: async (text: string) => {
-          text = text.trim().replace(/\s+/g, "_");
-          let item = table.initRecord({
-            [idField.name]: newid(),
-            [nameField?.name]: text,
-          });
-          item = await table.insert(item);
-          mainContentPath(`${path}/${item[idField.name]}`);
-          return item;
-        },
-        renderItem: (item) => {
-          const row = item as Record<string, unknown>;
-          const rowId = row[idField.name];
-          const displayName = row.name;
-          return (
-            <div key={String(rowId)} className="container-fluid pb-4">
-              <i className={getIconClassName(table)}></i>&nbsp;
-              <a href={`#${path}/${String(rowId)}`}>
-                {typeof displayName === "string" ? displayName : "<empty-name>"}
-              </a>
-              <div style={{ paddingLeft: "20px" }}>
-                {/* <MarkdownWithMentions content={item.description || ''} /> */}
-              </div>
-            </div>
-          );
-        },
-      }}
-    />
-  );
-};
-
-registerInternalPeersUI({
-  peersUIId: "00m5fql0x5v48vyrk5bllzdrr",
-  component: DefaultListScreen,
-  routes: [
-    {
-      isMatch: (_props, context) => context.path.split("/").length === 1,
-      uiEditMode: "view",
-      uiCategory: "screen",
-      uiSubcategory: "list",
-      priority: -Number.MAX_SAFE_INTEGER,
-    },
-  ],
-});

package/src/ui-defaults/markdown-field.tsx

@@ -1,87 +0,0 @@
-import { type Observable, observable, z } from "@peers-app/peers-sdk";
-// biome-ignore lint/correctness/noUnusedImports: classic JSX (`jsx: react`) needs React in scope for emit
-import React, { useEffect, useRef, useState } from "react";
-import { MarkdownEditorInline } from "../components/markdown-editor/editor-inline";
-import { MarkdownWithMentions } from "../components/markdown-with-mentions";
-import { registerInternalPeersUI } from "../ui-router/ui-loader";
-
-interface IMarkdownFieldProps {
-  value: string | Observable<string>;
-  onChange?: (value: string) => void;
-}
-
-/**
- * Markdown field component for viewing markdown content
- */
-const MarkdownFieldView = (props: IMarkdownFieldProps) => {
-  const value = typeof props.value === "function" ? props.value() : props.value;
-
-  if (!value) {
-    return null;
-  }
-
-  return <MarkdownWithMentions content={value} />;
-};
-
-/**
- * Markdown field component for editing markdown content
- */
-const MarkdownFieldEdit = (props: IMarkdownFieldProps) => {
-  const onChangeRef = useRef(props.onChange);
-  onChangeRef.current = props.onChange;
-
-  // Create an observable for the editor that calls onChange when it changes
-  const [valueObs] = useState(() => {
-    const initialValue = typeof props.value === "function" ? props.value() : props.value;
-    const obs = observable(initialValue || "");
-
-    // Subscribe to changes and call onChange
-    obs.subscribe((newValue) => {
-      onChangeRef.current?.(newValue);
-    });
-
-    return obs;
-  });
-
-  // Sync external value changes to the observable
-  useEffect(() => {
-    const currentValue = typeof props.value === "function" ? props.value() : props.value;
-    if (currentValue !== valueObs()) {
-      valueObs(currentValue || "");
-    }
-  }, [props.value, valueObs]);
-
-  return <MarkdownEditorInline value={valueObs} />;
-};
-
-// Schema for markdown field props
-const markdownFieldPropsSchema = z.object({
-  value: z.any(), // Can be string or Observable<string>
-  onChange: z.function().optional(),
-});
-
-// Register the view mode component
-registerInternalPeersUI({
-  component: MarkdownFieldView,
-  propsSchema: markdownFieldPropsSchema,
-  routes: [
-    {
-      uiCategory: "field",
-      uiSubcategory: "markdown",
-      uiEditMode: "view",
-    },
-  ],
-});
-
-// Register the edit mode component
-registerInternalPeersUI({
-  component: MarkdownFieldEdit,
-  propsSchema: markdownFieldPropsSchema,
-  routes: [
-    {
-      uiCategory: "field",
-      uiSubcategory: "markdown",
-      uiEditMode: "edit",
-    },
-  ],
-});

package/src/ui-router/routes-loader.ts

@@ -1,193 +0,0 @@
-import {
-  debounceByArgs,
-  type IAppNav,
-  type IPackage,
-  type IPeersPackageRoutes,
-  type IPeersUIRoute,
-  observable,
-  Packages,
-  PackageVersions,
-  packagePrefsVar,
-  rpcServerCalls,
-} from "@peers-app/peers-sdk";
-import "../ui-defaults";
-
-/** IPackage enriched with appNavs from the active PackageVersion. */
-export type IPackageWithNavs = IPackage & { appNavs?: IAppNav[] };
-
-export const allPackages = observable<IPackageWithNavs[]>([]);
-let allRoutesLoaded = false;
-
-const prefsSubscribed = new Set<string>();
-
-function subscribeToPrefs(packageId: string) {
-  if (prefsSubscribed.has(packageId)) return;
-  prefsSubscribed.add(packageId);
-  const pvar = packagePrefsVar(packageId);
-  let lastPvId = pvar()?.activePackageVersionId;
-  pvar.subscribe(async (prefs) => {
-    const newPvId = prefs?.activePackageVersionId;
-    if (newPvId && newPvId !== lastPvId) {
-      lastPvId = newPvId;
-      const pkg = await Packages().get(packageId);
-      if (pkg) {
-        const enrichedPkg = await enrichWithPvAppNavs(pkg);
-        const _allPackages = allPackages();
-        const idx = _allPackages.findIndex((p) => p.packageId === packageId);
-        if (idx >= 0) {
-          _allPackages[idx] = enrichedPkg;
-          allPackages([..._allPackages]);
-        }
-      }
-      reloadPackage(packageId);
-    }
-  });
-}
-
-/**
- * Enrich an IPackage with appNavs from the device's active PackageVersion record.
- */
-async function enrichWithPvAppNavs(pkg: IPackage): Promise<IPackageWithNavs> {
-  let pvId = pkg.activePackageVersionId;
-  try {
-    const pvar = packagePrefsVar(pkg.packageId);
-    await pvar.loadingPromise;
-    pvId = pvar()?.activePackageVersionId ?? pvId;
-  } catch {
-    /* use group default */
-  }
-  if (!pvId) return pkg;
-  try {
-    const pv = await PackageVersions().get(pvId);
-    if (pv?.appNavs) {
-      return { ...pkg, appNavs: pv.appNavs };
-    }
-  } catch {
-    /* PV not found */
-  }
-  return pkg;
-}
-
-export const loadAllRoutes = async () => {
-  if (allRoutesLoaded) return;
-  allRoutesLoaded = true;
-  const packagesWithUI = await Packages().list({
-    disabled: { $ne: true },
-    activePackageVersionId: { $exists: true },
-  });
-  const enriched = await Promise.all(packagesWithUI.map(enrichWithPvAppNavs));
-  allPackages(enriched);
-  await Promise.all(enriched.map((pkg) => loadRoutesBundle(pkg)));
-
-  for (const pkg of enriched) {
-    subscribeToPrefs(pkg.packageId);
-  }
-
-  Packages().dataChanged.subscribe(async (evt) => {
-    const enrichedPkg = await enrichWithPvAppNavs(evt.dataObject);
-    const _allPackages = allPackages();
-    if (evt.op === "insert") {
-      _allPackages.push(enrichedPkg);
-      subscribeToPrefs(evt.dataObject.packageId);
-    } else if (evt.op === "delete") {
-      const idx = _allPackages.findIndex((p) => p.packageId === evt.dataObject.packageId);
-      if (idx >= 0) {
-        _allPackages.splice(idx, 1);
-      }
-    } else {
-      const idx = _allPackages.findIndex((p) => p.packageId === evt.dataObject.packageId);
-      if (idx >= 0) {
-        _allPackages[idx] = enrichedPkg;
-      }
-    }
-    allPackages([..._allPackages]);
-  });
-
-  Packages().dataChanged.subscribe((evt) => {
-    const pkg = evt.dataObject;
-    const loadingPromise = routeLoadingPromises[pkg.packageId];
-    if (!loadingPromise) return;
-    reloadPackage(pkg.packageId);
-  });
-
-  return true;
-};
-
-type RoutesBundleWindow = Window & {
-  registerPeersUIRoute?: (route: IPeersUIRoute) => void;
-};
-
-const routeLoadingPromises: Record<string, Promise<unknown>> = {};
-function loadRoutesBundle(pkg: IPackageWithNavs, forceRefresh?: boolean): Promise<unknown> {
-  // Dynamically import the bundle
-  let importPromise: Promise<unknown> = routeLoadingPromises[pkg.packageId];
-  if (!importPromise || forceRefresh) {
-    console.log(`loading routes bundle for ${pkg.name}`);
-    // just importing the module (running it) should be registering all of the package UIs with the Peers App runtime
-
-    importPromise = (async () => {
-      try {
-        const w = window as RoutesBundleWindow;
-        while (!w.registerPeersUIRoute) {
-          console.log(`waiting for registerPeersUIRoute to be defined on the window object`);
-          await new Promise((resolve) => setTimeout(resolve, 20));
-        }
-
-        let pvId = pkg.activePackageVersionId;
-        try {
-          const pvar = packagePrefsVar(pkg.packageId);
-          await pvar.loadingPromise;
-          pvId = pvar()?.activePackageVersionId ?? pvId;
-        } catch {
-          /* use group default */
-        }
-
-        let routesBundleFileId: string | undefined;
-        if (pvId) {
-          try {
-            const pv = await PackageVersions().get(pvId);
-            routesBundleFileId = pv?.routesBundleFileId;
-          } catch {
-            /* no version record */
-          }
-        }
-
-        let bundleCode = "";
-        if (routesBundleFileId) {
-          bundleCode = await rpcServerCalls.getFileContents(routesBundleFileId);
-        }
-        if (bundleCode) {
-          const exportRoutes = (peerRoutes: IPeersPackageRoutes) => {
-            const rw = window as RoutesBundleWindow;
-            peerRoutes.routes.forEach((route) => {
-              rw.registerPeersUIRoute?.(route);
-            });
-          };
-
-          const bundleFunction = new Function("exportRoutes", bundleCode);
-          bundleFunction(exportRoutes);
-
-          return {};
-        } else if (routesBundleFileId) {
-          console.warn(
-            `Routes bundle file not found for ${pkg.name} (fileId: ${routesBundleFileId})`,
-          );
-        }
-        return null;
-      } catch (err) {
-        console.error(`Error while loading routes bundle for ${pkg.name}`, err);
-        return null;
-      }
-    })();
-
-    routeLoadingPromises[pkg.packageId] = importPromise;
-  }
-  return importPromise;
-}
-
-const reloadPackage = debounceByArgs(async (packageId: string) => {
-  const pkg = await Packages().get(packageId);
-  if (pkg) {
-    await loadRoutesBundle(pkg, true);
-  }
-}, 200);

package/src/ui-router/ui-loader.test.tsx

@@ -1,108 +0,0 @@
-import { act, fireEvent, render, screen } from "@testing-library/react";
-import { useEffect, useState, useSyncExternalStore } from "react";
-
-const mockPackages: Record<string, unknown>[] = [];
-const mockGetFileContents = jest.fn();
-jest.mock("@peers-app/peers-sdk", () => ({
-  debounceByArgs: (fn: unknown) => fn,
-  getUserContext: () => new Promise(() => {}),
-  packagePrefsVar: () => Object.assign(() => ({}), { loadingPromise: Promise.resolve() }),
-  PackageVersions: () => ({ get: async () => ({ uiBundleFileId: "bundle" }) }),
-  rpcServerCalls: { getFileContents: (...args: unknown[]) => mockGetFileContents(...args) },
-}));
-jest.mock("../globals", () => ({ mainContentPath: () => "", packageReloaded: () => 0 }));
-jest.mock("../hooks", () => ({ useObservable: (value: () => unknown) => [value()] }));
-jest.mock("../ui-defaults", () => ({}));
-jest.mock("../components/loading-indicator", () => ({
-  LoadingIndicator: () => <p>Loading bundle</p>,
-}));
-jest.mock("./routes-loader", () => ({ allPackages: () => mockPackages }));
-
-import { registerInternalPeersUI, UIRouter } from "./ui-loader";
-
-test.each([
-  false,
-  true,
-])("query changes retain screen state and props (preloaded: %s)", async (preloaded) => {
-  const packageId = `package-${preloaded}`;
-  const peersUIId = `ui-${preloaded}`;
-  const base = `package-nav/${packageId}/app`;
-  let path = `${base}?jobId=first`;
-  const listeners = new Set<() => void>();
-  let mounts = 0;
-  let unmounts = 0;
-  function Content({ caller }: { caller: string }) {
-    const [draft, setDraft] = useState("");
-    const currentPath = useSyncExternalStore(
-      (listener) => {
-        listeners.add(listener);
-        return () => {
-          listeners.delete(listener);
-        };
-      },
-      () => path,
-    );
-    useEffect(() => {
-      mounts++;
-      return () => {
-        unmounts++;
-      };
-    }, []);
-    return (
-      <>
-        <p>{caller}</p>
-        <p>{currentPath}</p>
-        <input
-          aria-label="Draft"
-          value={draft}
-          onChange={(event) => setDraft(event.target.value)}
-        />
-      </>
-    );
-  }
-  const schema = { parse: (value: unknown) => value, safeParse: () => ({ success: true }) };
-  const ui = { peersUIId, content: Content, propsSchema: schema };
-  const routeWindow = window as unknown as {
-    registerPeersUIRoute: (route: object) => void;
-    testUI?: object;
-  };
-  routeWindow.registerPeersUIRoute({ packageId, peersUIId, path: base });
-  mockPackages.length = 0;
-  mockGetFileContents.mockReset();
-  let releaseBundle!: (code: string) => void;
-  if (preloaded) {
-    await registerInternalPeersUI({ component: Content, peersUIId, propsSchema: schema });
-  } else {
-    mockPackages.push({ packageId, name: "Test package", activePackageVersionId: "version" });
-    routeWindow.testUI = ui;
-    mockGetFileContents.mockImplementation(
-      () =>
-        new Promise<string>((resolve) => {
-          releaseBundle = resolve;
-        }),
-    );
-  }
-  const view = render(<UIRouter path={path} props={{ caller: "Caller props" }} />);
-  if (!preloaded) {
-    expect(await screen.findByText("Loading bundle")).toBeInTheDocument();
-    await act(async () => {
-      releaseBundle("exportUIs({uis: [window.testUI]});");
-    });
-  }
-  expect(await screen.findByText("Caller props")).toBeInTheDocument();
-  fireEvent.change(screen.getByLabelText("Draft"), { target: { value: "Unsaved edits" } });
-  await act(async () => {
-    path = `${base}?jobId=second`;
-    for (const listener of listeners) listener();
-    view.rerender(<UIRouter path={path} props={{ caller: "Caller props" }} />);
-  });
-  expect(screen.getByLabelText("Draft")).toHaveValue("Unsaved edits");
-  expect(screen.getByText(path)).toBeInTheDocument();
-  expect({ mounts, unmounts, loads: mockGetFileContents.mock.calls.length }).toEqual({
-    mounts: 1,
-    unmounts: 0,
-    loads: preloaded ? 0 : 1,
-  });
-  view.unmount();
-  delete routeWindow.testUI;
-});