@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/Wizard/Wizard.js

@@ -0,0 +1,238 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _Card = _interopRequireDefault(require("../Card"));
+
+var _Divider = _interopRequireDefault(require("../Divider"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _PagerView = _interopRequireDefault(require("../PagerView"));
+
+var _StepperProgress = _interopRequireDefault(require("../StepperProgress"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _Step = _interopRequireDefault(require("./Step"));
+
+var _WizardContext = _interopRequireDefault(require("./WizardContext"));
+
+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) { (0, _defineProperty2["default"])(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; }
+
+var Wizard = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(Wizard, _Component);
+
+  function Wizard() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      activeStepIndex: 0,
+      payload: _this.props.initialPayload,
+      steps: [],
+      totalSteps: -1,
+      sendingPayload: false
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setPayload", function (newPayload, cb) {
+      _this.setState(function (state) {
+        return {
+          payload: _objectSpread(_objectSpread({}, state.payload), newPayload)
+        };
+      }, cb);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setSteps", function (getSteps) {
+      _this.setState(function (state) {
+        var nextSteps = getSteps(state.steps);
+        return {
+          steps: nextSteps,
+          totalSteps: nextSteps.length
+        };
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "addStep", function (step) {
+      _this.setSteps(function (steps) {
+        return [].concat(steps, [step]);
+      });
+
+      return function () {
+        _this.setSteps(function (steps) {
+          return steps.filter(function (previousStep) {
+            return previousStep.name !== step.name;
+          });
+        });
+      };
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSubmit", function () {
+      if (_this.props.onSubmit) {
+        var _complete = function _complete() {
+          return _this.setState({
+            sendingPayload: false
+          });
+        };
+
+        _this.setState({
+          sendingPayload: true
+        });
+
+        _this.props.onSubmit(_this.state.payload, _complete);
+      }
+    });
+    return _this;
+  }
+
+  var _proto = Wizard.prototype;
+
+  _proto.isCurrentStepValid = function isCurrentStepValid() {
+    var _this$state = this.state,
+        activeStepIndex = _this$state.activeStepIndex,
+        payload = _this$state.payload,
+        steps = _this$state.steps;
+    var currentStep = steps[activeStepIndex];
+    return currentStep && currentStep.valid ? currentStep.valid(payload) : true;
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        autoFocus = _this$props.autoFocus,
+        backButtonProps = _this$props.backButtonProps,
+        buttonProps = _this$props.buttonProps,
+        cancelButtonProps = _this$props.cancelButtonProps,
+        children = _this$props.children,
+        footerProps = _this$props.footerProps,
+        initialPayload = _this$props.initialPayload,
+        nextButtonProps = _this$props.nextButtonProps,
+        nextButtonTitle = _this$props.nextButtonTitle,
+        onCancel = _this$props.onCancel,
+        onSubmit = _this$props.onSubmit,
+        renderProgress = _this$props.renderProgress,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["autoFocus", "backButtonProps", "buttonProps", "cancelButtonProps", "children", "footerProps", "initialPayload", "nextButtonProps", "nextButtonTitle", "onCancel", "onSubmit", "renderProgress"]);
+    var _this$state2 = this.state,
+        activeStepIndex = _this$state2.activeStepIndex,
+        sendingPayload = _this$state2.sendingPayload,
+        steps = _this$state2.steps,
+        totalSteps = _this$state2.totalSteps;
+    return /*#__PURE__*/_react["default"].createElement(_WizardContext["default"].Provider, {
+      value: {
+        activeStepIndex: this.state.activeStepIndex,
+        addStep: this.addStep,
+        setPayload: this.setPayload,
+        payload: this.state.payload,
+        totalSteps: this.state.totalSteps
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+      alignment: "center",
+      minWidth: 48,
+      maxWidth: 96
+    }, restProps), renderProgress ? renderProgress({
+      activeStepIndex: activeStepIndex,
+      steps: steps,
+      totalSteps: totalSteps
+    }) : /*#__PURE__*/_react["default"].createElement(_StepperProgress["default"], {
+      width: "80%",
+      paddingTop: 6,
+      paddingBottom: 4,
+      activeStepIndex: activeStepIndex
+    }, steps.map(function (step, index) {
+      return /*#__PURE__*/_react["default"].createElement(_StepperProgress["default"].Step, {
+        key: index,
+        renderEnd: /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+          align: "center",
+          marginTop: 2
+        }, step.name)
+      });
+    })), /*#__PURE__*/_react["default"].createElement(_Card["default"], {
+      spacing: /*#__PURE__*/_react["default"].createElement(_Divider["default"], null),
+      elevation: 1
+    }, /*#__PURE__*/_react["default"].createElement(_PagerView["default"], {
+      activeViewIndex: activeStepIndex,
+      autoFocus: autoFocus
+    }, _react.Children.map(children, function (child, index) {
+      return /*#__PURE__*/_react["default"].createElement(_PagerView["default"].View, {
+        key: index
+      }, child);
+    })), /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+      axis: "horizontal",
+      distribution: activeStepIndex > 0 ? 'space-between' : 'end',
+      padding: 1,
+      spacing: 1
+    }, footerProps), activeStepIndex === 0 && onCancel && /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+      disabled: sendingPayload,
+      onClick: onCancel,
+      size: "lg",
+      title: "Cancel",
+      variant: "naked"
+    }, buttonProps, cancelButtonProps)), activeStepIndex > 0 && /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+      disabled: sendingPayload,
+      iconLeft: {
+        name: 'caret-left'
+      },
+      onClick: function onClick() {
+        return _this2.setState({
+          activeStepIndex: activeStepIndex - 1
+        });
+      },
+      size: "lg",
+      title: "Back",
+      variant: "naked"
+    }, buttonProps, backButtonProps)), /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+      disabled: !this.isCurrentStepValid(),
+      onClick: function onClick() {
+        return activeStepIndex >= totalSteps - 1 ? _this2.handleSubmit() : _this2.setState({
+          activeStepIndex: activeStepIndex + 1
+        });
+      },
+      size: "lg",
+      spinner: sendingPayload,
+      theme: "primary",
+      title: nextButtonTitle({
+        activeStepIndex: activeStepIndex,
+        steps: steps,
+        totalSteps: totalSteps
+      })
+    }, buttonProps, nextButtonProps))))));
+  };
+
+  return Wizard;
+}(_react.Component);
+
+(0, _defineProperty2["default"])(Wizard, "Step", _Step["default"]);
+(0, _defineProperty2["default"])(Wizard, "defaultProps", {
+  autoFocus: true,
+  initialPayload: {},
+  nextButtonTitle: function nextButtonTitle(_ref) {
+    var activeStepIndex = _ref.activeStepIndex,
+        steps = _ref.steps,
+        totalSteps = _ref.totalSteps;
+    return activeStepIndex >= totalSteps - 1 ? 'Finish' : 'Next';
+  }
+});
+var _default = Wizard;
+exports["default"] = _default;

package/dist/cjs/Wizard/WizardContext.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _react = require("react");
+
+var WizardContext = /*#__PURE__*/(0, _react.createContext)();
+var _default = WizardContext;
+exports["default"] = _default;

package/dist/cjs/Wizard/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Wizard = _interopRequireDefault(require("./Wizard"));
+
+var _default = _Wizard["default"];
+exports["default"] = _default;

package/dist/cjs/WrapView/WrapView.js

@@ -0,0 +1,62 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.WrapView = WrapView;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var supportsFlexGap = null;
+
+function getSupportsFlexGap() {
+  if (typeof document !== 'undefined' && supportsFlexGap === null) {
+    var div = document.createElement('div');
+    div.style.display = 'flex';
+    div.style.flexDirection = 'column';
+    div.style.gap = '1px';
+    div.appendChild(document.createElement('div'));
+    div.appendChild(document.createElement('div'));
+    document.body.appendChild(div);
+    supportsFlexGap = div.scrollHeight === 1;
+    document.body.removeChild(div);
+  }
+
+  return supportsFlexGap;
+}
+
+function WrapView(_ref) {
+  var children = _ref.children,
+      spacing = _ref.spacing,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["children", "spacing"]);
+  var supportsFlexGap = getSupportsFlexGap();
+  var styles = {
+    basis: '100%'
+  };
+
+  if (spacing) {
+    if (supportsFlexGap) {
+      styles.gap = spacing;
+    } else {
+      styles.marginBottom = -spacing;
+      styles['& > *'] = {
+        marginRight: spacing,
+        marginBottom: spacing
+      };
+    }
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    axis: "horizontal"
+  }, restProps), /*#__PURE__*/_react["default"].createElement(_StackView["default"], {
+    wrap: true,
+    axis: "horizontal",
+    css: styles
+  }, children));
+}

package/dist/cjs/WrapView/index.js

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

package/dist/cjs/hooks/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useMeasure = exports.useRovingIndex = exports.useKeyboardShortcuts = exports.useId = exports.useHover = exports.useFocus = exports.useDocumentEvent = void 0;
+
+var _useDocumentEvent = require("./use-document-event");
+
+exports.useDocumentEvent = _useDocumentEvent.useDocumentEvent;
+
+var _useFocus = require("./use-focus");
+
+exports.useFocus = _useFocus.useFocus;
+
+var _useHover = require("./use-hover");
+
+exports.useHover = _useHover.useHover;
+
+var _useId = require("./use-id");
+
+exports.useId = _useId.useId;
+
+var _useKeyboardShortcuts = require("./use-keyboard-shortcuts");
+
+exports.useKeyboardShortcuts = _useKeyboardShortcuts.useKeyboardShortcuts;
+
+var _useRovingIndex = require("./use-roving-index");
+
+exports.useRovingIndex = _useRovingIndex.useRovingIndex;
+
+var _useMeasure = require("./use-measure");
+
+exports.useMeasure = _useMeasure.useMeasure;

package/dist/cjs/hooks/use-accessibility-violation.js

@@ -0,0 +1,79 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+exports.__esModule = true;
+exports.useAccessibilityViolation = useAccessibilityViolation;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+/**
+ * Provide an on-screen and optional console accessibilty violation.
+ */
+function useAccessibilityViolation(
+/** Content to be displayed in tooltip when hovering element. */
+tooltipContent,
+/** Content to be displayed in the console with a reference to the element. */
+consoleContent) {
+  if (process.env.NODE_ENV === 'production') {
+    return {};
+  } else {
+    var wrapperRef = React.useRef(null);
+    var tooltipProps = {
+      title: /*#__PURE__*/React.createElement(_StackView["default"], {
+        width: 32,
+        spacing: 1,
+        cursor: "default"
+      }, /*#__PURE__*/React.createElement(_StackView["default"], {
+        axis: "horizontal",
+        alignment: "center",
+        spacing: 1
+      }, /*#__PURE__*/React.createElement(_Icon["default"], {
+        name: "exclamation-circle-filled",
+        size: "md",
+        color: "error"
+      }), /*#__PURE__*/React.createElement(_Text["default"], {
+        fontSize: 3,
+        weight: 500
+      }, "Accessibility Violation")), /*#__PURE__*/React.createElement(_Text["default"], {
+        fontSize: 3,
+        lineHeight: 3
+      }, tooltipContent)),
+      openDelay: 0,
+      closeDelay: 300,
+      popoverProps: {
+        textAlign: 'left',
+        paddingHorizontal: 2,
+        paddingVertical: 2,
+        backgroundColor: 'surface',
+        color: 'foreground',
+        stroke: 'separator',
+        strokeWeight: 1,
+        elevation: 2
+      }
+    };
+    var wrapperProps = {
+      innerRef: wrapperRef,
+      stroke: 'error',
+      strokeAlign: 'outside',
+      strokeWeight: 4
+    };
+    React.useEffect(function () {
+      if (wrapperRef.current) {
+        console.error(consoleContent, wrapperRef.current);
+      }
+    }, []);
+    return {
+      tooltipProps: tooltipProps,
+      wrapperProps: wrapperProps
+    };
+  }
+}

package/dist/cjs/hooks/use-document-event.js

@@ -0,0 +1,38 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useDocumentEvent = useDocumentEvent;
+
+var _react = require("react");
+
+/**
+ * Provide a callback for any document event type.
+ *
+ * @event {string} type - A valid [DOM event](https://developer.mozilla.org/en-US/docs/Web/Events).
+ * @param {Function} callback - Callback when specified event type occurs.
+ *
+ * @example
+ *
+ * function App() {
+ *   useDocumentEvent('keydown', event => {
+ *     console.log(`${event.key} pressed`)
+ *   })
+ *   return <div>App</div>
+ * }
+ */
+function useDocumentEvent(type, callback) {
+  var savedCallback = (0, _react.useRef)(callback);
+  (0, _react.useEffect)(function () {
+    savedCallback.current = callback;
+  }, [callback]);
+  (0, _react.useEffect)(function () {
+    function handleEvent(event) {
+      savedCallback.current(event);
+    }
+
+    document.addEventListener(type, handleEvent);
+    return function () {
+      document.removeEventListener(type, handleEvent);
+    };
+  }, []);
+}

package/dist/cjs/hooks/use-focus.js

@@ -0,0 +1,29 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useFocus = useFocus;
+
+var _react = require("react");
+
+/**
+ * Determines when one or many elements take focus.
+ *
+ * @returns {{ focus: boolean, focusProps: Object }}
+ */
+function useFocus() {
+  var _useState = (0, _react.useState)(false),
+      focus = _useState[0],
+      setFocus = _useState[1];
+
+  return {
+    focus: focus,
+    focusProps: {
+      onFocus: function onFocus() {
+        return setFocus(true);
+      },
+      onBlur: function onBlur() {
+        return setFocus(false);
+      }
+    }
+  };
+}

package/dist/cjs/hooks/use-hover.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useHover = useHover;
+
+var _react = require("react");
+
+function useHover() {
+  var _useState = (0, _react.useState)(false),
+      hover = _useState[0],
+      setHover = _useState[1];
+
+  return {
+    hover: hover,
+    hoverProps: {
+      onMouseEnter: function onMouseEnter() {
+        return setHover(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return setHover(false);
+      }
+    }
+  };
+}

package/dist/cjs/hooks/use-id.js

@@ -0,0 +1,26 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useId = useId;
+
+var _react = require("react");
+
+// this will eventually be replaced with useOpaqueIdentifier once it is stable:
+// https://github.com/facebook/react/pull/17322
+var idCounter = 1;
+/**
+ * Generates a unique id based on the provided prefix.
+ * Be aware using the same prefix elsewhere _does not_ generate a unique id.
+ * @param {string} prefix
+ * @returns {string} unique prefixed id
+ */
+
+function useId(prefix) {
+  var id = (0, _react.useRef)(null);
+
+  if (id.current === null) {
+    id.current = prefix + "-" + idCounter++;
+  }
+
+  return id.current;
+}

package/dist/cjs/hooks/use-keyboard-shortcuts.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.useKeyboardShortcuts = useKeyboardShortcuts;
+
+var _react = require("react");
+
+var _mousetrap = _interopRequireDefault(require("mousetrap"));
+
+function useKeyboardShortcuts(keyboardShortcuts, data) {
+  function bindKeyboardShortcuts() {
+    if (keyboardShortcuts) {
+      Object.keys(keyboardShortcuts).forEach(function (key) {
+        return _mousetrap["default"].bind(key, keyboardShortcuts[key].bind(null, data));
+      });
+    }
+  }
+
+  function unbindKeyboardShortcuts() {
+    if (keyboardShortcuts) {
+      Object.keys(keyboardShortcuts).forEach(function (key) {
+        return _mousetrap["default"].unbind(key);
+      });
+    }
+  }
+
+  (0, _react.useEffect)(function () {
+    return function () {
+      unbindKeyboardShortcuts();
+    };
+  }, []);
+  return {
+    bindKeyboardShortcuts: bindKeyboardShortcuts,
+    unbindKeyboardShortcuts: unbindKeyboardShortcuts
+  };
+}