@telus-uds/components-base 0.0.2-prerelease.6 → 0.0.2-prerelease.7

package/lib/TextInput/TextInput.js

@@ -1,93 +1,9 @@
-import React, { useState } from 'react';
-import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native';
-import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, useInputValue, variantProp } from '../utils';
-import InputLabel from '../InputLabel';
-import Feedback from '../Feedback';
-import useUniqueId from '../utils/useUniqueId';
-import StackView from '../StackView';
-
-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 React from 'react';
+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.
  * Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
@@ -107,229 +23,32 @@ const joinDefined = array => array.filter(item => item !== undefined).join(' ');
  * 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,
-    space
-  } = themeTokens;
-  const hasValidationError = validation === 'error';
-  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
+    props: supportsProps,
+    rest
+  } = inputSupportProps.select(remainingProps);
+  const inputProps = { ...rest,
+    tokens,
+    variant: { ...variant,
+      validation: supportsProps.validation
+    }
   };
-  const feedbackVariant = {};
-
-  if (hasValidationError) {
-    feedbackVariant.state = 'error';
-  } else if (validation === 'success') {
-    feedbackVariant.state = 'success';
-  }
-
-  return /*#__PURE__*/React.createElement(StackView, {
-    space: space
-  }, label && /*#__PURE__*/React.createElement(InputLabel, {
-    label: label,
-    hint: hint,
-    hintPosition: hintPosition,
-    hintId: hintId,
-    tooltip: tooltip,
-    forId: inputId
-  }), /*#__PURE__*/React.createElement(View, {
-    style: selectOuterBorderStyles(themeTokens)
-  }, /*#__PURE__*/React.createElement(NativeTextInput, Object.assign({
-    style: selectInputStyles(themeTokens, inactive)
-  }, inputProps)), IconComponent && /*#__PURE__*/React.createElement(View, {
-    pointerEvents: "none" // avoid hijacking input press events
-    ,
-    style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)]
-  }, /*#__PURE__*/React.createElement(IconComponent, {
-    tokens: selectIconTokens(themeTokens)
-  }))), feedback && /*#__PURE__*/React.createElement(Feedback, {
-    title: feedback,
-    variant: feedbackVariant,
-    accessibilityRole: hasValidationError ? 'alert' : undefined
-  }));
+  return /*#__PURE__*/React.createElement(InputSupports, supportsProps, ({
+    a11yProps,
+    inputId
+  }) => /*#__PURE__*/React.createElement(TextInputBase, Object.assign({}, inputProps, a11yProps, {
+    nativeID: inputId
+  })));
 }
 
-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,
+TextInput.propTypes = { ...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'
-  }
-});
+export default TextInput;

package/lib/TextInput/TextInputBase.js

@@ -0,0 +1,229 @@
+import React, { useState } from 'react';
+import { Platform, StyleSheet, TextInput as NativeTextInput, View } from 'react-native';
+import PropTypes from 'prop-types';
+import { applyTextStyles, useThemeTokens } 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 = 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 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 /*#__PURE__*/React.createElement(View, {
+    style: selectOuterBorderStyles(themeTokens)
+  }, /*#__PURE__*/React.createElement(NativeTextInput, Object.assign({
+    style: nativeInputStyle
+  }, inputProps)), IconComponent && /*#__PURE__*/React.createElement(View, {
+    pointerEvents: "none" // avoid hijacking input press events
+    ,
+    style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)]
+  }, /*#__PURE__*/React.createElement(IconComponent, {
+    tokens: selectIconTokens(themeTokens)
+  })));
+}
+
+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/lib/TextInput/index.js

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

package/lib/TextInput/propTypes.js

@@ -0,0 +1,31 @@
+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;

package/lib/ThemeProvider/useThemeTokens.js

@@ -11,6 +11,22 @@ import { getComponentTheme, getThemeTokens, resolveTokens, mergeAppearances } fr
  * Returns a complete set of theme tokens for a component based on which of the
  * component's theme rules apply to the current set of theme appearances.
  *
+ * When applying theme tokens as styles to a component, don't spread the theme tokens
+ * object, explicitly select each property. This way, if new theme tokens are added to the
+ * component's theme in a minor or patch release of the theme package, the appearance
+ * of the component in sites and apps will only change when the component itself is updated.
+ *
+ * @example
+ * const seletContainerTokens = ({ color, width, height }) => ({
+ *   backgroundColor: color, width, height
+ * })
+ * const MyComponent = ({ tokens, variant, children }) => {
+ *   const viewport = useViewport()
+ *   const themeTokens = useThemeTokens('MyComponent', tokens, variant, { viewport })
+ *   const style = seletContainerTokens(themeTokens)
+ *   return <View style={style}>{children}</View>
+ * }
+ *
  * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
  * @param {TokensProp} [tokens] - every themed component should accept an optional `tokens` prop allowing theme tokens to be overridden
  * @param {AppearanceSet} [variants] - every themed component should accept an optional `variants` prop specifying theme variants
@@ -26,13 +42,48 @@ export const useThemeTokens = (componentName, tokens = {}, variants = {}, states
 };
 /**
  * Returns a memoised tokens getter function that gets tokens similar to calling useThemeTokens.
- * Scenarios where useThemeTokensCallback should be used instead of useThemeTokens include:
+ * Scenarios where `useThemeTokensCallback` should be used instead of `useThemeTokens` include:
  *
- * - Where tokens to be obtained from state accessible only in scopes like callbacks and render functions,
- *   where calling useThemeTokens directly would be disallowed by React's hook rules.
+ * - Where tokens are to be obtained from state that is accessible only in scopes like callbacks
+ *   and render functions, where calling useThemeTokens directly would be disallowed by React's hook rules.
  * - Passing a tokens getter down via a child component's `tokens` prop, applying rules using the
  *   child component's current state. Consider wrapping the returned tokens in `selectTokens()`.
  *
+ * The function returned by `useThemeTokens` may be called with an object of state appearances to get an object
+ * of tokens, or may be passed as a `tokens` prop to other themed components or `useThemeTokens`/`useThemeTokensCallback`
+ * hooks.
+ *
+ * @example
+ * // Resolving tokens inside Pressable's style function, based on Pressable state
+ * const PressMe = ({ tokens, variant, children }) => {
+ *   const getTokens = useThemeTokensCallback('PressMe', tokens, variant)
+ *   const getPressableStyle = ({ pressed }) => {
+ *     const { color, width, height } = getTokens({ pressed })
+ *     return { backgroundColor: color, width, height }
+ *   }
+ *   return <Pressable style={getPressableStyle}>{children}</Pressable>
+ * }
+ *
+ * @example
+ * // Setting the theme in a parent and resolving it in a child based on child's state
+ * const MenuButton = ({ tokens, variant, ...buttonProps }) => {
+ *   // Define what theme, variant etc we want in this component...
+ *   const getTokens = useThemeTokensCallback('Button', tokens, variant)
+ *   // ...resolve them in another component based on its state (e.g. press, hover...)
+ *   return <ButtonBase tokens={getTokens} accessibilityRole="menuitem" {...buttonProps} />
+ * }
+ *
+ * @example
+ * // Chaining multiple themes together, sharing the same variants and state
+ * const GlowingLink = ({ tokens, variant, children }) => {
+ *   // applies a small theme for a glowing effect, using same variants and states as "link"
+ *   const getGlowTokens = useThemeCallback('GlowingLink', tokens, variant)
+ *   // applies link state to get "Link" theme tokens and merge "GlowingLink" tokens on top
+ *   const getTokens = useThemeCallback('Link', getGlowTokens, variant)
+ *   // renders a link with both themes applied, both based on current link state
+ *   return <LinkBase tokens={getTokens}>{children}</LinkBase>
+ * }
+ *
  * @param {string} componentName - the name as defined in the theme schema of the component whose theme is to be used
  * @param {TokensProp} [tokens] - every themed component should accept a `tokens` prop allowing theme tokens to be overridden
  * @param {AppearanceSet} [variants] - variants passed in as props that don't change dynamically

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -147,7 +147,7 @@ ToggleSwitch.propTypes = { ...a11yProps.propTypes,
 };
 const staticStyles = StyleSheet.create({
   track: {
-    flex: 1,
+    flexGrow: 1,
     alignSelf: 'stretch',
     flexDirection: 'row'
   },