@comet/admin 9.0.0-beta.4 → 9.0.0-beta.5

package/lib/dataGrid/__stories__/DataGridSingleSelectFilter.stories.js

@@ -0,0 +1,492 @@
+import { Check, Close, Education } from "@comet/admin-icons";
+import { Box } from "@mui/material";
+import { DataGrid } from "@mui/x-data-grid";
+import { DataGridToolbar } from "../../common/toolbar/DataGridToolbar";
+import { GridCellContent } from "../GridCellContent";
+import { GridFilterButton } from "../GridFilterButton";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: "components/dataGrid/DataGridSingleSelectFilter"
+};
+
+// Sample data
+var rows = [{
+  id: 1,
+  name: "Product A",
+  category: "electronics",
+  status: "active",
+  priority: "high",
+  department: "sales"
+}, {
+  id: 2,
+  name: "Product B",
+  category: "clothing",
+  status: "inactive",
+  priority: "medium",
+  department: "marketing"
+}, {
+  id: 3,
+  name: "Product C",
+  category: "electronics",
+  status: "active",
+  priority: "low",
+  department: "sales"
+}, {
+  id: 4,
+  name: "Product D",
+  category: "furniture",
+  status: "pending",
+  priority: "high",
+  department: "operations"
+}, {
+  id: 5,
+  name: "Product E",
+  category: "clothing",
+  status: "active",
+  priority: "medium",
+  department: "sales"
+}, {
+  id: 6,
+  name: "Product F",
+  category: "electronics",
+  status: "inactive",
+  priority: "low",
+  department: "marketing"
+}, {
+  id: 7,
+  name: "Product G",
+  category: "furniture",
+  status: "active",
+  priority: "high",
+  department: "operations"
+}, {
+  id: 8,
+  name: "Product H",
+  category: "clothing",
+  status: "pending",
+  priority: "medium",
+  department: "sales"
+}];
+
+// Story 1: Basic single select with simple string options
+export var BasicSingleSelect = {
+  render: function render() {
+    var columns = [{
+      field: "name",
+      headerName: "Product Name",
+      flex: 1
+    }, {
+      field: "category",
+      headerName: "Category",
+      width: 150,
+      type: "singleSelect",
+      valueOptions: ["electronics", "clothing", "furniture"]
+    }, {
+      field: "status",
+      headerName: "Status",
+      width: 130,
+      type: "singleSelect",
+      valueOptions: ["active", "inactive", "pending"]
+    }];
+    return /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: "h4",
+        sx: {
+          mb: 2
+        },
+        children: "Basic SingleSelect Filter"
+      }), /*#__PURE__*/_jsx(Box, {
+        height: 500,
+        children: /*#__PURE__*/_jsx(DataGrid, {
+          rows: rows,
+          columns: columns,
+          slots: {
+            toolbar: function toolbar() {
+              return /*#__PURE__*/_jsx(DataGridToolbar, {
+                children: /*#__PURE__*/_jsx(GridFilterButton, {})
+              });
+            }
+          },
+          initialState: {
+            filter: {
+              filterModel: {
+                items: []
+              }
+            }
+          },
+          showToolbar: true
+        })
+      })]
+    });
+  }
+};
+
+// Story 2: Single select with custom labels
+export var WithCustomLabels = {
+  render: function render() {
+    var columns = [{
+      field: "name",
+      headerName: "Product Name",
+      flex: 1
+    }, {
+      field: "priority",
+      headerName: "Priority",
+      width: 150,
+      type: "singleSelect",
+      valueOptions: [{
+        value: "high",
+        label: "🔴 High Priority"
+      }, {
+        value: "medium",
+        label: "🟡 Medium Priority"
+      }, {
+        value: "low",
+        label: "🟢 Low Priority"
+      }]
+    }, {
+      field: "department",
+      headerName: "Department",
+      width: 150,
+      type: "singleSelect",
+      valueOptions: [{
+        value: "sales",
+        label: "💼 Sales Department"
+      }, {
+        value: "marketing",
+        label: "📢 Marketing Department"
+      }, {
+        value: "operations",
+        label: "⚙️ Operations Department"
+      }]
+    }];
+    return /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: "h4",
+        sx: {
+          mb: 2
+        },
+        children: "SingleSelect with Custom Labels"
+      }), /*#__PURE__*/_jsx(Box, {
+        height: 500,
+        children: /*#__PURE__*/_jsx(DataGrid, {
+          rows: rows,
+          columns: columns,
+          slots: {
+            toolbar: function toolbar() {
+              return /*#__PURE__*/_jsx(DataGridToolbar, {
+                children: /*#__PURE__*/_jsx(GridFilterButton, {})
+              });
+            }
+          },
+          showToolbar: true
+        })
+      })]
+    });
+  }
+};
+
+// Story 3: Single select with long labels (showcases vertical expansion)
+export var WithLongLabels = {
+  render: function render() {
+    var columns = [{
+      field: "name",
+      headerName: "Product Name",
+      flex: 1
+    }, {
+      field: "category",
+      headerName: "Category",
+      width: 200,
+      type: "singleSelect",
+      valueOptions: [{
+        value: "electronics",
+        label: "Electronics and Computer Equipment with Accessories"
+      }, {
+        value: "clothing",
+        label: "Clothing, Apparel, and Fashion Items for All Seasons"
+      }, {
+        value: "furniture",
+        label: "Furniture, Home Decor, and Interior Design Products"
+      }]
+    }];
+    return /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: "h4",
+        sx: {
+          mb: 2
+        },
+        children: "SingleSelect with Long Labels"
+      }), /*#__PURE__*/_jsx(Box, {
+        height: 500,
+        children: /*#__PURE__*/_jsx(DataGrid, {
+          rows: rows,
+          columns: columns,
+          slots: {
+            toolbar: function toolbar() {
+              return /*#__PURE__*/_jsx(DataGridToolbar, {
+                children: /*#__PURE__*/_jsx(GridFilterButton, {})
+              });
+            }
+          },
+          showToolbar: true
+        })
+      })]
+    });
+  }
+};
+
+// Story 4: Single select with many options
+export var WithManyOptions = {
+  render: function render() {
+    var columns = [{
+      field: "name",
+      headerName: "Product Name",
+      flex: 1
+    }, {
+      field: "category",
+      headerName: "Category (Many Options)",
+      width: 200,
+      type: "singleSelect",
+      valueOptions: ["electronics", "clothing", "furniture", "books", "toys", "sports", "automotive", "food", "health", "beauty", "tools", "garden", "pet supplies", "office supplies", "musical instruments"]
+    }];
+    return /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: "h4",
+        sx: {
+          mb: 2
+        },
+        children: "SingleSelect with Many Options"
+      }), /*#__PURE__*/_jsx(Box, {
+        height: 500,
+        children: /*#__PURE__*/_jsx(DataGrid, {
+          rows: rows,
+          columns: columns,
+          slots: {
+            toolbar: function toolbar() {
+              return /*#__PURE__*/_jsx(DataGridToolbar, {
+                children: /*#__PURE__*/_jsx(GridFilterButton, {})
+              });
+            }
+          },
+          showToolbar: true
+        })
+      })]
+    });
+  }
+};
+
+// Story 5: Single select with custom cell content
+export var WithCustomCellContent = {
+  render: function render() {
+    var columns = [{
+      field: "name",
+      headerName: "Product Name",
+      flex: 1
+    }, {
+      field: "status",
+      headerName: "Status with Icon",
+      width: 200,
+      type: "singleSelect",
+      valueOptions: [{
+        value: "active",
+        label: "Active Status",
+        cellContent: /*#__PURE__*/_jsx(GridCellContent, {
+          primaryText: "Active",
+          icon: /*#__PURE__*/_jsx(Check, {
+            color: "success"
+          })
+        })
+      }, {
+        value: "inactive",
+        label: "Inactive Status",
+        cellContent: /*#__PURE__*/_jsx(GridCellContent, {
+          primaryText: "Inactive",
+          icon: /*#__PURE__*/_jsx(Close, {
+            color: "error"
+          })
+        })
+      }, {
+        value: "pending",
+        label: "Pending Review",
+        cellContent: /*#__PURE__*/_jsx(GridCellContent, {
+          primaryText: "Pending",
+          icon: /*#__PURE__*/_jsx(Education, {
+            color: "warning"
+          })
+        })
+      }]
+    }];
+    return /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: "h4",
+        sx: {
+          mb: 2
+        },
+        children: "SingleSelect with Custom Cell Content"
+      }), /*#__PURE__*/_jsx(Box, {
+        height: 500,
+        children: /*#__PURE__*/_jsx(DataGrid, {
+          rows: rows,
+          columns: columns,
+          slots: {
+            toolbar: function toolbar() {
+              return /*#__PURE__*/_jsx(DataGridToolbar, {
+                children: /*#__PURE__*/_jsx(GridFilterButton, {})
+              });
+            }
+          },
+          showToolbar: true
+        })
+      })]
+    });
+  }
+};
+
+// Story 6: Multiple single select columns
+export var MultipleSingleSelectColumns = {
+  render: function render() {
+    var columns = [{
+      field: "name",
+      headerName: "Product Name",
+      flex: 1
+    }, {
+      field: "category",
+      headerName: "Category",
+      width: 140,
+      type: "singleSelect",
+      valueOptions: ["electronics", "clothing", "furniture"]
+    }, {
+      field: "status",
+      headerName: "Status",
+      width: 130,
+      type: "singleSelect",
+      valueOptions: ["active", "inactive", "pending"]
+    }, {
+      field: "priority",
+      headerName: "Priority",
+      width: 130,
+      type: "singleSelect",
+      valueOptions: [{
+        value: "high",
+        label: "High"
+      }, {
+        value: "medium",
+        label: "Medium"
+      }, {
+        value: "low",
+        label: "Low"
+      }]
+    }, {
+      field: "department",
+      headerName: "Department",
+      width: 150,
+      type: "singleSelect",
+      valueOptions: ["sales", "marketing", "operations"]
+    }];
+    return /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
+        component: "h4",
+        sx: {
+          mb: 2
+        },
+        children: "Multiple SingleSelect Columns"
+      }), /*#__PURE__*/_jsx(Box, {
+        height: 500,
+        children: /*#__PURE__*/_jsx(DataGrid, {
+          rows: rows,
+          columns: columns,
+          slots: {
+            toolbar: function toolbar() {
+              return /*#__PURE__*/_jsx(DataGridToolbar, {
+                children: /*#__PURE__*/_jsx(GridFilterButton, {})
+              });
+            }
+          },
+          showToolbar: true
+        })
+      })]
+    });
+  }
+};
+
+// Story 7: Different density modes
+
+export var DifferentDensityModes = {
+  args: {
+    density: "standard"
+  },
+  argTypes: {
+    density: {
+      name: "Density",
+      control: "select",
+      options: ["standard", "comfortable", "compact"]
+    }
+  },
+  render: function render(_ref) {
+    var density = _ref.density;
+    var columns = [{
+      field: "name",
+      headerName: "Product Name",
+      flex: 1
+    }, {
+      field: "category",
+      headerName: "Category",
+      width: 150,
+      type: "singleSelect",
+      valueOptions: ["electronics", "clothing", "furniture"]
+    }, {
+      field: "status",
+      headerName: "Status",
+      width: 130,
+      type: "singleSelect",
+      valueOptions: [{
+        value: "active",
+        label: "Active Status"
+      }, {
+        value: "inactive",
+        label: "Inactive Status"
+      }, {
+        value: "pending",
+        label: "Pending Review"
+      }]
+    }, {
+      field: "priority",
+      headerName: "Priority",
+      width: 130,
+      type: "singleSelect",
+      valueOptions: [{
+        value: "high",
+        label: "🔴 High Priority"
+      }, {
+        value: "medium",
+        label: "🟡 Medium Priority"
+      }, {
+        value: "low",
+        label: "🟢 Low Priority"
+      }]
+    }];
+    return /*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsxs(Box, {
+        component: "h4",
+        sx: {
+          mb: 2
+        },
+        children: ["SingleSelect Filter - ", density, " Density"]
+      }), /*#__PURE__*/_jsx(Box, {
+        height: 500,
+        children: /*#__PURE__*/_jsx(DataGrid, {
+          density: density,
+          rows: rows,
+          columns: columns,
+          slots: {
+            toolbar: function toolbar() {
+              return /*#__PURE__*/_jsx(DataGridToolbar, {
+                children: /*#__PURE__*/_jsx(GridFilterButton, {})
+              });
+            }
+          },
+          showToolbar: true
+        })
+      })]
+    });
+  }
+};