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

package/src/Radio/Radio.mdx

@@ -1,38 +0,0 @@
----
-title: Radio
-category: Forms
-summary: Use radios to present a list of options where users can only make a single selection.
-propsSummary: Accepts [StackView](/stackview) props.
----
-
-```jsx live
-render(
-  <StackView axis="horizontal" spacing={3}>
-    <Radio name="radio" value="peach" label="Peach" />
-    <Radio name="radio" value="watermelon" label="Watermelon" />
-    <Radio name="radio" value="orange" label="Orange" />
-  </StackView>
-)
-```
-
-```jsx live
-render(
-  <ThemeProvider
-    theme={{
-      radio: {
-        fill: 'lightpink',
-        stroke: 'hotpink',
-        focusStroke: 'hotpink',
-        checkedFill: 'hotpink',
-        checkedStroke: 'hotpink',
-      },
-    }}
-  >
-    <StackView axis="horizontal" spacing={3}>
-      <Radio name="theme-radio" value="apple" label="Apple" />
-      <Radio name="theme-radio" value="banana" label="Banana" />
-      <Radio name="theme-radio" value="kiwi" label="Kiwi" />
-    </StackView>
-  </ThemeProvider>
-)
-```

package/src/Radio/Radio.tsx

@@ -1,192 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react'
-import mitt from 'mitt'
-
-import Box from '../Box'
-import Icon from '../Icon'
-import StackView from '../StackView'
-import Text from '../Text'
-import VariantProvider from '../VariantProvider'
-import { useThemeValue } from '../system'
-
-const iconPaths = {
-  fill: 'tapestry.radio0',
-  checked: 'tapestry.radio1',
-}
-
-export type RadioProps = {
-  /**
-   * Disables the radio component.
-   */
-  disabled?: boolean
-
-  /**
-   * Determines if the radio should use an internal label or not.
-   */
-  label?: string
-
-  /**
-   * Connects input to its corresponding label's `htmlFor`.
-   */
-  id?: string | number
-
-  /**
-   * Checks the radio.
-   */
-  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 radio 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.FocusEvent<HTMLInputElement>) => void
-
-  /**
-   * Maps to the internal input's `onBlur` prop.
-   */
-  onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void
-}
-
-const radioEmitter = mitt()
-
-const Radio = ({
-  checked,
-  disabled,
-  id,
-  label,
-  name,
-  onBlur,
-  onChange,
-  onFocus,
-  size = 'xs',
-  value,
-  ...restProps
-}: RadioProps): JSX.Element => {
-  const radioTheme = useThemeValue('radio')
-  const inputRef = useRef()
-  const [localChecked, setLocalChecked] = useState(false)
-  const [focus, setFocus] = useState(false)
-
-  // Because radio components are grouped by the name prop we use an event emitter
-  // as a way to toggle the state between each one
-  useEffect(() => {
-    function handleChange(target) {
-      setLocalChecked(target === inputRef.current)
-    }
-    radioEmitter.on(name, handleChange)
-    return () => {
-      radioEmitter.off(name, handleChange)
-    }
-  }, [])
-  return (
-    <VariantProvider
-      checked={checked === undefined ? localChecked : checked}
-      focus={focus}
-    >
-      <StackView
-        as={label ? 'label' : 'span'}
-        inline
-        axis="horizontal"
-        alignment="center"
-        shrink={0}
-        opacity={disabled ? 0.5 : undefined}
-        cursor={disabled ? 'not-allowed' : undefined}
-        position="relative"
-        {...restProps}
-      >
-        <Box
-          innerRef={inputRef}
-          as="input"
-          // Type '{ innerRef: MutableRefObject<undefined>; as: string; type: string; id: string; name: string; checked: boolean; value: any; disabled: boolean; onChange: (event: ChangeEvent<HTMLInputElement>) => void; onFocus: (event: FocusEvent<...>) => void; onBlur: (event: FocusEvent<...>) => void; position: "absolute"; }' is not assignable to type 'IntrinsicAttributes & RefAttributes<any> & HTMLAttributes<any> & ImgHTMLAttributes<any> & { children?: any; ... 5 more ...; mediaQueries?: object; } & ... 4 more ... & Variants<...>'.
-          // @ts-ignore
-          type="radio"
-          id={String(id)}
-          name={name}
-          checked={checked}
-          value={value}
-          disabled={disabled}
-          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-            radioEmitter.emit(name, event.target)
-            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 className="tapestry-react-Radio-Icon" size={size}>
-          <Icon.Path
-            name={iconPaths.fill}
-            fill={radioTheme.fill}
-            stroke={radioTheme.stroke}
-            transform="scale(1)"
-            transformOrigin="center center"
-            transition="all 180ms ease-out"
-            variants={{
-              hover: { transform: 'scale(1.125)' },
-              focus: {
-                transform: 'scale(1.125)',
-                stroke: radioTheme.focusStroke,
-              },
-              active: { transform: 'scale(1)' },
-              checked: {
-                fill: radioTheme.checkedFill,
-                stroke: radioTheme.checkedStroke,
-              },
-            }}
-          />
-          <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} marginLeft={0.5}>
-            {label}
-          </Text>
-        )}
-      </StackView>
-    </VariantProvider>
-  )
-}
-
-export default Radio

package/src/Radio/index.js

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

package/src/RangeSlider/RangeSlider.js

@@ -1,253 +0,0 @@
-// @flow
-import React, { useRef, useState } from 'react'
-import { clamp, snap } from '@popmotion/popcorn'
-
-import Box from '../Box'
-import { useMeasure } from '../hooks'
-import { useThemeProps } from '../system'
-
-export type Props = {
-  /**
-   * The current value of the slider.
-   */
-  value?: number,
-  /**
-   * Minimum number that can be selected. Defaults to `0`.
-   */
-  min?: number,
-  /**
-   * Maximum number that can be selected. Defaults to `100`.
-   */
-  max?: number,
-  /**
-   * Specifies the size of each movement when incrementing/decrementing the value. Defaults to `1`.
-   */
-  step?: number,
-  /**
-   * Called with the new value when dragging, clicking, tapping, or using a keyboard.
-   */
-  onChange?: Function,
-  /**
-   * Provides the ability to change styles used throughout the `RangeSlider` component.
-   */
-  variant?: {
-    track?: Object,
-    progress?: Object,
-    thumb?: Object,
-  },
-  /**
-   * Prevents the slider from being used and lowers its opacity.
-   */
-  disabled?: boolean,
-}
-
-function RangeSlider(props: Props) {
-  const {
-    min = 0,
-    max = 100,
-    step = 1,
-    disabled,
-    value,
-    onChange,
-    ...restProps
-  } = props
-
-  const { variant = {}, ...themeProps } = useThemeProps(
-    'rangeSlider',
-    restProps
-  )
-
-  const snapTo = snap(step)
-  const sliderRef = useRef()
-  const trackRef = useRef()
-  const thumbRef = useRef()
-  const startPositionRef = useRef()
-  const currentValueRef = useRef()
-  const [useMeasureRef, useMeasureEffect] = useMeasure()
-
-  const [sliderSize, setSliderSize] = useState(0)
-  const [thumbSize, setThumbSize] = useState(0)
-  const upperBound = sliderSize - thumbSize
-
-  function trimAlignValue(value) {
-    return snapTo(clamp(min, max, value))
-  }
-
-  function getPointerPosition(event) {
-    if (event.touches) {
-      return event.touches[0].pageX
-    } else {
-      return event.pageX
-    }
-  }
-
-  function getOffsetFromValue(value) {
-    const range = max - min
-    const ratio = (value - min) / range
-    return ratio * upperBound
-  }
-
-  function getValueFromOffset(offset) {
-    const ratio = offset / upperBound
-    return ratio * (max - min) + min
-  }
-
-  function getOffsetFromPosition(position) {
-    const sliderRect = sliderRef.current.getBoundingClientRect()
-    const sliderMin = sliderRect.left
-    const windowOffset = window.pageXOffset
-    const sliderStart = windowOffset + sliderMin
-    const pixelOffset = position - sliderStart - thumbSize / 2
-    return pixelOffset
-  }
-
-  function getValueFromPosition(position) {
-    const diffValue = (position / (sliderSize - thumbSize)) * (max - min)
-    return trimAlignValue(currentValueRef.current + diffValue)
-  }
-
-  function handleThumbKeyDown(event) {
-    if (event.ctrlKey || event.shiftKey || event.altKey) {
-      return
-    }
-    switch (event.key) {
-      case 'ArrowLeft':
-      case 'ArrowDown':
-      case 'Left':
-      case 'Down':
-        event.preventDefault()
-        onChange(trimAlignValue(value - step))
-        break
-      case 'ArrowRight':
-      case 'ArrowUp':
-      case 'Right':
-      case 'Up':
-        event.preventDefault()
-        onChange(trimAlignValue(value + step))
-        break
-      case 'Home':
-        event.preventDefault()
-        onChange(min)
-        break
-      case 'End':
-        event.preventDefault()
-        onChange(max)
-        break
-      default:
-    }
-  }
-
-  function handleTrackPointerDown(event) {
-    const position = getPointerPosition(event)
-    const valueAtPosition = trimAlignValue(
-      getValueFromOffset(getOffsetFromPosition(position))
-    )
-    startPositionRef.current = position
-    currentValueRef.current = valueAtPosition
-    document.addEventListener('mousemove', handlePointerMove)
-    document.addEventListener('mouseup', handlePointerUp)
-    document.addEventListener('mouseleave', handlePointerUp)
-    document.addEventListener('touchmove', handlePointerMove)
-    document.addEventListener('touchend', handlePointerUp)
-    document.addEventListener('touchcancel', handlePointerUp)
-    event.preventDefault()
-    thumbRef.current.focus()
-    onChange(valueAtPosition)
-  }
-
-  function handlePointerMove(event) {
-    const position = getPointerPosition(event)
-    const positionDifference = position - startPositionRef.current
-    const nextValue = getValueFromPosition(positionDifference)
-    event.preventDefault()
-    onChange(nextValue)
-  }
-
-  function handlePointerUp() {
-    document.removeEventListener('mousemove', handlePointerMove)
-    document.removeEventListener('mouseup', handlePointerUp)
-    document.removeEventListener('mouseleave', handlePointerUp)
-    document.removeEventListener('touchmove', handlePointerMove)
-    document.removeEventListener('touchend', handlePointerUp)
-    document.removeEventListener('touchcancel', handlePointerUp)
-  }
-
-  useMeasureRef(sliderRef)
-
-  useMeasureEffect(() => {
-    const sliderRect = sliderRef.current.getBoundingClientRect()
-    const sliderMin = sliderRect.left
-    const sliderMax = sliderRect.right
-    const thumbRect = thumbRef.current.getBoundingClientRect()
-    const thumbSize = thumbRect.width
-    setSliderSize(Math.abs(sliderMax - sliderMin))
-    setThumbSize(thumbSize)
-  }, [])
-
-  return (
-    <Box
-      innerRef={sliderRef}
-      width="100%"
-      paddingVertical={0.5}
-      position="relative"
-      cursor={disabled ? 'not-allowed' : 'pointer'}
-      opacity={disabled ? 0.65 : undefined}
-      onMouseDown={disabled ? undefined : handleTrackPointerDown}
-      onTouchStart={disabled ? undefined : handleTrackPointerDown}
-      {...themeProps}
-    >
-      <Box
-        innerRef={trackRef}
-        height={0.5}
-        radius={6}
-        overflow="hidden"
-        backgroundColor="grey-3"
-        position="relative"
-        {...variant.track}
-      >
-        <Box
-          position="absolute"
-          top={0}
-          right={0}
-          bottom={0}
-          left={0}
-          transformOrigin="center left"
-          backgroundColor="primary"
-          style={{
-            transform: `scaleX(${
-              1 -
-              (upperBound - getOffsetFromValue(value)) /
-                (sliderSize - thumbSize)
-            })`,
-          }}
-          {...variant.progress}
-        />
-      </Box>
-      <Box
-        innerRef={thumbRef}
-        tabIndex={0}
-        role="slider"
-        aria-valuenow={value}
-        aria-valuemin={min}
-        aria-valuemax={max}
-        aria-disabled={disabled}
-        onKeyDown={disabled ? undefined : handleThumbKeyDown}
-        width={1.5}
-        height={1.5}
-        radius="circle"
-        position="absolute"
-        top="50%"
-        left={0}
-        backgroundColor="grey-1"
-        stroke="grey-6"
-        strokeWeight={1}
-        style={{
-          transform: `translate(${getOffsetFromValue(value)}px, -50%)`,
-        }}
-        {...variant.thumb}
-      />
-    </Box>
-  )
-}
-
-export default RangeSlider

package/src/RangeSlider/RangeSlider.mdx

@@ -1,56 +0,0 @@
----
-title: RangeSlider
-category: Forms
-summary: Allow the user to specify a numeric value which must be no less than a minimum value and no more than a maximum value. Composes [Box](/box).
-propsSummary: Accepts [Box](/box) props.
-themeKey: rangeSlider
----
-
-```jsx live
-render(() => {
-  const [volume, setVolume] = React.useState(50)
-  const muted = volume === 0
-  return (
-    <StackView axis="horizontal" alignment="center" width="25%" spacing={1}>
-      <Icon>
-        <Icon.Path name="services.volume0" />
-        <Icon.Path name="services.volume1" visible={muted} />
-        <Icon.Path name="services.volume2" visible={!muted} />
-        <Icon.Path name="services.volume3" visible={!muted && volume > 50} />
-      </Icon>
-      <RangeSlider value={volume} onChange={setVolume} />
-      <Text>{volume}</Text>
-    </StackView>
-  )
-})
-```
-
-```jsx live
-render(() => {
-  const [value, setValue] = React.useState(20)
-  return (
-    <RangeSlider
-      step={10}
-      value={value}
-      onChange={setValue}
-      width="50%"
-      paddingVertical={1}
-      variant={{
-        track: {
-          height: 1,
-          backgroundColor: 'hsl(330, 100%, 92%)',
-          radius: undefined,
-        },
-        progress: {
-          backgroundColor: 'hsl(330, 100%, 72%)',
-        },
-        thumb: {
-          width: 1,
-          height: 3,
-          radius: undefined,
-        },
-      }}
-    />
-  )
-})
-```

package/src/RangeSlider/index.js

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

package/src/ScreenReader/ScreenReader.js

@@ -1,36 +0,0 @@
-// @flow
-import React from 'react'
-
-import Box from '../Box'
-
-export type Props = {
-  children?: any,
-}
-
-function ScreenReader(props: Props) {
-  return (
-    <Box
-      css={{
-        width: '1px',
-        height: '1px',
-        padding: 0,
-        margin: '-1px',
-        border: 0,
-        position: 'absolute',
-        clip: 'rect(1px, 1px, 1px, 1px)',
-        overflow: 'hidden',
-        '&:focus-within': {
-          width: 'auto',
-          height: 'auto',
-          margin: 0,
-          clip: 'auto',
-          position: 'static',
-          overflow: 'initial',
-        },
-      }}
-      {...props}
-    />
-  )
-}
-
-export default ScreenReader

package/src/ScreenReader/ScreenReader.mdx

@@ -1,15 +0,0 @@
----
-title: ScreenReader
-category: General
-summary: Use to display screen reader only content.
-propsSummary: Accepts [Box](/box) props.
----
-
-```jsx live
-render(
-  <ScreenReader>
-    This content is available to a screen reader and keyboard user. Can contain
-    focusables like <Link to="http://planning.center">Planning Center</Link>.
-  </ScreenReader>
-)
-```

package/src/ScreenReader/index.js

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

package/src/Scrim/Scrim.mdx

@@ -1,32 +0,0 @@
----
-title: Scrim
-category: Overlays
-summary: Scrims are used to display focused content like alerts, modals, or media previews.
-propsSummary: Accepts [StackView](/stackview) props.
-themeKey: scrim
----
-
-```jsx live
-render(() => {
-  const [scrimVisible, setScrimVisible] = React.useState(false)
-  return (
-    <React.Fragment>
-      <Button
-        title="Render scrim"
-        theme="primary"
-        onClick={() => setScrimVisible(true)}
-      />
-      {scrimVisible && (
-        <Scrim>
-          <StackView padding={2} margin="auto" backgroundColor="background">
-            <Button
-              title="Remove scrim"
-              onClick={() => setScrimVisible(false)}
-            />
-          </StackView>
-        </Scrim>
-      )}
-    </React.Fragment>
-  )
-})
-```

package/src/Scrim/Scrim.tsx

@@ -1,40 +0,0 @@
-import * as React from 'react'
-
-import StackView from '../StackView'
-import { useThemeProps } from '../system'
-
-type ScrimProps = {
-  /** Gain access to the internal ref. */
-  ref?: any
-  children?: any
-}
-
-const Scrim = React.forwardRef(function (
-  { ref, ...restProps }: ScrimProps,
-  _ref: any
-) {
-  React.useLayoutEffect(() => {
-    document.body.style.overflow = 'hidden'
-    return () => {
-      document.body.style.overflow = ''
-    }
-  }, [])
-  const { zIndex = 10000, ...themeProps } = useThemeProps('scrim', restProps)
-  return (
-    <StackView
-      innerRef={ref}
-      position="fixed"
-      top={0}
-      right={0}
-      bottom={0}
-      left={0}
-      zIndex={zIndex}
-      overflow="auto"
-      // @ts-ignore
-      backgroundColor="hsla(0,0%,0%,0.4)"
-      {...themeProps}
-    />
-  )
-})
-
-export { Scrim }

package/src/Scrim/index.ts

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