@planningcenter/tapestry-react 2.10.0-rc.8 → 2.10.0

package/src/Calendar/Calendar.tsx

@@ -0,0 +1,517 @@
+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, { PublicProps } from './Day'
+import {
+  getMonthWeekDays,
+  getMonthWeeks,
+  getNextOccurrenceOfDay,
+  getYears,
+  MAX_MONTH_DEFAULT,
+  MAX_YEAR_DEFAULT,
+  MIN_MONTH_DEFAULT,
+  MIN_YEAR_DEFAULT,
+  MONTHS,
+  TODAY,
+} from './utils'
+
+type SizeProps = {
+  buttonSize: string
+  cellSize: number
+  fontSize: number
+  headerFontSize: number
+  statusOffset?: string
+  trimWeekdays: number
+}
+
+const sizes: Record<string, SizeProps> = {
+  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,
+  },
+}
+
+type CalendarMethods = {
+  setDate: (date: Date, moveToCalendarView?: boolean) => void
+  navigateCalendar: (step: number) => void
+}
+
+type CalendarRef = HTMLDivElement | CalendarMethods
+
+export type CalendarProps = {
+  /**
+   * Gain access to the outer wrapping `StackView` ref
+   */
+  calendarRef?: React.RefObject<HTMLDivElement>
+  // NOTE: Currently not used by any products
+
+  /**
+   * 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
+  // NOTE: Currently not used by any products
+
+  /**
+   * The maximum date the calendar can be navigated to.
+   */
+  maxDate?: Date
+  // NOTE: Currently not used by any products
+
+  /**
+   * Callback when month or year navigation occurs.
+   */
+  onDateChange?: (date: Date) => void
+
+  /**
+   * Callback when a day is selected.
+   */
+  onDateSelect?: (date: Date) => void
+  // NOTE: Currently not used by any products
+
+  /**
+   * 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
+}
+
+// NOTE: This additional type is to support the `forwardRef` call below and
+// the static properties that are added to the `Calendar` component.
+type CalendarComponent = React.ForwardRefExoticComponent<
+  CalendarProps & React.RefAttributes<HTMLDivElement>
+> & {
+  TODAY: Date
+  Day: typeof Day
+  getNextOccurrenceOfDay: (
+    day: number,
+    date: Date,
+    weekStartsOn?: number
+  ) => Date
+  isBeforeDay: (date: Date | null, dateToCompare: Date | null) => boolean
+  isAfterDay: (date: Date | null, dateToCompare: Date | null) => boolean
+  isSameDay: (dateLeft: Date | null, dateRight: Date | null) => boolean
+  isWithinRange: (
+    date: Date | null,
+    range: { start: Date | null; end: Date | null }
+  ) => boolean
+}
+
+const Calendar = forwardRef<CalendarRef, CalendarProps>(
+  (
+    {
+      date = null,
+      initialDate = TODAY,
+      maxDate = null,
+      minDate = null,
+      onDateChange = null,
+      onDateSelect = null,
+      renderDay = (props) => <Day {...(props as PublicProps)} />,
+      selected = null,
+      size = 'md',
+      weekStartsOn = null,
+      ...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: Date, moveToCalendarView?: boolean) => {
+      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 = (step: number) => {
+      const isYearsView = currentView === 'years'
+      const add = isYearsView ? addYears : addMonths
+      setDate(add(currentDate, step))
+    }
+
+    useEffect(() => {
+      if (date !== null && !isSameDay(lastDate.current, date)) {
+        setCurrentDate(date)
+      }
+      lastDate.current = date
+    }, [date])
+
+    useImperativeHandle(calendarRef, () => ({
+      setDate,
+      navigateCalendar,
+    }))
+
+    return (
+      <StackView
+        innerRef={calendarRef as React.RefObject<HTMLDivElement>}
+        {...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>
+    )
+  }
+) as CalendarComponent
+
+Calendar.defaultProps = {
+  date: null,
+  initialDate: TODAY,
+  minDate: null,
+  maxDate: null,
+  renderDay: (props) => <Day {...(props as PublicProps)} />,
+  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/Day.js

@@ -0,0 +1,162 @@
+import React from 'react'
+
+import Icon from '../Icon'
+import StackView from '../StackView'
+import Text from '../Text'
+
+export type PublicProps = {
+  children?: any,
+  /**
+   * Background color of the container.
+   */
+  backgroundColor?: string,
+  /**
+   * Text color of the date.
+   */
+  color?: string,
+  /**
+   * Disables the `onClick` callback.
+   */
+  disabled?: boolean,
+  /**
+   * Sets the font size of the date.
+   */
+  fontSize?: number | string,
+  /**
+   * Sets the font weight of the date.
+   */
+  fontWeight?: number | string,
+  /**
+   * Circular background color of the selected date, default's to theme `primary`.
+   */
+  selectedColor?: string,
+  /**
+   * Circular background color, default's to `transparent`. Can be used to provide a visual queue for a given day.
+   */
+  statusColor?: string,
+  /**
+   * Specifies the `bottom` offset of the status dots, defaults to `15%`.
+   */
+  statusOffset: string | number,
+  /**
+   * Accepts an array of color names (theme token or valid html) which render as small colorized dots below the date.
+   */
+  statuses?: array,
+}
+
+const Day = ({
+  backgroundColor,
+  // @ts-ignore error TS2339: Property 'cellSize' does not exist on type 'PublicProps'.
+  cellSize,
+  children,
+  color,
+  // @ts-ignore error TS2339: Property 'date' does not exist on type 'PublicProps'.
+  date,
+  disabled,
+  fontSize,
+  fontWeight,
+  // @ts-ignore error TS2339: Property 'isSameMonth' does not exist on type 'PublicProps'.
+  inSameMonth,
+  // @ts-ignore error TS2339: Property 'isMinDate' does not exist on type 'PublicProps'.
+  isMinDate,
+  // @ts-ignore error TS2339: Property 'isMaxDate' does not exist on type 'PublicProps'.
+  isMaxDate,
+  // @ts-ignore error TS2339: Property 'isSelected' does not exist on type 'PublicProps'.
+  isSelected,
+  // @ts-ignore error TS2339: Property 'isToday' does not exist on type 'PublicProps'.
+  isToday,
+  // @ts-ignore error TS2339: Property 'selectDate' does not exist on type 'PublicProps'.
+  selectDate,
+  selectedColor = 'primary',
+  statusColor = 'transparent',
+  statuses,
+  statusOffset = '15%',
+  ...restProps
+}: PublicProps) => {
+  const affordance =
+    !disabled &&
+    !isMinDate &&
+    !isMaxDate &&
+    // @ts-ignore error TS2339: Property 'onClick' does not exist on type '{}'.
+    // @ts-ignore error TS2339: Property 'onMouseDown' does not exist on type '{}'.
+    (selectDate || restProps.onClick || restProps.onMouseDown)
+  return (
+    <StackView
+      width={cellSize}
+      height={cellSize}
+      position="relative"
+      userSelect="none"
+      backgroundColor={backgroundColor}
+      color={color}
+      cursor={affordance ? 'pointer' : 'default'}
+      onClick={() =>
+        selectDate && !disabled && !isMinDate && !isMaxDate && selectDate(date)
+      }
+    >
+      <StackView
+        width="100%"
+        height="100%"
+        alignment="center"
+        distribution="center"
+        // @ts-ignore error TS2322: Type '"" | "none"' is not assignable to type 'PointerEvents'.
+        pointerEvents={(disabled || isMinDate || isMaxDate) && 'none'}
+        hover={
+          affordance && {
+            backgroundColor: 'highlight',
+          }
+        }
+        {...restProps}
+      >
+        {(isSelected || isToday || statusColor) && (
+          <Icon
+            color={
+              isSelected
+                ? selectedColor
+                : isToday
+                ? 'surfaceTertiary'
+                : statusColor
+            }
+            left="50%"
+            position="absolute"
+            top="50%"
+            transform="translate(-50%, -50%)"
+            name="tapestry.radio0"
+            size={cellSize}
+          />
+        )}
+        <Text
+          as="span"
+          fontSize={fontSize}
+          fontWeight={fontWeight}
+          lineHeight={2}
+          position="relative"
+        >
+          {date.getDate()}
+        </Text>
+        {statuses && (
+          <StackView
+            axis="horizontal"
+            distribution="center"
+            position="absolute"
+            bottom={statusOffset}
+            left={0}
+            right={0}
+            spacing={0.25}
+          >
+            {statuses.map((color, index) => (
+              <Icon
+                color={isSelected ? 'white' : color}
+                key={index}
+                name="tapestry.radio0"
+                size="5px"
+              />
+            ))}
+          </StackView>
+        )}
+      </StackView>
+    </StackView>
+  )
+}
+
+Day.displayName = 'Calendar.Day'
+export default Day

package/src/Calendar/Day.mdx

@@ -0,0 +1,6 @@
+---
+title: Calendar.Day
+category: General
+summary: Provides easier custom day rendering.
+parent: Calendar
+---

package/src/Calendar/index.js

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