@planningcenter/tapestry-react 2.10.0-rc.4 → 2.10.0-rc.6

package/src/NumberField/NumberField.mdx

@@ -1,75 +0,0 @@
----
-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>
-  )
-})
-```
-
-### With Controls
-```jsx live
-render(() => {
-  const [value, setValue] = React.useState(0)
-  return (
-    <Input.InputBox>
-      <NumberField value={value} onChange={(value) => setValue(value)} hasControls={true} />
-    </Input.InputBox>
-  )
-})
-```
-
-### Inline
-```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>
-  )
-})
-```

package/src/NumberField/NumberField.test.tsx

@@ -1,168 +0,0 @@
-import React, { useState } from 'react'
-import { render } from '@testing-library/react'
-import '@testing-library/jest-dom/extend-expect'
-import userEvent from '@testing-library/user-event'
-import NumberField from './NumberField'
-
-describe('value', () => {
-  const TestApp = ({ value: initialValue, ...props }) => {
-    const [value, setValue] = useState(initialValue)
-    const defaultProps = {
-      pad: 0,
-      highlightOnInteraction: false,
-      placeholder: '',
-      autoWidth: false,
-      ...props,
-    }
-    return (
-      <NumberField
-        data-testid="test"
-        value={value}
-        onChange={(newValue) => {
-          setValue(newValue)
-          return null
-        }}
-        {...defaultProps}
-      />
-    )
-  }
-  const setup = (props) => {
-    const { getByTestId } = render(<TestApp {...props} />)
-    return getByTestId('test')
-  }
-
-  it('renders', () => {
-    const numberField = setup({ value: 5 })
-    expect(numberField).toHaveValue('5')
-  })
-
-  it('pads if asked to', () => {
-    const numberField = setup({ value: 5, pad: 2 })
-    expect(numberField).toHaveValue('05')
-  })
-
-  it('uses placeholder when empty', () => {
-    const placeholder = 'pick something!'
-    const numberField = setup({ placeholder })
-    expect(numberField).toHaveAttribute('placeholder', placeholder)
-  })
-
-  describe('min', () => {
-    it('is used if typed value is lower after blur', () => {
-      const numberField = setup({ value: 2, min: 1 })
-      userEvent.type(numberField, '{backspace}0')
-      userEvent.tab()
-      expect(numberField).toHaveValue('1')
-    })
-
-    it('prevents arrow down from going below', () => {
-      const numberField = setup({ value: 1, min: 1 })
-      userEvent.type(numberField, '{arrowdown}')
-      expect(numberField).toHaveValue('1')
-    })
-  })
-
-  describe('max', () => {
-    it('is used if typed value is higher after blur', () => {
-      const numberField = setup({ value: 0, max: 1 })
-      userEvent.type(numberField, '2')
-      userEvent.tab()
-      expect(numberField).toHaveValue('1')
-    })
-
-    it('prevents arrow up from going above', () => {
-      const numberField = setup({ value: 1, max: 1 })
-      userEvent.type(numberField, '{arrowup}')
-      expect(numberField).toHaveValue('1')
-    })
-  })
-
-  describe('pad', () => {
-    it('add appropriate pad', () => {
-      const numberField = setup({ value: 0, pad: 2 })
-      userEvent.type(numberField, '12{backspace}')
-      expect(numberField).toHaveValue('01')
-    })
-  })
-})
-
-describe('moveFocusOnMax', () => {
-  const TestApp = (props) => {
-    const [value, setValue] = useState(0)
-
-    return (
-      <>
-        <NumberField
-          {...props}
-          data-testid="test-a"
-          value={value}
-          onChange={setValue}
-        />
-        <input data-testid="test-b" />
-      </>
-    )
-  }
-
-  const setup = () => {
-    const props = { max: 12, pad: 2, moveFocusOnMax: true }
-    const { getByTestId } = render(<TestApp {...props} />)
-    return [getByTestId('test-a'), getByTestId('test-b')]
-  }
-
-  it('moves focus when any further input would exceed max', () => {
-    const [numberField, nextTabbable] = setup()
-
-    userEvent.type(numberField, '2')
-    jest.runAllTimers()
-    expect(nextTabbable).toHaveFocus()
-  })
-
-  it('does not move focus when some further input is possible without exceeding max', () => {
-    const [numberField, nextTabbable] = setup()
-
-    userEvent.type(numberField, '1') // (10, 11, 12) are still possible
-    jest.runAllTimers()
-    expect(numberField).toHaveFocus()
-  })
-})
-
-describe('ignoredKeys', () => {
-  const TestApp = (props) => {
-    const [value, setValue] = useState(1)
-
-    return (
-      <NumberField
-        {...props}
-        data-testid="test"
-        value={value}
-        onChange={setValue}
-      />
-    )
-  }
-
-  const setup = () => {
-    const props = { ignoredKeys: ['ArrowUp', 'ArrowDown'] }
-    const { getByTestId } = render(<TestApp {...props} />)
-    return getByTestId('test')
-  }
-
-  it('prevents specified keys from changing values', () => {
-    const numberField = setup()
-
-    userEvent.type(numberField, '{arrowup}')
-    jest.runAllTimers()
-    expect(numberField).toHaveValue('1')
-
-    userEvent.type(numberField, '{arrowdown}')
-    jest.runAllTimers()
-    expect(numberField).toHaveValue('1')
-  })
-
-  it('allows other keys from change the value', () => {
-    const numberField = setup()
-
-    userEvent.type(numberField, '2')
-    jest.runAllTimers()
-    expect(numberField).toHaveValue('12')
-  })
-})

package/src/NumberField/NumberField.tsx

@@ -1,354 +0,0 @@
-import React, { createElement, Component } from 'react'
-
-import InputField from '../Input/InputField'
-import StackView from '../StackView'
-import Button from '../Button'
-import { padNumber, getTabbableSiblings } from '../utils'
-
-type Props = {
-  /**
-   * Render custom component or HTML element tag. (Defaults to a [InputField](/input.inputfield) component.). */
-  as?: any
-
-  /**
-   * Add controls to increment/decrement the value
-   */
-  hasControls?: boolean
-
-  /**
-   * 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
-
-  /**
-   * Maps to the input's `onBlur` prop.
-   */
-  onBlur?: React.FocusEventHandler<HTMLInputElement>
-
-  onInput?: (event: React.FormEvent<HTMLInputElement>) => void
-
-  onKeyDown?: Function
-
-  /**
-   * The amount of 0s to pad the value with.
-   */
-  pad: number
-
-  /**
-   * Forces the input text to stay fully selected while interacting with it.
-   */
-  highlightOnInteraction: boolean
-
-  /**
-   * 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
-
-  autoWidth: boolean
-  moveFocusOnMax: boolean
-}
-
-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,
-    hasControls: false,
-    ignoredKeys: [],
-    min: MIN_VALUE,
-    max: MAX_VALUE,
-    step: 1,
-    moveFocusOnMax: false,
-  }
-
-  firstTouch = true
-
-  getParsedValues = (value) => {
-    return {
-      value: Number.parseFloat(value),
-      minValue: this.props.min,
-      maxValue: 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 { minValue, maxValue } = this.getParsedValues(event.target.value)
-    let value = Number.parseFloat(event.target.value)
-
-    if (value < minValue) {
-      this.props.onChange(minValue.toString())
-    } else if (value > maxValue) {
-      this.props.onChange(maxValue.toString())
-    } else if (isNaN(value)) {
-      value = this.clampValue(value)
-      this.props.onChange(value.toString())
-    }
-    if (this.props.onBlur) {
-      this.props.onBlur(event)
-    }
-    this.firstTouch = true
-  }
-
-  stepValue = (baseValue, step) => {
-    const nextValue = this.clampValue(baseValue + step)
-    const parsedValue = Number.parseFloat(
-      baseValue.toString().indexOf('.') > -1
-        ? nextValue.toFixed(2)
-        : nextValue.toString()
-    )
-    if (this.isValueValid(parsedValue)) {
-      this.props.onChange(parsedValue.toString())
-    }
-  }
-
-  incrementValue = () => this.stepValue(this.props.value, this.props.step)
-
-  decrementValue = () => this.stepValue(this.props.value, -this.props.step)
-
-  handleKeyDown = (event) => {
-    if (this.props.ignoredKeys.includes(event.key)) {
-      return
-    }
-    const { pad, step } = this.props
-    const { value } = this.getParsedValues(event.target.value)
-    if (
-      isNotAcceptedNumberKey(event) ||
-      (pad && (event.key === 'ArrowLeft' || event.key === 'ArrowRight'))
-    ) {
-      event.preventDefault()
-    }
-    if (event.key === 'ArrowUp') {
-      this.incrementValue()
-    } else if (event.key === 'ArrowDown') {
-      this.decrementValue()
-    }
-    if (this.props.onKeyDown) {
-      this.props.onKeyDown(event)
-    }
-  }
-
-  handleInput = (event) => {
-    const { maxValue } = this.getParsedValues(event.target.value)
-    if (this.props.pad) {
-      const deleteKeyPressed = event.target.value === ''
-      const targetValue = deleteKeyPressed
-        ? event.target.value
-        : parseFloat(event.target.value)
-
-      if (deleteKeyPressed) {
-        const nextValue = `${this.props.value}`.slice(0, -1)
-        this.props.onChange(padNumber(nextValue, this.props.pad))
-      } else {
-        let nextValue = this.clampValue(targetValue)
-        const paddedValue = parseFloat(`${this.props.value}${targetValue}`)
-        if (
-          !this.firstTouch &&
-          !isNaN(targetValue) &&
-          this.isValueValid(paddedValue)
-        ) {
-          nextValue = paddedValue
-        }
-        this.firstTouch = false
-
-        if (this.props.moveFocusOnMax && nextValue / maxValue > 0.1) {
-          const { next } = getTabbableSiblings(event.target)
-          if (next) {
-            setTimeout(() => next.focus())
-          }
-        }
-
-        this.changeIfValid(nextValue)
-      }
-    } 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)
-    )
-  }
-
-  renderInput(restProps) {
-    const { as, highlightOnInteraction, pad, value } = this.props
-    const parsed = this.getParsedValues(value)
-    let numberValue = value === null ? '' : value
-
-    if (pad && numberValue !== '') {
-      numberValue = padNumber(numberValue, pad)
-    }
-
-    if (parsed.minValue !== MIN_VALUE) {
-      restProps.min = this.props.min
-    }
-
-    if (parsed.maxValue !== MAX_VALUE) {
-      restProps.max = this.props.max
-    }
-
-    if (this.props.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 || pad,
-      onBlur: this.handleBlur,
-      onInput: this.handleInput,
-      onKeyDown: this.handleKeyDown,
-    })
-  }
-
-  renderInputWithControls(restProps) {
-    const inputElement = this.renderInput(restProps)
-
-    if (this.props.hasControls) {
-      return (
-        <>
-          {inputElement}
-          <StackView marginRight={-1} marginLeft={1}>
-            <Button
-              icon={{ name: 'general.upCaret' }}
-              hover={{ backgroundColor: 'grey-1' }}
-              minHeight={1}
-              onClick={() => this.incrementValue()}
-              paddingVertical={0.25}
-              // @ts-ignore Type 'string' is not assignable to type 'never'.ts(2322)
-              size="xs"
-              title={`Increment by 1`}
-              theme="naked"
-            />
-            <Button
-              icon={{ name: 'general.downCaret' }}
-              hover={{ backgroundColor: 'grey-1' }}
-              minHeight={1}
-              onClick={() => this.decrementValue()}
-              paddingVertical={0.25}
-              // @ts-ignore Type 'string' is not assignable to type 'never'.ts(2322)
-              size="xs"
-              title={`Decrement by 1`}
-              theme="naked"
-            />
-          </StackView>
-        </>
-      )
-    }
-    return inputElement
-  }
-
-  render() {
-    const {
-      autoWidth,
-      as,
-      hasControls,
-      highlightOnInteraction,
-      ignoredKeys,
-      min,
-      max,
-      moveFocusOnMax,
-      onChange,
-      onBlur,
-      onInput,
-      onKeyDown,
-      pad,
-      value,
-      ...restProps
-    } = this.props
-
-    return this.props.hasControls
-      ? this.renderInputWithControls(restProps)
-      : this.renderInput(restProps)
-  }
-}
-
-export default NumberField

package/src/NumberField/index.js

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