@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/Button/Input.js

@@ -0,0 +1,163 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(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 source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import React, { Children, cloneElement, forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import { tabbable } from 'tabbable';
+import ResizeObserver from 'resize-observer-polyfill';
+import { Box } from '../Box';
+import { useBoxSize } from '../system';
+import { getRect } from '../utils';
+import { Button } from './Button';
+
+function getFixedValue(value) {
+  // Safari doesn't like sub pixels
+  return parseInt(value.toFixed(0), 10) + 1;
+}
+
+var ButtonInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      style = _ref.style,
+      size = _ref.size,
+      onOpen = _ref.onOpen,
+      onClose = _ref.onClose,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "style", "size", "onOpen", "onClose"]);
+
+  var containerRef = useRef();
+  var inputRef = useRef();
+  var buttonRef = useRef();
+
+  var _useState = useState(false),
+      isOpen = _useState[0],
+      setOpen = _useState[1];
+
+  var _useBoxSize = useBoxSize(size),
+      boxSize = _useBoxSize.boxSize;
+
+  var containerProps = {
+    innerRef: containerRef,
+    height: boxSize,
+    position: 'relative',
+    overflow: 'hidden',
+    transition: 'width 200ms cubic-bezier(.02,.8,.38,1)'
+  };
+  var inputContainerProps = {
+    innerRef: inputRef,
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+    opacity: isOpen ? 1 : 0,
+    transition: 'opacity 180ms ease'
+  };
+  var inputProps = {
+    size: size,
+    secondaryStroke: false,
+    disabled: !isOpen,
+    onBlur: function onBlur() {
+      var input = inputRef.current.querySelector('input');
+
+      if (input.value.length === 0) {
+        close();
+      }
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Escape') {
+        close();
+      }
+    }
+  };
+  var buttonContainerProps = {
+    innerRef: buttonRef,
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    left: 0,
+    opacity: isOpen ? 0 : 1,
+    transition: 'opacity 180ms ease'
+  };
+
+  var buttonProps = _objectSpread(_objectSpread({}, restProps), {}, {
+    size: size,
+    disabled: isOpen,
+    onClick: open
+  });
+
+  function open() {
+    setOpen(true);
+    var input = inputRef.current.querySelector('input');
+
+    if (input && input.focus) {
+      setTimeout(function () {
+        return input.focus();
+      });
+    }
+
+    if (onOpen) {
+      onOpen();
+    }
+  }
+
+  function close() {
+    setOpen(false);
+
+    var _tabbable = tabbable(buttonRef.current),
+        button = _tabbable[0];
+
+    if (button && button.focus) {
+      setTimeout(function () {
+        return button.focus();
+      });
+    }
+
+    if (onClose) {
+      onClose();
+    }
+  }
+
+  function transition() {
+    var container = containerRef.current;
+    var inputChild = inputRef.current.firstChild;
+    var buttonChild = buttonRef.current.firstChild;
+    inputChild.style.width = '';
+    buttonChild.style.width = '';
+    var inputRect = getRect(inputChild, {
+      clone: true
+    });
+    var buttonRect = getRect(buttonChild, {
+      clone: true
+    });
+    var containerWidth = getFixedValue(isOpen ? inputRect.width : buttonRect.width);
+    container.style.width = containerWidth + 'px';
+    inputChild.style.width = '100%';
+    buttonChild.style.width = '100%';
+  }
+
+  useLayoutEffect(function () {
+    transition();
+    var ro = new ResizeObserver(transition);
+    ro.observe(isOpen ? inputRef.current : buttonRef.current);
+    return function () {
+      ro.disconnect();
+    };
+  }, [isOpen]);
+  useImperativeHandle(ref, function () {
+    return {
+      open: open,
+      close: close
+    };
+  }, []); // @ts-ignore
+
+  var button = /*#__PURE__*/React.createElement(Button, buttonProps);
+  return /*#__PURE__*/React.createElement(Box, containerProps, /*#__PURE__*/React.createElement(Box, inputContainerProps, typeof children === 'function' ? children({
+    inputProps: inputProps,
+    isOpen: isOpen,
+    open: open,
+    close: close
+  }) : /*#__PURE__*/cloneElement(Children.only(children), inputProps)), /*#__PURE__*/React.createElement(Box, buttonContainerProps, button));
+});
+ButtonInput.displayName = 'Button.Input';
+export default ButtonInput;

package/dist/esm/Button/index.js

@@ -0,0 +1,2 @@
+export * from './Button';
+export { Button as default } from './Button';

package/dist/esm/Calendar/Calendar.js

@@ -0,0 +1,349 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { Children, forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { addMonths, addYears, format, getMonth, getYear, isAfter, isBefore, isSameDay, isSameMonth, isWithinInterval } from 'date-fns';
+import Box from '../Box';
+import Button from '../Button';
+import { useThemeValue } from '../system';
+import Group from '../Group';
+import HeadingUppercase from '../HeadingUppercase';
+import StackView from '../StackView';
+import { useHover } from '../hooks';
+import Day from './Day';
+import { getMonthWeekDays, getMonthWeeks, getNextOccurrenceOfDay, getYears, MAX_MONTH_DEFAULT, MAX_YEAR_DEFAULT, MIN_MONTH_DEFAULT, MIN_YEAR_DEFAULT, MONTHS, TODAY } from './utils';
+var sizes = {
+  sm: {
+    buttonSize: 'sm',
+    cellSize: 4,
+    fontSize: 4,
+    headerFontSize: 4,
+    statusOffset: '12.5%',
+    trimWeekdays: 2
+  },
+  md: {
+    buttonSize: 'sm',
+    cellSize: 5,
+    fontSize: 4,
+    headerFontSize: 2,
+    trimWeekdays: 3
+  },
+  lg: {
+    buttonSize: 'sm',
+    cellSize: 7,
+    fontSize: 3,
+    headerFontSize: 2,
+    trimWeekdays: 3
+  }
+};
+var Calendar = /*#__PURE__*/forwardRef(function (_ref, calendarRef) {
+  var date = _ref.date,
+      initialDate = _ref.initialDate,
+      maxDate = _ref.maxDate,
+      minDate = _ref.minDate,
+      onDateChange = _ref.onDateChange,
+      onDateSelect = _ref.onDateSelect,
+      renderDay = _ref.renderDay,
+      selected = _ref.selected,
+      size = _ref.size,
+      weekStartsOn = _ref.weekStartsOn,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["date", "initialDate", "maxDate", "minDate", "onDateChange", "onDateSelect", "renderDay", "selected", "size", "weekStartsOn"]);
+
+  var calendarTheme = useThemeValue('calendar');
+  var lastDate = useRef(date);
+
+  var _useHover = useHover(),
+      hover = _useHover.hover,
+      hoverProps = _useHover.hoverProps;
+
+  var _useState = useState(date || initialDate),
+      currentDate = _useState[0],
+      setCurrentDate = _useState[1];
+
+  var _useState2 = useState('calendar'),
+      currentView = _useState2[0],
+      setCurrentView = _useState2[1];
+
+  var isCalendarView = currentView === 'calendar';
+  var isYearsView = currentView === 'years';
+  var isMonthsView = currentView === 'months';
+  var currentMonth = getMonth(currentDate);
+  var currentYear = getYear(currentDate);
+  var currentYears = getYears(currentYear);
+  var minMonth = getMonth(minDate) || MIN_MONTH_DEFAULT;
+  var maxMonth = getMonth(maxDate) || MAX_MONTH_DEFAULT;
+  var minYear = getYear(minDate) || MIN_YEAR_DEFAULT;
+  var maxYear = getYear(maxDate) || MAX_YEAR_DEFAULT;
+  var _sizes$size = sizes[size],
+      buttonSize = _sizes$size.buttonSize,
+      cellSize = _sizes$size.cellSize,
+      fontSize = _sizes$size.fontSize,
+      headerFontSize = _sizes$size.headerFontSize,
+      statusOffset = _sizes$size.statusOffset,
+      trimWeekdays = _sizes$size.trimWeekdays;
+  var weekdays = getMonthWeekDays({
+    trimWeekdays: trimWeekdays,
+    weekStartsOn: weekStartsOn || calendarTheme.weekStartsOn || 0
+  });
+  var weeks = getMonthWeeks(currentDate, {
+    forceSixWeeks: true,
+    weekStartsOn: weekStartsOn || calendarTheme.weekStartsOn || 0
+  });
+
+  var setDate = function setDate(nextDate, moveToCalendarView) {
+    var nextView = moveToCalendarView ? 'calendar' : currentView;
+
+    if (Calendar.isBeforeDay(nextDate, minDate)) {
+      nextDate = minDate;
+    } else if (Calendar.isAfterDay(nextDate, maxDate)) {
+      nextDate = maxDate;
+    }
+
+    if (date === null) {
+      setCurrentDate(nextDate);
+      setCurrentView(nextView);
+    } else {
+      setCurrentView(nextView);
+    }
+
+    if (onDateChange) {
+      onDateChange(nextDate);
+    }
+  };
+
+  var navigateCalendar = function navigateCalendar(direction) {
+    var isYearsView = currentView === 'years';
+    var add = isYearsView ? addYears : addMonths;
+    setDate(add(currentDate, direction));
+  };
+
+  useEffect(function () {
+    if (date !== null && !isSameDay(lastDate.current, date)) {
+      setCurrentDate(date);
+    }
+
+    lastDate.current = date;
+  }, [date]);
+  useImperativeHandle(calendarRef, function () {
+    return {
+      setDate: setDate,
+      navigateCalendar: navigateCalendar
+    };
+  });
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    innerRef: calendarRef
+  }, hoverProps, restProps), /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    alignment: "center",
+    distribution: "space-between",
+    padding: 0.5,
+    paddingBottom: 0
+  }, /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    spacing: 0.5
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "button",
+    "aria-label": isMonthsView ? 'Choose dates' : 'Choose month',
+    padding: 0.25,
+    fontSize: headerFontSize,
+    lineHeight: 3,
+    radius: 3,
+    cursor: "pointer",
+    backgroundColor: hover ? 'highlight' : 'transparent',
+    hover: {
+      backgroundColor: 'highlightSecondary'
+    },
+    onClick: function onClick() {
+      setCurrentView(isMonthsView ? 'calendar' : 'months');
+    }
+  }, format(currentDate, 'MMMM')), /*#__PURE__*/React.createElement(Box, {
+    as: "button",
+    "aria-label": isYearsView ? 'Choose dates' : 'Choose year',
+    padding: 0.25,
+    fontSize: headerFontSize,
+    lineHeight: 3,
+    radius: 3,
+    cursor: "pointer",
+    backgroundColor: hover ? 'highlight' : 'transparent',
+    hover: {
+      backgroundColor: 'highlightSecondary'
+    },
+    onClick: function onClick() {
+      setCurrentView(isYearsView ? 'calendar' : 'years');
+    }
+  }, currentYear)), /*#__PURE__*/React.createElement(Group, {
+    marginRight: 0.5,
+    childProps: {
+      variant: 'outline',
+      size: buttonSize
+    }
+  }, /*#__PURE__*/React.createElement(Button, {
+    title: "Previous month",
+    icon: {
+      name: 'caret-left'
+    },
+    disabled: isYearsView ? currentYear <= minYear : isSameMonth(currentDate, minDate),
+    onClick: function onClick() {
+      return navigateCalendar(-1);
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    tooltip: {
+      title: 'Today'
+    },
+    icon: {
+      name: 'radio-1'
+    },
+    onClick: function onClick() {
+      return setDate(TODAY, true);
+    }
+  }), /*#__PURE__*/React.createElement(Button, {
+    title: "Next month",
+    icon: {
+      name: 'caret-right'
+    },
+    disabled: isYearsView ? currentYear >= maxYear : isSameMonth(currentDate, maxDate),
+    onClick: function onClick() {
+      return navigateCalendar(1);
+    }
+  }))), isMonthsView && /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    width: cellSize * 7,
+    height: cellSize * 6 + 3.5,
+    marginTop: 0.5,
+    wrap: true
+  }, MONTHS.map(function (month, monthIndex) {
+    var monthDisabled = !Calendar.isWithinRange(new Date(currentYear, monthIndex, 1), {
+      start: new Date(minYear, minMonth, 1),
+      end: new Date(maxYear, maxMonth, 1)
+    });
+    return /*#__PURE__*/React.createElement(StackView, {
+      key: month,
+      as: "button",
+      basis: cellSize * 7 / 3,
+      alignment: "center",
+      distribution: "center",
+      fontWeight: 700,
+      cursor: monthDisabled ? 'not-allowed' : 'pointer',
+      backgroundColor: currentMonth === monthIndex ? 'surfaceSecondary' : 'transparent',
+      opacity: monthDisabled ? 0.6 : undefined,
+      hover: {
+        backgroundColor: monthDisabled ? undefined : 'highlight'
+      },
+      disabled: monthDisabled,
+      onClick: function onClick() {
+        var monthDifference = monthIndex - currentMonth;
+        setDate(addMonths(currentDate, monthDifference), true);
+      },
+      children: /*#__PURE__*/React.createElement(HeadingUppercase, {
+        cursor: "inherit"
+      }, month.substring(0, 3))
+    });
+  })), isYearsView && /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    width: cellSize * 7,
+    height: cellSize * 6 + 3.5,
+    marginTop: 0.5,
+    wrap: true
+  }, currentYears.map(function (year) {
+    var yearDisabled = !(year >= minYear && year <= maxYear);
+    return /*#__PURE__*/React.createElement(StackView, {
+      key: year,
+      as: "button",
+      basis: cellSize * 7 / 3,
+      alignment: "center",
+      distribution: "center",
+      fontWeight: 700,
+      cursor: yearDisabled ? 'not-allowed' : 'pointer',
+      backgroundColor: currentYear === year ? 'surfaceTertiary' : 'transparent',
+      opacity: yearDisabled ? 0.6 : undefined,
+      hover: {
+        backgroundColor: yearDisabled ? undefined : 'highlight'
+      },
+      disabled: yearDisabled,
+      onClick: function onClick() {
+        var yearDifference = year - currentYear;
+        setDate(addYears(currentDate, yearDifference), true);
+      },
+      children: /*#__PURE__*/React.createElement(HeadingUppercase, {
+        cursor: "inherit"
+      }, year)
+    });
+  })), isCalendarView && /*#__PURE__*/React.createElement(StackView, null, /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal"
+  }, weekdays.map(function (weekday) {
+    return /*#__PURE__*/React.createElement(StackView, {
+      key: weekday.full,
+      alignment: "center",
+      distribution: "center",
+      width: cellSize,
+      height: 4
+    }, /*#__PURE__*/React.createElement(HeadingUppercase, {
+      fontSize: 6
+    }, weekday.trimmed));
+  })), weeks.map(function (week, index) {
+    return /*#__PURE__*/React.createElement(StackView, {
+      key: index,
+      axis: "horizontal"
+    }, Children.toArray(week.map(function (date) {
+      var inSameMonth = isSameMonth(date, currentDate);
+      var isMinDate = isBefore(date, minDate);
+      var isMaxDate = isAfter(date, maxDate);
+      var isSelected = isSameDay(date, selected);
+      var isToday = isSameDay(date, TODAY);
+      var backgroundColor = isMinDate || isMaxDate ? 'surfaceSecondary' : 'inherit';
+      var color = isSelected ? 'white' : inSameMonth ? 'inherit' : 'foregroundTertiary';
+      return renderDay({
+        backgroundColor: backgroundColor,
+        cellSize: cellSize,
+        color: color,
+        date: date,
+        fontSize: fontSize,
+        inSameMonth: inSameMonth,
+        isMinDate: isMinDate,
+        isMaxDate: isMaxDate,
+        isSelected: isSelected,
+        isToday: isToday,
+        selectDate: onDateSelect,
+        statusOffset: statusOffset
+      });
+    })));
+  })));
+});
+Calendar.defaultProps = {
+  date: null,
+  initialDate: TODAY,
+  minDate: null,
+  maxDate: null,
+  renderDay: function renderDay(props) {
+    return /*#__PURE__*/React.createElement(Day, props);
+  },
+  size: 'md'
+};
+Calendar.TODAY = TODAY;
+Calendar.Day = Day;
+Calendar.getNextOccurrenceOfDay = getNextOccurrenceOfDay;
+
+Calendar.isAfterDay = function (date, dateToCompare) {
+  return date && dateToCompare && isAfter(date, dateToCompare);
+};
+
+Calendar.isBeforeDay = function (date, dateToCompare) {
+  return date && dateToCompare && isBefore(date, dateToCompare);
+};
+
+Calendar.isSameDay = function (dateLeft, dateRight) {
+  return dateLeft && dateRight && isSameDay(dateLeft, dateRight);
+};
+
+Calendar.isWithinRange = function (date, _ref2) {
+  var start = _ref2.start,
+      end = _ref2.end;
+
+  if (date && start && end && isAfter(end, start)) {
+    return isWithinInterval(date, {
+      start: start,
+      end: end
+    });
+  }
+};
+
+export default Calendar;

package/dist/esm/Calendar/Day.js

@@ -0,0 +1,92 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Icon from '../Icon';
+import StackView from '../StackView';
+import Text from '../Text';
+
+var DayStatus = function DayStatus(_ref) {
+  var color = _ref.color,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["color"]);
+
+  return /*#__PURE__*/React.createElement(Icon.Status, _extends({
+    size: "5px",
+    color: color
+  }, restProps));
+};
+
+var Day = function Day(_ref2) {
+  var backgroundColor = _ref2.backgroundColor,
+      cellSize = _ref2.cellSize,
+      children = _ref2.children,
+      color = _ref2.color,
+      date = _ref2.date,
+      disabled = _ref2.disabled,
+      fontSize = _ref2.fontSize,
+      fontWeight = _ref2.fontWeight,
+      inSameMonth = _ref2.inSameMonth,
+      isMinDate = _ref2.isMinDate,
+      isMaxDate = _ref2.isMaxDate,
+      isSelected = _ref2.isSelected,
+      isToday = _ref2.isToday,
+      selectDate = _ref2.selectDate,
+      _ref2$selectedColor = _ref2.selectedColor,
+      selectedColor = _ref2$selectedColor === void 0 ? 'primary' : _ref2$selectedColor,
+      _ref2$statusColor = _ref2.statusColor,
+      statusColor = _ref2$statusColor === void 0 ? 'transparent' : _ref2$statusColor,
+      statuses = _ref2.statuses,
+      _ref2$statusOffset = _ref2.statusOffset,
+      statusOffset = _ref2$statusOffset === void 0 ? '15%' : _ref2$statusOffset,
+      restProps = _objectWithoutPropertiesLoose(_ref2, ["backgroundColor", "cellSize", "children", "color", "date", "disabled", "fontSize", "fontWeight", "inSameMonth", "isMinDate", "isMaxDate", "isSelected", "isToday", "selectDate", "selectedColor", "statusColor", "statuses", "statusOffset"]);
+
+  var affordance = !disabled && !isMinDate && !isMaxDate && (selectDate || restProps.onClick || restProps.onMouseDown);
+  return /*#__PURE__*/React.createElement(StackView, {
+    width: cellSize,
+    height: cellSize,
+    position: "relative",
+    userSelect: "none",
+    backgroundColor: backgroundColor,
+    color: color,
+    cursor: affordance ? 'pointer' : 'default',
+    onClick: function onClick() {
+      return selectDate && !disabled && !isMinDate && !isMaxDate && selectDate(date);
+    }
+  }, /*#__PURE__*/React.createElement(StackView, _extends({
+    width: "100%",
+    height: "100%",
+    alignment: "center",
+    distribution: "center",
+    pointerEvents: (disabled || isMinDate || isMaxDate) && 'none',
+    hover: affordance && {
+      backgroundColor: 'highlight'
+    }
+  }, restProps), (isSelected || isToday || statusColor) && /*#__PURE__*/React.createElement(Icon.Status, {
+    size: cellSize,
+    color: isSelected ? selectedColor : isToday ? 'surfaceTertiary' : statusColor,
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)"
+  }), /*#__PURE__*/React.createElement(Text, {
+    as: "span",
+    fontSize: fontSize,
+    fontWeight: fontWeight,
+    lineHeight: 2,
+    position: "relative"
+  }, date.getDate()), statuses && /*#__PURE__*/React.createElement(StackView, {
+    axis: "horizontal",
+    distribution: "center",
+    position: "absolute",
+    bottom: statusOffset,
+    left: 0,
+    right: 0,
+    spacing: 0.25
+  }, statuses.map(function (color, index) {
+    return /*#__PURE__*/React.createElement(DayStatus, {
+      key: index,
+      color: isSelected ? 'white' : color
+    });
+  }))));
+};
+
+export default Day;

package/dist/esm/Calendar/index.js

@@ -0,0 +1,2 @@
+import Calendar from './Calendar';
+export default Calendar;

package/dist/esm/Calendar/utils.js

@@ -0,0 +1,80 @@
+import { addWeeks, eachDayOfInterval, endOfMonth, endOfWeek, getISODay, isSameDay, lastDayOfWeek, setISODay, startOfDay, startOfMonth, startOfWeek } from 'date-fns';
+export var TODAY = startOfDay(new Date());
+export var YEARS_PER_PAGE = 12;
+export var DAYS_IN_WEEK = 7;
+export var DAYS_IN_SIX_WEEKS = 42;
+export var MIN_MONTH_DEFAULT = 0;
+export var MAX_MONTH_DEFAULT = 11;
+export var MIN_YEAR_DEFAULT = 1900;
+export var MAX_YEAR_DEFAULT = 3000;
+export var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+export var WEEKDAYS = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+export function getMonthWeekDays(_ref) {
+  var trimWeekdays = _ref.trimWeekdays,
+      weekStartsOn = _ref.weekStartsOn;
+  var weekdays = [].concat(WEEKDAYS);
+  var sortedWeekdays = weekdays.concat(weekdays.splice(0, weekStartsOn));
+  return sortedWeekdays.map(function (weekday, index) {
+    return {
+      full: weekday,
+      trimmed: trimWeekdays ? weekday.substring(0, parseInt(trimWeekdays, 10)) : weekday
+    };
+  });
+}
+export function getMonthWeeks(date, _temp) {
+  var _ref2 = _temp === void 0 ? {} : _temp,
+      _ref2$forceSixWeeks = _ref2.forceSixWeeks,
+      forceSixWeeks = _ref2$forceSixWeeks === void 0 ? true : _ref2$forceSixWeeks,
+      _ref2$weekStartsOn = _ref2.weekStartsOn,
+      weekStartsOn = _ref2$weekStartsOn === void 0 ? 0 : _ref2$weekStartsOn,
+      locale = _ref2.locale;
+
+  var weekOptions = {
+    weekStartsOn: weekStartsOn,
+    locale: locale
+  };
+  var monthFirstDate = startOfMonth(date);
+  var monthLastDate = endOfMonth(date);
+  var monthFirstWeekdayDate = startOfWeek(monthFirstDate, weekOptions);
+  var monthLastWeekdayDate = lastDayOfWeek(monthLastDate, weekOptions);
+  var currentEndOfWeek = endOfWeek(monthFirstWeekdayDate, weekOptions);
+  var days = eachDayOfInterval({
+    start: monthFirstWeekdayDate,
+    end: monthLastWeekdayDate
+  });
+  var week = [];
+
+  if (forceSixWeeks && days.length < DAYS_IN_SIX_WEEKS) {
+    days = eachDayOfInterval({
+      start: monthFirstWeekdayDate,
+      end: addWeeks(monthLastWeekdayDate, DAYS_IN_SIX_WEEKS % days.length / DAYS_IN_WEEK)
+    });
+  }
+
+  return days.reduce(function (weeks, day) {
+    week.push(day);
+
+    if (isSameDay(day, currentEndOfWeek)) {
+      weeks.push(week);
+      week = [];
+    } else {
+      currentEndOfWeek = endOfWeek(day, weekOptions);
+    }
+
+    return weeks;
+  }, []);
+}
+export function getNextOccurrenceOfDay(dayOfWeek) {
+  var date = setISODay(TODAY, dayOfWeek);
+  return getISODay(TODAY) <= dayOfWeek ? date : addWeeks(date, 1);
+}
+export function getYears(activeYear) {
+  var activeOffset = activeYear % YEARS_PER_PAGE;
+  var years = [];
+
+  for (var index = 0; index < YEARS_PER_PAGE; index++) {
+    years.push(activeYear - activeOffset + index);
+  }
+
+  return years;
+}