@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/cjs/Radio/Radio.js

@@ -0,0 +1,158 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _mitt = _interopRequireDefault(require("mitt"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _VariantProvider = _interopRequireDefault(require("../VariantProvider"));
+
+var _system = require("../system");
+
+var iconPaths = {
+  fill: 'radio-0',
+  checked: 'radio-1'
+};
+var radioEmitter = (0, _mitt["default"])();
+
+function Radio(_ref) {
+  var checked = _ref.checked,
+      css = _ref.css,
+      disabled = _ref.disabled,
+      id = _ref.id,
+      label = _ref.label,
+      name = _ref.name,
+      _onBlur = _ref.onBlur,
+      _onChange = _ref.onChange,
+      _onFocus = _ref.onFocus,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'xs' : _ref$size,
+      value = _ref.value,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["checked", "css", "disabled", "id", "label", "name", "onBlur", "onChange", "onFocus", "size", "value"]);
+  var radioTheme = (0, _system.useThemeValue)('radio');
+  var inputRef = (0, _react.useRef)();
+
+  var _useState = (0, _react.useState)(false),
+      localChecked = _useState[0],
+      setLocalChecked = _useState[1];
+
+  var _useState2 = (0, _react.useState)(false),
+      focus = _useState2[0],
+      setFocus = _useState2[1]; // Because radio components are grouped by the name prop we use an event emitter
+  // as a way to toggle the state between each one
+
+
+  (0, _react.useEffect)(function () {
+    function handleChange(target) {
+      setLocalChecked(target === inputRef.current);
+    }
+
+    radioEmitter.on(name, handleChange);
+    return function () {
+      radioEmitter.off(name, handleChange);
+    };
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_VariantProvider["default"], {
+    checked: checked === undefined ? localChecked : checked,
+    focus: focus
+  }, /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    as: label ? 'label' : 'span',
+    inline: true,
+    axis: "horizontal",
+    alignment: "center",
+    shrink: 0,
+    opacity: disabled ? 0.5 : undefined,
+    cursor: disabled ? 'not-allowed' : undefined,
+    position: "relative"
+  }, restProps), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
+    innerRef: inputRef,
+    as: "input",
+    type: "radio",
+    id: id,
+    name: name,
+    checked: checked,
+    value: value,
+    disabled: disabled,
+    onChange: function onChange(event) {
+      radioEmitter.emit(name, event.target);
+      _onChange && _onChange(event);
+    },
+    onFocus: function onFocus(event) {
+      setFocus(true);
+      _onFocus && _onFocus(event);
+    },
+    onBlur: function onBlur(event) {
+      setFocus(false);
+      _onBlur && _onBlur(event);
+    },
+    position: "absolute",
+    top: 0,
+    left: 0,
+    zIndex: 0,
+    opacity: 0
+  }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    className: "ui-kit-Radio-Icon",
+    size: size
+  }, /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
+    name: iconPaths.fill,
+    fill: radioTheme.fill,
+    stroke: radioTheme.stroke,
+    transform: "scale(1)",
+    transformOrigin: "center center",
+    transition: "all 180ms ease-out",
+    variants: {
+      hover: {
+        transform: 'scale(1.125)'
+      },
+      focus: {
+        transform: 'scale(1.125)',
+        stroke: radioTheme.focusStroke
+      },
+      active: {
+        transform: 'scale(1)'
+      },
+      checked: {
+        fill: radioTheme.checkedFill,
+        stroke: radioTheme.checkedStroke
+      }
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_Icon["default"].Path, {
+    name: iconPaths.checked,
+    fill: "#fff",
+    transform: "scale(0)",
+    transformOrigin: "center center",
+    transition: "all 180ms ease-out",
+    variants: {
+      checked: {
+        visibility: 'visible',
+        transform: 'scale(1)',
+        transition: 'all 120ms ease-out'
+      }
+    }
+  })), label && /*#__PURE__*/_react["default"].createElement(_Text["default"], {
+    fontSize: 4,
+    lineHeight: 2.5,
+    marginLeft: 0.5
+  }, label)));
+}
+
+var _default = Radio;
+exports["default"] = _default;

package/dist/cjs/Radio/index.js

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

package/dist/cjs/RangeSlider/RangeSlider.js

@@ -0,0 +1,224 @@
+"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 _react = _interopRequireWildcard(require("react"));
+
+var _popcorn = require("@popmotion/popcorn");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _hooks = require("../hooks");
+
+function RangeSlider(props) {
+  var _props$min = props.min,
+      min = _props$min === void 0 ? 0 : _props$min,
+      _props$max = props.max,
+      max = _props$max === void 0 ? 100 : _props$max,
+      _props$step = props.step,
+      step = _props$step === void 0 ? 1 : _props$step,
+      disabled = props.disabled,
+      value = props.value,
+      onChange = props.onChange,
+      _props$variant = props.variant,
+      variant = _props$variant === void 0 ? {} : _props$variant,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(props, ["min", "max", "step", "disabled", "value", "onChange", "variant"]);
+  var snapTo = (0, _popcorn.snap)(step);
+  var sliderRef = (0, _react.useRef)();
+  var trackRef = (0, _react.useRef)();
+  var thumbRef = (0, _react.useRef)();
+  var startPositionRef = (0, _react.useRef)();
+  var currentValueRef = (0, _react.useRef)();
+
+  var _useMeasure = (0, _hooks.useMeasure)(),
+      useMeasureRef = _useMeasure[0],
+      useMeasureEffect = _useMeasure[1];
+
+  var _useState = (0, _react.useState)(0),
+      sliderSize = _useState[0],
+      setSliderSize = _useState[1];
+
+  var _useState2 = (0, _react.useState)(0),
+      thumbSize = _useState2[0],
+      setThumbSize = _useState2[1];
+
+  var upperBound = sliderSize - thumbSize;
+
+  function trimAlignValue(value) {
+    return snapTo((0, _popcorn.clamp)(min, max, value));
+  }
+
+  function getPointerPosition(event) {
+    if (event.touches) {
+      return event.touches[0].pageX;
+    } else {
+      return event.pageX;
+    }
+  }
+
+  function getOffsetFromValue(value) {
+    var range = max - min;
+    var ratio = (value - min) / range;
+    return ratio * upperBound;
+  }
+
+  function getValueFromOffset(offset) {
+    var ratio = offset / upperBound;
+    return ratio * (max - min) + min;
+  }
+
+  function getOffsetFromPosition(position) {
+    var sliderRect = sliderRef.current.getBoundingClientRect();
+    var sliderMin = sliderRect.left;
+    var windowOffset = window.pageXOffset;
+    var sliderStart = windowOffset + sliderMin;
+    var pixelOffset = position - sliderStart - thumbSize / 2;
+    return pixelOffset;
+  }
+
+  function getValueFromPosition(position) {
+    var diffValue = position / (sliderSize - thumbSize) * (max - min);
+    return trimAlignValue(currentValueRef.current + diffValue);
+  }
+
+  function handleThumbKeyDown(event) {
+    if (event.ctrlKey || event.shiftKey || event.altKey) {
+      return;
+    }
+
+    switch (event.key) {
+      case 'ArrowLeft':
+      case 'ArrowDown':
+      case 'Left':
+      case 'Down':
+        event.preventDefault();
+        onChange(trimAlignValue(value - step));
+        break;
+
+      case 'ArrowRight':
+      case 'ArrowUp':
+      case 'Right':
+      case 'Up':
+        event.preventDefault();
+        onChange(trimAlignValue(value + step));
+        break;
+
+      case 'Home':
+        event.preventDefault();
+        onChange(min);
+        break;
+
+      case 'End':
+        event.preventDefault();
+        onChange(max);
+        break;
+
+      default:
+    }
+  }
+
+  function handleTrackPointerDown(event) {
+    var position = getPointerPosition(event);
+    var valueAtPosition = trimAlignValue(getValueFromOffset(getOffsetFromPosition(position)));
+    startPositionRef.current = position;
+    currentValueRef.current = valueAtPosition;
+    document.addEventListener('mousemove', handlePointerMove);
+    document.addEventListener('mouseup', handlePointerUp);
+    document.addEventListener('mouseleave', handlePointerUp);
+    document.addEventListener('touchmove', handlePointerMove);
+    document.addEventListener('touchend', handlePointerUp);
+    document.addEventListener('touchcancel', handlePointerUp);
+    event.preventDefault();
+    thumbRef.current.focus();
+    onChange(valueAtPosition);
+  }
+
+  function handlePointerMove(event) {
+    var position = getPointerPosition(event);
+    var positionDifference = position - startPositionRef.current;
+    var nextValue = getValueFromPosition(positionDifference);
+    event.preventDefault();
+    onChange(nextValue);
+  }
+
+  function handlePointerUp() {
+    document.removeEventListener('mousemove', handlePointerMove);
+    document.removeEventListener('mouseup', handlePointerUp);
+    document.removeEventListener('mouseleave', handlePointerUp);
+    document.removeEventListener('touchmove', handlePointerMove);
+    document.removeEventListener('touchend', handlePointerUp);
+    document.removeEventListener('touchcancel', handlePointerUp);
+  }
+
+  useMeasureRef(sliderRef);
+  useMeasureEffect(function () {
+    var sliderRect = sliderRef.current.getBoundingClientRect();
+    var sliderMin = sliderRect.left;
+    var sliderMax = sliderRect.right;
+    var thumbRect = thumbRef.current.getBoundingClientRect();
+    var thumbSize = thumbRect.width;
+    setSliderSize(Math.abs(sliderMax - sliderMin));
+    setThumbSize(thumbSize);
+  }, []);
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+    innerRef: sliderRef,
+    width: "100%",
+    paddingVertical: 0.5,
+    position: "relative",
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    opacity: disabled ? 0.65 : undefined,
+    onMouseDown: disabled ? undefined : handleTrackPointerDown,
+    onTouchStart: disabled ? undefined : handleTrackPointerDown
+  }, restProps), /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+    innerRef: trackRef,
+    height: 0.5,
+    radius: 6,
+    overflow: "hidden",
+    backgroundColor: "grey-3",
+    position: "relative"
+  }, variant.track), /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+    position: "absolute",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    transformOrigin: "center left",
+    backgroundColor: "primary",
+    style: {
+      transform: "scaleX(" + (1 - (upperBound - getOffsetFromValue(value)) / (sliderSize - thumbSize)) + ")"
+    }
+  }, variant.progress))), /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+    innerRef: thumbRef,
+    tabIndex: 0,
+    role: "slider",
+    "aria-valuenow": value,
+    "aria-valuemin": min,
+    "aria-valuemax": max,
+    "aria-disabled": disabled,
+    onKeyDown: disabled ? undefined : handleThumbKeyDown,
+    width: 1.5,
+    height: 1.5,
+    radius: "circle",
+    position: "absolute",
+    top: "50%",
+    left: 0,
+    backgroundColor: "grey-1",
+    stroke: "grey-6",
+    strokeWeight: 1,
+    style: {
+      transform: "translate(" + getOffsetFromValue(value) + "px, -50%)"
+    }
+  }, variant.thumb)));
+}
+
+var _default = RangeSlider;
+exports["default"] = _default;

package/dist/cjs/RangeSlider/index.js

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

package/dist/cjs/ScreenReader/ScreenReader.js

@@ -0,0 +1,38 @@
+"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 _react = _interopRequireDefault(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+function ScreenReader(props) {
+  return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({
+    css: {
+      width: '1px',
+      height: '1px',
+      padding: 0,
+      margin: '-1px',
+      border: 0,
+      position: 'absolute',
+      clip: 'rect(1px, 1px, 1px, 1px)',
+      overflow: 'hidden',
+      '&:focus-within': {
+        width: 'auto',
+        height: 'auto',
+        margin: 0,
+        clip: 'auto',
+        position: 'static',
+        overflow: 'initial'
+      }
+    }
+  }, props));
+}
+
+var _default = ScreenReader;
+exports["default"] = _default;

package/dist/cjs/ScreenReader/index.js

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

package/dist/cjs/Scrim/Scrim.js

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.Scrim = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var Scrim = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  React.useLayoutEffect(function () {
+    document.body.style.overflow = 'hidden';
+    return function () {
+      document.body.style.overflow = '';
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(_StackView["default"], (0, _extends2["default"])({
+    innerRef: ref,
+    position: "fixed",
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: 10000,
+    overflow: "auto" // @ts-ignore
+    ,
+    backgroundColor: "hsla(0,0%,0%,0.74)"
+  }, props));
+});
+exports.Scrim = Scrim;

package/dist/cjs/Scrim/index.js

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

package/dist/cjs/Section/Section.js

@@ -0,0 +1,48 @@
+"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 _Heading = _interopRequireDefault(require("../Heading"));
+
+var _Toolbar = _interopRequireDefault(require("../Toolbar"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+function Section(_ref) {
+  var _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      children = _ref.children,
+      count = _ref.count,
+      countColor = _ref.countColor,
+      helpContent = _ref.helpContent,
+      onStatusClearRequest = _ref.onStatusClearRequest,
+      status = _ref.status,
+      title = _ref.title,
+      restProps = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["actions", "children", "count", "countColor", "helpContent", "onStatusClearRequest", "status", "title"]);
+  return /*#__PURE__*/_react["default"].createElement(_StackView["default"], (0, _extends2["default"])({
+    as: "section"
+  }, restProps), /*#__PURE__*/_react["default"].createElement(_Toolbar["default"], {
+    title: /*#__PURE__*/_react["default"].createElement(_Heading["default"], {
+      level: 3
+    }, title),
+    helpContent: helpContent,
+    actions: actions,
+    count: count,
+    countColor: countColor,
+    status: status,
+    onStatusClearRequest: onStatusClearRequest,
+    marginBottom: 2
+  }), children);
+}
+
+var _default = Section;
+exports["default"] = _default;

package/dist/cjs/Section/index.js

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