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

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

@@ -0,0 +1,160 @@
+"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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactCalendar = _interopRequireDefault(require("react-calendar"));
+
+require("react-calendar/dist/Calendar.css");
+
+var _CalendarIcon = _interopRequireDefault(require("mdi-react/CalendarIcon"));
+
+var _moment = _interopRequireDefault(require("moment"));
+
+var _index = require("../index");
+
+var _statuses = _interopRequireDefault(require("../utils/devUtils/constants/statuses"));
+
+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; }
+
+var _default = {
+  title: 'Recipes/DatePicker'
+};
+exports["default"] = _default;
+var sx = {
+  calendarIcon: {
+    position: 'absolute',
+    right: 5,
+    top: 8,
+    width: 28,
+    height: 28
+  }
+};
+
+var Default = function Default() {
+  var dateFormat = 'YYYY-MM-DD';
+
+  var _useState = (0, _react.useState)((0, _moment["default"])('2021-01-01', 'YYYY-MM-DD')),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      date = _useState2[0],
+      setDate = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(date.format(dateFormat)),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      inputValue = _useState4[0],
+      setInputValue = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      error = _useState6[0],
+      setError = _useState6[1];
+
+  var triggerRef = _react["default"].useRef();
+
+  var overlayRef = _react["default"].useRef();
+
+  var popoverState = (0, _index.useOverlayTriggerState)({});
+
+  var _useOverlayTrigger = (0, _index.useOverlayTrigger)({
+    type: 'dialog'
+  }, popoverState, triggerRef),
+      triggerProps = _useOverlayTrigger.triggerProps,
+      overlayProps = _useOverlayTrigger.overlayProps;
+
+  var _useOverlayPosition = (0, _index.useOverlayPosition)({
+    targetRef: triggerRef,
+    overlayRef: overlayRef,
+    offset: 15,
+    isOpen: popoverState.isOpen,
+    onClose: popoverState.close,
+    shouldUpdatePosition: true
+  }),
+      positionProps = _useOverlayPosition.overlayProps;
+
+  var handleCalendarIconPress = (0, _react.useCallback)(function () {
+    return popoverState.open();
+  }, []);
+  var handleInputChange = (0, _react.useCallback)(function (_ref) {
+    var value = _ref.target.value;
+    setInputValue(value);
+  }, []);
+  var handleOnBlur = (0, _react.useCallback)(function (_ref2) {
+    var value = _ref2.target.value;
+    var dateFromInput = (0, _moment["default"])(value);
+
+    if (dateFromInput.isValid()) {
+      setDate(dateFromInput);
+      setInputValue(dateFromInput.format(dateFormat));
+      setError(false);
+    } else {
+      setError(true);
+    }
+  }, []);
+  var handleCalendarChange = (0, _react.useCallback)(function (newDate) {
+    setDate((0, _moment["default"])(newDate));
+    setInputValue((0, _moment["default"])(newDate).format(dateFormat));
+    setError(false);
+  }, []);
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      maxWidth: 300
+    },
+    variant: "boxes.dataPicker"
+  }, (0, _react2.jsx)(_index.TextField, {
+    slots: {
+      inContainer: (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({
+        "aria-label": "calendar-button",
+        sx: sx.calendarIcon,
+        onPress: handleCalendarIconPress,
+        ref: triggerRef
+      }, triggerProps), (0, _react2.jsx)(_index.Icon, {
+        icon: _CalendarIcon["default"],
+        size: 20
+      }))
+    },
+    onChange: handleInputChange,
+    onBlur: handleOnBlur,
+    helperText: error ? 'Invalid Date' : 'yyyy-mm-dd',
+    status: error ? _statuses["default"].ERROR : _statuses["default"].DEFAULT,
+    value: inputValue,
+    "aria-label": "data-picker-input"
+  }), (0, _react2.jsx)(_PopoverContainer["default"], (0, _extends2["default"])({}, overlayProps, positionProps, {
+    ref: overlayRef,
+    isOpen: popoverState.isOpen,
+    onClose: popoverState.close,
+    hasNoArrow: true,
+    isDismissable: true
+  }), (0, _react2.jsx)(_index.Box, {
+    variant: "boxes.datePicker"
+  }, (0, _react2.jsx)(_reactCalendar["default"], {
+    onChange: handleCalendarChange,
+    value: date.toDate()
+  }))));
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,58 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _DragVerticalIcon = _interopRequireDefault(require("mdi-react/DragVerticalIcon"));
+
+var _FormTextboxIcon = _interopRequireDefault(require("mdi-react/FormTextboxIcon"));
+
+var _Box = _interopRequireDefault(require("../components/Box"));
+
+var _Icon = _interopRequireDefault(require("../components/Icon"));
+
+var _Text = _interopRequireDefault(require("../components/Text"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Recipes/DraggableBox'
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _react2.jsx)(_Box["default"], {
+    isRow: true,
+    alignItems: "center",
+    py: "sm",
+    px: "xs",
+    sx: {
+      boxShadow: 'standard',
+      ':hover': {
+        cursor: 'grab'
+      }
+    }
+  }, (0, _react2.jsx)(_Icon["default"], {
+    icon: _DragVerticalIcon["default"],
+    size: 22,
+    color: "neutral.60"
+  }), (0, _react2.jsx)(_Icon["default"], {
+    icon: _FormTextboxIcon["default"],
+    size: 22,
+    ml: "sm"
+  }), (0, _react2.jsx)(_Text["default"], {
+    fontWeight: 500,
+    ml: "md"
+  }, "Text Input"));
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,360 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _CloseIcon = _interopRequireDefault(require("mdi-react/CloseIcon"));
+
+var _CheckIcon = _interopRequireDefault(require("mdi-react/CheckIcon"));
+
+var _index = require("../index");
+
+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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(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; }
+
+var _default = {
+  title: 'Recipes/EditableInput'
+};
+exports["default"] = _default;
+var EditableAreaContext = /*#__PURE__*/(0, _react.createContext)();
+var EditableAreaProvider = EditableAreaContext.Provider;
+var controlProps = {
+  confirmBtn: {
+    ariaLabel: 'Confirm',
+    variant: 'invertedSquare'
+  },
+  cancelBtn: {
+    ariaLabel: 'Cancel',
+    variant: 'square'
+  }
+};
+var inputProps = {
+  label: 'Example label',
+  ariaLabel: 'Example aria label'
+};
+var sx = {
+  editablePreview: {
+    whiteSpace: 'pre-line',
+    width: '100%',
+    overflowWrap: 'break-word',
+    minHeight: '45px',
+    paddingLeft: 'xs',
+    justifyContent: 'flex-end',
+    paddingBottom: 'xs',
+    borderBottomColor: 'active',
+    color: 'neutral.10',
+    fontSize: 'md',
+    fontWeight: 1,
+    lineHeight: '18px',
+    '&:focus': {
+      outline: 'none',
+      boxShadow: 'focus',
+      borderColor: 'active',
+      borderWidth: '1px',
+      borderStyle: 'solid'
+    }
+  },
+  editableInputWrapper: {
+    marginRight: '30px',
+    flexGrow: 1
+  },
+  editableInpuTextArea: {
+    maxHeight: '150px'
+  },
+  editableControlWrapper: {
+    position: 'absolute',
+    right: '0',
+    top: '27.5%',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  editableControlIconButton: {
+    marginRight: 'md',
+    width: '20px',
+    height: '20px'
+  }
+};
+
+var Default = function Default() {
+  return (0, _react2.jsx)(Editable, {
+    value: "Some value..."
+  }, (0, _react2.jsx)(EditablePreview, null), (0, _react2.jsx)(EditableInput, {
+    inputProps: inputProps
+  }), (0, _react2.jsx)(EditableControl, {
+    controlProps: controlProps
+  }));
+};
+/**
+ * Editable
+ * Wrapper component that provides context value for all editable components
+ */
+
+
+exports.Default = Default;
+
+var Editable = function Editable(props) {
+  var value = props.value,
+      isEditing = props.isEditing;
+  var editableContextValue = {
+    isEditing: isEditing || false,
+    prevValue: '',
+    value: value || ''
+  };
+
+  var _useState = (0, _react.useState)(editableContextValue),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      editableContext = _useState2[0],
+      setEditableContext = _useState2[1];
+
+  return (0, _react2.jsx)(_index.Box, {
+    sx: {
+      position: 'relative'
+    }
+  }, (0, _react2.jsx)(EditableAreaProvider, {
+    value: [editableContext, setEditableContext]
+  }, props.children));
+};
+/**
+ * Editable preview
+ * Read-only view of the component
+ */
+
+
+var EditablePreview = function EditablePreview() {
+  var _useContext = (0, _react.useContext)(EditableAreaContext),
+      _useContext2 = (0, _slicedToArray2["default"])(_useContext, 2),
+      editableContext = _useContext2[0],
+      setEditableContext = _useContext2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      hasFocus = _useState4[0],
+      setFocus = _useState4[1];
+
+  var editablePreviewDynamicSx = {
+    backgroundColor: hasFocus ? 'accent.95' : 'white',
+    borderBottom: editableContext.isEditing ? '0px' : '1px dashed',
+    '&:hover': {
+      background: editableContext.isEditing ? 'white' : 'accent.95'
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (hasFocus && editableContext.isEditing) {
+      setFocus(false);
+    }
+  }, [hasFocus, editableContext.isEditing]);
+
+  var handleClick = function handleClick() {
+    setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+      isEditing: true
+    }));
+  };
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === 'Enter') {
+      setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+        isEditing: true
+      }));
+    }
+  };
+
+  return (0, _react2.jsx)(_index.Box, {
+    tabIndex: editableContext.isEditing ? '-1' : '0',
+    display: editableContext.isEditing ? 'none' : 'flex',
+    "aria-hidden": editableContext.isEditing,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    "aria-label": "Inline editable text field",
+    role: "textbox",
+    onFocus: function onFocus() {
+      return setFocus(true);
+    },
+    onBlur: function onBlur() {
+      return setFocus(false);
+    },
+    placeholder: "Click or press enter to edit text",
+    sx: _objectSpread(_objectSpread({}, editablePreviewDynamicSx), sx.editablePreview)
+  }, editableContext.value);
+};
+/**
+ * Editable input
+ * Swappable with TextField and TextAreaField component
+ * Input view of the component
+ */
+
+
+var EditableInput = function EditableInput(props) {
+  var ariaLabel = props.inputProps.ariaLabel;
+  var editableInput = (0, _react.useRef)(null);
+
+  var _useContext3 = (0, _react.useContext)(EditableAreaContext),
+      _useContext4 = (0, _slicedToArray2["default"])(_useContext3, 2),
+      editableContext = _useContext4[0],
+      setEditableContext = _useContext4[1];
+
+  var _useState5 = (0, _react.useState)(editableContext.value || ''),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      prevValue = _useState6[0],
+      setPrevValue = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(editableContext.value || ''),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      editingValue = _useState8[0],
+      setEditingValue = _useState8[1];
+
+  (0, _react.useEffect)(function () {
+    setEditingValue(editableContext.value);
+  }, [editableContext.value]);
+  (0, _react.useEffect)(function () {
+    if (editableContext.isEditing) {
+      editableInput.current.focus();
+    }
+  }, [editableContext.isEditing]);
+
+  var handleChange = function handleChange(e) {
+    setEditingValue(e.target.value);
+    setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+      value: e.target.value
+    }));
+  };
+
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === 'Escape') {
+      setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+        prevValue: prevValue,
+        value: prevValue,
+        isEditing: false
+      }));
+    } else if (e.key === 'Enter') {
+      if (e.shiftKey) {
+        return;
+      }
+
+      setPrevValue(editableContext.value);
+      setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+        prevValue: editableContext.value,
+        value: editableContext.value,
+        isEditing: false
+      }));
+    }
+  };
+
+  return (0, _react2.jsx)(_index.Box, {
+    display: editableContext.isEditing ? 'flex' : 'none',
+    "aria-hidden": !editableContext.isEditing,
+    sx: sx.editableInputWrapper
+  }, (0, _react2.jsx)(_index.TextAreaField, {
+    rows: 1,
+    ref: editableInput,
+    role: "textbox",
+    contenteditable: "true",
+    "aria-multiline": "true",
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    value: editingValue,
+    "aria-label": ariaLabel,
+    sx: sx.editableInpuTextArea,
+    isUnresizable: true
+  }));
+};
+/**
+ * Editable controls
+ * Use css to position buttons
+ * Extend with more button controls as needed
+ */
+
+
+var EditableControl = function EditableControl(props) {
+  var confirmBtn = props.controlProps.confirmBtn,
+      cancelBtn = props.controlProps.cancelBtn,
+      onPress = props.onPress;
+
+  var _useContext5 = (0, _react.useContext)(EditableAreaContext),
+      _useContext6 = (0, _slicedToArray2["default"])(_useContext5, 2),
+      editableContext = _useContext6[0],
+      setEditableContext = _useContext6[1];
+
+  var _useState9 = (0, _react.useState)(editableContext.value || ''),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      prevValue = _useState10[0],
+      setPrevValue = _useState10[1];
+
+  var handleCancel = function handleCancel() {
+    setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+      prevValue: prevValue,
+      value: prevValue,
+      isEditing: false
+    }));
+  };
+
+  var handleSubmit = function handleSubmit() {
+    setPrevValue(editableContext.value);
+    setEditableContext(_objectSpread(_objectSpread({}, editableContext), {}, {
+      prevValue: editableContext.value,
+      value: editableContext.value,
+      isEditing: false
+    }));
+
+    if (onPress) {
+      onPress();
+    }
+  };
+
+  return (0, _react2.jsx)(_index.Box, {
+    display: editableContext.isEditing ? 'flex' : 'none',
+    "aria-hidden": !editableContext.isEditing,
+    isRow: true,
+    sx: sx.editableControlWrapper
+  }, (0, _react2.jsx)(_index.IconButton, {
+    onPress: handleSubmit,
+    "aria-label": confirmBtn.ariaLabel,
+    variant: confirmBtn.variant,
+    sx: sx.editableControlIconButton
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CheckIcon["default"]
+  })), (0, _react2.jsx)(_index.IconButton, {
+    "aria-label": cancelBtn.ariaLabel,
+    onPress: handleCancel,
+    variant: cancelBtn.variant
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _CloseIcon["default"]
+  })));
+};