@telus-uds/components-community.content-card 1.4.0 → 2.0.0

package/.eslintrc.cjs

@@ -0,0 +1,22 @@
+const path = require('path')
+const base = require('../../../../eslintrc.base.cjs')
+
+base.rules['import/no-extraneous-dependencies'] = [
+  'error',
+  { packageDir: [__dirname, path.join(__dirname, '../..')] }
+]
+
+base.settings = {
+  ...base.settings,
+  'import/resolver': {
+    node: {
+      ...base.settings?.['import/resolver']?.node,
+      moduleDirectory: [
+        path.join(__dirname, '../../node_modules'),
+        path.join(__dirname, '../../../../node_modules')
+      ]
+    }
+  }
+}
+
+module.exports = base

package/CHANGELOG.md

@@ -1,12 +1,22 @@
 # Change Log - @telus-uds/components-community.content-card
 
-This log was last generated on Thu, 31 Oct 2024 05:02:44 GMT and should not be manually modified.
+<!-- This log was last generated on Fri, 22 Nov 2024 23:40:08 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 2.0.0
+
+Fri, 22 Nov 2024 23:40:08 GMT
+
+### Major changes
+
+- Upgrade `react-native` and many other dependencies and refactor to ESM-only builds (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/components-base to v1.97.1
+- Bump @telus-uds/system-theme-tokens to v3.0.0
+
 ## 1.4.0
 
-Thu, 31 Oct 2024 05:02:44 GMT
+Thu, 31 Oct 2024 05:09:13 GMT
 
 ### Minor changes
 

package/babel.config.cjs

@@ -0,0 +1,4 @@
+const baseConfig = require('../../../../babel.config.base.cjs')
+const name = require('./package.json').name.split('@telus-uds/').pop()
+
+module.exports = baseConfig({ name })

package/jest.config.cjs

@@ -0,0 +1,24 @@
+const preset = require('react-native/jest-preset')
+const name = require('./package.json').name.split('@telus-uds/').pop()
+
+module.exports = {
+  haste: preset.haste,
+  displayName: {
+    name,
+    color: 'blue'
+  },
+  setupFiles: preset.setupFiles,
+  transform: {
+    '.(js|jsx)$': ['babel-jest', { cwd: __dirname }]
+  },
+  setupFilesAfterEnv: ['@testing-library/jest-native/extend-expect'],
+  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/lib/ContentCard.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.styles = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _componentsBase = require("@telus-uds/components-base");
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ImageBackground"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const styles = _StyleSheet.default.create({
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography, Spacer, ChevronLink, PressableCardBase, selectSystemProps, hrefAttrsProp, withLinkRouter, a11yProps, focusHandlerProps, useThemeTokensCallback, useViewport, useThemeTokens, Box, viewProps } from '@telus-uds/components-base';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import ImageBackground from "react-native-web/dist/exports/ImageBackground";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const styles = StyleSheet.create({
   rowReverse: {
     flexDirection: 'row-reverse'
   },
@@ -29,9 +22,8 @@ const styles = _StyleSheet.default.create({
 });
 
 // Passes React Native-oriented system props through UDS PressableCardBase
-exports.styles = styles;
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.focusHandlerProps, _componentsBase.viewProps]);
-const ContentCard = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
+const ContentCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     title,
     content,
@@ -46,24 +38,24 @@ const ContentCard = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     tokens,
     ...rest
   } = _ref;
-  const viewport = (0, _componentsBase.useViewport)();
+  const viewport = useViewport();
   const innerContainerStyle = isContentOnRight ? [styles.innerContainer, styles.rowReverse] : styles.innerContainer;
-  const generalTokens = (0, _componentsBase.useThemeTokens)('ContentCard', tokens);
-  const getTokens = (0, _componentsBase.useThemeTokensCallback)('ContentCard', tokens);
-  const cardTokens = (0, _componentsBase.useThemeTokens)('Card', tokens, {}, {
+  const generalTokens = useThemeTokens('ContentCard', tokens);
+  const getTokens = useThemeTokensCallback('ContentCard', tokens);
+  const cardTokens = useThemeTokens('Card', tokens, {}, {
     viewport
   });
   const {
     hrefAttrs,
     rest: unusedRest
-  } = _componentsBase.hrefAttrsProp.bundle(rest);
+  } = hrefAttrsProp.bundle(rest);
   const getPressableCardTokens = cardState => {
     return {
       ...cardTokens,
       ...getTokens(cardState)
     };
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.PressableCardBase, {
+  return /*#__PURE__*/_jsx(PressableCardBase, {
     ref: ref,
     onPress: onPress,
     href: href,
@@ -77,7 +69,7 @@ const ContentCard = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 
       // Stop content jumping around as border size changes
       const borderOffset = borderWidth - generalTokens.borderWidth;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Box, {
+      return /*#__PURE__*/_jsx(Box, {
         horizontal: {
           xs: 4,
           lg: 5,
@@ -92,31 +84,31 @@ const ContentCard = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             subtract: borderOffset
           }
         },
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        children: /*#__PURE__*/_jsxs(View, {
           style: innerContainerStyle,
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          children: [/*#__PURE__*/_jsxs(View, {
             style: styles.informationContainer,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            children: [/*#__PURE__*/_jsx(Typography, {
               heading: "h3",
               variant: {
                 bold: true,
                 colour: 'brand'
               },
               children: title
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+            }), /*#__PURE__*/_jsx(Spacer, {
               space: 1
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+            }), /*#__PURE__*/_jsx(Typography, {
               variant: {
                 size: 'small'
               },
               children: content
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+            }), /*#__PURE__*/_jsx(Spacer, {
               space: 3
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ChevronLink, {
+            }), /*#__PURE__*/_jsx(ChevronLink, {
               disabled: true,
               children: linkText
             })]
-          }), customImage || /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
+          }), customImage || /*#__PURE__*/_jsx(ImageBackground, {
             source: imageSrc
             // eslint-disable-next-line react-native/no-inline-styles
             ,
@@ -139,43 +131,42 @@ ContentCard.propTypes = {
   /**
    * The URL  to be navigated to.
    */
-  href: _propTypes.default.string,
+  href: PropTypes.string,
   /**
    * Text stating the title or headline.
    */
-  title: _propTypes.default.string.isRequired,
+  title: PropTypes.string.isRequired,
   /**
    * Text giving a short content of the card. One paragraph of plain text.
    */
-  content: _propTypes.default.string.isRequired,
+  content: PropTypes.string.isRequired,
   /**
    * Text for the ChevronLink.
    */
-  linkText: _propTypes.default.string.isRequired,
+  linkText: PropTypes.string.isRequired,
   /**
    * Optional function to be called on press e.g. for within-page navigation.
    */
-  onPress: _propTypes.default.func,
+  onPress: PropTypes.func,
   /**
    * Src of the Image.
    */
-  imageSrc: _propTypes.default.string,
+  imageSrc: PropTypes.string,
   /**
    * Height of the Image.
    */
-  imageHeight: _propTypes.default.number,
+  imageHeight: PropTypes.number,
   /**
    * Width of the Image.
    */
-  imageWidth: _propTypes.default.number,
+  imageWidth: PropTypes.number,
   /**
    * Custom Image to be used instead of the default image.
    */
-  customImage: _propTypes.default.node,
+  customImage: PropTypes.node,
   /**
    * Controls if the content is on the right side of the image.
    */
-  isContentOnRight: _propTypes.default.bool
+  isContentOnRight: PropTypes.bool
 };
-var _default = (0, _componentsBase.withLinkRouter)(ContentCard);
-exports.default = _default;
+export default withLinkRouter(ContentCard);

package/lib/index.js

@@ -1,16 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ContentCard", {
-  enumerable: true,
-  get: function () {
-    return _ContentCard.default;
-  }
-});
-exports.default = void 0;
-var _ContentCard = _interopRequireDefault(require("./ContentCard"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _ContentCard.default;
-exports.default = _default;
+import ContentCard from './ContentCard';
+export { default as ContentCard } from './ContentCard';
+export default ContentCard;

package/package.json

@@ -1,15 +1,17 @@
 {
   "author": "TELUS Digital",
+  "type": "module",
   "browserslist": [
     "extends @telus-uds/browserslist-config"
   ],
   "dependencies": {
-    "@telus-uds/components-base": "^1.97.0",
-    "prop-types": "^15.7.2"
+    "prop-types": "^15.7.2",
+    "react-native": "^0.74.5",
+    "@telus-uds/components-base": "^1.97.1"
   },
   "devDependencies": {
     "@telus-uds/browserslist-config": "^1.0.5",
-    "@telus-uds/system-theme-tokens": "^2.66.0",
+    "@telus-uds/system-theme-tokens": "^3.0.0",
     "@testing-library/react-native": "11.0.0",
     "babel-plugin-react-native-web": "^0.17.0",
     "babel-plugin-styled-components": "^2.0.6",
@@ -19,14 +21,19 @@
   "license": "MIT",
   "name": "@telus-uds/components-community.content-card",
   "peerDependencies": {
-    "react": "^17.0.2 || ^18.0.0",
-    "react-dom": "^17.0.2 || ^18.0.0",
-    "react-native": "*",
-    "react-native-web": "~0.17.7 || ~0.18.7"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-native": "^0.74.5",
+    "react-native-web": "^0.19.10"
   },
   "main": "lib/index.js",
-  "module": "lib-module/index.js",
-  "react-native": "src/index.js",
+  "module": "lib/index.js",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "default": "./lib/index.js"
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/telus/universal-design-system.git"
@@ -36,13 +43,11 @@
     "lint": "telus-standard",
     "lint:fix": "telus-standard --fix",
     "test": "jest",
-    "build:main": "babel src -d lib",
-    "build:module": "babel src -d lib-module --env-name module",
-    "build": "npm run build:main && npm run build:module"
+    "build": "babel src -d lib --env-name module"
   },
   "sideEffects": false,
   "standard-engine": {
     "skip": true
   },
-  "version": "1.4.0"
+  "version": "2.0.0"
 }

package/lib/index.native.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "ContentCard", {
-  enumerable: true,
-  get: function () {
-    return _ContentCard.default;
-  }
-});
-exports.default = void 0;
-var _ContentCard = _interopRequireDefault(require("./ContentCard"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _ContentCard.default;
-exports.default = _default;

package/lib-module/ContentCard.js

@@ -1,173 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Typography, Spacer, ChevronLink, PressableCardBase, selectSystemProps, hrefAttrsProp, withLinkRouter, a11yProps, focusHandlerProps, useThemeTokensCallback, useViewport, useThemeTokens, Box, viewProps } from '@telus-uds/components-base';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import ImageBackground from "react-native-web/dist/exports/ImageBackground";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export const styles = StyleSheet.create({
-  rowReverse: {
-    flexDirection: 'row-reverse'
-  },
-  innerContainer: {
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: 'auto'
-  },
-  informationContainer: {
-    width: '65%'
-  }
-});
-
-// Passes React Native-oriented system props through UDS PressableCardBase
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
-const ContentCard = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    title,
-    content,
-    linkText,
-    onPress,
-    href,
-    customImage,
-    imageSrc,
-    imageHeight,
-    imageWidth,
-    isContentOnRight = false,
-    tokens,
-    ...rest
-  } = _ref;
-  const viewport = useViewport();
-  const innerContainerStyle = isContentOnRight ? [styles.innerContainer, styles.rowReverse] : styles.innerContainer;
-  const generalTokens = useThemeTokens('ContentCard', tokens);
-  const getTokens = useThemeTokensCallback('ContentCard', tokens);
-  const cardTokens = useThemeTokens('Card', tokens, {}, {
-    viewport
-  });
-  const {
-    hrefAttrs,
-    rest: unusedRest
-  } = hrefAttrsProp.bundle(rest);
-  const getPressableCardTokens = cardState => {
-    return {
-      ...cardTokens,
-      ...getTokens(cardState)
-    };
-  };
-  return /*#__PURE__*/_jsx(PressableCardBase, {
-    ref: ref,
-    onPress: onPress,
-    href: href,
-    hrefAttrs: hrefAttrs,
-    tokens: getPressableCardTokens,
-    ...selectProps(unusedRest),
-    children: cardState => {
-      const {
-        borderWidth
-      } = getPressableCardTokens(cardState);
-
-      // Stop content jumping around as border size changes
-      const borderOffset = borderWidth - generalTokens.borderWidth;
-      return /*#__PURE__*/_jsx(Box, {
-        horizontal: {
-          xs: 4,
-          lg: 5,
-          options: {
-            subtract: borderOffset
-          }
-        },
-        vertical: {
-          xs: 5,
-          lg: 7,
-          options: {
-            subtract: borderOffset
-          }
-        },
-        children: /*#__PURE__*/_jsxs(View, {
-          style: innerContainerStyle,
-          children: [/*#__PURE__*/_jsxs(View, {
-            style: styles.informationContainer,
-            children: [/*#__PURE__*/_jsx(Typography, {
-              heading: "h3",
-              variant: {
-                bold: true,
-                colour: 'brand'
-              },
-              children: title
-            }), /*#__PURE__*/_jsx(Spacer, {
-              space: 1
-            }), /*#__PURE__*/_jsx(Typography, {
-              variant: {
-                size: 'small'
-              },
-              children: content
-            }), /*#__PURE__*/_jsx(Spacer, {
-              space: 3
-            }), /*#__PURE__*/_jsx(ChevronLink, {
-              disabled: true,
-              children: linkText
-            })]
-          }), customImage || /*#__PURE__*/_jsx(ImageBackground, {
-            source: imageSrc
-            // eslint-disable-next-line react-native/no-inline-styles
-            ,
-            style: {
-              flex: 1,
-              aspectRatio: imageWidth / imageHeight,
-              maxHeight: imageHeight,
-              maxWidth: imageWidth
-            },
-            resizeMode: "contain"
-          })]
-        })
-      });
-    }
-  });
-});
-ContentCard.displayName = 'ContentCard';
-ContentCard.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * The URL  to be navigated to.
-   */
-  href: PropTypes.string,
-  /**
-   * Text stating the title or headline.
-   */
-  title: PropTypes.string.isRequired,
-  /**
-   * Text giving a short content of the card. One paragraph of plain text.
-   */
-  content: PropTypes.string.isRequired,
-  /**
-   * Text for the ChevronLink.
-   */
-  linkText: PropTypes.string.isRequired,
-  /**
-   * Optional function to be called on press e.g. for within-page navigation.
-   */
-  onPress: PropTypes.func,
-  /**
-   * Src of the Image.
-   */
-  imageSrc: PropTypes.string,
-  /**
-   * Height of the Image.
-   */
-  imageHeight: PropTypes.number,
-  /**
-   * Width of the Image.
-   */
-  imageWidth: PropTypes.number,
-  /**
-   * Custom Image to be used instead of the default image.
-   */
-  customImage: PropTypes.node,
-  /**
-   * Controls if the content is on the right side of the image.
-   */
-  isContentOnRight: PropTypes.bool
-};
-export default withLinkRouter(ContentCard);

package/lib-module/index.js

@@ -1,3 +0,0 @@
-import ContentCard from './ContentCard';
-export { default as ContentCard } from './ContentCard';
-export default ContentCard;

package/lib-module/index.native.js

@@ -1,3 +0,0 @@
-import ContentCard from './ContentCard';
-export { default as ContentCard } from './ContentCard';
-export default ContentCard;

package/src/index.native.js

@@ -1,5 +0,0 @@
-import ContentCard from './ContentCard'
-
-export { default as ContentCard } from './ContentCard'
-
-export default ContentCard