react-native-ui-lib 7.38.1-snapshot.6338 → 7.38.1-snapshot.6339

package/.eslintrc.js

@@ -8,6 +8,13 @@ module.exports = {
     'no-undef': 'off',
     /* Other Rules */
     'no-unused-expressions': 'off',
+    'no-restricted-syntax': [
+      'error',
+      {
+        selector: `CallExpression[callee.object.name='console'][callee.property.name='error']`,
+        message: 'Using console.error is not allowed as it is sent to Sentry, please use LogService.error instead'
+      }
+    ],
     'arrow-parens': 'off',
     // TODO: remove after migration of legacy lifecycle methods
     camelcase: 'off',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.38.1-snapshot.6338",
+  "version": "7.38.1-snapshot.6339",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/card/index.js

@@ -15,6 +15,7 @@ import { BlurViewPackage } from "../../optionalDependencies";
 import Assets from "../../assets";
 import CardContext from "./CardContext";
 import * as CardPresenter from "./CardPresenter";
+import { LogService } from "../../services";
 const BlurView = BlurViewPackage?.BlurView;
 const DEFAULT_BORDER_RADIUS = BorderRadiuses.br40;
 const DEFAULT_SELECTION_PROPS = {
@@ -47,7 +48,8 @@ class Card extends PureComponent {
     };
     this.styles = createStyles(this.props);
     if (props.enableBlur && !BlurView) {
-      console.error(`RNUILib Card's "enableBlur" prop requires installing "@react-native-community/blur" dependency`);
+      // eslint-disable-next-line max-len
+      LogService.error(`RNUILib Card's "enableBlur" prop requires installing "@react-native-community/blur" dependency`);
     }
   }
   componentDidUpdate(prevProps) {

package/src/components/connectionStatusBar/index.js

@@ -7,6 +7,7 @@ import { Colors, Typography } from "../../style";
 import TouchableOpacity from "../touchableOpacity";
 import View from "../view";
 import { Constants, asBaseComponent } from "../../commons/new";
+import { LogService } from "../../services";
 import { ConnectionStatusBarProps, DEFAULT_PROPS } from "./types";
 export { ConnectionStatusBarProps };
 
@@ -36,7 +37,8 @@ class ConnectionStatusBar extends PureComponent {
     if (NetInfo) {
       this.getInitialConnectionState();
     } else {
-      console.error(`RNUILib ConnectionStatusBar component requires installing "@react-native-community/netinfo" dependency`);
+      // eslint-disable-next-line max-len
+      LogService.error(`RNUILib ConnectionStatusBar component requires installing "@react-native-community/netinfo" dependency`);
     }
   }
   generateStyles() {

package/src/components/dateTimePicker/index.js

@@ -11,6 +11,7 @@ import Button from "../button";
 import ExpandableOverlay from "../../incubator/expandableOverlay";
 import useOldApi from "./useOldApi";
 import { isSameDate, isSameHourAndMinute } from "../../utils/dateUtils";
+import { LogService } from "../../services";
 /*eslint-disable*/
 /**
  * @description: Date and Time Picker Component that wraps RNDateTimePicker for date and time modes.
@@ -64,7 +65,7 @@ const DateTimePicker = forwardRef((props, ref) => {
   useEffect(() => {
     if (!RNDateTimePicker) {
       // eslint-disable-next-line max-len
-      console.error(`RNUILib DateTimePicker component requires installing "@react-native-community/datetimepicker" dependency`);
+      LogService.error(`RNUILib DateTimePicker component requires installing "@react-native-community/datetimepicker" dependency`);
     }
   }, []);
   useDidUpdate(() => {

package/src/components/dateTimePicker/useOldApi.js

@@ -1,6 +1,7 @@
 // TODO: delete whole file in v8
 import { useEffect } from 'react';
 import { MomentPackage as moment } from "../../optionalDependencies";
+import { LogService } from "../../services";
 
 // This file will be deleted in the next major version,
 // duplicating these here will make this less complicated
@@ -15,7 +16,8 @@ const useOldApi = props => {
   } = props;
   useEffect(() => {
     if (!moment && (dateFormat || timeFormat)) {
-      console.error(`RNUILib DateTimePicker component with date/time format requires installing "moment" dependency`);
+      // eslint-disable-next-line max-len
+      LogService.error(`RNUILib DateTimePicker component with date/time format requires installing "moment" dependency`);
     }
   }, [dateFormat, timeFormat]);
   const getStringValue = (value, mode) => {

package/src/components/modal/index.js

@@ -6,6 +6,7 @@ import { BlurViewPackage } from "../../optionalDependencies";
 import { Constants, asBaseComponent } from "../../commons/new";
 import TopBar, { ModalTopBarProps } from "./TopBar";
 import View from "../../components/view";
+import { LogService } from "../../services";
 const BlurView = BlurViewPackage?.BlurView;
 export { ModalTopBarProps };
 /**
@@ -20,7 +21,8 @@ class Modal extends Component {
   constructor(props) {
     super(props);
     if (props.enableModalBlur && !BlurView) {
-      console.error(`RNUILib Modal's "enableModalBlur" prop requires installing "@react-native-community/blur" dependency`);
+      // eslint-disable-next-line max-len
+      LogService.error(`RNUILib Modal's "enableModalBlur" prop requires installing "@react-native-community/blur" dependency`);
     }
   }
   renderTouchableOverlay() {

package/src/components/pieChart/index.js

@@ -6,6 +6,7 @@ const {
   Svg,
   Path
 } = SvgPackage;
+import { LogService } from "../../services";
 const DEFAULT_DIAMETER = 144;
 const PieChart = props => {
   const {
@@ -14,7 +15,7 @@ const PieChart = props => {
     ...others
   } = props;
   if (!Svg || !Path) {
-    console.error(`RNUILib PieChart requires installing "@react-native-svg" dependency`);
+    LogService.error(`RNUILib PieChart requires installing "@react-native-svg" dependency`);
     return null;
   }
   const renderPieSegments = () => {

package/src/components/skeletonView/index.js

@@ -9,6 +9,7 @@ import { BorderRadiuses, Colors, Dividers, Spacings } from "../../style";
 import { createShimmerPlaceholder, LinearGradientPackage } from "../../optionalDependencies";
 import View from "../view";
 import { Constants } from "../../commons/new";
+import { LogService } from "../../services";
 const LinearGradient = LinearGradientPackage?.default;
 let ShimmerPlaceholder;
 const ANIMATION_DURATION = 400;
@@ -62,9 +63,9 @@ class SkeletonView extends Component {
       opacity: new Animated.Value(0)
     };
     if (_isUndefined(LinearGradientPackage?.default)) {
-      console.error(`RNUILib SkeletonView's requires installing "react-native-linear-gradient" dependency`);
+      LogService.error(`RNUILib SkeletonView's requires installing "react-native-linear-gradient" dependency`);
     } else if (_isUndefined(createShimmerPlaceholder)) {
-      console.error(`RNUILib SkeletonView's requires installing "react-native-shimmer-placeholder" dependency`);
+      LogService.error(`RNUILib SkeletonView's requires installing "react-native-shimmer-placeholder" dependency`);
     } else if (ShimmerPlaceholder === undefined) {
       ShimmerPlaceholder = createShimmerPlaceholder(LinearGradient);
     }

package/src/components/svgImage/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { isSvg, isSvgUri } from "../../utils/imageUtils";
 import { SvgPackage, SvgCssUri } from "../../optionalDependencies";
+import { LogService } from "../../services";
 const SvgXml = SvgPackage?.SvgXml;
 // const SvgProps = SvgPackage?.SvgProps; TODO: not sure how (or if) we can use their props
 
@@ -14,7 +15,7 @@ function SvgImage(props) {
   } = props;
   if (!SvgXml) {
     // eslint-disable-next-line max-len
-    console.error(`RNUILib Image "svg" prop requires installing "react-native-svg" and "react-native-svg-transformer" dependencies`);
+    LogService.error(`RNUILib Image "svg" prop requires installing "react-native-svg" and "react-native-svg-transformer" dependencies`);
     return null;
   }
   if (isSvgUri(data)) {

package/src/incubator/slider/SliderPresenter.js

@@ -1,4 +1,5 @@
 import { interpolate } from 'react-native-reanimated';
+import { LogService } from "../../services";
 export function getOffsetForValue(value, span, minimumValue = 0, maximumValue = 1) {
   const range = maximumValue - minimumValue;
   const relativeValue = minimumValue - value;
@@ -43,15 +44,21 @@ export function validateValues(props) {
     initialMaximumValue
   } = props;
   if (minimumValue > maximumValue || useRange && initialMinimumValue && initialMaximumValue && initialMinimumValue > initialMaximumValue) {
-    console.error('Your passed values are invalid. Please check if minimum values are not higher than maximum values');
+    LogService.forwardError({
+      message: 'Your passed values are invalid. Please check if minimum values are not higher than maximum values'
+    });
   }
   if (value !== undefined && minimumValue && maximumValue && !inRange(value, minimumValue, maximumValue)) {
-    console.error(`Your passed value (${value}) is invalid. 
-      Please check that it is in range of the minimum (${minimumValue}) and maximum (${maximumValue}) values`);
+    LogService.forwardError({
+      message: `Your passed value (${value}) is invalid. 
+      Please check that it is in range of the minimum (${minimumValue}) and maximum (${maximumValue}) values`
+    });
   }
   if (useRange && initialMinimumValue && initialMaximumValue) {
     if (!inRange(initialMinimumValue, minimumValue, maximumValue) || !inRange(initialMaximumValue, minimumValue, maximumValue)) {
-      console.error('Your passed values are invalid. Please check that they are in range of the minimum and maximum values');
+      LogService.forwardError({
+        message: 'Your passed values are invalid. Please check that they are in range of the minimum and maximum values'
+      });
     }
   }
 }

package/src/services/HapticService.js

@@ -1,4 +1,5 @@
 import { HapticFeedbackPackage } from "../optionalDependencies";
+import { LogService } from "./";
 const options = {
   enableVibrateFallback: false,
   ignoreAndroidSystemSettings: false
@@ -17,7 +18,7 @@ function triggerHaptic(hapticType, componentName) {
   if (HapticFeedbackPackage) {
     HapticFeedbackPackage.trigger(hapticType, options);
   } else {
-    console.error(`RNUILib ${componentName}'s requires installing "react-native-haptic-feedback" dependency`);
+    LogService.error(`RNUILib ${componentName}'s requires installing "react-native-haptic-feedback" dependency`);
   }
 }
 export default {

package/src/services/LogService.d.ts

@@ -1,12 +1,15 @@
 interface BILogger {
     log: (event: any) => void;
 }
-declare class LogService {
+declare class LogService<ErrorInfo extends {
+    message: string;
+}> {
     private biLogger;
     injectBILogger: (biLogger: BILogger) => void;
     logBI: (event: any) => void;
     warn: (message?: any, ...optionalParams: any[]) => void;
     error: (message?: any, ...optionalParams: any[]) => void;
+    forwardError: (errorInfo: ErrorInfo) => void;
     deprecationWarn: ({ component, oldProp, newProp }: {
         component: string;
         oldProp: string;
@@ -26,5 +29,7 @@ declare class LogService {
         newComponent: string;
     }) => void;
 }
-declare const _default: LogService;
+declare const _default: LogService<{
+    message: string;
+}>;
 export default _default;

package/src/services/LogService.js

@@ -12,9 +12,14 @@ class LogService {
   };
   error = (message, ...optionalParams) => {
     if (__DEV__) {
+      // eslint-disable-next-line no-restricted-syntax
       console.error(message, ...optionalParams);
     }
   };
+  forwardError = errorInfo => {
+    // eslint-disable-next-line no-restricted-syntax
+    console.error(errorInfo.message);
+  };
   deprecationWarn = ({
     component,
     oldProp,