@datarecce/ui 0.1.40 → 0.2.0

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

@@ -1,113 +0,0 @@
-/**
- * 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

@@ -1,288 +0,0 @@
-"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

@@ -1,216 +0,0 @@
-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 }}
-      />
-    </Box>
-  );
-};
-
-export const ValueDiffDetailResultView = forwardRef(
-  PrivateValueDiffDetailResultView,
-);