@planningcenter/tapestry-react 2.10.0-rc.4 → 2.10.0-rc.6

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

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'