@backstage/plugin-home 0.7.3-next.1 → 0.7.4-next.0

package/dist/components/CustomHomepage/AddWidgetDialog.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddWidgetDialog.esm.js","sources":["../../../src/components/CustomHomepage/AddWidgetDialog.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Widget } from './types';\nimport List from '@material-ui/core/List';\nimport ListItem from '@material-ui/core/ListItem';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport DialogTitle from '@material-ui/core/DialogTitle';\nimport ListItemAvatar from '@material-ui/core/ListItemAvatar';\nimport AddIcon from '@material-ui/icons/Add';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport React from 'react';\nimport Typography from '@material-ui/core/Typography';\n\ninterface AddWidgetDialogProps {\n  widgets: Widget[];\n  handleAdd: (widget: Widget) => void;\n}\n\nconst getTitle = (widget: Widget) => {\n  return widget.title || widget.name;\n};\n\nexport const AddWidgetDialog = (props: AddWidgetDialogProps) => {\n  const { widgets, handleAdd } = props;\n  return (\n    <>\n      <DialogTitle>Add new widget to dashboard</DialogTitle>\n      <DialogContent>\n        <List dense>\n          {widgets.map(widget => {\n            return (\n              <ListItem\n                key={widget.name}\n                button\n                onClick={() => handleAdd(widget)}\n              >\n                <ListItemAvatar>\n                  <AddIcon />\n                </ListItemAvatar>\n                <ListItemText\n                  secondary={\n                    widget.description && (\n                      <Typography\n                        component=\"span\"\n                        variant=\"caption\"\n                        color=\"textPrimary\"\n                      >\n                        {widget.description}\n                      </Typography>\n                    )\n                  }\n                  primary={\n                    <Typography variant=\"body1\" color=\"textPrimary\">\n                      {getTitle(widget)}\n                    </Typography>\n                  }\n                />\n              </ListItem>\n            );\n          })}\n        </List>\n      </DialogContent>\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAgCA,MAAM,QAAA,GAAW,CAAC,MAAmB,KAAA;AACnC,EAAO,OAAA,MAAA,CAAO,SAAS,MAAO,CAAA,IAAA,CAAA;AAChC,CAAA,CAAA;AAEa,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAC/B,EAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,WAAY,EAAA,IAAA,EAAA,6BAA2B,CACxC,kBAAA,KAAA,CAAA,aAAA,CAAC,aACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,IAAK,EAAA,EAAA,KAAA,EAAK,IACR,EAAA,EAAA,OAAA,CAAQ,IAAI,CAAU,MAAA,KAAA;AACrB,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,KAAK,MAAO,CAAA,IAAA;AAAA,QACZ,MAAM,EAAA,IAAA;AAAA,QACN,OAAA,EAAS,MAAM,SAAA,CAAU,MAAM,CAAA;AAAA,OAAA;AAAA,sBAE9B,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAQ,CACX,CAAA;AAAA,sBACA,KAAA,CAAA,aAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,SAAA,EACE,OAAO,WACL,oBAAA,KAAA,CAAA,aAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,SAAU,EAAA,MAAA;AAAA,cACV,OAAQ,EAAA,SAAA;AAAA,cACR,KAAM,EAAA,aAAA;AAAA,aAAA;AAAA,YAEL,MAAO,CAAA,WAAA;AAAA,WACV;AAAA,UAGJ,OAAA,sCACG,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAQ,KAAM,EAAA,aAAA,EAAA,EAC/B,QAAS,CAAA,MAAM,CAClB,CAAA;AAAA,SAAA;AAAA,OAEJ;AAAA,KACF,CAAA;AAAA,GAEH,CACH,CACF,CACF,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/CustomHomepage/CustomHomepageButtons.esm.js

@@ -0,0 +1,90 @@
+import Button from '@material-ui/core/Button';
+import React from 'react';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import SaveIcon from '@material-ui/icons/Save';
+import DeleteIcon from '@material-ui/icons/Delete';
+import AddIcon from '@material-ui/icons/Add';
+import EditIcon from '@material-ui/icons/Edit';
+import CancelIcon from '@material-ui/icons/Cancel';
+
+const useStyles = makeStyles(
+  (theme) => createStyles({
+    contentHeaderBtn: {
+      marginLeft: theme.spacing(2)
+    },
+    widgetWrapper: {
+      "& > *:first-child": {
+        width: "100%",
+        height: "100%"
+      }
+    }
+  })
+);
+const CustomHomepageButtons = (props) => {
+  const {
+    editMode,
+    numWidgets,
+    clearLayout,
+    setAddWidgetDialogOpen,
+    changeEditMode,
+    defaultConfigAvailable,
+    restoreDefault
+  } = props;
+  const styles = useStyles();
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, !editMode && numWidgets > 0 ? /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "contained",
+      color: "primary",
+      onClick: () => changeEditMode(true),
+      size: "small",
+      startIcon: /* @__PURE__ */ React.createElement(EditIcon, null)
+    },
+    "Edit"
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null, defaultConfigAvailable && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "contained",
+      className: styles.contentHeaderBtn,
+      onClick: restoreDefault,
+      size: "small",
+      startIcon: /* @__PURE__ */ React.createElement(CancelIcon, null)
+    },
+    "Restore defaults"
+  ), numWidgets > 0 && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "contained",
+      color: "secondary",
+      className: styles.contentHeaderBtn,
+      onClick: clearLayout,
+      size: "small",
+      startIcon: /* @__PURE__ */ React.createElement(DeleteIcon, null)
+    },
+    "Clear all"
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "contained",
+      className: styles.contentHeaderBtn,
+      onClick: () => setAddWidgetDialogOpen(true),
+      size: "small",
+      startIcon: /* @__PURE__ */ React.createElement(AddIcon, null)
+    },
+    "Add widget"
+  ), numWidgets > 0 && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      className: styles.contentHeaderBtn,
+      variant: "contained",
+      color: "primary",
+      onClick: () => changeEditMode(false),
+      size: "small",
+      startIcon: /* @__PURE__ */ React.createElement(SaveIcon, null)
+    },
+    "Save"
+  )));
+};
+
+export { CustomHomepageButtons };
+//# sourceMappingURL=CustomHomepageButtons.esm.js.map

package/dist/components/CustomHomepage/CustomHomepageButtons.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomHomepageButtons.esm.js","sources":["../../../src/components/CustomHomepage/CustomHomepageButtons.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport Button from '@material-ui/core/Button';\nimport React from 'react';\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\nimport SaveIcon from '@material-ui/icons/Save';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport AddIcon from '@material-ui/icons/Add';\nimport EditIcon from '@material-ui/icons/Edit';\nimport CancelIcon from '@material-ui/icons/Cancel';\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    contentHeaderBtn: {\n      marginLeft: theme.spacing(2),\n    },\n    widgetWrapper: {\n      '& > *:first-child': {\n        width: '100%',\n        height: '100%',\n      },\n    },\n  }),\n);\n\ninterface CustomHomepageButtonsProps {\n  editMode: boolean;\n  numWidgets: number;\n  clearLayout: () => void;\n  setAddWidgetDialogOpen: (open: boolean) => void;\n  changeEditMode: (mode: boolean) => void;\n  defaultConfigAvailable: boolean;\n  restoreDefault: () => void;\n}\nexport const CustomHomepageButtons = (props: CustomHomepageButtonsProps) => {\n  const {\n    editMode,\n    numWidgets,\n    clearLayout,\n    setAddWidgetDialogOpen,\n    changeEditMode,\n    defaultConfigAvailable,\n    restoreDefault,\n  } = props;\n  const styles = useStyles();\n\n  return (\n    <>\n      {!editMode && numWidgets > 0 ? (\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          onClick={() => changeEditMode(true)}\n          size=\"small\"\n          startIcon={<EditIcon />}\n        >\n          Edit\n        </Button>\n      ) : (\n        <>\n          {defaultConfigAvailable && (\n            <Button\n              variant=\"contained\"\n              className={styles.contentHeaderBtn}\n              onClick={restoreDefault}\n              size=\"small\"\n              startIcon={<CancelIcon />}\n            >\n              Restore defaults\n            </Button>\n          )}\n          {numWidgets > 0 && (\n            <Button\n              variant=\"contained\"\n              color=\"secondary\"\n              className={styles.contentHeaderBtn}\n              onClick={clearLayout}\n              size=\"small\"\n              startIcon={<DeleteIcon />}\n            >\n              Clear all\n            </Button>\n          )}\n          <Button\n            variant=\"contained\"\n            className={styles.contentHeaderBtn}\n            onClick={() => setAddWidgetDialogOpen(true)}\n            size=\"small\"\n            startIcon={<AddIcon />}\n          >\n            Add widget\n          </Button>\n          {numWidgets > 0 && (\n            <Button\n              className={styles.contentHeaderBtn}\n              variant=\"contained\"\n              color=\"primary\"\n              onClick={() => changeEditMode(false)}\n              size=\"small\"\n              startIcon={<SaveIcon />}\n            >\n              Save\n            </Button>\n          )}\n        </>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAwBA,MAAM,SAAY,GAAA,UAAA;AAAA,EAAW,CAAC,UAC5B,YAAa,CAAA;AAAA,IACX,gBAAkB,EAAA;AAAA,MAChB,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,KAC7B;AAAA,IACA,aAAe,EAAA;AAAA,MACb,mBAAqB,EAAA;AAAA,QACnB,KAAO,EAAA,MAAA;AAAA,QACP,MAAQ,EAAA,MAAA;AAAA,OACV;AAAA,KACF;AAAA,GACD,CAAA;AACH,CAAA,CAAA;AAWa,MAAA,qBAAA,GAAwB,CAAC,KAAsC,KAAA;AAC1E,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,sBAAA;AAAA,IACA,cAAA;AAAA,IACA,sBAAA;AAAA,IACA,cAAA;AAAA,GACE,GAAA,KAAA,CAAA;AACJ,EAAA,MAAM,SAAS,SAAU,EAAA,CAAA;AAEzB,EAAA,uBAEK,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,CAAC,QAAY,IAAA,UAAA,GAAa,CACzB,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,WAAA;AAAA,MACR,KAAM,EAAA,SAAA;AAAA,MACN,OAAA,EAAS,MAAM,cAAA,CAAe,IAAI,CAAA;AAAA,MAClC,IAAK,EAAA,OAAA;AAAA,MACL,SAAA,sCAAY,QAAS,EAAA,IAAA,CAAA;AAAA,KAAA;AAAA,IACtB,MAAA;AAAA,GAED,6DAGG,sBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,WAAA;AAAA,MACR,WAAW,MAAO,CAAA,gBAAA;AAAA,MAClB,OAAS,EAAA,cAAA;AAAA,MACT,IAAK,EAAA,OAAA;AAAA,MACL,SAAA,sCAAY,UAAW,EAAA,IAAA,CAAA;AAAA,KAAA;AAAA,IACxB,kBAAA;AAAA,GAED,EAED,aAAa,CACZ,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,WAAA;AAAA,MACR,KAAM,EAAA,WAAA;AAAA,MACN,WAAW,MAAO,CAAA,gBAAA;AAAA,MAClB,OAAS,EAAA,WAAA;AAAA,MACT,IAAK,EAAA,OAAA;AAAA,MACL,SAAA,sCAAY,UAAW,EAAA,IAAA,CAAA;AAAA,KAAA;AAAA,IACxB,WAAA;AAAA,GAIH,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,WAAA;AAAA,MACR,WAAW,MAAO,CAAA,gBAAA;AAAA,MAClB,OAAA,EAAS,MAAM,sBAAA,CAAuB,IAAI,CAAA;AAAA,MAC1C,IAAK,EAAA,OAAA;AAAA,MACL,SAAA,sCAAY,OAAQ,EAAA,IAAA,CAAA;AAAA,KAAA;AAAA,IACrB,YAAA;AAAA,GAED,EACC,aAAa,CACZ,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAW,MAAO,CAAA,gBAAA;AAAA,MAClB,OAAQ,EAAA,WAAA;AAAA,MACR,KAAM,EAAA,SAAA;AAAA,MACN,OAAA,EAAS,MAAM,cAAA,CAAe,KAAK,CAAA;AAAA,MACnC,IAAK,EAAA,OAAA;AAAA,MACL,SAAA,sCAAY,QAAS,EAAA,IAAA,CAAA;AAAA,KAAA;AAAA,IACtB,MAAA;AAAA,GAIL,CAEJ,CAAA,CAAA;AAEJ;;;;"}

package/dist/components/CustomHomepage/CustomHomepageGrid.esm.js

@@ -0,0 +1,319 @@
+import React, { useMemo, useCallback } from 'react';
+import { WidthProvider, Responsive } from 'react-grid-layout';
+import { useElementFilter, useApi, storageApiRef, getComponentData } from '@backstage/core-plugin-api';
+import 'react-grid-layout/css/styles.css';
+import 'react-resizable/css/styles.css';
+import Dialog from '@material-ui/core/Dialog';
+import { makeStyles, createStyles, useTheme } from '@material-ui/core/styles';
+import { compact } from 'lodash';
+import useObservable from 'react-use/esm/useObservable';
+import { ContentHeader, ErrorBoundary } from '@backstage/core-components';
+import Typography from '@material-ui/core/Typography';
+import { WidgetSettingsOverlay } from './WidgetSettingsOverlay.esm.js';
+import { AddWidgetDialog } from './AddWidgetDialog.esm.js';
+import { CustomHomepageButtons } from './CustomHomepageButtons.esm.js';
+import { CustomHomepageGridStateV1Schema, LayoutConfigurationSchema, WidgetSchema } from './types.esm.js';
+
+const ResponsiveGrid = WidthProvider(Responsive);
+const useStyles = makeStyles(
+  (theme) => createStyles({
+    responsiveGrid: {
+      "& .react-grid-item > .react-resizable-handle:after": {
+        position: "absolute",
+        content: '""',
+        borderStyle: "solid",
+        borderWidth: "0 0 20px 20px",
+        borderColor: `transparent transparent ${theme.palette.primary.light} transparent`
+      }
+    },
+    contentHeaderBtn: {
+      marginLeft: theme.spacing(2)
+    },
+    widgetWrapper: {
+      '& > div[class*="MuiCard-root"]': {
+        width: "100%",
+        height: "100%"
+      },
+      '& div[class*="MuiCardContent-root"]': {
+        overflow: "auto"
+      },
+      "& + .react-grid-placeholder": {
+        backgroundColor: theme.palette.primary.light
+      },
+      "&.edit > :active": {
+        cursor: "move"
+      }
+    }
+  })
+);
+function useHomeStorage(defaultWidgets) {
+  const key = "home";
+  const storageApi = useApi(storageApiRef).forBucket("home.customHomepage");
+  const setWidgets = useCallback(
+    (value) => {
+      const grid = {
+        version: 1,
+        pages: {
+          default: value
+        }
+      };
+      storageApi.set(key, JSON.stringify(grid));
+    },
+    [key, storageApi]
+  );
+  const homeSnapshot = useObservable(
+    storageApi.observe$(key),
+    storageApi.snapshot(key)
+  );
+  const widgets = useMemo(() => {
+    if (homeSnapshot.presence === "absent") {
+      return defaultWidgets;
+    }
+    try {
+      const grid = JSON.parse(homeSnapshot.value);
+      return CustomHomepageGridStateV1Schema.parse(grid).pages.default;
+    } catch (e) {
+      return defaultWidgets;
+    }
+  }, [homeSnapshot, defaultWidgets]);
+  return [widgets, setWidgets];
+}
+const convertConfigToDefaultWidgets = (config, availableWidgets) => {
+  const ret = config.map((conf, i) => {
+    var _a, _b;
+    const c = LayoutConfigurationSchema.parse(conf);
+    const name = React.isValidElement(c.component) ? getComponentData(c.component, "core.extensionName") : c.component;
+    if (!name) {
+      return null;
+    }
+    const widget = availableWidgets.find((w) => w.name === name);
+    if (!widget) {
+      return null;
+    }
+    const widgetId = `${widget.name}__${i}${Math.random().toString(36).slice(2)}`;
+    return {
+      id: widgetId,
+      layout: {
+        i: widgetId,
+        x: c.x,
+        y: c.y,
+        w: Math.min((_a = widget.maxWidth) != null ? _a : Number.MAX_VALUE, c.width),
+        h: Math.min((_b = widget.maxHeight) != null ? _b : Number.MAX_VALUE, c.height),
+        minW: widget.minWidth,
+        maxW: widget.maxWidth,
+        minH: widget.minHeight,
+        maxH: widget.maxHeight,
+        isDraggable: false,
+        isResizable: false
+      },
+      settings: {},
+      movable: conf.movable,
+      deletable: conf.deletable,
+      resizable: conf.resizable
+    };
+  });
+  return compact(ret);
+};
+const availableWidgetsFilter = (elements) => {
+  return elements.selectByComponentData({
+    key: "core.extensionName"
+  }).getElements().flatMap((elem) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n;
+    const config = getComponentData(elem, "home.widget.config");
+    return [
+      WidgetSchema.parse({
+        component: elem,
+        name: getComponentData(elem, "core.extensionName"),
+        title: getComponentData(elem, "title"),
+        description: getComponentData(elem, "description"),
+        settingsSchema: (_a = config == null ? void 0 : config.settings) == null ? void 0 : _a.schema,
+        uiSchema: (_b = config == null ? void 0 : config.settings) == null ? void 0 : _b.uiSchema,
+        width: (_d = (_c = config == null ? void 0 : config.layout) == null ? void 0 : _c.width) == null ? void 0 : _d.defaultColumns,
+        minWidth: (_f = (_e = config == null ? void 0 : config.layout) == null ? void 0 : _e.width) == null ? void 0 : _f.minColumns,
+        maxWidth: (_h = (_g = config == null ? void 0 : config.layout) == null ? void 0 : _g.width) == null ? void 0 : _h.maxColumns,
+        height: (_j = (_i = config == null ? void 0 : config.layout) == null ? void 0 : _i.height) == null ? void 0 : _j.defaultRows,
+        minHeight: (_l = (_k = config == null ? void 0 : config.layout) == null ? void 0 : _k.height) == null ? void 0 : _l.minRows,
+        maxHeight: (_n = (_m = config == null ? void 0 : config.layout) == null ? void 0 : _m.height) == null ? void 0 : _n.maxRows
+      })
+    ];
+  });
+};
+const CustomHomepageGrid = (props) => {
+  var _a;
+  const styles = useStyles();
+  const theme = useTheme();
+  const availableWidgets = useElementFilter(
+    props.children,
+    availableWidgetsFilter,
+    [props]
+  );
+  const defaultLayout = useMemo(() => {
+    return props.config ? convertConfigToDefaultWidgets(props.config, availableWidgets) : [];
+  }, [props.config, availableWidgets]);
+  const [widgets, setWidgets] = useHomeStorage(defaultLayout);
+  const [addWidgetDialogOpen, setAddWidgetDialogOpen] = React.useState(false);
+  const editModeOn = widgets.find((w) => w.layout.isResizable) !== void 0;
+  const [editMode, setEditMode] = React.useState(editModeOn);
+  const getWidgetByName = (name) => {
+    return availableWidgets.find((widget) => widget.name === name);
+  };
+  const getWidgetNameFromKey = (key) => {
+    return key.split("__")[0];
+  };
+  const handleAdd = (widget) => {
+    var _a2, _b, _c, _d;
+    const widgetId = `${widget.name}__${widgets.length + 1}${Math.random().toString(36).slice(2)}`;
+    setWidgets([
+      ...widgets,
+      {
+        id: widgetId,
+        layout: {
+          i: widgetId,
+          x: 0,
+          y: Math.max(...widgets.map((w) => w.layout.y + w.layout.h)) + 1,
+          w: Math.min((_a2 = widget.maxWidth) != null ? _a2 : Number.MAX_VALUE, (_b = widget.width) != null ? _b : 12),
+          h: Math.min((_c = widget.maxHeight) != null ? _c : Number.MAX_VALUE, (_d = widget.height) != null ? _d : 4),
+          minW: widget.minWidth,
+          maxW: widget.maxWidth,
+          minH: widget.minHeight,
+          maxH: widget.maxHeight,
+          isResizable: editMode,
+          isDraggable: editMode
+        },
+        settings: {},
+        movable: widget.movable,
+        deletable: widget.deletable,
+        resizable: widget.resizable
+      }
+    ]);
+    setAddWidgetDialogOpen(false);
+  };
+  const handleRemove = (widgetId) => {
+    setWidgets(widgets.filter((w) => w.id !== widgetId));
+  };
+  const handleSettingsSave = (widgetId, widgetSettings) => {
+    const idx = widgets.findIndex((w) => w.id === widgetId);
+    if (idx >= 0) {
+      const widget = widgets[idx];
+      widget.settings = widgetSettings;
+      widgets[idx] = widget;
+      setWidgets(widgets);
+    }
+  };
+  const clearLayout = () => {
+    setWidgets([]);
+  };
+  const changeEditMode = (mode) => {
+    setEditMode(mode);
+    setWidgets(
+      widgets.map((w) => {
+        const resizable = w.resizable === false ? false : mode;
+        const movable = w.movable === false ? false : mode;
+        return {
+          ...w,
+          layout: { ...w.layout, isDraggable: movable, isResizable: resizable }
+        };
+      })
+    );
+  };
+  const handleLayoutChange = (newLayout, _) => {
+    if (editMode) {
+      const newWidgets = newLayout.map((l) => {
+        const widget = widgets.find((w) => w.id === l.i);
+        return {
+          ...widget,
+          layout: l
+        };
+      });
+      setWidgets(newWidgets);
+    }
+  };
+  const handleRestoreDefaultConfig = () => {
+    setWidgets(
+      defaultLayout.map((w) => {
+        const resizable = w.resizable === false ? false : editMode;
+        const movable = w.movable === false ? false : editMode;
+        return {
+          ...w,
+          layout: {
+            ...w.layout,
+            isDraggable: movable,
+            isResizable: resizable
+          }
+        };
+      })
+    );
+  };
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ContentHeader, { title: "" }, /* @__PURE__ */ React.createElement(
+    CustomHomepageButtons,
+    {
+      editMode,
+      numWidgets: widgets.length,
+      clearLayout,
+      setAddWidgetDialogOpen,
+      changeEditMode,
+      defaultConfigAvailable: props.config !== void 0,
+      restoreDefault: handleRestoreDefaultConfig
+    }
+  )), /* @__PURE__ */ React.createElement(
+    Dialog,
+    {
+      open: addWidgetDialogOpen,
+      onClose: () => setAddWidgetDialogOpen(false)
+    },
+    /* @__PURE__ */ React.createElement(AddWidgetDialog, { widgets: availableWidgets, handleAdd })
+  ), !editMode && widgets.length === 0 && /* @__PURE__ */ React.createElement(Typography, { variant: "h5", align: "center" }, "No widgets added. Start by clicking the 'Add widget' button."), /* @__PURE__ */ React.createElement(
+    ResponsiveGrid,
+    {
+      className: styles.responsiveGrid,
+      measureBeforeMount: true,
+      compactType: props.compactType,
+      style: props.style,
+      allowOverlap: props.allowOverlap,
+      preventCollision: props.preventCollision,
+      draggableCancel: ".overlayGridItem,.widgetSettingsDialog,.disabled",
+      containerPadding: props.containerPadding,
+      margin: props.containerMargin,
+      breakpoints: props.breakpoints ? props.breakpoints : theme.breakpoints.values,
+      cols: props.cols ? props.cols : { xl: 12, lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 },
+      rowHeight: (_a = props.rowHeight) != null ? _a : 60,
+      onLayoutChange: handleLayoutChange,
+      layouts: { xl: widgets.map((w) => w.layout) }
+    },
+    widgets.map((w) => {
+      var _a2;
+      const l = w.layout;
+      const widgetName = getWidgetNameFromKey(l.i);
+      const widget = getWidgetByName(widgetName);
+      if (!widget || !widget.component) {
+        return null;
+      }
+      const widgetProps = {
+        ...widget.component.props,
+        ...(_a2 = w.settings) != null ? _a2 : {}
+      };
+      return /* @__PURE__ */ React.createElement(
+        "div",
+        {
+          key: l.i,
+          className: `${styles.widgetWrapper} ${editMode && "edit"} ${w.movable === false && "disabled"}`
+        },
+        /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(widget.component.type, { ...widgetProps })),
+        editMode && /* @__PURE__ */ React.createElement(
+          WidgetSettingsOverlay,
+          {
+            id: l.i,
+            widget,
+            handleRemove,
+            handleSettingsSave,
+            settings: w.settings,
+            deletable: w.deletable
+          }
+        )
+      );
+    })
+  ));
+};
+
+export { CustomHomepageGrid };
+//# sourceMappingURL=CustomHomepageGrid.esm.js.map

package/dist/components/CustomHomepage/CustomHomepageGrid.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CustomHomepageGrid.esm.js","sources":["../../../src/components/CustomHomepage/CustomHomepageGrid.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useCallback, useMemo } from 'react';\nimport { Layout, Layouts, Responsive, WidthProvider } from 'react-grid-layout';\nimport {\n  ElementCollection,\n  getComponentData,\n  storageApiRef,\n  useApi,\n  useElementFilter,\n} from '@backstage/core-plugin-api';\nimport 'react-grid-layout/css/styles.css';\nimport 'react-resizable/css/styles.css';\nimport Dialog from '@material-ui/core/Dialog';\nimport {\n  createStyles,\n  makeStyles,\n  Theme,\n  useTheme,\n} from '@material-ui/core/styles';\nimport { compact } from 'lodash';\nimport useObservable from 'react-use/esm/useObservable';\nimport { ContentHeader, ErrorBoundary } from '@backstage/core-components';\nimport Typography from '@material-ui/core/Typography';\nimport { WidgetSettingsOverlay } from './WidgetSettingsOverlay';\nimport { AddWidgetDialog } from './AddWidgetDialog';\nimport { CustomHomepageButtons } from './CustomHomepageButtons';\nimport {\n  CustomHomepageGridProps,\n  CustomHomepageGridStateV1,\n  CustomHomepageGridStateV1Schema,\n  GridWidget,\n  LayoutConfiguration,\n  LayoutConfigurationSchema,\n  Widget,\n  WidgetSchema,\n} from './types';\nimport { CardConfig } from '@backstage/plugin-home-react';\n\n// eslint-disable-next-line new-cap\nconst ResponsiveGrid = WidthProvider(Responsive);\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    responsiveGrid: {\n      '& .react-grid-item > .react-resizable-handle:after': {\n        position: 'absolute',\n        content: '\"\"',\n        borderStyle: 'solid',\n        borderWidth: '0 0 20px 20px',\n        borderColor: `transparent transparent ${theme.palette.primary.light} transparent`,\n      },\n    },\n    contentHeaderBtn: {\n      marginLeft: theme.spacing(2),\n    },\n    widgetWrapper: {\n      '& > div[class*=\"MuiCard-root\"]': {\n        width: '100%',\n        height: '100%',\n      },\n      '& div[class*=\"MuiCardContent-root\"]': {\n        overflow: 'auto',\n      },\n      '& + .react-grid-placeholder': {\n        backgroundColor: theme.palette.primary.light,\n      },\n      '&.edit > :active': {\n        cursor: 'move',\n      },\n    },\n  }),\n);\n\nfunction useHomeStorage(\n  defaultWidgets: GridWidget[],\n): [GridWidget[], (value: GridWidget[]) => void] {\n  const key = 'home';\n  const storageApi = useApi(storageApiRef).forBucket('home.customHomepage');\n  // TODO: Support multiple home pages\n  const setWidgets = useCallback(\n    (value: GridWidget[]) => {\n      const grid: CustomHomepageGridStateV1 = {\n        version: 1,\n        pages: {\n          default: value,\n        },\n      };\n      storageApi.set(key, JSON.stringify(grid));\n    },\n    [key, storageApi],\n  );\n  const homeSnapshot = useObservable(\n    storageApi.observe$<string>(key),\n    storageApi.snapshot(key),\n  );\n  const widgets: GridWidget[] = useMemo(() => {\n    if (homeSnapshot.presence === 'absent') {\n      return defaultWidgets;\n    }\n    try {\n      const grid: CustomHomepageGridStateV1 = JSON.parse(homeSnapshot.value!);\n      return CustomHomepageGridStateV1Schema.parse(grid).pages.default;\n    } catch (e) {\n      return defaultWidgets;\n    }\n  }, [homeSnapshot, defaultWidgets]);\n\n  return [widgets, setWidgets];\n}\n\nconst convertConfigToDefaultWidgets = (\n  config: LayoutConfiguration[],\n  availableWidgets: Widget[],\n): GridWidget[] => {\n  const ret = config.map((conf, i) => {\n    const c = LayoutConfigurationSchema.parse(conf);\n    const name = React.isValidElement(c.component)\n      ? getComponentData(c.component, 'core.extensionName')\n      : (c.component as unknown as string);\n    if (!name) {\n      return null;\n    }\n    const widget = availableWidgets.find(w => w.name === name);\n    if (!widget) {\n      return null;\n    }\n    const widgetId = `${widget.name}__${i}${Math.random()\n      .toString(36)\n      .slice(2)}`;\n    return {\n      id: widgetId,\n      layout: {\n        i: widgetId,\n        x: c.x,\n        y: c.y,\n        w: Math.min(widget.maxWidth ?? Number.MAX_VALUE, c.width),\n        h: Math.min(widget.maxHeight ?? Number.MAX_VALUE, c.height),\n        minW: widget.minWidth,\n        maxW: widget.maxWidth,\n        minH: widget.minHeight,\n        maxH: widget.maxHeight,\n        isDraggable: false,\n        isResizable: false,\n      },\n      settings: {},\n      movable: conf.movable,\n      deletable: conf.deletable,\n      resizable: conf.resizable,\n    };\n  });\n  return compact(ret);\n};\n\nconst availableWidgetsFilter = (elements: ElementCollection) => {\n  return elements\n    .selectByComponentData({\n      key: 'core.extensionName',\n    })\n    .getElements<Widget>()\n    .flatMap(elem => {\n      const config = getComponentData<CardConfig>(elem, 'home.widget.config');\n      return [\n        WidgetSchema.parse({\n          component: elem,\n          name: getComponentData<string>(elem, 'core.extensionName'),\n          title: getComponentData<string>(elem, 'title'),\n          description: getComponentData<string>(elem, 'description'),\n          settingsSchema: config?.settings?.schema,\n          uiSchema: config?.settings?.uiSchema,\n          width: config?.layout?.width?.defaultColumns,\n          minWidth: config?.layout?.width?.minColumns,\n          maxWidth: config?.layout?.width?.maxColumns,\n          height: config?.layout?.height?.defaultRows,\n          minHeight: config?.layout?.height?.minRows,\n          maxHeight: config?.layout?.height?.maxRows,\n        }),\n      ];\n    });\n};\n\n/**\n * A component that allows customizing components in home grid layout.\n *\n * @public\n */\nexport const CustomHomepageGrid = (props: CustomHomepageGridProps) => {\n  const styles = useStyles();\n  const theme = useTheme();\n  const availableWidgets = useElementFilter(\n    props.children,\n    availableWidgetsFilter,\n    [props],\n  );\n  const defaultLayout = useMemo(() => {\n    return props.config\n      ? convertConfigToDefaultWidgets(props.config, availableWidgets)\n      : [];\n  }, [props.config, availableWidgets]);\n  const [widgets, setWidgets] = useHomeStorage(defaultLayout);\n  const [addWidgetDialogOpen, setAddWidgetDialogOpen] = React.useState(false);\n  const editModeOn = widgets.find(w => w.layout.isResizable) !== undefined;\n  const [editMode, setEditMode] = React.useState(editModeOn);\n  const getWidgetByName = (name: string) => {\n    return availableWidgets.find(widget => widget.name === name);\n  };\n\n  const getWidgetNameFromKey = (key: string) => {\n    return key.split('__')[0];\n  };\n\n  const handleAdd = (widget: Widget) => {\n    const widgetId = `${widget.name}__${widgets.length + 1}${Math.random()\n      .toString(36)\n      .slice(2)}`;\n\n    setWidgets([\n      ...widgets,\n      {\n        id: widgetId,\n        layout: {\n          i: widgetId,\n          x: 0,\n          y: Math.max(...widgets.map(w => w.layout.y + w.layout.h)) + 1,\n          w: Math.min(widget.maxWidth ?? Number.MAX_VALUE, widget.width ?? 12),\n          h: Math.min(widget.maxHeight ?? Number.MAX_VALUE, widget.height ?? 4),\n          minW: widget.minWidth,\n          maxW: widget.maxWidth,\n          minH: widget.minHeight,\n          maxH: widget.maxHeight,\n          isResizable: editMode,\n          isDraggable: editMode,\n        },\n        settings: {},\n        movable: widget.movable,\n        deletable: widget.deletable,\n        resizable: widget.resizable,\n      },\n    ]);\n    setAddWidgetDialogOpen(false);\n  };\n\n  const handleRemove = (widgetId: string) => {\n    setWidgets(widgets.filter(w => w.id !== widgetId));\n  };\n\n  const handleSettingsSave = (\n    widgetId: string,\n    widgetSettings: Record<string, any>,\n  ) => {\n    const idx = widgets.findIndex(w => w.id === widgetId);\n    if (idx >= 0) {\n      const widget = widgets[idx];\n      widget.settings = widgetSettings;\n      widgets[idx] = widget;\n      setWidgets(widgets);\n    }\n  };\n\n  const clearLayout = () => {\n    setWidgets([]);\n  };\n\n  const changeEditMode = (mode: boolean) => {\n    setEditMode(mode);\n    setWidgets(\n      widgets.map(w => {\n        const resizable = w.resizable === false ? false : mode;\n        const movable = w.movable === false ? false : mode;\n        return {\n          ...w,\n          layout: { ...w.layout, isDraggable: movable, isResizable: resizable },\n        };\n      }),\n    );\n  };\n\n  const handleLayoutChange = (newLayout: Layout[], _: Layouts) => {\n    if (editMode) {\n      const newWidgets = newLayout.map(l => {\n        const widget = widgets.find(w => w.id === l.i);\n        return {\n          ...widget,\n          layout: l,\n        } as GridWidget;\n      });\n      setWidgets(newWidgets);\n    }\n  };\n\n  const handleRestoreDefaultConfig = () => {\n    setWidgets(\n      defaultLayout.map(w => {\n        const resizable = w.resizable === false ? false : editMode;\n        const movable = w.movable === false ? false : editMode;\n        return {\n          ...w,\n          layout: {\n            ...w.layout,\n            isDraggable: movable,\n            isResizable: resizable,\n          },\n        };\n      }),\n    );\n  };\n\n  return (\n    <>\n      <ContentHeader title=\"\">\n        <CustomHomepageButtons\n          editMode={editMode}\n          numWidgets={widgets.length}\n          clearLayout={clearLayout}\n          setAddWidgetDialogOpen={setAddWidgetDialogOpen}\n          changeEditMode={changeEditMode}\n          defaultConfigAvailable={props.config !== undefined}\n          restoreDefault={handleRestoreDefaultConfig}\n        />\n      </ContentHeader>\n      <Dialog\n        open={addWidgetDialogOpen}\n        onClose={() => setAddWidgetDialogOpen(false)}\n      >\n        <AddWidgetDialog widgets={availableWidgets} handleAdd={handleAdd} />\n      </Dialog>\n      {!editMode && widgets.length === 0 && (\n        <Typography variant=\"h5\" align=\"center\">\n          No widgets added. Start by clicking the 'Add widget' button.\n        </Typography>\n      )}\n      <ResponsiveGrid\n        className={styles.responsiveGrid}\n        measureBeforeMount\n        compactType={props.compactType}\n        style={props.style}\n        allowOverlap={props.allowOverlap}\n        preventCollision={props.preventCollision}\n        draggableCancel=\".overlayGridItem,.widgetSettingsDialog,.disabled\"\n        containerPadding={props.containerPadding}\n        margin={props.containerMargin}\n        breakpoints={\n          props.breakpoints ? props.breakpoints : theme.breakpoints.values\n        }\n        cols={\n          props.cols\n            ? props.cols\n            : { xl: 12, lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }\n        }\n        rowHeight={props.rowHeight ?? 60}\n        onLayoutChange={handleLayoutChange}\n        layouts={{ xl: widgets.map(w => w.layout) }}\n      >\n        {widgets.map((w: GridWidget) => {\n          const l = w.layout;\n          const widgetName = getWidgetNameFromKey(l.i);\n          const widget = getWidgetByName(widgetName);\n          if (!widget || !widget.component) {\n            return null;\n          }\n\n          const widgetProps = {\n            ...widget.component.props,\n            ...(w.settings ?? {}),\n          };\n\n          return (\n            <div\n              key={l.i}\n              className={`${styles.widgetWrapper} ${editMode && 'edit'} ${\n                w.movable === false && 'disabled'\n              }`}\n            >\n              <ErrorBoundary>\n                <widget.component.type {...widgetProps} />\n              </ErrorBoundary>\n              {editMode && (\n                <WidgetSettingsOverlay\n                  id={l.i}\n                  widget={widget}\n                  handleRemove={handleRemove}\n                  handleSettingsSave={handleSettingsSave}\n                  settings={w.settings}\n                  deletable={w.deletable}\n                />\n              )}\n            </div>\n          );\n        })}\n      </ResponsiveGrid>\n    </>\n  );\n};\n"],"names":["_a"],"mappings":"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"}

package/dist/components/CustomHomepage/WidgetSettingsOverlay.esm.js

@@ -0,0 +1,88 @@
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import Grid from '@material-ui/core/Grid';
+import Tooltip from '@material-ui/core/Tooltip';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import SettingsIcon from '@material-ui/icons/Settings';
+import DeleteIcon from '@material-ui/icons/Delete';
+import React from 'react';
+import { withTheme } from '@rjsf/core';
+import { Theme } from '@rjsf/material-ui';
+import validator from '@rjsf/validator-ajv8';
+
+const Form = withTheme(Theme);
+const useStyles = makeStyles(
+  (theme) => createStyles({
+    iconGrid: {
+      height: "100%",
+      "& *": {
+        padding: 0
+      }
+    },
+    settingsOverlay: {
+      position: "absolute",
+      backgroundColor: "rgba(40, 40, 40, 0.93)",
+      width: "100%",
+      height: "100%",
+      top: 0,
+      left: 0,
+      padding: theme.spacing(2),
+      color: "white"
+    }
+  })
+);
+const WidgetSettingsOverlay = (props) => {
+  const { id, widget, settings, handleRemove, handleSettingsSave, deletable } = props;
+  const [settingsDialogOpen, setSettingsDialogOpen] = React.useState(false);
+  const styles = useStyles();
+  return /* @__PURE__ */ React.createElement("div", { className: styles.settingsOverlay }, widget.settingsSchema && /* @__PURE__ */ React.createElement(
+    Dialog,
+    {
+      open: settingsDialogOpen,
+      className: "widgetSettingsDialog",
+      onClose: () => setSettingsDialogOpen(false)
+    },
+    /* @__PURE__ */ React.createElement(DialogContent, null, /* @__PURE__ */ React.createElement(
+      Form,
+      {
+        validator,
+        showErrorList: false,
+        schema: widget.settingsSchema,
+        uiSchema: widget.uiSchema,
+        noHtml5Validate: true,
+        formData: settings,
+        formContext: { settings },
+        onSubmit: ({ formData, errors }) => {
+          if (errors.length === 0) {
+            handleSettingsSave(id, formData);
+            setSettingsDialogOpen(false);
+          }
+        },
+        experimental_defaultFormStateBehavior: {
+          allOf: "populateDefaults"
+        }
+      }
+    ))
+  ), /* @__PURE__ */ React.createElement(
+    Grid,
+    {
+      container: true,
+      className: styles.iconGrid,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    widget.settingsSchema && /* @__PURE__ */ React.createElement(Grid, { item: true, className: "overlayGridItem" }, /* @__PURE__ */ React.createElement(Tooltip, { title: "Edit settings" }, /* @__PURE__ */ React.createElement(
+      IconButton,
+      {
+        color: "primary",
+        onClick: () => setSettingsDialogOpen(true)
+      },
+      /* @__PURE__ */ React.createElement(SettingsIcon, { fontSize: "large" })
+    ))),
+    deletable !== false && /* @__PURE__ */ React.createElement(Grid, { item: true, className: "overlayGridItem" }, /* @__PURE__ */ React.createElement(Tooltip, { title: "Delete widget" }, /* @__PURE__ */ React.createElement(IconButton, { color: "secondary", onClick: () => handleRemove(id) }, /* @__PURE__ */ React.createElement(DeleteIcon, { fontSize: "large" }))))
+  ));
+};
+
+export { WidgetSettingsOverlay };
+//# sourceMappingURL=WidgetSettingsOverlay.esm.js.map

package/dist/components/CustomHomepage/WidgetSettingsOverlay.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WidgetSettingsOverlay.esm.js","sources":["../../../src/components/CustomHomepage/WidgetSettingsOverlay.tsx"],"sourcesContent":["/*\n * Copyright 2023 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport Dialog from '@material-ui/core/Dialog';\nimport DialogContent from '@material-ui/core/DialogContent';\nimport Grid from '@material-ui/core/Grid';\nimport Tooltip from '@material-ui/core/Tooltip';\nimport { createStyles, makeStyles, Theme } from '@material-ui/core/styles';\nimport IconButton from '@material-ui/core/IconButton';\nimport SettingsIcon from '@material-ui/icons/Settings';\nimport DeleteIcon from '@material-ui/icons/Delete';\nimport React from 'react';\nimport { Widget } from './types';\nimport { withTheme } from '@rjsf/core';\nimport { Theme as MuiTheme } from '@rjsf/material-ui';\nimport validator from '@rjsf/validator-ajv8';\n\nconst Form = withTheme(MuiTheme);\n\nconst useStyles = makeStyles((theme: Theme) =>\n  createStyles({\n    iconGrid: {\n      height: '100%',\n      '& *': {\n        padding: 0,\n      },\n    },\n    settingsOverlay: {\n      position: 'absolute',\n      backgroundColor: 'rgba(40, 40, 40, 0.93)',\n      width: '100%',\n      height: '100%',\n      top: 0,\n      left: 0,\n      padding: theme.spacing(2),\n      color: 'white',\n    },\n  }),\n);\ninterface WidgetSettingsOverlayProps {\n  id: string;\n  widget: Widget;\n  handleRemove: (id: string) => void;\n  handleSettingsSave: (id: string, settings: Record<string, any>) => void;\n  settings?: Record<string, any>;\n  deletable?: boolean;\n}\n\nexport const WidgetSettingsOverlay = (props: WidgetSettingsOverlayProps) => {\n  const { id, widget, settings, handleRemove, handleSettingsSave, deletable } =\n    props;\n  const [settingsDialogOpen, setSettingsDialogOpen] = React.useState(false);\n  const styles = useStyles();\n\n  return (\n    <div className={styles.settingsOverlay}>\n      {widget.settingsSchema && (\n        <Dialog\n          open={settingsDialogOpen}\n          className=\"widgetSettingsDialog\"\n          onClose={() => setSettingsDialogOpen(false)}\n        >\n          <DialogContent>\n            <Form\n              validator={validator}\n              showErrorList={false}\n              schema={widget.settingsSchema}\n              uiSchema={widget.uiSchema}\n              noHtml5Validate\n              formData={settings}\n              formContext={{ settings }}\n              onSubmit={({ formData, errors }) => {\n                if (errors.length === 0) {\n                  handleSettingsSave(id, formData);\n                  setSettingsDialogOpen(false);\n                }\n              }}\n              experimental_defaultFormStateBehavior={{\n                allOf: 'populateDefaults',\n              }}\n            />\n          </DialogContent>\n        </Dialog>\n      )}\n      <Grid\n        container\n        className={styles.iconGrid}\n        alignItems=\"center\"\n        justifyContent=\"center\"\n      >\n        {widget.settingsSchema && (\n          <Grid item className=\"overlayGridItem\">\n            <Tooltip title=\"Edit settings\">\n              <IconButton\n                color=\"primary\"\n                onClick={() => setSettingsDialogOpen(true)}\n              >\n                <SettingsIcon fontSize=\"large\" />\n              </IconButton>\n            </Tooltip>\n          </Grid>\n        )}\n        {deletable !== false && (\n          <Grid item className=\"overlayGridItem\">\n            <Tooltip title=\"Delete widget\">\n              <IconButton color=\"secondary\" onClick={() => handleRemove(id)}>\n                <DeleteIcon fontSize=\"large\" />\n              </IconButton>\n            </Tooltip>\n          </Grid>\n        )}\n      </Grid>\n    </div>\n  );\n};\n"],"names":["MuiTheme"],"mappings":"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"}

package/dist/components/CustomHomepage/types.esm.js

@@ -0,0 +1,48 @@
+import { z } from 'zod';
+
+const RSJFTypeSchema = z.any();
+const RSJFTypeUiSchema = z.any();
+const ReactElementSchema = z.any();
+const LayoutSchema = z.any();
+const LayoutConfigurationSchema = z.object({
+  component: ReactElementSchema,
+  x: z.number().nonnegative("x must be positive number"),
+  y: z.number().nonnegative("y must be positive number"),
+  width: z.number().positive("width must be positive number"),
+  height: z.number().positive("height must be positive number"),
+  movable: z.boolean().optional(),
+  deletable: z.boolean().optional(),
+  resizable: z.boolean().optional()
+});
+const WidgetSchema = z.object({
+  name: z.string(),
+  title: z.string().optional(),
+  description: z.string().optional(),
+  component: ReactElementSchema,
+  width: z.number().positive("width must be positive number").optional(),
+  height: z.number().positive("height must be positive number").optional(),
+  minWidth: z.number().positive("minWidth must be positive number").optional(),
+  maxWidth: z.number().positive("maxWidth must be positive number").optional(),
+  minHeight: z.number().positive("minHeight must be positive number").optional(),
+  maxHeight: z.number().positive("maxHeight must be positive number").optional(),
+  settingsSchema: RSJFTypeSchema.optional(),
+  uiSchema: RSJFTypeUiSchema.optional(),
+  movable: z.boolean().optional(),
+  deletable: z.boolean().optional(),
+  resizable: z.boolean().optional()
+});
+const GridWidgetSchema = z.object({
+  id: z.string(),
+  layout: LayoutSchema,
+  settings: z.record(z.string(), z.any()),
+  movable: z.boolean().optional(),
+  deletable: z.boolean().optional(),
+  resizable: z.boolean().optional()
+});
+const CustomHomepageGridStateV1Schema = z.object({
+  version: z.literal(1),
+  pages: z.record(z.string(), z.array(GridWidgetSchema))
+});
+
+export { CustomHomepageGridStateV1Schema, LayoutConfigurationSchema, WidgetSchema };
+//# sourceMappingURL=types.esm.js.map