@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/esm/Typography/Typography.js

@@ -0,0 +1,265 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import { useResponsiveThemeTokens, useTheme, useThemeTokens } from '../ThemeProvider';
+import { applyTextStyles } from '../ThemeProvider/utils';
+import { a11yProps, variantProp, getTokensPropType, getMaxFontMultiplier, headingTags, selectSystemProps, textTags, textProps, viewProps, getA11yPropsFromHtmlTag, StyleSheet, createMediaQueryStyles } from '../utils';
+import { useViewport } from '../ViewportProvider';
+/**
+ * @typedef {import('../utils/a11y/semantics').TextTag} TextTag
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectContainerProps, selectedContainerPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const [selectTextProps, selectedTextPropTypes] = selectSystemProps([textProps]);
+const selectTextStyles = (_ref, themeOptions) => {
+  let {
+    fontWeight,
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    textAlign,
+    textTransform,
+    letterSpacing,
+    textDecorationLine,
+    gradient
+  } = _ref;
+  return applyTextStyles({
+    fontWeight,
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    themeOptions,
+    textAlign,
+    textTransform,
+    letterSpacing,
+    textDecorationLine,
+    gradient
+  });
+};
+const HALF_FONT_SIZE = 2;
+const QUARTER_FONT_SIZE = 4;
+const selectMobileSubSupStyles = (_ref2, type) => {
+  let {
+    fontSize
+  } = _ref2;
+  return {
+    fontSize: fontSize / HALF_FONT_SIZE,
+    lineHeight: fontSize,
+    position: 'relative',
+    top: type === 'sub' ? fontSize / QUARTER_FONT_SIZE : -fontSize / QUARTER_FONT_SIZE
+  };
+};
+
+// General-purpose flexible theme-neutral base component for text
+const Typography = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    children,
+    variant,
+    heading,
+    tag = typeof heading === 'string' ? heading : undefined,
+    accessibilityRole = heading === true ? 'header' : undefined,
+    block = false,
+    align = undefined,
+    tokens,
+    dataSet,
+    strikeThrough = false,
+    ...rest
+  } = _ref3;
+  const viewport = useViewport();
+  const {
+    themeOptions
+  } = useTheme();
+  const {
+    enableMediaQueryStyleSheet
+  } = themeOptions;
+  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
+  const themeTokens = useTokens('Typography', tokens, variant, !enableMediaQueryStyleSheet && {
+    viewport
+  });
+  const maxFontSizeMultiplier = enableMediaQueryStyleSheet ? getMaxFontMultiplier(themeTokens[viewport]) : getMaxFontMultiplier(themeTokens);
+  const textDecorationLine = strikeThrough ? 'line-through' : 'none';
+  const generateGradientString = gradientObj => {
+    let gradientStr = '';
+    const {
+      type,
+      angle,
+      stops: [stopOne, stopTwo],
+      specification
+    } = gradientObj;
+    if (type === 'radial') {
+      gradientStr = `radial-gradient(${specification}`;
+      gradientStr += `, ${stopOne.color} ${stopOne.stop * 100}%, ${stopTwo.color} ${stopTwo.stop * 100}%`;
+    } else if (type === 'linear') {
+      gradientStr = `linear-gradient(${angle}deg`;
+      if (angle === 135) {
+        gradientStr += `, ${stopOne.color}, 75%, ${stopTwo.color}`;
+      } else {
+        gradientStr += `, ${stopOne.color}, ${stopTwo.color}`;
+      }
+    }
+    gradientStr += ')';
+    return gradientStr;
+  };
+  const getStyleWithGradient = styles => {
+    return styles.gradient ? {
+      ...styles,
+      color: 'transparent',
+      backgroundImage: generateGradientString(styles.gradient),
+      backgroundClip: 'text'
+    } : styles;
+  };
+  let textStyles;
+  let mediaIds;
+  if (enableMediaQueryStyleSheet) {
+    const transformedThemeTokens = Object.entries(themeTokens).reduce((acc, _ref4) => {
+      let [vp, viewportTokens] = _ref4;
+      acc[vp] = selectTextStyles({
+        textAlign: align,
+        textDecorationLine,
+        ...viewportTokens
+      }, themeOptions);
+      if (themeTokens[vp].gradient) {
+        const tokensWithGradient = {
+          ...acc[vp],
+          color: 'transparent',
+          backgroundImage: generateGradientString(themeTokens[vp].gradient),
+          backgroundClip: 'text'
+        };
+        return {
+          ...acc,
+          [vp]: tokensWithGradient
+        };
+      }
+      return acc;
+    }, {});
+    const mediaQueryStyles = createMediaQueryStyles(transformedThemeTokens);
+    const {
+      ids,
+      styles
+    } = StyleSheet.create({
+      text: mediaQueryStyles
+    });
+    textStyles = styles.text;
+    mediaIds = ids.text;
+  } else {
+    textStyles = selectTextStyles({
+      textAlign: align,
+      textDecorationLine,
+      ...themeTokens
+    }, themeOptions);
+  }
+  const resolvedTextProps = {
+    ...selectTextProps(rest),
+    maxFontSizeMultiplier
+  };
+  const containerProps = {
+    accessibilityRole,
+    ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
+    ...selectContainerProps(rest)
+  };
+  const resetTagStyling = child => {
+    if (typeof child !== 'object' || !(child?.type === 'sub' || child?.type === 'sup')) {
+      return child;
+    }
+    const childStyles = child?.props?.style || {};
+    const supFontSize = childStyles.fontSize ?? themeTokens.superScriptFontSize;
+    const isMobile = Platform.OS === 'ios' || Platform.OS === 'android';
+    const isSubSup = child?.type === 'sub' || child?.type === 'sup';
+    const mobileStyles = isMobile && isSubSup ? selectMobileSubSupStyles(themeTokens, child?.type) : {};
+    const defaultStyles = !isMobile && isSubSup ? {
+      fontSize: supFontSize,
+      lineHeight: 0
+    } : {};
+    const sanitizedChild = /*#__PURE__*/React.cloneElement(isMobile && isSubSup ? /*#__PURE__*/_jsx(View, {
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [childStyles, mobileStyles],
+        children: child.props.children
+      })
+    }) : child, {
+      style: {
+        ...childStyles,
+        ...defaultStyles
+      }
+    });
+    return sanitizedChild;
+  };
+  const sanitizeChildren = () => {
+    if (Array.isArray(children)) {
+      return children.map(resetTagStyling);
+    }
+    return resetTagStyling(children);
+  };
+  const dataSetValue = mediaIds ? {
+    media: mediaIds,
+    ...dataSet
+  } : dataSet;
+  return block ? /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    ...containerProps,
+    children: /*#__PURE__*/_jsx(Text, {
+      ...resolvedTextProps,
+      style: getStyleWithGradient(textStyles),
+      dataSet: dataSetValue,
+      children: sanitizeChildren(children)
+    })
+  }) : /*#__PURE__*/_jsx(Text, {
+    ref: ref,
+    ...containerProps,
+    ...resolvedTextProps,
+    style: getStyleWithGradient(textStyles),
+    dataSet: dataSetValue,
+    children: sanitizeChildren(children)
+  });
+});
+Typography.displayName = 'Typography';
+Typography.propTypes = {
+  ...selectedContainerPropTypes,
+  ...selectedTextPropTypes,
+  tokens: getTokensPropType('Typography'),
+  variant: variantProp.propType,
+  /**
+   * Renders the text with "text-decoration: 'line-through'" applied.
+   */
+  strikeThrough: PropTypes.bool,
+  /**
+   * Renders the text as a semantic heading. If a html heading tag is provided, uses that tag on Web.
+   *
+   * Does not affect styling: <Typography heading="h2"> will render a <h2> that looks like plain text.
+   * Use both `heading` and `variant` props to render semantic headings that look like headings.
+   *
+   * In native apps, if this is `true` or any html heading tag string and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  heading: PropTypes.oneOf([...headingTags, true]),
+  /**
+   * Optional semantic HTML tag, to apply to the text on web. Does not change styling.
+   *
+   * `tag` and `heading` props set the same thing, so shouldn't be used together (`tag` overrides `heading`).
+   *
+   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  tag: PropTypes.oneOf(textTags),
+  /**
+   * If true, forces the element to behave as a View block even if nested in other text
+   */
+  block: PropTypes.bool,
+  /**
+   * Works the same as css text-align, note that RN doesn't support "start" or "end" (see https://reactnative.dev/docs/text-style-props#textalign)
+   * Justify is known to make text harder to read, especially for people with dyslexia (see https://developer.mozilla.org/en-US/docs/Web/CSS/text-align#accessibility_concerns)
+   */
+  align: PropTypes.oneOf(['auto', 'left', 'right', 'center', 'justify']),
+  /**
+   * Same children allowed as a React Native <Text> node
+   */
+  children: PropTypes.node,
+  /**
+   * Data attributes to be added to the element
+   */
+  dataSet: PropTypes.object
+};
+export default Typography;

package/lib/esm/Validator/Validator.js

@@ -0,0 +1,221 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Platform from "react-native-web/dist/exports/Platform";
+import { inputSupportsProps, selectSystemProps } from '../utils';
+import { TextInput } from '../TextInput';
+import StackView from '../StackView';
+import InputSupports from '../InputSupports';
+import { useThemeTokens } from '../ThemeProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([inputSupportsProps]);
+const selectCodeTextInputTokens = _ref => {
+  let {
+    outerBorderColor,
+    outerBackgroundColor
+  } = _ref;
+  return {
+    outerBorderColor,
+    outerBackgroundColor,
+    icon: null
+  };
+};
+const Validator = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    value = '',
+    inactive,
+    mask = '',
+    onChange,
+    tokens = {},
+    variant = {},
+    ...rest
+  } = _ref2;
+  const defaultRef = React.useRef();
+  const codeRef = ref ?? defaultRef;
+  const {
+    supportsProps
+  } = selectProps(rest);
+  const strValidation = supportsProps.validation;
+  const [individualCodes, setIndividualCodes] = React.useState({});
+  const [text, setText] = React.useState(value);
+  const validatorsLength = 6;
+  const prefix = 'code';
+  const sufixValidation = 'Validation';
+  const [isHover, setIsHover] = React.useState(false);
+  const handleMouseOver = () => {
+    setIsHover(true);
+  };
+  const handleMouseOut = () => {
+    setIsHover(false);
+  };
+  const themeTokens = useThemeTokens('TextInput', tokens, variant, {
+    hover: isHover
+  });
+  const [codeReferences, singleCodes] = React.useMemo(() => {
+    const codes = [];
+    const valueCodes = {};
+    for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+      codes[prefix + i] = /*#__PURE__*/React.createRef();
+      valueCodes[prefix + i] = '';
+      valueCodes[prefix + i + sufixValidation] = '';
+    }
+    return [codes, valueCodes];
+  }, []);
+  const handleSingleCodes = (codeId, val, validation) => {
+    singleCodes[codeId] = val;
+    singleCodes[codeId + sufixValidation] = validation;
+    /* eslint-disable no-unused-expressions */
+    setIndividualCodes({
+      ...individualCodes,
+      [codeId]: val
+    });
+  };
+  const changeDataMasking = boxElement => {
+    let charMasking = '';
+    const element = boxElement;
+    if (mask && mask.length === 1) charMasking = mask;else if (mask && mask.length > 1) charMasking = mask.substring(0, 1);
+    if (charMasking) element.value = charMasking;
+  };
+  const handleChangeCode = () => {
+    let code = '';
+    for (let i = 0; i < validatorsLength; i += 1) code += singleCodes[prefix + i];
+    if (typeof onChange === 'function') onChange(code, singleCodes);
+  };
+  const handleChangeCodeValues = (event, codeId, nextIndex) => {
+    const codeElement = codeReferences[codeId]?.current;
+    const val = event.nativeEvent?.value || event.target?.value;
+    if (Number(val).toString() === 'NaN') {
+      codeElement.value = singleCodes[codeId] ?? '';
+      return;
+    }
+    handleSingleCodes(codeId, codeElement?.value ?? singleCodes[codeId], 'success');
+    handleChangeCode();
+    if (nextIndex === validatorsLength) {
+      codeElement.blur();
+      changeDataMasking(codeElement);
+      return;
+    }
+    if (codeElement?.value?.length > 0) {
+      codeReferences[prefix + nextIndex].current.focus();
+      changeDataMasking(codeElement);
+    }
+  };
+  const handleKeyPress = (event, currentIndex, previousIndex) => {
+    if (!(event.keyCode === 8 || event.code === 'Backspace')) return;
+    if (currentIndex > 0) {
+      codeReferences[prefix + currentIndex].current.value = '';
+      codeReferences[prefix + previousIndex].current.focus();
+    }
+    handleSingleCodes(prefix + currentIndex, '', '');
+    handleChangeCode();
+  };
+  const getCodeComponents = () => {
+    const components = [];
+    for (let i = 0; validatorsLength && i < validatorsLength; i += 1) {
+      const codeId = prefix + i;
+      const codeInputProps = {
+        nativeID: codeId,
+        keyboardType: 'numeric',
+        ref: codeReferences[codeId] ?? null,
+        validation: strValidation || singleCodes[codeId + sufixValidation],
+        tokens: selectCodeTextInputTokens(themeTokens),
+        onFocus: () => codeReferences[codeId]?.current?.select() ?? null,
+        onKeyPress: event => handleKeyPress(event, i, i - 1),
+        onMouseOver: handleMouseOver,
+        onMouseOut: handleMouseOut,
+        inactive
+      };
+      codeInputProps.validation || delete codeInputProps.validation;
+      components.push(/*#__PURE__*/_jsx(View, {
+        style: staticStyles.codeInputWidth,
+        children: /*#__PURE__*/_jsx(TextInput, {
+          ...codeInputProps
+        })
+      }, codeId));
+    }
+    return components;
+  };
+  React.useEffect(() => {
+    /* eslint-disable no-unused-expressions */
+    if (Number(value).toString() !== 'NaN') setText(value);
+  }, [value]);
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  React.useEffect(() => {
+    for (let i = 0; i < validatorsLength; i += 1) {
+      if (mask && text[i]) codeReferences[prefix + i].current.value = mask;else codeReferences[prefix + i].current.value = text[i] ?? '';
+      handleSingleCodes(prefix + i, text[i] ?? '', text[i] ? 'success' : '');
+    }
+  }, [text]);
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  React.useEffect(() => {
+    const handlePasteCode = event => {
+      setText('');
+      const clipBoardText = event.clipboardData.getData('text');
+      if (Number(clipBoardText).toString() !== 'NaN') setText(clipBoardText);
+    };
+    const handleCopy = event => {
+      let clipBoardText = '';
+      for (let i = 0; i < validatorsLength; i += 1) singleCodes[prefix + i] && (clipBoardText += singleCodes[prefix + i]);
+      event.clipboardData.setData('text/plain', clipBoardText);
+      event.preventDefault();
+    };
+    if (Platform.OS === 'web') {
+      for (let i = 0; i < validatorsLength; i += 1) {
+        codeReferences[prefix + i].current.addEventListener('paste', handlePasteCode);
+        codeReferences[prefix + i].current.addEventListener('copy', handleCopy);
+        codeReferences[prefix + i].current.addEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
+      }
+    }
+    return () => {
+      if (Platform.oldValue === 'web') {
+        for (let i = 0; i < validatorsLength; i += 1) {
+          codeReferences[prefix + i]?.current?.removeEventListener('paste', handlePasteCode);
+          codeReferences[prefix + i]?.current?.removeEventListener('copy', handleCopy);
+          codeReferences[prefix + i]?.current?.removeEventListener('input', event => handleChangeCodeValues(event, prefix + i, i + 1));
+        }
+      }
+    };
+  }, []);
+  return /*#__PURE__*/_jsx(InputSupports, {
+    ...supportsProps,
+    feedbackProps: {
+      ...rest?.feedbackProps,
+      showFeedbackIcon: true
+    },
+    children: /*#__PURE__*/_jsx(StackView, {
+      space: 2,
+      direction: "row",
+      ref: codeRef,
+      children: getCodeComponents()
+    })
+  });
+});
+Validator.displayName = 'Validator';
+Validator.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The value is a 6-digit code, may be only numeric characters, non numeric character aren't renderize
+   */
+  value: PropTypes.string,
+  /**
+   * If true, the component is inactive and non editable.
+   */
+  inactive: PropTypes.bool,
+  /**
+   * Show masked characters and obscure the actual input. For example: '*'
+   */
+  mask: PropTypes.string,
+  /**
+   * 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 Validator;
+const staticStyles = StyleSheet.create({
+  codeInputWidth: {
+    width: 43
+  }
+});

package/lib/esm/ViewportProvider/useViewportListener.js

@@ -0,0 +1,37 @@
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+import { viewports } from '@telus-uds/system-constants';
+import useSafeLayoutEffect from '../utils/useSafeLayoutEffect';
+
+// Use Dimensions instead of useWindowDimensions because useWindowDimensions forces context
+// to update on every pixel change during window resize; but we only want rerenders to occur
+// when a viewport threshold has been crossed.
+const lookupViewport = () => viewports.select(Dimensions.get('window').width);
+
+/**
+ * When client-side rendering, immediately set the viewport to the correct value as a layout effect so
+ * if the viewport isn't the smallest, any SSR-rendered components rerender correctly before anything
+ * is shown to the user. Then bind events to update the viewport if it changes.
+ */
+const useViewportListener = setViewport => {
+  useSafeLayoutEffect(() => {
+    setViewport(lookupViewport());
+    const onChange = _ref => {
+      let {
+        window
+      } = _ref;
+      return setViewport(viewports.select(window.width));
+    };
+    const listener = Dimensions.addEventListener('change', onChange);
+    return () => {
+      if (typeof listener?.remove === 'function') {
+        // Can't just return listener.remove because listener.emitter disappears, causing an internal error.
+        // See https://github.com/facebook/react-native/issues/34508
+        listener.remove();
+        // From RN 0.65.0, Dimensions.removeEventListener is deprecated for `remove` on addEventListener return value
+      } else if (typeof Dimensions.removeEventListener === 'function') {
+        Dimensions.removeEventListener('change', onChange);
+      }
+    };
+  }, [setViewport]);
+};
+export default useViewportListener;

package/lib/esm/index.js

@@ -0,0 +1,72 @@
+export { default as A11yText } from './A11yText';
+export { default as ActionCard } from './ActionCard';
+export { default as ActivityIndicator } from './ActivityIndicator';
+export { default as Autocomplete } from './Autocomplete';
+export { default as Box } from './Box';
+export { default as Badge } from './Badge';
+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 ExpandCollapseMini } from './ExpandCollapseMini';
+export { default as Feedback } from './Feedback';
+export { default as Fieldset } from './Fieldset';
+export { default as FlexGrid } from './FlexGrid';
+export { default as Footnote } from './Footnote';
+export { default as HorizontalScroll, horizontalScrollUtils, HorizontalScrollButton } from './HorizontalScroll';
+export { default as Icon, IconText, iconComponentPropTypes } from './Icon';
+export { default as IconButton } from './IconButton';
+export { default as InputLabel } from './InputLabel';
+export { default as InputSupports } from './InputSupports';
+export * from './Link';
+export { default as List, ListItem, ListBase } from './List';
+export { default as Modal } from './Modal';
+export { default as MultiSelectFilter } from './MultiSelectFilter';
+export { default as Notification } from './Notification';
+export { default as OrderedList } from './OrderedList';
+export { default as Pagination } from './Pagination';
+export { default as PriceLockup } from './PriceLockup';
+export { default as ProductCard } from './ProductCard';
+export { default as ProductCardGroup } from './ProductCardGroup';
+export { default as Progress } from './Progress';
+export { default as QuickLinks } from './QuickLinks';
+export { default as QuickLinksFeature } from './QuickLinksFeature';
+export { default as Radio, RadioGroup } from './Radio';
+export { default as RadioCard, RadioCardGroup } from './RadioCard';
+export { default as Responsive } from './Responsive';
+export { default as Search } from './Search';
+export { default as Select } from './Select';
+export { default as SideNav } from './SideNav';
+export { default as Skeleton } from './Skeleton';
+export { default as SkipLink } from './SkipLink';
+export { default as Spacer } from './Spacer';
+export { default as StackView, StackWrap, getStackedContent } 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';
+export * from './ToggleSwitch';
+export { default as Tooltip } from './Tooltip';
+export { default as TooltipButton } from './TooltipButton';
+export { default as Typography } from './Typography';
+export { default as A11yInfoProvider, useA11yInfo } from './A11yInfoProvider';
+export { default as BaseProvider } from './BaseProvider';
+export { useHydrationContext } from './BaseProvider/HydrationContext';
+export { default as Validator } from './Validator';
+export { default as ViewportProvider, useViewport, ViewportContext } from './ViewportProvider';
+export { default as ThemeProvider, useTheme, useSetTheme, useThemeTokens, useThemeTokensCallback, getThemeTokens, applyOuterBorder, applyTextStyles, applyShadowToken, useResponsiveThemeTokens } from './ThemeProvider';
+export * from './utils';
+export { default as Portal } from './Portal';