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

package/data/demos/patterns/datagrid-page/example.tsx

@@ -0,0 +1,521 @@
+import React, { useState } from 'react';
+import { DataGrid, TextCell } from '@redsift/table';
+import { Button, Flexbox, Icon, IconButtonLink, Pill } from '@redsift/design-system';
+import { mdiArrowRight, mdiCheck, mdiClose, mdiShieldCheck, mdiLinkVariant, mdiLeaf } from '@redsift/icons';
+import { GridColDef, GridRenderCellParams, GridRowSelectionModel } from '@mui/x-data-grid-pro';
+import {
+  GridToolbarContainer,
+  GridToolbarColumnsButton,
+  GridToolbarDensitySelector,
+  GridToolbarFilterButton,
+  GridToolbarExport,
+  GridToolbarQuickFilter,
+} from '@mui/x-data-grid-pro';
+
+// -- Toolbar with text labels (not condensed icon-only mode) ----------------
+
+const CustomToolbar = () => (
+  <GridToolbarContainer>
+    <Flexbox gap="0">
+      <GridToolbarFilterButton />
+      <GridToolbarColumnsButton />
+      <GridToolbarDensitySelector />
+      <GridToolbarExport />
+      <Flexbox marginLeft="8px">
+        <GridToolbarQuickFilter />
+      </Flexbox>
+    </Flexbox>
+  </GridToolbarContainer>
+);
+
+// -- Tag options for the rsMultipleSelect column ----------------------------
+
+const TAG_OPTIONS = [
+  { value: 'production', label: 'Production' },
+  { value: 'staging', label: 'Staging' },
+  { value: 'legacy', label: 'Legacy' },
+  { value: 'infrastructure', label: 'Infrastructure' },
+  { value: 'cdn', label: 'CDN' },
+  { value: 'api', label: 'API' },
+  { value: 'auth', label: 'Auth' },
+  { value: 'ca', label: 'CA' },
+  { value: 'email', label: 'Email' },
+  { value: 'ecommerce', label: 'Ecommerce' },
+  { value: 'wildcard', label: 'Wildcard' },
+  { value: 'monitoring', label: 'Monitoring' },
+  { value: 'vpn', label: 'VPN' },
+  { value: 'billing', label: 'Billing' },
+  { value: 'ci', label: 'CI' },
+  { value: 'cms', label: 'CMS' },
+];
+
+// -- 27 rows (tests pagination at 10 / 25 / 50) ----------------------------
+
+const rows = [
+  {
+    id: 'a3f8c1d2',
+    label: 'cdn.acme.com',
+    active: true,
+    status: 'active',
+    category: 'primary',
+    score: 92,
+    expiry: '2027-06-15T00:00:00Z',
+    tags: ['production', 'cdn'],
+  },
+  {
+    id: 'b7e2d4f6',
+    label: 'api.globex.io',
+    active: true,
+    status: 'warning',
+    category: 'primary',
+    score: 74,
+    expiry: '2026-05-01T12:00:00Z',
+    tags: ['production', 'api'],
+  },
+  {
+    id: 'c1a9b5e3',
+    label: '*.staging.acme.com',
+    active: true,
+    status: 'critical',
+    category: 'secondary',
+    score: 45,
+    expiry: '2026-03-28T23:59:59Z',
+    tags: ['staging'],
+  },
+  {
+    id: 'd4f0c8a7',
+    label: 'mail.initech.dev',
+    active: false,
+    status: 'expired',
+    category: 'tertiary',
+    score: 12,
+    expiry: '2025-11-30T08:45:00Z',
+    tags: ['legacy', 'email'],
+  },
+  {
+    id: 'e6b3d1f9',
+    label: 'Acme Root CA',
+    active: true,
+    status: 'active',
+    category: 'primary',
+    score: 100,
+    expiry: '2035-06-01T00:00:00Z',
+    tags: ['infrastructure'],
+  },
+  {
+    id: 'f2c7a5e8',
+    label: 'Issuing CA G2',
+    active: true,
+    status: 'active',
+    category: 'secondary',
+    score: 98,
+    expiry: '2031-12-31T23:59:59Z',
+    tags: ['infrastructure', 'ca'],
+  },
+  {
+    id: 'a8d4f6b1',
+    label: 'auth.globex.io',
+    active: false,
+    status: 'revoked',
+    category: 'primary',
+    score: 0,
+    expiry: '2026-09-10T17:30:00Z',
+    tags: ['production', 'auth'],
+  },
+  {
+    id: 'b5e9c3a2',
+    label: 'shop.initech.dev',
+    active: true,
+    status: 'warning',
+    category: 'tertiary',
+    score: 63,
+    expiry: '2026-04-20T00:00:00Z',
+    tags: ['ecommerce'],
+  },
+  {
+    id: 'c0f7d2b4',
+    label: 'Sectigo DV CA',
+    active: true,
+    status: 'active',
+    category: 'secondary',
+    score: 95,
+    expiry: '2030-01-01T00:00:00Z',
+    tags: ['infrastructure', 'ca'],
+  },
+  {
+    id: 'd9a1e5c6',
+    label: 'vault.initech.dev',
+    active: false,
+    status: 'expired',
+    category: 'primary',
+    score: 8,
+    expiry: '2024-07-22T14:00:00Z',
+    tags: ['legacy'],
+  },
+  {
+    id: 'e3b8f0d7',
+    label: '*.acme.com',
+    active: true,
+    status: 'active',
+    category: 'primary',
+    score: 88,
+    expiry: '2027-08-05T12:00:00Z',
+    tags: ['production', 'wildcard'],
+  },
+  {
+    id: 'f6c2a4e1',
+    label: 'portal.globex.io',
+    active: true,
+    status: 'critical',
+    category: 'tertiary',
+    score: 51,
+    expiry: '2026-03-26T10:00:00Z',
+    tags: [],
+  },
+  {
+    id: 'a1d7f3b9',
+    label: 'logs.initech.dev',
+    active: true,
+    status: 'active',
+    category: 'secondary',
+    score: 81,
+    expiry: '2028-02-14T00:00:00Z',
+    tags: ['production', 'monitoring'],
+  },
+  {
+    id: 'b4e8c6a3',
+    label: 'cms.acme.com',
+    active: false,
+    status: 'expired',
+    category: 'tertiary',
+    score: 5,
+    expiry: '2025-06-10T00:00:00Z',
+    tags: ['legacy', 'cms'],
+  },
+  {
+    id: 'c7f2d0b5',
+    label: 'DigiCert EV CA',
+    active: true,
+    status: 'active',
+    category: 'secondary',
+    score: 99,
+    expiry: '2033-09-15T00:00:00Z',
+    tags: ['infrastructure', 'ca'],
+  },
+  {
+    id: 'd0a3e9f1',
+    label: 'vpn.globex.io',
+    active: true,
+    status: 'warning',
+    category: 'primary',
+    score: 68,
+    expiry: '2026-04-12T00:00:00Z',
+    tags: ['production', 'vpn'],
+  },
+  {
+    id: 'e5b1c4d8',
+    label: '*.initech.dev',
+    active: true,
+    status: 'active',
+    category: 'primary',
+    score: 85,
+    expiry: '2027-11-20T00:00:00Z',
+    tags: ['production', 'wildcard'],
+  },
+  {
+    id: 'f8c6a2e7',
+    label: 'docs.acme.com',
+    active: true,
+    status: 'active',
+    category: 'tertiary',
+    score: 90,
+    expiry: '2028-07-01T00:00:00Z',
+    tags: ['production'],
+  },
+  {
+    id: 'a2d5f9b0',
+    label: 'billing.globex.io',
+    active: false,
+    status: 'revoked',
+    category: 'primary',
+    score: 0,
+    expiry: '2026-01-15T00:00:00Z',
+    tags: ['production', 'billing'],
+  },
+  {
+    id: 'b6e0c3a1',
+    label: 'staging.initech.dev',
+    active: true,
+    status: 'critical',
+    category: 'secondary',
+    score: 42,
+    expiry: '2026-03-27T00:00:00Z',
+    tags: ['staging', 'ci'],
+  },
+  {
+    id: 'c9f4d7b2',
+    label: "Let's Encrypt R3",
+    active: true,
+    status: 'active',
+    category: 'secondary',
+    score: 97,
+    expiry: '2030-09-30T00:00:00Z',
+    tags: ['infrastructure', 'ca'],
+  },
+  {
+    id: 'd3a8e1f5',
+    label: 'analytics.acme.com',
+    active: true,
+    status: 'warning',
+    category: 'tertiary',
+    score: 59,
+    expiry: '2026-04-05T00:00:00Z',
+    tags: ['production', 'monitoring'],
+  },
+  {
+    id: 'e7b2c5d9',
+    label: 'sso.globex.io',
+    active: true,
+    status: 'active',
+    category: 'primary',
+    score: 91,
+    expiry: '2027-12-01T00:00:00Z',
+    tags: ['production', 'auth'],
+  },
+  {
+    id: 'f0c9a6e4',
+    label: 'wiki.initech.dev',
+    active: false,
+    status: 'expired',
+    category: 'tertiary',
+    score: 3,
+    expiry: '2024-12-31T00:00:00Z',
+    tags: ['legacy'],
+  },
+  {
+    id: 'a4d1f8b6',
+    label: 'proxy.acme.com',
+    active: true,
+    status: 'active',
+    category: 'primary',
+    score: 83,
+    expiry: '2028-03-22T00:00:00Z',
+    tags: ['production', 'cdn'],
+  },
+  {
+    id: 'b9e5c0a8',
+    label: 'dev.globex.io',
+    active: true,
+    status: 'critical',
+    category: 'secondary',
+    score: 38,
+    expiry: '2026-03-25T00:00:00Z',
+    tags: ['staging'],
+  },
+  {
+    id: 'c2f6d3b7',
+    label: 'GTS Root R1',
+    active: true,
+    status: 'active',
+    category: 'primary',
+    score: 100,
+    expiry: '2036-06-22T00:00:00Z',
+    tags: ['infrastructure'],
+  },
+];
+
+// -- Helpers ----------------------------------------------------------------
+
+const statusColor = (v: string) => {
+  switch (v) {
+    case 'active':
+      return 'success';
+    case 'warning':
+      return 'warning';
+    case 'critical':
+      return 'error';
+    case 'expired':
+      return 'grey';
+    case 'revoked':
+      return 'error-dark';
+    default:
+      return 'grey';
+  }
+};
+
+const categoryIcon = (v: string) => {
+  switch (v) {
+    case 'primary':
+      return { icon: mdiShieldCheck, color: 'success' };
+    case 'secondary':
+      return { icon: mdiLinkVariant, color: 'info' };
+    case 'tertiary':
+      return { icon: mdiLeaf, color: 'grey' };
+    default:
+      return { icon: mdiLeaf, color: 'grey' };
+  }
+};
+
+const formatDate = (d: Date) => (isNaN(d.getTime()) ? '—' : d.toISOString().replace('T', ' ').slice(0, 19));
+
+// -- Columns (8 types) ------------------------------------------------------
+
+const columns: GridColDef[] = [
+  // 1. String (monospace ID)
+  {
+    field: 'id',
+    headerName: 'ID',
+    width: 100,
+    type: 'rsString' as string,
+    renderCell: ({ value }: GridRenderCellParams) => <TextCell style={{ fontFamily: 'monospace' }}>{value}</TextCell>,
+  },
+  // 2. String (label)
+  {
+    field: 'label',
+    headerName: 'Label',
+    flex: 2,
+    type: 'rsString' as string,
+    renderCell: ({ value }: GridRenderCellParams) => <TextCell>{value}</TextCell>,
+  },
+  // 3. Boolean (active)
+  {
+    field: 'active',
+    headerName: 'Active',
+    width: 80,
+    type: 'boolean',
+    renderCell: ({ value }: GridRenderCellParams) =>
+      value ? (
+        <Icon icon={mdiCheck} color="success" size="small" />
+      ) : (
+        <Icon icon={mdiClose} color="grey" size="small" />
+      ),
+  },
+  // 4. SingleSelect — rendered as status Pill
+  {
+    field: 'status',
+    headerName: 'Status',
+    flex: 1,
+    type: 'rsSingleSelect' as string,
+    valueOptions: [
+      { value: 'active', label: 'Active' },
+      { value: 'warning', label: 'Warning' },
+      { value: 'critical', label: 'Critical' },
+      { value: 'expired', label: 'Expired' },
+      { value: 'revoked', label: 'Revoked' },
+    ],
+    renderCell: ({ value }: GridRenderCellParams) => <Pill color={statusColor(value)}>{value}</Pill>,
+  } as GridColDef,
+  // 5. SingleSelect — rendered as icon
+  {
+    field: 'category',
+    headerName: 'Category',
+    width: 110,
+    type: 'rsSingleSelect' as string,
+    valueOptions: [
+      { value: 'primary', label: 'Primary' },
+      { value: 'secondary', label: 'Secondary' },
+      { value: 'tertiary', label: 'Tertiary' },
+    ],
+    renderCell: ({ value }: GridRenderCellParams) => {
+      const cfg = categoryIcon(value);
+      return <Icon icon={cfg.icon} color={cfg.color} size="small" />;
+    },
+  } as GridColDef,
+  // 6. Number
+  {
+    field: 'score',
+    headerName: 'Score',
+    width: 80,
+    type: 'rsNumber' as string,
+  },
+  // 7. Date
+  {
+    field: 'expiry',
+    headerName: 'Expiry',
+    width: 180,
+    type: 'date',
+    valueGetter: (value: unknown) => new Date(value as string),
+    renderCell: ({ value }: GridRenderCellParams) => {
+      if (!value) return <TextCell>—</TextCell>;
+      const d = value as Date;
+      const isPast = d < new Date();
+      return <TextCell style={isPast ? { color: 'var(--redsift-color-red-n)' } : undefined}>{formatDate(d)}</TextCell>;
+    },
+  },
+  // 8. MultipleSelect (tags) — uses has / hasAnyOf / doesNotHave operators
+  {
+    field: 'tags',
+    headerName: 'Tags',
+    flex: 2,
+    type: 'rsMultipleSelect' as string,
+    valueOptions: TAG_OPTIONS,
+    sortable: false,
+    renderCell: ({ value }: GridRenderCellParams) => {
+      const arr = value as string[];
+      if (!arr || arr.length === 0) return <TextCell>—</TextCell>;
+      return (
+        <Flexbox gap="4px" flexWrap="wrap" alignItems="center">
+          {arr.map((tag: string) => (
+            <Pill key={tag} color="blue">
+              {tag}
+            </Pill>
+          ))}
+        </Flexbox>
+      );
+    },
+  } as GridColDef,
+  // 9. Actions — link to detail page
+  {
+    field: 'actions',
+    headerName: '',
+    type: 'actions',
+    width: 56,
+    hideable: false,
+    sortable: false,
+    filterable: false,
+    renderCell: ({ row }: GridRenderCellParams) => (
+      <IconButtonLink
+        href="/patterns/datagrid-page"
+        icon={mdiArrowRight}
+        color="info"
+        aria-label={`View ${row.label}`}
+      />
+    ),
+  },
+];
+
+export default () => {
+  const [selectionModel, setSelectionModel] = useState<GridRowSelectionModel>([]);
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Flexbox flexDirection="column" gap="0px">
+        {/* Bulk actions bar — visible when rows are selected */}
+        {selectionModel.length > 0 && (
+          <Flexbox gap="8px" alignItems="center" style={{ padding: '8px 0' }}>
+            <Pill color="info">{selectionModel.length} selected</Pill>
+            <Button variant="secondary" onClick={() => console.log('Selected:', selectionModel)}>
+              Log Selection
+            </Button>
+            <Button variant="secondary" color="error" onClick={() => console.log('Delete:', selectionModel)}>
+              Delete
+            </Button>
+          </Flexbox>
+        )}
+
+        <DataGrid
+          autoHeight
+          pagination
+          paginationModel={{ page: 0, pageSize: 10 }}
+          pageSizeOptions={[10, 25, 50]}
+          rows={rows}
+          columns={columns}
+          checkboxSelection
+          rowSelectionModel={selectionModel}
+          onRowSelectionModelChange={setSelectionModel}
+          slots={{ toolbar: CustomToolbar }}
+        />
+      </Flexbox>
+    </div>
+  );
+};

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import { DataGrid, TextCell } from '@redsift/table';
+import { Flexbox, Text, Icon } from '@redsift/design-system';
+import { mdiMagnify } 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' },
+];
+
+// -- Custom empty state overlay ---------------------------------------------
+
+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 records found
+    </Text>
+    <Text variant="caption" color="grey">
+      Try adjusting your filters or search criteria.
+    </Text>
+  </Flexbox>
+);
+
+// -- Empty state: DataGrid with no rows and a custom overlay ----------------
+
+export default () => (
+  <div style={{ width: '100%' }}>
+    <DataGrid
+      autoHeight
+      pagination
+      paginationModel={{ page: 0, pageSize: 10 }}
+      pageSizeOptions={[10, 25, 50]}
+      rows={[]}
+      columns={columns}
+      slots={{
+        toolbar: CustomToolbar,
+        noRowsOverlay: CustomNoRowsOverlay,
+      }}
+    />
+  </div>
+);

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

@@ -0,0 +1,96 @@
+import React, { useCallback, useState } from 'react';
+import { DataGrid, TextCell } from '@redsift/table';
+import { Button, Flexbox, Text, Icon } from '@redsift/design-system';
+import { mdiAlertCircle, mdiRefresh } 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: shows an error banner with a retry button -----------------
+
+export default () => {
+  const [hasError, setHasError] = useState(true);
+
+  const handleRetry = useCallback(() => {
+    setHasError(false);
+    // Simulate a successful retry after a brief delay
+    setTimeout(() => setHasError(true), 1500);
+  }, []);
+
+  return (
+    <div style={{ width: '100%' }}>
+      <Flexbox flexDirection="column" gap="0px">
+        {hasError && (
+          <Flexbox
+            gap="12px"
+            alignItems="center"
+            style={{
+              padding: '12px 16px',
+              backgroundColor: 'var(--redsift-color-red-l3)',
+              borderRadius: '4px',
+              marginBottom: '8px',
+            }}
+            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>
+        )}
+
+        <DataGrid
+          autoHeight
+          loading={!hasError ? true : false}
+          pagination
+          paginationModel={{ page: 0, pageSize: 10 }}
+          pageSizeOptions={[10, 25, 50]}
+          rows={[]}
+          columns={columns}
+          slots={{ toolbar: CustomToolbar }}
+        />
+      </Flexbox>
+    </div>
+  );
+};