@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/Popover/rewireTabOrder.ts

@@ -0,0 +1,124 @@
+import { tabbable } from 'tabbable'
+
+const TAB_KEY = 9
+
+function getNextActiveElement(node, startNode = null) {
+  const tabbables = tabbable(node.parentNode)
+  const nodeToStartAt = startNode || node
+  const nextTabbable = tabbables[tabbables.indexOf(nodeToStartAt) + 1]
+  if (!nextTabbable && node !== document.body) {
+    return getNextActiveElement(node.parentNode, nodeToStartAt)
+  }
+  return nextTabbable
+}
+
+class RewireTabOrder {
+  tabbables = []
+  firstFocusableElement: HTMLElement = null
+  lastFocusableElement: HTMLElement = null
+  originalActiveElement: HTMLElement = null
+  nextActiveElement: HTMLElement = null
+
+  constructor(node) {
+    if (node) {
+      this.tabbables = tabbable(node)
+      if (this.tabbables.length > 0) {
+        this.init()
+      }
+    }
+  }
+
+  init() {
+    this.firstFocusableElement = this.tabbables[0]
+    this.lastFocusableElement = this.tabbables[this.tabbables.length - 1]
+    this.originalActiveElement = document.activeElement as HTMLElement
+    this.nextActiveElement = getNextActiveElement(this.originalActiveElement)
+    this.originalActiveElement.addEventListener(
+      'keydown',
+      this.moveFocusToTargetFromTriggerElement
+    )
+    this.firstFocusableElement.addEventListener(
+      'keydown',
+      this.moveFocusFromTargetToTriggerElement
+    )
+    if (this.nextActiveElement) {
+      this.nextActiveElement.addEventListener(
+        'keydown',
+        this.moveFocusToTargetFromNextElement
+      )
+      this.lastFocusableElement.addEventListener(
+        'keydown',
+        this.moveFocusFromTargetToNextElement
+      )
+    }
+  }
+
+  destroy() {
+    if (this.tabbables.length === 0) {
+      return
+    }
+    this.originalActiveElement.removeEventListener(
+      'keydown',
+      this.moveFocusToTargetFromTriggerElement
+    )
+    this.firstFocusableElement.removeEventListener(
+      'keydown',
+      this.moveFocusFromTargetToTriggerElement
+    )
+    if (this.nextActiveElement) {
+      this.nextActiveElement.removeEventListener(
+        'keydown',
+        this.moveFocusToTargetFromNextElement
+      )
+      this.lastFocusableElement.removeEventListener(
+        'keydown',
+        this.moveFocusFromTargetToNextElement
+      )
+    }
+  }
+
+  focusOriginalActiveElement = () => {
+    this.originalActiveElement.focus()
+  }
+
+  focusNextActiveElement = () => {
+    this.nextActiveElement.focus()
+  }
+
+  moveFocusToTargetFromTriggerElement = (event) => {
+    if (!event.shiftKey && event.keyCode === TAB_KEY) {
+      event.preventDefault()
+      this.firstFocusableElement.focus()
+    }
+  }
+
+  moveFocusFromTargetToTriggerElement = (event) => {
+    if (
+      event.target === this.firstFocusableElement &&
+      event.shiftKey &&
+      event.keyCode === TAB_KEY
+    ) {
+      event.preventDefault()
+      this.originalActiveElement.focus()
+    }
+  }
+
+  moveFocusToTargetFromNextElement = (event) => {
+    if (event.shiftKey && event.keyCode === TAB_KEY) {
+      event.preventDefault()
+      this.lastFocusableElement.focus()
+    }
+  }
+
+  moveFocusFromTargetToNextElement = (event) => {
+    if (!event.shiftKey && event.keyCode === TAB_KEY) {
+      event.preventDefault()
+      this.nextActiveElement.focus()
+    }
+  }
+}
+
+export default (node) => {
+  const unwireTabOrder = new RewireTabOrder(node)
+  return () => unwireTabOrder.destroy()
+}

package/src/Popover/utils.ts

@@ -0,0 +1,62 @@
+import maxSize from 'popper-max-size-modifier'
+
+export function getModifiers({ matchWidths, offset, keepInView, shouldFlip }) {
+  return [
+    // https://popper.js.org/docs/v2/modifiers/community-modifiers/
+    maxSize,
+    {
+      name: 'applyMaxSize',
+      enabled: true,
+      phase: 'beforeWrite',
+      requires: ['maxSize'],
+      fn({ state }) {
+        const { height } = state.modifiersData.maxSize
+        state.styles.popper.maxHeight = `${height}px`
+      },
+    },
+    {
+      name: 'matchWidths',
+      enabled: Boolean(matchWidths),
+      phase: 'write',
+      requires: ['computeStyles'],
+      effect: ({ state }) => {
+        const { offsetWidth } = state.elements.reference
+        if (matchWidths === 'minimum') {
+          if (offsetWidth > state.elements.popper.offsetWidth) {
+            state.elements.popper.style.minWidth = `${offsetWidth}px`
+          }
+        } else {
+          state.elements.popper.style.width = `${offsetWidth}px`
+        }
+      },
+    },
+    {
+      name: 'offset',
+      options: {
+        offset: [0, offset],
+      },
+    },
+    {
+      name: 'preventOverflow',
+      enabled: keepInView,
+    },
+    {
+      name: 'flip',
+      enabled: shouldFlip,
+    },
+  ]
+}
+
+export function getFixedParent(node) {
+  const { offsetParent } = node
+  if (offsetParent) {
+    const offsetParentStyles = getComputedStyle(offsetParent)
+    if (offsetParentStyles.position !== 'fixed') {
+      return getFixedParent(offsetParent)
+    } else {
+      return offsetParent
+    }
+  } else {
+    return null
+  }
+}

package/src/Portal/Portal.tsx

@@ -0,0 +1,142 @@
+import * as React from 'react'
+import { createPortal } from 'react-dom'
+
+export type PortalProps = {
+  /** Styles to apply to the portal root element. */
+  style?: React.CSSProperties
+
+  /** Where the portal is rendered into. */
+  renderTo?: HTMLElement | string
+
+  /** The HTML element to create. Defaults to `div`. */
+  renderTag?: string
+
+  /** Callback when Portal is updated. */
+  onUpdate?: () => void
+
+  /** Returns the rendered node similar to refs. */
+  getPortalNode?: (HTMLElement) => void
+}
+
+/** Accepts any additional HTML attributes. */
+class Portal extends React.Component<PortalProps> {
+  static defaultProps = {
+    renderTag: 'div',
+    renderTo: null,
+  }
+
+  _portalNode: HTMLElement = null
+  _needsUpdate = false
+  _updated = false
+
+  componentDidMount() {
+    const secondChild = this._getSecondChild()
+    if (secondChild) {
+      this._setupPortal()
+      this._updatePortal()
+    }
+  }
+
+  componentDidUpdate() {
+    const secondChild = this._getSecondChild()
+    if (secondChild && !this._portalNode) {
+      this._setupPortal()
+    } else if (!secondChild && this._portalNode) {
+      this._destroyPortal()
+    }
+    if (secondChild) {
+      this._updatePortal()
+    }
+    if (this._needsUpdate) {
+      if (this._updated) {
+        if (this.props.onUpdate) {
+          this.props.onUpdate()
+        }
+        this._updated = false
+        this._needsUpdate = false
+      } else {
+        this.forceUpdate()
+        this._updated = true
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    this._destroyPortal()
+  }
+
+  _getSecondChild() {
+    return React.Children.toArray(this.props.children)[1]
+  }
+
+  _getRenderToNode() {
+    const { renderTo } = this.props
+    if (typeof renderTo === 'string') {
+      return document.querySelector(renderTo)
+    } else {
+      return renderTo || document.body
+    }
+  }
+
+  _setupPortal() {
+    if (typeof document !== 'undefined') {
+      this._portalNode = document.createElement(this.props.renderTag)
+      this._getRenderToNode().appendChild(this._portalNode)
+      if (this.props.getPortalNode) {
+        this.props.getPortalNode(this._portalNode)
+      }
+    }
+    this.forceUpdate()
+    this._needsUpdate = true
+  }
+
+  _updatePortal() {
+    const {
+      renderTo,
+      renderTag,
+      onUpdate,
+      getPortalNode,
+      style,
+      children,
+      ...restProps
+    } = this.props
+    Object.keys(restProps).forEach((key) => {
+      this._portalNode.setAttribute(key, restProps[key])
+    })
+    if (style) {
+      Object.keys(style).forEach((key) => {
+        this._portalNode.style[key] = style[key]
+      })
+    }
+  }
+
+  _renderPortal(component) {
+    return createPortal(component, this._portalNode)
+  }
+
+  _destroyPortal() {
+    if (this._portalNode) {
+      this._portalNode.parentNode.removeChild(this._portalNode)
+      if (this.props.getPortalNode) {
+        this.props.getPortalNode(null)
+      }
+    }
+    this._portalNode = null
+  }
+
+  render() {
+    const [firstChild, secondChild] = React.Children.toArray(
+      this.props.children
+    )
+    return this._portalNode ? (
+      <>
+        {firstChild}
+        {this._renderPortal(secondChild)}
+      </>
+    ) : (
+      firstChild
+    )
+  }
+}
+
+export { Portal }

package/src/Portal/index.ts

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

package/src/Progress/Progress.js

@@ -0,0 +1,45 @@
+// @flow
+import React from 'react'
+
+import Box from '../Box'
+
+export type Props = {
+  /**
+   * The current value of the progress bar.
+   */
+  value?: number,
+  /**
+   * Active color of the progress bar.
+   */
+  activeColor?: string,
+}
+
+function Progress(props: Props) {
+  const { value, activeColor = 'primary', ...restProps } = props
+  return (
+    <Box
+      role="progressbar"
+      aria-valuenow={value}
+      width="100%"
+      height={0.5}
+      radius={6}
+      position="relative"
+      overflow="hidden"
+      backgroundColor="grey-3"
+      {...restProps}
+    >
+      <Box
+        position="absolute"
+        top={0}
+        right={0}
+        bottom={0}
+        left={0}
+        transformOrigin="center left"
+        backgroundColor={activeColor}
+        style={{ transform: `scaleX(${value / 100})` }}
+      />
+    </Box>
+  )
+}
+
+export default Progress

package/src/Progress/Progress.mdx

@@ -0,0 +1,21 @@
+---
+title: Progress
+category: Indicators
+summary: Display progress towards the completion of a task. Composes [Box](/box).
+---
+
+```jsx live
+render(<Progress value={50} />)
+```
+
+```jsx live
+render(
+  <Progress
+    value={20}
+    height={1}
+    radius={undefined}
+    backgroundColor="hsl(330, 100%, 92%)"
+    activeColor="hsl(330, 100%, 72%)"
+  />
+)
+```

package/src/Progress/index.js

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

package/src/Radio/Radio.js

@@ -0,0 +1,186 @@
+// @flow
+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: 'radio-0',
+  checked: 'radio-1',
+}
+
+export type Props = {
+  /**
+   * Disables the radio component.
+   */
+  disabled?: boolean,
+
+  /**
+   * Determines if the radio should use an internal label or not.
+   */
+  label?: string,
+
+  /**
+   * Checks the radio.
+   */
+  checked?: boolean,
+
+  /**
+   * Maps to the internal input's `name` prop.
+   */
+  name?: string,
+
+  /**
+   * Maps to the internal input's `value` prop.
+   */
+  value?: mixed,
+
+  /**
+   * 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?: () => null,
+
+  /**
+   * Maps to the internal input's `onFocus` prop.
+   */
+  onFocus?: () => null,
+
+  /**
+   * Maps to the internal input's `onBlur` prop.
+   */
+  onBlur?: () => null,
+}
+
+const radioEmitter = mitt()
+
+function Radio({
+  checked,
+  css,
+  disabled,
+  id,
+  label,
+  name,
+  onBlur,
+  onChange,
+  onFocus,
+  size = 'xs',
+  value,
+  ...restProps
+}: Props) {
+  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="radio"
+          id={id}
+          name={name}
+          checked={checked}
+          value={value}
+          disabled={disabled}
+          onChange={(event) => {
+            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="ui-kit-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/Radio.mdx

@@ -0,0 +1,37 @@
+---
+title: Radio
+category: Forms
+summary: Use radios to present a list of options where users can only make a single selection.
+---
+
+```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/index.js

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