@planningcenter/tapestry-react 2.10.0-rc.9 → 2.10.0

package/dist/esm/DateField/DateField.js

@@ -0,0 +1,163 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useState, useCallback, useMemo, useRef } from 'react';
+import Card from '../Card';
+import Calendar from '../Calendar';
+import FocusGroup from '../FocusGroup';
+import Icon from '../Icon';
+import Input from '../Input/Input';
+import Popover from '../Popover';
+import { generateId } from '../utils';
+import { useThemeProps } from '../system';
+import { useArrowKeysToNavigateCalendar } from './useArrowKeysToNavigateCalendar';
+import { useEditableDate } from './useEditableDate';
+
+function DateField(_ref) {
+  var _ref$formatValue = _ref.formatValue,
+      formatValue = _ref$formatValue === void 0 ? 'MMMM dd, yyyy' : _ref$formatValue,
+      _ref$defaultOpen = _ref.defaultOpen,
+      defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
+      keepInView = _ref.keepInView,
+      _ref$lockScrollWhileO = _ref.lockScrollWhileOpen,
+      lockScrollWhileOpen = _ref$lockScrollWhileO === void 0 ? true : _ref$lockScrollWhileO,
+      minDate = _ref.minDate,
+      maxDate = _ref.maxDate,
+      onChange = _ref.onChange,
+      placement = _ref.placement,
+      value = _ref.value,
+      props = _objectWithoutPropertiesLoose(_ref, ["formatValue", "defaultOpen", "keepInView", "lockScrollWhileOpen", "minDate", "maxDate", "onChange", "placement", "value"]);
+
+  var _useThemeProps = useThemeProps('dateField', props),
+      calendarProps = _useThemeProps.calendarProps,
+      color = _useThemeProps.color,
+      popoverProps = _useThemeProps.popoverProps,
+      sizes = _useThemeProps.sizes,
+      sizeThickness = _useThemeProps.thickness,
+      trackColor = _useThemeProps.trackColor,
+      restProps = _objectWithoutPropertiesLoose(_useThemeProps, ["calendarProps", "color", "popoverProps", "sizes", "thickness", "trackColor"]);
+
+  var _useState = useState(defaultOpen),
+      isPopoverOpen = _useState[0],
+      setIsPopoverOpen = _useState[1];
+
+  var id = generateId('datefield');
+  var popover = useRef(null);
+  var inputWrapper = useRef(null);
+  var focusInput = useCallback(function () {
+    var input = inputWrapper.current.querySelector('input');
+
+    if (input.focus) {
+      input.focus();
+    }
+  }, []);
+  var openPopover = useCallback(function () {
+    setIsPopoverOpen(true);
+  }, []);
+  var closePopover = useCallback(function () {
+    setIsPopoverOpen(false);
+  }, []);
+  var dateValidator = useCallback(function (date) {
+    if (!date) return false;
+    if (minDate && date < minDate) return false;
+    if (maxDate && date > maxDate) return false;
+    return true;
+  }, [minDate, maxDate]);
+
+  var _useEditableDate = useEditableDate({
+    date: value,
+    dateFormat: formatValue,
+    dateValidator: dateValidator,
+    onChange: onChange
+  }),
+      formattedDate = _useEditableDate.formattedDate,
+      setDate = _useEditableDate.setDate,
+      clearKeyBuffer = _useEditableDate.clearKeyBuffer,
+      invalidKeyBuffer = _useEditableDate.invalidKeyBuffer;
+
+  var handleDateSelectedFromCalendar = useCallback(function (date) {
+    focusInput();
+    setDate(date);
+    closePopover();
+  }, [focusInput, setDate, closePopover]);
+  var handleNavigationChangeFromCalendar = useCallback(function (date) {
+    setDate(date);
+  }, [setDate]);
+  var navigateCalendarWithArrowKeys = useArrowKeysToNavigateCalendar({
+    date: value,
+    calendarIsOpen: isPopoverOpen,
+    closeCalendar: closePopover,
+    openCalendar: openPopover,
+    onChange: setDate
+  });
+  var handleInputOnChange = useCallback(function (event) {
+    setDate(event.currentTarget.value);
+  }, [setDate]);
+  var handleOnBlur = useCallback(function () {
+    clearKeyBuffer();
+    closePopover();
+  }, [clearKeyBuffer, closePopover]);
+  var inputColors = useMemo(function () {
+    if (invalidKeyBuffer) {
+      return {
+        color: 'error-darker',
+        backgroundColor: 'error-lighter'
+      };
+    } else {
+      return {};
+    }
+  }, [invalidKeyBuffer]);
+
+  var _ref3 = /*#__PURE__*/React.createElement(Icon, {
+    name: "general.calendar",
+    color: "foregroundTertiary",
+    onClick: openPopover
+  });
+
+  return /*#__PURE__*/React.createElement(FocusGroup, {
+    onBlur: handleOnBlur
+  }, function (_ref2) {
+    var requestBlur = _ref2.requestBlur,
+        setRef = _ref2.setRef;
+    return /*#__PURE__*/React.createElement(Popover, _extends({}, popoverProps, {
+      ref: function ref(component) {
+        popover.current = component;
+      },
+      as: Card,
+      elevation: 2,
+      innerRef: function innerRef(node) {
+        popover.current = node;
+        setRef(id + "-popover")(node);
+      },
+      keepInView: keepInView,
+      lockScrollWhileOpen: lockScrollWhileOpen,
+      onBlur: requestBlur,
+      onRequestClose: closePopover,
+      open: isPopoverOpen,
+      placement: placement,
+      tabIndex: -1,
+      anchorElement: /*#__PURE__*/React.createElement(Input, _extends({
+        innerRef: function innerRef(node) {
+          inputWrapper.current = node;
+          setRef(id + "-input")(node);
+        },
+        onBlur: requestBlur,
+        onFocus: openPopover,
+        onChange: handleInputOnChange,
+        onKeyDown: navigateCalendarWithArrowKeys,
+        value: formattedDate,
+        renderRight: _ref3
+      }, inputColors, restProps))
+    }), /*#__PURE__*/React.createElement(Calendar, _extends({
+      size: "sm"
+    }, calendarProps, {
+      date: value,
+      selected: value,
+      minDate: minDate,
+      maxDate: maxDate,
+      onDateSelect: handleDateSelectedFromCalendar,
+      onDateChange: handleNavigationChangeFromCalendar
+    })));
+  });
+}
+
+export default DateField;

package/dist/esm/DateField/index.js

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

package/dist/esm/DateField/parse.js

@@ -0,0 +1,93 @@
+var monthDayYearFormat = /^(0?[1-9]|1[0-2]|(?:(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*))(?:-|\/|\s)(0?[1-9]|[1-2][0-9]|3[0-1])(?:-|\/|,\s)(\d{4})$/i;
+var dayMonthYearFormat = /^(0?[1-9]|[1-2][0-9]|3[0-1])(?:-|\/|\s)(0?[1-9]|1[0-2]|(?:(?:jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)[a-z]*))(?:-|\/|,\s)(\d{4})$/i;
+var yearMonthDayFormat = /^(\d{4})[-/](0?[1-9]|1[0-2])[-/](0?[1-9]|[1-2][0-9]|3[0-1])$/;
+export var parseDate = function parseDate(_ref) {
+  var date = _ref.date,
+      format = _ref.format;
+
+  try {
+    var _parseDateIntoObject = parseDateIntoObject(date, format),
+        year = _parseDateIntoObject.year,
+        month = _parseDateIntoObject.month,
+        day = _parseDateIntoObject.day;
+
+    return new Date(year, month - 1, day);
+  } catch (e) {
+    return null;
+  }
+};
+export var isValidDate = function isValidDate(date) {
+  return monthDayYearFormat.test(date) || yearMonthDayFormat.test(date);
+};
+export var parseMonth = function parseMonth(monthString) {
+  var months = {
+    jan: 1,
+    feb: 2,
+    mar: 3,
+    apr: 4,
+    may: 5,
+    jun: 6,
+    jul: 7,
+    aug: 8,
+    sep: 9,
+    oct: 10,
+    nov: 11,
+    dec: 12
+  };
+  var normalizedString = monthString.toLowerCase().replace(/^0/, '').slice(0, 3);
+
+  if (/^\d+$/.test(normalizedString)) {
+    var month = parseInt(normalizedString, 10);
+
+    if (month >= 1 && month <= 12) {
+      return month;
+    }
+  } else if (normalizedString in months) {
+    return months[normalizedString];
+  }
+
+  throw new Error("Invalid month string: " + monthString);
+};
+
+var parseDateIntoObject = function parseDateIntoObject(date, format) {
+  if (format != null && format.match(/d.*M/) && dayMonthYearFormat.test(date)) {
+    var _dayMonthYearFormat$e = dayMonthYearFormat.exec(date),
+        day = _dayMonthYearFormat$e[1],
+        month = _dayMonthYearFormat$e[2],
+        year = _dayMonthYearFormat$e[3];
+
+    return {
+      year: parseInt(year, 10),
+      month: parseMonth(month),
+      day: parseInt(day, 10)
+    };
+  }
+
+  if (monthDayYearFormat.test(date)) {
+    var _monthDayYearFormat$e = monthDayYearFormat.exec(date),
+        _month = _monthDayYearFormat$e[1],
+        _day = _monthDayYearFormat$e[2],
+        _year = _monthDayYearFormat$e[3];
+
+    return {
+      year: parseInt(_year, 10),
+      month: parseMonth(_month),
+      day: parseInt(_day, 10)
+    };
+  }
+
+  if (yearMonthDayFormat.test(date)) {
+    var _yearMonthDayFormat$e = yearMonthDayFormat.exec(date),
+        _year2 = _yearMonthDayFormat$e[1],
+        _month2 = _yearMonthDayFormat$e[2],
+        _day2 = _yearMonthDayFormat$e[3];
+
+    return {
+      year: parseInt(_year2, 10),
+      month: parseMonth(_month2),
+      day: parseInt(_day2, 10)
+    };
+  }
+
+  throw new Error("Invalid date: " + date);
+};

package/dist/esm/DateField/parse.test.js

@@ -0,0 +1,42 @@
+import { format } from 'date-fns';
+import { parseDate, isValidDate, parseMonth } from './parse';
+describe('isValidDate', function () {
+  var validDates = ['jun 6, 2022', 'June-06-2022', '6-6-2022', '6/6/2022', '06-06-2022', '2022-06-26', // year, month, day
+  '2022/6/1' // year, month, day
+  ];
+  validDates.forEach(function (date) {
+    it("returns true for \"" + date + "\"", function () {
+      expect(isValidDate(date)).toBe(true);
+    });
+  });
+  var invalidDates = ['June-06-22', '13-6-2022', 'June 6 2022', '2022/6/1/1', '2022-15-06'];
+  invalidDates.forEach(function (date) {
+    it("returns false for \"" + date + "\"", function () {
+      expect(isValidDate(date)).toBe(false);
+    });
+  });
+});
+describe('parseDate', function () {
+  var dates = [['January 31, 2022', 'January 31, 2022'], ['jun 9, 2022', 'June 09, 2022'], ['June-09-2022', 'June 09, 2022'], ['6-9-2022', 'June 09, 2022'], ['6/9/2022', 'June 09, 2022'], ['06-09-2022', 'June 09, 2022'], ['2022-06-26', 'June 26, 2022'], ['2022/6/1', 'June 01, 2022', 'MMMM dd, yyyy'], ['15/6/2022', 'June 15, 2022', 'dd/MM/YYYY'], ['1/6/2022', 'June 01, 2022', 'dd MMMM, yyyy'], ['15-aug-2023', 'August 15, 2023', 'dd MMMM, yyyy'], ['15 August, 2023', 'August 15, 2023', 'dd MMMM, yyyy']];
+  dates.forEach(function (_ref) {
+    var date = _ref[0],
+        expected = _ref[1],
+        dateFormat = _ref[2];
+    it("returns " + expected + " for \"" + date + "\"", function () {
+      expect(format(parseDate({
+        date: date,
+        format: dateFormat
+      }), 'MMMM dd, yyyy')).toEqual(expected);
+    });
+  });
+});
+describe('parseMonth', function () {
+  var months = [['jan', 1], ['feb', 2], ['December', 12], ['2', 2], ['12', 12], ['05', 5]];
+  months.forEach(function (_ref2) {
+    var month = _ref2[0],
+        expected = _ref2[1];
+    it("returns " + expected + " for \"" + month + "\"", function () {
+      expect(parseMonth(month)).toBe(expected);
+    });
+  });
+});

package/dist/esm/DateField/useArrowKeysToNavigateCalendar.js

@@ -0,0 +1,40 @@
+import { useCallback } from "react";
+export var useArrowKeysToNavigateCalendar = function useArrowKeysToNavigateCalendar(_ref) {
+  var date = _ref.date,
+      calendarIsOpen = _ref.calendarIsOpen,
+      closeCalendar = _ref.closeCalendar,
+      openCalendar = _ref.openCalendar,
+      onChange = _ref.onChange;
+  var incrementDate = useCallback(function (by) {
+    if (!date) return;
+    var newDate = new Date(date);
+    newDate.setDate(newDate.getDate() + by);
+    onChange(newDate);
+  }, [date, onChange]);
+  var handleInputKeyDown = useCallback(function (event) {
+    if (calendarIsOpen) {
+      if (event.key === 'ArrowUp') {
+        event.preventDefault();
+        incrementDate(-7);
+      } else if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        incrementDate(7);
+      } else if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        incrementDate(-1);
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        incrementDate(1);
+      } else if (event.key === 'Enter') {
+        event.preventDefault();
+        closeCalendar();
+      }
+    } else {
+      if (event.key === 'ArrowDown') {
+        event.preventDefault();
+        openCalendar();
+      }
+    }
+  }, [calendarIsOpen, openCalendar, incrementDate]);
+  return handleInputKeyDown;
+};

package/dist/esm/DateField/useEditableDate.js

@@ -0,0 +1,62 @@
+import { useCallback, useMemo, useState } from "react";
+import { format } from 'date-fns';
+import { parseDate } from "./parse";
+export var useEditableDate = function useEditableDate(_ref) {
+  var date = _ref.date,
+      dateFormat = _ref.dateFormat,
+      dateValidator = _ref.dateValidator,
+      onChange = _ref.onChange;
+
+  var _useState = useState(),
+      keyBuffer = _useState[0],
+      setKeyBuffer = _useState[1];
+
+  var _useState2 = useState(false),
+      invalidKeyBuffer = _useState2[0],
+      setInvalidKeyBuffer = _useState2[1];
+
+  var formattedDate = useMemo(function () {
+    if (keyBuffer !== undefined) {
+      return keyBuffer;
+    } else {
+      return date ? format(date, dateFormat) : '';
+    }
+  }, [date, dateFormat, keyBuffer]);
+  var setKeyBufferAndValidate = useCallback(function (value) {
+    setKeyBuffer(value);
+
+    if (value && !dateValidator(parseDate({
+      date: value,
+      format: dateFormat
+    }))) {
+      setInvalidKeyBuffer(true);
+    } else {
+      setInvalidKeyBuffer(false);
+    }
+  }, [dateFormat, dateValidator]);
+  var setDate = useCallback(function (date) {
+    var newDate;
+
+    if (typeof date === 'string') {
+      setKeyBufferAndValidate(date);
+      newDate = parseDate({
+        date: date,
+        format: dateFormat
+      });
+    } else {
+      setKeyBufferAndValidate(undefined);
+      newDate = date;
+    }
+
+    if (dateValidator(newDate) && onChange) onChange(newDate);
+  }, [onChange, setKeyBufferAndValidate, dateValidator, dateFormat]);
+  var clearKeyBuffer = useCallback(function () {
+    setKeyBufferAndValidate(undefined);
+  }, []);
+  return {
+    formattedDate: formattedDate,
+    setDate: setDate,
+    clearKeyBuffer: clearKeyBuffer,
+    invalidKeyBuffer: invalidKeyBuffer
+  };
+};

package/dist/esm/Dialog/Dialog.js

@@ -0,0 +1,110 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { Button, StackView, Heading, Divider, Box } from '../.';
+var dialogStyles = {
+  padding: 0,
+  minWidth: '400px',
+  borderRadius: '8px',
+  border: 'none',
+  boxShadow: '0px 0px 20px 0px hsla(0, 0%, 0%, 0.15)',
+  '&::backdrop': {
+    backgroundColor: 'rgba(0, 0, 0, 0.4)'
+  }
+};
+
+var _ref2 = jsx(Divider, null);
+
+var _ref3 = jsx(Box, null);
+
+export var Dialog = function Dialog(_ref) {
+  var body = _ref.body,
+      _ref$cancelText = _ref.cancelText,
+      cancelText = _ref$cancelText === void 0 ? 'Cancel' : _ref$cancelText,
+      _ref$confirmText = _ref.confirmText,
+      confirmText = _ref$confirmText === void 0 ? 'Done' : _ref$confirmText,
+      _ref$destroyText = _ref.destroyText,
+      destroyText = _ref$destroyText === void 0 ? 'Delete' : _ref$destroyText,
+      dialogRef = _ref.dialogRef,
+      _ref$onCancelClick = _ref.onCancelClick,
+      onCancelClick = _ref$onCancelClick === void 0 ? function () {
+    return dialogRef.current.close();
+  } : _ref$onCancelClick,
+      _ref$onCloseClick = _ref.onCloseClick,
+      onCloseClick = _ref$onCloseClick === void 0 ? function () {
+    return dialogRef.current.close();
+  } : _ref$onCloseClick,
+      _ref$onConfirmClick = _ref.onConfirmClick,
+      onConfirmClick = _ref$onConfirmClick === void 0 ? function () {
+    return dialogRef.current.close();
+  } : _ref$onConfirmClick,
+      _ref$onDestroyClick = _ref.onDestroyClick,
+      onDestroyClick = _ref$onDestroyClick === void 0 ? function () {
+    return dialogRef.current.close();
+  } : _ref$onDestroyClick,
+      _ref$showCancel = _ref.showCancel,
+      showCancel = _ref$showCancel === void 0 ? false : _ref$showCancel,
+      _ref$showDestroy = _ref.showDestroy,
+      showDestroy = _ref$showDestroy === void 0 ? false : _ref$showDestroy,
+      _ref$subtitle = _ref.subtitle,
+      subtitle = _ref$subtitle === void 0 ? '' : _ref$subtitle,
+      title = _ref.title;
+  return jsx("dialog", {
+    ref: dialogRef,
+    css: dialogStyles
+  }, jsx(Box, {
+    paddingTop: 3,
+    paddingHorizontal: 4
+  }, jsx(StackView, {
+    axis: "horizontal",
+    distribution: "space-between"
+  }, jsx(Heading, {
+    level: 1,
+    margin: 0,
+    fontSize: "25px",
+    lineHeight: "35px",
+    weight: 500
+  }, title), jsx(Button, {
+    title: "Close",
+    icon: {
+      name: 'general.x',
+      color: 'grey-7'
+    },
+    radius: "circle",
+    height: 4,
+    width: 4,
+    variant: "naked",
+    onClick: onCloseClick
+  })), subtitle && jsx(Heading, {
+    level: 2,
+    fontSize: "16px",
+    lineHeight: "26px",
+    weight: 500,
+    color: "grey-8"
+  }, subtitle)), jsx(Box, {
+    padding: 4
+  }, body), _ref2, jsx(Box, {
+    paddingVertical: 3,
+    paddingHorizontal: 4
+  }, jsx(StackView, {
+    axis: "horizontal",
+    distribution: "space-between"
+  }, showDestroy ? jsx(Button, {
+    onClick: onDestroyClick,
+    title: destroyText,
+    theme: "error",
+    variant: "outline"
+  }) : _ref3, jsx(StackView, {
+    axis: "horizontal",
+    spacing: 2
+  }, showCancel && jsx(Button, {
+    title: cancelText,
+    variant: "naked",
+    onClick: onCancelClick
+  }), jsx(Button, {
+    title: confirmText,
+    onClick: onConfirmClick,
+    theme: "primary"
+  })))));
+};
+export default Dialog;