@redsift/ds-mcp-server 12.3.1-muiv6-alpha.2

package/data/demos/patterns/drilldown-datagrid-page/with-empty-state.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { DataGrid, TextCell } from '@redsift/table';
+import { Flexbox, Text, Icon } from '@redsift/design-system';
+import { DataCard, DrilldownItem } from '@redsift/dashboard';
+import { mdiCheckCircleOutline, mdiMagnify, mdiShapeOutline, mdiToggleSwitch } from '@redsift/icons';
+import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid-pro';
+import {
+  GridToolbarContainer,
+  GridToolbarColumnsButton,
+  GridToolbarDensitySelector,
+  GridToolbarFilterButton,
+  GridToolbarExport,
+  GridToolbarQuickFilter,
+} from '@mui/x-data-grid-pro';
+
+const CustomToolbar = () => (
+  <GridToolbarContainer>
+    <Flexbox gap="0">
+      <GridToolbarFilterButton />
+      <GridToolbarColumnsButton />
+      <GridToolbarDensitySelector />
+      <GridToolbarExport />
+      <Flexbox marginLeft="8px">
+        <GridToolbarQuickFilter />
+      </Flexbox>
+    </Flexbox>
+  </GridToolbarContainer>
+);
+
+const columns: GridColDef[] = [
+  { field: 'id', headerName: 'ID', width: 100, type: 'rsString' as string },
+  {
+    field: 'label',
+    headerName: 'Label',
+    flex: 2,
+    type: 'rsString' as string,
+    renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value}</TextCell>,
+  },
+  { field: 'status', headerName: 'Status', flex: 1, type: 'rsSingleSelect' as string },
+  { field: 'score', headerName: 'Score', width: 80, type: 'rsNumber' as string },
+  { field: 'expiry', headerName: 'Expiry', width: 180, type: 'date' },
+];
+
+const CustomNoRowsOverlay = () => (
+  <Flexbox
+    flexDirection="column"
+    alignItems="center"
+    justifyContent="center"
+    gap="12px"
+    style={{ height: '100%', padding: '48px 0' }}
+  >
+    <Icon icon={mdiMagnify} size="large" color="grey" />
+    <Text variant="body" color="grey">
+      No results match your filters
+    </Text>
+    <Text variant="caption" color="grey">
+      Try adjusting your filters or clear them to see all records.
+    </Text>
+  </Flexbox>
+);
+
+// -- Empty state: DataCards show zeros, DataGrid shows custom overlay --------
+
+export default () => (
+  <div style={{ width: '100%' }}>
+    <Flexbox flexDirection="column" gap="16px">
+      {/* DataCards with zero counts */}
+      <Flexbox gap="12px" flexWrap="wrap">
+        <DataCard color="info" isLoading={false}>
+          <DataCard.Header icon={mdiCheckCircleOutline} title="Status" />
+          <DataCard.Body>
+            <DrilldownItem value={0} legend="Active" size="medium" />
+            <DrilldownItem value={0} legend="Warning" size="medium" />
+            <DrilldownItem value={0} legend="Critical" size="medium" />
+            <DrilldownItem value={0} legend="Expired" size="medium" />
+            <DrilldownItem value={0} legend="Revoked" size="medium" />
+          </DataCard.Body>
+        </DataCard>
+
+        <DataCard color="warning" isLoading={false}>
+          <DataCard.Header icon={mdiShapeOutline} title="Category" />
+          <DataCard.Body>
+            <DrilldownItem value={0} legend="Primary" size="medium" />
+            <DrilldownItem value={0} legend="Secondary" size="medium" />
+            <DrilldownItem value={0} legend="Tertiary" size="medium" />
+          </DataCard.Body>
+        </DataCard>
+
+        <DataCard color="success" isLoading={false}>
+          <DataCard.Header icon={mdiToggleSwitch} title="Active" />
+          <DataCard.Body>
+            <DrilldownItem value={0} legend="Active" size="medium" />
+            <DrilldownItem value={0} legend="Inactive" size="medium" />
+          </DataCard.Body>
+        </DataCard>
+      </Flexbox>
+
+      {/* DataGrid with empty state */}
+      <DataGrid
+        autoHeight
+        pagination
+        paginationModel={{ page: 0, pageSize: 10 }}
+        pageSizeOptions={[10, 25, 50]}
+        rows={[]}
+        columns={columns}
+        slots={{
+          toolbar: CustomToolbar,
+          noRowsOverlay: CustomNoRowsOverlay,
+        }}
+      />
+    </Flexbox>
+  </div>
+);

package/data/demos/patterns/drilldown-datagrid-page/with-error.tsx

@@ -0,0 +1,125 @@
+import React, { useCallback, useState } from 'react';
+import { DataGrid, TextCell } from '@redsift/table';
+import { Button, Flexbox, Text, Icon } from '@redsift/design-system';
+import { DataCard, DrilldownItem } from '@redsift/dashboard';
+import { mdiAlertCircle, mdiCheckCircleOutline, mdiRefresh, mdiShapeOutline, mdiToggleSwitch } from '@redsift/icons';
+import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid-pro';
+import {
+  GridToolbarContainer,
+  GridToolbarColumnsButton,
+  GridToolbarDensitySelector,
+  GridToolbarFilterButton,
+  GridToolbarExport,
+  GridToolbarQuickFilter,
+} from '@mui/x-data-grid-pro';
+
+const CustomToolbar = () => (
+  <GridToolbarContainer>
+    <Flexbox gap="0">
+      <GridToolbarFilterButton />
+      <GridToolbarColumnsButton />
+      <GridToolbarDensitySelector />
+      <GridToolbarExport />
+      <Flexbox marginLeft="8px">
+        <GridToolbarQuickFilter />
+      </Flexbox>
+    </Flexbox>
+  </GridToolbarContainer>
+);
+
+const columns: GridColDef[] = [
+  { field: 'id', headerName: 'ID', width: 100, type: 'rsString' as string },
+  {
+    field: 'label',
+    headerName: 'Label',
+    flex: 2,
+    type: 'rsString' as string,
+    renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value}</TextCell>,
+  },
+  { field: 'status', headerName: 'Status', flex: 1, type: 'rsSingleSelect' as string },
+  { field: 'score', headerName: 'Score', width: 80, type: 'rsNumber' as string },
+  { field: 'expiry', headerName: 'Expiry', width: 180, type: 'date' },
+];
+
+// -- Error state: error banner above DataCards and DataGrid -----------------
+
+export default () => {
+  const [hasError, setHasError] = useState(true);
+
+  const handleRetry = useCallback(() => {
+    setHasError(false);
+    setTimeout(() => setHasError(true), 1500);
+  }, []);
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Flexbox flexDirection="column" gap="16px">
+        {/* Error banner */}
+        {hasError && (
+          <Flexbox
+            gap="12px"
+            alignItems="center"
+            style={{
+              padding: '12px 16px',
+              backgroundColor: 'var(--redsift-color-red-l3)',
+              borderRadius: '4px',
+            }}
+            role="alert"
+            aria-live="polite"
+          >
+            <Icon icon={mdiAlertCircle} color="error" size="small" />
+            <Text variant="caption" style={{ flex: 1 }}>
+              Failed to load data. Please check your connection and try again.
+            </Text>
+            <Button variant="secondary" onClick={handleRetry}>
+              <Flexbox gap="4px" alignItems="center">
+                <Icon icon={mdiRefresh} size="small" />
+                Retry
+              </Flexbox>
+            </Button>
+          </Flexbox>
+        )}
+
+        {/* DataCards in error/loading state */}
+        <Flexbox gap="12px" flexWrap="wrap">
+          <DataCard color="info" isLoading={hasError}>
+            <DataCard.Header icon={mdiCheckCircleOutline} title="Status" />
+            <DataCard.Body>
+              <DrilldownItem value={0} legend="Active" size="medium" />
+              <DrilldownItem value={0} legend="Warning" size="medium" />
+              <DrilldownItem value={0} legend="Critical" size="medium" />
+            </DataCard.Body>
+          </DataCard>
+
+          <DataCard color="warning" isLoading={hasError}>
+            <DataCard.Header icon={mdiShapeOutline} title="Category" />
+            <DataCard.Body>
+              <DrilldownItem value={0} legend="Primary" size="medium" />
+              <DrilldownItem value={0} legend="Secondary" size="medium" />
+            </DataCard.Body>
+          </DataCard>
+
+          <DataCard color="success" isLoading={hasError}>
+            <DataCard.Header icon={mdiToggleSwitch} title="Active" />
+            <DataCard.Body>
+              <DrilldownItem value={0} legend="Active" size="medium" />
+              <DrilldownItem value={0} legend="Inactive" size="medium" />
+            </DataCard.Body>
+          </DataCard>
+        </Flexbox>
+
+        {/* DataGrid in error state */}
+        <DataGrid
+          autoHeight
+          loading={!hasError}
+          pagination
+          paginationModel={{ page: 0, pageSize: 10 }}
+          pageSizeOptions={[10, 25, 50]}
+          rows={[]}
+          columns={columns}
+          slots={{ toolbar: CustomToolbar }}
+        />
+      </Flexbox>
+    </div>
+  );
+};

package/data/demos/patterns/drilldown-datagrid-page/with-loading.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { DataGrid, TextCell } from '@redsift/table';
+import { Flexbox } from '@redsift/design-system';
+import { DataCard, DrilldownItem } from '@redsift/dashboard';
+import { mdiCheckCircleOutline, mdiShapeOutline, mdiToggleSwitch } from '@redsift/icons';
+import { GridColDef, GridRenderCellParams } from '@mui/x-data-grid-pro';
+import {
+  GridToolbarContainer,
+  GridToolbarColumnsButton,
+  GridToolbarDensitySelector,
+  GridToolbarFilterButton,
+  GridToolbarExport,
+  GridToolbarQuickFilter,
+} from '@mui/x-data-grid-pro';
+
+const CustomToolbar = () => (
+  <GridToolbarContainer>
+    <Flexbox gap="0">
+      <GridToolbarFilterButton />
+      <GridToolbarColumnsButton />
+      <GridToolbarDensitySelector />
+      <GridToolbarExport />
+      <Flexbox marginLeft="8px">
+        <GridToolbarQuickFilter />
+      </Flexbox>
+    </Flexbox>
+  </GridToolbarContainer>
+);
+
+const columns: GridColDef[] = [
+  { field: 'id', headerName: 'ID', width: 100, type: 'rsString' as string },
+  {
+    field: 'label',
+    headerName: 'Label',
+    flex: 2,
+    type: 'rsString' as string,
+    renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value}</TextCell>,
+  },
+  { field: 'status', headerName: 'Status', flex: 1, type: 'rsSingleSelect' as string },
+  { field: 'score', headerName: 'Score', width: 80, type: 'rsNumber' as string },
+  { field: 'expiry', headerName: 'Expiry', width: 180, type: 'date' },
+];
+
+// -- Loading state: DataCards and DataGrid both show loading skeletons -------
+
+export default () => (
+  <div style={{ width: '100%' }}>
+    <Flexbox flexDirection="column" gap="16px">
+      {/* DataCards in loading state */}
+      <Flexbox gap="12px" flexWrap="wrap">
+        <DataCard color="info" isLoading>
+          <DataCard.Header icon={mdiCheckCircleOutline} title="Status" />
+          <DataCard.Body>
+            <DrilldownItem value={0} legend="Active" size="medium" />
+            <DrilldownItem value={0} legend="Warning" size="medium" />
+            <DrilldownItem value={0} legend="Critical" size="medium" />
+          </DataCard.Body>
+        </DataCard>
+
+        <DataCard color="warning" isLoading>
+          <DataCard.Header icon={mdiShapeOutline} title="Category" />
+          <DataCard.Body>
+            <DrilldownItem value={0} legend="Primary" size="medium" />
+            <DrilldownItem value={0} legend="Secondary" size="medium" />
+          </DataCard.Body>
+        </DataCard>
+
+        <DataCard color="success" isLoading>
+          <DataCard.Header icon={mdiToggleSwitch} title="Active" />
+          <DataCard.Body>
+            <DrilldownItem value={0} legend="Active" size="medium" />
+            <DrilldownItem value={0} legend="Inactive" size="medium" />
+          </DataCard.Body>
+        </DataCard>
+      </Flexbox>
+
+      {/* DataGrid loading */}
+      <DataGrid
+        autoHeight
+        loading
+        pagination
+        paginationModel={{ page: 0, pageSize: 10 }}
+        pageSizeOptions={[10, 25, 50]}
+        rows={[]}
+        columns={columns}
+        slots={{ toolbar: CustomToolbar }}
+      />
+    </Flexbox>
+  </div>
+);