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

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

@@ -0,0 +1,109 @@
+import { Edit } from "@comet/admin-icons";
+import { IconButton } from "@mui/material";
+import { DataGrid } from "@mui/x-data-grid";
+import { ToolbarBackButton } from "../../common/toolbar/backbutton/ToolbarBackButton";
+import { ToolbarTitleItem } from "../../common/toolbar/titleitem/ToolbarTitleItem";
+import { Toolbar } from "../../common/toolbar/Toolbar";
+import { StackPage } from "../../stack/Page";
+import { StackLink } from "../../stack/StackLink";
+import { StackSwitch, useStackSwitchApi } from "../../stack/Switch";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var exampleRows = [{
+  id: 1,
+  lastName: "Snow",
+  firstName: "Jon"
+}, {
+  id: 2,
+  lastName: "Lannister",
+  firstName: "Cersei"
+}, {
+  id: 3,
+  lastName: "Lannister",
+  firstName: "Jaime"
+}, {
+  id: 4,
+  lastName: "Stark",
+  firstName: "Arya"
+}, {
+  id: 5,
+  lastName: "Targaryen",
+  firstName: "Daenerys"
+}, {
+  id: 6,
+  lastName: "Melisandre",
+  firstName: null
+}, {
+  id: 7,
+  lastName: "Clifford",
+  firstName: "Ferrara"
+}, {
+  id: 8,
+  lastName: "Frances",
+  firstName: "Rossini"
+}, {
+  id: 9,
+  lastName: "Roxie",
+  firstName: "Harvey"
+}];
+var exampleColumns = [{
+  field: "firstName",
+  headerName: "First name",
+  flex: 1
+}, {
+  field: "lastName",
+  headerName: "Last name",
+  flex: 1
+}];
+export default {
+  title: "components/dataGrid/ClickableRows",
+  parameters: {
+    stack: {
+      topLevelTitle: "Example Page"
+    }
+  }
+};
+export var ClickableRows = function ClickableRows() {
+  // Grid must be a separate component to make sure the stackSwitchApi context is correct
+  var Grid = function Grid() {
+    var stackSwitchApi = useStackSwitchApi();
+    var columns = [].concat(exampleColumns, [{
+      field: "actions",
+      type: "actions",
+      headerName: "",
+      width: 52,
+      renderCell: function renderCell(params) {
+        return /*#__PURE__*/_jsx(IconButton, {
+          color: "primary",
+          component: StackLink,
+          pageName: "edit",
+          payload: params.row.id,
+          children: /*#__PURE__*/_jsx(Edit, {})
+        });
+      }
+    }]);
+    return /*#__PURE__*/_jsx(DataGrid, {
+      rows: exampleRows,
+      columns: columns,
+      onRowClick: function onRowClick(params) {
+        stackSwitchApi.activatePage("edit", params.row.id);
+      }
+    });
+  };
+  return /*#__PURE__*/_jsxs(StackSwitch, {
+    children: [/*#__PURE__*/_jsx(StackPage, {
+      name: "grid",
+      children: /*#__PURE__*/_jsx(Grid, {})
+    }), /*#__PURE__*/_jsx(StackPage, {
+      name: "edit",
+      children: function children(id) {
+        return /*#__PURE__*/_jsxs(Toolbar, {
+          children: [/*#__PURE__*/_jsx(ToolbarBackButton, {}), /*#__PURE__*/_jsxs(ToolbarTitleItem, {
+            children: ["Editing item with id: ", /*#__PURE__*/_jsx("code", {
+              children: id
+            })]
+          })]
+        });
+      }
+    })]
+  });
+};

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

@@ -0,0 +1,50 @@
+import { Delete, Download, Excel, Favorite, Move } from "@comet/admin-icons";
+import { ListItemIcon } from "@mui/material";
+import { CrudMoreActionsMenu, CrudMoreActionsMenuItem } from "../CrudMoreActionsMenu";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default {
+  title: "components/dataGrid/CrudMoreActionsMenu"
+};
+export var Basic = function Basic() {
+  return /*#__PURE__*/_jsx(CrudMoreActionsMenu, {
+    selectionSize: 2,
+    overallActions: [{
+      label: "Export to Excel",
+      onClick: function onClick() {},
+      icon: /*#__PURE__*/_jsx(Excel, {})
+    }],
+    selectiveActions: [{
+      label: "Move",
+      onClick: function onClick() {},
+      icon: /*#__PURE__*/_jsx(Move, {})
+    }, {
+      label: "Delete",
+      onClick: function onClick() {},
+      icon: /*#__PURE__*/_jsx(Delete, {}),
+      divider: true
+    }, {
+      label: "Download",
+      onClick: function onClick() {},
+      icon: /*#__PURE__*/_jsx(Download, {})
+    }]
+  });
+};
+export var CustomComponent = function CustomComponent() {
+  var CustomAction = function CustomAction() {
+    return /*#__PURE__*/_jsxs(CrudMoreActionsMenuItem, {
+      onClick: function onClick() {
+        window.alert("Hello from custom action");
+      },
+      children: [/*#__PURE__*/_jsx(ListItemIcon, {
+        children: /*#__PURE__*/_jsx(Favorite, {})
+      }), "Custom Action"]
+    });
+  };
+  return /*#__PURE__*/_jsx(CrudMoreActionsMenu, {
+    overallActions: [{
+      label: "Export to Excel",
+      onClick: function onClick() {},
+      icon: /*#__PURE__*/_jsx(Excel, {})
+    }, /*#__PURE__*/_jsx(CustomAction, {}, "custom-action")]
+  });
+};

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

@@ -0,0 +1,94 @@
+import { Add } from "@comet/admin-icons";
+import { Box } from "@mui/material";
+import { DataGrid } from "@mui/x-data-grid";
+import { Button } from "../../common/buttons/Button";
+import { FillSpace } from "../../common/FillSpace";
+import { DataGridToolbar } from "../../common/toolbar/DataGridToolbar";
+import { ToolbarTitleItem } from "../../common/toolbar/titleitem/ToolbarTitleItem";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var exampleRows = [{
+  id: 1,
+  lastName: "Snow",
+  firstName: "Jon"
+}, {
+  id: 2,
+  lastName: "Lannister",
+  firstName: "Cersei"
+}, {
+  id: 3,
+  lastName: "Lannister",
+  firstName: "Jaime"
+}, {
+  id: 4,
+  lastName: "Stark",
+  firstName: "Arya"
+}, {
+  id: 5,
+  lastName: "Targaryen",
+  firstName: "Daenerys"
+}, {
+  id: 6,
+  lastName: "Melisandre",
+  firstName: null
+}, {
+  id: 7,
+  lastName: "Clifford",
+  firstName: "Ferrara"
+}, {
+  id: 8,
+  lastName: "Frances",
+  firstName: "Rossini"
+}, {
+  id: 9,
+  lastName: "Roxie",
+  firstName: "Harvey"
+}];
+var exampleColumns = [{
+  field: "firstName",
+  headerName: "First name",
+  flex: 1
+}, {
+  field: "lastName",
+  headerName: "Last name",
+  flex: 1
+}];
+export default {
+  title: "components/dataGrid/DataGrid"
+};
+export var Default = {
+  args: {
+    density: "standard"
+  },
+  argTypes: {
+    density: {
+      name: "Density",
+      control: "select",
+      options: ["standard", "comfortable", "compact"]
+    }
+  },
+  render: function render(_ref) {
+    var density = _ref.density;
+    var ToolbarForGrid = function ToolbarForGrid() {
+      return /*#__PURE__*/_jsxs(DataGridToolbar, {
+        children: [/*#__PURE__*/_jsx(ToolbarTitleItem, {
+          children: "DataGrid example"
+        }), /*#__PURE__*/_jsx(FillSpace, {}), /*#__PURE__*/_jsx(Button, {
+          startIcon: /*#__PURE__*/_jsx(Add, {}),
+          children: "Add"
+        })]
+      });
+    };
+    return /*#__PURE__*/_jsx(Box, {
+      height: 400,
+      children: /*#__PURE__*/_jsx(DataGrid, {
+        density: density,
+        rows: exampleRows,
+        columns: exampleColumns,
+        slots: {
+          toolbar: ToolbarForGrid
+        },
+        showToolbar: true
+      })
+    });
+  }
+};