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

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
-              )
-            }}
-          />
-        )
-      }}
-    />
-  )
-})
-```

package/src/Calendar/Day.js

@@ -1,151 +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,
-  cellSize,
-  children,
-  color,
-  date,
-  disabled,
-  fontSize,
-  fontWeight,
-  inSameMonth,
-  isMinDate,
-  isMaxDate,
-  isSelected,
-  isToday,
-  selectDate,
-  selectedColor = 'primary',
-  statusColor = 'transparent',
-  statuses,
-  statusOffset = '15%',
-  ...restProps
-}: PublicProps) => {
-  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
-            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

package/src/Calendar/utils.js

@@ -1,115 +0,0 @@
-import {
-  addWeeks,
-  eachDayOfInterval,
-  endOfMonth,
-  endOfWeek,
-  getISODay,
-  isSameDay,
-  lastDayOfWeek,
-  setISODay,
-  startOfDay,
-  startOfMonth,
-  startOfWeek,
-} from 'date-fns'
-
-export const TODAY = startOfDay(new Date())
-
-export const YEARS_PER_PAGE = 12
-
-export const DAYS_IN_WEEK = 7
-
-export const DAYS_IN_SIX_WEEKS = 42
-
-export const MIN_MONTH_DEFAULT = 0
-
-export const MAX_MONTH_DEFAULT = 11
-
-export const MIN_YEAR_DEFAULT = 1900
-
-export const MAX_YEAR_DEFAULT = 3000
-
-export const MONTHS = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-]
-
-export const WEEKDAYS = [
-  'Sunday',
-  'Monday',
-  'Tuesday',
-  'Wednesday',
-  'Thursday',
-  'Friday',
-  'Saturday',
-]
-
-export function getMonthWeekDays({ trimWeekdays, weekStartsOn }) {
-  const weekdays = [...WEEKDAYS]
-  const sortedWeekdays = weekdays.concat(weekdays.splice(0, weekStartsOn))
-  return sortedWeekdays.map((weekday, index) => ({
-    full: weekday,
-    trimmed: trimWeekdays
-      ? weekday.substring(0, parseInt(trimWeekdays, 10))
-      : weekday,
-  }))
-}
-
-export function getMonthWeeks(
-  date,
-  { forceSixWeeks = true, weekStartsOn = 0, locale } = {}
-) {
-  const weekOptions = { weekStartsOn, locale }
-  const monthFirstDate = startOfMonth(date)
-  const monthLastDate = endOfMonth(date)
-  const monthFirstWeekdayDate = startOfWeek(monthFirstDate, weekOptions)
-  const monthLastWeekdayDate = lastDayOfWeek(monthLastDate, weekOptions)
-  let currentEndOfWeek = endOfWeek(monthFirstWeekdayDate, weekOptions)
-  let days = eachDayOfInterval({
-    start: monthFirstWeekdayDate,
-    end: monthLastWeekdayDate,
-  })
-  let week = []
-  if (forceSixWeeks && days.length < DAYS_IN_SIX_WEEKS) {
-    days = eachDayOfInterval({
-      start: monthFirstWeekdayDate,
-      end: addWeeks(
-        monthLastWeekdayDate,
-        (DAYS_IN_SIX_WEEKS % days.length) / DAYS_IN_WEEK
-      ),
-    })
-  }
-  return days.reduce((weeks, day) => {
-    week.push(day)
-    if (isSameDay(day, currentEndOfWeek)) {
-      weeks.push(week)
-      week = []
-    } else {
-      currentEndOfWeek = endOfWeek(day, weekOptions)
-    }
-    return weeks
-  }, [])
-}
-
-export function getNextOccurrenceOfDay(dayOfWeek) {
-  const date = setISODay(TODAY, dayOfWeek)
-  return getISODay(TODAY) <= dayOfWeek ? date : addWeeks(date, 1)
-}
-
-export function getYears(activeYear) {
-  const activeOffset = activeYear % YEARS_PER_PAGE
-  let years = []
-  for (let index = 0; index < YEARS_PER_PAGE; index++) {
-    years.push(activeYear - activeOffset + index)
-  }
-  return years
-}

package/src/Card/Card.mdx

@@ -1,55 +0,0 @@
----
-title: Card
-category: General
-propsSummary: Accepts [StackView](/stackview) props and valid HTML attributes.
-isParent: true
----
-
-```jsx live
-render(
-  <StackView
-    grow={1}
-    shrink={1}
-    padding={2}
-    spacing={2}
-    backgroundColor="backgroundSecondary"
-  >
-    {[1, 2, 3].map((index) => (
-      <Card key={index} padding={2} elevation={1}>
-        Card {index}
-      </Card>
-    ))}
-  </StackView>
-)
-```
-
-```jsx live
-render(
-  <Card spacing={<Divider />}>
-    <Card.Section>
-      <Heading level={4}>Title</Heading>
-    </Card.Section>
-    <Card.Section subdued>Content</Card.Section>
-  </Card>
-)
-```
-
-```jsx live
-render(
-  <Card spacing={<Divider />}>
-    <Card.Section as="header" subdued>
-      <HeadingUppercase>2 People</HeadingUppercase>
-    </Card.Section>
-    <Card.Section axis="horizontal" alignment="center" padding={1}>
-      <Avatar source="https://api.adorable.io/avatars/c" marginRight={1} />
-      <StackView shrink={1}>
-        <Text fontSize={4} truncate>
-          This is where we need to write a pretty long sentence so we can get a
-          feel for how text will work with the truncate prop.
-        </Text>
-        <Text fontSize={5}>This can be some secondary text</Text>
-      </StackView>
-    </Card.Section>
-  </Card>
-)
-```

package/src/Card/Card.tsx

@@ -1,82 +0,0 @@
-import * as React from 'react'
-
-import { useThemeValue } from '../system'
-import { StackView, StackViewProps } from '../StackView'
-import { Section } from './Section'
-import { cloneChildren } from '../utils'
-
-export type CardProps = {
-  children?: React.ReactNode
-
-  /** Adds a slightly higher contrast background. */
-  subdued?: boolean
-
-  /** The size of the radius. (Default is 3px). */
-  radius?: number | string
-} & StackViewProps
-
-export function Card({
-  children,
-  subdued,
-  radius = 3,
-  ...restProps
-}: CardProps) {
-  const cardTheme = useThemeValue('card')
-
-  // List of component types to ignore when setting the radius
-  // for first & last child elements
-  const ignoreRadiusTypes = [
-    'Avatar',
-    'Badge',
-    'Button',
-    'Calendar',
-    'ChurchCenterStatus',
-    'Group',
-    'Inline',
-    'Input',
-    'InputBox',
-    'Modal',
-    'Progress',
-    'Spinner',
-    'Status',
-    'Tab',
-    'Tooltip'
-  ]
-
-  return (
-    <StackView
-      width="100%"
-      lineHeight={2.5}
-      borderColor="separatorTertiary"
-      borderStyle="solid"
-      borderWidth={1}
-      backgroundColor={subdued ? 'surfaceSecondary' : 'surface'}
-      color="foreground"
-      radius={radius}
-      {...cardTheme}
-      {...restProps}
-    >
-      {radius > 0
-        ? cloneChildren(children, (child, { firstChild, lastChild }) =>
-            child.props.radius === undefined && !ignoreRadiusTypes.includes(child.type.name)
-              ? firstChild
-                ? {
-                    [`radius${
-                      restProps.axis === 'horizontal' ? 'Left' : 'Top'
-                    }`]: (radius as number) - 1,
-                  }
-                : lastChild
-                ? {
-                    [`radius${
-                      restProps.axis === 'horizontal' ? 'Right' : 'Bottom'
-                    }`]: (radius as number) - 1,
-                  }
-                : {}
-              : {}
-          )
-        : children}
-    </StackView>
-  )
-}
-
-Card.Section = Section

package/src/Card/Section.mdx

@@ -1,19 +0,0 @@
----
-title: Card.Section
-category: General
-summary: Used to wrap discrete content within `Card`.
-propsSummary: Accepts all valid HTML attributes and [StackView](/stackview) props.
-parent: Card
----
-
-```jsx live
-render(
-  <Card spacing={<Divider />}>
-    {[1, 2, 3, 4, 5].map((index) => (
-      <Card.Section key={index} subdued={index % 2 === 0}>
-        Section {index}
-      </Card.Section>
-    ))}
-  </Card>
-)
-```

package/src/Card/Section.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react'
-
-import { StackView, StackViewProps } from '../StackView'
-
-export type SectionProps = {
-  children?: React.ReactNode
-
-  /** Adds a slightly higher contrast background. */
-  subdued?: boolean
-} & StackViewProps &
-  React.RefAttributes<any> &
-  React.HTMLAttributes<any>
-
-export function Section({ subdued, ...restProps }: SectionProps) {
-  return (
-    <StackView
-      width="100%"
-      padding={1}
-      backgroundColor={subdued ? 'surfaceSecondary' : undefined}
-      {...restProps}
-    />
-  )
-}
-
-Section.displayName = 'Card.Section'

package/src/Card/index.ts

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