@pingux/astro 2.2.0 → 2.3.0-alpha.1

package/lib/cjs/styles/variants/variants.js

@@ -21,6 +21,8 @@ var _Accordion = _interopRequireDefault(require("../../components/AccordionGroup
 var _Box = _interopRequireDefault(require("../../components/Box/Box.styles"));
 var _Bracket = _interopRequireDefault(require("../../components/Bracket/Bracket.styles"));
 var _Breadcrumb = _interopRequireDefault(require("../../components/Breadcrumbs/Breadcrumb.styles"));
+var _Calendar = _interopRequireDefault(require("../../components/Calendar/Calendar.styles"));
+var _Callout = _interopRequireDefault(require("../../components/Callout/Callout.styles"));
 var _CodeView = _interopRequireDefault(require("../../components/CodeView/CodeView.styles"));
 var _CollapsiblePanel = _interopRequireDefault(require("../../components/CollapsiblePanel/CollapsiblePanel.styles"));
 var _CopyText = _interopRequireDefault(require("../../components/CopyText/CopyText.styles"));
@@ -48,7 +50,6 @@ var _Table = _interopRequireDefault(require("../../components/Table/Table.styles
 var tab = _interopRequireWildcard(require("../../components/Tabs/Tabs.style"));
 var _TimeZone = _interopRequireDefault(require("../../components/TimeZonePicker/TimeZone.styles"));
 var _Tooltip = _interopRequireDefault(require("../../components/TooltipTrigger/Tooltip.styles"));
-var _callout = _interopRequireDefault(require("./callout"));
 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; }
@@ -59,7 +60,8 @@ var _default = _objectSpread({
   box: _Box["default"],
   bracket: _Bracket["default"],
   breadcrumb: _Breadcrumb["default"],
-  callout: _callout["default"],
+  calendar: _Calendar["default"],
+  callout: _Callout["default"],
   codeView: _CodeView["default"],
   collapsiblePanel: _CollapsiblePanel["default"],
   copyText: _CopyText["default"],

package/lib/components/Calendar/Calendar.js

@@ -0,0 +1,190 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+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 React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { createCalendar, parseDate } from '@internationalized/date';
+import { useCalendar } from '@react-aria/calendar';
+import { useLocale } from '@react-aria/i18n';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { useCalendarState } from '@react-stately/calendar';
+import ChevronDoubleLeftIcon from 'mdi-react/ChevronDoubleLeftIcon';
+import ChevronDoubleRightIcon from 'mdi-react/ChevronDoubleRightIcon';
+import ChevronLeftIcon from 'mdi-react/ChevronLeftIcon';
+import ChevronRightIcon from 'mdi-react/ChevronRightIcon';
+import PropTypes from 'prop-types';
+import { Box, Button, Icon, IconButton, Text } from '../../index';
+import CalendarGrid from './CalendarGrid';
+
+/**
+ * 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.
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
+  var value = props.value,
+    defaultValue = props.defaultValue,
+    minValue = props.minValue,
+    maxValue = props.maxValue;
+  var _useLocale = useLocale(),
+    locale = _useLocale.locale;
+  var calenderRef = useRef();
+
+  // istanbul ignore next
+  useImperativeHandle(ref, function () {
+    return calenderRef.current;
+  });
+  var parsedDates = {
+    value: typeof value === 'string' && parseDate(value) || value,
+    defaultValue: typeof defaultValue === 'string' && parseDate(defaultValue) || defaultValue,
+    maxValue: typeof maxValue === 'string' && parseDate(maxValue) || maxValue,
+    minValue: typeof minValue === 'string' && parseDate(minValue) || minValue
+  };
+  var state = useCalendarState(_objectSpread(_objectSpread(_objectSpread({}, props), parsedDates), {}, {
+    locale: locale,
+    createCalendar: createCalendar
+  }));
+  var _useCalendar = 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 = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentDate = _useState2[0],
+    setCurrentDate = _useState2[1];
+  var todayDate = 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 = 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 ___EmotionJSX(Box, _extends({}, calendarProps, {
+    ref: calenderRef,
+    variant: "calendar.calendarContainer"
+  }), ___EmotionJSX(Box, {
+    className: "header",
+    isRow: true,
+    variant: "calendar.calendarHeader",
+    verticalAlign: "middle"
+  }, ___EmotionJSX(IconButton, {
+    onPress: function onPress() {
+      return handleYearSelection(nav.PREVIOUS);
+    },
+    mx: "sm",
+    isDisabled: prevButtonProps.isDisabled,
+    "aria-label": "previous year navigation"
+  }, ___EmotionJSX(Icon, {
+    icon: ChevronDoubleLeftIcon,
+    size: 18
+  })), ___EmotionJSX(IconButton, prevButtonProps, ___EmotionJSX(Icon, {
+    icon: ChevronLeftIcon,
+    size: 18
+  })), ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX(Text, null, calendarProps['aria-label'])), ___EmotionJSX(Text, {
+    variant: "itemTitle",
+    role: "heading",
+    "aria-level": "3",
+    fontWeight: 3
+  }, title), ___EmotionJSX(IconButton, nextButtonProps, ___EmotionJSX(Icon, {
+    icon: ChevronRightIcon,
+    size: 18
+  })), ___EmotionJSX(IconButton, {
+    onPress: function onPress() {
+      return handleYearSelection(nav.NEXT);
+    },
+    mx: "sm",
+    isDisabled: nextButtonProps.isDisabled,
+    "aria-label": "next year navigation"
+  }, ___EmotionJSX(Icon, {
+    icon: ChevronDoubleRightIcon,
+    size: 18
+  }))), ___EmotionJSX(CalendarGrid, {
+    state: state
+  }), ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX(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.oneOfType([PropTypes.string, PropTypes.object]),
+  /** Prop to provide a default date (controlled) */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  /** custom week days for other calendars */
+  customWeekDays: PropTypes.arrayOf(PropTypes.string),
+  /** Whether the element should receive focus on render. */
+  hasAutoFocus: PropTypes.bool,
+  /** The element's unique identifier. */
+  id: PropTypes.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.func,
+  /** Whether the calendar is disabled. */
+  isDisabled: PropTypes.bool,
+  /** Whether the calendar dates are only focusable. */
+  isReadOnly: PropTypes.bool,
+  /** Whether user input is required on the input before form submission. */
+  isRequired: PropTypes.bool,
+  /** The maximum allowed date that a user may select. */
+  maxValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  /** The minimum allowed date that a user may select. */
+  minValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  /** Handler that is called when the element loses focus. */
+  onBlur: PropTypes.func,
+  /** Handler that is called when the element's selection state changes. */
+  onChange: PropTypes.func,
+  /** Handler that is called when the element receives focus. */
+  onFocus: PropTypes.func,
+  /** Handler that is called when the element's focus status changes. */
+  onFocusChange: PropTypes.func,
+  /** Handler that is called when a key is pressed. */
+  onKeyDown: PropTypes.func,
+  /** Handler that is called when a key is released. */
+  onKeyUp: PropTypes.func
+};
+export default Calendar;

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

@@ -0,0 +1,171 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+import _someInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/some";
+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 React, { useState } from 'react';
+import { parseDate } from '@internationalized/date';
+import { ariaAttributeBaseArgTypes } from '../../utils/docUtils/ariaAttributes';
+import Calendar from './Calendar';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Components/Calendar',
+  component: Calendar,
+  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'
+    }
+  }, ariaAttributeBaseArgTypes)
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(Calendar, _extends({}, args, {
+    "aria-label": "calendar-default"
+  }));
+};
+export var DefaultValue = function DefaultValue(args) {
+  return ___EmotionJSX(Calendar, _extends({}, args, {
+    "aria-label": "calendar-with-default-value",
+    defaultValue: "2022-08-10"
+  }));
+};
+export var Controlled = function Controlled(args) {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    date = _useState2[0],
+    setDate = _useState2[1];
+  return ___EmotionJSX(Calendar, _extends({}, args, {
+    "aria-label": "calendar-component-controlled",
+    value: date,
+    onChange: setDate
+  }));
+};
+export var Disabled = function Disabled(args) {
+  return ___EmotionJSX(Calendar, _extends({}, args, {
+    "aria-label": "calendar-component-disabled",
+    isDisabled: true
+  }));
+};
+export var ReadOnly = function ReadOnly(args) {
+  return ___EmotionJSX(Calendar, _extends({}, args, {
+    "aria-label": "calendar-component-readonly",
+    isReadOnly: true
+  }));
+};
+export 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 _someInstanceProperty(unavailableRanges).call(unavailableRanges, function (interval) {
+      return date.compare(parseDate(interval[0])) >= 0 && date.compare(parseDate(interval[1])) <= 0;
+    });
+  };
+  return ___EmotionJSX(Calendar, _extends({}, args, {
+    "aria-label": "calendar-component-unavailable-dates",
+    defaultValue: "2022-08-10",
+    isDateUnavailable: isDateUnavailable
+  }));
+};
+export var MinimumDate = function MinimumDate(args) {
+  return ___EmotionJSX(Calendar, _extends({}, args, {
+    "aria-label": "calendar-component-min-date",
+    minValue: "2022-09-10",
+    defaultDate: "2022-09-14"
+  }));
+};
+export var MaximumDate = function MaximumDate(args) {
+  return ___EmotionJSX(Calendar, _extends({}, args, {
+    "aria-label": "calendar-component-max-date",
+    maxValue: "2022-10-10",
+    defaultValue: "2022-10-05"
+  }));
+};
+export var Autofocus = function Autofocus(args) {
+  return ___EmotionJSX(Calendar, _extends({}, args, {
+    "aria-label": "calendar-component",
+    hasAutoFocus: true
+  }));
+};

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

@@ -0,0 +1,66 @@
+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'
+};
+export default {
+  calendarBody: calendarBody,
+  calendarButton: calendarButton,
+  calendarCell: calendarCell,
+  calendarContainer: calendarContainer,
+  calendarHeader: calendarHeader,
+  columnHeader: columnHeader
+};