jazz-tools 0.14.27 → 0.15.0

package/src/inspector/ui/input.tsx

@@ -0,0 +1,51 @@
+import { styled } from "goober";
+import { forwardRef, useId } from "react";
+
+interface LabelProps {
+  hideLabel?: boolean;
+}
+
+interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement>,
+    LabelProps {
+  // label can be hidden with a "label:sr-only" className
+  label: string;
+  className?: string;
+  id?: string;
+}
+
+const Container = styled("div")`
+  display: grid;
+  gap: 0.25rem;
+`;
+
+const StyledInput = styled("input")`
+  width: 100%;
+  border-radius: var(--j-radius-md);
+  border: 1px solid var(--j-border-color);
+  padding: 0.5rem 0.875rem;
+  box-shadow: var(--j-shadow-sm);
+  font-weight: 500;
+  background-color: white;
+  color: var(--text-color-strong);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-foreground);
+  }
+`;
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ label, className, hideLabel, id: customId, ...inputProps }, ref) => {
+    const generatedId = useId();
+    const id = customId || generatedId;
+
+    return (
+      <Container className={className}>
+        <label htmlFor={id} className={hideLabel ? "j-sr-only" : ""}>
+          {label}
+        </label>
+        <StyledInput ref={ref} {...inputProps} id={id} />
+      </Container>
+    );
+  },
+);

package/src/inspector/ui/select.tsx

@@ -0,0 +1,73 @@
+import { styled } from "goober";
+import { useId } from "react";
+import { Icon } from "./icon.js";
+
+const SelectContainer = styled("div")<{ className?: string }>`
+  display: grid;
+  gap: 0.25rem;
+`;
+
+const SelectWrapper = styled("div")`
+  position: relative;
+  display: flex;
+  align-items: center;
+`;
+
+const StyledSelect = styled("select")`
+  width: 100%;
+  border-radius: var(--j-radius-md);
+  border: 1px solid var(--j-border-color);
+  padding: 0.5rem 0.875rem 0.5rem 0.875rem;
+  padding-right: 2rem;
+  box-shadow: var(--j-shadow-sm);
+  font-weight: 500;
+  color: var(--j-text-color-strong);
+  appearance: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-foreground);
+  }
+`;
+
+const SelectIcon = styled("span")`
+  position: absolute;
+  right: 0.5em;
+  color: var(--j-neutral-400);
+  pointer-events: none;
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--j-neutral-900);
+  }
+`;
+
+export function Select(
+  props: React.SelectHTMLAttributes<HTMLSelectElement> & {
+    label: string;
+    hideLabel?: boolean;
+  },
+) {
+  const { label, hideLabel, id: customId, className, ...selectProps } = props;
+  const generatedId = useId();
+  const id = customId || generatedId;
+
+  return (
+    <SelectContainer className={className}>
+      <label htmlFor={id} className={hideLabel ? "j-sr-only" : ""}>
+        {label}
+      </label>
+
+      <SelectWrapper>
+        <StyledSelect {...selectProps} id={id}>
+          {props.children}
+        </StyledSelect>
+
+        <SelectIcon>
+          <Icon name="chevronDown" size="sm" />
+        </SelectIcon>
+      </SelectWrapper>
+    </SelectContainer>
+  );
+}

package/src/inspector/ui/table.tsx

@@ -0,0 +1,90 @@
+import { styled } from "goober";
+import React from "react";
+
+const StyledTable = styled("table")`
+  width: 100%;
+`;
+
+const StyledThead = styled("thead")`
+  text-align: left;
+  border-bottom: 1px solid var(--j-border-color);
+  background-color: var(--j-neutral-100);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-neutral-925);
+  }
+`;
+
+const StyledTbody = styled("tbody")`
+  tr {
+    border-bottom: 1px solid var(--j-border-color);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+`;
+
+const StyledTh = styled("th")`
+  font-weight: 500;
+  padding: 0.5rem 0.75rem;
+  color: var(--j-text-color-strong);
+`;
+
+const StyledTd = styled("td")`
+  padding: 0.5rem 0.75rem;
+`;
+
+export const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ children, ...props }, ref) => (
+  <StyledTable ref={ref} {...props}>
+    {children}
+  </StyledTable>
+));
+
+export const TableHead = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ children, ...props }, ref) => (
+  <StyledThead ref={ref} {...props}>
+    {children}
+  </StyledThead>
+));
+
+export const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ children, ...props }, ref) => (
+  <StyledTbody ref={ref} {...props}>
+    {children}
+  </StyledTbody>
+));
+
+export const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ children, ...props }, ref) => (
+  <tr ref={ref} {...props}>
+    {children}
+  </tr>
+));
+
+export const TableHeader = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ children, ...props }, ref) => (
+  <StyledTh ref={ref} {...props}>
+    {children}
+  </StyledTh>
+));
+
+export const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ children, ...props }, ref) => (
+  <StyledTd ref={ref} {...props}>
+    {children}
+  </StyledTd>
+));

package/src/inspector/ui/text.tsx

@@ -0,0 +1,62 @@
+import { styled } from "goober";
+import React from "react";
+
+interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  muted?: boolean;
+  strong?: boolean;
+  small?: boolean;
+  inline?: boolean;
+  mono?: boolean;
+}
+
+const BaseText = React.forwardRef<HTMLParagraphElement, TextProps>(
+  ({ muted, strong, small, inline, mono, ...rest }, ref) => (
+    <div ref={ref} {...rest} />
+  ),
+);
+
+const StyledText = styled(BaseText)<TextProps>`
+  ${(props) =>
+    props.muted &&
+    `
+    color: var(--j-neutral-500);
+  `}
+
+  ${(props) =>
+    props.strong &&
+    `
+    font-weight: 500;
+    color: var(--j-text-color-strong);
+  `}
+
+  ${(props) =>
+    props.small &&
+    `
+    font-size: 0.875rem;
+  `}
+
+  ${(props) =>
+    props.inline &&
+    `
+    display: inline;
+  `}
+
+  ${(props) =>
+    props.mono &&
+    `
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  `}
+`;
+
+export function Text(
+  props: React.PropsWithChildren<{
+    className?: string;
+    muted?: boolean;
+    strong?: boolean;
+    inline?: boolean;
+    small?: boolean;
+    mono?: boolean;
+  }>,
+) {
+  return <StyledText {...props} />;
+}

package/src/inspector/viewer/account-or-group-text.tsx

@@ -0,0 +1,52 @@
+import { CoID, LocalNode, RawCoValue } from "cojson";
+import { useEffect, useState } from "react";
+import { Button } from "../ui/button.js";
+import { resolveCoValue, useResolvedCoValue } from "./use-resolve-covalue.js";
+
+export function AccountOrGroupText({
+  coId,
+  node,
+  showId = false,
+  onClick,
+}: {
+  coId: CoID<RawCoValue>;
+  node: LocalNode;
+  showId?: boolean;
+  onClick?: (name?: string) => void;
+}) {
+  const { snapshot, extendedType } = useResolvedCoValue(coId, node);
+  const [name, setName] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (snapshot && typeof snapshot === "object" && "profile" in snapshot) {
+      const profileId = snapshot.profile as CoID<RawCoValue>;
+      resolveCoValue(profileId, node).then((profileResult) => {
+        if (
+          profileResult.snapshot &&
+          typeof profileResult.snapshot === "object" &&
+          "name" in profileResult.snapshot
+        ) {
+          setName(profileResult.snapshot.name as string);
+        }
+      });
+    }
+  }, [snapshot, node, extendedType]);
+
+  if (!snapshot) return <span>Loading...</span>;
+  if (extendedType !== "account" && extendedType !== "group") {
+    return <span>CoID is not an account or group</span>;
+  }
+
+  const displayName = extendedType === "account" ? name || "Account" : "Group";
+  const displayText = showId ? `${displayName} <${coId}>` : displayName;
+
+  if (onClick) {
+    return (
+      <Button variant="link" onClick={() => onClick(displayName)}>
+        {displayText}
+      </Button>
+    );
+  }
+
+  return <>{displayText}</>;
+}

package/src/inspector/viewer/account-view.tsx

@@ -0,0 +1,34 @@
+import { JsonObject, LocalNode } from "cojson";
+import { GridView } from "./grid-view.js";
+import { RawDataCard } from "./raw-data-card.js";
+import { PageInfo } from "./types.js";
+
+export function AccountView({
+  data,
+  onNavigate,
+  node,
+}: {
+  data: JsonObject;
+  onNavigate: (pages: PageInfo[]) => void;
+  node: LocalNode;
+}) {
+  const readableData = { ...data };
+
+  for (const key in readableData) {
+    if (
+      key === "readKey" ||
+      key.startsWith("sealer_z") ||
+      key.startsWith("key_z")
+    ) {
+      delete readableData[key];
+    }
+  }
+
+  return (
+    <>
+      <GridView data={readableData} onNavigate={onNavigate} node={node} />
+
+      <RawDataCard data={data} />
+    </>
+  );
+}

package/src/inspector/viewer/breadcrumbs.tsx

@@ -0,0 +1,52 @@
+import { styled } from "goober";
+import React from "react";
+import { Button } from "../ui/button.js";
+import { PageInfo } from "./types.js";
+
+const BreadcrumbsContainer = styled("div")`
+  position: relative;
+  z-index: 20;
+  flex: 1;
+  display: flex;
+  align-items: center;
+`;
+
+const Separator = styled("span")`
+  padding: 0 0.125rem;
+`;
+
+interface BreadcrumbsProps {
+  path: PageInfo[];
+  onBreadcrumbClick: (index: number) => void;
+}
+
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({
+  path,
+  onBreadcrumbClick,
+}) => {
+  return (
+    <BreadcrumbsContainer>
+      <Button
+        variant="link"
+        style={{ padding: "0 0.25rem" }}
+        onClick={() => onBreadcrumbClick(-1)}
+      >
+        Home
+      </Button>
+      {path.map((page, index) => {
+        return (
+          <React.Fragment key={page.coId}>
+            <Separator aria-hidden>/</Separator>
+            <Button
+              variant="link"
+              style={{ padding: "0 0.25rem" }}
+              onClick={() => onBreadcrumbClick(index)}
+            >
+              {index === 0 ? page.name || "Root" : page.name}
+            </Button>
+          </React.Fragment>
+        );
+      })}
+    </BreadcrumbsContainer>
+  );
+};