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

package/lib/components/Messages/Message.js

@@ -0,0 +1,152 @@
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["color"];
+import React, { forwardRef, useEffect, useRef, useState, useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import { announce } from '@react-aria/live-announcer';
+import AlertCircleIcon from 'mdi-react/AlertCircleIcon';
+import CheckCircleIcon from 'mdi-react/CheckCircleIcon';
+import CloseIcon from 'mdi-react/CloseIcon';
+import AlertIcon from 'mdi-react/AlertIcon';
+import InformationIcon from 'mdi-react/InformationIcon';
+import useStatusClasses from '../../hooks/useStatusClasses';
+import statuses from '../../utils/devUtils/constants/statuses';
+import Box from '../Box';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
+import Text from '../Text';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var icons = {
+  "default": InformationIcon,
+  success: CheckCircleIcon,
+  error: AlertCircleIcon,
+  warning: AlertIcon
+};
+
+var CloseButton = function CloseButton(_ref) {
+  var color = _ref.color,
+      others = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX(IconButton, _extends({
+    "aria-label": "Close"
+  }, others), ___EmotionJSX(Icon, {
+    color: color,
+    icon: CloseIcon,
+    sx: {
+      path: {
+        fill: color
+      }
+    }
+  }));
+};
+
+CloseButton.propTypes = {
+  color: PropTypes.string
+};
+var Message = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+      item = props.item,
+      onClose = props.onClose;
+  var key = item.key,
+      itemProps = item.props;
+  var children = itemProps.children,
+      _itemProps$status = itemProps.status,
+      status = _itemProps$status === void 0 ? 'default' : _itemProps$status,
+      bg = itemProps.bg,
+      color = itemProps.color,
+      _itemProps$icon = itemProps.icon,
+      icon = _itemProps$icon === void 0 ? icons[status] : _itemProps$icon,
+      _itemProps$isHidden = itemProps.isHidden,
+      isHidden = _itemProps$isHidden === void 0 ? false : _itemProps$isHidden,
+      dataId = itemProps['data-id'];
+
+  var _useStatusClasses = useStatusClasses(className, _defineProperty({}, "is-".concat(status), true)),
+      statusClasses = _useStatusClasses.classNames;
+
+  var onCloseHandler = function onCloseHandler() {
+    if (onClose) {
+      onClose(key);
+    }
+  };
+
+  useEffect(function () {
+    announce(children, 'polite');
+  }, []);
+  var innerRef = useRef(null);
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      innerHeight = _useState2[0],
+      setInnerHeight = _useState2[1];
+
+  useLayoutEffect(function () {
+    setInnerHeight(innerRef.current.clientHeight);
+  }, [children]);
+
+  var _useStatusClasses3 = useStatusClasses(className, {
+    isHidden: isHidden
+  }),
+      wrapperClasses = _useStatusClasses3.classNames;
+
+  return ___EmotionJSX(Box, {
+    variant: "messages.transition",
+    className: wrapperClasses,
+    sx: {
+      maxHeight: !isHidden ? innerHeight : 0
+    },
+    "data-id": dataId
+  }, ___EmotionJSX(Box, {
+    ref: innerRef
+  }, ___EmotionJSX(Box, {
+    ref: ref,
+    isRow: true,
+    variant: "messages.item",
+    className: statusClasses,
+    bg: bg
+  }, icon && ___EmotionJSX(Icon, {
+    icon: icon,
+    className: statusClasses,
+    color: color,
+    mr: "md"
+  }), ___EmotionJSX(Text, {
+    className: statusClasses,
+    color: color,
+    mr: "md"
+  }, children), ___EmotionJSX(CloseButton, {
+    onPress: onCloseHandler,
+    variant: "close",
+    className: statusClasses,
+    color: color
+  }))));
+});
+Message.propTypes = {
+  item: PropTypes.shape({
+    key: PropTypes.string,
+    props: PropTypes.shape({
+      children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
+      /* status changes the background, text, and button color accordingly */
+      status: PropTypes.oneOf(_Object$values(statuses)),
+
+      /* Background color */
+      bg: PropTypes.string,
+
+      /* Text color */
+      color: PropTypes.string,
+
+      /* Message icon */
+      icon: PropTypes.elementType,
+
+      /* Hides the message with an animated transition */
+      isHidden: PropTypes.bool,
+      'data-id': PropTypes.string
+    })
+  }),
+
+  /* Callback for clicking the message's close button */
+  onClose: PropTypes.func
+};
+export default Message;

package/lib/components/Messages/Messages.js

@@ -0,0 +1,53 @@
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["items", "onClose"];
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { useListState } from '@react-stately/list';
+import statuses from '../../utils/devUtils/constants/statuses';
+import Message from './Message';
+import Box from '../Box';
+/**
+ *Messages are intended to display non-critical alerts that
+ attract the users’ attention, but do not interfere or temporarily block their work.
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Messages = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _context;
+
+  var items = props.items,
+      onClose = props.onClose,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var state = useListState(props);
+  return ___EmotionJSX(Box, _extends({
+    ref: ref,
+    variant: "messages.wrapper"
+  }, others), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
+    return ___EmotionJSX(Message, {
+      key: item.key,
+      item: item,
+      onClose: onClose
+    });
+  }));
+});
+Messages.propTypes = {
+  /* For use with [dynamic collections](https://react-spectrum.adobe.com/react-stately/collections.html#dynamic-collections). */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string,
+    text: PropTypes.string,
+    status: PropTypes.oneOf(_Object$values(statuses)),
+    node: PropTypes.node
+  })),
+
+  /* Callback for clicking the message's close button */
+  onClose: PropTypes.func
+};
+Messages.defaultProps = {
+  items: []
+};
+export default Messages;

package/lib/components/Messages/Messages.reducer.js

@@ -0,0 +1,47 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import { messagesReducer as messagesReducerCore, multiMessagesReducer as multiMessagesReducerCore } from './utils';
+export var messagesReducer = messagesReducerCore;
+export var multiMessagesReducer = multiMessagesReducerCore;
+
+var makeShowMessage = function makeShowMessage(status, timeout) {
+  return function (text) {
+    return messagesReducer.actions.showMessage({
+      text: text,
+      status: status
+    }, timeout);
+  };
+};
+
+var makeMultiShowMessage = function makeMultiShowMessage(status, timeout) {
+  return function (container, text) {
+    return multiMessagesReducer.actions.showMessage(container, {
+      text: text,
+      status: status
+    }, timeout);
+  };
+};
+
+messagesReducer.actions = _objectSpread(_objectSpread({}, messagesReducer.actions), {}, {
+  showSuccessMessage: makeShowMessage('success', 3000),
+  showErrorMessage: makeShowMessage('error', -1),
+  showWarningMessage: makeShowMessage('warning', -1)
+});
+multiMessagesReducer.actions = _objectSpread(_objectSpread({}, multiMessagesReducer.actions), {}, {
+  showSuccessMessage: makeMultiShowMessage('success', 3000),
+  showCriticalMessage: makeMultiShowMessage('error', -1),
+  showWarningMessage: makeMultiShowMessage('warning', -1)
+});
+export default messagesReducer;

package/lib/components/Messages/Messages.stories.js

@@ -0,0 +1,297 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+
+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) { _defineProperty(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; }
+
+import React, { useEffect, useReducer, useState } from 'react';
+import { Item } from '@react-stately/collections';
+import AccountIcon from 'mdi-react/AccountIcon';
+import statuses from '../../utils/devUtils/constants/statuses';
+import { Box, Button, Messages } from '../..';
+import { messagesReducerStory as messagesReducer, multiMessagesReducerStory as multiMessagesReducer } from './index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Messages',
+  component: Messages,
+  argTypes: {
+    items: {
+      control: {
+        type: 'none'
+      }
+    },
+    onClose: {
+      control: {
+        type: 'none'
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  }
+};
+var messages = [{
+  key: 'message1',
+  text: 'Here\'s a very neutral thing'
+}, {
+  key: 'message2',
+  text: 'Form saved successfully',
+  status: 'success'
+}, {
+  key: 'message3',
+  text: 'Something unexpected happened.',
+  status: 'warning'
+}, {
+  key: 'message4',
+  text: 'Not saved! We could not validate one of the fields. Please see inline message below.',
+  status: 'error'
+}];
+var messageText = ['WINDMILLS DO NOT WORK THAT WAY! GOOD NIGHT! Oh yeah, good luck with that.', "Oh no! The professor will hit me! But if Zoidberg 'fixes' it… then perhaps gifts! You've killed me! Oh, you've killed me!", 'Does anybody else feel jealous and aroused and worried?', "Stop it, stop it. It's fine. I will 'destroy' you! Um, is this the boring, peaceful kind of taking to the streets?", "She also liked to shut up! Fry! Stay back! He's too powerful!", "This opera's as lousy as it is brilliant! Your lyrics lack subtlety. You can't just have your characters announce how they feel."];
+export var Default = function Default(args) {
+  return ___EmotionJSX(Messages, args, ___EmotionJSX(Item, {
+    key: "message1",
+    "data-id": "message1"
+  }, "Here is a very neutral thing"), ___EmotionJSX(Item, {
+    key: "message2",
+    "data-id": "message2",
+    status: "success"
+  }, "Form saved successfully"));
+};
+export var DefaultDynamic = function DefaultDynamic(args) {
+  return (// messages = [{...}]
+    ___EmotionJSX(Messages, _extends({}, args, {
+      items: messages
+    }), function (item) {
+      return ___EmotionJSX(Item, item, item.text);
+    })
+  );
+};
+export var Controlled = function Controlled(args) {
+  // messages = [{...}]
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      items = _useState2[0],
+      setItems = _useState2[1];
+
+  useEffect(function () {
+    setItems(messages);
+  }, []);
+
+  var removeMessage = function removeMessage(key) {
+    setItems(_mapInstanceProperty(items).call(items, function (item) {
+      return item.key === key ? _objectSpread(_objectSpread({}, item), {}, {
+        isHidden: true
+      }) : item;
+    }));
+
+    _setTimeout(function () {
+      return setItems(_filterInstanceProperty(items).call(items, function (item) {
+        return item.key !== key;
+      }));
+    }, 200);
+  };
+
+  return ___EmotionJSX(Messages, _extends({}, args, {
+    items: items,
+    onClose: removeMessage
+  }), function (item) {
+    return ___EmotionJSX(Item, item, item.text);
+  });
+};
+export var ControlledWithButton = function ControlledWithButton(args) {
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      items = _useState4[0],
+      setItems = _useState4[1];
+
+  var addMessage = function addMessage() {
+    var _context;
+
+    setItems(_concatInstanceProperty(_context = []).call(_context, items, [{
+      key: "message".concat(items.length + 1),
+      text: messageText[Math.floor(Math.random() * 6)],
+      status: _Object$values(statuses)[Math.floor(Math.random() * 4)]
+    }]));
+  };
+
+  var removeMessage = function removeMessage(key) {
+    setItems(_mapInstanceProperty(items).call(items, function (item) {
+      return item.key === key ? _objectSpread(_objectSpread({}, item), {}, {
+        isHidden: true
+      }) : item;
+    }));
+
+    _setTimeout(function () {
+      return setItems(_filterInstanceProperty(items).call(items, function (item) {
+        return item.key !== key;
+      }));
+    }, 200);
+  };
+
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, {
+    onPress: addMessage
+  }, "Click me!"), ___EmotionJSX(Messages, _extends({}, args, {
+    items: items,
+    onClose: removeMessage
+  }), function (item) {
+    return ___EmotionJSX(Item, item, item.text);
+  }));
+};
+export var WithCustomColorsAndIcons = function WithCustomColorsAndIcons(args) {
+  return ___EmotionJSX(Messages, args, ___EmotionJSX(Item, {
+    bg: "accent.99",
+    color: "active",
+    icon: AccountIcon
+  }, "We have to take a look with this camera."), ___EmotionJSX(Item, {
+    bg: "accent.99",
+    color: "active",
+    icon: AccountIcon
+  }, "Who said that? SURE you can die! You want to die?! Oh yeah, good luck with that. Stop! Do not shoot fire stick in space canoe! Cause explosive decompression!"), ___EmotionJSX(Item, {
+    bg: "accent.99",
+    color: "active",
+    icon: AccountIcon
+  }, "Oh God, what have I done?"));
+};
+export var UseReducer = function UseReducer() {
+  // import { messagesReducer as messagesReducerCore } from '@pingux/astro';
+  // const messagesReducer = messagesReducerCore;
+  // const makeShowMessage = (status, timeout) => text => messagesReducer.actions.showMessage(
+  //   { text, status },
+  //   timeout,
+  // );
+  // messagesReducer.actions = {
+  //   ...messagesReducer.actions,
+  //   showSuccessMessage: makeShowMessage('success', 3000),
+  //   showErrorMessage: makeShowMessage('error', -1),
+  //   showWarningMessage: makeShowMessage('warning', -1),
+  // };
+  var _useReducer = useReducer(messagesReducer),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      items = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var showAMessage = function showAMessage() {
+    var actionFn = [messagesReducer.actions.showSuccessMessage, messagesReducer.actions.showErrorMessage, messagesReducer.actions.showWarningMessage][Math.floor(Math.random() * 3)];
+    var message = messageText[Math.floor(Math.random() * 6)];
+    actionFn(message)(dispatch);
+  };
+
+  var removeMessage = function removeMessage(key) {
+    dispatch(messagesReducer.actions.hideMessage(key));
+
+    _setTimeout(function () {
+      return dispatch(messagesReducer.actions.removeMessage(key));
+    }, 200);
+  };
+
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Button, {
+    onPress: showAMessage
+  }, "Add Message"), (items === null || items === void 0 ? void 0 : items.length) > 0 && ___EmotionJSX(Button, {
+    mt: "md",
+    onPress: function onPress() {
+      return dispatch(messagesReducer.actions.clearMessages());
+    }
+  }, "Clear messages"), ___EmotionJSX(Messages, {
+    items: items,
+    onClose: removeMessage
+  }, function (item) {
+    return ___EmotionJSX(Item, item, item.text);
+  }));
+};
+export var UseReducerWithMultipleContainers = function UseReducerWithMultipleContainers() {
+  var _useReducer3 = useReducer(multiMessagesReducer, {
+    'container-one': [],
+    'container-two': []
+  }),
+      _useReducer4 = _slicedToArray(_useReducer3, 2),
+      items = _useReducer4[0],
+      dispatch = _useReducer4[1];
+
+  var showAMessage = function showAMessage(container) {
+    var actionFn = [multiMessagesReducer.actions.showSuccessMessage, multiMessagesReducer.actions.showCriticalMessage, multiMessagesReducer.actions.showWarningMessage][Math.floor(Math.random() * 3)];
+    var message = messageText[Math.floor(Math.random() * 6)];
+    actionFn(container, message)(dispatch);
+  };
+
+  var removeMessage = function removeMessage(key, container) {
+    dispatch(multiMessagesReducer.actions.hideMessage(container, key));
+
+    _setTimeout(function () {
+      return dispatch(multiMessagesReducer.actions.removeMessage(container, key));
+    }, 200);
+  };
+
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Button, {
+    onPress: function onPress() {
+      return showAMessage('container-one');
+    }
+  }, "Add message to the left"), ___EmotionJSX(Button, {
+    ml: "md",
+    onPress: function onPress() {
+      return showAMessage('container-two');
+    }
+  }, "Add message to the right")), ___EmotionJSX(Messages, {
+    items: items['container-one'],
+    onClose: function onClose(key) {
+      return removeMessage(key, 'container-one');
+    },
+    sx: {
+      width: '45%'
+    }
+  }, function (item) {
+    return ___EmotionJSX(Item, item, item.text);
+  }), ___EmotionJSX(Messages, {
+    items: items['container-two'],
+    onClose: function onClose(key) {
+      return removeMessage(key, 'container-two');
+    },
+    sx: {
+      left: '55%'
+    }
+  }, function (item) {
+    return ___EmotionJSX(Item, item, item.text);
+  }));
+};
+export var WithTextStyling = function WithTextStyling(args) {
+  var items = [{
+    key: 'message1',
+    node: ___EmotionJSX("strong", null, "Here is a very neutral thing")
+  }, {
+    key: 'message2',
+    text: 'Form saved successfully',
+    status: 'success'
+  }, {
+    key: 'message3',
+    text: 'Something unexpected happened.',
+    status: 'warning'
+  }, {
+    key: 'message4',
+    node: ___EmotionJSX(React.Fragment, null, ___EmotionJSX("b", null, "Not saved! "), "We could not validate one of the fields. Please see inline message below."),
+    status: 'error'
+  }];
+  return ___EmotionJSX(Messages, _extends({}, args, {
+    items: items
+  }), function (item) {
+    return ___EmotionJSX(Item, item, item.node || item.text);
+  });
+};