@redsift/ds-mcp-server 12.4.0 → 12.5.0-muiv6

package/data/demos/patterns/_shared/StateDebugPanel.tsx

@@ -0,0 +1,153 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import type { GridApiPro } from '@mui/x-data-grid-pro/models/gridApiPro';
+
+// localStorage key categories — must match @redsift/table internals
+const LS_CATEGORIES = [
+  'paginationModel',
+  'searchModel',
+  'sortModel',
+  'visibilityModel',
+  'pinnedColumns',
+  'dimension',
+  'densityModel',
+];
+
+interface StateDebugPanelProps {
+  apiRef: React.MutableRefObject<GridApiPro>;
+  useRouter: () => { pathname: string; search: string; historyReplace: (newSearch: string) => void };
+  localStorageVersion?: number;
+}
+
+const sectionStyle: React.CSSProperties = {
+  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+  fontSize: '11px',
+  lineHeight: '1.4',
+  padding: '8px 12px',
+  borderRadius: '4px',
+  overflow: 'auto',
+  maxHeight: '200px',
+  whiteSpace: 'pre-wrap',
+  wordBreak: 'break-all',
+};
+
+const labelStyle: React.CSSProperties = {
+  fontFamily: 'inherit',
+  fontSize: '11px',
+  fontWeight: 600,
+  cursor: 'pointer',
+  userSelect: 'none',
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+};
+
+/**
+ * Reads the real DataGrid state from apiRef, URL from useRouter, and localStorage keys.
+ * Renders three collapsible JSON panels for debugging.
+ */
+export const StateDebugPanel: React.FC<StateDebugPanelProps> = ({ apiRef, useRouter, localStorageVersion = 1 }) => {
+  const { pathname, search } = useRouter();
+  const [_tick, setTick] = useState(0);
+  const rerender = useCallback(() => setTick((t) => t + 1), []);
+
+  // Subscribe to grid events so we re-read state after every change
+  useEffect(() => {
+    const api = apiRef.current;
+    if (!api?.subscribeEvent) return;
+
+    const unsubs = [
+      api.subscribeEvent('filterModelChange', rerender),
+      api.subscribeEvent('sortModelChange', rerender),
+      api.subscribeEvent('paginationModelChange', rerender),
+      api.subscribeEvent('columnVisibilityModelChange', rerender),
+      api.subscribeEvent('pinnedColumnsChange', rerender),
+      api.subscribeEvent('stateChange', rerender),
+    ];
+
+    return () => unsubs.forEach((u) => u());
+  }, [apiRef, rerender]);
+
+  // Also update after URL changes (historyReplace doesn't trigger re-render)
+  useEffect(() => {
+    rerender();
+  }, [search, rerender]);
+
+  // -- Read grid state from apiRef --
+  let gridState: Record<string, unknown> = {};
+  try {
+    const api = apiRef.current;
+    if (api?.state) {
+      gridState = {
+        filterModel: api.state.filter?.filterModel ?? null,
+        sortModel: api.state.sorting?.sortModel ?? null,
+        paginationModel: api.state.pagination?.paginationModel ?? null,
+        columnVisibilityModel: api.state.columns?.columnVisibilityModel ?? null,
+        pinnedColumns: api.state.pinnedColumns ?? null,
+        density: api.state.density ?? null,
+      };
+    }
+  } catch {
+    gridState = { error: 'Grid not yet initialized' };
+  }
+
+  // -- Read URL query params --
+  const urlParams: Record<string, string> = {};
+  const sp = new URLSearchParams(search);
+  sp.forEach((v, k) => {
+    urlParams[k] = v;
+  });
+
+  // -- Read localStorage --
+  const lsState: Record<string, string | null> = {};
+  for (const cat of LS_CATEGORIES) {
+    const key = `${pathname}:${localStorageVersion}:${cat}`;
+    try {
+      const raw = localStorage.getItem(key);
+      lsState[cat] = raw;
+    } catch {
+      lsState[cat] = null;
+    }
+  }
+
+  return (
+    <div
+      data-testid="state-debug-panel"
+      style={{
+        border: '1px solid #e0e0e0',
+        borderRadius: '6px',
+        padding: '8px 12px',
+        marginBottom: '8px',
+        background: '#fafafa',
+        fontSize: '11px',
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+      }}
+    >
+      <div style={{ fontWeight: 700, marginBottom: '6px', fontSize: '12px' }}>State Inspector</div>
+      <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+        <Section title="DataGrid State" data={gridState} bg="#f0f4ff" />
+        <Section
+          title="URL Query Params"
+          data={Object.keys(urlParams).length > 0 ? urlParams : '(empty)'}
+          bg="#f0fff4"
+        />
+        <Section title="localStorage" data={lsState} bg="#fff8f0" />
+      </div>
+    </div>
+  );
+};
+
+const Section: React.FC<{ title: string; data: unknown; bg: string }> = ({ title, data, bg }) => {
+  const [open, setOpen] = useState(true);
+  return (
+    <div style={{ flex: '1 1 280px', minWidth: '280px' }}>
+      <div style={labelStyle} onClick={() => setOpen((o) => !o)}>
+        <span>{open ? '▾' : '▸'}</span> {title}
+      </div>
+      {open && (
+        <pre style={{ ...sectionStyle, background: bg, margin: '4px 0 0' }}>
+          {typeof data === 'string' ? data : JSON.stringify(data, null, 2)}
+        </pre>
+      )}
+    </div>
+  );
+};

package/data/demos/patterns/_shared/columns.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { createColumn, TextCell } from '@redsift/table';
 import { Flexbox, Icon, IconButtonLink, Pill } from '@redsift/design-system';
 import { mdiArrowRight, mdiCheck, mdiClose } from '@redsift/icons';
-import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid-premium';
+import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid-pro';
 import { Row } from './data';
 
 // -- Option constants -------------------------------------------------------
@@ -106,7 +106,7 @@ export const columns: GridColDef<Row>[] = [
     headerName: 'Date',
     width: 140,
     ...createColumn('date'),
-    valueGetter: (value: string) => parseDate(value),
+    valueGetter: (params: any) => parseDate(params.value),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value ? formatDate(value as Date) : '—'}</TextCell>,
   },
   // DateTime
@@ -115,7 +115,7 @@ export const columns: GridColDef<Row>[] = [
     headerName: 'Date & Time',
     width: 180,
     ...createColumn('dateTime'),
-    valueGetter: (value: string) => parseDate(value),
+    valueGetter: (params: any) => parseDate(params.value),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value ? formatDateTime(value as Date) : '—'}</TextCell>,
   },
   // Boolean — in stock

package/data/demos/patterns/_shared/defaults.ts

@@ -1,4 +1,4 @@
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
 
 /**
  * Default filter model applied to all pattern examples.

package/data/demos/patterns/_shared/filter-helpers.ts

@@ -1,4 +1,4 @@
-import { GridFilterModel } from '@mui/x-data-grid-premium';
+import { GridFilterModel } from '@mui/x-data-grid-pro';
 import { Row } from './data';
 
 // -- Types ------------------------------------------------------------------

package/data/demos/patterns/_shared/helpers.tsx

@@ -8,7 +8,7 @@ import {
   GridToolbarExport,
   GridToolbarFilterButton,
   GridToolbarQuickFilter,
-} from '@mui/x-data-grid-premium';
+} from '@mui/x-data-grid-pro';
 
 // -- Toolbar ----------------------------------------------------------------
 

package/data/demos/patterns/_shared/server-logic.ts

@@ -1,4 +1,4 @@
-import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-premium';
+import { GridFilterModel, GridSortModel } from '@mui/x-data-grid-pro';
 import { Row, allRows } from './data';
 import { Aggregates, computeAggregates, applyFilters } from './filter-helpers';