@telus-uds/components-base 1.3.0 → 1.3.1

package/lib/utils/ssr.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getSSRStyles = exports.getReactNativeWebSSRStyles = void 0;
+
+var _AppRegistry = _interopRequireDefault(require("react-native-web/dist/cjs/exports/AppRegistry"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/** @typedef {import('react').ComponentType} ReactComponent */
+
+/** @typedef {import('react').ReactElement} ReactElement */
+
+/**
+ * Registers the app's root component with React Native Web and generates
+ * the main <style> tag containing React Native Web stylesheet styles.
+ *
+ * @param {ReactComponent} AppRoot
+ * @param {string} [appName]
+ * @returns {ReactElement[]}
+ */
+const getReactNativeWebSSRStyles = (AppRoot, appName = 'app') => {
+  _AppRegistry.default.registerComponent(appName, () => AppRoot);
+
+  const {
+    getStyleElement
+  } = _AppRegistry.default.getApplication(appName);
+
+  return [getStyleElement()];
+};
+/**
+ * Gets style tags for each currently supported CSS-in-JS library and returns
+ * them alongside any existing style tags.
+ *
+ * @param {ReactComponent} AppRoot
+ * @param {string} [appName]
+ * @param {ReactElement[]} [existingStyles]
+ * @returns {ReactElement[]}
+ */
+
+
+exports.getReactNativeWebSSRStyles = getReactNativeWebSSRStyles;
+
+const getSSRStyles = (AppRoot, appName = 'app', existingStyles = []) => {
+  return [...existingStyles, ...getReactNativeWebSSRStyles(AppRoot, appName) // if any other CSS-in-JS is added e.g. styled-components generate and add its styles here
+  ];
+};
+
+exports.getSSRStyles = getSSRStyles;

package/lib-module/A11yInfoProvider/index.js

@@ -0,0 +1,62 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import AccessibilityInfo from "react-native-web/dist/exports/AccessibilityInfo";
+import Platform from "react-native-web/dist/exports/Platform";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ScreenReaderContext = /*#__PURE__*/createContext(false);
+const ReducedMotionContext = /*#__PURE__*/createContext(false);
+
+const A11yInfoProvider = ({
+  children
+}) => {
+  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
+  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'test') {
+      // On Jest these effects do nothing but can cause `act` state change warnings
+      // and "...after the Jest environment has been torn down" errors, so skip them.
+      return () => {};
+    }
+
+    AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
+    AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReaderEnabled);
+
+    const setInitialA11yInfo = async () => {
+      const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([AccessibilityInfo.isReduceMotionEnabled(), AccessibilityInfo.isScreenReaderEnabled()]); // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
+      // https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/AccessibilityInfo/index.js#L14
+
+      setScreenReaderEnabled(Platform.OS !== 'web' && !!initialScreenReaderEnabled); // RNW does support isReduceMotionEnabled looking for 'prefers-reduced-motion' state
+
+      setReduceMotionEnabled(!!initialReduceMotionEnabled);
+    };
+
+    if (AccessibilityInfo.isReduceMotionEnabled && AccessibilityInfo.isScreenReaderEnabled) {
+      setInitialA11yInfo();
+    }
+
+    return () => {
+      AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
+      AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
+    };
+  }, []);
+  return /*#__PURE__*/_jsx(ReducedMotionContext.Provider, {
+    value: reduceMotionEnabled,
+    children: /*#__PURE__*/_jsx(ScreenReaderContext.Provider, {
+      value: screenReaderEnabled,
+      children: children
+    })
+  });
+};
+
+A11yInfoProvider.propTypes = {
+  children: PropTypes.node.isRequired
+};
+export default A11yInfoProvider;
+export const useA11yInfo = () => {
+  const screenReaderEnabled = useContext(ScreenReaderContext);
+  const reduceMotionEnabled = useContext(ReducedMotionContext);
+  return {
+    reduceMotionEnabled,
+    screenReaderEnabled
+  };
+};

package/lib-module/A11yText/index.js

@@ -0,0 +1,55 @@
+import React, { forwardRef } from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { a11yProps, selectSystemProps, viewProps } from '../utils/props';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+/**
+ * A11yText is a zero-size invisible element that adds text to be read by screen readers.
+ *
+ * It should be used to add selectable screen-reader-only text to the main document flow,
+ * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
+ */
+
+const A11yText = /*#__PURE__*/forwardRef(({
+  text,
+  heading,
+  ...rest
+}, ref) => {
+  const selectedProps = selectProps({
+    // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
+    // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.
+    // On Android, may cause this to be skipped when with `<Text>` siblings in an `accessible` View,
+    // see https://github.com/facebook/react-native/issues/30851#issuecomment-790165489
+    accessible: Platform.OS === 'ios',
+    accessibilityLabel: text,
+    accessibilityRole: heading ? 'header' : 'text',
+    ...rest
+  });
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.invisible,
+    ref: ref,
+    ...selectedProps
+  });
+});
+A11yText.displayName = 'A11yText';
+A11yText.propTypes = { ...selectedSystemPropTypes,
+  text: PropTypes.string.isRequired,
+  heading: PropTypes.bool
+};
+const styles = StyleSheet.create({
+  invisible: {
+    // Without width or height it is not shown
+    minHeight: 1,
+    minWidth: 1,
+    // Ensures it doesn't occupy space
+    // position: 'absolute' causes it to be read first in its container
+    marginEnd: -1,
+    marginBottom: -1,
+    // Ensures it is in the correct position on Native
+    top: -1
+  }
+});
+export default A11yText;

package/lib-module/ActivityIndicator/Spinner.js

@@ -0,0 +1,76 @@
+import React, { forwardRef } from 'react';
+import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
+import { useA11yInfo } from '../A11yInfoProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const SVG_RADIUS = 20;
+const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI;
+const MIN_SVG_LENGTH = MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
+const MAX_SVG_LENGTH = (1 - MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
+const animationProps = {
+  begin: '0s',
+  dur: `${DURATION}ms`,
+  fill: 'freeze',
+  repeatCount: 'indefinite'
+};
+const bezierProps = {
+  calcMode: 'spline',
+  keyTimes: '0; 0.5; 1',
+  keySplines: `${BEZIER.join(', ')} ; ${BEZIER.join(', ')}`
+}; // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
+// It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
+
+const Spinner = /*#__PURE__*/forwardRef(({
+  size,
+  color,
+  thickness,
+  label
+}, ref) => {
+  const {
+    reduceMotionEnabled
+  } = useA11yInfo();
+  return /*#__PURE__*/_jsx("svg", {
+    ref: ref,
+    width: `${size}px`,
+    height: `${size}px`,
+    viewBox: "0 0 48 48",
+    "aria-valuetext": label,
+    role: "progressbar",
+    "aria-busy": true,
+    children: /*#__PURE__*/_jsxs("g", {
+      children: [reduceMotionEnabled ? null : /*#__PURE__*/_jsx("animateTransform", {
+        attributeName: "transform",
+        type: "rotate",
+        values: `-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`,
+        ...animationProps
+      }), /*#__PURE__*/_jsx("circle", {
+        fill: "none",
+        stroke: color,
+        strokeWidth: thickness * 48 / size,
+        strokeLinecap: "round",
+        cx: "24",
+        cy: "24",
+        r: "20",
+        strokeDasharray: reduceMotionEnabled ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
+        strokeDashoffset: 0,
+        children: reduceMotionEnabled ? null : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("animate", {
+            attributeName: "stroke-dashoffset",
+            values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
+            ...animationProps,
+            ...bezierProps
+          }), /*#__PURE__*/_jsx("animate", {
+            attributeName: "stroke-dasharray",
+            values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
+            ...animationProps,
+            ...bezierProps
+          })]
+        })
+      })]
+    })
+  });
+});
+Spinner.displayName = 'Spinner';
+Spinner.propTypes = propTypes;
+export default Spinner;

package/lib-module/ActivityIndicator/Spinner.native.js

@@ -0,0 +1,143 @@
+import React, { forwardRef } from 'react';
+import Animated from "react-native-web/dist/exports/Animated";
+import Easing from "react-native-web/dist/exports/Easing";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
+import { useA11yInfo } from '../A11yInfoProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ea = MIN_EMPTY_ANGLE / 2;
+const sa = MIN_STROKE_ANGLE / 2;
+const Spinner = /*#__PURE__*/forwardRef(({
+  size,
+  color,
+  thickness,
+  label
+}, ref) => {
+  const {
+    current: timer
+  } = React.useRef(new Animated.Value(0));
+  const {
+    reduceMotionEnabled
+  } = useA11yInfo();
+  React.useLayoutEffect(() => {
+    const loop = Animated.timing(timer, {
+      duration: DURATION,
+      easing: Easing.linear,
+      // Animated.loop does not work if useNativeDriver is true on web
+      useNativeDriver: true,
+      toValue: 1,
+      isInteraction: false
+    });
+    if (!reduceMotionEnabled) Animated.loop(loop).start();else loop.stop();
+  }, [timer, reduceMotionEnabled]);
+  const frames = 60 * DURATION / 1000;
+  const easing = Easing.bezier(...BEZIER);
+  const containerStyle = {
+    width: size,
+    height: size / (reduceMotionEnabled ? 1.5 : 2),
+    overflow: 'hidden'
+  };
+  const animationFrequency = reduceMotionEnabled ? [0] : [0, 1]; // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
+
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    style: [styles.container],
+    accessible: true,
+    accessibilityLabel: label,
+    accessibilityRole: "progressbar",
+    accessibilityState: {
+      busy: true
+    },
+    children: /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        width: size,
+        height: size
+      }],
+      collapsable: false,
+      children: animationFrequency.map(index => {
+        const inputRange = Array.from(new Array(frames), (_, frameIndex) => frameIndex / (frames - 1));
+        const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
+          let progress = 2 * frameIndex / (frames - 1);
+          const rotation = index ? +(360 - sa) : -(180 - sa);
+
+          if (progress > 1.0) {
+            progress = 2.0 - progress;
+          }
+
+          const direction = index ? -1 : +1;
+          return `${direction * (180 - (sa + ea)) * easing(progress) + rotation}deg`;
+        });
+        const layerStyle = {
+          width: size,
+          height: size
+        };
+        const viewportStyle = {
+          width: size,
+          height: size
+        };
+
+        if (!reduceMotionEnabled) {
+          layerStyle.transform = [{
+            rotate: timer.interpolate({
+              inputRange: [0, 1],
+              outputRange: [`${0 + ea + sa}deg`, `${2 * 360 + ea + sa}deg`]
+            })
+          }];
+          viewportStyle.transform = [{
+            translateY: index ? -size / 2 : 0
+          }, {
+            rotate: timer.interpolate({
+              inputRange,
+              outputRange
+            })
+          }];
+        }
+
+        const offsetStyle = index ? {
+          top: size / 2
+        } : null;
+        const lineStyle = {
+          width: size,
+          height: size,
+          borderColor: color,
+          borderWidth: thickness,
+          borderRadius: size / 2
+        };
+        return /*#__PURE__*/_jsx(Animated.View, {
+          style: [styles.layer],
+          children: /*#__PURE__*/_jsx(Animated.View, {
+            style: layerStyle,
+            children: /*#__PURE__*/_jsx(Animated.View, {
+              style: [containerStyle, offsetStyle],
+              collapsable: false,
+              children: /*#__PURE__*/_jsx(Animated.View, {
+                style: viewportStyle,
+                children: /*#__PURE__*/_jsx(Animated.View, {
+                  style: containerStyle,
+                  collapsable: false,
+                  children: /*#__PURE__*/_jsx(Animated.View, {
+                    style: lineStyle
+                  })
+                })
+              })
+            })
+          })
+        }, index);
+      })
+    })
+  });
+});
+Spinner.displayName = 'Spinner';
+Spinner.propTypes = propTypes;
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 0,
+    flexShrink: 0
+  },
+  layer: { ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+});
+export default Spinner;

package/lib-module/ActivityIndicator/index.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useThemeTokens } from '../ThemeProvider';
+import { getTokensPropType, variantProp } from '../utils/props';
+import Spinner from './Spinner';
+/**
+ * `ActivityIndicator` renders a visual loading state.
+ * It does not handle positioning or layout of that visual loader.
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const ActivityIndicator = ({
+  variant,
+  tokens,
+  label
+}) => {
+  const {
+    size,
+    color,
+    thickness
+  } = useThemeTokens('ActivityIndicator', tokens, variant);
+  return /*#__PURE__*/_jsx(Spinner, {
+    size: size,
+    color: color,
+    thickness: thickness,
+    label: label
+  });
+};
+
+ActivityIndicator.propTypes = {
+  variant: variantProp.propType,
+  tokens: getTokensPropType('ActivityIndicator'),
+
+  /**
+   * A visually hidden accessible label describing the action taking place
+   */
+  label: PropTypes.string.isRequired
+};
+export default ActivityIndicator;

package/lib-module/ActivityIndicator/shared.js

@@ -0,0 +1,12 @@
+import PropTypes from 'prop-types'; // these could be specified by the theme
+
+export const DURATION = 1800;
+export const MIN_EMPTY_ANGLE = 60;
+export const MIN_STROKE_ANGLE = 30;
+export const BEZIER = [0.42, 0.0, 0.58, 1.0];
+export const propTypes = {
+  color: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  size: PropTypes.number.isRequired,
+  thickness: PropTypes.number.isRequired
+};

package/lib-module/BaseProvider/index.js

@@ -0,0 +1,26 @@
+var _ThemeProvider$propTy;
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import A11yInfoProvider from '../A11yInfoProvider';
+import ViewportProvider from '../ViewportProvider';
+import ThemeProvider from '../ThemeProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const BaseProvider = ({
+  defaultTheme,
+  children
+}) => /*#__PURE__*/_jsx(A11yInfoProvider, {
+  children: /*#__PURE__*/_jsx(ViewportProvider, {
+    children: /*#__PURE__*/_jsx(ThemeProvider, {
+      defaultTheme: defaultTheme,
+      children: children
+    })
+  })
+});
+
+BaseProvider.propTypes = {
+  defaultTheme: (_ThemeProvider$propTy = ThemeProvider.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,
+  children: PropTypes.node.isRequired
+};
+export default BaseProvider;