@pingux/astro 1.27.0-alpha.24 → 1.27.0-alpha.26

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

@@ -0,0 +1,210 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+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$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+
+var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
+
+var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
+
+var _MenuUpIcon = _interopRequireDefault(require("mdi-react/MenuUpIcon"));
+
+var _overlays = require("@react-aria/overlays");
+
+var _utils = require("@react-aria/utils");
+
+var _index = require("../index");
+
+var _PopoverContainer = _interopRequireDefault(require("../components/PopoverContainer"));
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var _default = {
+  title: 'Recipes/FlippableCaretMenuButton'
+};
+exports["default"] = _default;
+var buttonArray = ['Web App', 'Native App', 'Single Page App', 'Non-Interactive', 'Worker', 'Advanced Configuration', 'Built-in admin console for this environment', 'Built-in Application portal'];
+var sx = {
+  openButton: {
+    height: '30px',
+    borderRadius: 'md',
+    fontSize: '13px',
+    mb: 'sm'
+  },
+  closeIconButton: {
+    position: 'absolute',
+    top: '14px',
+    right: 'sm'
+  },
+  buttonsContainer: {
+    p: 'lg',
+    flexDirection: 'initial !important',
+    alignContent: 'space-between',
+    flexWrap: 'wrap'
+  },
+  selectedButton: {
+    mb: 'sm',
+    mr: '4px',
+    height: '30px',
+    borderRadius: '15px',
+    fontSize: '13px'
+  },
+  unSelectedButton: {
+    mb: 'sm',
+    mr: '4px',
+    borderColor: 'neutral.80',
+    height: '30px',
+    borderRadius: '15px',
+    fontSize: '13px'
+  }
+};
+
+var Default = function Default() {
+  var buttonRef = (0, _react.useRef)();
+  var popoverRef = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      selectedButtons = _useState4[0],
+      setSelectedButton = _useState4[1];
+
+  var onChange = function onChange() {
+    setIsOpen(!isOpen);
+  };
+
+  var toggleButton = function toggleButton(key) {
+    var _context;
+
+    var newState = selectedButtons;
+
+    if ((0, _includes["default"])(selectedButtons).call(selectedButtons, key)) {
+      var index = (0, _indexOf["default"])(newState).call(newState, key);
+      (0, _splice["default"])(newState).call(newState, index, 1);
+    } else {
+      newState.push(key);
+    }
+
+    setSelectedButton((0, _concat["default"])(_context = []).call(_context, newState));
+  };
+
+  var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
+    targetRef: buttonRef,
+    overlayRef: popoverRef,
+    placement: 'bottom left',
+    isOpen: true
+  }),
+      overlayProps = _useOverlayPosition.overlayProps,
+      placement = _useOverlayPosition.placement,
+      updatePosition = _useOverlayPosition.updatePosition;
+
+  (0, _utils.useLayoutEffect)(function () {
+    requestAnimationFrame(function () {
+      updatePosition();
+    });
+  }, [updatePosition]);
+
+  var style = _objectSpread(_objectSpread({}, overlayProps.style), {}, {
+    width: '500px',
+    minWidth: '500px',
+    height: '200px'
+  });
+
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Button, {
+    ref: buttonRef,
+    variant: "inline",
+    onPress: onChange,
+    sx: sx.openButton
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    alignItems: "center"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: isOpen ? _MenuUpIcon["default"] : _MenuDownIcon["default"],
+    mr: "sm",
+    color: "active",
+    size: 20
+  }), "Add a Form")), (0, _react2.jsx)(_PopoverContainer["default"], {
+    isOpen: isOpen,
+    hasNoArrow: true,
+    isNonModal: true,
+    isDismissable: false,
+    ref: popoverRef,
+    placement: placement,
+    style: style
+  }, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "my-label",
+    size: 22,
+    onPress: function onPress() {
+      return setIsOpen(false);
+    },
+    sx: sx.closeIconButton
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CloseIcon["default"]
+  })), (0, _react2.jsx)(_index.Box, {
+    sx: sx.buttonsContainer
+  }, (0, _map["default"])(buttonArray).call(buttonArray, function (item) {
+    return (0, _react2.jsx)(_index.Button, {
+      variant: "inline",
+      sx: (0, _includes["default"])(selectedButtons).call(selectedButtons, item) ? sx.selectedButton : sx.unSelectedButton,
+      key: item,
+      onPress: function onPress() {
+        return toggleButton(item);
+      }
+    }, item);
+  })))));
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,377 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _focus = require("@react-aria/focus");
+
+var _collections = require("@react-stately/collections");
+
+var _AccountIcon = _interopRequireDefault(require("mdi-react/AccountIcon"));
+
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
+
+var _MoreVertIcon = _interopRequireDefault(require("mdi-react/MoreVertIcon"));
+
+var _PencilIcon = _interopRequireDefault(require("mdi-react/PencilIcon"));
+
+var _index = require("../index");
+
+var _hooks = require("../hooks");
+
+var _images = require("../utils/devUtils/constants/images");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var _default = {
+  title: 'Recipes/List with Panel'
+};
+exports["default"] = _default;
+var items = [{
+  email: 'dburkitt5@columbia.edu',
+  firstName: 'Nicola',
+  lastName: 'Burkitt',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  email: 'idixie2@elegantthemes.com',
+  firstName: 'Cacilia',
+  lastName: 'Dixie',
+  avatar: _images.pingImg
+}, {
+  email: 'dfowler0@rambler.ru',
+  firstName: 'Stavro',
+  lastName: 'Fowler',
+  avatar: _images.pingImg
+}, {
+  email: 'jgolde8@jimdo.com',
+  firstName: 'Celisse',
+  lastName: 'Golde',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  email: 'shearst9@answers.com',
+  firstName: 'Jeth',
+  lastName: 'Hearst',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  email: 'ajinaa@mapquest.com',
+  firstName: 'Kaycee',
+  lastName: 'Jina',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  email: 'vmalster4@biblegateway.com',
+  firstName: 'Lorry',
+  lastName: 'Malster',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  email: 'yphipp6@yellowpages.com',
+  firstName: 'Stanley',
+  lastName: 'Phipp',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  email: 'mskilbeck3@bbc.co.uk',
+  firstName: 'Gradey',
+  lastName: 'Skilbeck',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  email: 'dstebbing1@msu.edu',
+  firstName: 'Marnia',
+  lastName: 'Stebbing',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  email: 'lsterley7@lulu.com',
+  firstName: 'Joshua',
+  lastName: 'Sterley',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  email: 'luttleyb@hugedomains.com',
+  firstName: 'Jarrod',
+  lastName: 'Uttley',
+  hasIcon: true,
+  avatar: _AccountIcon["default"]
+}, {
+  email: 'lidelc@yelp.com',
+  firstName: 'Andromache',
+  lastName: 'Idel',
+  hasIcon: true,
+  avatar: _AccountIcon["default"],
+  hasSeparator: false
+}];
+var sx = {
+  wrapper: {
+    px: 'lg',
+    py: 'lg',
+    bg: 'accent.99',
+    height: '900px',
+    overflowY: 'scroll'
+  },
+  searchField: {
+    position: 'fixed',
+    mb: 'sm',
+    width: '400px'
+  },
+  listElementWrapper: {
+    px: 'md',
+    bg: 'accent.99',
+    justifyContent: 'center'
+  },
+  separator: {
+    bg: 'accent.90'
+  },
+  tabsWrapper: {
+    px: 'lg',
+    pt: 'xs'
+  },
+  iconButton: {
+    position: 'absolute',
+    top: 0,
+    right: 0
+  },
+  itemLabel: {
+    fontSize: 'sm',
+    fontWeight: 3,
+    lineHeight: '16px',
+    mb: 'xs'
+  },
+  itemValue: {
+    fontWeight: 0,
+    lineHeight: '18px',
+    variant: 'base',
+    mb: 'md'
+  },
+  listElement: {
+    wrapper: {
+      minHeight: '60px'
+    },
+    iconWrapper: {
+      mr: 'auto',
+      alignItems: 'center'
+    },
+    icon: {
+      mr: 'sm',
+      alignSelf: 'center',
+      color: 'accent.40'
+    },
+    avatar: {
+      width: '25px',
+      height: '25px',
+      mr: 'md'
+    },
+    title: {
+      alignSelf: 'start'
+    },
+    subtitle: {
+      fontSize: 'sm',
+      my: '1px',
+      lineHeight: '16px',
+      alignSelf: 'start'
+    },
+    menuWrapper: {
+      alignSelf: 'center'
+    }
+  }
+};
+
+var ListElement = function ListElement(_ref) {
+  var item = _ref.item,
+      onClosePanel = _ref.onClosePanel;
+  return (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.listElement.wrapper
+  }, (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.listElement.iconWrapper
+  }, item.hasIcon ? (0, _react2.jsx)(_index.Icon, {
+    icon: item.avatar,
+    size: 24,
+    sx: sx.listElement.icon
+  }) : (0, _react2.jsx)(_index.Avatar, {
+    sx: sx.listElement.avatar,
+    src: item.avatar
+  }), (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Text, {
+    variant: "bodyStrong",
+    sx: sx.listElement.title
+  }, item.lastName, ", ", item.firstName), (0, _react2.jsx)(_index.Text, {
+    variant: "subtitle",
+    sx: sx.listElement.subtitle
+  }, item.email))), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    sx: sx.listElement.menuWrapper
+  }, (0, _react2.jsx)(_index.SwitchField, {
+    "aria-label": "active user",
+    isDefaultSelected: true,
+    alignSelf: "center",
+    mr: "sm"
+  }), (0, _react2.jsx)(_index.PopoverMenu, null, (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "more icon button",
+    mr: onClosePanel ? 'sm' : 0
+  }, (0, _react2.jsx)(_MoreVertIcon["default"], null)), (0, _react2.jsx)(_index.Menu, null, (0, _react2.jsx)(_collections.Item, {
+    key: "enable"
+  }, "Enable user"), (0, _react2.jsx)(_collections.Item, {
+    key: "disable"
+  }, "Disable user"), (0, _react2.jsx)(_collections.Item, {
+    key: "delete"
+  }, "Delete user"))), onClosePanel && (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": "close icon button",
+    onPress: onClosePanel
+  }, (0, _react2.jsx)(_CloseIcon["default"], null))));
+};
+
+var Default = function Default() {
+  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 _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([]);
+  };
+
+  var selectItemHandler = function selectItemHandler(e) {
+    if (e.size) {
+      setSelectedItemId((0, _findIndex["default"])(items).call(items, function (item) {
+        return item.email === e.currentKey;
+      }));
+      setSelectedKeys([e.currentKey]);
+      panelState.open();
+    } else {
+      closePanelHandler();
+    }
+  };
+
+  return (0, _react2.jsx)(_index.Box, {
+    sx: sx.wrapper
+  }, (0, _react2.jsx)(_index.SearchField, {
+    position: "fixed",
+    mb: "sm",
+    width: "400px",
+    placeholder: "Search",
+    "aria-label": "search"
+  }), (0, _react2.jsx)(_index.ListView, {
+    items: items,
+    onSelectionChange: selectItemHandler,
+    ref: panelTriggerRef,
+    selectedKeys: selectedKeys
+  }, function (item) {
+    return (0, _react2.jsx)(_collections.Item, {
+      key: item.email,
+      textValue: item.email,
+      hasSeparator: item.hasSeparator,
+      listItemProps: {
+        pl: 15,
+        minHeight: 75
+      }
+    }, (0, _react2.jsx)(ListElement, {
+      item: item
+    }));
+  }), (0, _react2.jsx)(_index.OverlayPanel, {
+    isOpen: panelState.isOpen,
+    state: panelState,
+    triggerRef: panelTriggerRef,
+    p: 0
+  }, panelState.isOpen && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_focus.FocusScope, {
+    contain: true,
+    restoreFocus: true,
+    autoFocus: true
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.listElementWrapper
+  }, (0, _react2.jsx)(ListElement, {
+    item: selectedItemId >= 0 ? items[selectedItemId] : [],
+    onClosePanel: closePanelHandler
+  })), (0, _react2.jsx)(_index.Separator, {
+    margin: 0,
+    sx: sx.separator
+  }), (0, _react2.jsx)(_index.Box, {
+    sx: sx.tabsWrapper
+  }, (0, _react2.jsx)(_index.Tabs, {
+    tabListProps: {
+      justifyContent: 'center'
+    },
+    tabPanelProps: {
+      sx: {
+        position: 'relative'
+      }
+    }
+  }, (0, _react2.jsx)(_index.Tab, {
+    title: "Profile"
+  }, selectedItemId >= 0 && (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.IconButton, {
+    variant: "inverted",
+    sx: sx.iconButton
+  }, (0, _react2.jsx)(_PencilIcon["default"], {
+    size: 20
+  })), (0, _react2.jsx)(_index.Text, {
+    sx: sx.itemLabel,
+    variant: "base"
+  }, "Full Name"), (0, _react2.jsx)(_index.Text, {
+    sx: sx.itemValue,
+    variant: "base"
+  }, items[selectedItemId].firstName, " ", items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
+    sx: sx.itemLabel,
+    variant: "base"
+  }, "First Name"), (0, _react2.jsx)(_index.Text, {
+    sx: sx.itemValue,
+    variant: "base"
+  }, items[selectedItemId].firstName), (0, _react2.jsx)(_index.Text, {
+    sx: sx.itemLabel,
+    variant: "base"
+  }, "Last Name"), (0, _react2.jsx)(_index.Text, {
+    sx: sx.itemValue,
+    variant: "base"
+  }, items[selectedItemId].lastName), (0, _react2.jsx)(_index.Text, {
+    sx: sx.itemLabel,
+    variant: "base"
+  }, "Email"), (0, _react2.jsx)(_index.Text, {
+    sx: sx.itemValue,
+    variant: "base"
+  }, items[selectedItemId].email))), (0, _react2.jsx)(_index.Tab, {
+    title: "Group Memberships"
+  }, (0, _react2.jsx)(_index.Text, null, "Group Memberships")), (0, _react2.jsx)(_index.Tab, {
+    title: "Account Info"
+  }, (0, _react2.jsx)(_index.Text, null, "Account Info"))))))));
+};
+
+exports.Default = Default;