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

package/src/TextInput/TextInput.jsx

@@ -0,0 +1,325 @@
+import React, { useState } from 'react'
+import { View, TextInput as NativeTextInput, Platform, StyleSheet } from 'react-native'
+
+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(' ')
+
+/**
+ * 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.
+ *
+ * ## Controlled component
+ * If it is required that the state of the `TextInput` be controlled by the application or other external methods,
+ * `value` and `onChange` props must be passed to the `TextInput`.
+ * If the `TextInput` value should not be changed by user input, a `readOnly` prop must be provided.
+ *
+ * ## Uncontrolled component
+ * If it is not necessary to control the `TextInput` state, you can create one without a value prop.
+ * In this case its value can be accessed within the `onChange` callback.
+ *
+ * NOTE: In order to support more advanced usages all additional props will be passed down to the React Native's
+ * `TextInput` component. See <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native documentation</a> for
+ * 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'
+
+  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'
+  }
+
+  return (
+    <View>
+      {label && (
+        <Box bottom={1}>
+          <InputLabel
+            label={label}
+            hint={hint}
+            hintPosition={hintPosition}
+            hintId={hintId}
+            tooltip={tooltip}
+            forId={inputId}
+          />
+        </Box>
+      )}
+      <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>
+  )
+}
+
+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,
+  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/index.js

@@ -0,0 +1,3 @@
+import TextInput from './TextInput'
+
+export default TextInput

package/src/Typography/Typography.jsx

@@ -33,8 +33,6 @@ const selectTextStyles = ({
   color,
   lineHeight,
   fontName,
-  marginTop,
-  marginBottom,
   textAlign,
   textTransform
 }) =>
@@ -44,8 +42,6 @@ const selectTextStyles = ({
     color,
     lineHeight,
     fontName,
-    marginTop,
-    marginBottom,
     textAlign,
     textTransform
   })

package/src/index.js

@@ -4,18 +4,23 @@ export * from './Button'
 export { default as Card } from './Card'
 export { default as Divider } from './Divider'
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
+export { default as Feedback } from './Feedback'
 export { default as FlexGrid } from './FlexGrid'
 export { default as Icon } from './Icon'
 export * from './Icon'
 export * from './Link'
 export { default as Pagination } from './Pagination'
 export { default as SideNav } from './SideNav'
+export { default as Spacer } from './Spacer'
+export { default as StackView } from './StackView'
+export * from './StackView'
+export { default as TextInput } from './TextInput'
 export { default as ToggleSwitch } from './ToggleSwitch'
 export { default as Typography } from './Typography'
 
 export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider'
 export { default as BaseProvider } from './BaseProvider'
 export { default as ViewportProvider, useViewport } from './ViewportProvider'
-export { default as ThemeProvider, useTheme, useSetTheme } from './ThemeProvider'
+export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens } from './ThemeProvider'
 
 export * from './utils'

package/src/utils/input.js

@@ -55,6 +55,7 @@ Consumers of this hook must be one of:
  *   currentValue: any
  *   setValue: (value: any) => void
  *   resetValue: () => void
+ *   isControlled: bool
  * }}
  */
 
@@ -81,7 +82,7 @@ export const useInputValue = (props = {}, hookName = 'useInputValue') => {
   )
   const resetValue = useCallback(() => setValue(initializedValue), [initializedValue, setValue])
 
-  return { currentValue, setValue, resetValue }
+  return { currentValue, setValue, resetValue, isControlled }
 }
 
 /**

package/src/utils/propTypes.js

@@ -427,3 +427,12 @@ export const componentPropType = (passedName, checkDisplayName = false) => {
 }
 
 export const copyPropTypes = PropTypes.oneOf(['en', 'fr'])
+
+export const paddingProp = {
+  propType: PropTypes.shape({
+    paddingBottom: PropTypes.number,
+    paddingLeft: PropTypes.number,
+    paddingRight: PropTypes.number,
+    paddingTop: PropTypes.number
+  })
+}

package/src/utils/useUniqueId.js

@@ -0,0 +1,14 @@
+import { useState } from 'react'
+
+let id = 0
+
+function useUniqueId(prefix = '') {
+  const [uniqueId] = useState(() => {
+    id += 1
+    return `${prefix}-${id}`
+  })
+
+  return uniqueId
+}
+
+export default useUniqueId

package/stories/A11yText/A11yText.stories.jsx

@@ -4,6 +4,7 @@ import { StyleSheet, Text, View } from 'react-native'
 
 import A11yText from '../../lib/A11yText'
 import { Button, Typography } from '../../lib'
+import { EachParentType, parentTypesParams } from '../supports'
 
 const defaultArgs = {
   text: 'This text is for screen readers,',
@@ -31,6 +32,10 @@ const Template = (args) => (
   </>
 )
 
+export const Default = (args) => <A11yText {...args} />
+Default.storyName = 'A11yText'
+Default.args = defaultArgs
+
 export const A11yTextInText = Template.bind({})
 A11yTextInText.args = defaultArgs
 
@@ -50,12 +55,13 @@ export const A11yTextInButton = (args) => (
 )
 A11yTextInButton.args = defaultArgs
 
-export const A11yTextInRow = (args) => (
-  <View style={styles.row}>
-    <Template {...args} />
-  </View>
+export const ParentTypes = (args) => (
+  <EachParentType {...args}>
+    {({ label }) => <Template {...args} key={label} text={label} />}
+  </EachParentType>
 )
-A11yTextInRow.args = defaultArgs
+ParentTypes.args = defaultArgs
+ParentTypes.parameters = parentTypesParams
 
 const styles = StyleSheet.create({
   // Use borders so any hairline gaps created by A11yText are visible

package/stories/ActivityIndicator/ActivityIndicator.stories.jsx

@@ -1,5 +1,7 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
 import { ActivityIndicator } from '../../lib'
+import { EachParentType, parentTypesParams } from '../supports'
 
 export default {
   title: 'Base/ActivityIndicator',
@@ -9,5 +11,12 @@ export default {
   }
 }
 
-export const Story = (args) => <ActivityIndicator {...args} />
-Story.storyName = 'ActivityIndicator'
+export const Default = (args) => <ActivityIndicator {...args} />
+Default.storyName = 'ActivityIndicator'
+
+export const ParentTypes = (args) => (
+  <EachParentType {...args}>
+    {({ label }) => <ActivityIndicator {...args} label={label} />}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams

package/stories/Box/Box.stories.jsx

@@ -2,8 +2,14 @@
 import React from 'react'
 
 import { View, StyleSheet } from 'react-native'
-import { Box } from '../../lib'
-import { spacingObjectArg, Container, Placeholder } from '../supports'
+import { Box, Typography } from '../../lib'
+import {
+  spacingObjectArg,
+  Container,
+  Placeholder,
+  EachParentType,
+  parentTypesParams
+} from '../supports'
 
 export default {
   title: 'Base/Box',
@@ -70,6 +76,13 @@ const ScrollTemplate = (args) => (
 const styles = StyleSheet.create({
   fixedHeight: { height: 200, overflow: 'hidden' }
 })
+
+export const Default = (args) => <Box {...args} />
+Default.storyName = 'Box'
+Default.args = { children: <Typography>Box</Typography> }
+// By default the JSX object is shown as a huge human-unreadable JSON tree control; turn it off
+Default.argTypes = { children: { control: { disable: true } } }
+
 export const Top = Template.bind({})
 Top.args = {
   top: spacingObjectArg
@@ -114,3 +127,17 @@ export const NoScroll = ScrollTemplate.bind({})
 NoScroll.args = {
   scroll: false
 }
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="Box" {...args}>
+    {({ label, variant }) => (
+      <Container key={label} margin={0} padding={0} borderWidth={1} dark>
+        <Box {...args} variant={variant}>
+          <Placeholder>{label}</Placeholder>
+        </Box>
+      </Container>
+    )}
+  </EachParentType>
+)
+ParentTypes.args = { space: 2 }
+ParentTypes.parameters = parentTypesParams

package/stories/Button/Button.stories.jsx

@@ -1,9 +1,11 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
-import { Button as ButtonComponent, useTheme } from '../../lib'
-import { Container, useVariants, parentTypes } from '../supports'
+import { Button, useTheme } from '../../lib'
+import { Container, useVariants, EachParentType, parentTypesParams } from '../supports'
 import { getComponentTheme } from '../../lib/ThemeProvider/utils'
 
-export const Button = ButtonComponent
+export const Default = (args) => <Button {...args} />
+Default.storyName = 'Button'
 
 const defaultLabel = "I'm a button"
 
@@ -14,7 +16,8 @@ export default {
     // eslint-disable-next-line no-console
     onPress: () => console.log('Button pressed'),
     children: defaultLabel,
-    variant: {} // @TODO work out why this isn't coming from jsdoc
+    variant: {}, // @TODO work out why this isn't coming from jsdoc
+    tokens: {}
   }
 }
 
@@ -52,20 +55,13 @@ LongLabelButtonVariants.args = {
   children: 'This button has a label that is much longer than is considered advisable'
 }
 
-export const ButtonParentTypes = (args) => {
-  const variants = useVariants('Button')
-  return Object.entries(parentTypes).map(([parentLabel, ParentType]) => (
-    <Container borderWidth={1} key={parentLabel} offWhite>
-      <ParentType>
-        {variants.map(([key, value, variantLabel]) => {
-          const label = `${parentLabel}: ${variantLabel}`
-          return (
-            <Button {...args} key={label} variant={{ [key]: value }}>
-              {label}
-            </Button>
-          )
-        })}
-      </ParentType>
-    </Container>
-  ))
-}
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="Button" {...args}>
+    {({ label, variant }) => (
+      <Button {...args} key={label} variant={variant}>
+        {label}
+      </Button>
+    )}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams

package/stories/Button/ButtonGroup.stories.jsx

@@ -59,7 +59,8 @@ const ControlledTemplate = ({ values, ...args }) => {
 
 ControlledTemplate.propTypes = ButtonGroup.propTypes
 
-export const ButtonGroupMaxOne = UncontrolledTemplate.bind({})
+export const Default = UncontrolledTemplate.bind({})
+Default.storyName = 'ButtonGroup'
 
 export const ButtonGroupMaxThree = UncontrolledTemplate.bind({})
 ButtonGroupMaxThree.args = { maxValues: 3 }

package/stories/Button/ButtonLink.stories.jsx

@@ -6,7 +6,7 @@ export default {
   title: 'Base/ButtonLink',
   component: ButtonLink,
   args: {
-    label: "I'm a button link",
+    children: "I'm a button link",
     href: 'https://telus.com',
     target: '_blank',
     rel: 'nofollow'
@@ -18,11 +18,13 @@ const Template = (args) => {
   return variants.map(([key, value, label]) => (
     <Container key={`${key}:${value}`} dark={key === 'inverse'}>
       <ButtonLink {...args} href="https://telus.com" variant={{ [key]: value }}>
-        {args.label || `Button ${label}`}
+        {args.label || `ButtonLink ${label}`}
       </ButtonLink>
     </Container>
   ))
 }
 
-export const ButtonLinkStory = Template.bind({})
-ButtonLinkStory.storyName = 'ButtonLink'
+export const Default = (args) => <ButtonLink {...args} />
+Default.storyName = 'ButtonLink'
+
+export const Variants = Template.bind({})

package/stories/Card/Card.stories.jsx

@@ -1,8 +1,9 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react'
 import { StyleSheet, Text, View } from 'react-native'
 
 import { Card } from '../../lib'
-import { Container, useVariants } from '../supports'
+import { Container, useVariants, EachParentType, parentTypesParams } from '../supports'
 
 export default {
   title: 'Base/Card',
@@ -48,3 +49,14 @@ export const CardVariants = (args) => {
 
   return cardVariants
 }
+
+export const ParentTypes = (args) => (
+  <EachParentType componentThemeName="Card" {...args}>
+    {({ label, variant }) => (
+      <Card {...args} variant={variant}>
+        <Text>{label}</Text>
+      </Card>
+    )}
+  </EachParentType>
+)
+ParentTypes.parameters = parentTypesParams