@planningcenter/tapestry-react 3.0.0 → 4.0.0-rc.1

package/src/Popover/utils.ts

@@ -1,63 +0,0 @@
-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'],
-      fn: () => {},
-      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

@@ -1,159 +0,0 @@
-import * as React from 'react'
-import { createPortal } from 'react-dom'
-import { getThemeDataAttribute } from '../ThemeProvider/styles'
-import { ThemeContext } from '@emotion/react'
-import { Theme } from '../index'
-
-export type PortalProps = {
-  children: any
-
-  /** 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,
-  }
-
-  static contextType = ThemeContext
-  // @ts-ignore error TS2612: Property 'context' will overwrite the base property in 'Component<PortalProps, {}, any>'. If this is intentional, add an initializer. Otherwise, add a 'declare' modifier or remove the redundant declaration.
-  context: React.ContextType<React.Context<Theme>>
-
-  _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])
-    })
-
-    this._portalNode.classList.add('tapestry-react-reset')
-
-    this._portalNode.setAttribute(
-      getThemeDataAttribute(this.context.id),
-      'true'
-    )
-
-    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

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

package/src/Progress/Progress.mdx

@@ -1,23 +0,0 @@
----
-title: Progress
-category: Indicators
-summary: Display progress towards the completion of a task. Composes [Box](/box).
-propsSummary: Accepts [Box](/box) props.
-themeKey: progress
----
-
-```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/Progress.tsx

@@ -1,49 +0,0 @@
-import React from 'react'
-
-import Box from '../Box'
-import { useThemeProps } from '../system'
-
-export type Props = {
-  /**
-   * The current value of the progress bar.
-   */
-  value?: number
-  /**
-   * Active color of the progress bar.
-   */
-  activeColor?: string
-}
-
-const Progress = ({ value, ...restProps }: Props): JSX.Element => {
-  const { activeColor = 'primary', ...themeProps } = useThemeProps(
-    'progress',
-    restProps
-  )
-
-  return (
-    <Box
-      role="progressbar"
-      aria-valuenow={value}
-      width="100%"
-      height={0.5}
-      radius={6}
-      position="relative"
-      overflow="hidden"
-      backgroundColor="grey-3"
-      {...themeProps}
-    >
-      <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/index.js

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

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