@telus-uds/components-base 0.0.2-prerelease.5 → 0.0.2-prerelease.9

package/src/TextInput/TextArea.jsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react'
+
+import { Platform } from 'react-native'
+import { getTokensPropType, variantProp } from '../utils'
+import InputSupports from '../InputSupports'
+import TextInputBase from './TextInputBase'
+import { useThemeTokens } from '../ThemeProvider'
+import inputSupportProps from '../InputSupports/propTypes'
+import textInputPropTypes from './propTypes'
+
+/**
+ * Use to collect long-form information such as product feedback or support queries.
+ * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
+ * The `TextArea` height will automatically increase when new lines are added - this behavior can be limited within the theme.
+ *
+ * ## Controlled component
+ * If it is required that the state of the `TextArea` be controlled by the application or other external methods,
+ * `value` and `onChange` props must be passed to the `TextArea`.
+ * If the `TextArea` value should not be changed by user input, a `readOnly` prop must be provided.
+ *
+ * ## Uncontrolled component
+ * If it is not necessary to control the `TextArea` state, you can create one without a value prop.
+ * In this case its value can be accessed within the `onChange` callback.
+ *
+ * ## Getting feedback for entered values
+ * Use the `feedback` prop to give the user feedback regarding their input.
+ * You can affirm that the user's input was correct, or highlight errors that must be corrected, using the `validation` prop.
+ * Keep feedback text as brief as possible, should be limited to text and links.
+ *
+ * ## Supplying a hint
+ * Use the `hint` prop to succinctly clarify attributes of the expected input data, such as the expected format,
+ * or an indicator that the field is optional.
+ * It is a more usable and accessible option than the HTML `placeholder` attribute.
+ */
+function TextArea({ tokens, variant = {}, ...remainingProps }) {
+  const themeTokens = useThemeTokens('TextArea', tokens, variant)
+  const [inputHeight, setInputHeight] = useState()
+
+  // adjust the text area's height as new lines are added to the content
+  const onHeightChange = ({
+    nativeEvent: {
+      contentSize: { height }
+    }
+  }) => {
+    // on native this is happens out of the box
+    if (Platform.OS === 'web') {
+      setInputHeight(height)
+    }
+  }
+
+  const { props: supportsProps, rest } = inputSupportProps.select(remainingProps)
+
+  const inputProps = {
+    ...rest,
+    variant: { ...variant, validation: supportsProps.validation },
+    multiline: true,
+    onContentSizeChange: onHeightChange,
+    height: inputHeight,
+    tokens: themeTokens
+  }
+
+  return (
+    <InputSupports {...supportsProps}>
+      {({ a11yProps, inputId }) => (
+        <TextInputBase {...inputProps} {...a11yProps} nativeID={inputId} />
+      )}
+    </InputSupports>
+  )
+}
+
+TextArea.propTypes = {
+  ...inputSupportProps.types,
+  ...textInputPropTypes,
+  tokens: getTokensPropType('TextArea', 'TextInput'), // TODO: support both TextArea and TextInput tokens
+  variant: variantProp.propType
+}
+
+export default TextArea

package/src/TextInput/TextInput.jsx

@@ -1,96 +1,10 @@
-import React, { useState } from 'react'
-import { View, TextInput as NativeTextInput, Platform, StyleSheet } from 'react-native'
+import React from 'react'
 
-import PropTypes from 'prop-types'
-import { useThemeTokens, applyTextStyles } from '../ThemeProvider'
-import { getTokensPropType, useInputValue, variantProp } from '../utils'
-import InputLabel from '../InputLabel'
-import Feedback from '../Feedback'
-import Box from '../Box'
-import useUniqueId from '../utils/useUniqueId'
-
-const selectInputStyles = (
-  {
-    backgroundColor,
-    color,
-    borderWidth,
-    borderColor,
-    borderRadius,
-    paddingTop,
-    paddingBottom,
-    paddingLeft,
-    paddingRight = 0,
-    fontName,
-    fontSize,
-    fontWeight,
-    lineHeight,
-    icon,
-    iconSize = 0
-  },
-  inactive
-) => {
-  // Subtract border width from padding so overall input width/height doesn't
-  // jump around if the border width changes (avoiding NaN and negative padding)
-  const offsetBorder = (value) =>
-    typeof value === 'number' && typeof borderWidth === 'number'
-      ? Math.max(0, value - borderWidth)
-      : value
-
-  const textStyles = applyTextStyles({ fontName, fontSize, lineHeight, fontWeight })
-  const webStyles = Platform.select({
-    web: {
-      outline: 'none',
-      cursor: inactive ? 'not-allowed' : undefined
-    }
-  })
-
-  const paddingWithIcon = iconSize + paddingRight
-
-  return {
-    backgroundColor,
-    color,
-    borderWidth,
-    borderColor,
-    borderRadius,
-    paddingLeft: offsetBorder(paddingLeft),
-    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
-    paddingTop: offsetBorder(paddingTop),
-    paddingBottom: offsetBorder(paddingBottom),
-    ...textStyles,
-    ...webStyles
-  }
-}
-
-const selectOuterBorderStyles = ({
-  outerBackgroundColor,
-  outerBorderWidth = 0,
-  outerBorderColor,
-  outerBorderRadius = 0
-}) => {
-  // Use negative margins so that the outer border doesn't expand the input's bounding box
-  const margin = -1 * outerBorderWidth
-
-  // Account for the border width since we style it as an outline
-  const borderRadius = outerBorderRadius + outerBorderWidth
-
-  return {
-    background: outerBackgroundColor,
-    borderWidth: outerBorderWidth,
-    borderColor: outerBorderColor,
-    borderRadius,
-    marginTop: margin,
-    marginBottom: margin,
-    marginLeft: margin,
-    marginRight: margin
-  }
-}
-
-const selectIconTokens = ({ iconSize, iconColor }) => ({
-  size: iconSize,
-  color: iconColor
-})
-
-const joinDefined = (array) => array.filter((item) => item !== undefined).join(' ')
+import { getTokensPropType, variantProp } from '../utils'
+import InputSupports from '../InputSupports'
+import TextInputBase from './TextInputBase'
+import inputSupportProps from '../InputSupports/propTypes'
+import textInputPropTypes from './propTypes'
 
 /**
  * A basic text input component. Use in forms or individually to receive user's input.
@@ -110,216 +24,29 @@ const joinDefined = (array) => array.filter((item) => item !== undefined).join('
  * supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
  * their implementation on the web.
  */
-function TextInput({
-  value,
-  initialValue,
-  label,
-  hint,
-  hintPosition = 'inline',
-  feedback,
-  tooltip,
-  validation,
-  inactive,
-  readOnly,
-  onChange,
-  onChangeText,
-  onFocus,
-  onBlur,
-  onMouseOver,
-  onMouseOut,
-  tokens,
-  variant = {},
-  ...remainingProps
-}) {
-  const inputId = useUniqueId('text-input')
-  const hintId = useUniqueId('text-input-hint')
-  const feedbackId = useUniqueId('text-input-feedback')
-
-  const [isFocused, setIsFocused] = useState(false)
-  const handleFocus = (event) => {
-    setIsFocused(true)
-    if (typeof onFocus === 'function') onFocus(event)
-  }
-  const handleBlur = (event) => {
-    setIsFocused(false)
-    if (typeof onBlur === 'function') onBlur(event)
-  }
-
-  const [isHovered, setIsHovered] = useState(false)
-  const handleMouseOver = (event) => {
-    setIsHovered(true)
-    if (typeof onMouseOver === 'function') onMouseOver(event)
-  }
-  const handleMouseOut = (event) => {
-    setIsHovered(false)
-    if (typeof onMouseOut === 'function') onMouseOut(event)
-  }
-
-  const { currentValue, setValue, isControlled } = useInputValue({
-    value,
-    initialValue,
-    onChange,
-    readOnly
-  })
-
-  const handleChangeText = (text) => {
-    setValue(text)
-    if (typeof onChangeText === 'function') onChangeText(text)
-  }
-
-  const states = { focus: isFocused, hover: isHovered, inactive }
-
-  const themeTokens = useThemeTokens('TextInput', tokens, { ...variant, validation }, states)
-
-  const { icon: IconComponent } = themeTokens
-
-  const hasValidationError = validation === 'error'
+function TextInput({ tokens, variant = {}, ...remainingProps }) {
+  const { props: supportsProps, rest } = inputSupportProps.select(remainingProps)
 
   const inputProps = {
-    ...remainingProps,
-    editable: !inactive,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onMouseOver: handleMouseOver,
-    onMouseOut: handleMouseOut,
-    onChangeText: handleChangeText,
-    accessibilityLabel: label,
-    accessibilityHint: joinDefined([!hasValidationError && feedback, hint]), // native only -> replaced with describedBy on web
-    accessibilityDescribedBy: joinDefined([
-      !hasValidationError && feedback && feedbackId, // feedback receives a11yRole=alert, so there's no need to include it here
-      hint && hintId
-    ]), // introduced in RNW 0.15.0
-    accessibilityInvalid: hasValidationError, // introduced in RNW 0.15.0
-    nativeID: inputId,
-    defaultValue: initialValue,
-    // currentValue is being updated even if the input is not controlled, passing it down to the
-    // Input could lead to changing its state from uncontrolled to controlled
-    value: isControlled ? currentValue : undefined
-  }
-
-  // TODO: use Stack instead of the Boxes
-
-  const feedbackVariant = {}
-
-  if (hasValidationError) {
-    feedbackVariant.state = 'error'
-  } else if (validation === 'success') {
-    feedbackVariant.state = 'success'
+    ...rest,
+    tokens,
+    variant: { ...variant, validation: supportsProps.validation }
   }
 
   return (
-    <View>
-      {label && (
-        <Box bottom={1}>
-          <InputLabel
-            label={label}
-            hint={hint}
-            hintPosition={hintPosition}
-            hintId={hintId}
-            tooltip={tooltip}
-            forId={inputId}
-          />
-        </Box>
+    <InputSupports {...supportsProps}>
+      {({ a11yProps, inputId }) => (
+        <TextInputBase {...inputProps} {...a11yProps} nativeID={inputId} />
       )}
-      <View style={selectOuterBorderStyles(themeTokens)}>
-        <NativeTextInput style={selectInputStyles(themeTokens, inactive)} {...inputProps} />
-        {IconComponent && (
-          <View
-            pointerEvents="none" // avoid hijacking input press events
-            style={[staticStyles.iconContainer, selectIconContainerStyles(themeTokens)]}
-          >
-            <IconComponent tokens={selectIconTokens(themeTokens)} />
-          </View>
-        )}
-      </View>
-      {feedback && (
-        <Box top={1}>
-          <Feedback
-            title={feedback}
-            variant={feedbackVariant}
-            accessibilityRole={hasValidationError ? 'alert' : undefined}
-          />
-        </Box>
-      )}
-    </View>
+    </InputSupports>
   )
 }
 
-const selectIconContainerStyles = ({ paddingRight }) => ({
-  paddingRight
-})
-
 TextInput.propTypes = {
-  /**
-   * The input label.
-   */
-  label: PropTypes.string,
-  /**
-   * If the `TextInput's` state is to be controlled by a parent component, use this prop
-   * together with the `onChange` to pass down and update the lifted state.
-   */
-  value: PropTypes.string,
-  /**
-   * Use this to set the initial value of an uncontrolled `TextInput`.
-   * Updating `initialValue` will **not** update the actual value.
-   */
-  initialValue: PropTypes.string,
-  /**
-   * A short description of the expected input.
-   */
-  hint: PropTypes.string,
-  /**
-   * Position of the hint relative to label.
-   */
-  hintPosition: PropTypes.oneOf(['inline', 'below']),
-  /**
-   * A detailed description of validation error/success or additional instructions.
-   * Visual variant is determined based on the `validation` prop.
-   */
-  feedback: PropTypes.string,
-  /**
-   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
-   */
-  tooltip: PropTypes.string,
-  /**
-   * Use to visually mark an input as valid or invalid.
-   */
-  validation: PropTypes.oneOf(['error', 'success']),
-  /**
-   * Disables all user interactions with the input.
-   */
-  inactive: PropTypes.bool,
-  /**
-   * Makes it impossible to change the input's value.
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * Use to react upon input's value changes. Required when the `value` prop is set.
-   * Will receive the input's value as an argument.
-   */
-  onChange: PropTypes.func,
-  /** @ignore */
-  onChangeText: PropTypes.func,
-  /** @ignore */
-  onFocus: PropTypes.func,
-  /** @ignore */
-  onBlur: PropTypes.func,
-  /** @ignore */
-  onMouseOver: PropTypes.func,
-  /** @ignore */
-  onMouseOut: PropTypes.func,
+  ...inputSupportProps.types,
+  ...textInputPropTypes,
   tokens: getTokensPropType('TextInput'),
   variant: variantProp.propType
 }
 
 export default TextInput
-
-const staticStyles = StyleSheet.create({
-  iconContainer: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
-    justifyContent: 'center'
-  }
-})

package/src/TextInput/TextInputBase.jsx

@@ -0,0 +1,210 @@
+import React, { useState } from 'react'
+import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native'
+
+import PropTypes from 'prop-types'
+import { applyTextStyles, useThemeTokens, applyOuterBorder } from '../ThemeProvider'
+import { getTokensPropType, useInputValue, variantProp } from '../utils'
+
+const selectInputStyles = (
+  {
+    backgroundColor,
+    color,
+    borderWidth = 0,
+    borderColor,
+    borderRadius,
+    paddingTop = 0,
+    paddingBottom = 0,
+    paddingLeft,
+    paddingRight = 0,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight,
+    icon,
+    iconSize = 0,
+    minLines,
+    maxLines,
+    width,
+    height
+  },
+  inactive
+) => {
+  // Subtract border width from padding so overall input width/height doesn't
+  // jump around if the border width changes (avoiding NaN and negative padding)
+  const offsetBorder = (value) =>
+    typeof value === 'number' ? Math.max(0, value - borderWidth) : value
+
+  const textStyles = applyTextStyles({ fontName, fontSize, lineHeight, fontWeight })
+
+  function linesToHeight(lines) {
+    const { lineHeight: absoluteLineHeight } = textStyles
+
+    return lines !== undefined ? lines * absoluteLineHeight + paddingTop + paddingBottom : undefined
+  }
+
+  const minHeight = linesToHeight(minLines)
+  const maxHeight = linesToHeight(maxLines)
+
+  const webStyles = Platform.select({
+    web: {
+      outline: 'none',
+      cursor: inactive ? 'not-allowed' : undefined,
+      resize: minHeight !== maxHeight ? 'vertical' : 'none' // does nothing for an input, only needed for textarea
+    }
+  })
+
+  const paddingWithIcon = iconSize + paddingRight
+
+  return {
+    backgroundColor,
+    color,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    paddingLeft: offsetBorder(paddingLeft),
+    paddingRight: icon ? offsetBorder(paddingWithIcon) : offsetBorder(paddingRight),
+    paddingTop: offsetBorder(paddingTop),
+    paddingBottom: offsetBorder(paddingBottom),
+    minHeight,
+    maxHeight,
+    width,
+    height,
+    ...textStyles,
+    ...webStyles
+  }
+}
+
+const selectOuterBorderStyles = ({
+  outerBackgroundColor,
+  outerBorderWidth,
+  outerBorderColor,
+  borderRadius
+}) => ({
+  background: outerBackgroundColor,
+  ...applyOuterBorder({
+    outerBorderColor,
+    outerBorderWidth,
+    borderRadius
+  })
+})
+
+const selectIconTokens = ({ iconSize, iconColor }) => ({
+  size: iconSize,
+  color: iconColor
+})
+
+const selectIconContainerStyles = ({ paddingRight, paddingBottom }) => ({
+  paddingRight,
+  paddingBottom
+})
+
+function TextInputBase({
+  value,
+  height,
+  initialValue,
+  inactive,
+  readOnly,
+  onChange,
+  onChangeText,
+  onFocus,
+  onBlur,
+  onMouseOver,
+  onMouseOut,
+  tokens,
+  variant = {},
+  ...remainingProps
+}) {
+  const [isFocused, setIsFocused] = useState(false)
+  const handleFocus = (event) => {
+    setIsFocused(true)
+    if (typeof onFocus === 'function') onFocus(event)
+  }
+  const handleBlur = (event) => {
+    setIsFocused(false)
+    if (typeof onBlur === 'function') onBlur(event)
+  }
+
+  const [isHovered, setIsHovered] = useState(false)
+  const handleMouseOver = (event) => {
+    setIsHovered(true)
+    if (typeof onMouseOver === 'function') onMouseOver(event)
+  }
+  const handleMouseOut = (event) => {
+    setIsHovered(false)
+    if (typeof onMouseOut === 'function') onMouseOut(event)
+  }
+
+  const { currentValue, setValue, isControlled } = useInputValue({
+    value,
+    initialValue,
+    onChange,
+    readOnly
+  })
+
+  const handleChangeText = (text) => {
+    setValue(text)
+    if (typeof onChangeText === 'function') onChangeText(text)
+  }
+
+  const states = { focus: isFocused, hover: isHovered, inactive }
+
+  const themeTokens = useThemeTokens('TextInput', tokens, variant, states)
+
+  const { icon: IconComponent } = themeTokens
+
+  const inputProps = {
+    ...remainingProps,
+    editable: !inactive,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    onChangeText: handleChangeText,
+    defaultValue: initialValue,
+    // currentValue is being updated even if the input is not controlled, passing it down to the
+    // Input could lead to changing its state from uncontrolled to controlled
+    value: isControlled ? currentValue : undefined
+  }
+
+  const nativeInputStyle = selectInputStyles({ ...themeTokens, height }, inactive)
+
+  return (
+    <View style={selectOuterBorderStyles(themeTokens)}>
+      <NativeTextInput style={nativeInputStyle} {...inputProps} />
+      {IconComponent && (
+        <View
+          pointerEvents="none" // avoid hijacking input press events
+          style={[staticStyles.iconContainer, selectIconContainerStyles(themeTokens)]}
+        >
+          <IconComponent {...selectIconTokens(themeTokens)} />
+        </View>
+      )}
+    </View>
+  )
+}
+
+TextInputBase.propTypes = {
+  value: PropTypes.string,
+  height: PropTypes.number,
+  initialValue: PropTypes.string,
+  inactive: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  onChange: PropTypes.func,
+  onChangeText: PropTypes.func,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onMouseOver: PropTypes.func,
+  onMouseOut: PropTypes.func,
+  tokens: getTokensPropType('TextInput', 'TextArea'),
+  variant: variantProp.propType
+}
+
+export default TextInputBase
+
+const staticStyles = StyleSheet.create({
+  iconContainer: {
+    position: 'absolute',
+    right: 0,
+    bottom: 0
+  }
+})

package/src/TextInput/index.js

@@ -1,3 +1,4 @@
 import TextInput from './TextInput'
+import TextArea from './TextArea'
 
-export default TextInput
+export { TextInput, TextArea }

package/src/TextInput/propTypes.js

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types'
+
+const textInputPropTypes = {
+  /**
+   * If the input's state is to be controlled by a parent component, use this prop
+   * together with the `onChange` to pass down and update the lifted state.
+   */
+  value: PropTypes.string,
+  /**
+   * Use this to set the initial value of an uncontrolled input.
+   * Updating `initialValue` will **not** update the actual value.
+   */
+  initialValue: PropTypes.string,
+  /**
+   * Disables all user interactions with the input.
+   */
+  inactive: PropTypes.bool,
+  /**
+   * Makes it impossible to change the input's value.
+   */
+  readOnly: PropTypes.bool,
+  /**
+   * Use to react upon input's value changes. Required when the `value` prop is set.
+   * Will receive the input's value as an argument.
+   */
+  onChange: PropTypes.func
+}
+
+export default textInputPropTypes