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

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

@@ -0,0 +1,107 @@
+import React, { useCallback, useState } from 'react';
+import { DataGrid, TextCell } from '@redsift/table';
+import { Button, Flexbox, Text, Icon } from '@redsift/design-system';
+import { mdiFilterRemoveOutline, mdiMagnify } from '@redsift/icons';
+import { GridColDef, GridFilterModel, 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,
+    valueOptions: ['active', 'warning', 'critical', 'expired'],
+  } as GridColDef,
+  { field: 'score', headerName: 'Score', width: 80, type: 'rsNumber' as string },
+  { field: 'expiry', headerName: 'Expiry', width: 180, type: 'date' },
+];
+
+// -- Empty state after server returns zero results from filtering -----------
+// The server returned { rows: [], totalRows: 0 } because filters matched
+// nothing. A custom NoRowsOverlay shows a message and a clear-filters button.
+
+export default () => {
+  const [filterModel, setFilterModel] = useState<GridFilterModel>({
+    items: [{ field: 'status', operator: 'is', value: 'nonexistent' }],
+  });
+
+  const CustomNoRowsOverlay = useCallback(
+    () => (
+      <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 removing some filters or broadening your search.
+        </Text>
+        <Button variant="secondary" onClick={() => setFilterModel({ items: [] })}>
+          <Flexbox gap="4px" alignItems="center">
+            <Icon icon={mdiFilterRemoveOutline} size="small" />
+            Clear all filters
+          </Flexbox>
+        </Button>
+      </Flexbox>
+    ),
+    []
+  );
+
+  return (
+    <div style={{ width: '100%' }}>
+      <DataGrid
+        autoHeight
+        pagination
+        paginationMode="server"
+        sortingMode="server"
+        filterMode="server"
+        paginationModel={{ page: 0, pageSize: 10 }}
+        pageSizeOptions={[10, 25, 50]}
+        rowCount={0}
+        rows={[]}
+        columns={columns}
+        filterModel={filterModel}
+        onFilterModelChange={setFilterModel}
+        slots={{
+          toolbar: CustomToolbar,
+          noRowsOverlay: CustomNoRowsOverlay,
+        }}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,107 @@
+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: server fetch rejected with an error -----------------------
+// Shows an error banner above the DataGrid with a retry button.
+// The DataGrid remains rendered (with empty rows) to preserve layout.
+
+export default () => {
+  const [hasError, setHasError] = useState(true);
+  const [loading, setLoading] = useState(false);
+
+  const handleRetry = useCallback(() => {
+    setHasError(false);
+    setLoading(true);
+    // Simulate a retry that fails again after 1.5s
+    setTimeout(() => {
+      setLoading(false);
+      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 fetch data from the server. 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={loading}
+          pagination
+          paginationMode="server"
+          sortingMode="server"
+          filterMode="server"
+          paginationModel={{ page: 0, pageSize: 10 }}
+          pageSizeOptions={[10, 25, 50]}
+          rowCount={0}
+          rows={[]}
+          columns={columns}
+          slots={{ toolbar: CustomToolbar }}
+        />
+      </Flexbox>
+    </div>
+  );
+};

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

@@ -0,0 +1,63 @@
+import React from 'react';
+import { DataGrid, TextCell } from '@redsift/table';
+import { Flexbox } from '@redsift/design-system';
+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' },
+];
+
+// -- Initial loading state: first fetch hasn't completed yet ----------------
+// Shows the DataGrid with loading=true, empty rows, and rowCount=0.
+// This is what users see before the server responds for the first time.
+
+export default () => (
+  <div style={{ width: '100%' }}>
+    <DataGrid
+      autoHeight
+      loading
+      pagination
+      paginationMode="server"
+      sortingMode="server"
+      filterMode="server"
+      paginationModel={{ page: 0, pageSize: 10 }}
+      pageSizeOptions={[10, 25, 50]}
+      rowCount={0}
+      rows={[]}
+      columns={columns}
+      slots={{ toolbar: CustomToolbar }}
+    />
+  </div>
+);

package/data/docs/components/charts/Arc.json

@@ -0,0 +1,179 @@
+{
+  "name": "Arc",
+  "description": "",
+  "package": "@redsift/charts",
+  "filePath": "packages/charts/src/components/Arc/Arc.tsx",
+  "props": [
+    {
+      "name": "createArc",
+      "description": "Arc generator used to determine the width of the arc.",
+      "type": "Arc<any, ArcDatum>",
+      "required": true,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "hasStroke",
+      "description": "Whether the arc has a stroke or not. Used to create a gap between two siblings.",
+      "type": [
+        "false",
+        "true"
+      ],
+      "required": false,
+      "defaultValue": "true",
+      "category": "props"
+    },
+    {
+      "name": "anchorProps",
+      "description": "Anchor props to use when the component is a navigation link.",
+      "type": "AnchorProps",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "color",
+      "description": "Color of the DataPoint.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "data",
+      "description": "Data. Also state to which the component should end the animation, if any.",
+      "type": "ArcDatum",
+      "required": true,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "dataset",
+      "description": "Entire dataset in which the data point is a part of.",
+      "type": "any[]",
+      "required": true,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "disableAnimations",
+      "description": "Disable animations.",
+      "type": [
+        "false",
+        "true"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "groupedData",
+      "description": "Group of data in which the data point is a part of.",
+      "type": "any[]",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "id",
+      "description": "Id. Used for accessibility.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "index",
+      "description": "Position in the list of siblings. Used for placement and selection.",
+      "type": "number",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "isSelected",
+      "description": "Whether the component is selected or not. Used only if the component is selectable. Set to `undefined` to make nor selected nor unselected.",
+      "type": [
+        "false",
+        "true"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "labelDecorator",
+      "description": "Method modifying the label before displaying it.",
+      "type": "(data: ArcDatum, props?: { index?: number | undefined; isSelected?: boolean | undefined; color?: string | undefined; } | undefined) => string | ReactElement<any, string | JSXElementConstructor<any>>",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "onClick",
+      "description": "Method called when a click or keydown occurs on the component.",
+      "type": "(data: ArcDatum, dataset: any[]) => void",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "previousData",
+      "description": "State from which the component should start the animation, if any.",
+      "type": "ArcDatum",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "role",
+      "description": "Role. Will be set to 'button' if onClick is provided. If 'option', then the component becomes selectable.",
+      "type": [
+        "\"button\"",
+        "\"img\"",
+        "\"link\"",
+        "\"option\""
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "theme",
+      "description": "Theme.",
+      "type": [
+        "\"light\"",
+        "\"dark\""
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "tooltipVariant",
+      "description": "Tooltip variant.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "tooltipDecorator",
+      "description": "Method modifying what's displayed within the tooltip when the tooltipVariant is \"custom\".",
+      "type": "(data: ArcDatum, props?: { index?: number | undefined; isSelected?: boolean | undefined; color?: string | undefined; } | undefined, dataset?: any[] | undefined, groupedData?: any[] | undefined) => string | ReactElement<any, string | JSXElementConstructor<any>>",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "tooltipProps",
+      "description": "Default placement of the tooltip.",
+      "type": "Partial<Omit<TooltipProps, \"ref\">>",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    }
+  ],
+  "examples": [],
+  "tags": {}
+}

package/data/docs/components/charts/Arcs.json

@@ -0,0 +1,104 @@
+{
+  "name": "Arcs",
+  "description": "",
+  "package": "@redsift/charts",
+  "filePath": "packages/charts/src/components/Arcs/Arcs.tsx",
+  "props": [
+    {
+      "name": "arcs",
+      "description": "Arc props.",
+      "type": "Omit<ArcProps, \"ref\">[]",
+      "required": true,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "hasLabels",
+      "description": "Whether arcs have internal labels or not.",
+      "type": [
+        "false",
+        "true"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "sliceProps",
+      "description": "Native HTML props to forward to each slice.",
+      "type": "Omit<SVGProps<SVGGElement>, \"onClick\" | \"width\" | \"ref\">",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "onClick",
+      "description": "Method called when a click or keydown occurs on the component.",
+      "type": "(data: ArcDatum, dataset: any[]) => void",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "role",
+      "description": "Role. Will be set to 'button' if onClick is provided. If 'option', then the component becomes selectable.",
+      "type": [
+        "\"button\"",
+        "\"img\"",
+        "\"link\"",
+        "\"option\""
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "disableAnimations",
+      "description": "Disable animations.",
+      "type": [
+        "false",
+        "true"
+      ],
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "labelDecorator",
+      "description": "Method modifying the label before displaying it.",
+      "type": "(data: ArcDatum, props?: { index?: number | undefined; isSelected?: boolean | undefined; color?: string | undefined; } | undefined) => string | ReactElement<any, string | JSXElementConstructor<any>>",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "hasStroke",
+      "description": "Whether the arc has a stroke or not. Used to create a gap between two siblings.",
+      "type": [
+        "false",
+        "true"
+      ],
+      "required": false,
+      "defaultValue": "true",
+      "category": "props"
+    },
+    {
+      "name": "tooltipDecorator",
+      "description": "Method modifying what's displayed within the tooltip when the tooltipVariant is \"custom\".",
+      "type": "(data: ArcDatum, props?: { index?: number | undefined; isSelected?: boolean | undefined; color?: string | undefined; } | undefined, dataset?: any[] | undefined, groupedData?: any[] | undefined) => string | ReactElement<any, string | JSXElementConstructor<any>>",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    },
+    {
+      "name": "tooltipVariant",
+      "description": "Tooltip variant.",
+      "type": "string",
+      "required": false,
+      "defaultValue": null,
+      "category": "props"
+    }
+  ],
+  "examples": [],
+  "tags": {}
+}