@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/Calendar/Calendar.js

@@ -0,0 +1,463 @@
+// @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 = {
+  /**
+   * 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
+              as="button"
+              aria-label={isMonthsView ? 'Choose dates' : 'Choose month'}
+              padding={0.25}
+              fontSize={headerFontSize}
+              lineHeight={3}
+              radius={3}
+              cursor="pointer"
+              backgroundColor={hover ? 'highlight' : 'transparent'}
+              hover={{ backgroundColor: 'highlightSecondary' }}
+              onClick={() => {
+                setCurrentView(isMonthsView ? 'calendar' : 'months')
+              }}
+            >
+              {format(currentDate, 'MMMM')}
+            </Box>
+            <Box
+              as="button"
+              aria-label={isYearsView ? 'Choose dates' : 'Choose year'}
+              padding={0.25}
+              fontSize={headerFontSize}
+              lineHeight={3}
+              radius={3}
+              cursor="pointer"
+              backgroundColor={hover ? 'highlight' : 'transparent'}
+              hover={{ backgroundColor: 'highlightSecondary' }}
+              onClick={() => {
+                setCurrentView(isYearsView ? 'calendar' : 'years')
+              }}
+            >
+              {currentYear}
+            </Box>
+          </StackView>
+          <Group
+            marginRight={0.5}
+            childProps={{
+              variant: 'outline',
+              size: buttonSize,
+            }}
+          >
+            <Button
+              title="Previous month"
+              icon={{ name: 'caret-left' }}
+              disabled={
+                isYearsView
+                  ? currentYear <= minYear
+                  : isSameMonth(currentDate, minDate)
+              }
+              onClick={() => navigateCalendar(-1)}
+            />
+            <Button
+              tooltip={{ title: 'Today' }}
+              icon={{ name: 'radio-1' }}
+              onClick={() => setDate(TODAY, true)}
+            />
+            <Button
+              title="Next month"
+              icon={{ name: 'caret-right' }}
+              disabled={
+                isYearsView
+                  ? currentYear >= maxYear
+                  : isSameMonth(currentDate, maxDate)
+              }
+              onClick={() => navigateCalendar(1)}
+            />
+          </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

@@ -0,0 +1,127 @@
+---
+title: Calendar
+category: General
+summary: Render days in a calendar to allow users to pick dates easier.
+---
+
+### 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
+              )
+            }}
+          />
+        )
+      }}
+    />
+  )
+})
+```

package/src/Calendar/Day.js

@@ -0,0 +1,108 @@
+import React from 'react'
+
+import Icon from '../Icon'
+import StackView from '../StackView'
+import Text from '../Text'
+
+const DayStatus = ({ color, ...restProps }) => (
+  <Icon.Status size="5px" color={color} {...restProps} />
+)
+
+const Day = ({
+  backgroundColor,
+  cellSize,
+  children,
+  color,
+  date,
+  disabled,
+  fontSize,
+  fontWeight,
+  inSameMonth,
+  isMinDate,
+  isMaxDate,
+  isSelected,
+  isToday,
+  selectDate,
+  selectedColor = 'primary',
+  statusColor = 'transparent',
+  statuses,
+  statusOffset = '15%',
+  ...restProps
+}) => {
+  const affordance =
+    !disabled &&
+    !isMinDate &&
+    !isMaxDate &&
+    (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"
+        pointerEvents={(disabled || isMinDate || isMaxDate) && 'none'}
+        hover={
+          affordance && {
+            backgroundColor: 'highlight',
+          }
+        }
+        {...restProps}
+      >
+        {(isSelected || isToday || statusColor) && (
+          <Icon.Status
+            size={cellSize}
+            color={
+              isSelected
+                ? selectedColor
+                : isToday
+                ? 'surfaceTertiary'
+                : statusColor
+            }
+            position="absolute"
+            top="50%"
+            left="50%"
+            transform="translate(-50%, -50%)"
+          />
+        )}
+        <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) => (
+              <DayStatus key={index} color={isSelected ? 'white' : color} />
+            ))}
+          </StackView>
+        )}
+      </StackView>
+    </StackView>
+  )
+}
+
+export default Day

package/src/Calendar/index.js

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