@noya-app/noya-multiplayer-react 0.1.62 → 0.1.64

package/src/inspector/StateInspectorArrow.tsx

@@ -0,0 +1,28 @@
+import React, { CSSProperties } from "react";
+
+// Rotates ▶️ or ▼ based on expanded state
+export function StateInspectorArrow({
+  expanded,
+  onClick,
+  style,
+}: {
+  expanded: boolean;
+  onClick?: () => void;
+  style?: CSSProperties;
+}) {
+  return (
+    <span
+      role="button"
+      onClick={onClick}
+      style={{
+        display: "inline-block",
+        textAlign: "center",
+        transform: expanded ? "rotate(0deg)" : "rotate(-90deg)",
+        fontFamily: "Menlo, monospace",
+        ...style,
+      }}
+    >
+      {"▼"}
+    </span>
+  );
+}

package/src/inspector/StateInspectorButton.tsx

@@ -0,0 +1,45 @@
+import React, { CSSProperties } from "react";
+import { lightInspectorTheme } from "./inspectorTheme";
+
+export function StateInspectorButton({
+  children,
+  onClick,
+  style,
+  theme,
+  disabled,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+  style?: CSSProperties;
+  theme: typeof lightInspectorTheme;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={(event) => {
+        event.stopPropagation();
+        onClick();
+      }}
+      style={{
+        flex: "0",
+        appearance: "none",
+        background: "none",
+        color: theme.BASE_COLOR,
+        opacity: disabled ? 0.25 : 1,
+        border: "none",
+        fontSize: "12px",
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "0",
+        cursor: "pointer",
+        ...style,
+      }}
+    >
+      {children}
+    </button>
+  );
+}

package/src/inspector/StateInspectorDisclosureSection.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import React, {
+  CSSProperties,
+  DetailedHTMLProps,
+  ForwardedRef,
+  forwardRef,
+  HTMLAttributes,
+} from "react";
+import { darkInspectorTheme, lightInspectorTheme } from "./inspectorTheme";
+import { StateInspectorArrow } from "./StateInspectorArrow";
+
+export function StateInspectorDisclosureSection({
+  open,
+  setOpen,
+  title,
+  right,
+  children,
+  colorScheme,
+  isFirst,
+  style,
+}: {
+  open: boolean;
+  setOpen?: (value: boolean) => void;
+  title: React.ReactNode;
+  right?: React.ReactNode;
+  children: React.ReactNode;
+  colorScheme: "light" | "dark";
+  isFirst?: boolean;
+  style?: CSSProperties;
+}) {
+  const theme =
+    colorScheme === "light" ? lightInspectorTheme : darkInspectorTheme;
+
+  const borderColor =
+    colorScheme === "light" ? "rgba(0,0,0,0.1)" : "rgba(255,255,255,0.1)";
+
+  return (
+    <div
+      style={{
+        flex: open ? "1 1 0" : "0",
+        display: "flex",
+        flexDirection: "column",
+        ...style,
+      }}
+    >
+      <div
+        onClick={() => setOpen?.(!open)}
+        style={{
+          cursor: "default",
+          fontSize: "12px",
+          padding: "4px 10px",
+          display: "flex",
+          alignItems: "center",
+          ...(!isFirst && { borderTop: `1px solid ${borderColor}` }),
+          ...(open && { borderBottom: `1px solid ${borderColor}` }),
+        }}
+      >
+        {setOpen && (
+          <StateInspectorArrow
+            expanded={open}
+            style={{
+              fontSize: theme.ARROW_FONT_SIZE,
+              marginRight: theme.ARROW_MARGIN_RIGHT + 1,
+              color: theme.ARROW_COLOR,
+            }}
+          />
+        )}
+        <span style={{ flex: "1 1 0", userSelect: "none" }}>{title}</span>
+        {right}
+      </div>
+      {open && children}
+    </div>
+  );
+}
+
+export const StateInspectorDisclosureRowInner = forwardRef(
+  function StateInspectorDisclosureRowInner(
+    props: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>,
+    forwardedRef: ForwardedRef<HTMLDivElement>
+  ) {
+    return (
+      <div
+        style={{
+          flex: "1 1 0",
+          overflowY: "auto",
+          overflowX: "hidden",
+          display: "flex",
+          flexDirection: "column",
+          ...props.style,
+        }}
+        {...props}
+        ref={forwardedRef}
+      />
+    );
+  }
+);

package/src/inspector/StateInspectorRow.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import React, { CSSProperties } from "react";
+
+export function StateInspectorRow({
+  children,
+  colorScheme,
+  selected,
+  style,
+  variant,
+}: {
+  children: React.ReactNode;
+  colorScheme: "light" | "dark";
+  selected?: boolean;
+  style?: CSSProperties;
+  variant?: "up" | "down";
+}) {
+  const solidBorderColor =
+    colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
+
+  return (
+    <div
+      style={{
+        borderBottom: `1px solid ${solidBorderColor}`,
+        fontSize: "12px",
+        fontFamily: "Menlo, monospace",
+        padding: "2px 12px 1px",
+        display: "flex",
+        alignItems: "center",
+        background:
+          variant === "up"
+            ? "rgba(0,255,0,0.1)"
+            : variant === "down"
+              ? "transparent"
+              : selected
+                ? "rgb(59 130 246 / 15%)"
+                : undefined,
+        // background:
+        //   colorScheme === "light"
+        //     ? "rgba(0,0,0,0.05)"
+        //     : "rgba(255,255,255,0.05)",
+        ...style,
+      }}
+    >
+      <span
+        style={{
+          fontFamily: "Menlo, monospace",
+          fontSize: "11px",
+          borderRadius: 4,
+          display: "inline-block",
+        }}
+      >
+        {children}
+      </span>
+    </div>
+  );
+}

package/src/inspector/StateInspectorTitleLabel.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+export function StateInspectorTitleLabel({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <span style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+      {children}
+    </span>
+  );
+}

package/src/inspector/StateInspectorToggleButton.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { StateInspectorAnchor } from "./StateInspector";
+import { lightInspectorTheme } from "./inspectorTheme";
+
+export function StateInspectorToggleButton({
+  showInspector,
+  setShowInspector,
+  theme,
+  anchor,
+}: {
+  showInspector: boolean;
+  setShowInspector: (value: boolean) => void;
+  theme: typeof lightInspectorTheme;
+  anchor: StateInspectorAnchor;
+}) {
+  const isRightAnchor = anchor === "right";
+
+  const rightIcon = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m5.25 4.5 7.5 7.5-7.5 7.5m6-15 7.5 7.5-7.5 7.5"
+      />
+    </svg>
+  );
+
+  const leftIcon = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className="size-6"
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5"
+      />
+    </svg>
+  );
+
+  return (
+    <span
+      role="button"
+      style={{
+        flex: "0",
+        appearance: "none",
+        color: theme.BASE_COLOR,
+        border: "none",
+        fontSize: "12px",
+        whiteSpace: "nowrap",
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2px 0",
+      }}
+      onClick={(event) => {
+        event.stopPropagation();
+
+        setShowInspector(!showInspector);
+      }}
+    >
+      {showInspector ? (
+        "Hide Inspector"
+      ) : (
+        <span style={{ width: "12px", height: "12px" }}>
+          {isRightAnchor ? rightIcon : leftIcon}
+        </span>
+      )}
+    </span>
+  );
+}

package/src/inspector/inspectorTheme.ts

@@ -0,0 +1,21 @@
+import { chromeDark, chromeLight } from "react-inspector";
+
+export const lightInspectorTheme = {
+  ...chromeLight,
+  BASE_BACKGROUND_COLOR: "transparent",
+  OBJECT_NAME_COLOR: "rgba(0,0,0,0.7)",
+} as any;
+
+export const darkInspectorTheme = {
+  ...chromeDark,
+  BASE_BACKGROUND_COLOR: "transparent",
+  OBJECT_NAME_COLOR: "rgba(255,255,255,0.7)",
+} as any;
+
+export const getStateInspectorTheme = (colorScheme: "light" | "dark") => {
+  return colorScheme === "light" ? lightInspectorTheme : darkInspectorTheme;
+};
+
+export const getStateInspectorBorderColor = (colorScheme: "light" | "dark") => {
+  return colorScheme === "light" ? "rgb(223 223 223)" : "rgb(29 29 29)";
+};

package/src/inspector/sections/ActivityEventsSection.tsx

@@ -0,0 +1,136 @@
+import { ActivityEventsManager, StreamFilter } from "@noya-app/state-manager";
+import React, { useState } from "react";
+import { ObjectInspector } from "react-inspector";
+import { useActivityEventsForManager } from "../../NoyaStateContext";
+import { getStateInspectorTheme } from "../inspectorTheme";
+import { StateInspectorButton } from "../StateInspectorButton";
+import {
+  StateInspectorDisclosureRowInner,
+  StateInspectorDisclosureSection,
+} from "../StateInspectorDisclosureSection";
+import { StateInspectorRow } from "../StateInspectorRow";
+
+function isResourceStreamFilter(
+  streamFilter: StreamFilter
+): streamFilter is { resourceId: string } {
+  return typeof streamFilter === "object" && "resourceId" in streamFilter;
+}
+
+function isResourceActivityEvent(
+  activityEvent: unknown
+): activityEvent is { resourceId: string } {
+  return (
+    typeof activityEvent === "object" &&
+    activityEvent !== null &&
+    "type" in activityEvent &&
+    activityEvent.type === "resource" &&
+    "resourceId" in activityEvent &&
+    typeof activityEvent.resourceId === "string"
+  );
+}
+
+export function ActivityEventsSection({
+  showEvents,
+  setShowEvents,
+  colorScheme,
+  activityEventsContainerRef,
+  activityEventsManager,
+}: {
+  showEvents: boolean;
+  setShowEvents: (value: boolean) => void;
+  colorScheme: "light" | "dark";
+  activityEventsContainerRef: React.RefObject<HTMLDivElement | null>;
+  activityEventsManager: ActivityEventsManager;
+}) {
+  const [streamFilter, setStreamFilter] = useState<StreamFilter>("all");
+  const streamFilterType = isResourceStreamFilter(streamFilter)
+    ? "resource"
+    : "all";
+  const theme = getStateInspectorTheme(colorScheme);
+  const activityEvents = useActivityEventsForManager(
+    showEvents ? streamFilter : undefined,
+    activityEventsManager
+  );
+
+  return (
+    <StateInspectorDisclosureSection
+      open={showEvents}
+      setOpen={setShowEvents}
+      title={`Activity Events`}
+      colorScheme={colorScheme}
+    >
+      <StateInspectorDisclosureRowInner ref={activityEventsContainerRef}>
+        <div style={{ padding: "4px 12px", display: "flex", gap: "4px" }}>
+          <select
+            name="streamFilterType"
+            value={streamFilterType}
+            style={{ flex: "0 0 auto", height: "19px" }}
+            onChange={(e) => {
+              const value = e.target.value as string;
+              if (value === "all") {
+                setStreamFilter("all");
+              } else {
+                setStreamFilter({ resourceId: "" });
+              }
+            }}
+          >
+            <option value="all">All</option>
+            <option value="resource">Resource</option>
+          </select>
+          {isResourceStreamFilter(streamFilter) && (
+            <input
+              name="resourceId"
+              type="text"
+              placeholder="Resource ID"
+              value={streamFilter.resourceId}
+              style={{
+                flex: "1 1 auto",
+                height: "19px",
+                padding: "0px 4px",
+                boxSizing: "border-box",
+              }}
+              onChange={(e) =>
+                setStreamFilter({ ...streamFilter, resourceId: e.target.value })
+              }
+            />
+          )}
+        </div>
+        {activityEvents?.map((activityEvent, index) => (
+          <StateInspectorRow
+            key={index}
+            colorScheme={colorScheme}
+            style={{
+              padding: "0px 12px 1px",
+            }}
+          >
+            <ObjectInspector data={activityEvent} theme={theme} />
+            {streamFilterType === "all" &&
+              isResourceActivityEvent(activityEvent) && (
+                <StateInspectorButton
+                  theme={theme}
+                  onClick={() => {
+                    setStreamFilter({ resourceId: activityEvent.resourceId });
+                  }}
+                >
+                  Watch this resource
+                </StateInspectorButton>
+              )}
+          </StateInspectorRow>
+        ))}
+        {!activityEvents && (
+          <div
+            style={{
+              padding: "12px",
+              fontSize: "12px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px",
+            }}
+          >
+            <span>No activity events</span>
+          </div>
+        )}
+      </StateInspectorDisclosureRowInner>
+    </StateInspectorDisclosureSection>
+  );
+}

package/src/inspector/sections/EventsSection.tsx

@@ -0,0 +1,89 @@
+import { ConnectionEvent } from "@noya-app/state-manager";
+import React from "react";
+import { ObjectInspector, ObjectLabel } from "react-inspector";
+import { getStateInspectorTheme } from "../inspectorTheme";
+import { ObjectRootLabel } from "../ObjectRootLabel";
+import {
+  StateInspectorDisclosureRowInner,
+  StateInspectorDisclosureSection,
+} from "../StateInspectorDisclosureSection";
+import { StateInspectorRow } from "../StateInspectorRow";
+
+export function EventsSection<S>({
+  showEvents,
+  setShowEvents,
+  colorScheme,
+  eventsContainerRef,
+  connectionEvents,
+}: {
+  showEvents: boolean;
+  setShowEvents: (value: boolean) => void;
+  colorScheme: "light" | "dark";
+  eventsContainerRef: React.RefObject<HTMLDivElement | null>;
+  connectionEvents: ConnectionEvent<S>[];
+}) {
+  const theme = getStateInspectorTheme(colorScheme);
+
+  return (
+    <StateInspectorDisclosureSection
+      open={showEvents}
+      setOpen={setShowEvents}
+      title="Events"
+      colorScheme={colorScheme}
+    >
+      <StateInspectorDisclosureRowInner ref={eventsContainerRef}>
+        {connectionEvents?.map((event, index) =>
+          event.type === "stateChange" ? (
+            <StateInspectorRow key={index} colorScheme={colorScheme}>
+              connection:{" "}
+              <span style={{ fontStyle: "italic" }}>
+                {event.state.toLowerCase()}
+              </span>
+            </StateInspectorRow>
+          ) : (
+            <StateInspectorRow
+              key={index}
+              colorScheme={colorScheme}
+              variant={event.type === "send" ? "up" : "down"}
+              style={{
+                padding: "0px 12px 1px",
+              }}
+            >
+              <ObjectInspector
+                data={event.type === "error" ? event.error : event.message}
+                theme={theme}
+                nodeRenderer={({ depth, name, data, isNonenumerable }: any) => {
+                  const direction = event.type === "send" ? "up" : "down";
+
+                  return depth === 0 ? (
+                    <ObjectRootLabel direction={direction} data={data} />
+                  ) : (
+                    <ObjectLabel
+                      direction={direction}
+                      name={name}
+                      data={data}
+                      isNonenumerable={isNonenumerable}
+                    />
+                  );
+                }}
+              />
+            </StateInspectorRow>
+          )
+        )}
+        {!connectionEvents && (
+          <div
+            style={{
+              padding: "12px",
+              fontSize: "12px",
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px",
+            }}
+          >
+            <span>No recorded events</span>
+          </div>
+        )}
+      </StateInspectorDisclosureRowInner>
+    </StateInspectorDisclosureSection>
+  );
+}