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

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'

package/src/Section/Section.js

@@ -1,55 +0,0 @@
-// @flow
-import React from 'react'
-import type { ChildrenArray } from 'react'
-
-import Heading from '../Heading'
-import Toolbar from '../Toolbar'
-import StackView from '../StackView'
-import { useThemeProps } from '../system'
-
-import type { ToolbarProps } from '../Toolbar'
-
-export type SectionProps = ToolbarProps & {
-  children: ChildrenArray<mixed>,
-}
-
-function Section({
-  actions = [],
-  children,
-  count,
-  helpContent,
-  onStatusClearRequest,
-  status,
-  title,
-  ...restProps
-}: SectionProps) {
-  const {
-    countColor,
-    headingProps,
-    toolbarProps,
-    ...themeProps
-  } = useThemeProps('section', restProps)
-
-  return (
-    <StackView as="section" {...themeProps}>
-      <Toolbar
-        title={
-          <Heading level={3} {...headingProps}>
-            {title}
-          </Heading>
-        }
-        helpContent={helpContent}
-        actions={actions}
-        count={count}
-        countColor={countColor}
-        status={status}
-        onStatusClearRequest={onStatusClearRequest}
-        marginBottom={2}
-        {...toolbarProps}
-      />
-      {children}
-    </StackView>
-  )
-}
-
-export default Section

package/src/Section/Section.mdx

@@ -1,103 +0,0 @@
----
-title: Section
-category: General
-summary: Sections are used within `Page` components to break up content into sections that always display a `Toolbar` at the top.
-propsSummary: Accepts [StackView](/stackview) props.
-themeKey: section
----
-
-```jsx live
-render(
-  <Section
-    title="Text Notifications"
-    helpContent="Receive text messages to notify you of new received emails. Some scheduling requests allow replying by text."
-    grow={1}
-    shrink={1}
-  >
-    <Card spacing={<Divider />}>
-      {[
-        'General Emails',
-        'Scheduling Requests',
-        'Reminders',
-        'Scheduling Replies',
-      ].map((label) => (
-        <Card.Section
-          key={label}
-          as={Checkbox}
-          axis="horizontal"
-          label={label}
-          grow={1}
-          spacing={1}
-        />
-      ))}
-    </Card>
-  </Section>
-)
-```
-
-```jsx live
-render(
-  class extends React.Component {
-    state = {
-      isOpen: false,
-      value: '',
-    }
-
-    toggleOpen = () => {
-      this.setState((state) => ({
-        isOpen: !state.isOpen,
-      }))
-    }
-
-    render() {
-      const { isOpen } = this.state
-      return (
-        <Section
-          title="Tags"
-          helpContent="Tags are global attributes or abilities usually not related to a specific team. However, some teams are assigned using multiple tags as criteria."
-          actions={
-            <Button
-              title={isOpen ? 'Cancel' : 'Add'}
-              onClick={this.toggleOpen}
-            />
-          }
-          grow={1}
-          shrink={1}
-        >
-          <Collapse open={isOpen} lazy>
-            <Combobox.Popover
-              autoFocus
-              placeholder="Search tags..."
-              value={this.state.value}
-              onChange={(event) => this.setState({ value: event.target.value })}
-              onSelect={() => this.setState({ value: '', isOpen: false })}
-              marginBottom={2}
-            >
-              <Combobox.Item index={0} value="lights">
-                Lights
-              </Combobox.Item>
-              <Combobox.Item index={1} value="camera">
-                Camera
-              </Combobox.Item>
-              <Combobox.Item index={2} value="audio">
-                Audio
-              </Combobox.Item>
-              <Combobox.Item index={3} value="producer">
-                Producer
-              </Combobox.Item>
-            </Combobox.Popover>
-          </Collapse>
-          <Card padding={2} spacing={1}>
-            <Heading level={3}>Background Check</Heading>
-            <StackView axis="horizontal" spacing={1}>
-              {['Lights', 'Camera', 'Audio', 'Producer'].map((tag) => (
-                <Badge key={tag} title={tag} />
-              ))}
-            </StackView>
-          </Card>
-        </Section>
-      )
-    }
-  }
-)
-```

package/src/Section/index.js

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