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

package/lib/common/DeleteDialog.d.ts

@@ -1,6 +1,7 @@
 interface DeleteDialogProps {
     dialogOpen: boolean;
     deleteType?: "delete" | "remove";
+    deleteCount?: number;
     onDelete: () => Promise<void>;
     onCancel: () => void;
 }

package/lib/common/DeleteDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DeleteDialog.d.ts","sourceRoot":"","sources":["../../src/common/DeleteDialog.tsx"],"names":[],"mappings":"AAcA,UAAU,iBAAiB;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,4CAuCpD,CAAC"}
+{"version":3,"file":"DeleteDialog.d.ts","sourceRoot":"","sources":["../../src/common/DeleteDialog.tsx"],"names":[],"mappings":"AAcA,UAAU,iBAAiB;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9B,QAAQ,EAAE,MAAM,IAAI,CAAC;CACxB;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,iBAAiB,4CA+CpD,CAAC"}

package/lib/common/DeleteDialog.js

@@ -17,6 +17,7 @@ export var DeleteDialog = function DeleteDialog(props) {
   var dialogOpen = props.dialogOpen,
     _props$deleteType = props.deleteType,
     deleteType = _props$deleteType === void 0 ? "delete" : _props$deleteType,
+    deleteCount = props.deleteCount,
     onDelete = props.onDelete,
     onCancel = props.onCancel;
   return /*#__PURE__*/_jsxs(Dialog, {
@@ -41,7 +42,13 @@ export var DeleteDialog = function DeleteDialog(props) {
       },
       children: [/*#__PURE__*/_jsx(WarningSolid, {
         color: "error"
-      }), deleteType === "delete" ? /*#__PURE__*/_jsx(FormattedMessage, {
+      }), deleteType === "delete" ? deleteCount !== undefined && deleteCount > 1 ? /*#__PURE__*/_jsx(FormattedMessage, {
+        id: "comet.table.deleteDialog.contentMultiple",
+        defaultMessage: "You are about to delete {count} items permanently.",
+        values: {
+          count: deleteCount
+        }
+      }) : /*#__PURE__*/_jsx(FormattedMessage, {
         id: "comet.table.deleteDialog.content",
         defaultMessage: "You are about to delete this item permanently."
       }) : /*#__PURE__*/_jsx(FormattedMessage, {

package/lib/common/buttons/clearinput/ClearInputButton.js

@@ -23,7 +23,7 @@ var Root = createComponentSlot(ButtonBase)({
   slotName: "root"
 })(function (_ref) {
   var theme = _ref.theme;
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        height: 100%;\n        width: 40px;\n        color: ", ";\n\n        ", ":last-child & {\n            margin-right: ", ";\n        }\n\n        ", ":first-child & {\n            margin-left: ", ";\n        }\n\n        &:disabled {\n            color: ", ";\n        }\n    "])), theme.palette.action.active, ".".concat(inputAdornmentClasses.positionEnd), theme.spacing(-2), ".".concat(inputAdornmentClasses.positionStart), theme.spacing(-2), theme.palette.action.disabled);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        height: 100%;\n        width: 40px;\n        color: ", ";\n\n        ", ":last-child & {\n            margin-right: ", ";\n        }\n\n        ", ":first-of-type & {\n            margin-left: ", ";\n        }\n\n        &:disabled {\n            color: ", ";\n        }\n    "])), theme.palette.action.active, ".".concat(inputAdornmentClasses.positionEnd), theme.spacing(-2), ".".concat(inputAdornmentClasses.positionStart), theme.spacing(-2), theme.palette.action.disabled);
 });
 
 /**

package/lib/common/toolbar/__stories__/DataGridToolbar.stories.js

@@ -0,0 +1,76 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { Button, DataGridToolbar, FillSpace, GridColumnsButton, GridFilterButton, GridToolbarQuickFilter, StackLink, useDataGridRemote, usePersistentColumnState } from "@comet/admin";
+import { Add as AddIcon } from "@comet/admin-icons";
+import { DataGrid as DataGridCommunity } from "@mui/x-data-grid";
+import { DataGridPro } from "@mui/x-data-grid-pro";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var data = [{
+  id: "1f30a6a0-5b9d-4b25-8307-9e8b4a4d2b1c",
+  firstname: "Emily",
+  lastname: "Smith"
+}, {
+  id: "28b9bdf3-5646-4a22-9449-74112db67b5f",
+  firstname: "Daniel",
+  lastname: "Johnson"
+}, {
+  id: "e60900ec-3c69-4e67-8d78-83a10c7573d3",
+  firstname: "Sophia",
+  lastname: "Williams"
+}];
+var gridOptions = ["Community", "Pro"];
+export default {
+  title: "components/toolbar/DataGridToolbar",
+  argTypes: {
+    gridVersion: {
+      name: "Data Grid Version",
+      control: "select",
+      options: gridOptions
+    }
+  },
+  args: {
+    gridVersion: gridOptions[0]
+  }
+};
+export var _DataGridToolbar = {
+  render: function render(_ref) {
+    var gridVersion = _ref.gridVersion;
+    var dataGridProps = _objectSpread(_objectSpread({}, useDataGridRemote()), usePersistentColumnState("FooBar"));
+    var columns = [{
+      field: "firstname",
+      headerName: "First Name",
+      width: 150
+    }, {
+      field: "lastname",
+      headerName: "Last Name",
+      width: 150
+    }];
+    var ToolbarSlot = function ToolbarSlot() {
+      return /*#__PURE__*/_jsxs(DataGridToolbar, {
+        children: [/*#__PURE__*/_jsx(GridToolbarQuickFilter, {}), /*#__PURE__*/_jsx(GridFilterButton, {}), /*#__PURE__*/_jsx(GridColumnsButton, {}), /*#__PURE__*/_jsx(FillSpace, {}), /*#__PURE__*/_jsx(Button, {
+          responsive: true,
+          startIcon: /*#__PURE__*/_jsx(AddIcon, {}),
+          component: StackLink,
+          pageName: "add",
+          payload: "add",
+          children: "Add person"
+        })]
+      });
+    };
+    var DataGrid = gridVersion === "Community" ? DataGridCommunity : DataGridPro;
+    return /*#__PURE__*/_jsx(DataGrid, _objectSpread(_objectSpread({}, dataGridProps), {}, {
+      autoHeight: true,
+      columns: columns,
+      rows: data,
+      slots: {
+        toolbar: ToolbarSlot
+      },
+      showToolbar: true
+    }));
+  },
+  name: "DataGrid Toolbar"
+};

package/lib/common/toolbar/__stories__/Toolbar.stories.js

@@ -0,0 +1,82 @@
+import { Button, FillSpace, HelpDialogButton, Stack, StackLink, StackPage, StackSwitch, Toolbar, ToolbarActions, ToolbarAutomaticTitleItem, ToolbarBackButton, ToolbarItem } from "@comet/admin";
+import { ArrowRight, Save } from "@comet/admin-icons";
+import { Box, Chip, Typography } from "@mui/material";
+import { FormattedMessage } from "react-intl";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+function StackWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_jsx(Stack, {
+    topLevelTitle: "Stack Root",
+    children: /*#__PURE__*/_jsxs(StackSwitch, {
+      initialPage: "root",
+      children: [/*#__PURE__*/_jsxs(StackPage, {
+        name: "root",
+        children: [children, /*#__PURE__*/_jsx(StackLink, {
+          pageName: "detail",
+          payload: "x",
+          children: "Go to detail page"
+        })]
+      }), /*#__PURE__*/_jsx(StackPage, {
+        name: "detail",
+        title: " Stack Detail",
+        children: children
+      })]
+    })
+  });
+}
+function Story() {
+  return /*#__PURE__*/_jsxs(Toolbar, {
+    children: [/*#__PURE__*/_jsx(ToolbarBackButton, {}), /*#__PURE__*/_jsx(ToolbarAutomaticTitleItem, {}), /*#__PURE__*/_jsx(ToolbarItem, {
+      children: /*#__PURE__*/_jsx(Chip, {
+        label: "Chip text"
+      })
+    }), /*#__PURE__*/_jsx(FillSpace, {}), /*#__PURE__*/_jsxs(ToolbarActions, {
+      children: [/*#__PURE__*/_jsx(Button, {
+        responsive: true,
+        startIcon: /*#__PURE__*/_jsx(ArrowRight, {}),
+        variant: "outlined",
+        children: "Secondary button"
+      }), /*#__PURE__*/_jsx(Button, {
+        responsive: true,
+        startIcon: /*#__PURE__*/_jsx(Save, {}),
+        children: "Primary button"
+      })]
+    })]
+  });
+}
+export default {
+  title: "components/toolbar/Toolbar"
+};
+export var _Toolbar = function _Toolbar() {
+  return /*#__PURE__*/_jsx(StackWrapper, {
+    children: /*#__PURE__*/_jsx(Story, {})
+  });
+};
+export var ToolbarWithHelp = function ToolbarWithHelp() {
+  return /*#__PURE__*/_jsx(Toolbar, {
+    scopeIndicator: /*#__PURE__*/_jsx(Chip, {
+      label: "Global"
+    }),
+    topBarActions: /*#__PURE__*/_jsx(HelpDialogButton, {
+      dialogTitle: /*#__PURE__*/_jsx(FormattedMessage, {
+        id: "story.toolbar.helpDialog.title",
+        defaultMessage: "Help"
+      }),
+      dialogDescription: /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Box, {
+          sx: {
+            width: 150,
+            height: 150
+          },
+          component: "img",
+          src: "https://picsum.photos/id/35/300/300"
+        }), /*#__PURE__*/_jsx(Typography, {
+          children: "This is some helpful text inside the help dialog."
+        })]
+      })
+    }),
+    children: /*#__PURE__*/_jsx(ToolbarItem, {
+      children: "Some title"
+    })
+  });
+};

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
+      })
+    });
+  }
+};