@datarecce/ui 0.1.40 → 0.2.0

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

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

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

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

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

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

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