@peers-app/peers-ui 0.27.2 → 0.27.4

package/src/hooks/use-observable-state.test.tsx

@@ -1,101 +0,0 @@
-import type { Observable } from "@peers-app/peers-sdk";
-import { act, render, screen, waitFor } from "@testing-library/react";
-import { useObservable } from "./use-observable";
-import { useObservableState } from "./use-observable-state";
-
-// Helper component to test useObservableState
-function ObservableStateTestComponent({ initialValue }: { initialValue: number }) {
-  const obs = useObservableState(initialValue);
-  const [value] = useObservable(obs);
-  return (
-    <div>
-      <span data-testid="state-value">{value}</span>
-      <button type="button" data-testid="increment" onClick={() => obs(obs() + 1)}>
-        Increment
-      </button>
-    </div>
-  );
-}
-
-describe("useObservableState", () => {
-  it("should create an observable with the initial value", () => {
-    render(<ObservableStateTestComponent initialValue={42} />);
-    expect(screen.getByTestId("state-value")).toHaveTextContent("42");
-  });
-
-  it("should re-render when the observable is updated", async () => {
-    render(<ObservableStateTestComponent initialValue={0} />);
-
-    expect(screen.getByTestId("state-value")).toHaveTextContent("0");
-
-    act(() => {
-      screen.getByTestId("increment").click();
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId("state-value")).toHaveTextContent("1");
-    });
-  });
-
-  it("should maintain the same observable instance across re-renders", async () => {
-    let capturedObs: Observable<number> | null = null;
-
-    function CaptureObsComponent() {
-      const obs = useObservableState(0);
-      if (!capturedObs) {
-        capturedObs = obs;
-      }
-      const [value] = useObservable(obs);
-      return (
-        <div>
-          <span data-testid="value">{value}</span>
-          <span data-testid="same-obs">{obs === capturedObs ? "same" : "different"}</span>
-          <button type="button" data-testid="update" onClick={() => obs(obs() + 1)}>
-            Update
-          </button>
-        </div>
-      );
-    }
-
-    render(<CaptureObsComponent />);
-
-    expect(screen.getByTestId("same-obs")).toHaveTextContent("same");
-
-    // Trigger a re-render by updating the observable
-    act(() => {
-      screen.getByTestId("update").click();
-    });
-
-    await waitFor(() => {
-      expect(screen.getByTestId("value")).toHaveTextContent("1");
-      expect(screen.getByTestId("same-obs")).toHaveTextContent("same");
-    });
-  });
-
-  it("should not subscribe when doNotSubscribe is true", () => {
-    function NoSubscribeComponent() {
-      const obs = useObservableState(0, true); // doNotSubscribe = true
-      return (
-        <div>
-          <span data-testid="value">{obs()}</span>
-          <button type="button" data-testid="update" onClick={() => obs(obs() + 1)}>
-            Update
-          </button>
-        </div>
-      );
-    }
-
-    render(<NoSubscribeComponent />);
-
-    expect(screen.getByTestId("value")).toHaveTextContent("0");
-
-    // Update won't cause re-render since we're not subscribed
-    act(() => {
-      screen.getByTestId("update").click();
-    });
-
-    // Value in DOM should still show 0 since component didn't re-render
-    // But the observable itself has been updated
-    expect(screen.getByTestId("value")).toHaveTextContent("0");
-  });
-});

package/src/hooks/use-observable-state.ts

@@ -1,29 +0,0 @@
-import { type Observable, observable } from "@peers-app/peers-sdk";
-import { useState } from "react";
-import { useObservable } from "./use-observable";
-
-/**
- * Use this to create an observable in a functional component.
- * This automatically subscribes to the observable and triggers a re-render when the value changes.
- * @param initialValue This will be the initial value of the observable
- * @param doNotSubscribe If true, the observable will not be subscribed to automatically.
- * This is useful if you want to create an observable that persists between rerenders but doesn't cause rerenders itself.
- * @returns The same observable on every render.
- */
-export function useObservableState<T>(initialValue: T, doNotSubscribe?: boolean): Observable<T>;
-/** Create an observable that may start undefined and subscribe unless `doNotSubscribe` is true. */
-export function useObservableState<T = undefined>(
-  initialValue?: T,
-  doNotSubscribe?: boolean,
-): Observable<T | undefined>;
-/** Create and optionally subscribe to a component-owned observable. */
-export function useObservableState<T>(initialValue?: T, doNotSubscribe?: boolean) {
-  const [obs] = useState(() =>
-    initialValue !== undefined ? observable<T>(initialValue) : observable<T | undefined>(),
-  );
-  if (!doNotSubscribe) {
-    // biome-ignore lint/correctness/useHookAtTopLevel: when doNotSubscribe, caller keeps a stable observable without React-driven subscription (see docstring).
-    useObservable(obs);
-  }
-  return obs;
-}

package/src/hooks/use-observable.test.tsx

@@ -1,258 +0,0 @@
-import {
-  isSubscribable,
-  type Observable,
-  observable,
-  type ReadonlyObservable,
-} from "@peers-app/peers-sdk";
-import { act, render, renderHook, screen, waitFor } from "@testing-library/react";
-import { useObservable } from "./use-observable";
-
-// Helper component to test useObservable
-function TestComponent<T>({ obs, testId = "value" }: { obs: Observable<T> | T; testId?: string }) {
-  const [value, setValue] = useObservable(obs);
-  return (
-    <div>
-      <span data-testid={testId}>{JSON.stringify(value)}</span>
-      <button type="button" data-testid="setter" onClick={() => setValue("new-value" as T)}>
-        Set
-      </button>
-    </div>
-  );
-}
-
-// Helper component to test array behavior
-function ArrayTestComponent({ obs }: { obs: Observable<string[]> }) {
-  const [value] = useObservable(obs);
-  return (
-    <div>
-      <span data-testid="array-value">{JSON.stringify(value)}</span>
-      <span data-testid="array-length">{value.length}</span>
-    </div>
-  );
-}
-
-describe("useObservable", () => {
-  it("reads and follows a read-only observable without allowing typed writes", () => {
-    const source = observable(1);
-    const view: ReadonlyObservable<number> = source;
-    const { result } = renderHook(() => useObservable(view));
-    const checkReadonly = () => {
-      // @ts-expect-error the read-only hook's setter accepts no values
-      result.current[1](2);
-      if (isSubscribable(view)) {
-        // @ts-expect-error testing subscribability must not make a read-only view writable
-        view(2);
-      }
-    };
-    void checkReadonly;
-    const initial: number = result.current[0];
-    expect(initial).toBe(1);
-    act(() => source(3));
-    expect(result.current[0]).toBe(3);
-  });
-
-  describe("basic functionality", () => {
-    it("should return the current value of an observable", () => {
-      const obs = observable("hello");
-      render(<TestComponent obs={obs} />);
-      expect(screen.getByTestId("value")).toHaveTextContent('"hello"');
-    });
-
-    it("should return the value when passed a plain value (non-observable)", () => {
-      render(<TestComponent obs="plain-value" />);
-      expect(screen.getByTestId("value")).toHaveTextContent('"plain-value"');
-    });
-
-    it("should re-render when observable value changes", async () => {
-      const obs = observable("initial");
-      render(<TestComponent obs={obs} />);
-
-      expect(screen.getByTestId("value")).toHaveTextContent('"initial"');
-
-      act(() => {
-        obs("updated");
-      });
-
-      await waitFor(() => {
-        expect(screen.getByTestId("value")).toHaveTextContent('"updated"');
-      });
-    });
-
-    it("should update the observable when setter is called", async () => {
-      const obs = observable("initial");
-      render(<TestComponent obs={obs} />);
-
-      act(() => {
-        screen.getByTestId("setter").click();
-      });
-
-      await waitFor(() => {
-        expect(obs()).toBe("new-value");
-        expect(screen.getByTestId("value")).toHaveTextContent('"new-value"');
-      });
-    });
-
-    it("should handle undefined values", () => {
-      const obs = observable<string | undefined>(undefined);
-      render(<TestComponent obs={obs} />);
-      // undefined serializes to empty string in JSON.stringify, but actually shows as nothing
-      expect(screen.getByTestId("value")).toHaveTextContent("");
-    });
-
-    it("should handle object values", async () => {
-      const obs = observable({ name: "test", count: 5 });
-      render(<TestComponent obs={obs} />);
-
-      expect(screen.getByTestId("value")).toHaveTextContent('{"name":"test","count":5}');
-
-      act(() => {
-        obs({ name: "updated", count: 10 });
-      });
-
-      await waitFor(() => {
-        expect(screen.getByTestId("value")).toHaveTextContent('{"name":"updated","count":10}');
-      });
-    });
-  });
-
-  describe("array handling", () => {
-    it("should handle array values", () => {
-      const obs = observable(["a", "b", "c"]);
-      render(<ArrayTestComponent obs={obs} />);
-
-      expect(screen.getByTestId("array-value")).toHaveTextContent('["a","b","c"]');
-      expect(screen.getByTestId("array-length")).toHaveTextContent("3");
-    });
-
-    it("should re-render when array is replaced with new reference", async () => {
-      const obs = observable(["a", "b"]);
-      render(<ArrayTestComponent obs={obs} />);
-
-      expect(screen.getByTestId("array-length")).toHaveTextContent("2");
-
-      act(() => {
-        obs(["a", "b", "c"]); // New array reference
-      });
-
-      await waitFor(() => {
-        expect(screen.getByTestId("array-length")).toHaveTextContent("3");
-      });
-    });
-
-    it("should NOT re-render when array is mutated in place (requires immutable updates)", async () => {
-      // This tests the case where an array is mutated in place and notifySubscribers is called.
-      //
-      // IMPORTANT BEHAVIORAL NOTE:
-      // The OLD implementation (useState + useEffect) had special handling that would
-      // spread the array when it detected same-reference mutation:
-      //   if (isArray(newData) && newData === data) setData([...newData])
-      //
-      // The NEW implementation (useSyncExternalStore) does NOT do this.
-      // useSyncExternalStore uses Object.is() comparison on getSnapshot results.
-      // If the reference is the same, React won't re-render.
-      //
-      // This is actually the CORRECT behavior - it encourages immutable data patterns
-      // which are required for React 18 concurrent rendering to work correctly.
-      // Mutating data in place can cause tearing in concurrent mode.
-
-      const obs = observable(["a", "b"]);
-      render(<ArrayTestComponent obs={obs} />);
-
-      expect(screen.getByTestId("array-length")).toHaveTextContent("2");
-
-      act(() => {
-        // Mutate the array in place (BAD PRACTICE - don't do this!)
-        const arr = obs();
-        arr.push("c");
-        obs.notifySubscribers();
-      });
-
-      // The observable itself has the mutated value
-      expect(obs()).toEqual(["a", "b", "c"]);
-
-      // But the component did NOT re-render because the reference didn't change
-      // This is expected with useSyncExternalStore - it requires immutable updates
-      expect(screen.getByTestId("array-length")).toHaveTextContent("2");
-    });
-
-    it("should re-render when array is properly updated with spread", async () => {
-      // This is the recommended pattern for updating arrays
-      const obs = observable(["a", "b"]);
-      render(<ArrayTestComponent obs={obs} />);
-
-      expect(screen.getByTestId("array-length")).toHaveTextContent("2");
-
-      act(() => {
-        obs([...obs(), "c"]); // Proper immutable update
-      });
-
-      await waitFor(() => {
-        expect(screen.getByTestId("array-length")).toHaveTextContent("3");
-        expect(screen.getByTestId("array-value")).toHaveTextContent('["a","b","c"]');
-      });
-    });
-  });
-
-  describe("subscription management", () => {
-    it("should unsubscribe when component unmounts", () => {
-      const obs = observable("test");
-      const initialSubscriberCount = obs.subscriberCount();
-
-      const { unmount } = render(<TestComponent obs={obs} />);
-
-      // Should have subscribed
-      expect(obs.subscriberCount()).toBeGreaterThan(initialSubscriberCount);
-
-      unmount();
-
-      // Should have unsubscribed
-      expect(obs.subscriberCount()).toBe(initialSubscriberCount);
-    });
-
-    it("should handle multiple components subscribing to same observable", async () => {
-      const obs = observable("shared");
-
-      render(
-        <div>
-          <TestComponent obs={obs} testId="value1" />
-          <TestComponent obs={obs} testId="value2" />
-        </div>,
-      );
-
-      expect(screen.getByTestId("value1")).toHaveTextContent('"shared"');
-      expect(screen.getByTestId("value2")).toHaveTextContent('"shared"');
-
-      act(() => {
-        obs("updated");
-      });
-
-      await waitFor(() => {
-        expect(screen.getByTestId("value1")).toHaveTextContent('"updated"');
-        expect(screen.getByTestId("value2")).toHaveTextContent('"updated"');
-      });
-    });
-  });
-
-  describe("rapid updates", () => {
-    it("should handle rapid sequential updates correctly", async () => {
-      const obs = observable(0);
-
-      function CounterComponent() {
-        const [value] = useObservable(obs);
-        return <span data-testid="counter">{value}</span>;
-      }
-
-      render(<CounterComponent />);
-
-      act(() => {
-        for (let i = 1; i <= 10; i++) {
-          obs(i);
-        }
-      });
-
-      await waitFor(() => {
-        expect(screen.getByTestId("counter")).toHaveTextContent("10");
-      });
-    });
-  });
-});

package/src/hooks/use-observable.ts

@@ -1,67 +0,0 @@
-import {
-  isSubscribable,
-  type Observable,
-  type ReadonlyObservable,
-  unwrapObservable,
-} from "@peers-app/peers-sdk";
-import type React from "react";
-import { useCallback, useSyncExternalStore } from "react";
-
-/** Read and subscribe to a writable observable, with a setter for its value. */
-export function useObservable<T>(
-  sub: Observable<T>,
-  deps?: React.DependencyList,
-): [T, (value: T) => void];
-/** Read and subscribe to a read-only observable; its setter accepts no values. */
-export function useObservable<T>(
-  sub: ReadonlyObservable<T>,
-  deps?: React.DependencyList,
-): [T, (value: never) => void];
-/** Read a plain value or a writable observable, retaining the existing optional-observable API. */
-export function useObservable<T>(
-  sub: Observable<T> | T,
-  deps?: React.DependencyList,
-): [T, (value: T) => void];
-/**
- * Subscribe to an observable or computed in a functional component, using useSyncExternalStore
- * for React 18 concurrent rendering. Only writable observables have a callable typed setter.
- * @param sub the observable, computed, or plain value to read
- * @param deps dependencies that cause re-subscription when changed
- */
-export function useObservable<T>(
-  sub: ReadonlyObservable<T> | T,
-  deps: React.DependencyList = [],
-): [T, (value: T) => void] {
-  // Create memoized subscribe function that adapts Observable's subscribe API to useSyncExternalStore's expected signature
-  const subscribe = useCallback(
-    (onStoreChange: () => void) => {
-      if (!isSubscribable(sub)) {
-        // If not subscribable, return a no-op unsubscribe
-        return () => {};
-      }
-      const subscription = sub.subscribe(onStoreChange);
-      return () => subscription.dispose();
-    },
-    [sub, ...deps],
-  );
-
-  // getSnapshot returns the current value from the observable
-  const getSnapshot = useCallback(() => {
-    return unwrapObservable(sub);
-  }, [sub, ...deps]);
-
-  // Use useSyncExternalStore for concurrent-safe subscription
-  const data = useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
-
-  // Create setter that updates both local understanding and the observable
-  const setter = useCallback(
-    (newData: T) => {
-      if (isSubscribable(sub)) {
-        sub(newData);
-      }
-    },
-    [sub],
-  );
-
-  return [data, setter];
-}

package/src/hooks/use-on-screen.ts

@@ -1,24 +0,0 @@
-import type React from "react";
-import { useEffect, useState } from "react";
-
-/** Track whether the referenced element intersects the viewport. */
-export function useOnScreen(ref: React.RefObject<Element | null>) {
-  const [isIntersecting, setIntersecting] = useState(false);
-
-  // Read ref.current once on mount (ref object identity is stable).
-  useEffect(() => {
-    const element = ref.current;
-    if (!element) {
-      return;
-    }
-    const observer = new IntersectionObserver(([entry]) => {
-      setIntersecting(entry.isIntersecting);
-    });
-    observer.observe(element);
-    return () => {
-      observer.disconnect();
-    };
-  }, []);
-
-  return isIntersecting;
-}

package/src/hooks/use-promise.ts

@@ -1,34 +0,0 @@
-import type React from "react";
-import { useEffect, useState } from "react";
-
-/**
- * Use this to easily wait for a promise in a functional component.
- * @param p The promise to wait for
- * @param initialValue the initial value to return before the promise resolves
- * @param deps the dependencies to pass to useEffect which will trigger a re-render when any of the dependencies change
- * @returns the initial value and the resolved value of the promise
- */
-export function usePromise<T>(
-  p: Promise<T> | (() => Promise<T>),
-  initialValue?: T,
-  deps: React.DependencyList = [],
-): T | undefined {
-  const [data, setData] = useState(initialValue);
-  // `deps` drives when the effect re-runs; callers include `p` when it changes. Omitting `p` avoids duplicate tracking with `[...deps]`.
-  useEffect(() => {
-    let disposed = false;
-    if (typeof p === "function") {
-      p = p();
-    }
-    p.then((newData) => {
-      // if (!_.isEqual(newData, data) && !disposed) {
-      if (!disposed) {
-        setData(newData);
-      }
-    });
-    return () => {
-      disposed = true;
-    };
-  }, [...deps]);
-  return data;
-}