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

package/stories/Progress/Progress.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 
-import { Progress, StackView, Typography } from '../../lib'
+import { Progress, StackView, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {

package/stories/Radio/Radio.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 
-import { Radio, RadioGroup, Typography } from '../../lib'
+import { Radio, RadioGroup, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {

package/stories/RadioCard/RadioCard.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 
-import { RadioCard, RadioCardGroup, Typography } from '../../lib'
+import { RadioCard, RadioCardGroup, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export default {

package/stories/Search/Search.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { Search } from '../../lib'
+import { Search } from '../../src'
 
 export default {
   title: 'Base/Search',

package/stories/Select/Select.stories.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import { Text } from 'react-native'
 
-import { Select } from '../../lib'
+import { Select } from '../../src'
 
 export default {
   title: 'Base/Select',

package/stories/SideNav/SideNav.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 import PropTypes from 'prop-types'
-import { SideNav } from '../../lib'
+import { SideNav } from '../../src'
 import { EachParentType, parentTypesParams } from '../supports'
 
 export default {

package/stories/SideNav/SideNavItem.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SideNav } from '../../lib'
+import { SideNav } from '../../src'
 
 export default {
   title: 'Base/SideNav/Item',

package/stories/SideNav/SideNavItemsGroup.stories.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { SideNav } from '../../lib'
+import { SideNav } from '../../src'
 
 export default {
   title: 'Base/SideNav/Items Group',

package/stories/Skeleton/Skeleton.stories.jsx

@@ -1,9 +1,9 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react'
 import { View, StyleSheet } from 'react-native'
-import StackView from '../../lib/StackView'
+import StackView from '../../src/StackView'
 
-import { Skeleton } from '../../lib'
+import { Skeleton } from '../../src'
 
 export default {
   title: 'Base/Skeleton',

package/stories/Spacer/Spacer.stories.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 
-import { Spacer, Typography } from '../../lib'
+import { Spacer, Typography } from '../../src'
 import { Container } from '../supports'
 
 export default {

package/stories/StackView/StackView.stories.jsx

@@ -3,7 +3,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { View } from 'react-native'
 
-import { StackView, Card, Typography, Button } from '../../lib'
+import { StackView, Card, Typography, Button } from '../../src'
 
 export default {
   title: 'Base/StackView',

package/stories/StackView/StackWrap.stories.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 import { StyleSheet, View } from 'react-native'
 
-import { StackWrap, Button } from '../../lib'
+import { StackWrap, Button } from '../../src'
 
 export default {
   title: 'Base/StackWrap',

package/stories/StepTracker/StepTracker.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
 
-import { Box, Button, StackView, StepTracker } from '../../lib'
+import { Box, Button, StackView, StepTracker } from '../../src'
 
 const steps = [
   'Plans & Addons',

package/stories/Tabs/Tabs.stories.jsx

@@ -2,7 +2,7 @@
 import React, { useState } from 'react'
 import { Platform } from 'react-native'
 
-import { Link, StackView, Tabs, Typography } from '../../lib'
+import { Link, StackView, Tabs, Typography } from '../../src'
 
 export default {
   title: 'Base/Tabs',

package/stories/Tags/Tags.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
 import { View } from 'react-native'
-import { Tags, Typography } from '../../lib'
+import { Tags, Typography } from '../../src'
 import { Container } from '../supports'
 
 const defaultArgs = {

package/stories/TextInput/TextArea.stories.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 
-import { TextArea } from '../../lib'
+import { TextArea } from '../../src'
 import { Container } from '../supports'
 
 export default {

package/stories/TextInput/TextInput.stories.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 
-import { TextInput } from '../../lib'
+import { TextInput } from '../../src'
 import { Container } from '../supports'
 
 export default {

package/stories/ToggleSwitch/ToggleSwitch.stories.jsx

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React, { useState } from 'react'
 import { View } from 'react-native'
-import { ToggleSwitch, Typography } from '../../lib'
+import { ToggleSwitch, Typography } from '../../src'
 import { Container, EachParentType, parentTypesParams } from '../supports'
 
 export const Default = (args) => <ToggleSwitch {...args} />

package/stories/Tooltip/Tooltip.stories.jsx

@@ -3,7 +3,7 @@
 import React from 'react'
 import { View, Text } from 'react-native'
 
-import { Tooltip, Typography } from '../../lib'
+import { Tooltip, Typography } from '../../src'
 import { Container } from '../supports'
 
 export default {

package/stories/TooltipButton/TooltipButton.stories.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { TooltipButton } from '../../lib'
+import { TooltipButton } from '../../src'
 
 export default {
   title: 'Base/TooltipButton',

package/stories/Typography/Typography.stories.jsx

@@ -2,7 +2,7 @@
 import React from 'react'
 
 import { useVariants, Container, EachParentType, parentTypesParams } from '../supports'
-import { Typography } from '../../lib'
+import { Typography } from '../../src'
 
 export const Default = (args) => <Typography {...args} />
 Default.storyName = 'Typography'

package/stories/platform-supports.jsx

@@ -4,7 +4,7 @@
 /* eslint-disable import/prefer-default-export */
 import React from 'react'
 import PropTypes from 'prop-types'
-import { Typography } from '../lib'
+import { Typography } from '../src'
 
 const BlockDiv = ({ children }) => <div>{children}</div>
 BlockDiv.propTypes = { children: PropTypes.node }

package/stories/supports.jsx

@@ -10,8 +10,8 @@ import * as koodoIcons from '@telus-uds/palette-koodo/build/rn/icons'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import * as pmIcons from '@telus-uds/palette-public-mobile/build/rn/icons'
 
-import { useTheme, getComponentTheme } from '../lib/ThemeProvider'
-import { Typography } from '../lib'
+import { useTheme, getComponentTheme } from '../src/ThemeProvider'
+import { Typography } from '../src'
 import { containers as platformContainers } from './platform-supports'
 
 const iconSets = {

package/src/Tabs/HorizontalScroll.jsx

@@ -1,165 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react'
-import PropTypes from 'prop-types'
-import { Platform, StyleSheet, View } from 'react-native'
-
-import { validateThemeTokens, resolveThemeTokens } from '../ThemeProvider'
-import { getTokensSetPropType, selectTokens, a11yProps } from '../utils'
-import ScrollViewEnd from './ScrollViewEnd'
-import { getItemPositionScrollTarget, itemPositionsPropType } from './itemPositions'
-
-const tokenKeys = [
-  'nextIcon',
-  'previousIcon',
-  'gutter',
-  'borderBottomWidth',
-  'borderBottomColor',
-  'buttonClearance'
-]
-export const selectHorizontalScrollTokens = (themeTokens, prefix) =>
-  selectTokens(tokenKeys, themeTokens, prefix)
-
-/**
- * Base component that scrolls horizontally and displays left and right buttons if
- * there is content to the left and the right which can be scrolled to.
- *
- * @TODO revist `ScrollButton` after IconButton is stable.
- */
-const HorizontalScroll = ({ ScrollButton, tokens, itemPositions, children, ...rest }) => {
-  const {
-    nextIcon,
-    previousIcon,
-    gutter,
-    borderBottomWidth,
-    borderBottomColor,
-    buttonClearance = 0
-  } = validateThemeTokens(
-    resolveThemeTokens(tokens),
-    // Allow missing icons
-    getTokensSetPropType(tokenKeys, { partial: true }),
-    'HorizontalScroll'
-  )
-
-  const [containerWidth, setContainerWidth] = useState(0)
-  const [contentWidth, setContentWidth] = useState(0)
-  const handleContentWidth = (width) => setContentWidth(width)
-  const handleContainerLayout = ({
-    nativeEvent: {
-      layout: { width }
-    }
-  }) => setContainerWidth(width)
-
-  // Update the scroll position only when scrolling actions ends to minimally rerender
-  // and update which buttons are conditionally rendered.
-  const [scrollOffset, setScrollOffset] = useState(0)
-  const handleScrollEnd = ({
-    nativeEvent: {
-      contentOffset: { x }
-    }
-  }) => {
-    setScrollOffset(x)
-  }
-
-  const scrollMax = Math.max(0, contentWidth - containerWidth)
-  const showNextButton = scrollOffset < scrollMax
-  const showPreviousButton = scrollOffset > 0
-
-  const scrollRef = useRef(null)
-  const scrollTo = (targetX) => {
-    if (typeof scrollRef.current?.scrollTo === 'function') {
-      const x = getItemPositionScrollTarget(
-        targetX,
-        scrollMax,
-        itemPositions.positions,
-        buttonClearance
-      )
-      scrollRef.current.scrollTo({ x, animated: true })
-
-      if (Platform.OS === 'android') {
-        // React Native calls onScrollMomentumEnd after scrollTo for iOS, but not Android.
-        // See https://github.com/facebook/react-native/issues/26661
-        // There's also no callback for when scrollTo finishes.
-        setTimeout(() => setScrollOffset(x), 300)
-      }
-    }
-  }
-  // Make scrollTo and relevant co-ordinates available to any component with an interest in itemPositions.
-  // ItemPositions is a mutable ref object intended to have its properties mutated without any rerenders.
-  /* eslint-disable-next-line no-param-reassign */
-  itemPositions.scrollTo = scrollTo
-  /* eslint-disable-next-line no-param-reassign */
-  itemPositions.containerWidth = containerWidth
-  /* eslint-disable-next-line no-param-reassign */
-  itemPositions.contentWidth = contentWidth
-  /* eslint-disable-next-line no-param-reassign */
-  itemPositions.scrollOffset = scrollOffset
-
-  const hasWidths = itemPositions.contentWidth > 0 && itemPositions.contentWidth > 0
-  useEffect(() => {
-    if (hasWidths) itemPositions.setIsReady(true)
-    // itemPositions is a ref object so this should occur only when elements' widths are set in state
-  }, [hasWidths, itemPositions])
-
-  // When scrolling, allow clearance around scroll buttons, so e.g. this...
-  // (<-) Item 5   Item 6   Item 7   Item 8   It(->)
-  // ...doesn't scroll like this with Item 9 never being properly visible:
-  // (<-)em 9   Item 10  Item 11  Item 12  Item (->)
-  const scrollDistance = containerWidth - buttonClearance * 2
-  const scrollNext = () => scrollTo(scrollOffset + scrollDistance)
-  const scrollPrevious = () => scrollTo(scrollOffset - scrollDistance)
-
-  const a11y = a11yProps.select(rest)
-
-  // On Web, being scrollable in one direction prevents overflow: visible in the other direction.
-  // Apply a fixed margin gutter that tab highlight effects can overhang without getting trimmed.
-  return (
-    <View style={staticStyles.container}>
-      <ScrollViewEnd
-        onScrollEnd={handleScrollEnd}
-        ref={scrollRef}
-        horizontal
-        onContentSizeChange={handleContentWidth}
-        onLayout={handleContainerLayout}
-        showsHorizontalScrollIndicator={false}
-        contentContainerStyle={[
-          staticStyles.scrollContainer,
-          { marginBottom: gutter, borderBottomWidth, borderBottomColor }
-        ]}
-        {...a11y}
-      >
-        {children}
-      </ScrollViewEnd>
-      {showPreviousButton && (
-        <ScrollButton
-          icon={previousIcon}
-          onPress={scrollPrevious}
-          offset={gutter}
-          direction="previous"
-        />
-      )}
-      {showNextButton && (
-        <ScrollButton icon={nextIcon} onPress={scrollNext} offset={gutter} direction="next" />
-      )}
-    </View>
-  )
-}
-
-const staticStyles = StyleSheet.create({
-  scrollContainer: {
-    // Gives inner container width from content, allowing it to exceed its container's width
-    alignSelf: 'flex-start',
-    flexGrow: 1
-  },
-  container: {
-    // Vertically center the ScrollButtons buttons
-    justifyContent: 'center'
-  }
-})
-
-HorizontalScroll.propTypes = {
-  itemPositions: itemPositionsPropType,
-  ScrollButton: PropTypes.elementType,
-  tokens: getTokensSetPropType(tokenKeys, { allowFunction: true }),
-  children: PropTypes.node
-}
-
-export default HorizontalScroll

package/src/Tabs/TabsScrollButton.jsx

@@ -1,100 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { Pressable, StyleSheet } from 'react-native'
-
-import { useThemeTokensCallback } from '../ThemeProvider'
-import {
-  resolvePressableTokens,
-  selectTokens,
-  variantProp,
-  getTokensPropType,
-  useCopy,
-  copyPropTypes,
-  a11yProps
-} from '../utils'
-import Icon from '../Icon'
-import Typography from '../Typography'
-import dictionary from './dictionary'
-
-const selectButtonStyles = (
-  { borderRadius, backgroundColor, borderColor, borderWidth, padding },
-  direction
-) => [
-  staticStyles.absolute,
-  staticStyles[direction],
-  {
-    borderRadius,
-    backgroundColor,
-    borderColor,
-    borderWidth,
-    padding
-  }
-]
-
-/**
- * Button within a Tabs component showing users that content is available to the left or
- * right, scrolling a screen's worth of content left or right when pressed.
- *
- * This is rendered automatically by `Tabs` and isn't intended be used directly.
- *
- * @TODO when IconButton is complete and stable revisit this and update interaction state styles.
- */
-const TabsScrollButton = ({ direction = 'next', icon, onPress, offset, variant, tokens, copy }) => {
-  const getTokens = useThemeTokensCallback('TabsScrollButton', tokens, variant)
-  const resolveButtonTokens = (pressableState) => resolvePressableTokens(getTokens, pressableState)
-  const getPressableStyle = (pressableState) => [
-    selectButtonStyles(resolveButtonTokens(pressableState), direction),
-    { marginTop: -1 * (offset || 0) }
-  ]
-
-  const getCopy = useCopy({ dictionary, copy })
-  const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText')
-
-  return (
-    <Pressable
-      style={getPressableStyle}
-      onPress={onPress}
-      accessibilityLabel={label}
-      accessibilityRole="button"
-      // For keyboard-tab or screenreader-swipe navigation, users can just go through all items
-      {...a11yProps.nonFocusableProps}
-    >
-      {(pressableState) => {
-        const iconTokens = selectTokens('Icon', resolveButtonTokens(pressableState), 'icon')
-        return icon ? (
-          <Icon icon={icon} tokens={iconTokens} />
-        ) : (
-          <Typography
-            tokens={{ fontSize: iconTokens.size, lineHeight: 1, color: iconTokens.color }}
-          >
-            {direction === 'next' ? '→' : '←'}
-          </Typography>
-        )
-      }}
-    </Pressable>
-  )
-}
-
-const staticStyles = StyleSheet.create({
-  absolute: {
-    position: 'absolute'
-  },
-  previous: {
-    left: 0
-  },
-  next: {
-    right: 0
-  }
-})
-
-TabsScrollButton.propTypes = {
-  tokens: getTokensPropType('TabsScrollButton'),
-  variant: variantProp.propType,
-  copy: copyPropTypes,
-  direction: PropTypes.oneOf(['previous', 'next']),
-  offset: PropTypes.number,
-  icon: PropTypes.elementType,
-  onPress: PropTypes.func.isRequired
-}
-
-export default TabsScrollButton