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

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

@@ -0,0 +1,46 @@
+"use strict";
+
+var _dateFns = require("date-fns");
+
+var _parse = require("./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((0, _parse.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((0, _parse.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((0, _dateFns.format)((0, _parse.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((0, _parse.parseMonth)(month)).toBe(expected);
+    });
+  });
+});

package/dist/cjs/DateField/useArrowKeysToNavigateCalendar.js

@@ -0,0 +1,48 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useArrowKeysToNavigateCalendar = void 0;
+
+var _react = require("react");
+
+var useArrowKeysToNavigateCalendar = function useArrowKeysToNavigateCalendar(_ref) {
+  var date = _ref.date,
+      calendarIsOpen = _ref.calendarIsOpen,
+      closeCalendar = _ref.closeCalendar,
+      openCalendar = _ref.openCalendar,
+      onChange = _ref.onChange;
+  var incrementDate = (0, _react.useCallback)(function (by) {
+    if (!date) return;
+    var newDate = new Date(date);
+    newDate.setDate(newDate.getDate() + by);
+    onChange(newDate);
+  }, [date, onChange]);
+  var handleInputKeyDown = (0, _react.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;
+};
+
+exports.useArrowKeysToNavigateCalendar = useArrowKeysToNavigateCalendar;

package/dist/cjs/DateField/useEditableDate.js

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

package/dist/cjs/Dialog/Dialog.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = exports.Dialog = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _ = require("../.");
+
+/** @jsx jsx */
+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 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 (0, _react2.jsx)("dialog", {
+    ref: dialogRef,
+    css: dialogStyles
+  }, (0, _react2.jsx)(_.Box, {
+    paddingTop: 3,
+    paddingHorizontal: 4
+  }, (0, _react2.jsx)(_.StackView, {
+    axis: "horizontal",
+    distribution: "space-between"
+  }, (0, _react2.jsx)(_.Heading, {
+    level: 1,
+    margin: 0,
+    fontSize: "25px",
+    lineHeight: "35px",
+    weight: 500
+  }, title), (0, _react2.jsx)(_.Button, {
+    title: "Close",
+    icon: {
+      name: 'general.x',
+      color: 'grey-7'
+    },
+    radius: "circle",
+    height: 4,
+    width: 4,
+    variant: "naked",
+    onClick: onCloseClick
+  })), subtitle && (0, _react2.jsx)(_.Heading, {
+    level: 2,
+    fontSize: "16px",
+    lineHeight: "26px",
+    weight: 500,
+    color: "grey-8"
+  }, subtitle)), (0, _react2.jsx)(_.Box, {
+    padding: 4
+  }, body), (0, _react2.jsx)(_.Divider, null), (0, _react2.jsx)(_.Box, {
+    paddingVertical: 3,
+    paddingHorizontal: 4
+  }, (0, _react2.jsx)(_.StackView, {
+    axis: "horizontal",
+    distribution: "space-between"
+  }, showDestroy ? (0, _react2.jsx)(_.Button, {
+    onClick: onDestroyClick,
+    title: destroyText,
+    theme: "error",
+    variant: "outline"
+  }) : (0, _react2.jsx)(_.Box, null), (0, _react2.jsx)(_.StackView, {
+    axis: "horizontal",
+    spacing: 2
+  }, showCancel && (0, _react2.jsx)(_.Button, {
+    title: cancelText,
+    variant: "naked",
+    onClick: onCancelClick
+  }), (0, _react2.jsx)(_.Button, {
+    title: confirmText,
+    onClick: onConfirmClick,
+    theme: "primary"
+  })))));
+};
+
+exports.Dialog = Dialog;
+var _default = Dialog;
+exports["default"] = _default;

package/dist/cjs/Dialog/Dialog.test.js

@@ -0,0 +1,200 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("../");
+
+var _react2 = require("@testing-library/react");
+
+describe('Dialog', function () {
+  describe('visual props', function () {
+    it('should set the title', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Dialog, {
+        dialogRef: /*#__PURE__*/_react["default"].createRef(),
+        title: "Test Dialog Title",
+        body: "body"
+      }));
+
+      var title = _react2.screen.getByRole('heading', {
+        level: 1,
+        hidden: true
+      });
+
+      expect(title.textContent).toBe('Test Dialog Title');
+    });
+    it('should not render a subtitle when omitted', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Dialog, {
+        dialogRef: /*#__PURE__*/_react["default"].createRef(),
+        title: "Test Dialog Title",
+        body: "body"
+      }));
+      expect(_react2.screen.queryByRole('heading', {
+        level: 2,
+        hidden: true
+      })).toBeNull();
+    });
+    it('should set the subtitle', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Dialog, {
+        dialogRef: /*#__PURE__*/_react["default"].createRef(),
+        title: "Test Dialog Title",
+        body: "body",
+        subtitle: "Test Dialog Subtitle"
+      }));
+
+      var subtitle = _react2.screen.getByRole('heading', {
+        level: 2,
+        hidden: true
+      });
+
+      expect(subtitle.textContent).toBe('Test Dialog Subtitle');
+    });
+    it('should set the body with a string', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Dialog, {
+        dialogRef: /*#__PURE__*/_react["default"].createRef(),
+        title: "Test Dialog Title",
+        body: "this is the body"
+      }));
+      expect(_react2.screen.getByText('this is the body')).not.toBeNull();
+    });
+    it('should set the body with a node', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Dialog, {
+        dialogRef: /*#__PURE__*/_react["default"].createRef(),
+        title: "Test Dialog Title",
+        body: /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+          "data-testid": "test-div"
+        }, "test div"), /*#__PURE__*/_react["default"].createElement("p", {
+          "data-testid": "test-p"
+        }, "test paragraph"))
+      }));
+      expect(_react2.screen.getByTestId('test-div').textContent).toBe('test div');
+      expect(_react2.screen.getByTestId('test-p').textContent).toBe('test paragraph');
+    });
+    it('should have a Done button by default', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Dialog, {
+        dialogRef: /*#__PURE__*/_react["default"].createRef(),
+        title: "Test Dialog Title",
+        body: "body"
+      }));
+      expect(_react2.screen.getByText('Done')).not.toBeNull();
+    });
+    it('should set the confirm button text', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Dialog, {
+        dialogRef: /*#__PURE__*/_react["default"].createRef(),
+        title: "Test Dialog Title",
+        body: "body",
+        confirmText: "Confirm"
+      }));
+      expect(_react2.screen.getByText('Confirm')).not.toBeNull();
+    });
+    it('should not show a cancel or delete button by default', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Dialog, {
+        dialogRef: /*#__PURE__*/_react["default"].createRef(),
+        title: "Test Dialog Title",
+        body: "body"
+      }));
+      expect(_react2.screen.queryByText('Cancel')).toBeNull();
+      expect(_react2.screen.queryByText('Delete')).toBeNull();
+      expect(_react2.screen.queryAllByRole('button', {
+        hidden: true
+      })).toHaveLength(2);
+    });
+    it('shows a cancel button when showCancel is true', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Dialog, {
+        dialogRef: /*#__PURE__*/_react["default"].createRef(),
+        title: "Test Dialog Title",
+        body: "body",
+        showCancel: true
+      }));
+      expect(_react2.screen.getByText('Cancel')).not.toBeNull();
+    });
+    it('sets the cancel button text', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Dialog, {
+        dialogRef: /*#__PURE__*/_react["default"].createRef(),
+        title: "Test Dialog Title",
+        body: "body",
+        showCancel: true,
+        cancelText: "Abort"
+      }));
+      expect(_react2.screen.getByText('Abort')).not.toBeNull();
+    });
+    it('shows a delete button when showDestroy is true', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Dialog, {
+        dialogRef: /*#__PURE__*/_react["default"].createRef(),
+        title: "Test Dialog Title",
+        body: "body",
+        showDestroy: true
+      }));
+      expect(_react2.screen.getByText('Delete')).not.toBeNull();
+    });
+    it('sets the delete button text', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Dialog, {
+        dialogRef: /*#__PURE__*/_react["default"].createRef(),
+        title: "Test Dialog Title",
+        body: "body",
+        showDestroy: true,
+        destroyText: "Destroy"
+      }));
+      expect(_react2.screen.getByText('Destroy')).not.toBeNull();
+    });
+    it('shows all the buttons with proper config', function () {
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Dialog, {
+        dialogRef: /*#__PURE__*/_react["default"].createRef(),
+        title: "Test Dialog Title",
+        body: "body",
+        showCancel: true,
+        showDestroy: true
+      }));
+      expect(_react2.screen.getByText('Done')).not.toBeNull();
+      expect(_react2.screen.getByText('Cancel')).not.toBeNull();
+      expect(_react2.screen.getByText('Delete')).not.toBeNull();
+      expect(_react2.screen.queryAllByRole('button', {
+        hidden: true
+      })).toHaveLength(4);
+    });
+  });
+  describe('callbacks', function () {
+    it('calls onConfirmClick when the confirm button is clicked', function () {
+      var onConfirmClick = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Dialog, {
+        dialogRef: /*#__PURE__*/_react["default"].createRef(),
+        title: "Test Dialog Title",
+        body: "body",
+        onConfirmClick: onConfirmClick
+      }));
+
+      _react2.screen.getByText('Done').click();
+
+      expect(onConfirmClick).toHaveBeenCalled();
+    });
+    it('calls onCancelClick when the cancel button is clicked', function () {
+      var onCancelClick = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Dialog, {
+        dialogRef: /*#__PURE__*/_react["default"].createRef(),
+        title: "Test Dialog Title",
+        body: "body",
+        showCancel: true,
+        onCancelClick: onCancelClick
+      }));
+
+      _react2.screen.getByText('Cancel').click();
+
+      expect(onCancelClick).toHaveBeenCalled();
+    });
+    it('calls onDestroyClick when the delete button is clicked', function () {
+      var onDestroyClick = jest.fn();
+      (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Dialog, {
+        dialogRef: /*#__PURE__*/_react["default"].createRef(),
+        title: "Test Dialog Title",
+        body: "body",
+        showDestroy: true,
+        onDestroyClick: onDestroyClick
+      }));
+
+      _react2.screen.getByText('Delete').click();
+
+      expect(onDestroyClick).toHaveBeenCalled();
+    });
+  });
+});

package/dist/cjs/Dialog/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _Dialog = require("./Dialog");
+
+exports["default"] = _Dialog.Dialog;
+Object.keys(_Dialog).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Dialog[key]) return;
+  exports[key] = _Dialog[key];
+});

package/dist/cjs/Divider/Divider.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.Divider = Divider;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+/**
+ * Used to break up content
+ */
+function Divider(_ref) {
+  var _ref$axis = _ref.axis,
+      axis = _ref$axis === void 0 ? 'horizontal' : _ref$axis,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'separatorTertiary' : _ref$color,
+      _ref$margin = _ref.margin,
+      margin = _ref$margin === void 0 ? 0 : _ref$margin,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 1 : _ref$size,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["axis", "color", "margin", "size"]);
+  var props = {
+    as: 'div',
+    alignSelf: 'stretch',
+    backgroundColor: color
+  };
+
+  if (axis === 'horizontal') {
+    props.height = size + 'px';
+    props.marginVertical = margin;
+  } else {
+    props.width = size + 'px';
+    props.marginHorizontal = margin;
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({}, props, restProps));
+}

package/dist/cjs/Divider/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+exports.__esModule = true;
+var _exportNames = {};
+exports["default"] = void 0;
+
+var _Divider = require("./Divider");
+
+exports["default"] = _Divider.Divider;
+Object.keys(_Divider).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Divider[key]) return;
+  exports[key] = _Divider[key];
+});