@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/HelperDrawer/HelperDrawer.js

@@ -0,0 +1,91 @@
+"use strict";
+
+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 _core = require("@emotion/core");
+
+var _react = require("react");
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _Card = _interopRequireDefault(require("../Card"));
+
+var _Collapse = _interopRequireDefault(require("../Collapse"));
+
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+var drawerToggles = {};
+
+function Toggle(_ref) {
+  var drawerId = _ref.drawerId,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["drawerId"]);
+  var handleClick = (0, _react.useCallback)(function (event) {
+    var drawerToggle = drawerToggles[drawerId];
+
+    if (drawerToggle) {
+      event.preventDefault();
+      drawerToggle();
+    }
+  }, [drawerId]);
+  return (0, _core.jsx)(_Button["default"], (0, _extends2["default"])({
+    icon: {
+      name: 'info'
+    },
+    tooltip: {
+      title: 'More info'
+    },
+    size: "xs",
+    theme: false,
+    color: "foregroundSecondary",
+    hover: {
+      backgroundColor: 'highlight'
+    },
+    onClick: handleClick,
+    "data-helper-drawer-toggle": true
+  }, restProps));
+}
+
+function HelperDrawer(_ref2) {
+  var children = _ref2.children,
+      id = _ref2.id,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref2, ["children", "id"]);
+
+  var _useState = (0, _react.useState)(false),
+      open = _useState[0],
+      setOpen = _useState[1];
+
+  (0, _react.useEffect)(function () {
+    drawerToggles[id] = function () {
+      return setOpen(function (open) {
+        return !open;
+      });
+    };
+
+    return function () {
+      delete drawerToggles[id];
+    };
+  }, [id]);
+  return (0, _core.jsx)(_Collapse["default"], {
+    open: open,
+    lazy: true,
+    css: {
+      width: '100%'
+    }
+  }, (0, _core.jsx)(_Card["default"], (0, _extends2["default"])({
+    subdued: true,
+    padding: 1,
+    fontSize: 4
+  }, restProps), children));
+}
+
+HelperDrawer.Toggle = Toggle;
+var _default = HelperDrawer;
+exports["default"] = _default;

package/dist/cjs/HelperDrawer/index.js

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

package/dist/cjs/Highlight/Highlight.js

@@ -0,0 +1,47 @@
+"use strict";
+
+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 _react = _interopRequireDefault(require("react"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _utils = require("./utils");
+
+/**
+ * Highlight or mark letters in a string using a provided query.
+ */
+function Highlight(_ref) {
+  var _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'primary' : _ref$color,
+      _ref$marker = _ref.marker,
+      marker = _ref$marker === void 0 ? _utils.markStartsWithMatchSubstring : _ref$marker,
+      query = _ref.query,
+      text = _ref.text,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["color", "marker", "query", "text"]);
+  return /*#__PURE__*/_react["default"].createElement(_Text["default"], (0, _extends2["default"])({
+    as: "span"
+  }, restProps), marker(text, query).map(function (part, index) {
+    return /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+      key: index,
+      inline: true,
+      as: part.highlight ? 'mark' : 'span',
+      color: part.highlight ? color : undefined,
+      backgroundColor: "transparent",
+      fontWeight: "inherit",
+      fontSize: "inherit"
+    }, part.text);
+  }));
+}
+
+Highlight.FUZZY = _utils.markFuzzyMatchSubstring;
+Highlight.STARTS_WITH = _utils.markStartsWithMatchSubstring;
+var _default = Highlight;
+exports["default"] = _default;

package/dist/cjs/Highlight/index.js

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

package/dist/cjs/Highlight/utils.js

@@ -0,0 +1,52 @@
+"use strict";
+
+exports.__esModule = true;
+exports.markFuzzyMatchSubstring = markFuzzyMatchSubstring;
+exports.markStartsWithMatchSubstring = markStartsWithMatchSubstring;
+// inspired by: https://github.com/enigma-io/boundless/blob/master/packages/boundless-typeahead/index.js
+var matchOperatorsRegex = /[|\\{}()[\]^$+*?.-]/g;
+
+function escapeStringRegexp(string) {
+  return string.replace(matchOperatorsRegex, '\\$&');
+}
+
+function markFuzzyMatchSubstring(text, query) {
+  var fragments = text.split(new RegExp('(' + escapeStringRegexp(query) + ')', 'ig'));
+  var seekValue = query.toLowerCase();
+  var threshold = fragments.length;
+  var i = -1;
+
+  while (++i < threshold) {
+    var fragment = fragments[i];
+    fragments[i] = {
+      text: fragment.replace(/ /g, "\xA0"),
+      highlight: fragment.toLowerCase() === seekValue
+    };
+  }
+
+  return fragments;
+}
+
+function markStartsWithMatchSubstring(text, query) {
+  var seekValue = query.toLowerCase();
+  var indexStart = text.toLowerCase().indexOf(seekValue);
+  var indexEnd = indexStart + seekValue.length;
+
+  if (indexStart === -1) {
+    return [{
+      text: text,
+      highlight: false
+    }];
+  }
+
+  return [{
+    text: text.slice(0, indexStart).replace(/ /g, "\xA0"),
+    highlight: false
+  }, {
+    text: text.slice(indexStart, indexEnd).replace(/ /g, "\xA0"),
+    highlight: true
+  }, {
+    text: text.slice(indexEnd).replace(/ /g, "\xA0"),
+    highlight: false
+  }];
+}

package/dist/cjs/Icon/Icon.js

@@ -0,0 +1,59 @@
+"use strict";
+
+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 _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _system = require("../system");
+
+var sizes = {
+  xxs: '8px',
+  xs: '10px',
+  sm: '12px',
+  md: '14px',
+  lg: '18px',
+  xl: '32px',
+  xxl: '48px'
+};
+
+function Icon(_ref) {
+  var as = _ref.as,
+      _ref$name = _ref.name,
+      name = _ref$name === void 0 ? '' : _ref$name,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      children = _ref.children,
+      props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["as", "name", "size", "color", "children"]);
+  var themeProps = (0, _system.useThemeValue)('icon');
+  var pathData = (0, _system.useThemeValue)(['icons'].concat(name.split('.')));
+  var iconSize = sizes[size] || size;
+  var childrenToRender = name ? /*#__PURE__*/_react["default"].createElement("path", {
+    d: pathData
+  }) : children;
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+    as: "svg",
+    viewBox: "0 0 16 16",
+    width: iconSize,
+    height: iconSize,
+    basis: iconSize,
+    grow: 0,
+    shrink: 0,
+    fill: color,
+    fillRule: "evenodd",
+    children: childrenToRender
+  }, themeProps, props));
+}
+
+var _default = Icon;
+exports["default"] = _default;

package/dist/cjs/Icon/Path.js

@@ -0,0 +1,33 @@
+"use strict";
+
+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 _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _system = require("../system");
+
+function Path(_ref) {
+  var _ref$name = _ref.name,
+      name = _ref$name === void 0 ? '' : _ref$name,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'currentColor' : _ref$color,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["name", "color"]);
+  var pathData = (0, _system.useThemeValue)(['icons'].concat(name.split('.')));
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+    as: "path",
+    d: pathData,
+    fill: color
+  }, restProps));
+}
+
+var _default = Path;
+exports["default"] = _default;

package/dist/cjs/Icon/Status.js

@@ -0,0 +1,51 @@
+"use strict";
+
+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 _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("./Icon"));
+
+var _Path = _interopRequireDefault(require("./Path"));
+
+var STATUS_VARIANTS = {
+  confirmed: ['checkmark-circle', 'success'],
+  unconfirmed: ['question-circle', 'warning'],
+  declined: ['close-circle', 'error']
+};
+
+function Status(props) {
+  var color = props.color,
+      variant = props.variant,
+      variantFilled = props.variantFilled,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["color", "variant", "variantFilled"]);
+  var variantName;
+  var variantColor;
+  Object.keys(STATUS_VARIANTS).some(function (key) {
+    var _STATUS_VARIANTS$key;
+
+    return variant === key ? (_STATUS_VARIANTS$key = STATUS_VARIANTS[key], variantName = _STATUS_VARIANTS$key[0], variantColor = _STATUS_VARIANTS$key[1], _STATUS_VARIANTS$key) : false;
+  });
+
+  if (variantName && variantFilled) {
+    variantName += '-filled';
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_Icon["default"], (0, _extends2["default"])({
+    name: variantName,
+    color: color || variantColor
+  }, restProps), /*#__PURE__*/_react["default"].createElement(_Path["default"], {
+    name: "radio-0",
+    color: color
+  }));
+}
+
+var _default = Status;
+exports["default"] = _default;

package/dist/cjs/Icon/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _Icon = _interopRequireDefault(require("./Icon"));
+
+var _Path = _interopRequireDefault(require("./Path"));
+
+var _Status = _interopRequireDefault(require("./Status"));
+
+_Icon["default"].Path = _Path["default"];
+_Icon["default"].Status = _Status["default"];
+var _default = _Icon["default"];
+exports["default"] = _default;

package/dist/cjs/Input/Inline.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _InputField = _interopRequireDefault(require("./InputField"));
+
+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; }
+
+function Inline(_ref) {
+  var light = _ref.light,
+      hover = _ref.hover,
+      focus = _ref.focus,
+      _ref$highlightColor = _ref.highlightColor,
+      highlightColor = _ref$highlightColor === void 0 ? light ? 'light-0' : 'highlight' : _ref$highlightColor,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["light", "hover", "focus", "highlightColor"]);
+  var pseudoStyles = restProps.readOnly || restProps.disabled ? {} : {
+    backgroundColor: highlightColor
+  };
+
+  if (restProps.disabled) {
+    restProps.cursor = 'not-allowed';
+    restProps.tabIndex = undefined;
+    restProps.opacity = 0.64;
+  } else if (hover || focus) {
+    restProps = _objectSpread(_objectSpread({}, restProps), pseudoStyles);
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_InputField["default"], (0, _extends2["default"])({
+    autoWidth: true,
+    backgroundColor: "transparent",
+    color: light ? 'light-9' : 'foreground',
+    focus: pseudoStyles,
+    grow: 0,
+    hover: pseudoStyles,
+    marginHorizontal: -0.5,
+    paddingHorizontal: 0.5,
+    paddingVertical: 0,
+    placeholderColor: light ? 'light-5' : 'foregroundTertiary',
+    radius: 3,
+    stroke: undefined
+  }, restProps));
+}
+
+Inline.displayName = 'Input.Inline';
+var _default = Inline;
+exports["default"] = _default;

package/dist/cjs/Input/Input.js

@@ -0,0 +1,130 @@
+"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 _InputBox = _interopRequireDefault(require("./InputBox"));
+
+var _InputField = _interopRequireDefault(require("./InputField"));
+
+var Input = /*#__PURE__*/function (_Component) {
+  (0, _inheritsLoose2["default"])(Input, _Component);
+
+  function Input() {
+    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), "setInputNode", function (node) {
+      _this.inputNode = node;
+    });
+    return _this;
+  }
+
+  var _proto = Input.prototype;
+
+  _proto.focus = function focus() {
+    this.inputNode.focus();
+  };
+
+  _proto.blur = function blur() {
+    this.inputNode.blur();
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        backgroundColor = _this$props.backgroundColor,
+        color = _this$props.color,
+        autoComplete = _this$props.autoComplete,
+        autoFocus = _this$props.autoFocus,
+        autoWidth = _this$props.autoWidth,
+        defaultValue = _this$props.defaultValue,
+        disabled = _this$props.disabled,
+        focus = _this$props.focus,
+        hover = _this$props.hover,
+        id = _this$props.id,
+        min = _this$props.min,
+        minLength = _this$props.minLength,
+        max = _this$props.max,
+        maxLength = _this$props.maxLength,
+        name = _this$props.name,
+        onBlur = _this$props.onBlur,
+        onChange = _this$props.onChange,
+        onFocus = _this$props.onFocus,
+        onKeyDown = _this$props.onKeyDown,
+        onKeyUp = _this$props.onKeyUp,
+        placeholder = _this$props.placeholder,
+        placeholderColor = _this$props.placeholderColor,
+        readOnly = _this$props.readOnly,
+        highlightOnInteraction = _this$props.highlightOnInteraction,
+        type = _this$props.type,
+        value = _this$props.value,
+        restProps = (0, _objectWithoutPropertiesLoose2["default"])(_this$props, ["backgroundColor", "color", "autoComplete", "autoFocus", "autoWidth", "defaultValue", "disabled", "focus", "hover", "id", "min", "minLength", "max", "maxLength", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "placeholderColor", "readOnly", "highlightOnInteraction", "type", "value"]);
+    var ariaLabel = restProps['aria-label'];
+
+    if (ariaLabel) {
+      delete restProps['aria-label'];
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_InputBox["default"], (0, _extends2["default"])({
+      disabled: disabled,
+      backgroundColor: backgroundColor,
+      color: color,
+      focus: focus,
+      hover: hover
+    }, restProps), /*#__PURE__*/_react["default"].createElement(_InputField["default"], {
+      "aria-label": ariaLabel,
+      width: "100%",
+      textOverflow: "ellipsis",
+      innerRef: this.setInputNode,
+      backgroundColor: "transparent",
+      color: "inherit",
+      id: id,
+      autoComplete: autoComplete,
+      autoFocus: autoFocus,
+      autoWidth: autoWidth,
+      type: type,
+      name: name,
+      disabled: disabled,
+      readOnly: readOnly,
+      highlightOnInteraction: highlightOnInteraction,
+      placeholder: placeholder,
+      placeholderColor: placeholderColor,
+      defaultValue: defaultValue,
+      min: min,
+      minLength: minLength,
+      max: max,
+      maxLength: maxLength,
+      value: value,
+      onChange: onChange,
+      onFocus: onFocus,
+      onBlur: onBlur,
+      onKeyDown: onKeyDown,
+      onKeyUp: onKeyUp
+    }));
+  };
+
+  return Input;
+}(_react.Component);
+
+var _default = Input;
+exports["default"] = _default;