@pingux/astro 2.238.0-alpha.0 → 2.239.0-alpha.0

package/lib/cjs/recipes/ListAndPanel.stories.js

@@ -1,536 +0,0 @@
-"use strict";
-
-var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.OverlayPanelHeader = exports.ListElement = exports.ListAndPanel = void 0;
-var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
-var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
-var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactAria = require("react-aria");
-var _reactStately = require("react-stately");
-var _AccountIcon = _interopRequireDefault(require("@pingux/mdi-react/AccountIcon"));
-var _ChevronRightIcon = _interopRequireDefault(require("@pingux/mdi-react/ChevronRightIcon"));
-var _PlusIcon = _interopRequireDefault(require("@pingux/mdi-react/PlusIcon"));
-var _hooks = require("../hooks");
-var _index = require("../index");
-var _figmaLinks = require("../utils/designUtils/figmaLinks");
-var _UserImage = _interopRequireDefault(require("../utils/devUtils/assets/UserImage.png"));
-var _items = require("./items");
-var _PanelContent = require("./PanelContent.stories");
-var _react2 = require("@emotion/react");
-function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var _default = exports["default"] = {
-  title: 'Recipes/List And Panel',
-  parameters: {
-    docs: {
-      source: {
-        type: 'code'
-      }
-    }
-  }
-};
-var sx = {
-  wrapper: {
-    px: 'lg',
-    py: 'lg',
-    bg: 'accent.99',
-    height: '900px'
-  },
-  separator: {
-    bg: 'accent.90'
-  },
-  tabsWrapper: {
-    px: 'lg',
-    pt: 'xs'
-  },
-  iconButton: {
-    position: 'absolute',
-    top: 0,
-    right: 0
-  },
-  panelHeader: {
-    container: {
-      bg: 'accent.99',
-      minHeight: 58,
-      ml: 0,
-      pl: 14,
-      pr: 'xs'
-    },
-    controls: {
-      alignSelf: 'center',
-      ml: 'auto',
-      pr: 'sm'
-    },
-    data: {
-      alignItems: 'center'
-    },
-    subtitle: {
-      alignSelf: 'start',
-      fontSize: 'sm',
-      lineHeight: '16px',
-      my: '1px'
-    },
-    title: {
-      alignSelf: 'start',
-      fontSize: 'md'
-    },
-    wrapper: {
-      cursor: 'pointer',
-      display: 'flex',
-      flex: '1 1 0px',
-      ml: 'md'
-    }
-  }
-};
-var heading = 'Users';
-var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
-var title = (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
-  align: "center",
-  isRow: true,
-  mb: "xs",
-  role: "heading",
-  "aria-level": "1"
-}, (0, _react2.jsx)(_index.Text, {
-  fontSize: "xx",
-  fontWeight: 3,
-  fontColor: "text.primary"
-}, heading), (0, _react2.jsx)(_index.IconButton, {
-  "aria-label": "icon button",
-  ml: "sm",
-  variant: "inverted"
-}, (0, _react2.jsx)(_index.Icon, {
-  icon: _PlusIcon["default"],
-  size: "sm"
-}))), (0, _react2.jsx)(_index.Text, null, (0, _react2.jsx)(_index.Text, {
-  fontSize: "sm",
-  color: "text.secondary",
-  fontWeight: 0,
-  width: "800px",
-  display: "contents"
-}, description), (0, _react2.jsx)(_index.Link, {
-  href: "https://uilibrary.ping-eng.com/",
-  sx: {
-    fontSize: '13px'
-  }
-}, " Learn more")));
-var ListAndPanel = exports.ListAndPanel = function ListAndPanel() {
-  var _context, _context2, _context4, _context5, _context6;
-  /* Example of items data structure
-  const items = [
-    {
-      email: 'dburkitt5@columbia.edu',
-      firstName: 'Nicola',
-      lastName: 'Burkitt',
-      icon: AccountIcon,
-    },
-  ] */
-
-  var _useState = (0, _react.useState)(),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    selectedItemId = _useState2[0],
-    setSelectedItemId = _useState2[1];
-  var _useState3 = (0, _react.useState)(),
-    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
-    selectedKeys = _useState4[0],
-    setSelectedKeys = _useState4[1];
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
-    isEditPanel = _useState6[0],
-    setEditPanel = _useState6[1];
-  var _useOverlayPanelState = (0, _hooks.useOverlayPanelState)(),
-    panelState = _useOverlayPanelState.state,
-    onPanelClose = _useOverlayPanelState.onClose;
-  var panelTriggerRef = (0, _react.useRef)();
-  var closePanelHandler = function closePanelHandler() {
-    onPanelClose(panelState, panelTriggerRef);
-    setSelectedItemId(-1);
-    setSelectedKeys([]);
-    setEditPanel(false);
-  };
-  var selectItemHandler = function selectItemHandler(e) {
-    if (e.size) {
-      setSelectedItemId((0, _findIndex["default"])(_items.items).call(_items.items, function (item) {
-        return item.email === e.currentKey;
-      }));
-      setSelectedKeys([e.currentKey]);
-      setEditPanel(false);
-      panelState.open();
-    } else {
-      closePanelHandler();
-    }
-  };
-  var renderProfileTab = selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    gap: "md",
-    mb: "20px"
-  }, (0, _map["default"])(_items.colorBlockButtons).call(_items.colorBlockButtons, function (tileData) {
-    return (0, _react2.jsx)(_PanelContent.ColorBlockButton, {
-      buttonData: tileData,
-      key: "".concat(tileData.text, "-key")
-    });
-  })), (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    justifyContent: "space-between"
-  }, (0, _react2.jsx)(_index.AccordionGroup, {
-    defaultExpandedKeys: (0, _map["default"])(_context = (0, _keys["default"])(_items.personalData)).call(_context, function (item) {
-      return _items.personalData[item].key;
-    }),
-    labelHeadingTag: "h2"
-  }, (0, _map["default"])(_context2 = (0, _keys["default"])(_items.personalData)).call(_context2, function (item) {
-    var _context3;
-    return (0, _react2.jsx)(_reactStately.Item, {
-      "data-id": _items.personalData[item].label,
-      key: _items.personalData[item].key,
-      label: _items.personalData[item].label,
-      textValue: _items.personalData[item].label
-    }, _items.personalData[item].image ? (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      gap: "md"
-    }, (0, _react2.jsx)(_index.Image, {
-      src: _UserImage["default"],
-      alt: "user"
-    }), (0, _react2.jsx)(_index.LabelValuePairs, null, _items.personalData[item].rows)) : (0, _react2.jsx)(_index.LabelValuePairs, null, _items.personalData[item].rows), _items.personalData[item].badges && (0, _react2.jsx)(_index.Box, {
-      isRow: true,
-      gap: "sm"
-    }, (0, _map["default"])(_context3 = _items.personalData[item].badges).call(_context3, function (badge) {
-      return (0, _react2.jsx)(_index.Badge, {
-        label: badge,
-        variant: "defaultBadge",
-        key: "".concat(badge, "-key")
-      });
-    })));
-  })), (0, _react2.jsx)(_index.EditButton, {
-    size: "lg",
-    onPress: function onPress() {
-      return setEditPanel(!isEditPanel);
-    }
-  })));
-  var tabs = [{
-    name: 'Profile',
-    children: renderProfileTab
-  }, {
-    name: 'Groups',
-    children: 'Groups'
-  }, {
-    name: 'Roles',
-    children: 'Roles'
-  }, {
-    name: 'Services',
-    list: [{
-      key: 'service1',
-      name: 'Service 1',
-      children: 'Service 1',
-      role: 'listitem'
-    }, {
-      key: 'service2',
-      name: 'Service 2',
-      children: 'Service 2',
-      role: 'listitem'
-    }]
-  }, {
-    name: 'API',
-    children: 'API'
-  }];
-  var renderDisplayPanel = selectedItemId >= 0 && (0, _react2.jsx)(_index.Box, {
-    sx: sx.tabsWrapper
-  }, (0, _react2.jsx)(_index.Tabs, {
-    items: tabs,
-    mode: "list",
-    tabListProps: {
-      justifyContent: 'center',
-      mb: 'lg'
-    },
-    tabPanelProps: {
-      sx: {
-        position: 'relative'
-      }
-    }
-  }, function (item) {
-    return (0, _react2.jsx)(_index.Tab, (0, _extends2["default"])({
-      key: item.name,
-      title: item.name
-    }, item), item.children);
-  }));
-  var renderHeader = function renderHeader() {
-    var selectedItem = _items.items[selectedItemId];
-    if (selectedItem) {
-      var data = {
-        fname: selectedItem.firstName,
-        lname: selectedItem.lastName,
-        subtext: selectedItem.email,
-        icon: selectedItem.icon,
-        personalInfo: {
-          image: _items.personalData.personalInfo.image
-        }
-      };
-      return (0, _react2.jsx)(OverlayPanelHeader, {
-        headerData: data,
-        isEditPanel: isEditPanel,
-        closePanelHandler: closePanelHandler
-      });
-    }
-    return null;
-  };
-  var renderEditPanel = selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
-    p: "lg",
-    pb: "50px"
-  }, (0, _react2.jsx)(_index.Box, {
-    gap: "md",
-    mb: "20px",
-    width: "500px"
-  }, (0, _react2.jsx)(_index.TextField, {
-    defaultValue: "ednepomuceno",
-    isRequired: true,
-    label: "Username"
-  }), (0, _react2.jsx)(_index.SelectField, {
-    label: "Population",
-    isRequired: true,
-    defaultSelectedKey: "population"
-  }, (0, _react2.jsx)(_reactStately.Item, {
-    key: "population"
-  }, "Denver"))), (0, _react2.jsx)(_index.AccordionGroup, {
-    defaultExpandedKeys: (0, _concat["default"])(_context4 = []).call(_context4, (0, _map["default"])(_context5 = (0, _keys["default"])(_items.editData)).call(_context5, function (item) {
-      return _items.editData[item].key;
-    }), ['preferencesKey', 'customAttributesKey', 'jsonAttributesKey']),
-    labelHeadingTag: "h2"
-  }, (0, _map["default"])(_context6 = (0, _keys["default"])(_items.editData)).call(_context6, function (item) {
-    var _context7;
-    return (0, _react2.jsx)(_reactStately.Item, {
-      "data-id": _items.editData[item].label,
-      key: _items.editData[item].key,
-      label: _items.editData[item].label,
-      textValue: _items.editData[item].label
-    }, (0, _react2.jsx)(_index.Box, {
-      gap: "md",
-      width: "500px"
-    }, _items.editData[item].image && (0, _react2.jsx)(_index.ImageUploadField, {
-      label: "Photo",
-      previewHeight: 40,
-      previewWidth: 40,
-      previewImage: _UserImage["default"]
-    }), (0, _map["default"])(_context7 = _items.editData[item].fields).call(_context7, function (_ref) {
-      var label = _ref.label,
-        value = _ref.value,
-        slot = _ref.slot;
-      return (0, _react2.jsx)(_index.Box, {
-        key: "".concat(label, "-key")
-      }, (0, _react2.jsx)(_index.TextField, {
-        label: label,
-        defaultValue: value
-      }), slot);
-    })));
-  }), (0, _react2.jsx)(_reactStately.Item, {
-    "data-id": "preferences",
-    key: "preferencesKey",
-    label: "Preferences",
-    textValue: "Preferences"
-  }, (0, _react2.jsx)(_index.Box, {
-    gap: "md",
-    width: "500px"
-  }, (0, _react2.jsx)(_index.SelectField, {
-    label: "Preferred Language",
-    defaultSelectedKey: "language"
-  }, (0, _react2.jsx)(_reactStately.Item, {
-    key: "language"
-  }, "Select a Language")), (0, _react2.jsx)(_index.SelectField, {
-    label: "Locale",
-    defaultSelectedKey: "language"
-  }, (0, _react2.jsx)(_reactStately.Item, {
-    key: "language"
-  }, "Select a locale")), (0, _react2.jsx)(_index.SelectField, {
-    label: "Timezone",
-    defaultSelectedKey: "language"
-  }, (0, _react2.jsx)(_reactStately.Item, {
-    key: "language"
-  }, "Select a timezone")))), (0, _react2.jsx)(_reactStately.Item, {
-    "data-id": "customAttributes",
-    key: "customAttributesKey",
-    label: "Custom Attributes",
-    textValue: "Custom Attributes"
-  }, (0, _react2.jsx)(_PanelContent.AddAttributeButton, null), (0, _react2.jsx)(_index.Text, {
-    fontWeight: "-1",
-    fontSize: "md",
-    textAlign: "center"
-  }, "Click + Add to select a custom attribute")), (0, _react2.jsx)(_reactStately.Item, {
-    "data-id": "jsonAttributes",
-    key: "jsonAttributesKey",
-    label: "JSON Attributes",
-    textValue: "JSON Attributes"
-  }, (0, _react2.jsx)(_PanelContent.AddAttributeButton, null), (0, _react2.jsx)(_index.Text, {
-    fontWeight: "-1",
-    fontSize: "md",
-    textAlign: "center"
-  }, "Click + Add to select a JSON attribute")))), (0, _react2.jsx)(_index.ButtonBar, {
-    sx: {
-      position: 'fixed',
-      bottom: '0',
-      width: '100%'
-    }
-  }, (0, _react2.jsx)(_index.Button, {
-    variant: "primary",
-    onPress: function onPress() {
-      return setEditPanel(!isEditPanel);
-    }
-  }, "Save"), (0, _react2.jsx)(_index.Button, {
-    variant: "link",
-    onPress: function onPress() {
-      return setEditPanel(!isEditPanel);
-    }
-  }, "Cancel")));
-  return (0, _react2.jsx)(_index.Box, {
-    sx: sx.wrapper
-  }, title, (0, _react2.jsx)(_index.SearchField, {
-    position: "fixed",
-    mb: "lg",
-    mt: "lg",
-    width: "400px",
-    placeholder: "Search",
-    "aria-label": "search"
-  }), (0, _react2.jsx)(_index.Separator, {
-    margin: 0
-  }), (0, _react2.jsx)(_index.ListView, {
-    items: _items.items,
-    onSelectionChange: selectItemHandler,
-    ref: panelTriggerRef,
-    selectedKeys: selectedKeys
-  }, function (item) {
-    var _context8;
-    return (0, _react2.jsx)(_reactStately.Item, {
-      key: item.email
-    }, (0, _react2.jsx)(ListElement, {
-      data: {
-        text: (0, _concat["default"])(_context8 = "".concat(item.lastName, ", ")).call(_context8, item.firstName),
-        subtext: item.email,
-        icon: item.icon
-      }
-    }));
-  }), (0, _react2.jsx)(_index.OverlayPanel, {
-    isOpen: panelState.isOpen,
-    state: panelState,
-    triggerRef: panelTriggerRef,
-    p: 0,
-    size: "large"
-  }, panelState.isOpen && (0, _react2.jsx)(_reactAria.FocusScope, {
-    contain: true,
-    restoreFocus: true,
-    autoFocus: true
-  }, renderHeader(), isEditPanel ? renderEditPanel : renderDisplayPanel)));
-};
-ListAndPanel.parameters = {
-  design: {
-    type: 'figma',
-    url: _figmaLinks.FIGMA_LINKS.listAndPanel.listAndPanel
-  },
-  a11y: {
-    config: {
-      rules: [{
-        id: 'color-contrast',
-        enabled: false
-      }] // Added to bypass color contrast issue due to virtualizer
-    }
-  }
-};
-var ListElement = exports.ListElement = function ListElement(_ref2) {
-  var _ref2$data = _ref2.data,
-    data = _ref2$data === void 0 ? {
-      subtext: 'dburkitt5@columbia.edu',
-      text: 'Burkitt, Nicola',
-      icon: _AccountIcon["default"]
-    } : _ref2$data;
-  var listItemRef = (0, _react.useRef)();
-  var _useOverlappingMenuHo = (0, _hooks.useOverlappingMenuHoverState)({
-      listItemRef: listItemRef
-    }),
-    handleHoverEnd = _useOverlappingMenuHo.handleHoverEnd,
-    handleHoverStart = _useOverlappingMenuHo.handleHoverStart,
-    handleMenuHoverEnd = _useOverlappingMenuHo.handleMenuHoverEnd,
-    handleMouseMove = _useOverlappingMenuHo.handleMouseMove,
-    isHovered = _useOverlappingMenuHo.isHovered;
-  return (0, _react2.jsx)(_index.ListViewItem, {
-    data: data,
-    isHovered: isHovered,
-    onHoverEnd: handleHoverEnd,
-    onHoverStart: handleHoverStart,
-    onMouseMove: handleMouseMove,
-    ref: listItemRef
-  }, (0, _react2.jsx)(_index.ListViewItemSwitchField, null), (0, _react2.jsx)(_index.ListViewItemMenu, {
-    onAction: handleHoverEnd,
-    onHoverEnd: handleMenuHoverEnd,
-    onHoverStart: handleHoverStart
-  }, (0, _react2.jsx)(_reactStately.Item, {
-    key: "enable"
-  }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
-    key: "disable"
-  }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
-    key: "delete"
-  }, "Delete user")));
-};
-var renderBreadcrumbs = function renderBreadcrumbs(headerData) {
-  var _context9;
-  return (0, _react2.jsx)(_index.Breadcrumbs, {
-    icon: _ChevronRightIcon["default"]
-  }, (0, _react2.jsx)(_reactStately.Item, {
-    "aria-label": headerData.fname,
-    href: "https://www.pingidentity.com",
-    key: headerData.fname,
-    variant: "buttons.link"
-  }, (0, _concat["default"])(_context9 = "".concat(headerData.fname, " ")).call(_context9, headerData.lname)), (0, _react2.jsx)(_reactStately.Item, {
-    "aria-label": "Edit",
-    key: "editKey",
-    variant: "buttons.link"
-  }, "Edit"));
-};
-var OverlayPanelHeader = exports.OverlayPanelHeader = function OverlayPanelHeader(_ref3) {
-  var _context0, _context1, _context10;
-  var _ref3$headerData = _ref3.headerData,
-    headerData = _ref3$headerData === void 0 ? {
-      fname: 'John',
-      lname: 'Doe',
-      subtext: 'dburkitt5@columbia.edu',
-      icon: _AccountIcon["default"]
-    } : _ref3$headerData,
-    isEditPanel = _ref3.isEditPanel,
-    closePanelHandler = _ref3.closePanelHandler;
-  var fname = headerData.fname,
-    lname = headerData.lname,
-    subtext = headerData.subtext,
-    icon = headerData.icon,
-    personalInfo = headerData.personalInfo;
-  var headerProps = isEditPanel ? {
-    data: {
-      image: {
-        src: personalInfo.image,
-        alt: (0, _concat["default"])(_context0 = "".concat(fname, " ")).call(_context0, lname),
-        'aria-label': (0, _concat["default"])(_context1 = "".concat(fname, " ")).call(_context1, lname)
-      }
-    },
-    slots: {
-      rightOfData: renderBreadcrumbs(headerData)
-    }
-  } : {
-    data: {
-      text: (0, _concat["default"])(_context10 = "".concat(lname, ", ")).call(_context10, fname),
-      subtext: subtext,
-      icon: icon
-    }
-  };
-  return (0, _react2.jsx)(_index.PanelHeader, headerProps, !isEditPanel && (0, _react2.jsx)(_index.PanelHeaderSwitchField, null), !isEditPanel && (0, _react2.jsx)(_index.PanelHeaderMenu, null, (0, _react2.jsx)(_reactStately.Item, {
-    key: "enable"
-  }, "Enable user"), (0, _react2.jsx)(_reactStately.Item, {
-    key: "disable"
-  }, "Disable user"), (0, _react2.jsx)(_reactStately.Item, {
-    key: "delete"
-  }, "Delete user")), (0, _react2.jsx)(_index.PanelHeaderCloseButton, {
-    onPress: closePanelHandler
-  }));
-};