@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/StepperProgress/StepperProgress.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { Children } from 'react';
+import GridView from '../GridView';
+import StepperProgressContext from './Context';
+var ACTIVE_COLOR = 'primary-light';
+
+function StepperProgress(_ref) {
+  var activeStepIndex = _ref.activeStepIndex,
+      _ref$activeColor = _ref.activeColor,
+      activeColor = _ref$activeColor === void 0 ? ACTIVE_COLOR : _ref$activeColor,
+      children = _ref.children,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["activeStepIndex", "activeColor", "children"]);
+
+  return /*#__PURE__*/React.createElement(GridView, _extends({
+    autoFlow: "column",
+    autoColumns: "1fr",
+    alignment: "center"
+  }, restProps), Children.map(children, function (child, stepIndex) {
+    return /*#__PURE__*/React.createElement(StepperProgressContext.Provider, {
+      key: stepIndex,
+      value: {
+        activeColor: activeColor,
+        active: stepIndex <= activeStepIndex,
+        includeLine: stepIndex > 0
+      }
+    }, child);
+  }));
+}
+
+export default StepperProgress;

package/dist/esm/StepperProgress/index.js

@@ -0,0 +1,4 @@
+import StepperProgress from './StepperProgress';
+import Step from './Step';
+StepperProgress.Step = Step;
+export default StepperProgress;

package/dist/esm/Summary/Summary.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Box from '../Box';
+import Heading from '../Heading';
+import StackView from '../StackView';
+
+/**
+ * Use for brief content that could have an accompanying image or title.
+ */
+function Summary(_ref) {
+  var children = _ref.children,
+      image = _ref.image,
+      title = _ref.title,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "image", "title"]);
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    alignment: "center",
+    padding: 2,
+    spacing: 2
+  }, restProps), image && /*#__PURE__*/React.createElement(Box, null, image), title && /*#__PURE__*/React.createElement(Heading, {
+    level: 3
+  }, title), children && /*#__PURE__*/React.createElement(Box, {
+    maxWidth: 40,
+    textAlign: "center"
+  }, children));
+}
+
+export default Summary;

package/dist/esm/Summary/index.js

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

package/dist/esm/Tab/Tab.js

@@ -0,0 +1,66 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Text from '../Text';
+var boxSizes = {
+  xs: {
+    fontSize: 5,
+    padding: 0.5,
+    paddingHorizontal: 1
+  },
+  sm: {
+    fontSize: 4,
+    padding: 0.5,
+    paddingHorizontal: 1.5
+  },
+  md: {
+    fontSize: 4,
+    padding: 1,
+    paddingHorizontal: 2
+  },
+  lg: {
+    fontSize: 3,
+    padding: 1.5,
+    lineHeight: 2,
+    paddingHorizontal: 2
+  }
+};
+export function Tab(_ref) {
+  var active = _ref.active,
+      disabled = _ref.disabled,
+      href = _ref.href,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'backgroundSecondary' : _ref$color,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'md' : _ref$size,
+      props = _objectWithoutPropertiesLoose(_ref, ["active", "disabled", "href", "color", "size"]);
+
+  var tabProps = {
+    as: active ? 'span' : href ? 'a' : 'button',
+    fontWeight: 400,
+    radiusTop: 4,
+    cursor: active ? 'default' : 'pointer',
+    transition: 'opacity 160ms ease-out',
+    backgroundColor: color,
+    disabled: disabled
+  };
+
+  if (!active) {
+    if (disabled) {
+      tabProps.opacity = 0.6;
+      tabProps.cursor = 'not-allowed';
+
+      if (href) {
+        tabProps['aria-disabled'] = true;
+      }
+    } else {
+      tabProps.href = href;
+      tabProps.opacity = 0.8;
+      tabProps.hover = {
+        opacity: 1
+      };
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(Text, _extends({}, tabProps, boxSizes[size], props));
+}

package/dist/esm/Tab/index.js

@@ -0,0 +1,2 @@
+export * from './Tab';
+export { Tab as default } from './Tab';

package/dist/esm/Table/AnimateScroll.js

@@ -0,0 +1,83 @@
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { PureComponent } from 'react';
+import Spring from 'tiny-spring';
+import styler from 'stylefire';
+
+var AnimateScroll = /*#__PURE__*/function (_PureComponent) {
+  _inheritsLoose(AnimateScroll, _PureComponent);
+
+  function AnimateScroll() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _PureComponent.call.apply(_PureComponent, [this].concat(args)) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "setRef", function (node) {
+      if (!_this.scroller) {
+        _this.scroller = styler(node);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setScroll", function (side, amount) {
+      var spring = Spring(_this.scroller.get(side), {
+        stiffness: 500,
+        damping: 50
+      });
+      spring.onUpdate(function (value) {
+        var _this$scroller$set;
+
+        return _this.scroller.set((_this$scroller$set = {}, _this$scroller$set[side] = value, _this$scroller$set));
+      });
+      spring.transitionTo(amount);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setScrollX", function (amount) {
+      _this.setScroll('scrollLeft', amount);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "setScrollY", function (amount) {
+      _this.setScroll('scrollTop', amount);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "moveScroll", function (side, amount) {
+      _this.setScroll(side, _this.scroller.get(side) + amount);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "moveScrollX", function (amount) {
+      _this.moveScroll('scrollLeft', amount);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "moveScrollY", function (amount) {
+      _this.moveScroll('scrollTop', amount);
+    });
+
+    return _this;
+  }
+
+  var _proto = AnimateScroll.prototype;
+
+  _proto.componentDidMount = function componentDidMount() {
+    if (!this.scroller) {
+      this.scroller = styler(window);
+    }
+  };
+
+  _proto.render = function render() {
+    return this.props.children({
+      ref: this.setRef,
+      moveScrollX: this.moveScrollX,
+      moveScrollY: this.moveScrollY,
+      setScrollX: this.setScrollX,
+      setScrollY: this.setScrollY
+    });
+  };
+
+  return AnimateScroll;
+}(PureComponent);
+
+export default AnimateScroll;

package/dist/esm/Table/AvatarCell.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import Avatar from '../Avatar';
+import StackView from '../StackView';
+import { useHover } from '../hooks';
+import CheckboxCell from './CheckboxCell';
+
+function AvatarCell(_ref) {
+  var source = _ref.source,
+      checked = _ref.checked,
+      onChange = _ref.onChange;
+
+  var _useHover = useHover(),
+      hover = _useHover.hover,
+      hoverProps = _useHover.hoverProps;
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    alignment: "center",
+    distribution: "center",
+    width: 4,
+    height: 4
+  }, hoverProps), hover || checked ? /*#__PURE__*/React.createElement(CheckboxCell, {
+    onChange: onChange,
+    checked: checked
+  }) : /*#__PURE__*/React.createElement(Avatar, {
+    source: source,
+    size: "sm"
+  }));
+}
+
+export default AvatarCell;

package/dist/esm/Table/Body.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import Box from '../Box';
+
+var Body = function Body(props) {
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    role: "rowgroup",
+    position: "relative",
+    overflowX: "auto",
+    WebkitOverflowScrolling: "touch",
+    flexShrink: 1,
+    flexGrow: 1,
+    marginTop: "-1px",
+    zIndex: 5,
+    css: {
+      '@media print': {
+        overflowX: 'visible'
+      }
+    }
+  }, props));
+};
+
+export default Body;

package/dist/esm/Table/BodyCell.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import StackView from '../StackView';
+
+var BodyCell = function BodyCell(props) {
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    role: "cell",
+    axis: "horizontal",
+    shrink: 0,
+    paddingVertical: 0.5
+  }, props));
+};
+
+export default BodyCell;

package/dist/esm/Table/BodyInnerCell.js

@@ -0,0 +1,23 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import StackView from '../StackView';
+import Text from '../Text';
+
+var BodyInnerCell = function BodyInnerCell(_ref) {
+  var children = _ref.children,
+      column = _ref.column,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "column"]);
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    axis: "horizontal",
+    alignment: "center",
+    width: column.width || column.maxWidth || column.truncate ? '100%' : undefined,
+    paddingHorizontal: 1.5
+  }, restProps), column.truncate ? /*#__PURE__*/React.createElement(Text, {
+    as: "div",
+    truncate: true
+  }, children) : children);
+};
+
+export default BodyInnerCell;

package/dist/esm/Table/BodyRow.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import DragDrop from '../DragDrop';
+import StackView from '../StackView';
+import { composeMultipleEvents } from '../utils';
+import { useHover, useKeyboardShortcuts } from '../hooks';
+
+var BodyRow = function BodyRow(_ref) {
+  var children = _ref.children,
+      keyboardShortcuts = _ref.keyboardShortcuts,
+      row = _ref.row,
+      rowIndex = _ref.rowIndex,
+      onRowSort = _ref.onRowSort,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "keyboardShortcuts", "row", "rowIndex", "onRowSort"]);
+
+  var _useHover = useHover(),
+      hover = _useHover.hover,
+      hoverProps = _useHover.hoverProps;
+
+  var _useKeyboardShortcuts = useKeyboardShortcuts(keyboardShortcuts, {
+    row: row,
+    rowIndex: rowIndex
+  }),
+      bindKeyboardShortcuts = _useKeyboardShortcuts.bindKeyboardShortcuts,
+      unbindKeyboardShortcuts = _useKeyboardShortcuts.unbindKeyboardShortcuts;
+
+  var childrenToRender = function childrenToRender(provided) {
+    return /*#__PURE__*/React.createElement(StackView, _extends({
+      innerRef: provided.innerRef,
+      role: "row",
+      axis: "horizontal",
+      borderColor: "grey-3",
+      backgroundColor: "white"
+    }, restProps, provided.draggableProps, composeMultipleEvents({
+      onMouseEnter: bindKeyboardShortcuts,
+      onMouseLeave: unbindKeyboardShortcuts
+    }, hoverProps)), children({
+      isRowHovered: hover,
+      dragHandleProps: provided.dragHandleProps
+    }));
+  };
+
+  if (onRowSort) {
+    return /*#__PURE__*/React.createElement(DragDrop.Draggable, {
+      draggableId: rowIndex.toString(),
+      index: rowIndex
+    }, function (provided) {
+      return childrenToRender(provided);
+    });
+  } else {
+    return childrenToRender({});
+  }
+};
+
+export default BodyRow;

package/dist/esm/Table/CheckboxCell.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Checkbox from '../Checkbox'; // only allow checkbox to catch event to prevent firing anchor when using getRowLink
+
+var stopPropagation = function stopPropagation(originalEvent) {
+  return function (event) {
+    event.stopPropagation();
+
+    if (originalEvent) {
+      originalEvent(event);
+    }
+  };
+};
+
+function CheckboxCell(_ref) {
+  var onClick = _ref.onClick,
+      onKeyDown = _ref.onKeyDown,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["onClick", "onKeyDown"]);
+
+  return /*#__PURE__*/React.createElement(Checkbox, _extends({
+    size: "lg",
+    label: null,
+    onClick: stopPropagation(onClick),
+    onKeyDown: stopPropagation(onKeyDown)
+  }, restProps));
+}
+
+export default CheckboxCell;

package/dist/esm/Table/ColumnPicker.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Checkbox from '../Checkbox';
+import Dropdown from '../Dropdown';
+import Text from '../Text';
+
+var noop = function noop() {
+  return null;
+};
+
+function ColumnPicker(_ref) {
+  var _ref$columns = _ref.columns,
+      columns = _ref$columns === void 0 ? [] : _ref$columns,
+      _ref$hiddenColumnIds = _ref.hiddenColumnIds,
+      hiddenColumnIds = _ref$hiddenColumnIds === void 0 ? [] : _ref$hiddenColumnIds,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["columns", "hiddenColumnIds", "onChange"]);
+
+  return /*#__PURE__*/React.createElement(Dropdown, _extends({
+    variant: "outline",
+    icon: {
+      name: 'columns'
+    },
+    tooltip: {
+      title: 'Filter Columns'
+    },
+    placement: "bottom-end",
+    closeOnSelect: false,
+    onSelect: function onSelect(columnId) {
+      var newHiddenColumnIds = [].concat(hiddenColumnIds);
+      var indexPosition = newHiddenColumnIds.indexOf(columnId);
+
+      if (indexPosition > -1) {
+        newHiddenColumnIds.splice(indexPosition, 1);
+      } else {
+        newHiddenColumnIds.push(columnId);
+      }
+
+      onChange({
+        columnId: columnId,
+        hiddenColumnIds: newHiddenColumnIds
+      });
+    }
+  }, restProps), columns.filter(function (column) {
+    return !column.alwaysVisible;
+  }).map(function (column) {
+    return /*#__PURE__*/React.createElement(Dropdown.Item, {
+      key: column.id,
+      value: column.id
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      label: null,
+      checked: hiddenColumnIds.indexOf(column.id) === -1,
+      onChange: noop,
+      marginRight: 1
+    }), /*#__PURE__*/React.createElement(Text, null, column.label || column.header));
+  }));
+}
+
+export default ColumnPicker;

package/dist/esm/Table/DateCell.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { format } from 'date-fns';
+import Box from '../Box';
+
+function DateCell(_ref) {
+  var date = _ref.date,
+      showTime = _ref.showTime;
+  return /*#__PURE__*/React.createElement(Box, null, format(date, showTime ? 'MMM dd, yyyy h:mm:A' : 'MMM dd, yyyy'));
+}
+
+export default DateCell;

package/dist/esm/Table/DragCell.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+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) { _defineProperty(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; }
+
+import React from 'react';
+import StackView from '../StackView';
+
+var DragCell = function DragCell(_ref) {
+  var css = _ref.css,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["css"]);
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    "aria-hidden": true,
+    axis: "horizontal",
+    alignment: "center",
+    distribution: "center",
+    shrink: 0,
+    grow: 0,
+    width: 6,
+    basis: 6,
+    backgroundColor: "inherit",
+    position: "sticky",
+    left: 0,
+    zIndex: 35,
+    css: _objectSpread({
+      '@media print': {
+        display: 'none !important'
+      }
+    }, css)
+  }, restProps));
+};
+
+export default DragCell;

package/dist/esm/Table/DragHandle.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import Icon from '../Icon';
+
+var _ref = /*#__PURE__*/React.createElement(Icon, {
+  name: "drag-handle",
+  size: "sm",
+  color: "foregroundTertiary",
+  cursor: "grab"
+});
+
+var DragHandle = function DragHandle() {
+  return _ref;
+};
+
+export default DragHandle;

package/dist/esm/Table/Header.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+
+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) { _defineProperty(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; }
+
+import React from 'react';
+import Box from '../Box';
+
+var Header = function Header(_ref) {
+  var css = _ref.css,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["css"]);
+
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    role: "rowgroup",
+    flexShrink: 0,
+    borderBottomWidth: 1,
+    borderColor: "grey-3",
+    position: "sticky",
+    top: 0,
+    zIndex: 15,
+    overflow: "hidden",
+    css: _objectSpread({
+      '@media print': {
+        overflow: 'visible',
+        position: 'relative'
+      }
+    }, css)
+  }, restProps));
+};
+
+export default Header;

package/dist/esm/Table/HeaderCell.js

@@ -0,0 +1,16 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import StackView from '../StackView';
+
+var HeaderCell = function HeaderCell(props) {
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    role: "columnheader",
+    axis: "horizontal",
+    alignment: "end",
+    shrink: 0,
+    backgroundColor: "inherit",
+    userSelect: "none"
+  }, props));
+};
+
+export default HeaderCell;

package/dist/esm/Table/HeaderInnerCell.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import StackView from '../StackView';
+
+var HeaderInnerCell = function HeaderInnerCell(_ref) {
+  var children = _ref.children,
+      column = _ref.column,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["children", "column"]);
+
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    axis: "horizontal",
+    alignment: "center",
+    paddingHorizontal: 1.5,
+    transformOrigin: "left center",
+    zIndex: 1
+  }, restProps), children);
+};
+
+export default HeaderInnerCell;

package/dist/esm/Table/HeaderRow.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import StackView from '../StackView';
+
+var HeaderRow = function HeaderRow(props) {
+  return /*#__PURE__*/React.createElement(StackView, _extends({
+    role: "row",
+    axis: "horizontal",
+    alignment: "end",
+    backgroundColor: "inherit"
+  }, props));
+};
+
+export default HeaderRow;