@planningcenter/tapestry-react 2.10.0-rc.2 → 2.10.0-rc.4

package/src/Button/Input.tsx

@@ -0,0 +1,192 @@
+// @flow
+import React, {
+  Children,
+  cloneElement,
+  forwardRef,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
+import { tabbable } from 'tabbable'
+import ResizeObserver from 'resize-observer-polyfill'
+
+import { Box, BoxProps } from '../Box'
+import { useBoxSize } from '../system'
+import { getRect } from '../utils'
+
+import { Button } from './Button'
+
+type InputProps = {
+  inputProps: any
+  isOpen: boolean
+  open: any
+  close: any
+}
+
+type InputSignature = (inputProps: InputProps) => React.ReactNode
+
+type ButtonInputProps = {
+  /**
+   * Clones immediate child with input specific props. Use a function to access props and pass them yourself.
+   */
+  children: InputSignature | React.ReactElement<any>
+
+  /**
+   * Size of internal [Button](/button) and child [Input](/input).
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+
+  /**
+   * Callback when the input reverts back to a button.
+   */
+  onClose: () => void
+
+  /**
+   * Callback when button is pressed to reveal the input.
+   */
+  onOpen: () => void
+} & BoxProps
+
+type Props = React.RefAttributes<any> &
+  React.HTMLAttributes<any> &
+  ButtonInputProps
+
+function getFixedValue(value) {
+  // Safari doesn't like sub pixels
+  return parseInt(value.toFixed(0), 10) + 1
+}
+
+const ButtonInput = forwardRef(
+  ({ children, style, size, onOpen, onClose, ...restProps }: Props, ref) => {
+    const containerRef = useRef<HTMLElement>()
+    const inputRef = useRef<HTMLElement>()
+    const buttonRef = useRef<HTMLElement>()
+    const [isOpen, setOpen] = useState(false)
+    const { boxSize } = useBoxSize(size)
+    const containerProps = {
+      innerRef: containerRef,
+      height: boxSize,
+      position: 'relative',
+      overflow: 'hidden',
+      transition: 'width 200ms cubic-bezier(.02,.8,.38,1)',
+    } as BoxProps
+    const inputContainerProps = {
+      innerRef: inputRef,
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      left: 0,
+      opacity: isOpen ? 1 : 0,
+      transition: 'opacity 180ms ease',
+    } as BoxProps
+    const inputProps = {
+      size,
+      secondaryStroke: false,
+      disabled: !isOpen,
+      onBlur: () => {
+        const input = inputRef.current.querySelector('input')
+        if (input.value.length === 0) {
+          close()
+        }
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'Escape') {
+          close()
+        }
+      },
+    }
+    const buttonContainerProps = {
+      innerRef: buttonRef,
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      left: 0,
+      opacity: isOpen ? 0 : 1,
+      transition: 'opacity 180ms ease',
+    } as BoxProps
+    const buttonProps = {
+      ...restProps,
+      size,
+      disabled: isOpen,
+      onClick: open,
+    }
+
+    function open() {
+      setOpen(true)
+      const input = inputRef.current.querySelector('input')
+      if (input && input.focus) {
+        setTimeout(() => input.focus())
+      }
+      if (onOpen) {
+        onOpen()
+      }
+    }
+
+    function close() {
+      setOpen(false)
+      const [button] = tabbable(buttonRef.current)
+      if (button && button.focus) {
+        setTimeout(() => button.focus())
+      }
+      if (onClose) {
+        onClose()
+      }
+    }
+
+    function transition() {
+      const container = containerRef.current
+      const inputChild = inputRef.current.firstChild as HTMLElement
+      const buttonChild = buttonRef.current.firstChild as HTMLElement
+      inputChild.style.width = ''
+      buttonChild.style.width = ''
+      const inputRect = getRect(inputChild, { clone: true })
+      const buttonRect = getRect(buttonChild, { clone: true })
+      const containerWidth = getFixedValue(
+        isOpen ? inputRect.width : buttonRect.width
+      )
+      container.style.width = containerWidth + 'px'
+      inputChild.style.width = '100%'
+      buttonChild.style.width = '100%'
+    }
+
+    useLayoutEffect(() => {
+      transition()
+      const ro = new ResizeObserver(transition)
+      ro.observe(isOpen ? inputRef.current : buttonRef.current)
+      return () => {
+        ro.disconnect()
+      }
+    }, [isOpen])
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        open,
+        close,
+      }),
+      []
+    )
+
+    // @ts-ignore
+    const button = <Button {...buttonProps} />
+
+    return (
+      <Box {...containerProps}>
+        <Box {...inputContainerProps}>
+          {typeof children === 'function'
+            ? children({ inputProps, isOpen, open, close })
+            : cloneElement(
+                Children.only(children) as React.ReactElement<any>,
+                inputProps
+              )}
+        </Box>
+        <Box {...buttonContainerProps}>{button}</Box>
+      </Box>
+    )
+  }
+)
+
+ButtonInput.displayName = 'Button.Input'
+
+export default ButtonInput

package/src/Button/index.ts

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

package/src/Calendar/Calendar.js

@@ -0,0 +1,473 @@
+// @flow
+import React, {
+  Children,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react'
+import {
+  addMonths,
+  addYears,
+  format,
+  getMonth,
+  getYear,
+  isAfter,
+  isBefore,
+  isSameDay,
+  isSameMonth,
+  isWithinInterval,
+} from 'date-fns'
+
+import Box from '../Box'
+import Button from '../Button'
+import { useThemeValue } from '../system'
+import Group from '../Group'
+import HeadingUppercase from '../HeadingUppercase'
+import StackView from '../StackView'
+import { useHover } from '../hooks'
+
+import Day from './Day'
+import {
+  getMonthWeekDays,
+  getMonthWeeks,
+  getNextOccurrenceOfDay,
+  getYears,
+  MAX_MONTH_DEFAULT,
+  MAX_YEAR_DEFAULT,
+  MIN_MONTH_DEFAULT,
+  MIN_YEAR_DEFAULT,
+  MONTHS,
+  TODAY,
+} from './utils'
+
+const sizes = {
+  sm: {
+    buttonSize: 'sm',
+    cellSize: 4,
+    fontSize: 4,
+    headerFontSize: 4,
+    statusOffset: '12.5%',
+    trimWeekdays: 2,
+  },
+  md: {
+    buttonSize: 'sm',
+    cellSize: 5,
+    fontSize: 4,
+    headerFontSize: 2,
+    trimWeekdays: 3,
+  },
+  lg: {
+    buttonSize: 'sm',
+    cellSize: 7,
+    fontSize: 3,
+    headerFontSize: 2,
+    trimWeekdays: 3,
+  },
+}
+
+export type CalendarProps = {
+  /**
+   * Gain access to the outer wrapping `StackView` ref
+   */
+  calendarRef?: any,
+
+  /**
+   * Used to calculate the month and year.
+   */
+  date: Date,
+
+  /**
+   * Used to calculate the initial month and year.
+   */
+  initialDate: Date,
+
+  /**
+   * The minimum date the calendar can be navigated to.
+   */
+  minDate: Date,
+
+  /**
+   * The maximum date the calendar can be navigated to.
+   */
+  maxDate: Date,
+
+  /**
+   * Callback when month or year navigation occurs.
+   */
+  onDateChange: (month: number) => void,
+
+  /**
+   * Callback when a day is selected.
+   */
+  onDateSelect: (day: Date) => void,
+
+  /**
+   * Controls rendering of each day. Returns props that should be forwarded to `Calendar.Day`.
+   */
+  renderDay: (props: Object) => void,
+
+  /**
+   * Displays a `primary` colored circle around the selected date.
+   */
+  selected: Date,
+
+  /**
+   * Sets the size of the calendar by changing cell and font sizes.
+   */
+  size: 'sm' | 'md' | 'lg',
+
+  /**
+   * Determines what day of the week the calendar should start on.
+   */
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6,
+}
+
+const Calendar = forwardRef(
+  (
+    {
+      date,
+      initialDate,
+      maxDate,
+      minDate,
+      onDateChange,
+      onDateSelect,
+      renderDay,
+      selected,
+      size,
+      weekStartsOn,
+      ...restProps
+    }: CalendarProps,
+    calendarRef
+  ) => {
+    const calendarTheme = useThemeValue('calendar')
+    const lastDate = useRef(date)
+    const { hover, hoverProps } = useHover()
+    const [currentDate, setCurrentDate] = useState(date || initialDate)
+    const [currentView, setCurrentView] = useState('calendar')
+    const isCalendarView = currentView === 'calendar'
+    const isYearsView = currentView === 'years'
+    const isMonthsView = currentView === 'months'
+    const currentMonth = getMonth(currentDate)
+    const currentYear = getYear(currentDate)
+    const currentYears = getYears(currentYear)
+    const minMonth = getMonth(minDate) || MIN_MONTH_DEFAULT
+    const maxMonth = getMonth(maxDate) || MAX_MONTH_DEFAULT
+    const minYear = getYear(minDate) || MIN_YEAR_DEFAULT
+    const maxYear = getYear(maxDate) || MAX_YEAR_DEFAULT
+    const {
+      buttonSize,
+      cellSize,
+      fontSize,
+      headerFontSize,
+      statusOffset,
+      trimWeekdays,
+    } = sizes[size]
+    const weekdays = getMonthWeekDays({
+      trimWeekdays,
+      weekStartsOn: weekStartsOn || calendarTheme.weekStartsOn || 0,
+    })
+    const weeks = getMonthWeeks(currentDate, {
+      forceSixWeeks: true,
+      weekStartsOn: weekStartsOn || calendarTheme.weekStartsOn || 0,
+    })
+
+    const setDate = (nextDate, moveToCalendarView) => {
+      const nextView = moveToCalendarView ? 'calendar' : currentView
+      if (Calendar.isBeforeDay(nextDate, minDate)) {
+        nextDate = minDate
+      } else if (Calendar.isAfterDay(nextDate, maxDate)) {
+        nextDate = maxDate
+      }
+      if (date === null) {
+        setCurrentDate(nextDate)
+        setCurrentView(nextView)
+      } else {
+        setCurrentView(nextView)
+      }
+      if (onDateChange) {
+        onDateChange(nextDate)
+      }
+    }
+
+    const navigateCalendar = (direction) => {
+      const isYearsView = currentView === 'years'
+      const add = isYearsView ? addYears : addMonths
+      setDate(add(currentDate, direction))
+    }
+
+    useEffect(() => {
+      if (date !== null && !isSameDay(lastDate.current, date)) {
+        setCurrentDate(date)
+      }
+      lastDate.current = date
+    }, [date])
+
+    useImperativeHandle(calendarRef, () => ({
+      setDate,
+      navigateCalendar,
+    }))
+
+    return (
+      <StackView innerRef={calendarRef} {...hoverProps} {...restProps}>
+        <StackView
+          axis="horizontal"
+          alignment="center"
+          distribution="space-between"
+          padding={0.5}
+          paddingBottom={0}
+        >
+          <StackView axis="horizontal" spacing={0.5}>
+            <Box
+              aria-label={isMonthsView ? 'Choose dates' : 'Choose month'}
+              as="button"
+              backgroundColor={hover ? 'highlight' : 'transparent'}
+              cursor="pointer"
+              fontSize={headerFontSize}
+              hover={{ backgroundColor: 'highlightSecondary' }}
+              lineHeight={3}
+              onClick={() => {
+                setCurrentView(isMonthsView ? 'calendar' : 'months')
+              }}
+              padding={0.25}
+              radius={3}
+              tabIndex={-1}
+            >
+              {format(currentDate, 'MMMM')}
+            </Box>
+            <Box
+              aria-label={isYearsView ? 'Choose dates' : 'Choose year'}
+              as="button"
+              backgroundColor={hover ? 'highlight' : 'transparent'}
+              cursor="pointer"
+              fontSize={headerFontSize}
+              hover={{ backgroundColor: 'highlightSecondary' }}
+              lineHeight={3}
+              onClick={() => {
+                setCurrentView(isYearsView ? 'calendar' : 'years')
+              }}
+              padding={0.25}
+              radius={3}
+              tabIndex={-1}
+            >
+              {currentYear}
+            </Box>
+          </StackView>
+          <Group
+            marginRight={0.5}
+            childProps={{
+              variant: 'outline',
+              size: buttonSize,
+            }}
+          >
+            <Button
+              disabled={
+                isYearsView
+                  ? currentYear <= minYear
+                  : isSameMonth(currentDate, minDate)
+              }
+              icon={{ name: 'general.leftChevron', size: 'xxs' }}
+              onClick={() => navigateCalendar(-1)}
+              tabIndex={-1}
+              title="Previous month"
+            />
+            <Button
+              icon={{ name: 'tapestry.radio1' }}
+              onClick={() => setDate(TODAY, true)}
+              tabIndex={-1}
+              tooltip={{ title: 'Today' }}
+            />
+            <Button
+              disabled={
+                isYearsView
+                  ? currentYear >= maxYear
+                  : isSameMonth(currentDate, maxDate)
+              }
+              icon={{ name: 'general.rightChevron', size: 'xxs' }}
+              onClick={() => navigateCalendar(1)}
+              tabIndex={-1}
+              title="Next month"
+            />
+          </Group>
+        </StackView>
+
+        {isMonthsView && (
+          <StackView
+            axis="horizontal"
+            width={cellSize * 7}
+            height={cellSize * 6 + 3.5}
+            marginTop={0.5}
+            wrap
+          >
+            {MONTHS.map((month, monthIndex) => {
+              const monthDisabled = !Calendar.isWithinRange(
+                new Date(currentYear, monthIndex, 1),
+                {
+                  start: new Date(minYear, minMonth, 1),
+                  end: new Date(maxYear, maxMonth, 1),
+                }
+              )
+              return (
+                <StackView
+                  key={month}
+                  as="button"
+                  basis={(cellSize * 7) / 3}
+                  alignment="center"
+                  distribution="center"
+                  fontWeight={700}
+                  cursor={monthDisabled ? 'not-allowed' : 'pointer'}
+                  backgroundColor={
+                    currentMonth === monthIndex
+                      ? 'surfaceSecondary'
+                      : 'transparent'
+                  }
+                  opacity={monthDisabled ? 0.6 : undefined}
+                  hover={{
+                    backgroundColor: monthDisabled ? undefined : 'highlight',
+                  }}
+                  disabled={monthDisabled}
+                  onClick={() => {
+                    const monthDifference = monthIndex - currentMonth
+                    setDate(addMonths(currentDate, monthDifference), true)
+                  }}
+                  children={
+                    <HeadingUppercase cursor="inherit">
+                      {month.substring(0, 3)}
+                    </HeadingUppercase>
+                  }
+                />
+              )
+            })}
+          </StackView>
+        )}
+
+        {isYearsView && (
+          <StackView
+            axis="horizontal"
+            width={cellSize * 7}
+            height={cellSize * 6 + 3.5}
+            marginTop={0.5}
+            wrap
+          >
+            {currentYears.map((year) => {
+              const yearDisabled = !(year >= minYear && year <= maxYear)
+              return (
+                <StackView
+                  key={year}
+                  as="button"
+                  basis={(cellSize * 7) / 3}
+                  alignment="center"
+                  distribution="center"
+                  fontWeight={700}
+                  cursor={yearDisabled ? 'not-allowed' : 'pointer'}
+                  backgroundColor={
+                    currentYear === year ? 'surfaceTertiary' : 'transparent'
+                  }
+                  opacity={yearDisabled ? 0.6 : undefined}
+                  hover={{
+                    backgroundColor: yearDisabled ? undefined : 'highlight',
+                  }}
+                  disabled={yearDisabled}
+                  onClick={() => {
+                    const yearDifference = year - currentYear
+                    setDate(addYears(currentDate, yearDifference), true)
+                  }}
+                  children={
+                    <HeadingUppercase cursor="inherit">{year}</HeadingUppercase>
+                  }
+                />
+              )
+            })}
+          </StackView>
+        )}
+
+        {isCalendarView && (
+          <StackView>
+            <StackView axis="horizontal">
+              {weekdays.map((weekday) => (
+                <StackView
+                  key={weekday.full}
+                  alignment="center"
+                  distribution="center"
+                  width={cellSize}
+                  height={4}
+                >
+                  <HeadingUppercase fontSize={6}>
+                    {weekday.trimmed}
+                  </HeadingUppercase>
+                </StackView>
+              ))}
+            </StackView>
+            {weeks.map((week, index) => (
+              <StackView key={index} axis="horizontal">
+                {Children.toArray(
+                  week.map((date) => {
+                    const inSameMonth = isSameMonth(date, currentDate)
+                    const isMinDate = isBefore(date, minDate)
+                    const isMaxDate = isAfter(date, maxDate)
+                    const isSelected = isSameDay(date, selected)
+                    const isToday = isSameDay(date, TODAY)
+                    const backgroundColor =
+                      isMinDate || isMaxDate ? 'surfaceSecondary' : 'inherit'
+                    const color = isSelected
+                      ? 'white'
+                      : inSameMonth
+                      ? 'inherit'
+                      : 'foregroundTertiary'
+                    return renderDay({
+                      backgroundColor,
+                      cellSize,
+                      color,
+                      date,
+                      fontSize,
+                      inSameMonth,
+                      isMinDate,
+                      isMaxDate,
+                      isSelected,
+                      isToday,
+                      selectDate: onDateSelect,
+                      statusOffset,
+                    })
+                  })
+                )}
+              </StackView>
+            ))}
+          </StackView>
+        )}
+      </StackView>
+    )
+  }
+)
+
+Calendar.defaultProps = {
+  date: null,
+  initialDate: TODAY,
+  minDate: null,
+  maxDate: null,
+  renderDay: (props) => <Day {...props} />,
+  size: 'md',
+}
+
+Calendar.TODAY = TODAY
+
+Calendar.Day = Day
+
+Calendar.getNextOccurrenceOfDay = getNextOccurrenceOfDay
+
+Calendar.isAfterDay = (date, dateToCompare) =>
+  date && dateToCompare && isAfter(date, dateToCompare)
+
+Calendar.isBeforeDay = (date, dateToCompare) =>
+  date && dateToCompare && isBefore(date, dateToCompare)
+
+Calendar.isSameDay = (dateLeft, dateRight) =>
+  dateLeft && dateRight && isSameDay(dateLeft, dateRight)
+
+Calendar.isWithinRange = (date, { start, end }) => {
+  if (date && start && end && isAfter(end, start)) {
+    return isWithinInterval(date, { start, end })
+  }
+}
+
+export default Calendar