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

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

package/src/Calendar/Calendar.mdx

@@ -1,129 +0,0 @@
----
-title: Calendar
-category: General
-summary: Render days in a calendar to allow users to pick dates easier.
-propsSummary: Accepts [StackView](/stackview) props.
-isParent: true
----
-
-### Simple
-
-```jsx live
-render(
-  <Calendar
-    renderDay={(props) => (
-      <Calendar.Day {...props} onClick={() => alert(props.date)} />
-    )}
-  />
-)
-```
-
-### Statuses
-
-```jsx live
-const currentMonth = Calendar.TODAY.getMonth()
-const currentYear = Calendar.TODAY.getFullYear()
-const createDate = (day) => new Date(currentYear, currentMonth, day)
-const confirmedDates = [
-  createDate(2),
-  createDate(8),
-  createDate(13),
-  createDate(15),
-  createDate(23),
-]
-const unconfirmedDates = [
-  createDate(8),
-  createDate(9),
-  createDate(10),
-  createDate(23),
-  createDate(25),
-]
-
-render(() => {
-  const [date, setDate] = React.useState(Calendar.TODAY)
-  return (
-    <Calendar
-      selected={date}
-      renderDay={(props) => {
-        const statuses = []
-        if (
-          confirmedDates.some((date) => Calendar.isSameDay(date, props.date))
-        ) {
-          statuses.push('success')
-        }
-        if (
-          unconfirmedDates.some((date) => Calendar.isSameDay(date, props.date))
-        ) {
-          statuses.push('error')
-        }
-        return (
-          <Calendar.Day
-            {...props}
-            fontWeight={props.isSelected ? 800 : 400}
-            statuses={statuses}
-            onClick={statuses.length > 0 ? () => setDate(props.date) : null}
-          />
-        )
-      }}
-    />
-  )
-})
-```
-
-### Drag to select
-
-```jsx live
-const currentMonth = Calendar.TODAY.getMonth()
-const currentYear = Calendar.TODAY.getFullYear()
-const createDate = (day) => new Date(currentYear, currentMonth, day)
-
-render(() => {
-  const [hoveredDate, setHoveredDate] = React.useState(null)
-  const [startDate, setStartDate] = React.useState(createDate(13))
-  const [endDate, setEndDate] = React.useState(createDate(22))
-  return (
-    <Calendar
-      renderDay={(props) => {
-        const isEnd =
-          Calendar.isSameDay(props.date, startDate) ||
-          Calendar.isSameDay(props.date, endDate)
-        const inRange = Calendar.isWithinRange(props.date, {
-          start: startDate,
-          end: endDate || hoveredDate,
-        })
-        if (isEnd || inRange) {
-          delete props.isToday
-        }
-        return (
-          <Calendar.Day
-            {...props}
-            fontWeight={isEnd ? 800 : 400}
-            color={isEnd ? 'light-8' : inRange ? 'foreground' : props.color}
-            backgroundColor={
-              isEnd
-                ? 'primary'
-                : inRange
-                ? 'surfaceTertiary'
-                : props.backgroundColor
-            }
-            onMouseDown={() => {
-              setStartDate(props.date)
-              setEndDate(null)
-            }}
-            onMouseEnter={() => setHoveredDate(props.date)}
-            onMouseLeave={() => setHoveredDate(null)}
-            onMouseUp={() => {
-              setHoveredDate(null)
-              setEndDate(
-                Calendar.isAfterDay(props.date, startDate)
-                  ? props.date
-                  : startDate
-              )
-            }}
-          />
-        )
-      }}
-    />
-  )
-})
-```