@telus-uds/components-base 1.93.0 → 1.95.0

package/src/TabBar/TabBar.jsx

@@ -0,0 +1,123 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native'
+import TabBarItem from './TabBarItem'
+import { useThemeTokens } from '../ThemeProvider'
+import { variantProp, getTokensPropType, selectSystemProps, a11yProps, viewProps } from '../utils'
+
+const selectTabBarContainerStyles = ({
+  paddingTop,
+  paddingBottom,
+  borderTopWidth,
+  borderTopColor,
+  backgroundColor
+}) => ({
+  paddingTop,
+  paddingBottom,
+  borderTopWidth,
+  borderTopColor,
+  backgroundColor
+})
+
+const selectTabBarItemContainerStyles = ({ paddingLeft, paddingRight, gap }) => ({
+  paddingLeft,
+  paddingRight,
+  gap
+})
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
+
+/**
+ * TabBar component renders a navigation bar with multiple TabBarItems.
+ * It allows users to switch between different views or sections.
+ *
+ * @component
+ * @example
+ * const items = [
+ *   { id: '1', label: 'Home', icon: <HomeIcon />, iconActive: <HomeActiveIcon /> },
+ *   { id: '2', label: 'Profile', icon: <ProfileIcon />, iconActive: <ProfileActiveIcon /> },
+ * ]
+ * return (
+ *   <TabBar
+ *     items={items}
+ *     initiallySelectedItem="1"
+ *     onChange={(itemId) => console.log(itemId)}
+ *   />
+ * )
+ */
+
+const TabBar = React.forwardRef(
+  ({ items = [], initiallySelectedItem = '0', onChange, variant, tokens, ...rest }, ref) => {
+    const [isSelected, setIsSelected] = React.useState(initiallySelectedItem)
+    const themeTokens = useThemeTokens('TabBar', tokens, variant)
+
+    const handlePress = (itemId) => {
+      setIsSelected(itemId)
+      onChange?.(itemId)
+    }
+
+    return (
+      <View
+        ref={ref}
+        style={[styles.tabBar, selectTabBarContainerStyles(themeTokens)]}
+        {...selectProps(rest)}
+      >
+        <View style={[styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)]}>
+          {items.map((item, index) => (
+            <TabBarItem
+              key={item.id}
+              label={item.label}
+              href={item.href}
+              isSelected={isSelected === item.id}
+              icon={item.icon}
+              iconActive={item.iconActive}
+              onPress={() => handlePress(item.id)}
+              id={`tab-item-${index}`}
+              accessibilityRole="tablist"
+            />
+          ))}
+        </View>
+      </View>
+    )
+  }
+)
+
+TabBar.displayName = 'TabBar'
+
+TabBar.propTypes = {
+  ...selectedSystemPropTypes,
+  /** Array of TabBarItems to be displayed in TabBar */
+  items: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      icon: PropTypes.node,
+      iconActive: PropTypes.node,
+      label: PropTypes.string.isRequired,
+      href: PropTypes.string
+    })
+  ).isRequired,
+  /** Id of the initially selected item. */
+  initiallySelectedItem: PropTypes.number,
+  /** Callback function to handle item selection change. */
+  onChange: PropTypes.func,
+  /** Variant of TabBar for styling purposes. */
+  variant: variantProp.propType,
+  /** Tokens for theming and styling. */
+  tokens: getTokensPropType('TabBar')
+}
+
+const styles = StyleSheet.create({
+  tabBar: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  tabBarItem: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: '100%'
+  }
+})
+
+export default TabBar

package/src/TabBar/TabBarItem.jsx

@@ -0,0 +1,149 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Pressable, View, StyleSheet } from 'react-native'
+import { getTokensPropType, resolvePressableTokens, variantProp } from '../utils'
+import { useThemeTokensCallback } from '../ThemeProvider'
+import Typography from '../Typography'
+import Spacer from '../Spacer'
+
+const selectTypographyStyles = (
+  { fontWeight, color, lineHeight, fontName, activeColor },
+  isSelected
+) => ({
+  fontWeight,
+  color: isSelected ? activeColor : color,
+  lineHeight,
+  fontName
+})
+
+const selectIconContainerStyles = ({ paddingTop, paddingBottom }) => ({
+  paddingTop,
+  paddingBottom,
+  alignItems: 'center'
+})
+
+const selectIconStyles = ({ iconSize, iconColor, activeColor }, isSelected) => ({
+  size: iconSize,
+  color: isSelected ? activeColor : iconColor
+})
+
+const selectContainerStyles = ({ borderRadius, backgroundColor }) => ({
+  borderRadius,
+  backgroundColor,
+  alignSelf: 'center',
+  alignItems: 'center'
+})
+
+const TabBarItem = React.forwardRef(
+  (
+    {
+      href,
+      variant,
+      tokens,
+      label,
+      isSelected,
+      id,
+      onPress,
+      icon: IconComponent,
+      iconActive: IconActiveComponent,
+      accessibilityRole = 'tab'
+    },
+    ref
+  ) => {
+    const getTokens = useThemeTokensCallback('TabBarItem', tokens, variant)
+
+    const getPressableStyle = ({ pressed, focused, hovered }) => {
+      const resolvedTokens = resolvePressableTokens(
+        getTokens,
+        { pressed, focused, hovered },
+        { isSelected }
+      )
+      return {
+        ...resolvedTokens,
+        outline: 'none' // removes the default browser :focus outline
+      }
+    }
+
+    return (
+      <Pressable
+        ref={ref}
+        href={href}
+        nativeID={id}
+        onPress={onPress}
+        style={({ pressed, focused, hovered }) => [
+          styles.flexContainer,
+          getPressableStyle({ pressed, focused, hovered })
+        ]}
+        accessibilityRole={accessibilityRole}
+        testID={id}
+      >
+        {(pressableState) => {
+          const resolvedTokens = getPressableStyle(pressableState)
+
+          return (
+            <View style={selectContainerStyles(resolvedTokens)}>
+              <View style={[selectIconContainerStyles(resolvedTokens), styles.iconContainer]}>
+                {isSelected
+                  ? IconActiveComponent && (
+                      <IconActiveComponent {...selectIconStyles(resolvedTokens, isSelected)} />
+                    )
+                  : IconComponent && <IconComponent {...selectIconStyles(resolvedTokens)} />}
+              </View>
+              <Spacer space={1} />
+              <Typography
+                variant={{ size: 'micro' }}
+                tokens={selectTypographyStyles(resolvedTokens, isSelected)}
+                align="center"
+              >
+                {label}
+              </Typography>
+              <Spacer space={1} />
+            </View>
+          )
+        }}
+      </Pressable>
+    )
+  }
+)
+
+TabBarItem.displayName = 'TabBarItem'
+
+TabBarItem.propTypes = {
+  /** The icon to be displayed when the item is not selected. */
+  icon: PropTypes.elementType,
+  /** The icon to be displayed when the item is selected. */
+  iconActive: PropTypes.elementType,
+  /** Tokens for theming and styling the TabBarItem. */
+  tokens: getTokensPropType('TabBarItem'),
+  /** Variant of the TabBarItem for styling purposes. */
+  variant: variantProp.propType,
+  /** Callback function to handle press events. */
+  onPress: PropTypes.func,
+  /** URL to navigate to when the item is pressed. */
+  href: PropTypes.string,
+  /** Indicates whether the item is selected. */
+  isSelected: PropTypes.bool,
+  /** Unique identifier for the item. */
+  id: PropTypes.string,
+  /** Label text for the item. */
+  label: PropTypes.string.isRequired,
+  /** Accessibility role for the item. */
+  accessibilityRole: PropTypes.string
+}
+
+const styles = StyleSheet.create({
+  flexContainer: {
+    flex: 1,
+    alignItems: 'center'
+  },
+  iconContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    minWidth: 44,
+    minHeight: 40,
+    aspectRatio: 1.1
+  }
+})
+
+export default TabBarItem

package/src/TabBar/index.js

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

package/src/TextInput/TextInputBase.jsx

@@ -61,7 +61,7 @@ const selectInputStyles = (
     typeof value === 'number' ? Math.max(0, value - borderWidth) : value
 
   const textStyles = applyTextStyles({
-    fontName,
+    fontName: isPassword ? undefined : fontName, // In this case, we don't want to apply the fontName to the input if it's a password because Monotype don't have support for the masked characters in mobile.
     fontSize,
     lineHeight,
     fontWeight,

package/src/Tooltip/getTooltipPosition.js

@@ -1,8 +1,8 @@
-function normalizePosition(position) {
+function getAbsolutePosition(position) {
   const { left, right, bottom, top, width, ...rest } = position
 
   // adjust the coordinates so that it fits within the window
-  const normalized = {
+  const finalPosition = {
     left: Math.max(0, left),
     right: Math.max(0, right),
     top: Math.max(0, top),
@@ -12,21 +12,20 @@ function normalizePosition(position) {
   const getAbsoluteDiff = (value1, value2) => Math.abs(Math.abs(value1) - Math.abs(value2))
 
   // adjust the width by whatever has been subtracted from left or right
-  normalized.width =
+  finalPosition.width =
     width -
-    Math.abs(getAbsoluteDiff(left, normalized.left) - getAbsoluteDiff(right, normalized.right))
+    Math.abs(
+      getAbsoluteDiff(left, finalPosition.left) - getAbsoluteDiff(right, finalPosition.right)
+    )
 
-  if (normalized.top !== top) {
-    normalized.bottom += normalized.top - top
+  if (finalPosition.top !== top) {
+    finalPosition.bottom += finalPosition.top - top
   }
 
-  const isNormalized =
-    normalized.right !== right || normalized.left !== left || normalized.top !== top
-
   return {
-    ...normalized,
+    ...finalPosition,
     ...rest,
-    isNormalized
+    isNormalized: false
   }
 }
 
@@ -151,7 +150,7 @@ function getTooltipPosition(
 
   // prefer 'below' over 'above', since we can always expand the document downwards,
   // and 'above' might cause issues on small viewports with large tooltips
-  return normalizePosition(
+  return getAbsolutePosition(
     leastOverflowing.position === 'above'
       ? findRectByPosition('below', boundingRects)
       : leastOverflowing

package/src/index.js

@@ -8,12 +8,14 @@ export * from './Button'
 export { default as Card, PressableCardBase } from './Card'
 export { default as CardGroup } from './CardGroup'
 export * from './Carousel'
+export { default as FileUpload } from './FileUpload'
 export { default as Listbox } from './Listbox'
 export { default as Checkbox } from './Checkbox'
 export * from './Checkbox'
 export { default as CheckboxCard } from './CheckboxCard'
 export { default as CheckboxCardGroup } from './CheckboxCardGroup'
 export { default as ColourToggle } from './ColourToggle'
+export { default as DownloadApp } from './DownloadApp'
 export { default as Divider } from './Divider'
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
 export { default as Feedback } from './Feedback'
@@ -56,6 +58,7 @@ export * from './StackView'
 export { default as Status } from './Status'
 export { default as StepTracker } from './StepTracker'
 export { default as Tabs } from './Tabs'
+export { default as TabBar } from './TabBar'
 export { default as Tags } from './Tags'
 export * from './TextInput'
 export { default as Timeline } from './Timeline'

package/src/utils/convertFromMegaByteToByte.js

@@ -0,0 +1,11 @@
+/**
+ * Converts a value from megabytes to bytes.
+ *
+ * @param {number} megaByte - The value in megabytes to be converted.
+ * @returns {number} The converted value in bytes.
+ */
+const BYTES_IN_A_MEGABYTE = 1024 * 1024
+
+export default function convertFromMegaByteToByte(megaByte) {
+  return megaByte * BYTES_IN_A_MEGABYTE
+}

package/src/utils/formatImageSource.js

@@ -0,0 +1,29 @@
+// react native source for Image and ImageBackground needs proper formatting to work
+// remote sources that start with 'http' and base64 encoded sources that start with 'data:' need be wrapped in uri when passing source prop for Image and ImageBackground ie. source={ uri: image }
+// local source for image can be passed normally without wrapping in uri ie. source={ image }
+
+/**
+ *  example code from react native docs: https://reactnative.dev/docs/imagebackground
+ *
+ *  const image = {uri: 'https://legacy.reactjs.org/logo-og.png'}
+ *
+ *  const App = () => (
+ *    <View style={styles.container}>
+ *      <ImageBackground source={image} resizeMode="cover" style={styles.image}>
+ *        <Text style={styles.text}>Inside</Text>
+ *      </ImageBackground>
+ *    </View>
+ *  )
+ */
+
+/**
+ * Formats the image source for React Native Image and ImageBackground components.
+ * @param {string|number} source - The image source, either a URI string or a number (when a local image source is bundled in IOS or Android app).
+ * @returns {object|string} - The formatted image source.
+ */
+const formatImageSource = (source) =>
+  typeof source === 'string' && (source.startsWith('http') || source.startsWith('data:'))
+    ? { uri: source }
+    : source
+
+export default formatImageSource

package/src/utils/index.js

@@ -21,3 +21,5 @@ export { default as containUniqueFields } from './containUniqueFields'
 export { default as BaseView } from './BaseView'
 export { default as htmlAttrs } from './htmlAttrs'
 export { transformGradient } from './transformGradient'
+export { default as convertFromMegaByteToByte } from './convertFromMegaByteToByte'
+export { default as formatImageSource } from './formatImageSource'