jazz-tools 0.14.28 → 0.15.1

package/src/inspector/viewer/new-app.tsx

@@ -0,0 +1,172 @@
+import { CoID, LocalNode, RawAccount, RawCoValue } from "cojson";
+import { styled } from "goober";
+import { useJazzContext } from "jazz-tools/react-core";
+import React, { useState } from "react";
+import { Button } from "../ui/button.js";
+import { Input } from "../ui/input.js";
+import { Breadcrumbs } from "./breadcrumbs.js";
+import { PageStack } from "./page-stack.js";
+import { usePagePath } from "./use-page-path.js";
+
+import { Account } from "jazz-tools";
+import { GlobalStyles } from "../ui/global-styles.js";
+import { Heading } from "../ui/heading.js";
+import { InspectorButton, type Position } from "./inpsector-button.js";
+import { useOpenInspector } from "./use-open-inspector.js";
+
+const InspectorContainer = styled("div")`
+  position: fixed;
+  height: 50vh;
+  max-height: 800px;
+  display: flex;
+  flex-direction: column;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background-color: white;
+  border-top: 1px solid var(--j-border-color);
+  color: var(--j-text-color);
+  
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-background);
+  }
+`;
+
+const HeaderContainer = styled("div")`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0 0.75rem;
+  margin: 0.75rem 0;
+`;
+
+const Form = styled("form")`
+  width: 24rem;
+`;
+
+const InitialForm = styled("form")`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  top: -1.5rem;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 100%;
+  width: 100%;
+  max-width: 24rem;
+  margin: 0 auto;
+`;
+
+const OrText = styled("p")`
+  text-align: center;
+`;
+
+export function JazzInspector({ position = "right" }: { position?: Position }) {
+  const context = useJazzContext<Account>();
+  const localNode = context.node;
+  const me = "me" in context ? context.me : undefined;
+
+  if (process.env.NODE_ENV !== "development") return null;
+
+  return (
+    <JazzInspectorInternal
+      position={position}
+      localNode={localNode}
+      accountId={me?._raw.id}
+    />
+  );
+}
+
+export function JazzInspectorInternal({
+  position = "right",
+  localNode,
+  accountId,
+}: {
+  position?: Position;
+  localNode?: LocalNode;
+  accountId?: CoID<RawAccount>;
+}) {
+  const [open, setOpen] = useOpenInspector();
+  const [coValueId, setCoValueId] = useState<CoID<RawCoValue> | "">("");
+  const { path, addPages, goToIndex, goBack, setPage } = usePagePath();
+
+  const handleCoValueIdSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (coValueId) {
+      setPage(coValueId);
+    }
+    setCoValueId("");
+  };
+
+  if (!open) {
+    return (
+      <InspectorButton position={position} onClick={() => setOpen(true)} />
+    );
+  }
+
+  return (
+    <InspectorContainer as={GlobalStyles} style={{ zIndex: 999 }}>
+      <HeaderContainer>
+        <Breadcrumbs path={path} onBreadcrumbClick={goToIndex} />
+        <Form onSubmit={handleCoValueIdSubmit}>
+          {path.length !== 0 && (
+            <Input
+              label="CoValue ID"
+              style={{ fontFamily: "monospace" }}
+              hideLabel
+              placeholder="co_z1234567890abcdef123456789"
+              value={coValueId}
+              onChange={(e) => setCoValueId(e.target.value as CoID<RawCoValue>)}
+            />
+          )}
+        </Form>
+        <Button variant="plain" type="button" onClick={() => setOpen(false)}>
+          Close
+        </Button>
+      </HeaderContainer>
+
+      <PageStack
+        path={path}
+        node={localNode}
+        goBack={goBack}
+        addPages={addPages}
+      >
+        {path.length <= 0 && (
+          <InitialForm
+            onSubmit={handleCoValueIdSubmit}
+            aria-hidden={path.length !== 0}
+          >
+            <Heading>Jazz CoValue Inspector</Heading>
+            <Input
+              label="CoValue ID"
+              style={{ minWidth: "21rem", fontFamily: "monospace" }}
+              hideLabel
+              placeholder="co_z1234567890abcdef123456789"
+              value={coValueId}
+              onChange={(e) => setCoValueId(e.target.value as CoID<RawCoValue>)}
+            />
+            <Button type="submit" variant="primary">
+              Inspect CoValue
+            </Button>
+
+            {accountId && (
+              <>
+                <OrText>or</OrText>
+
+                <Button
+                  variant="secondary"
+                  onClick={() => {
+                    setCoValueId(accountId);
+                    setPage(accountId);
+                  }}
+                >
+                  Inspect my account
+                </Button>
+              </>
+            )}
+          </InitialForm>
+        )}
+      </PageStack>
+    </InspectorContainer>
+  );
+}

package/src/inspector/viewer/page-stack.tsx

@@ -0,0 +1,56 @@
+import { CoID, LocalNode, RawCoValue } from "cojson";
+import { styled } from "goober";
+import { Page } from "./page.js";
+
+// Define the structure of a page in the path
+interface PageInfo {
+  coId: CoID<RawCoValue>;
+  name?: string;
+}
+
+// Props for the PageStack component
+interface PageStackProps {
+  path: PageInfo[];
+  node?: LocalNode | null;
+  goBack: () => void;
+  addPages: (pages: PageInfo[]) => void;
+  children?: React.ReactNode;
+}
+
+const PageStackContainer = styled("div")`
+  position: relative;
+  padding: 0 0.75rem;
+  overflow-y: auto;
+  flex: 1;
+  color: var(--j-text-color);
+  font-size: 16px;
+`;
+
+export function PageStack({
+  path,
+  node,
+  goBack,
+  addPages,
+  children,
+}: PageStackProps) {
+  const page = path[path.length - 1];
+  const index = path.length - 1;
+
+  return (
+    <>
+      <PageStackContainer>
+        {children}
+        {node && page && (
+          <Page
+            coId={page.coId}
+            node={node}
+            name={page.name || page.coId}
+            onHeaderClick={goBack}
+            onNavigate={addPages}
+            isTopLevel={index === path.length - 1}
+          />
+        )}
+      </PageStackContainer>
+    </>
+  );
+}

package/src/inspector/viewer/page.tsx

@@ -0,0 +1,199 @@
+import { CoID, LocalNode, RawCoStream, RawCoValue } from "cojson";
+import { styled } from "goober";
+import React from "react";
+import { Badge } from "../ui/badge.js";
+import { Heading } from "../ui/heading.js";
+import { Text } from "../ui/text.js";
+import { AccountOrGroupText } from "./account-or-group-text.js";
+import { AccountView } from "./account-view.js";
+import { CoStreamView } from "./co-stream-view.js";
+import { GridView } from "./grid-view.js";
+import { GroupView } from "./group-view.js";
+import { RoleDisplay } from "./role-display.js";
+import { TableView } from "./table-viewer.js";
+import { TypeIcon } from "./type-icon.js";
+import { PageInfo } from "./types.js";
+import { resolveCoValue, useResolvedCoValue } from "./use-resolve-covalue.js";
+
+interface PageContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  isTopLevel?: boolean;
+}
+
+const BasePageContainer = React.forwardRef<HTMLDivElement, PageContainerProps>(
+  ({ isTopLevel, ...rest }, ref) => <div ref={ref} {...rest} />,
+);
+
+const PageContainer = styled(BasePageContainer)<PageContainerProps>`
+  position: absolute;
+  z-index: 10;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0 0.75rem;
+`;
+
+const BackButton = styled("div")`
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 2.5rem;
+`;
+
+const HeaderContainer = styled("div")`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+`;
+
+const TitleContainer = styled("div")`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+`;
+
+const Title = styled(Heading)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25rem;
+`;
+
+const BadgeContainer = styled("div")`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+`;
+
+const ContentContainer = styled("div")`
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  padding-bottom: 2rem;
+`;
+
+type PageProps = {
+  coId: CoID<RawCoValue>;
+  node: LocalNode;
+  name: string;
+  onNavigate: (newPages: PageInfo[]) => void;
+  onHeaderClick?: () => void;
+  isTopLevel?: boolean;
+  style?: React.CSSProperties;
+  className?: string;
+};
+
+function View(
+  props: PageProps & { coValue: Awaited<ReturnType<typeof resolveCoValue>> },
+) {
+  const { type, extendedType } = props.coValue;
+  const { snapshot, value } = props.coValue;
+  const { node, onNavigate } = props;
+
+  if (!snapshot || snapshot === "unavailable") return;
+
+  if (type === "costream") {
+    return (
+      <CoStreamView
+        data={snapshot}
+        onNavigate={onNavigate}
+        node={node}
+        value={value as RawCoStream}
+      />
+    );
+  }
+
+  if (extendedType === "group") {
+    return <GroupView data={snapshot} node={node} onNavigate={onNavigate} />;
+  }
+
+  if (extendedType === "account") {
+    return <AccountView data={snapshot} node={node} onNavigate={onNavigate} />;
+  }
+
+  if (type === "colist" || extendedType === "record") {
+    return <TableView data={snapshot} node={node} onNavigate={onNavigate} />;
+  }
+
+  return <GridView data={snapshot} onNavigate={onNavigate} node={node} />;
+}
+
+export function Page(props: PageProps) {
+  const {
+    coId,
+    node,
+    name,
+    onNavigate,
+    onHeaderClick,
+    style,
+    className = "",
+    isTopLevel,
+  } = props;
+  const coValue = useResolvedCoValue(coId, node);
+
+  const { value, snapshot, type, extendedType } = coValue;
+
+  if (snapshot === "unavailable") {
+    return <div style={style}>Data unavailable</div>;
+  }
+
+  if (!snapshot) {
+    return <div style={style}></div>;
+  }
+
+  return (
+    <PageContainer style={style} className={className} isTopLevel={isTopLevel}>
+      {!isTopLevel && (
+        <BackButton
+          aria-label="Back"
+          onClick={() => {
+            onHeaderClick?.();
+          }}
+          aria-hidden="true"
+        ></BackButton>
+      )}
+      <HeaderContainer>
+        <TitleContainer>
+          <Title>
+            <span>
+              {name}
+              {typeof snapshot === "object" && "name" in snapshot ? (
+                <span style={{ color: "#57534e", fontWeight: 500 }}>
+                  {" "}
+                  {(snapshot as { name: string }).name}
+                </span>
+              ) : null}
+            </span>
+          </Title>
+          <BadgeContainer>
+            <Badge>
+              {type && <TypeIcon type={type} extendedType={extendedType} />}
+            </Badge>
+            <Badge>{coId}</Badge>
+          </BadgeContainer>
+        </TitleContainer>
+      </HeaderContainer>
+      <ContentContainer>
+        <View {...props} coValue={coValue} />
+        {extendedType !== "account" && extendedType !== "group" && (
+          <>
+            <RoleDisplay node={node} value={value} />
+            <Text muted>
+              Owned by{" "}
+              <AccountOrGroupText
+                coId={value.group.id}
+                node={node}
+                showId
+                onClick={() => {
+                  onNavigate([{ coId: value.group.id, name: "owner" }]);
+                }}
+              />
+            </Text>
+          </>
+        )}
+      </ContentContainer>
+    </PageContainer>
+  );
+}

package/src/inspector/viewer/raw-data-card.tsx

@@ -0,0 +1,53 @@
+import { JsonObject } from "cojson";
+import { useEffect, useState } from "react";
+import { Button } from "../ui/button.js";
+import { Card, CardBody, CardHeader } from "../ui/card.js";
+import { Text } from "../ui/text.js";
+import { ValueRenderer } from "./value-renderer.js";
+
+function CopyButton({ data }: { data: JsonObject }) {
+  const [copyCount, setCopyCount] = useState(0);
+  const copied = copyCount > 0;
+  const stringifiedData = JSON.stringify(data);
+
+  useEffect(() => {
+    if (copyCount > 0) {
+      const timeout = setTimeout(() => setCopyCount(0), 1000);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [copyCount]);
+
+  return (
+    <Button
+      style={{
+        position: "absolute",
+        top: "10px",
+        right: "10px",
+      }}
+      onClick={() => {
+        window.navigator.clipboard.writeText(stringifiedData).then(() => {
+          setCopyCount((count) => count + 1);
+        });
+      }}
+      variant="secondary"
+    >
+      {copied ? "Copied" : "Copy"}
+    </Button>
+  );
+}
+
+export function RawDataCard({ data }: { data: JsonObject }) {
+  return (
+    <Card style={{ position: "relative" }}>
+      <CardHeader>
+        <Text strong>Raw data</Text>
+        <CopyButton data={data} />
+      </CardHeader>
+      <CardBody>
+        <ValueRenderer json={data} />
+      </CardBody>
+    </Card>
+  );
+}

package/src/inspector/viewer/role-display.tsx

@@ -0,0 +1,28 @@
+import { LocalNode, RawCoValue } from "cojson";
+import { Text } from "../ui/text.js";
+import { useResolvedCoValue } from "./use-resolve-covalue.js";
+
+export function RoleDisplay({
+  node,
+  value,
+}: { node: LocalNode; value: RawCoValue }) {
+  const { snapshot } = useResolvedCoValue(value.group.id, node);
+
+  if (!snapshot || snapshot === "unavailable") {
+    return null;
+  }
+
+  let role;
+
+  if (value.group.id == node.getCurrentAgent().id) {
+    role = "owner";
+  } else if (snapshot[node.getCurrentAgent().id]) {
+    role = snapshot[node.getCurrentAgent().id] as string;
+  } else if (snapshot.everyone) {
+    role = snapshot.everyone as string;
+  } else {
+    role = "unauthorized";
+  }
+
+  return <Text>Role: {role}</Text>;
+}

package/src/inspector/viewer/table-viewer.tsx

@@ -0,0 +1,184 @@
+import { CoID, LocalNode, RawCoValue } from "cojson";
+import type { JsonObject } from "cojson";
+import { styled } from "goober";
+import { useMemo, useState } from "react";
+import { Button } from "../ui/button.js";
+import { PageInfo, isCoId } from "./types.js";
+import { useResolvedCoValues } from "./use-resolve-covalue.js";
+import { ValueRenderer } from "./value-renderer.js";
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../ui/table.js";
+import { Text } from "../ui/text.js";
+
+const PaginationContainer = styled("div")`
+  padding: 1rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+`;
+
+function CoValuesTableView({
+  data,
+  node,
+  onNavigate,
+}: {
+  data: JsonObject;
+  node: LocalNode;
+  onNavigate: (pages: PageInfo[]) => void;
+}) {
+  const [visibleRowsCount, setVisibleRowsCount] = useState(10);
+  const [coIdArray, visibleRows] = useMemo(() => {
+    const coIdArray = Array.isArray(data)
+      ? data
+      : Object.values(data).every((k) => typeof k === "string" && isCoId(k))
+        ? Object.values(data).map((k) => k as CoID<RawCoValue>)
+        : [];
+
+    const visibleRows = coIdArray.slice(0, visibleRowsCount);
+
+    return [coIdArray, visibleRows];
+  }, [data, visibleRowsCount]);
+  const resolvedRows = useResolvedCoValues(visibleRows, node);
+
+  const hasMore = visibleRowsCount < coIdArray.length;
+
+  if (!coIdArray.length) {
+    return <div>No data to display</div>;
+  }
+
+  if (resolvedRows.length === 0) {
+    return <div>Loading...</div>;
+  }
+
+  const keys = Array.from(
+    new Set(resolvedRows.flatMap((item) => Object.keys(item.snapshot || {}))),
+  );
+
+  const loadMore = () => {
+    setVisibleRowsCount((prevVisibleRows) => prevVisibleRows + 10);
+  };
+
+  return (
+    <>
+      <Table>
+        <TableHead>
+          <TableRow>
+            {[...keys, "Action"].map((key) => (
+              <TableHeader key={key}>{key}</TableHeader>
+            ))}
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {resolvedRows.slice(0, visibleRowsCount).map((item, index) => (
+            <TableRow key={index}>
+              {keys.map((key) => (
+                <TableCell key={key}>
+                  <ValueRenderer
+                    json={(item.snapshot as JsonObject)[key]}
+                    onCoIDClick={(coId) => {
+                      async function handleClick() {
+                        onNavigate([
+                          {
+                            coId: item.value!.id,
+                            name: index.toString(),
+                          },
+                          {
+                            coId: coId,
+                            name: key,
+                          },
+                        ]);
+                      }
+
+                      handleClick();
+                    }}
+                  />
+                </TableCell>
+              ))}
+
+              <TableCell>
+                <Button
+                  variant="secondary"
+                  onClick={() =>
+                    onNavigate([
+                      {
+                        coId: item.value!.id,
+                        name: index.toString(),
+                      },
+                    ])
+                  }
+                >
+                  View
+                </Button>
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      <PaginationContainer>
+        <Text muted small>
+          Showing {Math.min(visibleRowsCount, coIdArray.length)} of{" "}
+          {coIdArray.length}
+        </Text>
+        {hasMore && (
+          <Button variant="secondary" onClick={loadMore}>
+            Load more
+          </Button>
+        )}
+      </PaginationContainer>
+    </>
+  );
+}
+
+export function TableView({
+  data,
+  node,
+  onNavigate,
+}: {
+  data: JsonObject;
+  node: LocalNode;
+  onNavigate: (pages: PageInfo[]) => void;
+}) {
+  const isListOfCoValues = useMemo(() => {
+    return Array.isArray(data) && data.every((k) => isCoId(k));
+  }, [data]);
+
+  // if data is a list of covalue ids, we need to resolve those covalues
+  if (isListOfCoValues) {
+    return (
+      <CoValuesTableView data={data} node={node} onNavigate={onNavigate} />
+    );
+  }
+
+  // if data is a list of primitives, we can render those values directly
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader style={{ width: "5rem" }}>Index</TableHeader>
+          <TableHeader>Value</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {Array.isArray(data) &&
+          data?.map((value, index) => (
+            <TableRow key={index}>
+              <TableCell>
+                <Text mono>{index}</Text>
+              </TableCell>
+              <TableCell>
+                <ValueRenderer json={value} />
+              </TableCell>
+            </TableRow>
+          ))}
+      </TableBody>
+    </Table>
+  );
+}