@telus-uds/components-base 2.0.0 → 2.0.2

package/README.md

@@ -3,3 +3,38 @@
 The UDS base components are a set of low level react-native components themed by UDS themes.
 
 Refer to the [UDS monorepo README](https://github.com/telus/universal-design-system/#readme) for details.
+
+## Install
+
+```javascript
+
+npm install @telus-uds/components-base
+```
+
+To ensure proper functionality, it is important to install the brand palette and theme since the components package does not include a default theme. For example, you can install the Telus brand palette and theme by running the following command:
+
+```javascript
+
+npm install @telus-uds/palette-allium @telus-uds/theme-allium
+```
+
+This will provide the necessary components, along with the corresponding palette and theme, for your project.
+
+## Usage
+
+1. Export component as a named export from root
+2. Wrap the UDS component in an BaseProvider
+3. Include the BaseProvider provider once at the root of your application (e.g. in App.jsx)
+
+```javascript
+
+import { BaseProvider, Button } from '@telus-uds/components-base'
+import alliumTheme from '@telus-uds/theme-allium'
+...
+  <BaseProvider defaultTheme={alliumTheme}>
+    ...
+    <Button onPress={() => {}}>Hello World!</Button>
+    ...
+  </BaseProvider>
+...
+```

package/babel.config.cjs

@@ -0,0 +1,35 @@
+module.exports = (api) => {
+  // configuration for jest
+  if (api.env('test')) {
+    return {
+      presets: ['module:metro-react-native-babel-preset']
+    }
+  }
+
+  // Default to CJS for docs generators etc; build as ESM modules when requested.
+  const isModule = api.env('module')
+
+  return {
+    presets: [
+      ['@babel/preset-react', { runtime: 'automatic' }],
+      [
+        '@babel/preset-env',
+        {
+          // `false` in babel env options means preserve ESM import / export syntax
+          // https://babeljs.io/docs/en/babel-preset-env#modules
+          modules: isModule ? false : 'cjs'
+        }
+      ]
+    ],
+    plugins: [
+      [
+        'react-native-web',
+        {
+          // Use the build of React Native Web that matches our build. ESM prefered, for treeshaking etc.
+          // Be careful not to have both RNW builds in an app as init will run twice, shuffling styles.
+          commonjs: !isModule
+        }
+      ]
+    ]
+  }
+}

package/{jest.config-android.js → jest.config-android.cjs}

@@ -1,4 +1,4 @@
-const defaultConfig = require('./jest.config')
+const defaultConfig = require('./jest.config.cjs')
 
 const config = { ...defaultConfig }
 

package/{jest.config-ios.js → jest.config-ios.cjs}

@@ -1,4 +1,4 @@
-const defaultConfig = require('./jest.config')
+const defaultConfig = require('./jest.config.cjs')
 
 const config = { ...defaultConfig }
 

package/{jest.config-web.js → jest.config-web.cjs}

@@ -1,4 +1,4 @@
-const defaultConfig = require('./jest.config')
+const defaultConfig = require('./jest.config.cjs')
 
 const config = { ...defaultConfig }
 

package/jest.config.cjs

@@ -0,0 +1,40 @@
+const preset = require('react-native/jest-preset')
+const name = require('./package.json').name.split('@telus-uds/').pop()
+
+// cherry-pick the bits of the preset we want to avoid it overriding the fix we have on L14
+module.exports = {
+  haste: preset.haste,
+  displayName: {
+    name,
+    color: 'blue'
+  },
+  setupFiles: [...preset.setupFiles, '<rootDir>/jest.setup.js'],
+  transform: {
+    // Use babel-jest instead of react-native/jest/preprocessor.js so that the coverage report is correct as per:
+    //  https://github.com/facebook/react-native/issues/20404#issuecomment-593392763
+    //  https://kulshekhar.github.io/ts-jest/docs/guides/react-native/#jest-config
+    // __dirname here tells babel to look in components-base for babel root when running from monorepo root
+    '\\.(js|jsx)$': [
+      'babel-jest',
+      {
+        plugins: [['@babel/plugin-transform-private-methods', { loose: true }]],
+        cwd: __dirname
+      }
+    ]
+  },
+  setupFilesAfterEnv: [
+    '@testing-library/jest-native/extend-expect',
+    // Fail tests that use console.error or console.warn
+    '<rootDir>/../../jest-no-console.cjs'
+  ],
+  cacheDirectory: '.cache/jest-cache-react-17',
+  moduleNameMapper: {
+    '.+\\.(otf|svg|png|jpg)$': 'identity-obj-proxy'
+  },
+  testMatch: [`<rootDir>/__tests__/**/*.test.js?(x)`],
+  transformIgnorePatterns: [
+    'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|react-native-web|@react-native-picker)'
+  ],
+  // Count everything in src when calculating coverage
+  collectCoverageFrom: ['src/**/*.{js,jsx}']
+}

package/jest.setup.js

@@ -0,0 +1,7 @@
+import { Dimensions } from 'react-native'
+
+function setWindowWidth(width) {
+  Dimensions.set({ window: { width } })
+}
+
+global.setWindowWidth = setWindowWidth

package/lib/A11yInfoProvider/index.js

@@ -1,96 +1,65 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useA11yInfo = exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _AccessibilityInfo = _interopRequireDefault(require("react-native-web/dist/cjs/exports/AccessibilityInfo"));
-
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const ScreenReaderContext = /*#__PURE__*/(0, _react.createContext)(false);
-const ReducedMotionContext = /*#__PURE__*/(0, _react.createContext)(false);
-
-const A11yInfoProvider = _ref => {
+import React 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__*/React.createContext(false);
+const ReducedMotionContext = /*#__PURE__*/React.createContext(false);
+
+// eslint-disable-next-line no-unused-vars
+const A11yInfoProvider = /*#__PURE__*/React.forwardRef((_ref, _) => {
   let {
     children
   } = _ref;
-  const [reduceMotionEnabled, setReduceMotionEnabled] = (0, _react.useState)(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = (0, _react.useState)(false);
-  (0, _react.useEffect)(() => {
+  const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(false);
+  const [screenReaderEnabled, setScreenReaderEnabled] = React.useState(false);
+  React.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 () => {};
     }
-
-    const motionSubscription = _AccessibilityInfo.default.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
-
-    const screenReaderSubscription = _AccessibilityInfo.default.addEventListener('screenReaderChanged', setScreenReaderEnabled);
-
+    const motionSubscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
     const setInitialA11yInfo = async () => {
-      const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([_AccessibilityInfo.default.isReduceMotionEnabled(), _AccessibilityInfo.default.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
+      const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([AccessibilityInfo.isReduceMotionEnabled(), AccessibilityInfo.isScreenReaderEnabled()]);
 
-      setScreenReaderEnabled(_Platform.default.OS !== 'web' && !!initialScreenReaderEnabled); // RNW does support isReduceMotionEnabled looking for 'prefers-reduced-motion' state
+      // 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.default.isReduceMotionEnabled && _AccessibilityInfo.default.isScreenReaderEnabled) {
+    if (AccessibilityInfo.isReduceMotionEnabled && AccessibilityInfo.isScreenReaderEnabled) {
       setInitialA11yInfo();
     }
-
     return () => {
       // From react-native 0.65, AccessibilityInfo.removeEventListener is deprecated for `remove` on addEventListener return value
       if (typeof (motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove) === 'function') {
-        motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove();
-      } else if (typeof _AccessibilityInfo.default.removeEventListener === 'function') {
-        _AccessibilityInfo.default.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
-      }
-
-      if (typeof (screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove) === 'function') {
-        screenReaderSubscription === null || screenReaderSubscription === void 0 ? void 0 : screenReaderSubscription.remove();
-      } else if (typeof _AccessibilityInfo.default.removeEventListener === 'function') {
-        _AccessibilityInfo.default.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
+        motionSubscription === null || motionSubscription === void 0 || motionSubscription.remove();
+      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
+        AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
       }
     };
   }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReducedMotionContext.Provider, {
+  return /*#__PURE__*/_jsx(ReducedMotionContext.Provider, {
     value: reduceMotionEnabled,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenReaderContext.Provider, {
+    children: /*#__PURE__*/_jsx(ScreenReaderContext.Provider, {
       value: screenReaderEnabled,
       children: children
     })
   });
-};
-
+});
+A11yInfoProvider.displayName = 'A11yInfoProvider';
 A11yInfoProvider.propTypes = {
-  children: _propTypes.default.node.isRequired
+  children: PropTypes.node.isRequired
 };
-var _default = A11yInfoProvider;
-exports.default = _default;
-
-const useA11yInfo = () => {
-  const screenReaderEnabled = (0, _react.useContext)(ScreenReaderContext);
-  const reduceMotionEnabled = (0, _react.useContext)(ReducedMotionContext);
+export default A11yInfoProvider;
+export const useA11yInfo = () => {
+  const screenReaderEnabled = React.useContext(ScreenReaderContext);
+  const reduceMotionEnabled = React.useContext(ReducedMotionContext);
   return {
     reduceMotionEnabled,
     screenReaderEnabled
   };
-};
-
-exports.useA11yInfo = useA11yInfo;
+};

package/lib/A11yText/index.js

@@ -1,42 +1,23 @@
-"use strict";
+import React 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]);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _props = require("../utils/props");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.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__*/(0, _react.forwardRef)((_ref, ref) => {
+const A11yText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     text,
     heading,
+    role = 'text',
     ...rest
   } = _ref;
   const selectedProps = selectProps({
@@ -44,24 +25,34 @@ const A11yText = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     // 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.default.OS === 'ios',
+    accessible: Platform.OS === 'ios',
     accessibilityLabel: text,
-    accessibilityRole: heading ? 'header' : 'text',
+    accessibilityRole: heading ? 'header' : role,
     ...rest
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     style: styles.invisible,
     ref: ref,
     ...selectedProps
   });
 });
 A11yText.displayName = 'A11yText';
-A11yText.propTypes = { ...selectedSystemPropTypes,
-  text: _propTypes.default.string.isRequired,
-  heading: _propTypes.default.bool
+A11yText.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Text to be read by screen readers
+   */
+  text: PropTypes.string.isRequired,
+  /**
+   * Whether text should be rendered as a heading
+   */
+  heading: PropTypes.bool,
+  /**
+   * Role of the element
+   */
+  role: PropTypes.string
 };
-
-const styles = _StyleSheet.default.create({
+const styles = StyleSheet.create({
   invisible: {
     // Without width or height it is not shown
     minHeight: 1,
@@ -74,6 +65,4 @@ const styles = _StyleSheet.default.create({
     top: -1
   }
 });
-
-var _default = A11yText;
-exports.default = _default;
+export default A11yText;