Merge branch 'master' into release

lidord-wix · lidord-wix · commit f3e351202c42 · 2022-11-16T17:35:00.000+02:00
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -7,7 +7,7 @@ When contributing to this repository, please first discuss the change you wish t
 
 ## Pull Request Process
 
-1. First make sure the environment is working and synced with master. For installation details go [here](https://github.com/wix/react-native-ui-lib/blob/master/markdowns/getting-started/setup.md#demo-app)
+1. First make sure the environment is working and synced with master. For installation details go [here](https://wix.github.io/react-native-ui-lib/docs/getting-started/setup#demo-app)
 2. Before submitting a PR we suggest running `npm run pre-push` command that verifies our lint, TS and tests were not broken.
 3. Please use our PR prefixes accordingly. `fix` for bugfix, `feat` for feature, `infra` for infrastructure changes and `docs` for documentation related changes (e.g `fix/ButtonStyle`, `feat/Avatar_colorProp`)
 4. Please don't change our PR template.
diff --git a/android/build.gradle b/android/build.gradle
@@ -33,6 +33,20 @@ buildscript {
 
 allprojects {
     repositories {
+        exclusiveContent {
+           // We get React Native's Android binaries exclusively through npm,
+           // from a local Maven repo inside node_modules/react-native/.
+           // (The use of exclusiveContent prevents looking elsewhere like Maven Central
+           // and potentially getting a wrong version.)
+           filter {
+               includeGroup "com.facebook.react"
+           }
+           forRepository {
+               maven {
+                   url "$rootDir/../node_modules/react-native/android"
+               }
+           }
+        }
         maven {
             // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
             url("$rootDir/../node_modules/react-native/android")
diff --git a/demo/package.json b/demo/package.json
@@ -1,6 +1,6 @@
 {
   "name": "unicorn-demo-app",
-  "version": "1.1.14",
+  "version": "1.1.16",
   "main": "src/index.js",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",
   "license": "MIT",
@@ -20,8 +20,8 @@
     "shell-utils": "^1.0.10"
   },
   "peerDependencies": {
-    "react": "^16.0.0",
-    "react-native": "^0.51.0",
+    "react": "^18.0.0",
+    "react-native": "^0.69.1",
     "react-native-ui-lib": "*",
     "semver": "^5.5.0"
   }
diff --git a/demo/src/screens/componentScreens/PickerScreen.tsx b/demo/src/screens/componentScreens/PickerScreen.tsx
@@ -126,8 +126,8 @@ export default class PickerScreen extends Component {
           <Picker
             title="Wheel Picker"
             placeholder="Pick a Language"
-            // useNativePicker
-            useWheelPicker
+            useNativePicker
+            // useWheelPicker
             value={this.state.nativePickerValue}
             onChange={nativePickerValue => this.setState({nativePickerValue})}
             rightIconSource={dropdown}
diff --git a/expoDemo/App.tsx b/expoDemo/App.tsx
@@ -1,3 +1,4 @@
+import 'react-native-gesture-handler';
 import React from 'react';
 import {AppRegistry} from 'react-native';
 import {map} from 'lodash';
diff --git a/expoDemo/babel.config.js b/expoDemo/babel.config.js
@@ -1,6 +1,7 @@
-module.exports = function(api) {
+module.exports = function (api) {
   api.cache(true);
   return {
     presets: ['babel-preset-expo'],
+    plugins: ['react-native-reanimated/plugin']
   };
 };
diff --git a/expoDemo/package.json b/expoDemo/package.json
@@ -8,29 +8,30 @@
     "eject": "expo eject"
   },
   "dependencies": {
-    "@react-navigation/native": "^6.0.4",
-    "@react-navigation/stack": "^6.0.9",
-    "expo": "~42.0.1",
-    "expo-status-bar": "~1.0.4",
+    "@react-native/normalize-color": "^2.0.0",
+    "@react-navigation/native": "^6.0.13",
+    "@react-navigation/stack": "^6.0.13",
+    "expo": "^46.0.0",
+    "expo-status-bar": "~1.4.0",
     "fuzzysearch": "^1.0.3",
     "lodash": "^4.17.21",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "react-native": "https://github.com/expo/react-native/archive/sdk-42.0.0.tar.gz",
-    "react-native-gesture-handler": "~1.10.2",
-    "react-native-reanimated": "~2.2.0",
-    "react-native-safe-area-context": "3.2.0",
-    "react-native-screens": "~3.4.0",
-    "react-native-svg": "12.1.1",
+    "react": "18.0.0",
+    "react-dom": "18.0.0",
+    "react-native": "0.69.6",
+    "react-native-gesture-handler": "~2.5.0",
+    "react-native-reanimated": "~2.9.1",
+    "react-native-safe-area-context": "4.3.1",
+    "react-native-screens": "~3.15.0",
+    "react-native-svg": "12.3.0",
     "react-native-ui-lib": "snapshot",
-    "react-native-web": "~0.13.12",
+    "react-native-web": "~0.18.7",
     "unicorn-demo-app": "snapshot"
-  },
+  },  
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@types/react": "~16.9.35",
-    "@types/react-native": "~0.63.2",
-    "typescript": "~4.0.0"
+    "@babel/core": "^7.18.6",
+    "@types/react": "~18.0.0",
+    "@types/react-native": "~0.69.1",
+    "typescript": "^4.6.3"
   },
   "private": true
 }
diff --git a/package.json b/package.json
@@ -107,7 +107,7 @@
     "react-native-gesture-handler": "2.5.0",
     "react-native-haptic-feedback": "^1.11.0",
     "react-native-linear-gradient": "2.5.6",
-    "react-native-navigation": "7.29.0",
+    "react-native-navigation": "7.30.0",
     "react-native-reanimated": "2.8.0",
     "react-native-shimmer-placeholder": "^2.0.6",
     "react-native-svg": "^12.1.0",
diff --git a/src/components/dash/dash.api.json b/src/components/dash/dash.api.json
@@ -1,6 +1,6 @@
 {
   "name": "Dash",
-  "category": "lists",
+  "category": "infra",
   "description": "Dashed line Component",
   "images": [],
   "props": [
diff --git a/src/components/gradient/Gradient.api.json b/src/components/gradient/Gradient.api.json
@@ -1,6 +1,6 @@
 {
   "name": "Gradient",
-  "category": "overlays",
+  "category": "infra",
   "description": "Gradient Component",
   "images": [],
   "props": [
diff --git a/src/components/marquee/marquee.api.json b/src/components/marquee/marquee.api.json
@@ -2,8 +2,7 @@
   "name": "Marquee",
   "category": "media",
   "description": "Marquee component for sliding text",
-  "extends": [""],
-  "example": "",
+  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/MarqueeScreen.tsx",
   "props": [
     {"name": "label", "type": "string", "description": "Marquee label"},
     {"name": "labelStyle", "type": "TextProps['style']", "description": "Marquee label style"},
diff --git a/src/components/picker/helpers/usePickerMigrationWarnings.tsx b/src/components/picker/helpers/usePickerMigrationWarnings.tsx
@@ -3,10 +3,10 @@ import _ from 'lodash';
 import {LogService} from '../../../services';
 import {PickerProps, PickerModes} from '../types';
 
-type UsePickerMigrationWarnings = Pick<PickerProps, 'value' | 'mode'>;
+type UsePickerMigrationWarnings = Pick<PickerProps, 'value' | 'mode' | 'useNativePicker'>;
 
 const usePickerMigrationWarnings = (props: UsePickerMigrationWarnings) => {
-  const {value, mode} = props;
+  const {value, mode, useNativePicker} = props;
   useEffect(() => {
     if (mode === PickerModes.SINGLE && Array.isArray(value)) {
       LogService.warn('Picker in SINGLE mode cannot accept an array for value');
@@ -18,6 +18,10 @@ const usePickerMigrationWarnings = (props: UsePickerMigrationWarnings) => {
     if (_.isPlainObject(value)) {
       LogService.warn('UILib Picker will stop supporting passing object as value in the next major version. Please use either string or a number as value');
     }
+
+    if (useNativePicker) {
+      LogService.warn(`UILib Picker will stop supporting the 'useNativePicker' prop soon, please pass instead the 'useWheelPicker' prop and handle relevant TextField migration if required to`);
+    }
   }, []);
 };
 
diff --git a/src/components/picker/types.tsx b/src/components/picker/types.tsx
@@ -147,6 +147,7 @@ export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> &
      */
     renderCustomSearch?: (props: PickerItemsListProps) => React.ReactElement;
     /**
+     * @deprecated pass useWheelPicker prop instead
      * Allow to use the native picker solution (different style for iOS and Android)
      */
     useNativePicker?: boolean;
diff --git a/src/incubator/Dialog/index.tsx b/src/incubator/Dialog/index.tsx
@@ -1,6 +1,7 @@
 import {isEmpty} from 'lodash';
-import React, {useRef, useMemo, useCallback, useState} from 'react';
+import React, {useRef, useMemo, useCallback, useState, useImperativeHandle, forwardRef, ForwardedRef} from 'react';
 import {StyleSheet, View as RNView} from 'react-native';
+import hoistStatics from 'hoist-non-react-statics';
 import {useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
 import {PanGestureHandler} from 'react-native-gesture-handler';
 import {Spacings, Colors, BorderRadiuses} from 'style';
@@ -24,7 +25,11 @@ export interface DialogStatics {
   Header: typeof DialogHeader;
 }
 
-const Dialog = (props: DialogProps) => {
+export interface DialogImperativeMethods {
+  dismiss: () => void;
+}
+
+const Dialog = (props: DialogProps, ref: ForwardedRef<DialogImperativeMethods>) => {
   const {
     visible: propsVisibility = false,
     headerProps,
@@ -160,10 +165,14 @@ const Dialog = (props: DialogProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [containerStyle, width, height]);
 
+  useImperativeHandle(ref, () => ({
+    dismiss: animateOut
+  }));
+
   const renderDialog = () => {
     return (
       <PanGestureHandler onGestureEvent={isEmpty(directions) ? undefined : panGestureEvent}>
-        <View reanimated style={style} onLayout={onLayout} ref={setRef} testID={testID}>
+        <View pointerEvents={'box-none'} reanimated style={style} onLayout={onLayout} ref={setRef} testID={testID}>
           {headerProps && <DialogHeader {...headerProps}/>}
           {children}
         </View>
@@ -195,7 +204,9 @@ Dialog.displayName = 'Incubator.Dialog';
 Dialog.directions = DialogDirectionsEnum;
 Dialog.Header = DialogHeader;
 
-export default asBaseComponent<DialogProps, DialogStatics>(Dialog);
+const _Dialog = forwardRef<DialogImperativeMethods, DialogProps>(Dialog);
+hoistStatics(_Dialog, Dialog);
+export default asBaseComponent<DialogProps, DialogStatics>(_Dialog);
 
 const styles = StyleSheet.create({
   defaultDialogStyle: {
diff --git a/src/incubator/TextField/CharCounter.tsx b/src/incubator/TextField/CharCounter.tsx
@@ -20,7 +20,7 @@ const CharCounter = ({maxLength, charCounterStyle, testID}: CharCounterProps) =>
 
 const styles = StyleSheet.create({
   container: {
-    flex: 1,
+    flexGrow: 1,
     textAlign: 'right'
   }
 });
diff --git a/src/incubator/index.ts b/src/incubator/index.ts
@@ -7,4 +7,4 @@ export {default as TouchableOpacity, TouchableOpacityProps} from './TouchableOpa
 export {default as WheelPicker, WheelPickerProps, WheelPickerItemProps} from './WheelPicker';
 export {WheelPickerAlign} from './WheelPicker/types';
 export {default as PanView, PanViewProps, PanViewDirections, PanViewDismissThreshold} from './panView';
-export {default as Dialog, DialogProps, DialogHeaderProps, DialogStatics} from './Dialog';
+export {default as Dialog, DialogProps, DialogHeaderProps, DialogStatics, DialogImperativeMethods} from './Dialog';
diff --git a/src/incubator/toast/index.tsx b/src/incubator/toast/index.tsx
@@ -278,5 +278,6 @@ const styles = StyleSheet.create({
 });
 
 Toast.presets = ToastPresets;
+Toast.displayName = 'Incubator.Toast';
 export {ToastProps, ToastPresets};
 export default asBaseComponent<ToastProps, typeof Toast>(Toast);
diff --git a/src/style/__tests__/colors.spec.js b/src/style/__tests__/colors.spec.js
@@ -1,4 +1,5 @@
 import uut from '../colors';
+const SYSTEM_COLORS = ['grey', 'white', 'black'];
 
 describe('style/Colors', () => {
   it('should add alpha to hex color value', () => {
@@ -190,4 +191,29 @@ describe('style/Colors', () => {
       expect(uut.isDesignToken(uut.red10)).toEqual(false);
     });
   });
+
+  describe('getSystemColorByHex', () => {
+    it('should return the system color, if the color is included in the validColors array', () => {
+      expect(uut.getSystemColorByHex('#FFFFFF', SYSTEM_COLORS)).toEqual('white');
+      expect(uut.getSystemColorByHex('#000000', SYSTEM_COLORS)).toEqual('black');
+      expect(uut.getSystemColorByHex('#116DFF', [...SYSTEM_COLORS, 'blue'])).toEqual('blue30');
+      expect(uut.getSystemColorByHex('#FB6413', [...SYSTEM_COLORS, 'orange'])).toEqual('orange30');
+    });
+
+    it('should return undefined if the color is not included in validColors', () => {
+      expect(uut.getSystemColorByHex('#116DFF', SYSTEM_COLORS)).toEqual(undefined);
+      expect(uut.getSystemColorByHex('#00A87E', SYSTEM_COLORS)).toEqual(undefined);
+    });
+
+    it('without validColors array the function will return the first system color name match the color', () => {
+      expect(uut.getSystemColorByHex('#116DFF')).toEqual('blue30');
+      expect(uut.getSystemColorByHex('#00A87E')).toEqual('green30');
+    });
+
+    it('should return undefined for color that does not exist in our colors palette.', () => {
+      expect(uut.getSystemColorByHex('#5A48F5')).toEqual('violet30');
+      expect(uut.getSystemColorByHex('#5A48F5', SYSTEM_COLORS)).toEqual(undefined);
+      expect(uut.getSystemColorByHex('#5A48F5', ['primary'])).toEqual('primary');
+    });
+  });
 });
diff --git a/src/style/colors.ts b/src/style/colors.ts
@@ -145,6 +145,23 @@ export class Colors {
     return ColorName.name(color)[1];
   }
 
+  getSystemColorByHex(colorValue: string, validColors?: string[]) {
+    const color = colorStringValue(colorValue);
+    const results: string[] = [];
+
+    for (const [key, value] of Object.entries(this)) {
+      if (value.toString() === color) {
+        if (validColors?.includes(key.split(/[0-9]/)[0])) {
+          return key;
+        } else {
+          results.push(key);
+        }
+      }
+    }
+
+    return validColors ? undefined : results[0];
+  }
+
   getColorTint(colorValue: string | OpaqueColorValue, tintKey: string | number) {
     if (_.isUndefined(tintKey) || isNaN(tintKey as number) || _.isUndefined(colorValue)) {
       // console.error('"Colors.getColorTint" must accept a color and tintKey params');

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+import 'react-native-gesture-handler';`
`1`	`2`	`import React from 'react';`
`2`	`3`	`import {AppRegistry} from 'react-native';`
`3`	`4`	`import {map} from 'lodash';`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "Dash",`
`3`		`- "category": "lists",`
	`3`	`+ "category": "infra",`
`4`	`4`	`"description": "Dashed line Component",`
`5`	`5`	`"images": [],`
`6`	`6`	`"props": [`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "Gradient",`
`3`		`- "category": "overlays",`
	`3`	`+ "category": "infra",`
`4`	`4`	`"description": "Gradient Component",`
`5`	`5`	`"images": [],`
`6`	`6`	`"props": [`