@datarecce/ui 0.1.30 → 0.1.32

package/recce-source/js/src/components/data-grid/ScreenshotDataGrid.tsx

@@ -0,0 +1,333 @@
+/**
+ * @file ScreenshotDataGrid.tsx
+ * @description AG Grid wrapper component for Recce data grids
+ *
+ * This component wraps the AG Grid and provides a consistent interface
+ * for all data grid views in the application. It handles:
+ * - Theme switching (light/dark)
+ * - PII tracking safety classes
+ * - Default grid configurations
+ * - Backward compatibility with existing column/row data formats
+ */
+
+"use client";
+
+import Box from "@mui/material/Box";
+import { useTheme } from "@mui/material/styles";
+import Typography from "@mui/material/Typography";
+import type {
+  ColDef,
+  ColGroupDef,
+  GetRowIdParams,
+  GridReadyEvent,
+} from "ag-grid-community";
+import { AllCommunityModule, ModuleRegistry } from "ag-grid-community";
+import { AgGridReact, type AgGridReactProps } from "ag-grid-react";
+import "./agGridStyles.css";
+import React, {
+  type CSSProperties,
+  forwardRef,
+  type Ref,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+import { RowObjectType } from "@/lib/api/types";
+import { recceGridThemeDark, recceGridThemeLight } from "./agGridTheme";
+
+// Register AG Grid modules once
+ModuleRegistry.registerModules([AllCommunityModule]);
+
+/**
+ * Handle type for accessing AG Grid API and DOM element (for screenshots)
+ */
+export interface DataGridHandle {
+  api: GridReadyEvent["api"] | null;
+  /** DOM element for screenshot functionality */
+  element: HTMLElement | null;
+}
+
+/**
+ * Props for ScreenshotDataGrid component
+ *
+ * Supports both new AG Grid style props (columnDefs/rowData) and
+ * legacy react-data-grid style props (columns/rows) for backward compatibility
+ */
+export interface ScreenshotDataGridProps<TData = RowObjectType>
+  extends Omit<AgGridReactProps<TData>, "theme" | "rowClass"> {
+  /** Container style */
+  style?: CSSProperties;
+  /** Additional CSS class for container */
+  className?: string;
+  /** Empty state renderer (legacy) */
+  renderers?: {
+    noRowsFallback?: React.ReactNode;
+  };
+  /** Legacy: Column definitions (maps to columnDefs) */
+  columns?: (ColDef<TData> | ColGroupDef<TData>)[];
+  /** Legacy: Row data (maps to rowData) */
+  rows?: TData[];
+  /** Legacy: Default column options (maps to defaultColDef) */
+  defaultColumnOptions?: ColDef<TData>;
+}
+
+/**
+ * Empty rows renderer component
+ */
+interface EmptyRowsRendererProps {
+  emptyMessage?: string;
+}
+
+export function EmptyRowsRenderer({ emptyMessage }: EmptyRowsRendererProps) {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        height: "35px",
+        alignItems: "center",
+        justifyContent: "center",
+        bgcolor: "grey.100",
+        textAlign: "center",
+        gridColumn: "1/-1",
+      }}
+    >
+      <Typography sx={{ fontWeight: 600 }}>
+        {emptyMessage ?? "No rows"}
+      </Typography>
+    </Box>
+  );
+}
+
+/**
+ * AG Grid wrapper component for Recce (Screenshot-capable)
+ *
+ * @description Provides a themed AG Grid with default configurations:
+ * - Automatic light/dark theme switching
+ * - Row hover highlighting disabled by default
+ * - Cell focus suppressed for cleaner UX
+ * - PII-safe tracking class applied to all rows
+ *
+ * Backward compatible with react-data-grid API:
+ * - `columns` prop maps to `columnDefs`
+ * - `rows` prop maps to `rowData`
+ * - `defaultColumnOptions` maps to `defaultColDef`
+ * - `renderers.noRowsFallback` maps to `noRowsOverlayComponent`
+ *
+ * @example
+ * ```tsx
+ * // New AG Grid style
+ * <ScreenshotDataGrid
+ *   columnDefs={columns}
+ *   rowData={rows}
+ *   style={{ height: '400px' }}
+ * />
+ *
+ * // Legacy react-data-grid style
+ * <ScreenshotDataGrid
+ *   columns={columns}
+ *   rows={rows}
+ *   renderers={{ noRowsFallback: <EmptyRowsRenderer /> }}
+ * />
+ * ```
+ */
+function _ScreenshotDataGrid<TData = RowObjectType>(
+  {
+    style,
+    className,
+    columnDefs,
+    rowData,
+    columns,
+    rows,
+    getRowId,
+    rowHeight = 32,
+    headerHeight = 36,
+    defaultColDef,
+    defaultColumnOptions,
+    renderers,
+    ...props
+  }: ScreenshotDataGridProps<TData>,
+  ref: Ref<DataGridHandle>,
+) {
+  // Container ref for screenshot functionality
+  const containerRef = useRef<HTMLDivElement>(null);
+  // AG Grid API ref
+  const gridApiRef = useRef<GridReadyEvent["api"] | null>(null);
+
+  // Expose both API and DOM element through ref
+  useImperativeHandle(
+    ref,
+    () => ({
+      api: gridApiRef.current,
+      element: containerRef.current,
+    }),
+    [],
+  );
+
+  // Get MUI theme to determine dark/light mode
+  const muiTheme = useTheme();
+
+  // Select AG Grid theme based on MUI theme mode
+  const gridTheme = useMemo(
+    () =>
+      muiTheme.palette.mode === "dark"
+        ? recceGridThemeDark
+        : recceGridThemeLight,
+    [muiTheme.palette.mode],
+  );
+
+  // Support both new and legacy props
+  const resolvedColumnDefs = columnDefs ?? columns;
+  const resolvedRowData = rowData ?? rows;
+  const resolvedDefaultColDef = defaultColDef ?? defaultColumnOptions;
+
+  // Merge default column options
+  const mergedDefaultColDef = useMemo<ColDef<TData>>(
+    () => ({
+      resizable: true,
+      suppressMovable: true,
+      ...resolvedDefaultColDef,
+    }),
+    [resolvedDefaultColDef],
+  );
+
+  // Custom overlay component when no rows
+  const noRowsOverlayComponent = useMemo(() => {
+    if (!renderers?.noRowsFallback) return undefined;
+    return () => renderers.noRowsFallback;
+  }, [renderers?.noRowsFallback]);
+
+  // Generate row ID from __rowKey if available
+  const resolvedGetRowId = useMemo(() => {
+    if (getRowId) return getRowId;
+    return (params: GetRowIdParams<TData>) => {
+      const data = params.data as RowObjectType;
+      if (data?.__rowKey !== undefined) {
+        return String(data.__rowKey);
+      }
+      // Use rowIndex from the data or generate a random ID
+      const index = (params.data as unknown as { rowIndex?: number })?.rowIndex;
+      return String(index ?? Math.random());
+    };
+  }, [getRowId]);
+
+  // Generate a key based on pinned columns to force AG Grid to remount when pinned columns change
+  // This is necessary because AG Grid maintains internal column state that may not update
+  // when columnDefs change
+  const gridKey = useMemo(() => {
+    if (!resolvedColumnDefs) return "grid";
+    const pinnedFields = resolvedColumnDefs
+      .filter(
+        (col): col is ColDef<TData> => "field" in col && col.pinned === "left",
+      )
+      .map((col) => col.field)
+      .sort()
+      .join(",");
+    return `grid-${pinnedFields}`;
+  }, [resolvedColumnDefs]);
+
+  return (
+    <Box
+      ref={containerRef}
+      className={
+        className ? `${className} no-track-pii-safe` : "no-track-pii-safe"
+      }
+      sx={{
+        // Use flex: 1 and minHeight: 0 for proper sizing in flex containers
+        // This allows AG Grid to fill available space and scroll internally
+        flex: 1,
+        minHeight: 0,
+        width: "100%",
+        overflow: "hidden",
+        "& .ag-root-wrapper": {
+          border: "none",
+          height: "100%",
+        },
+        "& .ag-header": {
+          borderBottom: "1px solid var(--ag-border-color)",
+        },
+        "& .ag-row": {
+          borderBottom: "1px solid var(--ag-border-color)",
+        },
+        "& .ag-cell": {
+          borderRight: "1px solid var(--ag-border-color)",
+        },
+        "& .ag-header-cell": {
+          borderRight: "1px solid var(--ag-border-color)",
+        },
+        // Diff cell styling - theme-aware colors
+        "& .diff-cell-added": {
+          backgroundColor:
+            muiTheme.palette.mode === "dark"
+              ? "#1a4d1a !important"
+              : "#cefece !important",
+          color: muiTheme.palette.text.primary,
+        },
+        "& .diff-cell-removed": {
+          backgroundColor:
+            muiTheme.palette.mode === "dark"
+              ? "#5c1f1f !important"
+              : "#ffc5c5 !important",
+          color: muiTheme.palette.text.primary,
+        },
+        "& .diff-cell-modified": {
+          backgroundColor:
+            muiTheme.palette.mode === "dark"
+              ? "#5c1f1f !important"
+              : "#ffc5c5 !important",
+          color: muiTheme.palette.text.primary,
+        },
+        // Diff header styling
+        "& .diff-header-added": {
+          backgroundColor: "#15803d !important",
+          color: "white",
+        },
+        "& .diff-header-removed": {
+          backgroundColor: "#f43f5e !important",
+          color: "white",
+        },
+        // Index column styling
+        "& .index-column": {
+          color: muiTheme.palette.text.secondary,
+          textAlign: "right",
+        },
+        // Frozen/pinned column styling
+        "& .ag-pinned-left-cols-container .ag-cell": {
+          backgroundColor:
+            muiTheme.palette.mode === "dark" ? "#2d2d2d" : "#f5f5f5",
+        },
+      }}
+    >
+      <AgGridReact<TData>
+        key={gridKey}
+        theme={gridTheme}
+        columnDefs={resolvedColumnDefs}
+        rowData={resolvedRowData}
+        getRowId={resolvedGetRowId}
+        rowHeight={rowHeight}
+        headerHeight={headerHeight}
+        defaultColDef={mergedDefaultColDef}
+        suppressCellFocus={true}
+        suppressRowHoverHighlight={false}
+        animateRows={false}
+        rowClass="no-track-pii-safe"
+        noRowsOverlayComponent={noRowsOverlayComponent}
+        onGridReady={(event) => {
+          gridApiRef.current = event.api;
+        }}
+        {...props}
+      />
+    </Box>
+  );
+}
+
+export const ScreenshotDataGrid = forwardRef(_ScreenshotDataGrid) as <
+  TData = RowObjectType,
+>(
+  props: ScreenshotDataGridProps<TData> & { ref?: Ref<DataGridHandle> },
+) => React.ReactNode;
+
+// Re-export AG Grid types for convenience
+export type { ColDef, ColGroupDef, GetRowIdParams, GridReadyEvent };
+
+// For backward compatibility, also export as DataGridHandle
+export type { DataGridHandle as RecceDataGridHandle };

package/recce-source/js/src/components/data-grid/agGridStyles.css

@@ -0,0 +1,55 @@
+/**
+ * @file agGridStyles.css
+ * @description Custom AG Grid styles for Recce data grids
+ *
+ * Provides header layout customization to ensure proper flex alignment:
+ * - Header cells use flex layout with items centered vertically
+ * - Labels aligned to the left
+ * - Actions (menu, sort icons) aligned to the right
+ * - Sticky headers when scrolling vertically
+ *
+ * Uses CSS custom properties from global.css for theme-aware colors.
+ */
+
+/* AG Grid Viewport - uses theme-aware background */
+.ag-body-viewport,
+.ag-center-cols-viewport {
+  background-color: var(--recce-bg-muted);
+}
+
+/* Sticky header - stays visible when scrolling vertically */
+.ag-header {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+/* Header cell flex layout */
+.ag-header-cell-comp-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+
+/* Header label takes available space and aligns left */
+.ag-header-cell-label {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+}
+
+/* Sort icons stay with the label */
+.ag-header-cell-label .ag-sort-indicator-container {
+  margin-left: 4px;
+}
+
+/* Actions container (menu button, etc.) aligned right */
+.ag-header-cell-menu-button {
+  margin-left: auto;
+}
+
+/* Ensure header icons don't shrink */
+.ag-header-icon {
+  flex-shrink: 0;
+}

package/recce-source/js/src/components/data-grid/agGridTheme.ts

@@ -0,0 +1,43 @@
+/**
+ * @file agGridTheme.ts
+ * @description AG Grid theme configuration for Recce data grids
+ *
+ * Provides light and dark themes that match the existing react-data-grid styling
+ * using AG Grid's themeQuartz as a base.
+ */
+
+import { themeQuartz } from "ag-grid-community";
+
+// System font stack for headers
+const systemFontStack =
+  'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
+
+// Light theme matching current rdg-light styling
+export const recceGridThemeLight = themeQuartz.withParams({
+  backgroundColor: "#ffffff",
+  headerBackgroundColor: "#f5f5f5",
+  rowHoverColor: "#ffffff",
+  borderColor: "#e0e0e0",
+  foregroundColor: "#1e1e1e",
+  fontFamily: "monospace",
+  fontSize: 13,
+  headerFontFamily: systemFontStack,
+  headerFontSize: 13,
+  headerFontWeight: 700,
+  cellHorizontalPadding: 8,
+});
+
+// Dark theme matching current rdg-dark styling
+export const recceGridThemeDark = themeQuartz.withParams({
+  backgroundColor: "#1e1e1e",
+  headerBackgroundColor: "#252526",
+  rowHoverColor: "#1e1e1e",
+  borderColor: "#3c3c3c",
+  foregroundColor: "#e0e0e0",
+  fontFamily: "monospace",
+  fontSize: 13,
+  headerFontFamily: systemFontStack,
+  headerFontSize: 13,
+  headerFontWeight: 700,
+  cellHorizontalPadding: 8,
+});

package/recce-source/js/src/components/editor/CodeEditor.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { PostgreSQL, sql } from "@codemirror/lang-sql";
+import { yaml } from "@codemirror/lang-yaml";
+import { Prec } from "@codemirror/state";
+import { EditorView, keymap } from "@codemirror/view";
+import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
+import CodeMirror from "@uiw/react-codemirror";
+import { useMemo } from "react";
+
+export type CodeEditorLanguage = "sql" | "yaml";
+export type CodeEditorTheme = "light" | "dark";
+
+export interface CodeEditorProps {
+  value: string;
+  onChange?: (value: string) => void;
+  language?: CodeEditorLanguage;
+  readOnly?: boolean;
+  lineNumbers?: boolean;
+  wordWrap?: boolean;
+  fontSize?: number;
+  height?: string;
+  className?: string;
+  /** Theme: "light" for githubLight, "dark" for githubDark */
+  theme?: CodeEditorTheme;
+  /** Custom keyboard shortcuts: { key: handler } */
+  keyBindings?: Array<{ key: string; run: () => boolean }>;
+}
+
+const getLanguageExtension = (language: CodeEditorLanguage) => {
+  switch (language) {
+    case "sql":
+      return sql({ dialect: PostgreSQL });
+    case "yaml":
+      return yaml();
+    default:
+      return sql({ dialect: PostgreSQL });
+  }
+};
+
+export function CodeEditor({
+  value,
+  onChange,
+  language = "sql",
+  readOnly = false,
+  lineNumbers = true,
+  wordWrap = true,
+  fontSize = 14,
+  height = "100%",
+  className = "",
+  theme = "light",
+  keyBindings = [],
+}: CodeEditorProps) {
+  const extensions = useMemo(() => {
+    const exts = [
+      getLanguageExtension(language),
+      EditorView.theme({
+        "&": { fontSize: `${fontSize}px` },
+        ".cm-content": { fontFamily: "monospace" },
+        ".cm-gutters": { fontFamily: "monospace" },
+      }),
+    ];
+
+    if (wordWrap) {
+      exts.push(EditorView.lineWrapping);
+    }
+
+    // Use Prec.highest to ensure custom keybindings take precedence
+    // over defaultKeymap bindings (e.g., Mod-Enter -> insertBlankLine)
+    if (keyBindings.length > 0) {
+      exts.push(Prec.highest(keymap.of(keyBindings)));
+    }
+
+    return exts;
+  }, [language, fontSize, wordWrap, keyBindings]);
+
+  const themeExtension = useMemo(() => {
+    return theme === "dark" ? githubDark : githubLight;
+  }, [theme]);
+
+  const handleChange = (val: string) => {
+    if (onChange) {
+      onChange(val);
+    }
+  };
+
+  return (
+    <CodeMirror
+      value={value}
+      onChange={handleChange}
+      extensions={extensions}
+      readOnly={readOnly}
+      basicSetup={{
+        lineNumbers,
+        foldGutter: true,
+        highlightActiveLineGutter: !readOnly,
+        highlightActiveLine: !readOnly,
+        tabSize: 2,
+      }}
+      height={height}
+      className={`${className} no-track-pii-safe`}
+      theme={themeExtension}
+    />
+  );
+}
+
+export default CodeEditor;

package/recce-source/js/src/components/editor/DiffEditor.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { PostgreSQL, sql } from "@codemirror/lang-sql";
+import { yaml } from "@codemirror/lang-yaml";
+import { MergeView, unifiedMergeView } from "@codemirror/merge";
+import { EditorState, Extension, Text } from "@codemirror/state";
+import {
+  EditorView,
+  lineNumbers as lineNumbersExtension,
+} from "@codemirror/view";
+import { githubDark, githubLight } from "@uiw/codemirror-theme-github";
+import { useEffect, useMemo, useRef } from "react";
+
+export type DiffEditorLanguage = "sql" | "yaml";
+export type DiffEditorTheme = "light" | "dark";
+
+export interface DiffEditorProps {
+  original: string;
+  modified: string;
+  language?: DiffEditorLanguage;
+  readOnly?: boolean;
+  lineNumbers?: boolean;
+  sideBySide?: boolean;
+  height?: string;
+  className?: string;
+  /** Theme: "light" for githubLight, "dark" for githubDark */
+  theme?: DiffEditorTheme;
+  /** Called when modified content changes (only if not readOnly) */
+  onModifiedChange?: (value: string) => void;
+}
+
+const getLanguageExtension = (language: DiffEditorLanguage) => {
+  switch (language) {
+    case "sql":
+      return sql({ dialect: PostgreSQL });
+    case "yaml":
+      return yaml();
+    default:
+      return sql({ dialect: PostgreSQL });
+  }
+};
+
+const getThemeExtension = (theme: DiffEditorTheme): Extension => {
+  return theme === "dark" ? githubDark : githubLight;
+};
+
+export function DiffEditor({
+  original,
+  modified,
+  language = "sql",
+  readOnly = true,
+  lineNumbers = true,
+  sideBySide = true,
+  height = "100%",
+  className = "",
+  theme = "light",
+  onModifiedChange,
+}: DiffEditorProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const viewRef = useRef<MergeView | EditorView | null>(null);
+
+  const extensions = useMemo(() => {
+    const exts = [getLanguageExtension(language), getThemeExtension(theme)];
+
+    if (lineNumbers) {
+      exts.push(lineNumbersExtension());
+    }
+
+    return exts;
+  }, [language, theme, lineNumbers]);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    // Clean up previous instance
+    if (viewRef.current) {
+      viewRef.current.destroy();
+    }
+
+    if (sideBySide) {
+      // Side-by-side mode using MergeView
+      const mergeView = new MergeView({
+        a: {
+          doc: original,
+          extensions: [
+            ...extensions,
+            EditorView.editable.of(false),
+            EditorState.readOnly.of(true),
+          ],
+        },
+        b: {
+          doc: modified,
+          extensions: [
+            ...extensions,
+            EditorView.editable.of(!readOnly),
+            EditorState.readOnly.of(readOnly),
+            EditorView.updateListener.of((update) => {
+              if (update.docChanged && onModifiedChange) {
+                onModifiedChange(update.state.doc.toString());
+              }
+            }),
+          ],
+        },
+        parent: containerRef.current,
+        revertControls: !readOnly ? "a-to-b" : undefined,
+        highlightChanges: true,
+        gutter: lineNumbers,
+      });
+
+      viewRef.current = mergeView;
+    } else {
+      // Unified/inline mode using unifiedMergeView
+      const editorView = new EditorView({
+        doc: modified,
+        extensions: [
+          ...extensions,
+          unifiedMergeView({
+            original: Text.of(original.split("\n")),
+            allowInlineDiffs: true,
+            highlightChanges: true,
+            gutter: lineNumbers,
+            mergeControls: false,
+          }),
+          EditorView.editable.of(!readOnly),
+          EditorState.readOnly.of(readOnly),
+          EditorView.updateListener.of((update) => {
+            if (update.docChanged && onModifiedChange) {
+              onModifiedChange(update.state.doc.toString());
+            }
+          }),
+        ],
+        parent: containerRef.current,
+      });
+
+      viewRef.current = editorView;
+    }
+
+    return () => {
+      if (viewRef.current) {
+        viewRef.current.destroy();
+      }
+    };
+  }, [
+    original,
+    modified,
+    extensions,
+    readOnly,
+    lineNumbers,
+    sideBySide,
+    onModifiedChange,
+  ]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={`${className} no-track-pii-safe`}
+      style={{ height, overflow: "auto" }}
+    />
+  );
+}
+
+export default DiffEditor;

package/recce-source/js/src/components/editor/index.ts

@@ -0,0 +1,12 @@
+export {
+  CodeEditor,
+  type CodeEditorLanguage,
+  type CodeEditorProps,
+  type CodeEditorTheme,
+} from "./CodeEditor";
+export {
+  DiffEditor,
+  type DiffEditorLanguage,
+  type DiffEditorProps,
+  type DiffEditorTheme,
+} from "./DiffEditor";