@planningcenter/tapestry-react 3.0.0 → 4.0.0-rc.2

package/src/Calendar/Calendar.tsx

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

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

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

package/src/Calendar/index.js

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