@planningcenter/tapestry-react 0.0.1-alpha.0

package/dist/esm/DataTable/utils/getParsedColumns.js

@@ -0,0 +1,144 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React from 'react';
+import Box from '../../Box';
+import Tooltip from '../../Tooltip';
+import { useCollapsibleRowsStore, useSubRowOpen, useAnySubRowsOpen } from '../hooks/useCollapsibleRows';
+import Icon from '../components/Icon';
+var buttonStyles = {
+  appearance: 'none',
+  display: 'flex',
+  alignSelf: 'center',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 1,
+  margin: 0,
+  border: 'none',
+  borderRadius: 3,
+  backgroundColor: 'hsla(0, 0%, 0%, 0)',
+  fill: 'foreground',
+  cursor: 'pointer',
+  ' &:focus ': {
+    outline: 0
+  },
+  ' &:hover ': {
+    backgroundColor: 'highlight'
+  }
+};
+
+function CollapseHeader(_ref) {
+  var accessibility = _ref.accessibility;
+  var callbacks = useCollapsibleRowsStore(function (state) {
+    return state.callbacks;
+  });
+  var anySubRowsOpen = useAnySubRowsOpen();
+  var tooltipTitle = accessibility.toggleAllSubRowsTooltipTitle(anySubRowsOpen);
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    title: tooltipTitle,
+    placement: "bottom-start"
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "button",
+    display: "flex",
+    "aria-label": tooltipTitle,
+    css: buttonStyles,
+    onClick: function onClick(event) {
+      event.preventDefault();
+      callbacks.toggleAllSubRows();
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "arrow-down",
+    size: "sm",
+    style: {
+      transform: anySubRowsOpen ? undefined : 'rotate(-90deg)',
+      transition: 'transform 180ms ease'
+    }
+  })));
+}
+
+function CollapseCell(_ref2) {
+  var rowIndex = _ref2.rowIndex;
+  var callbacks = useCollapsibleRowsStore(function (state) {
+    return state.callbacks;
+  });
+  var isSubRowOpen = useSubRowOpen(rowIndex);
+  return /*#__PURE__*/React.createElement(Box, {
+    as: "button",
+    css: buttonStyles,
+    onClick: function onClick(event) {
+      event.preventDefault();
+      callbacks.toggleSubRowAtIndex(rowIndex);
+    }
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "arrow-down",
+    size: "sm",
+    style: {
+      transform: isSubRowOpen ? undefined : 'rotate(-90deg)',
+      transition: 'transform 180ms ease'
+    }
+  }));
+}
+
+function getParsedColumns(_ref3) {
+  var accessibility = _ref3.accessibility,
+      columns = _ref3.columns,
+      hasSubRows = _ref3.hasSubRows,
+      hiddenColumnIds = _ref3.hiddenColumnIds,
+      draggable = _ref3.draggable;
+  var nextColumns = columns.filter(function (column) {
+    return column !== null && column !== false && column !== undefined && (column.alwaysVisible || hiddenColumnIds.indexOf(column.id) === -1);
+  });
+
+  if (hasSubRows) {
+    nextColumns.unshift({
+      header: /*#__PURE__*/React.createElement(CollapseHeader, {
+        accessibility: accessibility
+      }),
+      cell: function cell(_, _ref4) {
+        var rowIndex = _ref4.rowIndex;
+        return /*#__PURE__*/React.createElement(CollapseCell, {
+          rowIndex: rowIndex
+        });
+      },
+      subCell: null,
+      width: 32,
+      css: {
+        paddingLeft: draggable ? 0 : undefined,
+        '@media print': {
+          display: 'none !important'
+        }
+      }
+    });
+  }
+
+  if (draggable) {
+    nextColumns.unshift({
+      cell: function cell(_, _ref5) {
+        var _dragHandleProps = _ref5._dragHandleProps;
+        return /*#__PURE__*/React.createElement(Box, _extends({
+          css: buttonStyles,
+          onClick: function onClick(event) {
+            return event.preventDefault();
+          }
+        }, _dragHandleProps), /*#__PURE__*/React.createElement(Icon, {
+          name: "drag-handle",
+          size: "sm",
+          color: "foregroundTertiary",
+          style: {
+            cursor: 'grab'
+          }
+        }));
+      },
+      subCell: null,
+      width: 32,
+      css: {
+        paddingRight: hasSubRows ? 0 : undefined,
+        '@media print': {
+          display: 'none !important'
+        }
+      }
+    });
+  }
+
+  return nextColumns;
+}
+
+export default getParsedColumns;

package/dist/esm/DataTable/utils/getRowLinkProps.js

@@ -0,0 +1,10 @@
+function getRowLinkProps(_ref) {
+  var getRowLink = _ref.getRowLink,
+      data = _ref.data,
+      isSubRow = _ref.isSubRow;
+  return getRowLink ? {
+    href: getRowLink(data, isSubRow)
+  } : {};
+}
+
+export default getRowLinkProps;

package/dist/esm/DataTable/utils/index.js

@@ -0,0 +1,4 @@
+export { default as getCell } from './getCell';
+export { default as getParsedColumns } from './getParsedColumns';
+export { default as getRowLinkProps } from './getRowLinkProps';
+export { variants } from './variants';

package/dist/esm/DataTable/utils/variants.js

@@ -0,0 +1,167 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+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; }
+
+var scrollStyles = {
+  overflowX: 'auto',
+  scrollbarWidth: 'none',
+  msOverflowStyle: 'none',
+  '@media print': {
+    position: 'relative',
+    overflowX: 'visible'
+  },
+  '::-webkit-scrollbar': {
+    width: 0,
+    height: 0
+  }
+};
+export var defaultVariant = {
+  header: _objectSpread({
+    backgroundColor: 'surfaceSecondary',
+    borderBottomColor: 'separatorTertiary',
+    borderBottomStyle: 'solid',
+    borderBottomWidth: 1,
+    position: 'sticky',
+    top: 0,
+    zIndex: 10
+  }, scrollStyles),
+  headerRow: {
+    display: 'flex',
+    minHeight: '48px',
+    backgroundColor: 'inherit'
+  },
+  headerCell: function headerCell(_ref) {
+    var isSortable = _ref.isSortable;
+    return {
+      boxSizing: 'content-box',
+      display: 'flex',
+      alignItems: 'center',
+      flexGrow: 0,
+      flexShrink: 0,
+      flexBasis: 'auto',
+      padding: '0 16px',
+      backgroundColor: 'inherit',
+      cursor: isSortable ? 'pointer' : 'default',
+      outline: 0
+    };
+  },
+  footer: _objectSpread({
+    backgroundColor: 'surfaceSecondary',
+    borderTopColor: 'separatorTertiary',
+    borderTopStyle: 'solid',
+    borderTopWidth: 1
+  }, scrollStyles),
+  footerRow: {
+    display: 'flex',
+    backgroundColor: 'inherit'
+  },
+  footerCell: {
+    boxSizing: 'content-box',
+    display: 'flex',
+    alignItems: 'center',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    padding: '0 16px',
+    whiteSpace: 'nowrap',
+    backgroundColor: 'inherit',
+    fontSize: 14
+  },
+  body: {
+    overflowX: 'auto',
+    WebkitOverflowScrolling: 'touch',
+    '@media print': {
+      overflowX: 'visible'
+    }
+  },
+  bodyRow: function bodyRow(_ref2) {
+    var firstRow = _ref2.firstRow,
+        isLink = _ref2.isLink;
+    return {
+      display: 'flex',
+      minHeight: '64px',
+      color: 'inherit',
+      backgroundColor: 'surface',
+      borderTopColor: firstRow ? undefined : 'separatorTertiary',
+      borderTopStyle: firstRow ? undefined : 'solid',
+      borderTopWidth: firstRow ? undefined : 1,
+      cursor: isLink ? 'pointer' : undefined,
+      '&:focus': {
+        outline: 'none'
+      },
+      '&:hover': isLink ? {
+        backgroundColor: 'linkBackground'
+      } : undefined
+    };
+  },
+  bodyCell: {
+    boxSizing: 'content-box',
+    display: 'flex',
+    alignItems: 'center',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    padding: '0 16px',
+    whiteSpace: 'nowrap',
+    backgroundColor: 'inherit',
+    fontSize: 14
+  },
+  bodySubRow: function bodySubRow(_ref3) {
+    var isLink = _ref3.isLink;
+    return {
+      display: 'flex',
+      minHeight: '44px',
+      color: 'inherit',
+      borderTopColor: 'separatorTertiary',
+      borderTopStyle: 'solid',
+      borderTopWidth: 1,
+      backgroundColor: 'surfaceSecondary',
+      cursor: isLink ? 'pointer' : undefined,
+      '&:focus': {
+        outline: 'none'
+      },
+      '&:hover': isLink ? {
+        backgroundColor: 'linkBackground'
+      } : {}
+    };
+  },
+  bodySubCell: function bodySubCell(_ref4) {
+    var firstRow = _ref4.firstRow,
+        lastCell = _ref4.lastCell,
+        rowIndex = _ref4.rowIndex,
+        columnIndex = _ref4.columnIndex,
+        columnWidth = _ref4.columnWidth;
+    return {
+      boxSizing: 'content-box',
+      display: 'flex',
+      flexGrow: 0,
+      flexShrink: 0,
+      flexBasis: 'auto',
+      width: columnWidth + 'px',
+      padding: '12px 16px',
+      backgroundColor: 'inherit',
+      fontSize: 14
+    };
+  }
+};
+export var variants = {
+  condensed: {
+    headerCell: {
+      padding: '0 8px'
+    },
+    bodyRow: {
+      minHeight: '40px'
+    },
+    bodyCell: {
+      padding: '0 8px'
+    },
+    bodySubRow: {
+      minHeight: '28px'
+    },
+    bodySubCell: {
+      padding: '4px 8px'
+    }
+  }
+};

package/dist/esm/DateField/DateField.js

@@ -0,0 +1,158 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+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 React, { Component } from 'react';
+import { format } from 'date-fns';
+import Card from '../Card';
+import Calendar from '../Calendar';
+import FocusGroup from '../FocusGroup';
+import Icon from '../Icon';
+import Input from '../Input/Input';
+import Popover from '../Popover';
+import { generateId } from '../utils';
+
+var _ref2 = /*#__PURE__*/React.createElement(Icon, {
+  name: "calendar",
+  color: "foregroundTertiary"
+});
+
+var DateField = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(DateField, _Component);
+
+  function DateField() {
+    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;
+
+    _defineProperty(_assertThisInitialized(_this), "canClosePopover", true);
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isPopoverOpen: _this.props.defaultOpen
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "id", generateId('datefield'));
+
+    _defineProperty(_assertThisInitialized(_this), "openPopover", function () {
+      _this.setState({
+        isPopoverOpen: true
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "closePopover", function () {
+      if (_this.canClosePopover) {
+        _this.setState({
+          isPopoverOpen: false
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "togglePopover", function () {
+      if (_this.state.isPopoverOpen) {
+        _this.closePopover();
+      } else {
+        _this.openPopover();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleDateSelect", function (date) {
+      var input = _this.inputWrapper.querySelector('input');
+
+      if (input.focus) {
+        input.focus();
+      }
+
+      if (_this.props.onChange) {
+        _this.props.onChange(date);
+      }
+
+      _this.closePopover();
+    });
+
+    return _this;
+  }
+
+  var _proto = DateField.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    var _this$props = this.props,
+        formatValue = _this$props.formatValue,
+        defaultOpen = _this$props.defaultOpen,
+        keepInView = _this$props.keepInView,
+        lockScrollWhileOpen = _this$props.lockScrollWhileOpen,
+        minDate = _this$props.minDate,
+        maxDate = _this$props.maxDate,
+        onChange = _this$props.onChange,
+        placement = _this$props.placement,
+        value = _this$props.value,
+        popoverProps = _this$props.popoverProps,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["formatValue", "defaultOpen", "keepInView", "lockScrollWhileOpen", "minDate", "maxDate", "onChange", "placement", "value", "popoverProps"]);
+
+    var isPopoverOpen = this.state.isPopoverOpen;
+    return /*#__PURE__*/React.createElement(FocusGroup, {
+      onBlur: this.closePopover
+    }, function (_ref) {
+      var requestBlur = _ref.requestBlur,
+          setRef = _ref.setRef;
+      return /*#__PURE__*/React.createElement(Popover, _extends({}, popoverProps, {
+        ref: function ref(component) {
+          _this2.popover = component;
+        },
+        innerRef: function innerRef(node) {
+          setRef(_this2.id + "-popover")(node);
+        },
+        as: Card,
+        tabIndex: -1,
+        elevation: 2,
+        onBlur: requestBlur,
+        keepInView: keepInView,
+        lockScrollWhileOpen: lockScrollWhileOpen,
+        placement: placement,
+        open: isPopoverOpen,
+        onRequestClose: _this2.closePopover,
+        anchorElement: /*#__PURE__*/React.createElement(Input, _extends({
+          innerRef: function innerRef(node) {
+            _this2.inputWrapper = node;
+            setRef(_this2.id + "-input")(node);
+          },
+          readOnly: true,
+          value: value ? format(value, formatValue) : '',
+          renderRight: _ref2,
+          onClick: _this2.togglePopover,
+          onBlur: requestBlur,
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === ' ') {
+              event.preventDefault();
+
+              _this2.togglePopover();
+            }
+          }
+        }, restProps))
+      }), /*#__PURE__*/React.createElement(Calendar, {
+        size: "sm",
+        initialDate: value,
+        selected: value,
+        minDate: minDate,
+        maxDate: maxDate,
+        onDateSelect: _this2.handleDateSelect
+      }));
+    });
+  };
+
+  return DateField;
+}(Component);
+
+_defineProperty(DateField, "defaultProps", {
+  defaultOpen: false,
+  lockScrollWhileOpen: true,
+  formatValue: 'MMMM dd, yyyy'
+});
+
+export default DateField;

package/dist/esm/DateField/index.js

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

package/dist/esm/Divider/Divider.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React from 'react';
+import Box from '../Box';
+
+/**
+ * Used to break up content
+ */
+export 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 = _objectWithoutPropertiesLoose(_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.createElement(Box, _extends({}, props, restProps));
+}

package/dist/esm/Divider/index.js

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