@planningcenter/tapestry-react 0.0.1-alpha.0

package/src/Menu/Item.js

@@ -0,0 +1,99 @@
+import React, { cloneElement } from 'react'
+
+import Box from '../Box'
+import StackView from '../StackView'
+
+function Item({
+  backgroundColor = 'surface',
+  children,
+  disabled,
+  highlightedColor = 'highlight',
+  isHighlighted,
+  renderLeft,
+  renderRight,
+  ...props
+}) {
+  const css = {
+    axis: 'horizontal',
+    alignment: 'center',
+    shrink: 0,
+    minHeight: 4,
+    fontSize: '14px',
+    paddingVertical: 0.75,
+    paddingHorizontal: 1,
+    whiteSpace: 'nowrap',
+    position: 'relative',
+    userSelect: 'none',
+    backgroundColor,
+  }
+
+  if (renderLeft) {
+    css.paddingLeft = 4
+  }
+
+  if (renderRight) {
+    css.paddingRight = 4
+  }
+
+  if (isHighlighted) {
+    css.backgroundColor = highlightedColor
+  }
+
+  if (disabled) {
+    css.cursor = 'not-allowed'
+    css.opacity = 0.65
+  } else if (
+    props.onClick ||
+    props.onDoubleClick ||
+    props.onMouseDown ||
+    props.onMouseUp
+  ) {
+    css.cursor = 'pointer'
+  }
+
+  return (
+    <StackView {...css} {...props}>
+      {renderLeft && (
+        <Box
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          width={4}
+          height="100%"
+          position="absolute"
+          top={0}
+          left="-1px"
+        >
+          {typeof renderLeft === 'function'
+            ? renderRight()
+            : cloneElement(renderLeft, {
+                size: (renderLeft.props && renderLeft.props.size) || 'md',
+              })}
+        </Box>
+      )}
+
+      {children}
+
+      {renderRight && (
+        <Box
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          width={4}
+          height="100%"
+          position="absolute"
+          top={0}
+          right="-1px"
+        >
+          {typeof renderRight === 'function'
+            ? renderRight()
+            : cloneElement(renderRight, {
+                size: (renderRight.props && renderRight.props.size) || 'md',
+              })}
+        </Box>
+      )}
+    </StackView>
+  )
+}
+
+export default Item

package/src/Menu/Menu.js

@@ -0,0 +1,23 @@
+import React from 'react'
+
+import Card from '../Card'
+
+import Heading from './Heading'
+import Item from './Item'
+
+function Menu(props) {
+  return (
+    <Card
+      paddingVertical={0.5}
+      minWidth={12}
+      overflow="auto"
+      outline={0}
+      {...props}
+    />
+  )
+}
+
+Menu.Heading = Heading
+Menu.Item = Item
+
+export default Menu

package/src/Menu/Menu.mdx

@@ -0,0 +1,40 @@
+---
+title: Menu
+category: General
+---
+
+```jsx live
+render(
+  <Menu>
+    <Menu.Item>Item 1</Menu.Item>
+    <Menu.Item>Item 2</Menu.Item>
+    <Menu.Item>Item 3</Menu.Item>
+  </Menu>
+)
+```
+
+```jsx live
+render(
+  <Menu>
+    <Menu.Item isHighlighted>Can be highlighted</Menu.Item>
+    <Menu.Item>Should be used as a child of Menu</Menu.Item>
+    <Menu.Item>
+      <Icon name="person" marginRight={1} /> Add icons and other things
+    </Menu.Item>
+  </Menu>
+)
+```
+
+```jsx live
+render(
+  <Menu>
+    <Menu.Heading>Heading 1</Menu.Heading>
+    <Menu.Item>Item 1</Menu.Item>
+    <Menu.Item>Item 2</Menu.Item>
+    <Divider margin={0.5} />
+    <Menu.Heading>Heading 2</Menu.Heading>
+    <Menu.Item>Item 3</Menu.Item>
+    <Menu.Item>Item 4</Menu.Item>
+  </Menu>
+)
+```

package/src/Menu/index.js

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

package/src/Modal/Modal.js

@@ -0,0 +1,77 @@
+// @flow
+import React, { useLayoutEffect, useRef } from 'react'
+
+import Box from '../Box'
+import Scrim from '../Scrim'
+import { useDocumentEvent } from '../hooks'
+import { trapFocus } from '../utils'
+
+export type ModalProps = {
+  /**
+   * Close the modal when clicking outside of it.
+   */
+  closeOnOutsideClick: boolean,
+
+  /**
+   * Called by either clicking on the internal [`<Scrim/>`](/scrim) component or
+   * by pressing the `Escape` key.
+   */
+  onRequestClose: () => null,
+
+  /**
+   * Determines whether the modal is open or not.
+   */
+  open: boolean,
+}
+
+function Modal({
+  children,
+  closeOnOutsideClick,
+  onRequestClose,
+  open,
+  ...restProps
+}: ModalProps) {
+  const modalRef = useRef(null)
+
+  useLayoutEffect(() => {
+    if (open) {
+      return trapFocus(modalRef.current)
+    }
+  }, [open])
+
+  useDocumentEvent('keydown', (event) => {
+    if (open && onRequestClose && event.keyCode === 27) {
+      onRequestClose()
+    }
+  })
+
+  if (!open) {
+    return null
+  }
+
+  return (
+    <Scrim
+      alignment="center"
+      onMouseDown={(event) => {
+        if (closeOnOutsideClick && event.currentTarget === event.target) {
+          onRequestClose()
+        }
+      }}
+    >
+      <Box
+        innerRef={modalRef}
+        width="100%"
+        maxWidth={60}
+        padding={2}
+        margin={4}
+        backgroundColor="surface"
+        radius={3}
+        {...restProps}
+      >
+        {children}
+      </Box>
+    </Scrim>
+  )
+}
+
+export default Modal

package/src/Modal/Modal.mdx

@@ -0,0 +1,58 @@
+---
+title: Modal
+category: Overlays
+---
+
+```jsx live
+function MyModal(props) {
+  const [lazyComponent, setLazyComponent] = React.useState(null)
+  React.useEffect(() => {
+    if (props.open) {
+      setTimeout(() => {
+        setLazyComponent(<Input />)
+      }, 3000)
+    }
+    return () => setLazyComponent(null)
+  }, [props.open])
+  return (
+    <Modal id="modal" closeOnOutsideClick height={200} {...props}>
+      <StackView spacing={2}>
+        {lazyComponent || <Text>Loading lazy component...</Text>}
+        <Select
+          emptyValue=""
+          tooltip={{ title: 'Select a number' }}
+          onChange={(e) => console.log(e)}
+        >
+          {generateRange(100).map((number) => (
+            <Select.Option key={number} value={number}>
+              {number}
+            </Select.Option>
+          ))}
+        </Select>
+      </StackView>
+      <StackView
+        axis="horizontal"
+        distribution="end"
+        marginVertical={1}
+        spacing={1}
+      >
+        <Button title="Cancel" variant="naked" onClick={props.onRequestClose} />
+        <Button title="Submit" theme="primary" />
+      </StackView>
+    </Modal>
+  )
+}
+render(() => {
+  const [open, setOpen] = React.useState(false)
+  return (
+    <React.Fragment>
+      <Button
+        title="Open modal"
+        theme="primary"
+        onClick={() => setOpen(true)}
+      />
+      <MyModal open={open} onRequestClose={() => setOpen(false)} />
+    </React.Fragment>
+  )
+})
+```

package/src/Modal/index.js

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

package/src/NumberField/NumberField.js

@@ -0,0 +1,255 @@
+// @flow
+import { createElement, Component } from 'react'
+
+import InputField from '../Input/InputField'
+import { padNumber, getTabbableSiblings } from '../utils'
+
+type Props = {
+  /**
+   * An array of keys to ignore when pushed.
+   * ex: ["ArrowUp", "ArrowDown"].
+   */
+  ignoredKeys: string[],
+
+  /**
+   * Maximum number that can be entered.
+   */
+  max: number,
+
+  /**
+   * Minimum number that can be entered.
+   */
+  min: number,
+
+  /**
+   * Called when the input's onInput is called with a valid value
+   * or when the arrow keys are used to increment/decrement the value.
+   * Please note traditional onInput/onChange events are not supported
+   * since this component takes control of them.
+   */
+  onChange: (value: string) => null,
+
+  /**
+   * The amount of 0s to pad the value with.
+   */
+  pad: number,
+
+  /**
+   * String to display when value is empty.
+   */
+  placeholder: string,
+
+  /**
+   * The amount to step up/down from the value when using the arrow keys
+   * defaults to `1`
+   */
+  step: number,
+
+  /**
+   * The value of the input.
+   */
+  value: number,
+}
+
+const MIN_VALUE = -Infinity
+const MAX_VALUE = Infinity
+const ACCEPTED_KEYS = [
+  'Backspace',
+  'Delete',
+  'Tab',
+  'Enter',
+  'Home',
+  'End',
+  'ArrowLeft',
+  'ArrowRight',
+  '-',
+  '.',
+]
+
+function getPadStringSize(pad) {
+  let str = ''
+  for (let i = 0; i < pad; i++) {
+    str += '0'
+  }
+  return str
+}
+
+function isNotAcceptedNumberKey(event) {
+  return (
+    !event.metaKey &&
+    event.key !== 'v' &&
+    isNaN(parseInt(event.key, 10)) &&
+    ACCEPTED_KEYS.indexOf(event.key) === -1
+  )
+}
+
+class NumberField extends Component<Props> {
+  static defaultProps = {
+    as: InputField,
+    ignoredKeys: [],
+    min: MIN_VALUE,
+    max: MAX_VALUE,
+    step: 1,
+    moveFocusOnMax: false,
+  }
+
+  firstTouch = true
+
+  getParsedValues = (value) => {
+    return {
+      value: Number.parseFloat(value),
+      minValue: Number.parseFloat(this.props.min),
+      maxValue: Number.parseFloat(this.props.max),
+    }
+  }
+
+  clampValue = (valueToCheck) => {
+    const { value, minValue } = this.getParsedValues(valueToCheck)
+    return isNaN(value) ? (minValue === MIN_VALUE ? 0 : minValue) : value
+  }
+
+  isValueValid = (valueToCheck) => {
+    const { value, minValue, maxValue } = this.getParsedValues(valueToCheck)
+    return value >= minValue && value <= maxValue
+  }
+
+  changeIfValid = (value) => {
+    if (this.isValueValid(value)) {
+      this.props.onChange(value)
+    }
+  }
+
+  handleBlur = (event) => {
+    const { value, minValue, maxValue } = this.getParsedValues(
+      event.target.value
+    )
+    if (value < minValue) {
+      this.props.onChange(minValue)
+    } else if (value > maxValue) {
+      this.props.onChange(maxValue)
+    } else if (isNaN(event.target.value)) {
+      this.props.onChange(this.clampValue(value))
+    }
+    if (this.props.onBlur) {
+      this.props.onBlur(event)
+    }
+    this.firstTouch = true
+  }
+
+  handleKeyDown = (event) => {
+    if (this.props.ignoredKeys.includes(event.key)) {
+      return
+    }
+    const { pad, step } = this.props
+    const { value, minValue, maxValue } = this.getParsedValues(
+      event.target.value
+    )
+    if (
+      isNotAcceptedNumberKey(event) ||
+      (pad && (event.key === 'ArrowLeft' || event.key === 'ArrowRight'))
+    ) {
+      event.preventDefault()
+    }
+    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+      const increment = (event.key === 'ArrowUp' ? 1 : -1) * step
+      const nextValue = this.clampValue(value + increment)
+      const parsedValue = Number.parseFloat(
+        event.target.value.indexOf('.') > -1 ? nextValue.toFixed(2) : nextValue
+      )
+      if (this.isValueValid(parsedValue)) {
+        this.props.onChange(parsedValue)
+      }
+    }
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(event)
+    }
+  }
+
+  handleInput = (event) => {
+    const { maxValue } = this.getParsedValues(event.target.value)
+    if (this.props.pad) {
+      const targetValue =
+        event.target.value === ''
+          ? event.target.value
+          : parseFloat(event.target.value)
+
+      if (targetValue !== '') {
+        let nextValue = this.clampValue(targetValue)
+        if (this.props.moveFocusOnMax && nextValue / maxValue > 0.1) {
+          const { next } = getTabbableSiblings(event.target)
+          if (next) {
+            setTimeout(() => next.focus())
+          }
+        }
+
+        this.firstTouch = false
+        this.changeIfValid(nextValue)
+      } else {
+        this.props.onChange('')
+      }
+    } else {
+      this.props.onChange(event.target.value)
+    }
+  }
+
+  getAutoWidthValue(value) {
+    const { autoWidth, pad, placeholder } = this.props
+    const isValueEmpty = value === ''
+    return (
+      autoWidth ||
+      (pad && isValueEmpty
+        ? getPadStringSize(pad)
+        : isValueEmpty && placeholder !== undefined
+        ? placeholder
+        : value)
+    )
+  }
+
+  render() {
+    const {
+      autoWidth,
+      as,
+      highlightOnInteraction,
+      ignoredKeys,
+      min,
+      max,
+      moveFocusOnMax,
+      onChange,
+      onBlur,
+      onInput,
+      onKeyDown,
+      pad,
+      value,
+      ...restProps
+    } = this.props
+    const parsed = this.getParsedValues(value)
+    let numberValue = value === null ? '' : value
+    if (pad && numberValue !== '') {
+      numberValue = padNumber(numberValue, pad)
+    }
+    if (parsed.min !== MIN_VALUE) {
+      restProps.min = min
+    }
+    if (parsed.max !== MAX_VALUE) {
+      restProps.max = max
+    }
+    if (autoWidth !== false) {
+      restProps.autoWidth = this.getAutoWidthValue(numberValue)
+      if (restProps.autoWidth === undefined) {
+        restProps.autoWidth = true
+      }
+    }
+    return createElement(as, {
+      ...restProps,
+      textOverflow: undefined,
+      autoComplete: 'off',
+      value: numberValue,
+      highlightOnInteraction: highlightOnInteraction,
+      onBlur: this.handleBlur,
+      onInput: this.handleInput,
+      onKeyDown: this.handleKeyDown,
+    })
+  }
+}
+
+export default NumberField

package/src/NumberField/NumberField.mdx

@@ -0,0 +1,62 @@
+---
+title: NumberField
+category: Forms
+summary: Number stepper input used to collect numeric information from users.
+---
+
+```jsx live
+render(() => {
+  const [value, setValue] = React.useState(0)
+  return (
+    <Input.InputBox>
+      <NumberField value={value} onChange={(value) => setValue(value)} />
+    </Input.InputBox>
+  )
+})
+```
+
+```jsx live
+render(() => {
+  const [month, setMonth] = React.useState(4)
+  const [day, setDay] = React.useState(24)
+  const [year, setYear] = React.useState(2022)
+  return (
+    <StackView axis="horizontal" alignment="center">
+      <NumberField
+        as={Input.Inline}
+        moveFocusOnMax
+        fontSize={1}
+        pad={2}
+        min={1}
+        max={12}
+        value={month}
+        onChange={(month) => setMonth(month)}
+      />
+      <Text fontSize={1} marginHorizontal={0.5}>
+        /
+      </Text>
+      <NumberField
+        as={Input.Inline}
+        moveFocusOnMax
+        fontSize={1}
+        pad={2}
+        min={1}
+        max={31}
+        value={day}
+        onChange={(day) => setDay(day)}
+      />
+      <Text fontSize={1} marginHorizontal={0.5}>
+        /
+      </Text>
+      <NumberField
+        as={Input.Inline}
+        fontSize={1}
+        pad={4}
+        min={0}
+        value={year}
+        onChange={(year) => setYear(year)}
+      />
+    </StackView>
+  )
+})
+```