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

package/src/TimeField/TimeField.tsx

@@ -0,0 +1,344 @@
+import React, { useEffect, useRef, useState, KeyboardEvent } from 'react'
+
+import Box from '../Box'
+import Input from '../Input/Input'
+import InputBox from '../Input/InputBox'
+import InputField from '../Input/InputField'
+import NumberField from '../NumberField'
+import { noop, padNumber } from '../utils'
+
+import {
+  addHoursToTime,
+  addMinutesToTime,
+  addTimeToDate,
+  getTimeFromDate,
+} from './utils'
+
+type TimeFieldProps = {
+  /**
+   * An array of keys to ignore when pushed.
+   * ex: ["ArrowUp", "ArrowDown"].
+   */
+  ignoredKeys?: string[]
+
+  interval?: number
+
+  /**
+   * Render native time input, defaults to `true` if user platform is an iOS device, otherwise `false`.
+   */
+  isIOS?: boolean
+
+  max?: number
+
+  min?: number
+
+  /**
+   * Receives new time from typing or navigating with up and down arrow keys.
+   */
+  onChange: (event: any) => void
+
+  /**
+   * Displays time based on a 12 hour clock, `true` by default.
+   */
+  twelveHourClock?: boolean
+
+  /**
+   * The controlled value passed to the internal input.
+   * Accepts an array of [hours, minutes] based on a 24 hour clock.
+   */
+  value: [number, number]
+}
+
+const isMobile =
+  typeof window !== 'undefined'
+    ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+        navigator.userAgent
+      )
+    : false
+
+const TimeField = ({
+  ignoredKeys,
+  interval,
+  isIOS = false,
+  max,
+  min,
+  onChange,
+  twelveHourClock = true,
+  value,
+  ...restProps
+}: TimeFieldProps) => {
+  const ref = useRef(null)
+  const [hours, setHours] = useState(value[0])
+  const [minutes, setMinutes] = useState(value[1])
+  const [meridiem, setMeridiem] = useState(hours < 12 ? 'AM' : 'PM')
+  const [hoursDisplay, setHoursDisplay] = useState(
+    twelveHourClock && hours > 12 ? hours - 12 : hours
+  )
+
+  const decrementHoursBy = (amount: number) => {
+    const updatedHours = hours - amount
+
+    if (twelveHourClock) {
+      if (updatedHours > 12) {
+        setHours(updatedHours)
+        setHoursDisplay(updatedHours - 12)
+      } else if (updatedHours <= 12 && updatedHours > 0) {
+        setHours(updatedHours)
+        setHoursDisplay(updatedHours)
+      } else if (updatedHours === 0) {
+        setHours(updatedHours)
+        setHoursDisplay(12)
+      } else {
+        setHours(23)
+        setHoursDisplay(11)
+      }
+    } else {
+      if (updatedHours < 0) {
+        setHours(23)
+        setHoursDisplay(23)
+      } else {
+        setHours(updatedHours)
+        setHoursDisplay(updatedHours)
+      }
+    }
+  }
+
+  const incrementHoursBy = (amount: number) => {
+    const updatedHours = hours + amount
+
+    if (twelveHourClock) {
+      if (updatedHours > 0 && updatedHours <= 12) {
+        setHours(updatedHours)
+        setHoursDisplay(updatedHours)
+      } else if (updatedHours > 12 && updatedHours < 24) {
+        setHours(updatedHours)
+        setHoursDisplay(updatedHours - 12)
+      } else {
+        setHours(0)
+        setHoursDisplay(12)
+      }
+    } else {
+      if (updatedHours < 24) {
+        setHours(updatedHours)
+        setHoursDisplay(updatedHours)
+      } else {
+        setHours(0)
+        setHoursDisplay(0)
+      }
+    }
+  }
+
+  const decrementMinutesBy = (amount: number) => {
+    const updatedMinutes = minutes - amount
+
+    if (updatedMinutes >= 0) {
+      setMinutes(updatedMinutes)
+    } else {
+      setMinutes(59)
+      decrementHoursBy(1)
+    }
+  }
+
+  const incrementMinutesBy = (amount: number) => {
+    const updatedMinutes = minutes + amount
+
+    if (updatedMinutes <= 59) {
+      setMinutes(updatedMinutes)
+    } else {
+      setMinutes(0)
+      incrementHoursBy(1)
+    }
+  }
+
+  const toggleMeridiem = () => {
+    if (meridiem === 'AM') {
+      setMeridiem('PM')
+      if (hours >= 0 && hours <= 12) {
+        setHours(hours + 12)
+      }
+    } else {
+      setMeridiem('AM')
+      if (hours >= 12 && hours < 24) {
+        setHours(hours - 12)
+      }
+    }
+  }
+
+  const handleHoursKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (ignoredKeys && ignoredKeys.includes(event.key)) {
+      return
+    }
+    if (event.key === 'Backspace') {
+      event.preventDefault()
+    }
+    if (event.key === 'ArrowRight') {
+      ref.current.node.children[2].focus()
+    }
+    if (event.key === 'ArrowUp') {
+      incrementHoursBy(1)
+    }
+    if (event.key === 'ArrowDown') {
+      decrementHoursBy(1)
+    }
+  }
+
+  const handleHoursChange = (e: any) => {
+    setHoursDisplay(e)
+    !twelveHourClock && setHours(e)
+  }
+
+  const handleHoursBlur = (e: any) => {
+    const updatedHoursValue = parseInt(e.target.value)
+
+    if (twelveHourClock) {
+      if (updatedHoursValue === 0) {
+        setHours(0)
+        setHoursDisplay(12)
+      } else if (hours <= 12) {
+        setHours(updatedHoursValue)
+        setHoursDisplay(updatedHoursValue)
+      } else {
+        if (updatedHoursValue === 12) {
+          setHours(12)
+          setHoursDisplay(12)
+        } else {
+          setHours(updatedHoursValue + 12)
+          setHoursDisplay(updatedHoursValue)
+        }
+      }
+    } else {
+      setHours(updatedHoursValue)
+      setHoursDisplay(updatedHoursValue)
+    }
+  }
+
+  const handleMinutesKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'ArrowLeft') {
+      ref.current.node.children[0].focus()
+    }
+    if (event.key === 'ArrowRight') {
+      ref.current.node.children[3].focus()
+    }
+    if (event.key === 'ArrowUp') {
+      incrementMinutesBy(1)
+    }
+    if (event.key === 'ArrowDown') {
+      decrementMinutesBy(1)
+    }
+  }
+
+  const handleAMPMKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (ignoredKeys && ignoredKeys.includes(event.key)) {
+      return
+    }
+    if (event.key !== 'Tab' && !(event.metaKey && event.key === 'r')) {
+      event.preventDefault()
+    }
+    if (event.key === 'ArrowLeft') {
+      ref.current.node.children[2].focus()
+    }
+    if (
+      (event.key.toLowerCase() === 'a' && meridiem === 'PM') ||
+      (event.key.toLowerCase() === 'p' && meridiem === 'AM') ||
+      event.key === 'ArrowUp' ||
+      event.key === 'ArrowDown'
+    ) {
+      toggleMeridiem()
+    }
+  }
+
+  const updateTime = (time: [number, number]) => {
+    const [hours, minutes] = time
+
+    return onChange([hours, minutes])
+  }
+
+  const handleMobileChange = (event: any) => {
+    const [hours, minutes] = event.target.value.split(':')
+
+    if (hours || minutes) {
+      setHours(hours)
+      setMinutes(minutes)
+    } else {
+      setHours(0)
+      setMinutes(0)
+    }
+  }
+
+  useEffect(() => {
+    if (hours < 12) {
+      setMeridiem('AM')
+    } else {
+      setMeridiem('PM')
+    }
+    updateTime([hours, minutes])
+  }, [hours, minutes])
+
+  return isMobile || isIOS ? (
+    <Input
+      {...restProps}
+      type="time"
+      autoWidth={`${hours}:${padNumber(minutes, 2)} ${meridiem}`}
+      value={`${padNumber(hours, 2)}:${padNumber(minutes, 2)}`}
+      onChange={handleMobileChange}
+    />
+  ) : (
+    <InputBox ref={ref} inline {...restProps}>
+      <NumberField
+        aria-label="Hours"
+        autoWidth={false}
+        fontVariantNumeric="tabular-nums"
+        grow={0}
+        max={twelveHourClock ? 12 : 23}
+        min={0}
+        moveFocusOnMax
+        onBlur={handleHoursBlur}
+        onChange={handleHoursChange}
+        onKeyDown={handleHoursKeyDown}
+        pad={2}
+        textAlign="center"
+        value={hoursDisplay}
+        width="2ch"
+        {...{ ignoredKeys }}
+      />
+      <Box as="span" width={0.5} textAlign="center" userSelect="none">
+        :
+      </Box>
+      <NumberField
+        aria-label="Minutes"
+        autoWidth={false}
+        fontVariantNumeric="tabular-nums"
+        grow={0}
+        max={59}
+        min={0}
+        moveFocusOnMax
+        onChange={(e) => setMinutes(e)}
+        onKeyDown={handleMinutesKeyDown}
+        pad={2}
+        textAlign="center"
+        value={minutes}
+        width="2ch"
+        {...{ ignoredKeys }}
+      />
+      {twelveHourClock && (
+        <InputField
+          aria-label="AM/PM"
+          grow={0}
+          highlightOnInteraction
+          onChange={noop}
+          onKeyDown={handleAMPMKeyDown}
+          textAlign="center"
+          value={meridiem}
+          width="2em"
+        />
+      )}
+    </InputBox>
+  )
+}
+
+TimeField.addHoursToTime = addHoursToTime
+TimeField.addMinutesToTime = addMinutesToTime
+TimeField.addTimeToDate = addTimeToDate
+TimeField.getTimeFromDate = getTimeFromDate
+
+export default TimeField

package/src/TimeField/index.js

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

package/src/TimeField/utils.js

@@ -0,0 +1,44 @@
+import { addHours, addMinutes, getHours, getMinutes } from 'date-fns'
+
+export const HOURS_IN_DAY = 24
+
+export const HOURS_TO_NOON = HOURS_IN_DAY / 2
+
+export const MINUTES_IN_HOUR = 60
+
+export function addHoursToTime(time, hoursToAdd) {
+  let [hours, minutes] = time
+  return [modulo(hours + hoursToAdd, HOURS_IN_DAY), minutes]
+}
+
+export function addMinutesToTime(time, minutesToAdd) {
+  let [hours, minutes] = time
+  const nextMinutes = minutes + minutesToAdd
+  const remainderMinutes = modulo(nextMinutes, MINUTES_IN_HOUR)
+  if (remainderMinutes >= 0) {
+    const nextHours = hours + Math.floor(nextMinutes / MINUTES_IN_HOUR)
+    hours = modulo(nextHours, HOURS_IN_DAY)
+    minutes = remainderMinutes
+  } else {
+    minutes = nextMinutes
+  }
+  return [hours, minutes]
+}
+
+export function addTimeToDate(date, time) {
+  const [hours, minutes] = time
+  return addHours(addMinutes(date, minutes), hours)
+}
+
+export function getMeridiem(time) {
+  const [hours] = time
+  return hours <= 11 ? 'AM' : 'PM'
+}
+
+export function getTimeFromDate(date) {
+  return [getHours(date), getMinutes(date)]
+}
+
+export function modulo(n, m) {
+  return ((n % m) + m) % m
+}

package/src/ToggleSwitch/ToggleSwitch.mdx

@@ -0,0 +1,56 @@
+---
+title: ToggleSwitch
+category: General
+summary: ToggleSwitches are used to switch between two states, most commonly on and off, and visually show the current state.
+themeKey: toggleSwitch
+uxCompliant: true
+---
+
+```jsx live
+render(
+  <StackView spacing={6}>
+    <StackView axis="horizontal" spacing={2}>
+      {['xs', 'sm', 'md'].map((size) => (
+        <ToggleSwitch
+          key={size}
+          label={`${size} toggle`}
+          size={size}
+          tooltip={`${size} toggle`}
+        />
+      ))}
+    </StackView>
+    <StackView axis="horizontal" spacing={2}>
+      <ToggleSwitch isChecked label="On" tooltip="On" />
+      <ToggleSwitch disabled label="Disabled, off" tooltip="Disabled, off" />
+      <ToggleSwitch
+        disabled
+        isChecked
+        label="Disabled, On"
+        tooltip="Disabled, On"
+      />
+    </StackView>
+    <StackView axis="horizontal" spacing={2}>
+      <ToggleSwitch backgroundColor="red-5" isChecked label="Custom color" />
+      <ThemeProvider theme={{ toggleSwitch: { backgroundColor: 'create35' } }}>
+        <ToggleSwitch isChecked label="Theme-provided color" />
+      </ThemeProvider>
+    </StackView>
+  </StackView>
+)
+```
+
+```jsx live
+function App() {
+  const [isChecked, setIsChecked] = React.useState(false)
+  return (
+    <StackView>
+      <ToggleSwitch
+        isChecked={isChecked}
+        label="Controlled toggle"
+        onClick={() => setIsChecked(!isChecked)}
+      />
+    </StackView>
+  )
+}
+render(App)
+```

package/src/ToggleSwitch/ToggleSwitch.test.tsx

@@ -0,0 +1,135 @@
+import React from 'react'
+import { render, fireEvent } from '@testing-library/react'
+import '@testing-library/jest-dom/extend-expect'
+import ToggleSwitch from './ToggleSwitch'
+
+const base = 8
+
+describe('ToggleSwitch component', () => {
+  it('should render with default properties', () => {
+    const { getByRole } = render(
+      <ToggleSwitch isChecked={false} label="Toggle me" onClick={() => {}} />
+    )
+
+    const toggleSwitch = getByRole('switch')
+    expect(toggleSwitch).toBeInTheDocument()
+  })
+
+  it('should call onClick when clicked', () => {
+    const mockOnClick = jest.fn()
+    const { getByRole } = render(
+      <ToggleSwitch isChecked={false} label="Toggle me" onClick={mockOnClick} />
+    )
+
+    const toggleSwitch = getByRole('switch')
+    fireEvent.click(toggleSwitch)
+
+    expect(mockOnClick).toHaveBeenCalled()
+  })
+
+  it('should display the label', () => {
+    const label = 'Toggle me'
+    const { getByText } = render(
+      <ToggleSwitch isChecked={false} label={label} onClick={() => {}} />
+    )
+
+    expect(getByText(label)).toBeInTheDocument()
+  })
+
+  it('should apply active color when isChecked is true', () => {
+    const activeColor = 'green'
+    const { getByRole } = render(
+      <ToggleSwitch
+        backgroundColor={activeColor}
+        isChecked={true}
+        label="Toggle me"
+        onClick={() => {}}
+      />
+    )
+
+    const toggleSwitchGraphicElement = getByRole('switch').firstElementChild
+    expect(toggleSwitchGraphicElement).toHaveStyle(
+      `background-color: ${activeColor}`
+    )
+  })
+
+  it('should apply aria-checked="true" when isChecked is true', () => {
+    const { getByRole } = render(
+      <ToggleSwitch isChecked={true} label="Toggle me" onClick={() => {}} />
+    )
+
+    const toggleSwitch = getByRole('switch')
+    expect(toggleSwitch).toHaveAttribute('aria-checked', 'true')
+  })
+
+  it('should apply aria-checked="false" when isChecked is false', () => {
+    const { getByRole } = render(
+      <ToggleSwitch isChecked={false} label="Toggle me" onClick={() => {}} />
+    )
+
+    const toggleSwitch = getByRole('switch')
+    expect(toggleSwitch).toHaveAttribute('aria-checked', 'false')
+  })
+
+  it('should not be clickable when disabled', () => {
+    const mockOnClick = jest.fn()
+    const { getByRole } = render(
+      <ToggleSwitch
+        disabled={true}
+        isChecked={false}
+        label="Toggle me"
+        onClick={mockOnClick}
+      />
+    )
+
+    const toggleSwitchGraphicElement = getByRole('switch').firstElementChild
+    fireEvent.click(toggleSwitchGraphicElement)
+
+    expect(mockOnClick).not.toHaveBeenCalled()
+  })
+
+  describe('it should apply the correct size', () => {
+    it(`should apply the correct size for xs`, () => {
+      const { getByRole } = render(
+        <ToggleSwitch
+          isChecked={false}
+          label="Toggle me"
+          onClick={() => {}}
+          size="xs"
+        />
+      )
+
+      const toggleSwitchGraphicElement = getByRole('switch').firstElementChild
+      expect(toggleSwitchGraphicElement).toHaveStyle(`height: ${base * 2}px`)
+      expect(toggleSwitchGraphicElement).toHaveStyle(`width: ${base * 3.5}px`)
+    })
+    it(`should apply the correct size for sm`, () => {
+      const { getByRole } = render(
+        <ToggleSwitch
+          isChecked={false}
+          label="Toggle me"
+          onClick={() => {}}
+          size="sm"
+        />
+      )
+
+      const toggleSwitchGraphicElement = getByRole('switch').firstElementChild
+      expect(toggleSwitchGraphicElement).toHaveStyle(`height: ${base * 2.25}px`)
+      expect(toggleSwitchGraphicElement).toHaveStyle(`width: ${base * 4}px`)
+    })
+    it(`should apply the correct default size (md)`, () => {
+      const { getByRole } = render(
+        <ToggleSwitch
+          isChecked={false}
+          label="Toggle me"
+          onClick={() => {}}
+          size="md"
+        />
+      )
+
+      const toggleSwitchGraphicElement = getByRole('switch').firstElementChild
+      expect(toggleSwitchGraphicElement).toHaveStyle(`height: ${base * 2.5}px`)
+      expect(toggleSwitchGraphicElement).toHaveStyle(`width: ${base * 4.375}px`)
+    })
+  })
+})

package/src/ToggleSwitch/ToggleSwitch.tsx

@@ -0,0 +1,108 @@
+import React from 'react'
+
+import { Box } from '../Box'
+import { colors } from '../system/colors'
+import { StackView, StackViewProps } from '../StackView'
+import Text from '../Text'
+import Tooltip from '../Tooltip'
+import { useThemeProps } from '../system'
+import { MediaQueries } from '..'
+
+export type ToggleSwitchProps = {
+  /** The color of the toggle background when it is active. */
+  backgroundColor?: string
+
+  /** Whether the toggle is disabled. */
+  disabled?: boolean
+
+  /** Whether the toggle is checked. */
+  isChecked: boolean
+
+  /** The label for the toggle. */
+  label: string
+
+  /** The function to call when the toggle is clicked. */
+  onClick: () => void
+
+  /** The size of the toggle. */
+  size?: 'xs' | 'sm' | 'md'
+
+  /** The tooltip to display when the toggle is hovered. */
+  tooltip?: string
+} & StackViewProps
+
+type Props = React.RefAttributes<any> &
+  ToggleSwitchProps &
+  MediaQueries<ToggleSwitchProps>
+
+export function ToggleSwitch(props: Props) {
+  const {
+    disabled = false,
+    isChecked,
+    label,
+    onClick,
+    size = 'md',
+    tooltip,
+    ...restProps
+  } = props
+
+  const { backgroundColor } = useThemeProps('toggleSwitch', restProps)
+
+  let toggleButtonProps = { height: 2.5, width: 4.375 }
+  let toggleNotchProps = { height: 2, width: 2 }
+
+  if (size === 'sm') {
+    toggleButtonProps = { height: 2.25, width: 4 }
+    toggleNotchProps = { height: 1.75, width: 1.75 }
+  } else if (size === 'xs') {
+    toggleButtonProps = { height: 2, width: 3.5 }
+    toggleNotchProps = { height: 1.5, width: 1.5 }
+  }
+
+  return (
+    <Tooltip title={tooltip}>
+      <StackView
+        alignment="center"
+        aria-checked={isChecked ? 'true' : 'false'}
+        as="button"
+        axis="horizontal"
+        cursor={disabled ? 'not-allowed' : 'pointer'}
+        onClick={disabled ? undefined : onClick}
+        radius="pill"
+        role="switch"
+        spacing={size === 'xs' ? 0.5 : size === 'sm' ? 0.75 : 1}
+        {...{ disabled }}
+      >
+        <Box
+          backgroundColor={
+            disabled
+              ? colors.grays.light.neutral81
+              : isChecked
+              ? backgroundColor
+              : colors.grays.light.neutral62
+          }
+          position="relative"
+          radius="pill"
+          {...toggleButtonProps}
+        >
+          <Box
+            background="#fff"
+            left={0.25}
+            pointerEvents="none"
+            position="absolute"
+            radius="circle"
+            top={0.25}
+            transform={`translateX(${isChecked ? 'calc(100% - 1px)' : '0%'})`}
+            transition="120ms"
+            {...toggleNotchProps}
+          />
+        </Box>
+        {label && (
+          <Text size={size === 'xs' ? 5 : size === 'sm' ? 4 : 3}>{label}</Text>
+        )}
+      </StackView>
+    </Tooltip>
+  )
+}
+
+export default ToggleSwitch

package/src/ToggleSwitch/index.ts

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