@datarecce/ui 0.1.30 → 0.1.32

package/recce-source/js/src/components/ui/mui-utils.ts

@@ -0,0 +1,113 @@
+/**
+ * Type augmentations for MUI components to support custom color palettes
+ *
+ * These augmentations enable using custom colors (iochmara, cyan, amber, etc.)
+ * directly as color props on MUI components, matching the colors defined
+ * in mui-theme.ts. The actual color styles are defined via `variants` in
+ * the theme's componentOverrides.
+ *
+ * Usage:
+ * ```tsx
+ * // Direct MUI usage with custom colors
+ * <Button color="iochmara">Primary Action</Button>
+ * <CircularProgress color="amber" />
+ * <Badge color="green" badgeContent={5}>...</Badge>
+ * ```
+ */
+
+// Custom color names that match the colors object in mui-theme.ts
+type CustomColors =
+  | "brand"
+  | "iochmara"
+  | "cyan"
+  | "amber"
+  | "green"
+  | "red"
+  | "rose"
+  | "fuchsia"
+  | "neutral";
+
+// Helper type to create the color overrides object
+type ColorOverrides = { [K in CustomColors]: true };
+
+declare module "@mui/material/Button" {
+  interface ButtonPropsColorOverrides extends ColorOverrides {}
+  interface ButtonPropsSizeOverrides {
+    xsmall: true;
+  }
+}
+
+declare module "@mui/material/ButtonGroup" {
+  interface ButtonGroupPropsColorOverrides extends ColorOverrides {}
+  interface ButtonGroupPropsSizeOverrides {
+    xsmall: true;
+  }
+}
+
+declare module "@mui/material/IconButton" {
+  interface IconButtonPropsColorOverrides extends ColorOverrides {}
+  interface IconButtonPropsSizeOverrides {
+    xsmall: true;
+  }
+}
+
+declare module "@mui/material/Chip" {
+  interface ChipPropsColorOverrides extends ColorOverrides {}
+  interface ChipPropsSizeOverrides {
+    xsmall: true;
+  }
+}
+
+declare module "@mui/material/CircularProgress" {
+  interface CircularProgressPropsColorOverrides extends ColorOverrides {}
+}
+
+declare module "@mui/material/LinearProgress" {
+  interface LinearProgressPropsColorOverrides extends ColorOverrides {}
+}
+
+declare module "@mui/material/Badge" {
+  interface BadgePropsColorOverrides extends ColorOverrides {}
+}
+
+declare module "@mui/material/Alert" {
+  interface AlertPropsColorOverrides extends ColorOverrides {}
+}
+
+declare module "@mui/material/Tabs" {
+  interface TabsPropsIndicatorColorOverrides extends ColorOverrides {}
+}
+
+declare module "@mui/material/Switch" {
+  interface SwitchPropsColorOverrides extends ColorOverrides {}
+}
+
+declare module "@mui/material/Checkbox" {
+  interface CheckboxPropsColorOverrides extends ColorOverrides {}
+}
+
+declare module "@mui/material/Radio" {
+  interface RadioPropsColorOverrides extends ColorOverrides {}
+}
+
+declare module "@mui/material/TextField" {
+  interface TextFieldPropsColorOverrides extends ColorOverrides {}
+}
+
+declare module "@mui/material/Slider" {
+  interface SliderPropsColorOverrides extends ColorOverrides {}
+}
+
+declare module "@mui/material/ToggleButton" {
+  interface ToggleButtonPropsColorOverrides extends ColorOverrides {}
+}
+
+declare module "@mui/material/Fab" {
+  interface FabPropsColorOverrides extends ColorOverrides {}
+  interface FabPropsSizeOverrides {
+    xsmall: true;
+  }
+}
+
+// Empty export to make this file an ES module (required for module augmentations)
+export {};

package/recce-source/js/src/components/ui/toaster.tsx

@@ -0,0 +1,288 @@
+"use client";
+
+import Alert from "@mui/material/Alert";
+import CircularProgress from "@mui/material/CircularProgress";
+import Snackbar from "@mui/material/Snackbar";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import {
+  createContext,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useState,
+} from "react";
+
+/**
+ * Toast types and interfaces
+ */
+export interface ToastOptions {
+  id?: string;
+  title?: string;
+  description?: ReactNode;
+  type?: "success" | "error" | "warning" | "info" | "loading";
+  duration?: number;
+  closable?: boolean;
+  action?: {
+    label: string;
+    onClick: () => void;
+  };
+}
+
+interface ToastState extends ToastOptions {
+  id: string;
+  open: boolean;
+}
+
+interface ToasterContextValue {
+  toast: (options: ToastOptions) => string;
+  success: (options: Omit<ToastOptions, "type">) => string;
+  error: (options: Omit<ToastOptions, "type">) => string;
+  warning: (options: Omit<ToastOptions, "type">) => string;
+  info: (options: Omit<ToastOptions, "type">) => string;
+  loading: (options: Omit<ToastOptions, "type">) => string;
+  dismiss: (id: string) => void;
+  update: (id: string, options: Partial<ToastOptions>) => void;
+}
+
+const ToasterContext = createContext<ToasterContextValue | null>(null);
+
+let toastIdCounter = 0;
+
+/**
+ * Simple toaster implementation using MUI Snackbar
+ */
+export function ToasterProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<ToastState[]>([]);
+
+  const createToast = useCallback((options: ToastOptions): string => {
+    const id = options.id || `toast-${++toastIdCounter}`;
+    const newToast: ToastState = {
+      id,
+      open: true,
+      duration: options.type === "loading" ? null : (options.duration ?? 5000),
+      closable: options.closable ?? true,
+      ...options,
+    } as ToastState;
+
+    setToasts((prev) => {
+      // Remove existing toast with same id
+      const filtered = prev.filter((t) => t.id !== id);
+      return [...filtered, newToast];
+    });
+
+    return id;
+  }, []);
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((prev) =>
+      prev.map((t) => (t.id === id ? { ...t, open: false } : t)),
+    );
+    // Remove after animation
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 300);
+  }, []);
+
+  const update = useCallback((id: string, options: Partial<ToastOptions>) => {
+    setToasts((prev) =>
+      prev.map((t) => (t.id === id ? { ...t, ...options } : t)),
+    );
+  }, []);
+
+  const contextValue: ToasterContextValue = {
+    toast: createToast,
+    success: (opts) => createToast({ ...opts, type: "success" }),
+    error: (opts) => createToast({ ...opts, type: "error" }),
+    warning: (opts) => createToast({ ...opts, type: "warning" }),
+    info: (opts) => createToast({ ...opts, type: "info" }),
+    loading: (opts) => createToast({ ...opts, type: "loading" }),
+    dismiss,
+    update,
+  };
+
+  return (
+    <ToasterContext.Provider value={contextValue}>
+      {children}
+      {toasts.map((toast) => (
+        <Snackbar
+          key={toast.id}
+          open={toast.open}
+          autoHideDuration={toast.duration}
+          onClose={() => toast.closable && dismiss(toast.id)}
+          anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        >
+          <Alert
+            severity={toast.type === "loading" ? "info" : toast.type || "info"}
+            onClose={toast.closable ? () => dismiss(toast.id) : undefined}
+            icon={
+              toast.type === "loading" ? (
+                <CircularProgress size={20} color="inherit" />
+              ) : undefined
+            }
+            sx={{ width: "100%", minWidth: 300 }}
+          >
+            <Stack spacing={0.5}>
+              {toast.title && (
+                <Typography variant="subtitle2" fontWeight="bold">
+                  {toast.title}
+                </Typography>
+              )}
+              {toast.description && (
+                <Typography variant="body2" component="div">
+                  {toast.description}
+                </Typography>
+              )}
+            </Stack>
+          </Alert>
+        </Snackbar>
+      ))}
+    </ToasterContext.Provider>
+  );
+}
+
+/**
+ * Hook to use the toaster
+ */
+export function useToaster(): ToasterContextValue {
+  const context = useContext(ToasterContext);
+  if (!context) {
+    throw new Error("useToaster must be used within ToasterProvider");
+  }
+  return context;
+}
+
+/**
+ * Standalone toaster instance for use outside React context
+ * Uses a simple event-based system
+ */
+interface ToastEvent {
+  type: "create" | "dismiss" | "update";
+  options?: ToastOptions;
+  id?: string;
+}
+
+const listeners: Set<(event: ToastEvent) => void> = new Set();
+
+export const toaster = {
+  create: (options: ToastOptions): string => {
+    const id = options.id || `toast-${++toastIdCounter}`;
+    listeners.forEach((listener) =>
+      listener({ type: "create", options: { ...options, id } }),
+    );
+    return id;
+  },
+  success: (options: Omit<ToastOptions, "type">) =>
+    toaster.create({ ...options, type: "success" }),
+  error: (options: Omit<ToastOptions, "type">) =>
+    toaster.create({ ...options, type: "error" }),
+  warning: (options: Omit<ToastOptions, "type">) =>
+    toaster.create({ ...options, type: "warning" }),
+  info: (options: Omit<ToastOptions, "type">) =>
+    toaster.create({ ...options, type: "info" }),
+  loading: (options: Omit<ToastOptions, "type">) =>
+    toaster.create({ ...options, type: "loading" }),
+  dismiss: (id: string) => {
+    listeners.forEach((listener) => listener({ type: "dismiss", id }));
+  },
+  // Alias for dismiss (for backward compatibility)
+  remove: (id: string) => {
+    listeners.forEach((listener) => listener({ type: "dismiss", id }));
+  },
+  update: (id: string, options: Partial<ToastOptions>) => {
+    listeners.forEach((listener) => listener({ type: "update", id, options }));
+  },
+  subscribe: (listener: (event: ToastEvent) => void) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  },
+};
+
+/**
+ * Toaster component that renders toasts from the standalone toaster
+ */
+export function Toaster() {
+  const [toasts, setToasts] = useState<ToastState[]>([]);
+
+  // Subscribe to toast events
+  useState(() => {
+    const unsubscribe = toaster.subscribe((event) => {
+      if (event.type === "create" && event.options) {
+        const newToast: ToastState = {
+          id: event.options.id || `toast-${++toastIdCounter}`,
+          open: true,
+          duration:
+            event.options.type === "loading"
+              ? undefined
+              : (event.options.duration ?? 5000),
+          closable: event.options.closable ?? true,
+          ...event.options,
+        } as ToastState;
+        setToasts((prev) => {
+          const filtered = prev.filter((t) => t.id !== newToast.id);
+          return [...filtered, newToast];
+        });
+      } else if (event.type === "dismiss" && event.id) {
+        const id = event.id;
+        setToasts((prev) =>
+          prev.map((t) => (t.id === id ? { ...t, open: false } : t)),
+        );
+        setTimeout(() => {
+          setToasts((prev) => prev.filter((t) => t.id !== id));
+        }, 300);
+      } else if (event.type === "update" && event.id && event.options) {
+        setToasts((prev) =>
+          prev.map((t) => (t.id === event.id ? { ...t, ...event.options } : t)),
+        );
+      }
+    });
+    return unsubscribe;
+  });
+
+  const handleClose = (id: string) => {
+    setToasts((prev) =>
+      prev.map((t) => (t.id === id ? { ...t, open: false } : t)),
+    );
+    setTimeout(() => {
+      setToasts((prev) => prev.filter((t) => t.id !== id));
+    }, 300);
+  };
+
+  return (
+    <>
+      {toasts.map((toast) => (
+        <Snackbar
+          key={toast.id}
+          open={toast.open}
+          autoHideDuration={toast.duration}
+          onClose={() => toast.closable && handleClose(toast.id)}
+          anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        >
+          <Alert
+            severity={toast.type === "loading" ? "info" : toast.type || "info"}
+            onClose={toast.closable ? () => handleClose(toast.id) : undefined}
+            icon={
+              toast.type === "loading" ? (
+                <CircularProgress size={20} color="inherit" />
+              ) : undefined
+            }
+            sx={{ width: "100%", minWidth: 300 }}
+          >
+            <Stack spacing={0.5}>
+              {toast.title && (
+                <Typography variant="subtitle2" fontWeight="bold">
+                  {toast.title}
+                </Typography>
+              )}
+              {toast.description && (
+                <Typography variant="body2" component="div">
+                  {toast.description}
+                </Typography>
+              )}
+            </Stack>
+          </Alert>
+        </Snackbar>
+      ))}
+    </>
+  );
+}

package/recce-source/js/src/components/valuediff/ValueDiffDetailResultView.tsx

@@ -0,0 +1,217 @@
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+import { forwardRef, Ref, useMemo } from "react";
+
+import "../query/styles.css";
+import { ColumnRenderMode, isValueDiffDetailRun, Run } from "@/lib/api/types";
+import { ValueDiffDetailViewOptions } from "@/lib/api/valuediff";
+import { createDataGrid } from "@/lib/dataGrid/dataGridFactory";
+import {
+  type DataGridHandle,
+  EmptyRowsRenderer,
+  ScreenshotDataGrid,
+} from "../data-grid/ScreenshotDataGrid";
+import { ChangedOnlyCheckbox } from "../query/ChangedOnlyCheckbox";
+import { DiffDisplayModeSwitch } from "../query/ToggleSwitch";
+import { RunToolbar } from "../run/RunToolbar";
+import { RunResultViewProps } from "../run/types";
+
+export interface ValueDiffDetailResultViewProps
+  extends RunResultViewProps<ValueDiffDetailViewOptions> {
+  onAddToChecklist?: (run: Run) => void;
+}
+
+const PrivateValueDiffDetailResultView = (
+  {
+    run,
+    onAddToChecklist,
+    viewOptions,
+    onViewOptionsChanged,
+  }: ValueDiffDetailResultViewProps,
+
+  ref: Ref<DataGridHandle>,
+) => {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+
+  if (!isValueDiffDetailRun(run)) {
+    throw new Error("run type must be value_diff_detail");
+  }
+  const changedOnly = useMemo(
+    () => viewOptions?.changed_only ?? false,
+    [viewOptions],
+  );
+  const pinnedColumns = useMemo(
+    () => viewOptions?.pinned_columns ?? [],
+    [viewOptions],
+  );
+  const displayMode = useMemo(
+    () => viewOptions?.display_mode ?? "inline",
+    [viewOptions],
+  );
+  const columnsRenderMode = useMemo(
+    () => viewOptions?.columnsRenderMode ?? {},
+    [viewOptions],
+  );
+
+  const gridData = useMemo(() => {
+    const onColumnsRenderModeChanged = (
+      cols: Record<string, ColumnRenderMode>,
+    ) => {
+      const newRenderModes = {
+        ...(viewOptions?.columnsRenderMode ?? {}),
+        ...cols,
+      };
+      if (onViewOptionsChanged) {
+        onViewOptionsChanged({
+          ...viewOptions,
+          columnsRenderMode: newRenderModes,
+        });
+      }
+    };
+
+    const handlePinnedColumnsChanged = (pinnedColumns: string[]) => {
+      if (onViewOptionsChanged) {
+        onViewOptionsChanged({
+          ...viewOptions,
+          pinned_columns: pinnedColumns,
+        });
+      }
+    };
+
+    return (
+      createDataGrid(run, {
+        changedOnly,
+        pinnedColumns,
+        onPinnedColumnsChange: handlePinnedColumnsChanged,
+        columnsRenderMode,
+        onColumnsRenderModeChanged,
+        displayMode,
+      }) ?? { columns: [], rows: [] }
+    );
+  }, [
+    run,
+    viewOptions,
+    changedOnly,
+    pinnedColumns,
+    displayMode,
+    onViewOptionsChanged,
+    columnsRenderMode,
+  ]);
+
+  const limit = run.result?.limit ?? 0;
+  const warning =
+    limit > 0 && run.result?.more
+      ? `Warning: Displayed results are limited to ${limit.toLocaleString()} records. To ensure complete data retrieval, consider applying a LIMIT or WHERE clause to constrain the result set.`
+      : null;
+
+  const warnings: string[] = [];
+  if (warning) {
+    warnings.push(warning);
+  }
+
+  if (gridData.columns.length === 0) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100%",
+        }}
+      >
+        No data
+      </Box>
+    );
+  }
+
+  if (changedOnly && gridData.rows.length === 0) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          bgcolor: isDark ? "grey.900" : "grey.50",
+          height: "100%",
+        }}
+      >
+        <RunToolbar
+          run={run}
+          viewOptions={viewOptions}
+          onViewOptionsChanged={onViewOptionsChanged}
+          warnings={warnings}
+        />
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "100%",
+          }}
+        >
+          No change
+        </Box>
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        bgcolor: isDark ? "grey.900" : "grey.50",
+        height: "100%",
+      }}
+    >
+      <RunToolbar
+        run={run}
+        viewOptions={viewOptions}
+        onViewOptionsChanged={onViewOptionsChanged}
+        warnings={warnings}
+      >
+        <DiffDisplayModeSwitch
+          displayMode={displayMode}
+          onDisplayModeChanged={(displayMode) => {
+            if (onViewOptionsChanged) {
+              onViewOptionsChanged({
+                ...viewOptions,
+                display_mode: displayMode,
+              });
+            }
+          }}
+        />
+
+        <ChangedOnlyCheckbox
+          changedOnly={viewOptions?.changed_only}
+          onChange={() => {
+            const changedOnly = !viewOptions?.changed_only;
+            if (onViewOptionsChanged) {
+              onViewOptionsChanged({
+                ...viewOptions,
+                changed_only: changedOnly,
+              });
+            }
+          }}
+        />
+      </RunToolbar>
+      <ScreenshotDataGrid
+        ref={ref}
+        style={{ blockSize: "auto", maxHeight: "100%", overflow: "auto" }}
+        columns={gridData.columns}
+        rows={gridData.rows}
+        renderers={{
+          noRowsFallback: (
+            <EmptyRowsRenderer emptyMessage="No mismatched rows" />
+          ),
+        }}
+        defaultColumnOptions={{ resizable: true, maxWidth: 800, minWidth: 35 }}
+        className="rdg-light"
+      />
+    </Box>
+  );
+};
+
+export const ValueDiffDetailResultView = forwardRef(
+  PrivateValueDiffDetailResultView,
+);