@sentry/junior-dashboard 0.264.0 → 0.265.0

package/src/client/components/ui/table.tsx

@@ -0,0 +1,80 @@
+import type { ComponentProps } from "react";
+import { cn } from "@dashboard/lib/utils";
+
+/** Render a data table that scrolls sideways when it is wider than its box. */
+function Table({ className, ...props }: ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full border-collapse text-left text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:hover:bg-transparent", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "border-b border-dashboard-border-subtle transition-colors hover:bg-dashboard-fill-soft has-aria-expanded:bg-dashboard-fill-soft data-[state=selected]:bg-dashboard-surface-active",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Render a column header in the dashboard label style. */
+function TableHead({ className, ...props }: ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "px-2 py-2.5 text-left align-middle font-sans text-xs font-medium whitespace-nowrap text-dashboard-text-muted [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap text-dashboard-text [&:has([role=checkbox])]:pr-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Table, TableHeader, TableBody, TableHead, TableRow, TableCell };

package/src/client/components/ui/tabs.tsx

@@ -0,0 +1,75 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@dashboard/lib/utils";
+
+/** Own the selected panel and link each tab to its panel. */
+function Tabs({ className, ...props }: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("grid min-w-0 gap-4", className)}
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva("group/tabs-list flex min-w-0", {
+  variants: {
+    variant: {
+      /** A pill track. Tabs share the row equally on wide screens. */
+      default:
+        "gap-1 rounded-lg border border-dashboard-border bg-dashboard-surface-panel p-1",
+      /** Underlined tabs on a bottom border, for collection filters. */
+      line: "gap-1 border-b border-dashboard-border-subtle",
+    },
+  },
+  defaultVariants: { variant: "default" },
+});
+
+/** Hold the tabs. `variant` sets the look of the row and its tabs. */
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+/** Select one panel. The active tab uses the strong fill or the accent line. */
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "inline-flex min-w-0 cursor-pointer items-center gap-1.5 border-0 bg-transparent font-sans text-xs font-medium text-dashboard-text-muted transition-colors hover:text-dashboard-text focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
+        "group-data-[variant=default]/tabs-list:min-h-9 group-data-[variant=default]/tabs-list:flex-auto group-data-[variant=default]/tabs-list:justify-center group-data-[variant=default]/tabs-list:rounded-md group-data-[variant=default]/tabs-list:px-1.5 group-data-[variant=default]/tabs-list:py-2 group-data-[variant=default]/tabs-list:hover:bg-dashboard-fill-faint group-data-[variant=default]/tabs-list:data-active:bg-dashboard-fill-strong group-data-[variant=default]/tabs-list:data-active:text-dashboard-text group-data-[variant=default]/tabs-list:sm:flex-1",
+        "group-data-[variant=line]/tabs-list:relative group-data-[variant=line]/tabs-list:gap-2 group-data-[variant=line]/tabs-list:px-3 group-data-[variant=line]/tabs-list:py-2.5 group-data-[variant=line]/tabs-list:after:absolute group-data-[variant=line]/tabs-list:after:inset-x-2 group-data-[variant=line]/tabs-list:after:bottom-0 group-data-[variant=line]/tabs-list:after:h-px group-data-[variant=line]/tabs-list:data-active:text-dashboard-accent-text group-data-[variant=line]/tabs-list:data-active:after:bg-dashboard-accent",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Show the content for the selected tab. */
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn(
+        "min-w-0 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-dashboard-focus",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/client/components/ui/textarea.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react";
+import { cn } from "@dashboard/lib/utils";
+
+import { textControlClass } from "./input";
+
+/** Render a text area with the dashboard text control surface. */
+function Textarea({ className, ...props }: ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(textControlClass, "min-h-36", className)}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/src/client/components/ui/toast.tsx

@@ -0,0 +1,215 @@
+import * as React from "react";
+import { Toast as ToastPrimitive } from "@base-ui/react/toast";
+import { cn } from "@dashboard/lib/utils";
+
+import { Button } from "./button";
+import {
+  XIcon,
+  CircleCheckIcon,
+  InfoIcon,
+  TriangleAlertIcon,
+  OctagonXIcon,
+  Loader2Icon,
+} from "lucide-react";
+
+function ToastProvider({ ...props }: ToastPrimitive.Provider.Props) {
+  return <ToastPrimitive.Provider {...props} />;
+}
+
+function ToastPortal({ ...props }: ToastPrimitive.Portal.Props) {
+  return <ToastPrimitive.Portal data-slot="toast-portal" {...props} />;
+}
+
+function ToastViewport({ className, ...props }: ToastPrimitive.Viewport.Props) {
+  return (
+    <ToastPrimitive.Viewport
+      data-slot="toast-viewport"
+      className={cn(
+        "pointer-events-none fixed inset-x-4 bottom-[max(5.25rem,env(safe-area-inset-bottom))] z-[60] mx-auto w-auto max-w-sm outline-none sm:right-4 sm:left-auto sm:mx-0 sm:w-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function Toast({ className, ...props }: ToastPrimitive.Root.Props) {
+  return (
+    <ToastPrimitive.Root
+      data-slot="toast"
+      className={cn(
+        "group/toast pointer-events-auto absolute right-0 bottom-0 z-[calc(1000-var(--toast-index))] w-full origin-bottom rounded-lg border border-dashboard-border-emphasis bg-dashboard-surface-raised text-dashboard-text shadow-lg will-change-transform outline-none select-none focus-visible:outline-2 focus-visible:outline-dashboard-focus",
+        "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
+        "h-(--height) [transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_180ms_ease-out,opacity_180ms,height_180ms] motion-reduce:transition-none",
+        "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+        "data-expanded:h-(--toast-height) data-expanded:[transform:translateX(var(--toast-swipe-movement-x))_translateY(var(--offset-y))]",
+        "data-limited:opacity-0 data-starting-style:[transform:translateY(150%)]",
+        "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",
+        "data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+        "data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+        "data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+        "data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+        "data-expanded:data-ending-style:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ToastContent({ className, ...props }: ToastPrimitive.Content.Props) {
+  return (
+    <ToastPrimitive.Content
+      data-slot="toast-content"
+      className={cn(
+        "flex h-full items-center gap-3 overflow-hidden p-4 transition-opacity duration-180 motion-reduce:transition-none ease-[cubic-bezier(0.22,1,0.36,1)] data-behind:opacity-0 data-expanded:opacity-100",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ToastTitle({ className, ...props }: ToastPrimitive.Title.Props) {
+  return (
+    <ToastPrimitive.Title
+      data-slot="toast-title"
+      className={cn("break-words text-sm font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function ToastDescription({
+  className,
+  ...props
+}: ToastPrimitive.Description.Props) {
+  return (
+    <ToastPrimitive.Description
+      data-slot="toast-description"
+      className={cn("break-words text-sm text-dashboard-text-muted", className)}
+      {...props}
+    />
+  );
+}
+
+function ToastAction({
+  className,
+  render = <Button />,
+  ...props
+}: ToastPrimitive.Action.Props) {
+  return (
+    <ToastPrimitive.Action
+      data-slot="toast-action"
+      render={render}
+      className={cn("shrink-0", className)}
+      {...props}
+    />
+  );
+}
+
+function ToastClose({
+  className,
+  children,
+  render = <Button size="icon" />,
+  ...props
+}: ToastPrimitive.Close.Props) {
+  return (
+    <ToastPrimitive.Close
+      data-slot="toast-close"
+      aria-label="Close toast"
+      render={render}
+      className={cn(
+        "relative shrink-0 text-dashboard-text-muted after:absolute after:-inset-2 after:content-[''] hover:text-dashboard-text",
+        className,
+      )}
+      {...props}
+    >
+      {children ?? <XIcon aria-hidden="true" />}
+    </ToastPrimitive.Close>
+  );
+}
+
+function ToastIcon({ type }: { type: string | undefined }) {
+  let icon: React.ReactNode = null;
+
+  if (type === "success") {
+    icon = <CircleCheckIcon aria-hidden="true" />;
+  }
+
+  if (type === "info") {
+    icon = <InfoIcon aria-hidden="true" />;
+  }
+
+  if (type === "warning") {
+    icon = <TriangleAlertIcon aria-hidden="true" />;
+  }
+
+  if (type === "error") {
+    icon = <OctagonXIcon className="text-rose-300" aria-hidden="true" />;
+  }
+
+  if (type === "loading") {
+    icon = (
+      <Loader2Icon
+        className="animate-spin motion-reduce:animate-none"
+        aria-hidden="true"
+      />
+    );
+  }
+
+  if (!icon) {
+    return null;
+  }
+
+  return (
+    <span
+      data-slot="toast-icon"
+      className="shrink-0 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4"
+    >
+      {icon}
+    </span>
+  );
+}
+
+function ToastList() {
+  const { toasts } = ToastPrimitive.useToastManager();
+
+  return toasts.map((toastItem) => (
+    <Toast key={toastItem.id} toast={toastItem}>
+      <ToastContent>
+        <ToastIcon type={toastItem.type} />
+        <div className="flex min-w-0 flex-1 flex-col gap-1">
+          <ToastTitle />
+          <ToastDescription />
+        </div>
+        {toastItem.actionProps ? (
+          <ToastAction {...toastItem.actionProps} />
+        ) : null}
+        <ToastClose />
+      </ToastContent>
+    </Toast>
+  ));
+}
+
+/** Own notification state for one mounted dashboard and render its toast stack. */
+function Toaster({ children, ...props }: ToastPrimitive.Provider.Props) {
+  return (
+    <ToastProvider limit={3} timeout={4000} {...props}>
+      {children}
+      <ToastPortal>
+        <ToastViewport>
+          <ToastList />
+        </ToastViewport>
+      </ToastPortal>
+    </ToastProvider>
+  );
+}
+
+/** Show short notifications through the nearest mounted Toaster. */
+const useToastManager = ToastPrimitive.useToastManager;
+
+export { Toaster, useToastManager };

package/src/client/components/ui/toggle-group.tsx

@@ -0,0 +1,36 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { ToggleGroup as ToggleGroupPrimitive } from "@base-ui/react/toggle-group";
+import type { VariantProps } from "class-variance-authority";
+import { cn } from "@dashboard/lib/utils";
+import { toggleVariants } from "./toggle";
+
+/** Own the pressed values and arrow-key focus across a row of items. */
+function ToggleGroup<Value extends string>({
+  className,
+  ...props
+}: ToggleGroupPrimitive.Props<Value>) {
+  return (
+    <ToggleGroupPrimitive
+      data-slot="toggle-group"
+      className={cn("flex items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+/** Render one item with a `ui/toggle` look. */
+function ToggleGroupItem<Value extends string>({
+  className,
+  variant,
+  ...props
+}: TogglePrimitive.Props<Value> & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle-group-item"
+      className={cn(toggleVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { ToggleGroup, ToggleGroupItem };

package/src/client/components/ui/toggle.tsx

@@ -0,0 +1,37 @@
+import { Toggle as TogglePrimitive } from "@base-ui/react/toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@dashboard/lib/utils";
+
+/** Pressed-state looks shared by `Toggle` and `ToggleGroupItem`. */
+const toggleVariants = cva(
+  "inline-flex cursor-pointer items-center justify-center font-sans text-xs font-medium transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-dashboard-focus",
+  {
+    variants: {
+      variant: {
+        /** Quiet when off. The pressed state uses the active surface. */
+        default:
+          "h-7 min-w-10 rounded-md border border-transparent bg-transparent px-2 text-dashboard-text-muted hover:bg-dashboard-fill-hover hover:text-dashboard-text data-pressed:border-dashboard-border-interactive data-pressed:bg-dashboard-surface-active data-pressed:text-dashboard-text",
+        /** A bordered filter chip. The pressed state fills solid. */
+        pill: "rounded-md border border-dashboard-border-strong bg-dashboard-surface-raised px-2 py-1 leading-tight text-dashboard-text-muted hover:border-dashboard-border-interactive hover:bg-dashboard-surface-hover hover:text-dashboard-text data-pressed:border-dashboard-border-heavy data-pressed:bg-dashboard-text-solid data-pressed:text-dashboard-text-inverse",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  },
+);
+
+/** Turn one setting on or off. */
+function Toggle<Value extends string>({
+  className,
+  variant,
+  ...props
+}: TogglePrimitive.Props<Value> & VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Toggle, toggleVariants };

package/src/client/components/ui/tooltip.tsx

@@ -0,0 +1,168 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  createContext,
+  useContext,
+  useId,
+  useState,
+  useSyncExternalStore,
+  type ComponentProps,
+} from "react";
+import { cn } from "@dashboard/lib/utils";
+
+/** Open dashboard tooltips at once and keep them open briefly for the pointer to reach them. */
+function TooltipProvider({
+  delay = 0,
+  closeDelay = 150,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      closeDelay={closeDelay}
+      {...props}
+    />
+  );
+}
+
+/** Link the open popup to its trigger. Base UI leaves this to the app. */
+const TooltipDescriptionContext = createContext<string | undefined>(undefined);
+
+/**
+ * Wide screens with a fine hover pointer show tooltips. On smaller or touch
+ * screens, a tooltip can cover the menu that its trigger opens.
+ */
+const TOOLTIP_MEDIA_QUERY =
+  "(min-width: 768px) and (hover: hover) and (pointer: fine)";
+
+function subscribeToTooltipMedia(onChange: () => void) {
+  const media = window.matchMedia(TOOLTIP_MEDIA_QUERY);
+  media.addEventListener("change", onChange);
+  return () => media.removeEventListener("change", onChange);
+}
+
+function tooltipMediaMatches() {
+  return window.matchMedia(TOOLTIP_MEDIA_QUERY).matches;
+}
+
+/** Own one tooltip's open state. It stays off where tooltips are not shown. */
+function Tooltip({
+  disabled,
+  onOpenChange,
+  open: openProp,
+  ...props
+}: TooltipPrimitive.Root.Props) {
+  const available = useSyncExternalStore(
+    subscribeToTooltipMedia,
+    tooltipMediaMatches,
+    () => false,
+  );
+  const id = useId();
+  const [openState, setOpenState] = useState(props.defaultOpen ?? false);
+  const open = available && (openProp ?? openState);
+  return (
+    <TooltipDescriptionContext.Provider value={open ? id : undefined}>
+      <TooltipPrimitive.Root
+        data-slot="tooltip"
+        disabled={disabled || !available}
+        onOpenChange={(next, details) => {
+          setOpenState(next);
+          onOpenChange?.(next, details);
+        }}
+        open={openProp}
+        {...props}
+      />
+    </TooltipDescriptionContext.Provider>
+  );
+}
+
+/**
+ * Show the tooltip on mouse hover or keyboard focus. Touch does not open it.
+ * A click keeps it open, so copy and share feedback stays visible.
+ */
+function TooltipTrigger({
+  closeOnClick = false,
+  ...props
+}: TooltipPrimitive.Trigger.Props) {
+  const describedBy = useContext(TooltipDescriptionContext);
+  return (
+    <TooltipPrimitive.Trigger
+      aria-describedby={describedBy}
+      closeOnClick={closeOnClick}
+      data-slot="tooltip-trigger"
+      {...props}
+    />
+  );
+}
+
+const tooltipContentVariants = cva(
+  "z-50 select-text rounded-md border border-dashboard-border-emphasis bg-dashboard-surface-raised font-sans text-xs shadow-2xl shadow-black/70 outline-none",
+  {
+    variants: {
+      size: {
+        /** Selectable detail cards, such as chart buckets and metric breakdowns. */
+        default:
+          "min-w-36 max-w-lg px-3 py-2 leading-relaxed text-dashboard-text-muted",
+        /** One short label for an icon-only control. */
+        compact: "px-2.5 py-1.5 leading-none text-dashboard-text",
+      },
+    },
+    defaultVariants: { size: "default" },
+  },
+);
+
+/** Show tooltip text beside its trigger and keep it inside the viewport. */
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 10,
+  align = "center",
+  size,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<TooltipPrimitive.Positioner.Props, "align" | "side" | "sideOffset"> &
+  VariantProps<typeof tooltipContentVariants>) {
+  const id = useContext(TooltipDescriptionContext);
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        collisionPadding={8}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50 data-anchor-hidden:hidden"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          id={id}
+          role="tooltip"
+          className={cn(tooltipContentVariants({ size }), className)}
+          {...props}
+        >
+          {children}
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+/** Name what a detail tooltip describes, such as a chart bucket date. */
+function TooltipTitle({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("mb-1 font-semibold text-dashboard-text-muted", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipTitle,
+  TooltipProvider,
+  tooltipContentVariants,
+};