@pingux/astro 2.2.0 → 2.3.0-alpha.1

package/lib/cjs/components/Calendar/Calendar.js

@@ -0,0 +1,202 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _date = require("@internationalized/date");
+var _calendar = require("@react-aria/calendar");
+var _i18n = require("@react-aria/i18n");
+var _visuallyHidden = require("@react-aria/visually-hidden");
+var _calendar2 = require("@react-stately/calendar");
+var _ChevronDoubleLeftIcon = _interopRequireDefault(require("mdi-react/ChevronDoubleLeftIcon"));
+var _ChevronDoubleRightIcon = _interopRequireDefault(require("mdi-react/ChevronDoubleRightIcon"));
+var _ChevronLeftIcon = _interopRequireDefault(require("mdi-react/ChevronLeftIcon"));
+var _ChevronRightIcon = _interopRequireDefault(require("mdi-react/ChevronRightIcon"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _index = require("../../index");
+var _CalendarGrid = _interopRequireDefault(require("./CalendarGrid"));
+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; }
+/**
+ * A simple component to display a monthly grid for date selection.
+ * Utilizes [useCalendar, useCalendarGrid, useCalendarCell](https://react-spectrum.adobe.com/react-aria/useCalendar.html),
+ * from React Aria and [useCalendarState](https://react-spectrum.adobe.com/react-stately/useCalendarState.html)
+ * from React Stately.
+ */
+
+var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    minValue = props.minValue,
+    maxValue = props.maxValue;
+  var _useLocale = (0, _i18n.useLocale)(),
+    locale = _useLocale.locale;
+  var calenderRef = (0, _react.useRef)();
+
+  // istanbul ignore next
+  (0, _react.useImperativeHandle)(ref, function () {
+    return calenderRef.current;
+  });
+  var parsedDates = {
+    value: typeof value === 'string' && (0, _date.parseDate)(value) || value,
+    defaultValue: typeof defaultValue === 'string' && (0, _date.parseDate)(defaultValue) || defaultValue,
+    maxValue: typeof maxValue === 'string' && (0, _date.parseDate)(maxValue) || maxValue,
+    minValue: typeof minValue === 'string' && (0, _date.parseDate)(minValue) || minValue
+  };
+  var state = (0, _calendar2.useCalendarState)(_objectSpread(_objectSpread(_objectSpread({}, props), parsedDates), {}, {
+    locale: locale,
+    createCalendar: _date.createCalendar
+  }));
+  var _useCalendar = (0, _calendar.useCalendar)(_objectSpread(_objectSpread({}, props), parsedDates), state, calenderRef),
+    calendarProps = _useCalendar.calendarProps,
+    prevButtonProps = _useCalendar.prevButtonProps,
+    nextButtonProps = _useCalendar.nextButtonProps,
+    title = _useCalendar.title;
+
+  /**
+   * Grabs the currently displayed date for yearly navigation.
+   */
+
+  var _useState = (0, _react.useState)(),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    currentDate = _useState2[0],
+    setCurrentDate = _useState2[1];
+  var todayDate = (0, _react.useMemo)(function () {
+    setCurrentDate(state.visibleRange.start);
+  }, [state.visibleRange.start]);
+  var nav = {
+    NEXT: 'next',
+    PREVIOUS: 'previous'
+  };
+
+  /**
+   * Function handles the navigation to previous and next year
+   * based on the currently displayed date.
+   */
+
+  var handleYearSelection = (0, _react.useCallback)(function (navigation) {
+    var tempValue;
+    if (navigation === nav.PREVIOUS) {
+      tempValue = currentDate.subtract({
+        years: 1
+      });
+    } else if (navigation === nav.NEXT) {
+      tempValue = currentDate.add({
+        years: 1
+      });
+    }
+    state.setFocusedDate(tempValue);
+    setCurrentDate(tempValue);
+  }, [currentDate, state, todayDate]);
+  return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, calendarProps, {
+    ref: calenderRef,
+    variant: "calendar.calendarContainer"
+  }), (0, _react2.jsx)(_index.Box, {
+    className: "header",
+    isRow: true,
+    variant: "calendar.calendarHeader",
+    verticalAlign: "middle"
+  }, (0, _react2.jsx)(_index.IconButton, {
+    onPress: function onPress() {
+      return handleYearSelection(nav.PREVIOUS);
+    },
+    mx: "sm",
+    isDisabled: prevButtonProps.isDisabled,
+    "aria-label": "previous year navigation"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _ChevronDoubleLeftIcon["default"],
+    size: 18
+  })), (0, _react2.jsx)(_index.IconButton, prevButtonProps, (0, _react2.jsx)(_index.Icon, {
+    icon: _ChevronLeftIcon["default"],
+    size: 18
+  })), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, (0, _react2.jsx)(_index.Text, null, calendarProps['aria-label'])), (0, _react2.jsx)(_index.Text, {
+    variant: "itemTitle",
+    role: "heading",
+    "aria-level": "3",
+    fontWeight: 3
+  }, title), (0, _react2.jsx)(_index.IconButton, nextButtonProps, (0, _react2.jsx)(_index.Icon, {
+    icon: _ChevronRightIcon["default"],
+    size: 18
+  })), (0, _react2.jsx)(_index.IconButton, {
+    onPress: function onPress() {
+      return handleYearSelection(nav.NEXT);
+    },
+    mx: "sm",
+    isDisabled: nextButtonProps.isDisabled,
+    "aria-label": "next year navigation"
+  }, (0, _react2.jsx)(_index.Icon, {
+    icon: _ChevronDoubleRightIcon["default"],
+    size: 18
+  }))), (0, _react2.jsx)(_CalendarGrid["default"], {
+    state: state
+  }), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, (0, _react2.jsx)(_index.Button, {
+    "aria-label": nextButtonProps['aria-label'],
+    isDisabled: nextButtonProps.isDisabled,
+    onPress: function onPress() {
+      return state.focusNextPage();
+    },
+    tabIndex: -1
+  })));
+});
+Calendar.propTypes = {
+  /** Prop to provide a custom default date (uncontrolled) */
+  defaultValue: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  /** Prop to provide a default date (controlled) */
+  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  /** custom week days for other calendars */
+  customWeekDays: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  /** Whether the element should receive focus on render. */
+  hasAutoFocus: _propTypes["default"].bool,
+  /** The element's unique identifier. */
+  id: _propTypes["default"].string,
+  /**
+   * Callback that is called for each date of the calendar.
+   * If it returns true, then the date is unavailable.
+   *
+   * (date: DateValue) => boolean
+   */
+  isDateUnavailable: _propTypes["default"].func,
+  /** Whether the calendar is disabled. */
+  isDisabled: _propTypes["default"].bool,
+  /** Whether the calendar dates are only focusable. */
+  isReadOnly: _propTypes["default"].bool,
+  /** Whether user input is required on the input before form submission. */
+  isRequired: _propTypes["default"].bool,
+  /** The maximum allowed date that a user may select. */
+  maxValue: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  /** The minimum allowed date that a user may select. */
+  minValue: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object]),
+  /** Handler that is called when the element loses focus. */
+  onBlur: _propTypes["default"].func,
+  /** Handler that is called when the element's selection state changes. */
+  onChange: _propTypes["default"].func,
+  /** Handler that is called when the element receives focus. */
+  onFocus: _propTypes["default"].func,
+  /** Handler that is called when the element's focus status changes. */
+  onFocusChange: _propTypes["default"].func,
+  /** Handler that is called when a key is pressed. */
+  onKeyDown: _propTypes["default"].func,
+  /** Handler that is called when a key is released. */
+  onKeyUp: _propTypes["default"].func
+};
+var _default = Calendar;
+exports["default"] = _default;

package/lib/cjs/components/Calendar/Calendar.stories.js

@@ -0,0 +1,192 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.UnavailableDates = exports.ReadOnly = exports.MinimumDate = exports.MaximumDate = exports.Disabled = exports.DefaultValue = exports.Default = exports.Controlled = exports.Autofocus = void 0;
+var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _date = require("@internationalized/date");
+var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
+var _Calendar = _interopRequireDefault(require("./Calendar"));
+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: 'Components/Calendar',
+  component: _Calendar["default"],
+  parameters: {
+    actions: {
+      argTypesRegex: '^on.*'
+    },
+    docs: {
+      source: {
+        type: 'code'
+      }
+    }
+  },
+  argTypes: _objectSpread({
+    customWeekDays: {
+      control: {
+        type: 'array'
+      }
+    },
+    value: {
+      control: {
+        type: 'text'
+      }
+    },
+    defaultValue: {
+      control: {
+        type: 'text'
+      }
+    },
+    hasAutoFocus: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    },
+    id: {
+      control: {
+        type: 'text'
+      }
+    },
+    isDisabled: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    },
+    isReadOnly: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    },
+    isRequired: {
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    },
+    maxValue: {
+      control: {
+        type: 'text'
+      }
+    },
+    minValue: {
+      control: {
+        type: 'text'
+      }
+    },
+    onChange: {
+      control: {
+        type: 'func'
+      },
+      defaultValue: null,
+      action: 'change'
+    },
+    onFocusChange: {
+      control: {
+        type: 'func'
+      },
+      defaultValue: null,
+      action: 'focus change'
+    }
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
+};
+exports["default"] = _default;
+var Default = function Default(args) {
+  return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
+    "aria-label": "calendar-default"
+  }));
+};
+exports.Default = Default;
+var DefaultValue = function DefaultValue(args) {
+  return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
+    "aria-label": "calendar-with-default-value",
+    defaultValue: "2022-08-10"
+  }));
+};
+exports.DefaultValue = DefaultValue;
+var Controlled = function Controlled(args) {
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    date = _useState2[0],
+    setDate = _useState2[1];
+  return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
+    "aria-label": "calendar-component-controlled",
+    value: date,
+    onChange: setDate
+  }));
+};
+exports.Controlled = Controlled;
+var Disabled = function Disabled(args) {
+  return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
+    "aria-label": "calendar-component-disabled",
+    isDisabled: true
+  }));
+};
+exports.Disabled = Disabled;
+var ReadOnly = function ReadOnly(args) {
+  return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
+    "aria-label": "calendar-component-readonly",
+    isReadOnly: true
+  }));
+};
+exports.ReadOnly = ReadOnly;
+var UnavailableDates = function UnavailableDates(args) {
+  var unavailableRanges = [['2022-07-29', '2022-08-05'], ['2022-08-15', '2022-08-20'], ['2022-08-25', '2022-08-26']];
+  // This function is run against each date in the calendar
+  var isDateUnavailable = function isDateUnavailable(date) {
+    return (0, _some["default"])(unavailableRanges).call(unavailableRanges, function (interval) {
+      return date.compare((0, _date.parseDate)(interval[0])) >= 0 && date.compare((0, _date.parseDate)(interval[1])) <= 0;
+    });
+  };
+  return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
+    "aria-label": "calendar-component-unavailable-dates",
+    defaultValue: "2022-08-10",
+    isDateUnavailable: isDateUnavailable
+  }));
+};
+exports.UnavailableDates = UnavailableDates;
+var MinimumDate = function MinimumDate(args) {
+  return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
+    "aria-label": "calendar-component-min-date",
+    minValue: "2022-09-10",
+    defaultDate: "2022-09-14"
+  }));
+};
+exports.MinimumDate = MinimumDate;
+var MaximumDate = function MaximumDate(args) {
+  return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
+    "aria-label": "calendar-component-max-date",
+    maxValue: "2022-10-10",
+    defaultValue: "2022-10-05"
+  }));
+};
+exports.MaximumDate = MaximumDate;
+var Autofocus = function Autofocus(args) {
+  return (0, _react2.jsx)(_Calendar["default"], (0, _extends2["default"])({}, args, {
+    "aria-label": "calendar-component",
+    hasAutoFocus: true
+  }));
+};
+exports.Autofocus = Autofocus;

package/lib/cjs/components/Calendar/Calendar.styles.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var calendarBody = {
+  borderTop: '1px solid',
+  borderTopColor: 'neutral.80',
+  '& > tr:nth-of-type(odd) ': {
+    backgroundColor: 'white'
+  }
+};
+var calendarButton = {
+  py: 'sm',
+  fontSize: 'sm',
+  fontWeight: 1,
+  color: 'neutral.10',
+  lineHeight: '16px',
+  width: '40.5px',
+  height: '40px',
+  '&.is-hovered': {
+    bg: 'accent.99',
+    cursor: 'pointer'
+  },
+  '&.is-selected': {
+    bg: 'active',
+    color: 'white',
+    outline: 'none',
+    boxShadow: 'none'
+  },
+  '&.is-unavailable': {
+    backgroundColor: 'neutral.80'
+  },
+  '&:not(.is-outside-visible-range)&.is-extreme&:not(.is-completely-disabled)': {
+    backgroundColor: 'neutral.80',
+    color: 'neutral.10',
+    opacity: 1
+  }
+};
+var calendarCell = {
+  cursor: 'default',
+  textAlign: 'center',
+  position: 'relative',
+  color: '#333'
+};
+var columnHeader = {
+  fontSize: '13px',
+  fontWeight: 1,
+  width: '40px',
+  height: '16px',
+  mb: '12px'
+};
+var calendarContainer = {
+  boxShadow: 'standard',
+  textAlign: 'center',
+  maxWidth: '280px'
+};
+var calendarHeader = {
+  justifyContent: 'space-between',
+  mt: '10px',
+  mb: '17px',
+  alignItems: 'center'
+};
+var _default = {
+  calendarBody: calendarBody,
+  calendarButton: calendarButton,
+  calendarCell: calendarCell,
+  calendarContainer: calendarContainer,
+  calendarHeader: calendarHeader,
+  columnHeader: columnHeader
+};
+exports["default"] = _default;