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

package/src/Button/Input.tsx

@@ -1,192 +0,0 @@
-// @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

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

package/src/Calendar/Calendar.js

@@ -1,473 +0,0 @@
-// @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