@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/Button/Button.tsx

@@ -0,0 +1,340 @@
+import * as React from 'react'
+
+import { useBoxSize, useThemeValue } from '../system'
+import Icon from '../Icon'
+import { BoxSizes, MediaQueries } from '../index'
+import Link from '../Link'
+import Spinner from '../Spinner'
+import { StackView, StackViewProps } from '../StackView'
+import Tooltip from '../Tooltip'
+import { mergeProps } from '../utils'
+import { useAccessibilityViolation } from '../hooks/use-accessibility-violation'
+
+import Input from './Input'
+
+type ButtonProps = {
+  /**
+   * Disables button by removing click handlers and making the button transparent.
+   */
+  disabled?: boolean
+
+  /**
+   * Opens the linked destination in a new window or tab.
+   */
+  external?: boolean
+
+  /**
+   * Renders an [Icon](/icon) in the center of the button. Pass a string or any valid `Icon` props.
+   * Must pass a [`title`](/button#title) or [`tooltip.title`](/tooltip#title) when using icon-only buttons.
+   */
+  icon?: string | Object
+
+  /**
+   * Same as above, but renders an icon in the left portion of the button.
+   */
+  iconLeft?: string | Object
+
+  /**
+   * Same as above, but renders an icon in the right portion of the button.
+   */
+  iconRight?: string | Object
+
+  /**
+   * Sizes the button using values defined in [boxSizes](/theming)
+   */
+  size?: keyof BoxSizes
+
+  /**
+   * Renders a [`<Spinner />`](/spinner) in the center of the button. Accepts any valid Spinner props.
+   */
+  spinner?: any
+
+  /**
+   * Uses a 1:1 ratio for sizing the button.
+   */
+  square?: boolean
+
+  /**
+   * Uses theme defined in [`buttons.theme`](/theming). Pass `false` to not use theme at all.
+   */
+  theme?: string | boolean
+
+  /**
+   * Renders a text string in the center of the button.
+   */
+  title?: string | number
+
+  /**
+   * Where the browser should navigate to when pressed.
+   */
+  to?: string
+
+  /**
+   * Wraps button in a [`<Tooltip />`](./tooltip). Accepts any valid Tooltip props.
+   */
+  tooltip?: string | Object
+
+  /**
+   * Determines the modified style of the button.
+   */
+  variant?: 'fill' | 'outline' | 'naked'
+} & StackViewProps
+
+type Props = React.RefAttributes<any> &
+  React.HTMLAttributes<any> &
+  ButtonProps &
+  MediaQueries<ButtonProps>
+
+export function Button({
+  children,
+  disabled,
+  external,
+  icon,
+  iconLeft,
+  iconRight,
+  onClick,
+  onKeyDown,
+  size,
+  spinner,
+  square,
+  theme = 'default',
+  title,
+  to,
+  tooltip,
+  variant,
+  ...restProps
+}: Props) {
+  const buttonThemes = useThemeValue('button.themes')
+  let {
+    boxSize,
+    fontSize,
+    lineHeight,
+    paddingHorizontal,
+    paddingHorizontalDense,
+    paddingVertical,
+  } = useBoxSize(size)
+
+  let buttonProps: any = {
+    alignment: 'center',
+    axis: 'horizontal',
+    distribution: 'center',
+    fontSize,
+    fontWeight: 700,
+    inline: true,
+    lineHeight,
+    position: 'relative',
+    radius: 3,
+    role: 'button',
+    strokeAlign: 'inside',
+    strokeWeight: 1,
+    as: (restProps as any).href || to ? 'a' : 'div',
+    userSelect: 'none',
+    zIndex: 1,
+  }
+
+  let spinnerColor
+
+  if (theme) {
+    const buttonTheme = buttonThemes[theme]
+    if (buttonTheme) {
+      const buttonThemeVariant = buttonTheme[variant || 'fill']
+      if (buttonThemeVariant) {
+        buttonProps = {
+          ...buttonProps,
+          ...buttonThemeVariant,
+        }
+      } else {
+        console.warn(
+          `Could not find "${variant}" in "${theme}" theme. Check your ThemeProvider and make sure "${variant}" variant exists in "${theme}".`
+        )
+      }
+    } else if (theme === 'false') {
+      console.warn(
+        `The string "false" is not a valid theme. Please pass a boolean %cfalse%c instead.`,
+        'color:red',
+        'color:inherit'
+      )
+    } else {
+      console.warn(
+        `Could not find "${theme}" in button.themes. Check your ThemeProvider and make sure "${theme}" exists.`
+      )
+    }
+  }
+
+  // normalize strings that should end up as objects
+  if (typeof icon === 'string') {
+    icon = { name: icon }
+  }
+  if (typeof iconLeft === 'string') {
+    iconLeft = { name: iconLeft }
+  }
+  if (typeof iconRight === 'string') {
+    iconRight = { name: iconRight }
+  }
+  if (typeof tooltip === 'string') {
+    tooltip = { title: tooltip }
+  }
+
+  // if using an icon only button, apply dense padding and possibly an aria label
+  if (icon) {
+    paddingHorizontal = paddingHorizontalDense
+    buttonProps['aria-label'] = tooltip ? tooltip['title'] : title
+  }
+
+  // square width and height if applicable props present
+  if (square) {
+    buttonProps.width = boxSize
+    buttonProps.height = boxSize
+  } else if (icon) {
+    buttonProps.minWidth = boxSize
+    buttonProps.minHeight = boxSize
+  }
+
+  // handle padding based on the incoming radius or whether icons are present or not
+  if (restProps['radius'] === 'pill') {
+    buttonProps.paddingHorizontal = paddingHorizontal * 1.25
+  } else if (restProps['radius'] === 'pill-left') {
+    buttonProps.paddingLeft = paddingHorizontal * 1.25
+    buttonProps.paddingRight = paddingHorizontal
+  } else if (restProps['radius'] === 'pill-right') {
+    buttonProps.paddingLeft = paddingHorizontal
+    buttonProps.paddingRight = paddingHorizontal * 1.25
+  } else if (!(icon && !iconLeft && !iconRight)) {
+    buttonProps.paddingHorizontal = paddingHorizontal
+    buttonProps.paddingVertical = paddingVertical
+  }
+
+  // clear text and/or icons when spinner is present
+  if (spinner) {
+    spinnerColor = buttonProps.color
+    buttonProps.color = 'transparent'
+    if (icon) {
+      icon['color'] = 'transparent'
+    }
+    if (iconLeft) {
+      iconLeft['color'] = 'transparent'
+    }
+    if (iconRight) {
+      iconRight['color'] = 'transparent'
+    }
+  }
+
+  // don't allow interacting with button when disabled
+  if (disabled) {
+    buttonProps['aria-disabled'] = true
+    buttonProps.cursor = 'not-allowed'
+    buttonProps.opacity = 0.65
+  }
+
+  // don't apply hover/active styles or events when disabled or spinner is present
+  if (disabled || spinner) {
+    buttonProps.hover = undefined
+    buttonProps.active = undefined
+  } else {
+    buttonProps.focus = { zIndex: 5 }
+    buttonProps.cursor = 'pointer'
+    buttonProps.touchAction = 'manipulation'
+    buttonProps.tabIndex = 0
+    buttonProps.onClick = onClick
+    buttonProps.onKeyDown = (event) => {
+      if (onClick && (event.key === 'Enter' || event.key === ' ')) {
+        event.preventDefault()
+        onClick(event)
+      }
+      if (onKeyDown) {
+        onKeyDown(event)
+      }
+    }
+  }
+
+  // apply rel and target for external links
+  if (external) {
+    buttonProps.rel = 'noopener noreferrer'
+    buttonProps.target = '_blank'
+  }
+
+  // apply href value when specified
+  if (to) {
+    restProps['href'] = to
+  }
+
+  // apply stroke defaults and higher z-index when hovering to show outline in group properly
+  if (variant === 'outline') {
+    buttonProps = {
+      ...buttonProps,
+      hover: {
+        strokeAlign: 'inside',
+        strokeWeight: 1,
+        zIndex: 2,
+        ...buttonProps.hover,
+      },
+    }
+  }
+
+  if (process.env.NODE_ENV !== 'production') {
+    if (icon && !(title || (tooltip && (tooltip as any).title))) {
+      const { tooltipProps, wrapperProps } = useAccessibilityViolation(
+        <>
+          Icon only buttons must define either a{' '}
+          <Link
+            external
+            to="https://ministrycentered.github.io/ui-kit/button#tooltip"
+            weight={700}
+          >
+            tooltip
+          </Link>{' '}
+          or{' '}
+          <Link
+            external
+            to="https://ministrycentered.github.io/ui-kit/button#title"
+            weight={700}
+          >
+            title
+          </Link>{' '}
+          prop.
+        </>,
+        `UIKit: <Button/> icon only buttons must define either a "tooltip" or "title" prop for proper accessibility.`
+      )
+      tooltip = tooltipProps
+      restProps = mergeProps(restProps, wrapperProps)
+    }
+    if (restProps['type'] === 'submit') {
+      throw Error(
+        `UIKit: <Button/> does not support type="submit" please add an explicit onClick handler.`
+      )
+    }
+  }
+
+  return (
+    <Tooltip {...tooltip}>
+      <StackView {...buttonProps} {...restProps}>
+        {iconLeft && (
+          <Icon
+            size={size}
+            color={buttonProps.color}
+            marginRight={paddingHorizontalDense}
+            {...iconLeft}
+          />
+        )}
+        {icon ? (
+          <Icon size={size} color={buttonProps.color} {...icon} />
+        ) : (
+          title || children
+        )}
+        {iconRight && (
+          <Icon
+            size={size}
+            color={buttonProps.color}
+            marginLeft={paddingHorizontalDense}
+            {...iconRight}
+          />
+        )}
+        {spinner && (
+          <Spinner size={size} color={spinnerColor} {...spinner} center />
+        )}
+      </StackView>
+    </Tooltip>
+  )
+}
+
+Button.Input = Input

package/src/Button/Input.mdx

@@ -0,0 +1,169 @@
+---
+title: Button.Input
+category: General
+summary: Transforms a button into an input. Composes and forwards props to [Button](/button).
+---
+
+```jsx live
+render(
+  <Box padding={2} backgroundColor="primary">
+    <Button.Input
+      title="Add Person"
+      theme="light"
+      iconLeft={{
+        name: 'person',
+        color: 'light-6',
+      }}
+    >
+      <Input width={24} />
+    </Button.Input>
+  </Box>
+)
+```
+
+```jsx live
+const people = [
+  {
+    first: 'Charlie',
+    last: 'Brown',
+    twitter: 'dancounsell',
+  },
+  {
+    first: 'Charlotte',
+    last: 'White',
+    twitter: 'mtnmissy',
+  },
+  {
+    first: 'Chloe',
+    last: 'Jones',
+    twitter: 'ladylexy',
+  },
+  {
+    first: 'Cooper',
+    last: 'King',
+    twitter: 'steveodom',
+  },
+  {
+    first: 'James',
+    last: 'Miller',
+    twitter: 'bensie',
+  },
+  {
+    first: 'John',
+    last: 'James',
+    twitter: 'miller',
+  },
+  {
+    first: 'Travis',
+    last: 'Arnold',
+    twitter: 'souporserious',
+  },
+]
+function ButtonCombobox({ buttonProps, comboboxProps, children }) {
+  const comboboxRef = React.useRef(null)
+  return (
+    <Button.Input {...buttonProps}>
+      {({ inputProps, close }) => (
+        <Combobox.Popover
+          ref={comboboxRef}
+          openOnFocus
+          closeButton={{
+            onClick: () => {
+              close()
+              comboboxRef.current.closePopover()
+            },
+          }}
+          onClear={() => {
+            close()
+            comboboxRef.current.closePopover()
+          }}
+          {...inputProps}
+          {...comboboxProps}
+        >
+          {children}
+        </Combobox.Popover>
+      )}
+    </Button.Input>
+  )
+}
+render(() => {
+  const [value, setValue] = React.useState('')
+  const [open, setOpen] = React.useState(false)
+  const containerRef = React.useRef(null)
+  return (
+    <StackView
+      axis="horizontal"
+      alignment="center"
+      distribution="space-between"
+      minWidth="80%"
+      padding={2}
+      spacing={2}
+      backgroundColor="primary"
+    >
+      <StackView axis="horizontal" spacing={2}>
+        <Link color="white">Link 1</Link>
+        <Link color="white">Link 2</Link>
+        <Link color="white">Link 3</Link>
+      </StackView>
+      <ButtonCombobox
+        buttonProps={{
+          innerRef: containerRef,
+          title: 'search',
+          icon: { name: 'topbar-search', color: 'light-9' },
+          theme: 'light',
+          onClose: () => setValue(''),
+        }}
+        comboboxProps={{
+          value,
+          onChange: (event) => setValue(event.target.value),
+          onSelect: (person) => setValue(person.first + ' ' + person.last),
+          placeholder: 'Search by name, email, or phone number',
+          width: 40,
+          stroke: 'primary-light',
+          radius: 'pill',
+          placement: 'bottom-end',
+          popoverProps: {
+            width: 40,
+            matchWidths: false,
+            relativeTo: containerRef,
+          },
+        }}
+      >
+        <Combobox.Items
+          value={value}
+          filter={{ keys: [(person) => person.first + ' ' + person.last] }}
+          items={people}
+          renderItem={(person, index) => (
+            <Combobox.Item
+              key={person.first + ' ' + person.last}
+              value={person}
+              index={index}
+              spacing={1}
+            >
+              <Avatar
+                source={'https://api.adorable.io/avatars/' + index}
+                size="sm"
+              />
+              <Highlight
+                query={value}
+                text={person.first + ' ' + person.last}
+              />
+              <Text inline italic fontSize={5} marginLeft="auto" color="grey-6">
+                {person.twitter}
+              </Text>
+            </Combobox.Item>
+          )}
+          renderEmpty={[
+            <Menu.Item>
+              No results for
+              <Text as="span" inline color="grey-7">
+                "{value}"
+              </Text>
+            </Menu.Item>,
+          ]}
+        />
+      </ButtonCombobox>
+    </StackView>
+  )
+})
+```

package/src/Button/Input.tsx

@@ -0,0 +1,192 @@
+// @flow
+import React, {
+  Children,
+  cloneElement,
+  forwardRef,
+  useImperativeHandle,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react'
+import { tabbable } from 'tabbable'
+import ResizeObserver from 'resize-observer-polyfill'
+
+import { Box, BoxProps } from '../Box'
+import { useBoxSize } from '../system'
+import { getRect } from '../utils'
+
+import { Button } from './Button'
+
+type InputProps = {
+  inputProps: any
+  isOpen: boolean
+  open: any
+  close: any
+}
+
+type InputSignature = (inputProps: InputProps) => React.ReactNode
+
+type ButtonInputProps = {
+  /**
+   * Clones immediate child with input specific props. Use a function to access props and pass them yourself.
+   */
+  children: InputSignature | React.ReactElement<any>
+
+  /**
+   * Size of internal [Button](/button) and child [Input](/input).
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+
+  /**
+   * Callback when the input reverts back to a button.
+   */
+  onClose: () => void
+
+  /**
+   * Callback when button is pressed to reveal the input.
+   */
+  onOpen: () => void
+} & BoxProps
+
+type Props = React.RefAttributes<any> &
+  React.HTMLAttributes<any> &
+  ButtonInputProps
+
+function getFixedValue(value) {
+  // Safari doesn't like sub pixels
+  return parseInt(value.toFixed(0), 10) + 1
+}
+
+const ButtonInput = forwardRef(
+  ({ children, style, size, onOpen, onClose, ...restProps }: Props, ref) => {
+    const containerRef = useRef<HTMLElement>()
+    const inputRef = useRef<HTMLElement>()
+    const buttonRef = useRef<HTMLElement>()
+    const [isOpen, setOpen] = useState(false)
+    const { boxSize } = useBoxSize(size)
+    const containerProps = {
+      innerRef: containerRef,
+      height: boxSize,
+      position: 'relative',
+      overflow: 'hidden',
+      transition: 'width 200ms cubic-bezier(.02,.8,.38,1)',
+    } as BoxProps
+    const inputContainerProps = {
+      innerRef: inputRef,
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      left: 0,
+      opacity: isOpen ? 1 : 0,
+      transition: 'opacity 180ms ease',
+    } as BoxProps
+    const inputProps = {
+      size,
+      secondaryStroke: false,
+      disabled: !isOpen,
+      onBlur: () => {
+        const input = inputRef.current.querySelector('input')
+        if (input.value.length === 0) {
+          close()
+        }
+      },
+      onKeyDown: (event) => {
+        if (event.key === 'Escape') {
+          close()
+        }
+      },
+    }
+    const buttonContainerProps = {
+      innerRef: buttonRef,
+      position: 'absolute',
+      top: 0,
+      right: 0,
+      left: 0,
+      opacity: isOpen ? 0 : 1,
+      transition: 'opacity 180ms ease',
+    } as BoxProps
+    const buttonProps = {
+      ...restProps,
+      size,
+      disabled: isOpen,
+      onClick: open,
+    }
+
+    function open() {
+      setOpen(true)
+      const input = inputRef.current.querySelector('input')
+      if (input && input.focus) {
+        setTimeout(() => input.focus())
+      }
+      if (onOpen) {
+        onOpen()
+      }
+    }
+
+    function close() {
+      setOpen(false)
+      const [button] = tabbable(buttonRef.current)
+      if (button && button.focus) {
+        setTimeout(() => button.focus())
+      }
+      if (onClose) {
+        onClose()
+      }
+    }
+
+    function transition() {
+      const container = containerRef.current
+      const inputChild = inputRef.current.firstChild as HTMLElement
+      const buttonChild = buttonRef.current.firstChild as HTMLElement
+      inputChild.style.width = ''
+      buttonChild.style.width = ''
+      const inputRect = getRect(inputChild, { clone: true })
+      const buttonRect = getRect(buttonChild, { clone: true })
+      const containerWidth = getFixedValue(
+        isOpen ? inputRect.width : buttonRect.width
+      )
+      container.style.width = containerWidth + 'px'
+      inputChild.style.width = '100%'
+      buttonChild.style.width = '100%'
+    }
+
+    useLayoutEffect(() => {
+      transition()
+      const ro = new ResizeObserver(transition)
+      ro.observe(isOpen ? inputRef.current : buttonRef.current)
+      return () => {
+        ro.disconnect()
+      }
+    }, [isOpen])
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        open,
+        close,
+      }),
+      []
+    )
+
+    // @ts-ignore
+    const button = <Button {...buttonProps} />
+
+    return (
+      <Box {...containerProps}>
+        <Box {...inputContainerProps}>
+          {typeof children === 'function'
+            ? children({ inputProps, isOpen, open, close })
+            : cloneElement(
+                Children.only(children) as React.ReactElement<any>,
+                inputProps
+              )}
+        </Box>
+        <Box {...buttonContainerProps}>{button}</Box>
+      </Box>
+    )
+  }
+)
+
+ButtonInput.displayName = 'Button.Input'
+
+export default ButtonInput

package/src/Button/index.ts

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