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

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 -------------------------------------------------------
@@ -80,6 +80,7 @@ export const columns: GridColDef<Row>[] = [
     field: 'Items',
     headerName: 'Item',
     flex: 1,
+    display: 'flex',
     ...createColumn('string'),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value}</TextCell>,
   },
@@ -88,6 +89,7 @@ export const columns: GridColDef<Row>[] = [
     field: 'Category',
     headerName: 'Category',
     width: 120,
+    display: 'flex',
     ...createColumn('singleSelect'),
     valueOptions: CATEGORY_OPTIONS,
     renderCell: ({ value }: GridRenderCellParams) => <Pill color={categoryColor(value)}>{value}</Pill>,
@@ -97,6 +99,7 @@ export const columns: GridColDef<Row>[] = [
     field: 'Paid',
     headerName: 'Price',
     width: 100,
+    display: 'flex',
     ...createColumn('number'),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{formatCurrency(value as number)}</TextCell>,
   },
@@ -105,8 +108,9 @@ export const columns: GridColDef<Row>[] = [
     field: 'Date',
     headerName: 'Date',
     width: 140,
+    display: 'flex',
     ...createColumn('date'),
-    valueGetter: (value: string) => parseDate(value),
+    valueGetter: (value: unknown) => parseDate(value),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value ? formatDate(value as Date) : '—'}</TextCell>,
   },
   // DateTime
@@ -114,8 +118,9 @@ export const columns: GridColDef<Row>[] = [
     field: 'DateTime',
     headerName: 'Date & Time',
     width: 180,
+    display: 'flex',
     ...createColumn('dateTime'),
-    valueGetter: (value: string) => parseDate(value),
+    valueGetter: (value: unknown) => parseDate(value),
     renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value ? formatDateTime(value as Date) : '—'}</TextCell>,
   },
   // Boolean — in stock
@@ -123,6 +128,7 @@ export const columns: GridColDef<Row>[] = [
     field: 'InStock',
     headerName: 'In Stock',
     width: 90,
+    display: 'flex',
     type: 'boolean',
     renderCell: ({ value }: GridRenderCellParams) =>
       value ? (
@@ -136,6 +142,7 @@ export const columns: GridColDef<Row>[] = [
     field: 'Allergens',
     headerName: 'Allergens',
     flex: 1,
+    display: 'flex',
     ...createColumn('multiSelect'),
     valueOptions: ALLERGEN_OPTIONS,
     sortable: false,
@@ -158,6 +165,7 @@ export const columns: GridColDef<Row>[] = [
     field: 'Tags',
     headerName: 'Tags',
     flex: 1,
+    display: 'flex',
     ...createColumn('tags'),
     valueOptions: TAG_OPTIONS,
     sortable: false,
@@ -180,6 +188,7 @@ export const columns: GridColDef<Row>[] = [
     field: 'actions',
     headerName: '',
     width: 56,
+    display: 'flex',
     hideable: false,
     sortable: false,
     filterable: false,

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';