@planningcenter/tapestry-react 2.10.0-rc.13 → 2.10.0-rc.15

package/src/Calendar/utils.js

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

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

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

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

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

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

package/src/Checkbox/Checkbox.mdx

@@ -0,0 +1,41 @@
+---
+title: Checkbox
+category: Forms
+summary: Checkboxes are most commonly used to give users a way to make a range of selections (zero, one, or multiple). They may also be used as a way to have a user indicate that they agree to specific terms and conditions.
+propsSummary: Accepts [StackView](/stackview) props.
+---
+
+```jsx live
+render(
+  <StackView axis="horizontal" spacing={2}>
+    <Checkbox name="checkbox" value="peach" label="Peach" />
+    <Checkbox name="checkbox" value="watermelon" label="Watermelon" />
+    <StackView as="label" axis="horizontal" spacing={0.5}>
+      <Checkbox name="checkbox" value="orange" />
+      <Text size={4}>Orange</Text>
+    </StackView>
+  </StackView>
+)
+```
+
+```jsx live
+render(
+  <ThemeProvider
+    theme={{
+      checkbox: {
+        fill: 'lightpink',
+        stroke: 'hotpink',
+        focusStroke: 'hotpink',
+        checkedFill: 'hotpink',
+        checkedStroke: 'hotpink',
+      },
+    }}
+  >
+    <StackView axis="horizontal" spacing={2}>
+      <Checkbox name="checkbox" value="apple" label="Apple" />
+      <Checkbox name="checkbox" value="banana" label="Banana" />
+      <Checkbox name="checkbox" value="kiwi" label="Kiwi" />
+    </StackView>
+  </ThemeProvider>
+)
+```

package/src/Checkbox/Checkbox.tsx

@@ -0,0 +1,251 @@
+import React, { useContext, useRef, useLayoutEffect, useState } from 'react'
+
+import Box from '../Box'
+import CheckboxGroupContext from '../CheckboxGroup/CheckboxGroupContext'
+import Icon from '../Icon'
+import Link from '../Link'
+import StackView from '../StackView'
+import Text from '../Text'
+import VariantProvider from '../VariantProvider'
+import Tooltip from '../Tooltip'
+import { useThemeValue } from '../system'
+import { useAccessibilityViolation } from '../hooks/use-accessibility-violation'
+import { mergeProps } from '../utils'
+
+const iconPaths = {
+  fill: 'tapestry.checkbox0',
+  minus: 'tapestry.checkbox1',
+  checked: 'tapestry.checkbox2',
+}
+
+export type CheckboxProps = {
+  /**
+   * Disables the checkbox component.
+   */
+  disabled?: boolean
+
+  /**
+   * Used to label the checkbox. Checkbox must have parent label if left `undefined`.
+   * Pass `null` to use as a graphical element only, please note you need to provide
+   * additional aria attributes when doing so.
+   */
+  label?: string | null
+
+  /**
+   * Connects input to its corrospending label's `htmlFor`.
+   */
+  id?: string | number
+
+  /**
+   * If `true`, puts the checkbox in an indeterminate state.
+   */
+  indeterminate?: boolean
+
+  /**
+   * Checks the checkbox, will be overriden if indeterminate is `true`.
+   */
+  checked?: boolean
+
+  /**
+   * Maps to the internal input's name prop.
+   */
+  name?: string
+
+  /**
+   * Maps to the internal input's value prop.
+   */
+  value?: any
+
+  /**
+   * Determines the size of the checkbox based on a [scale](http://google.com).
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+  /**
+   * Maps to the internal input's `onChange` prop.
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
+
+  /**
+   * Maps to the internal input's `onFocus` prop.
+   */
+  onFocus?: (event: React.ChangeEvent<HTMLInputElement>) => void
+
+  /**
+   * Maps to the internal input's `onBlur` prop.
+   */
+  onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+const Checkbox = ({
+  checked,
+  disabled,
+  id,
+  indeterminate,
+  label,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  size = 'sm',
+  value,
+  ...restProps
+}: CheckboxProps): JSX.Element => {
+  const checkboxTheme = useThemeValue('checkbox')
+  const checkboxGroup = useContext(CheckboxGroupContext)
+  const [localChecked, setLocalChecked] = useState(false)
+  const [focus, setFocus] = useState(false)
+  const isChecked = checkboxGroup
+    ? checkboxGroup.value.indexOf(value) > -1
+    : checked === undefined
+    ? localChecked
+    : checked
+  let tooltip = null
+
+  const ref = useRef(null)
+  const [needsParentLabel, setNeedsParentLabel] = useState(false)
+  const { tooltipProps, wrapperProps } = useAccessibilityViolation(
+    <>
+      Checkbox must define a{' '}
+      <Link
+        external
+        to="https://planningcenter.github.io/tapestry-react/checkbox#label"
+        weight={700}
+      >
+        label
+      </Link>{' '}
+      through props or a parent element that is a label.
+    </>,
+    `Tapestry-React: <Checkbox/> must define a "label" prop or have a parent that renders a label for proper accessibility.`
+  )
+
+  useLayoutEffect(() => {
+    if (process.env.NODE_ENV !== 'production') {
+      if (label === undefined) {
+        const labelParent = ref.current.closest('label') !== null
+        setNeedsParentLabel(!labelParent)
+      }
+    }
+  }, [label])
+
+  if (process.env.NODE_ENV !== 'production') {
+    restProps = mergeProps(restProps, { innerRef: ref })
+    if (needsParentLabel) {
+      tooltip = tooltipProps
+      restProps = mergeProps(restProps, wrapperProps)
+    }
+  }
+
+  return (
+    <VariantProvider
+      checked={isChecked}
+      indeterminate={indeterminate}
+      focus={focus}
+      disabled={disabled}
+    >
+      <Tooltip {...tooltip}>
+        <StackView
+          as={label ? 'label' : 'span'}
+          inline
+          axis="horizontal"
+          alignment="center"
+          shrink={0}
+          position="relative"
+          spacing={0.5}
+          variants={{
+            disabled: {
+              opacity: 0.5,
+              cursor: 'not-allowed',
+            },
+          }}
+          {...restProps}
+        >
+          <Box
+            as="input"
+            type="checkbox"
+            id={id !== undefined ? String(id) : undefined}
+            name={checkboxGroup ? checkboxGroup.name : name}
+            checked={isChecked}
+            value={value}
+            disabled={disabled}
+            onChange={
+              checkboxGroup
+                ? checkboxGroup.onChange
+                : (event: React.ChangeEvent<HTMLInputElement>) => {
+                    setLocalChecked(event.target.checked)
+                    onChange && onChange(event)
+                  }
+            }
+            onFocus={(event) => {
+              setFocus(true)
+              onFocus && onFocus(event)
+            }}
+            onBlur={(event) => {
+              setFocus(false)
+              onBlur && onBlur(event)
+            }}
+            position="absolute"
+            top={0}
+            left={0}
+            zIndex={0}
+            opacity={0}
+          />
+          <Icon size={size} zIndex={1}>
+            <Icon.Path
+              name={iconPaths.fill}
+              fill={checkboxTheme.fill}
+              stroke={checkboxTheme.stroke}
+              transform="scale(1)"
+              transformOrigin="center center"
+              transition="all 180ms ease-out"
+              variants={{
+                focus: { stroke: checkboxTheme.focusStroke },
+                active: { transform: 'scale(1)' },
+                checked: {
+                  fill: checkboxTheme.checkedFill,
+                  stroke: checkboxTheme.checkedStroke,
+                },
+                indeterminate: { fill: 'primary-light', stroke: 'primary' },
+              }}
+            />
+            <Icon.Path
+              name={iconPaths.minus}
+              fill="#fff"
+              transform="scale(0)"
+              transformOrigin="center center"
+              transition="all 180ms ease-out"
+              variants={{
+                indeterminate: {
+                  visibility: 'visible',
+                  transform: 'scale(1)',
+                  transition: 'all 120ms ease-out',
+                },
+              }}
+            />
+            <Icon.Path
+              name={iconPaths.checked}
+              fill="#fff"
+              transform="scale(0)"
+              transformOrigin="center center"
+              transition="all 180ms ease-out"
+              variants={{
+                checked: {
+                  visibility: 'visible',
+                  transform: 'scale(1)',
+                  transition: 'all 120ms ease-out',
+                },
+              }}
+            />
+          </Icon>
+          {label && (
+            <Text fontSize={4} lineHeight={2.5}>
+              {label}
+            </Text>
+          )}
+        </StackView>
+      </Tooltip>
+    </VariantProvider>
+  )
+}
+
+export default Checkbox

package/src/Checkbox/index.js

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

package/src/CheckboxCard/CheckboxCard.js

@@ -0,0 +1,77 @@
+// @flow
+import React, { useState } from 'react'
+
+import Box from '../Box'
+import Card from '../Card'
+import Checkbox from '../Checkbox'
+import Text from '../Text'
+
+type Props = {
+  /**
+   * Checks the checkbox, will be overriden if indeterminate is `true`.
+   */
+  checked?: boolean,
+
+  /**
+   * Maps to the internal input's `onChange` prop.
+   */
+  onChange?: () => null,
+
+  /** First line of text in the card, in a darker color. */
+  title?: string,
+
+  /** Second line of text in the card, in a lighter color. */
+  subtitle?: string,
+}
+
+function CheckboxCard({
+  checked,
+  onChange,
+  subtitle,
+  title,
+  ...restProps
+}: Props) {
+  const [localChecked, setLocalChecked] = useState(false)
+  const isActive = checked === undefined ? localChecked : checked
+  return (
+    <Card
+      as="label"
+      axis="horizontal"
+      alignment="center"
+      width="auto"
+      padding={1}
+      spacing={1}
+      cursor="pointer"
+      borderColor={isActive ? 'separatorFocus' : 'separatorSecondary'}
+      hover={{
+        borderColor: !isActive ? 'separator' : undefined,
+      }}
+      css={{
+        ':focus-within': {
+          stroke: 'separatorFocusSecondary',
+          strokeWeight: 2,
+        },
+      }}
+      {...restProps}
+    >
+      <Checkbox
+        size="sm"
+        checked={checked}
+        onChange={(event) => {
+          setLocalChecked(event.target.checked)
+          onChange && onChange(event)
+        }}
+      />
+      <Box shrink={1}>
+        <Text as="span" title={title} truncate>
+          {title}
+        </Text>
+        <Text as="span" title={subtitle} color="foregroundSecondary" truncate>
+          {subtitle}
+        </Text>
+      </Box>
+    </Card>
+  )
+}
+
+export default CheckboxCard

package/src/CheckboxCard/CheckboxCard.mdx

@@ -0,0 +1,28 @@
+---
+title: CheckboxCard
+category: Forms
+propsSummary: Accepts [Card](/card) props.
+---
+
+```jsx live
+render(
+  <StackView axis="horizontal" distribution="fill" spacing={2}>
+    {[
+      {
+        name: 'Band rehearsal',
+        date: 'Wednesday 10AM',
+      },
+      {
+        name: 'Drum practice',
+        date: 'Friday 3PM',
+      },
+      {
+        name: 'Choir rehearsal',
+        date: 'Tuesady 6AM',
+      },
+    ].map(({ name, date }) => (
+      <CheckboxCard key={name} title={name} subtitle={date} />
+    ))}
+  </StackView>
+)
+```