@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/DataTable/components/BodyRows.js

@@ -0,0 +1,122 @@
+import React, { Fragment } from 'react'
+
+import { useCss } from '../../system'
+import DragDrop from '../../DragDrop'
+import { getCell, getRowLinkProps } from '../utils'
+
+import BodyRow from './BodyRow'
+import BodySubRows from './BodySubRows'
+
+function BodyRows({
+  columns,
+  columnWidths,
+  data,
+  draggable,
+  getColumnRef,
+  getRowId,
+  getRowLink,
+  getSubData,
+  getVariant,
+  keyboardShortcuts,
+  onRowClick,
+}) {
+  const css = useCss()
+  return data.map((rowData, rowIndex) => {
+    const getCells = (_dragHandleProps) =>
+      columns.map((column, columnIndex) => {
+        const cellVariantStyles = getVariant('bodyCell', {
+          rowData,
+          rowIndex,
+          columnIndex,
+          firstRow: rowIndex === 0,
+          lastRow: rowIndex === Math.max(0, data.length - 1),
+          firstCell: columnIndex === 0,
+          lastCell: columnIndex === Math.max(0, columns.length - 1),
+        })
+        return (
+          <div
+            key={columnIndex}
+            ref={getColumnRef(`${columnIndex}.${rowIndex + 1}`)} // offset by 1 to account for header row
+            role="cell"
+            className={`uikit-reset ${css([...cellVariantStyles, column.css])}`}
+          >
+            {getCell(column.cell, {
+              columnIndex,
+              rowData,
+              rowIndex,
+              _dragHandleProps,
+            })}
+          </div>
+        )
+      })
+    const rowId = getRowId(rowData, rowIndex)
+    const rowVariantClassName = getVariant('bodyRow', {
+      rowData,
+      rowIndex,
+      isLink: Boolean(getRowLink) || Boolean(onRowClick),
+      firstRow: rowIndex === 0,
+      lastRow: rowIndex === Math.max(0, data.length - 1),
+      evenRow: rowIndex % 2 === 0,
+      oddRow: Math.abs(rowIndex % 2) === 1,
+    })
+    const rowProps = {
+      rowData,
+      rowIndex,
+      keyboardShortcuts,
+      onRowClick,
+      className: `uikit-reset ${css(rowVariantClassName)}`,
+      ...getRowLinkProps({ getRowLink, data: rowData, isSubRow: false }),
+    }
+    const subRowData = getSubData ? getSubData(rowData) : null
+    const subRows = subRowData && (
+      <BodySubRows
+        columns={columns}
+        data={subRowData}
+        getColumnRef={getColumnRef}
+        getRowLink={getRowLink}
+        getVariant={getVariant}
+        keyboardShortcuts={keyboardShortcuts}
+        columnWidths={columnWidths}
+        parentRowIndex={rowIndex}
+      />
+    )
+
+    if (draggable) {
+      return (
+        <DragDrop.Draggable
+          key={rowId}
+          draggableId={rowId.toString()}
+          index={rowIndex}
+          data={rowData}
+          placeholder={() => (
+            <BodyRow {...rowProps} placeholder>
+              {getCells({})}
+            </BodyRow>
+          )}
+        >
+          {(provided) => (
+            <Fragment>
+              <BodyRow
+                innerRef={provided.innerRef}
+                {...provided.draggableProps}
+                {...rowProps}
+              >
+                {getCells(provided.dragHandleProps)}
+              </BodyRow>
+              {subRows}
+            </Fragment>
+          )}
+        </DragDrop.Draggable>
+      )
+    } else {
+      return (
+        <Fragment key={rowId}>
+          <BodyRow {...rowProps}>{getCells()}</BodyRow>
+          {subRows}
+        </Fragment>
+      )
+    }
+  })
+}
+
+export default BodyRows

package/src/DataTable/components/BodySubRows.js

@@ -0,0 +1,99 @@
+import React from 'react'
+
+import BodyRow from './BodyRow'
+import Collapse from '../../Collapse'
+import { useCss } from '../../system'
+import { useCollapsibleRowsStore, useSubRowOpen } from '../hooks'
+import { getCell, getRowLinkProps } from '../utils'
+
+const BodySubRowsCollapse = ({ children, lazy, rowIndex }) => {
+  const instant = useCollapsibleRowsStore((state) => state.instant)
+  const isSubRowOpen = useSubRowOpen(rowIndex)
+  return (
+    <Collapse
+      lazy={lazy}
+      instant={instant}
+      open={isSubRowOpen}
+      role="row"
+      style={{ minWidth: 'min-content' }}
+    >
+      {children}
+    </Collapse>
+  )
+}
+
+const BodySubRows = ({
+  columns,
+  columnWidths,
+  data,
+  getColumnRef,
+  getRowLink,
+  getVariant,
+  keyboardShortcuts,
+  onRowClick,
+  parentRowIndex,
+}) => {
+  const css = useCss()
+  return (
+    <BodySubRowsCollapse
+      lazy={columns.some((column) => column.includeSubCellWidth) === false}
+      rowIndex={parentRowIndex}
+    >
+      {data.map((rowData, rowIndex) => {
+        const rowVariantClassName = getVariant('bodySubRow', {
+          rowData,
+          rowIndex,
+          parentRowIndex,
+          isLink: Boolean(getRowLink) || Boolean(onRowClick),
+          firstRow: rowIndex === 0,
+          lastRow: rowIndex === Math.max(0, data.length - 1),
+          evenRow: rowIndex % 2 === 0,
+          oddRow: Math.abs(rowIndex % 2) === 1,
+        })
+        return (
+          <BodyRow
+            key={rowIndex}
+            rowData={rowData}
+            rowIndex={rowIndex}
+            keyboardShortcuts={keyboardShortcuts}
+            onRowClick={onRowClick}
+            className={`uikit-reset ${css(rowVariantClassName)}`}
+            {...getRowLinkProps({ getRowLink, data: rowData, isSubRow: true })}
+          >
+            {columns.map((column, columnIndex) => {
+              const cellVariantClassName = getVariant('bodySubCell', {
+                rowData,
+                rowIndex,
+                columnIndex,
+                columnWidth: columnWidths.current[columnIndex],
+                firstRow: rowIndex === 0,
+                lastRow: rowIndex === Math.max(0, data.length - 1),
+                firstCell: columnIndex === 0,
+                lastCell: columnIndex === Math.max(0, columns.length - 1),
+              })
+              return (
+                <div
+                  key={columnIndex}
+                  ref={getColumnRef(
+                    `${columnIndex}.${parentRowIndex + 1}.${rowIndex}`
+                  )}
+                  className={`uikit-reset ${css([
+                    ...cellVariantClassName,
+                    column.css,
+                  ])}`}
+                >
+                  {getCell(
+                    column.subCell !== undefined ? column.subCell : column.cell,
+                    { columnIndex, rowData, rowIndex }
+                  )}
+                </div>
+              )
+            })}
+          </BodyRow>
+        )
+      })}
+    </BodySubRowsCollapse>
+  )
+}
+
+export default BodySubRows

package/src/DataTable/components/CheckboxCell.js

@@ -0,0 +1,111 @@
+import React, { useCallback } from 'react'
+
+import Icon from './Icon'
+
+const iconPaths = {
+  fill: 'checkbox-0',
+  minus: 'checkbox-1',
+  checked: 'checkbox-2',
+}
+
+const scaleStyles = {
+  visibility: 'visible',
+  transform: 'scale(1)',
+  transition: 'all 120ms ease-out',
+}
+
+const initialStyles = {
+  flexShrink: 0,
+  outline: 0,
+  cursor: 'pointer',
+  ' .ui-kit-Checkbox-Fill ': {
+    transform: 'scale(1)',
+    transformOrigin: 'center center',
+    transition: 'all 180ms ease-out',
+  },
+  ' .ui-kit-Checkbox-Minus, .ui-kit-Checkbox-Checked ': {
+    fill: '#fff',
+    visibility: 'hidden',
+    transform: 'scale(0)',
+    transformOrigin: 'center center',
+    transition: 'all 180ms ease-out',
+  },
+  ' &:hover, &:focus ': {
+    ' .ui-kit-Checkbox-Fill ': {
+      transform: 'scale(1.125)',
+    },
+  },
+  ' &:active ': {
+    ' .ui-kit-Checkbox-Fill ': {
+      transform: 'scale(1)',
+    },
+  },
+}
+
+const checkedStyles = {
+  ' .ui-kit-Checkbox-Checked ': scaleStyles,
+}
+
+const indeterminateStyles = {
+  ' .ui-kit-Checkbox-Minus ': scaleStyles,
+}
+
+function CheckboxCell({
+  checked,
+  disabled,
+  indeterminate,
+  onBlur,
+  onChange,
+  onFocus,
+  size = 'md',
+  ...props
+}) {
+  const handleChange = useCallback(
+    (event) => {
+      event.preventDefault()
+      if (onChange) {
+        onChange(event)
+      }
+    },
+    [onChange]
+  )
+  const cssStyles = [initialStyles]
+  if (checked) {
+    cssStyles.push(checkedStyles)
+  }
+  if (indeterminate) {
+    cssStyles.push(indeterminateStyles)
+  }
+  return (
+    <Icon
+      size={size}
+      tabIndex={0}
+      role="checkbox"
+      aria-checked={indeterminate ? 'mixed' : checked}
+      aria-disabled={disabled}
+      onBlur={onBlur}
+      onFocus={onFocus}
+      onClick={handleChange}
+      onKeyDown={(event) => event.key === ' ' && handleChange(event)}
+      className="uikit-reset ui-kit-Checkbox"
+      css={cssStyles}
+    >
+      <Icon.Path
+        name={iconPaths.fill}
+        className="uikit-reset ui-kit-Checkbox-Fill"
+        fill={checked || indeterminate ? 'primary' : 'surfaceTertiary'}
+        stroke={checked || indeterminate ? 'primary' : 'separatorSecondary'}
+      />
+      <Icon.Path
+        name={iconPaths.minus}
+        className="uikit-reset ui-kit-Checkbox-Minus"
+      />
+      <Icon.Path
+        name={iconPaths.checked}
+        className="uikit-reset ui-kit-Checkbox-Checked"
+      />
+    </Icon>
+  )
+}
+
+export default CheckboxCell

package/src/DataTable/components/ColumnPicker.js

@@ -0,0 +1,51 @@
+import React from 'react'
+
+// import Checkbox from '../../Checkbox'
+import Dropdown from '../../Dropdown'
+import Text from '../../Text'
+
+import Checkbox from './CheckboxCell'
+
+const noop = () => null
+
+function ColumnPicker({
+  columns = [],
+  hiddenColumnIds = [],
+  onChange = noop,
+  ...restProps
+}) {
+  return (
+    <Dropdown
+      variant="outline"
+      icon={{ name: 'columns' }}
+      tooltip={{ title: 'Filter Columns' }}
+      placement="bottom-end"
+      closeOnSelect={false}
+      onSelect={(columnId) => {
+        const newHiddenColumnIds = [...hiddenColumnIds]
+        const indexPosition = newHiddenColumnIds.indexOf(columnId)
+        if (indexPosition > -1) {
+          newHiddenColumnIds.splice(indexPosition, 1)
+        } else {
+          newHiddenColumnIds.push(columnId)
+        }
+        onChange({ columnId, hiddenColumnIds: newHiddenColumnIds })
+      }}
+      {...restProps}
+    >
+      {columns
+        .filter((column) => !column.alwaysVisible)
+        .map((column) => (
+          <Dropdown.Item key={column.id} value={column.id}>
+            <Checkbox
+              checked={hiddenColumnIds.indexOf(column.id) === -1}
+              onChange={noop}
+            />
+            <Text marginLeft={1}>{column.label || column.header}</Text>
+          </Dropdown.Item>
+        ))}
+    </Dropdown>
+  )
+}
+
+export default ColumnPicker

package/src/DataTable/components/HeaderCell.js

@@ -0,0 +1,83 @@
+import React from 'react'
+
+import Icon from '../../Icon'
+import HeadingUppercase from '../../HeadingUppercase'
+
+import { getIconDirection, SORT_ASC } from '../hooks/useColumnSort'
+import useHoverFocus from '../hooks/useHoverFocus'
+
+const HeaderText = ({ children }) => (
+  <HeadingUppercase truncate color="foregroundSecondary" cursor="inherit">
+    {children}
+  </HeadingUppercase>
+)
+
+const HeaderSort = ({
+  affordance,
+  column,
+  currentSort,
+  defaultSort,
+  sorted,
+}) => (
+  <Icon
+    size="xs"
+    name={getIconDirection(
+      currentSort.columnId === column.id
+        ? currentSort.direction
+        : column.defaultSortDirection ||
+            (defaultSort ? defaultSort.direction : SORT_ASC)
+    )}
+    opacity={sorted ? 1 : affordance ? 0.4 : 0}
+  />
+)
+
+function HeaderCell({
+  cellRef,
+  column,
+  columnIndex,
+  columnSort,
+  defaultSort,
+  ...restProps
+}) {
+  const { currentSort, sortColumnById } = columnSort
+  const { isHoverFocus, bind } = useHoverFocus()
+  if (column.sortable) {
+    restProps.tabIndex = 0
+    restProps['aria-sort'] =
+      currentSort.columnId === column.id
+        ? currentSort.direction === 'ASC'
+          ? 'ascending'
+          : 'descending'
+        : 'none'
+    restProps.onClick = () => {
+      sortColumnById(column)
+    }
+    restProps.onKeyDown = (event) => {
+      if (event.key === 'Enter') {
+        sortColumnById(column)
+      }
+    }
+  }
+  return (
+    <div ref={cellRef} role="columnheader" {...restProps} {...bind}>
+      {typeof column.header === 'string' ? (
+        <HeaderText>{column.header}</HeaderText>
+      ) : React.isValidElement(column.header) ? (
+        column.header
+      ) : column.header ? (
+        React.createElement(column.header, { columnIndex })
+      ) : null}
+      {column.sortable && (
+        <HeaderSort
+          defaultSort={defaultSort}
+          currentSort={currentSort}
+          column={column}
+          sorted={currentSort.columnId === column.id}
+          affordance={isHoverFocus}
+        />
+      )}
+    </div>
+  )
+}
+
+export default HeaderCell

package/src/DataTable/components/Icon.js

@@ -0,0 +1,51 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core'
+
+import { useThemeValue } from '../../system'
+
+const sizes = {
+  xxs: '8px',
+  xs: '10px',
+  sm: '12px',
+  md: '14px',
+  lg: '18px',
+  xl: '32px',
+  xxl: '48px',
+}
+
+function Icon({ as, name, size = 'md', color, children, ...props }) {
+  const icons = useThemeValue('icons')
+  const themeColor = useThemeValue(['colors', color])
+  const iconSize = sizes[size] || size
+  const childrenToRender = name ? <path d={icons[name]} /> : children
+  return (
+    <svg
+      viewBox="0 0 16 16"
+      width={iconSize}
+      height={iconSize}
+      fill={themeColor}
+      className="uikit-reset"
+      children={childrenToRender}
+      {...props}
+    />
+  )
+}
+
+function Path({ name, fill, stroke, ...restProps }) {
+  const themeFill = useThemeValue(['colors', fill])
+  const themeStroke = useThemeValue(['colors', stroke])
+  const icons = useThemeValue('icons')
+  return (
+    <path
+      d={icons[name]}
+      fill={fill ? themeFill || fill : 'none'}
+      stroke={stroke ? themeStroke || stroke : undefined}
+      {...restProps}
+    />
+  )
+}
+
+Icon.Path = Path
+
+export default Icon

package/src/DataTable/components/index.js

@@ -0,0 +1,4 @@
+export { default as BodyRows } from './BodyRows'
+export { default as CheckboxCell } from './CheckboxCell'
+export { default as ColumnPicker } from './ColumnPicker'
+export { default as HeaderCell } from './HeaderCell'

package/src/DataTable/hooks/index.js

@@ -0,0 +1,6 @@
+export * from './useCollapsibleRows'
+export { default as useColumnSort } from './useColumnSort'
+export { default as useColumnWidths } from './useColumnWidths'
+export { default as useScrollShadows } from './useScrollShadows'
+export { default as useScrollSync } from './useScrollSync'
+export { default as useVariants } from './useVariants'

package/src/DataTable/hooks/useCollapsibleRows.js

@@ -0,0 +1,97 @@
+import { createContext, useCallback, useContext, useEffect } from 'react'
+import useConstant from 'use-constant'
+import create from 'zustand'
+
+import { range } from '../../utils'
+
+export const CollapsibleRowsContext = createContext(null)
+
+export function useCollapsibleRowsStore(selector) {
+  const { useStore } = useContext(CollapsibleRowsContext)
+  return useStore(selector)
+}
+
+export function useSubRowOpen(index) {
+  return useCollapsibleRowsStore(
+    useCallback(
+      (state) => state.allSubRowsOpen || state.openSubRows.indexOf(index) > -1,
+      [index]
+    )
+  )
+}
+
+export function useAnySubRowsOpen() {
+  return useCollapsibleRowsStore(
+    useCallback((state) => state.openSubRows.length > 0, [])
+  )
+}
+
+export function useCollapsibleRows(data, defaultAllSubRowsOpen = false) {
+  const useStore = useConstant(() =>
+    create((set) => ({
+      instant: false,
+      allSubRowsOpen: defaultAllSubRowsOpen,
+      openSubRows: [],
+      rowCountRange: [],
+      callbacks: {
+        openAllSubRows: () => {
+          set((state) => ({
+            instant: true,
+            allSubRowsOpen: true,
+            openSubRows: state.rowCountRange,
+          }))
+        },
+        closeAllSubRows: () => {
+          set({
+            instant: true,
+            allSubRowsOpen: false,
+            openSubRows: [],
+          })
+        },
+        toggleAllSubRows: () => {
+          set((state) => {
+            const nextAllSubRowsOpen = state.openSubRows.length === 0
+            return {
+              instant: true,
+              allSubRowsOpen: nextAllSubRowsOpen,
+              openSubRows: nextAllSubRowsOpen ? state.rowCountRange : [],
+            }
+          })
+        },
+        toggleSubRowAtIndex: (index) => {
+          set((state) => {
+            const nextOpenSubRows = [...state.openSubRows]
+            const currentIndex = state.openSubRows.indexOf(index)
+            if (currentIndex > -1) {
+              nextOpenSubRows.splice(currentIndex, 1)
+            } else {
+              nextOpenSubRows.push(index)
+            }
+            return {
+              instant: false,
+              allSubRowsOpen: state.rowCountRange.every(
+                (index) => nextOpenSubRows.indexOf(index) > -1
+              ),
+              openSubRows: nextOpenSubRows,
+            }
+          })
+        },
+      },
+    }))
+  )
+  const callbacks = useStore((state) => state.callbacks)
+
+  useEffect(() => {
+    const rowCountRange = range(0, data.length)
+    useStore.setState((state) => ({
+      instant: true,
+      openSubRows: state.allSubRowsOpen ? rowCountRange : [],
+      rowCountRange,
+    }))
+  }, [data])
+
+  return {
+    useStore,
+    ...callbacks,
+  }
+}

package/src/DataTable/hooks/useColumnSort.js

@@ -0,0 +1,62 @@
+import { useCallback, useState } from 'react'
+
+export const SORT_ASC = 'ASC'
+export const SORT_DESC = 'DESC'
+
+export function getIconDirection(direction) {
+  return direction === SORT_ASC ? 'arrow-up' : 'arrow-down'
+}
+
+export function getOppositeSortDirection(direction) {
+  return direction === SORT_ASC ? SORT_DESC : SORT_ASC
+}
+
+function parseSortOrder(query) {
+  const isDescending = query[0] === '-'
+  return {
+    columnId: isDescending ? query.substring(1) : query,
+    direction: isDescending ? SORT_DESC : SORT_ASC,
+  }
+}
+
+function getSortOrder({ columnId, direction }) {
+  return `${direction === SORT_ASC ? '' : '-'}${columnId}`
+}
+
+function getDefaultSort({ columnId, direction, order }) {
+  const defaultSort = order ? parseSortOrder(order) : { columnId, direction }
+  return {
+    ...defaultSort,
+    order: getSortOrder(defaultSort),
+  }
+}
+
+export default function useColumnSort({
+  defaultSort = { columnId: null, direction: SORT_ASC, order: null },
+  onColumnSort,
+}) {
+  const [currentSort, setCurrentSort] = useState(getDefaultSort(defaultSort))
+  const sortColumnById = useCallback(
+    (column) => {
+      setCurrentSort((currentSort) => {
+        const parsedDefaultSort = getDefaultSort({
+          ...defaultSort,
+          direction: column.defaultSortDirection,
+        })
+        const nextSort = { columnId: column.id }
+        if (currentSort.columnId === column.id) {
+          nextSort.direction = getOppositeSortDirection(currentSort.direction)
+        } else {
+          nextSort.direction = column.defaultSortDirection || SORT_ASC
+        }
+        nextSort.order = getSortOrder(nextSort)
+        if (onColumnSort) {
+          onColumnSort(nextSort.columnId ? nextSort : parsedDefaultSort)
+        }
+        return nextSort
+      })
+    },
+    [defaultSort, onColumnSort]
+  )
+  return { currentSort, sortColumnById }
+}