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

package/src/Radio/Radio.mdx

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

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

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

package/src/RangeSlider/RangeSlider.js

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

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

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

package/src/ScreenReader/ScreenReader.js

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

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

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

package/src/Scrim/Scrim.mdx

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

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

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