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

package/src/TimeField/TimeField.tsx

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

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

package/src/TimeField/utils.js

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

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

@@ -1,133 +0,0 @@
-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 toggleButton = getByRole('switch')
-    expect(toggleButton).toBeInTheDocument()
-  })
-
-  it('should call onClick when clicked', () => {
-    const mockOnClick = jest.fn()
-    const { getByRole } = render(
-      <ToggleSwitch isChecked={false} label="Toggle me" onClick={mockOnClick} />
-    )
-
-    const toggleButton = getByRole('switch')
-    fireEvent.click(toggleButton)
-
-    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 toggleButton = getByRole('switch')
-    expect(toggleButton).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 toggleButton = getByRole('switch')
-    expect(toggleButton).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 toggleButton = getByRole('switch')
-    expect(toggleButton).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 toggleButton = getByRole('switch')
-    fireEvent.click(toggleButton)
-
-    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 toggleButton = getByRole('switch')
-      expect(toggleButton).toHaveStyle(`height: ${base * 2}px`)
-      expect(toggleButton).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 toggleButton = getByRole('switch')
-      expect(toggleButton).toHaveStyle(`height: ${base * 2.25}px`)
-      expect(toggleButton).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 toggleButton = getByRole('switch')
-      expect(toggleButton).toHaveStyle(`height: ${base * 2.5}px`)
-      expect(toggleButton).toHaveStyle(`width: ${base * 4.375}px`)
-    })
-  })
-})

package/src/ToggleSwitch/ToggleSwitch.tsx

@@ -1,106 +0,0 @@
-import React from 'react'
-
-import { Box } from '../Box'
-import Button from '../Button'
-import { colors } from '../system/colors'
-import { StackView, StackViewProps } from '../StackView'
-import Text from '../Text'
-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 (
-    <StackView
-      alignment="center"
-      axis="horizontal"
-      spacing={size === 'xs' ? 0.5 : size === 'sm' ? 0.75 : 1}
-    >
-      <Button
-        aria-checked={isChecked}
-        as="button"
-        backgroundColor={
-          disabled
-            ? colors.grays.light.neutral81
-            : isChecked
-            ? backgroundColor
-            : colors.grays.light.neutral62
-        }
-        onClick={onClick}
-        opacity={1}
-        position="relative"
-        radius="pill"
-        role="switch"
-        theme={false}
-        {...{ disabled, tooltip }}
-        {...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}
-        />
-      </Button>
-      {label && (
-        <Text size={size === 'xs' ? 5 : size === 'sm' ? 4 : 3}>{label}</Text>
-      )}
-    </StackView>
-  )
-}
-
-export default ToggleSwitch

package/src/ToggleSwitch/index.ts

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