Chore: Upgrading react-native-web

Chore: Upgrading snapshot-diff Chore: Upgrading release-it Chore: Upgrading Jest and regenerator-runtime Chore: Upgrading flow Summary: Had to put many react-native Libraries under [untyped] in .flowconfig, will need to comment them out when new release of flow or react-native to see if these types were fixed.
kiwicom · Feb 6, 2019 · ea8cbea · ea8cbea
1 parent 8f918f6
commit ea8cbea
Show file tree

Hide file tree

Showing 20 changed files with 487 additions and 561 deletions.
diff --git a/.flowconfig b/.flowconfig
@@ -85,5 +85,23 @@ suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
 [lints]
 unnecessary-optional-chain=error
 
+; https://github.com/facebook/react-native/issues/19812#issuecomment-431893188
+[untyped]
+.*/node_modules/react-native/Libraries/Components/View/ViewPropTypes.js
+.*/node_modules/react-native/Libraries/Text/TextAncestor.js
+.*/node_modules/react-native/Libraries/Text/Text.js
+.*/node_modules/react-native/Libraries/YellowBox/UI/YellowBoxList.js
+.*/node_modules/react-native/Libraries/Image/Image.ios.js
+.*/node_modules/react-native/Libraries/StyleSheet/processTransform.js
+.*/node_modules/react-native/Libraries/StyleSheet/StyleSheetValidation.js
+.*/node_modules/react-native/Libraries/LayoutAnimation/LayoutAnimation.js
+.*/node_modules/react-native/Libraries/LayoutAnimation/LayoutAnimation.js
+.*/node_modules/react-native/Libraries/Components/Touchable/TouchableOpacity.js
+.*/node_modules/react-native/Libraries/Components/Touchable/TouchableHighlight.js
+.*/node_modules/react-native/Libraries/Components/Slider/Slider.js
+.*/node_modules/react-native/Libraries/Components/Navigation/NavigatorIOS.ios.js
+.*/node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js
+.*/node_modules/react-native/Libraries/Lists/VirtualizedSectionList.js
+
 [version]
-^0.78.0
+^0.92.1
diff --git a/package.json b/package.json
@@ -60,16 +60,16 @@
     "@storybook/react-native": "^4.0.6",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.0.0",
+    "babel-jest": "^24.1.0",
     "babel-loader": "^8.0.5",
     "babel-runtime": "^6.26.0",
     "eslint": "^5.13.0",
     "eslint-plugin-flowtype": "^3.2.1",
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react-native": "^3.6.0",
     "file-loader": "^3.0.1",
-    "flow-bin": "0.78.0",
-    "jest": "^24.0.0",
+    "flow-bin": "0.92.1",
+    "jest": "^24.1.0",
     "loki": "^0.14.2",
     "metro-react-native-babel-preset": "^0.49.1",
     "prettier": "^1.16.4",
@@ -80,13 +80,13 @@
     "react-native": "^0.57.5",
     "react-native-storybook-loader": "^1.8.0",
     "react-native-testing-library": "^1.5.0",
-    "react-native-web": "^0.9.9",
+    "react-native-web": "^0.10.0",
     "react-native-web-image-loader": "^0.0.6",
     "react-test-renderer": "16.7.0",
-    "regenerator-runtime": "^0.12.1",
-    "release-it": "^8.4.2",
+    "regenerator-runtime": "^0.13.1",
+    "release-it": "^10.0.7",
     "rimraf": "^2.6.3",
-    "snapshot-diff": "^0.4.0",
+    "snapshot-diff": "^0.5.0",
     "webpack": "^4.29.1"
   },
   "config": {

diff --git a/src/Button/ButtonInner.js b/src/Button/ButtonInner.js
@@ -62,7 +62,8 @@ export default function ButtonInner({
     >
       <View style={layout.row}>
         {leftIcon != null && <View style={layout.rightSpace}>{leftIcon}</View>}
-        {children || <ButtonTitle text={label} type={type} />}
+        {children ||
+          (label != null && <ButtonTitle text={label} type={type} />)}
       </View>
       <View style={layout.row}>
         {sublabel != null && (

diff --git a/src/Button/__tests__/__snapshots__/index.test.js.snap b/src/Button/__tests__/__snapshots__/index.test.js.snap
@@ -18,7 +18,7 @@ exports[`Button - native should match snapshot diff 1`] = `
   >
     <View>
       <View
-@@ -27,14 +27,14 @@
+@@ -27,34 +27,126 @@
               \\"paddingHorizontal\\": 8,
               \\"paddingVertical\\": 11,
             },
@@ -35,12 +35,13 @@ exports[`Button - native should match snapshot diff 1`] = `
         }
       >
         <View
-@@ -43,18 +43,110 @@
+          style={
+            Object {
               \\"alignItems\\": \\"center\\",
               \\"flexDirection\\": \\"row\\",
-            }
++           }
           }
-        >
++       >
 +         <View
 +           style={
 +             Object {
@@ -65,8 +66,8 @@ exports[`Button - native should match snapshot diff 1`] = `
 +                 },
 +                 undefined,
 +               ]
-+             }
-+           >
+              }
+            >
 +             f
 +           </Text>
 +         </View>
@@ -113,7 +114,7 @@ exports[`Button - native should match snapshot diff 1`] = `
 +           >
 +             Button sublabel
 +           </Text>
-          </View>
++         </View>
 +         <View
 +           style={
 +             Object {
@@ -142,11 +143,11 @@ exports[`Button - native should match snapshot diff 1`] = `
 +           >
 +             
 +           </Text>
-          </View>
-        </View>
-+     </View>
-+   </View>
-+ </View>"
++         </View>
++       </View>
+      </View>
+    </View>
+  </View>"
 `;
 
 exports[`Button - native should match the snapshot 1`] = `
@@ -285,16 +286,16 @@ exports[`Button - web should match snapshot diff 1`] = `
           Object {
             \\"alignItems\\": \\"center\\",
             \\"flexDirection\\": \\"row\\",
-          }
-        }
--     />
++         }
++       }
 +     >
 +       <View
 +         style={
 +           Object {
 +             \\"marginStart\\": 5,
-+           }
-+         }
+            }
+          }
+-     />
 +       >
 +         <Text
 +           style={
@@ -317,9 +318,9 @@ exports[`Button - web should match snapshot diff 1`] = `
 +         >
 +           
 +         </Text>
-        </View>
++       </View>
+      </View>
 - </button>
-+     </View>
 +   </View>
 + </a>"
 `;

diff --git a/src/CarrierLogo/__tests__/__snapshots__/index.test.js.snap b/src/CarrierLogo/__tests__/__snapshots__/index.test.js.snap
@@ -7,14 +7,34 @@ exports[`CarrierLogo should match snapshot diff 1`] = `
 - <CarrierLogo carriers={[{\\"code\\": \\"FR\\", \\"name\\": \\"Ryanair\\"}]} />
 + <CarrierLogo carriers={[{\\"code\\": \\"FR\\", \\"name\\": \\"Ryanair\\"}, {\\"code\\": \\"TO\\", \\"name\\": \\"Transavia France\\"}, {\\"code\\": \\"VY\\", \\"name\\": \\"Vueling\\"}, {\\"code\\": \\"OK\\", \\"name\\": \\"Czech Airlines\\"}]} />
 
-@@ -17,23 +17,83 @@
+@@ -17,22 +17,82 @@
     }
   >
     <Image
       source={
         Object {
 -         \\"uri\\": \\"https://images.kiwi.com/airlines/64/FR.png?default=airline.png\\",
 +         \\"uri\\": \\"https://images.kiwi.com/airlines/32/FR.png?default=airline.png\\",
++       }
++     }
++     style={
++       Array [
++         Object {
++           \\"backgroundColor\\": \\"transparent\\",
++           \\"borderRadius\\": 3,
++         },
++         Object {
++           \\"height\\": 15,
++           \\"width\\": 15,
++         },
++         false,
++       ]
++     }
++   />
++   <Image
++     source={
++       Object {
++         \\"uri\\": \\"https://images.kiwi.com/airlines/32/TO.png?default=airline.png\\",
         }
       }
       style={
@@ -27,26 +47,6 @@ exports[`CarrierLogo should match snapshot diff 1`] = `
 -           \\"height\\": 32,
 -           \\"width\\": 32,
 +           \\"height\\": 15,
-+           \\"width\\": 15,
-          },
-          false,
-        ]
-      }
-    />
-+   <Image
-+     source={
-+       Object {
-+         \\"uri\\": \\"https://images.kiwi.com/airlines/32/TO.png?default=airline.png\\",
-+       }
-+     }
-+     style={
-+       Array [
-+         Object {
-+           \\"backgroundColor\\": \\"transparent\\",
-+           \\"borderRadius\\": 3,
-+         },
-+         Object {
-+           \\"height\\": 15,
 +           \\"width\\": 15,
 +         },
 +         false,
@@ -88,10 +88,9 @@ exports[`CarrierLogo should match snapshot diff 1`] = `
 +         Object {
 +           \\"height\\": 15,
 +           \\"width\\": 15,
-+         },
-+         false,
-+       ]
-+     }
-+   />
-  </View>"
+          },
+          false,
+        ]
+      }
+    />"
 `;
diff --git a/src/Checkbox/__tests__/__snapshots__/index.test.js.snap b/src/Checkbox/__tests__/__snapshots__/index.test.js.snap
@@ -140,10 +140,10 @@ exports[`CheckBox - web should match snapshot diff 1`] = `
               \\"width\\": 20,
             },
 -           undefined,
++           false,
             false,
             false,
             false,
-+           false,
           ]
         }
 -     />

diff --git a/src/FilterButton/__tests__/__snapshots__/index.test.js.snap b/src/FilterButton/__tests__/__snapshots__/index.test.js.snap
@@ -12,11 +12,12 @@ exports[`FilterButton should match snapshot diff between active and inactive inp
 -         },
 +         false,
         ]
-@@ -57,5 +55,3 @@
-                },
+@@ -56,6 +54,4 @@
+                  \\"paddingVertical\\": 4,
+-               },
 -               Object {
 -                 \\"color\\": \\"#e8edf1\\",
--               },
+                },
 +               false,
               ],"
 `;
diff --git a/src/Hoverable/Hoverable.js b/src/Hoverable/Hoverable.js
@@ -7,7 +7,7 @@ import HoverMonitor from './HoverMonitor';
 
 type Props = {|
   +disabled?: boolean,
-  +children: React.Element<any>,
+  +children: React.Node,
   +onMouseEnter?: () => void,
   +onMouseLeave?: () => void,
 |};

diff --git a/src/Icon/Icon.js b/src/Icon/Icon.js
@@ -4,7 +4,10 @@ import * as React from 'react';
 import { Text as RNText } from 'react-native';
 import { defaultTokens } from '@kiwicom/orbit-design-tokens';
 
-import { StyleSheet } from '../PlatformStyleSheet';
+import {
+  StyleSheet,
+  type PlatformStyleObjectType,
+} from '../PlatformStyleSheet';
 import iconsMap from './icons.json';
 import type { Props } from './IconTypes';
 
@@ -33,7 +36,7 @@ export default function Icon({
   );
 }
 
-const getSizeStyle = (size: number): Object => ({
+const getSizeStyle = (size: number): $Values<PlatformStyleObjectType> => ({
   fontSize: size,
   width: size,
   height: size,

diff --git a/src/Icon/IconsList.js b/src/Icon/IconsList.js
@@ -13,6 +13,7 @@ const keyExtractor = item => item;
 const renderItem = ({ item }) => (
   <View key={item} style={styles.item}>
     <Text>{item}</Text>
+    {/* $FlowFixMe item is of type string, when enum is expected */}
     <Icon name={item} size="large" />
   </View>
 );

diff --git a/src/Notification/NotificationExample.js b/src/Notification/NotificationExample.js
@@ -11,7 +11,7 @@ import type { NotificationType } from '../types';
 type Props = {|
   +notificationStyle: 'error' | 'warning' | 'success',
   +notificationType: NotificationType,
-  +title?: React.Node | string,
+  +title: React.Node | string,
   +message: React.Node | string,
   +onDismiss?: () => void,
 |};

diff --git a/src/OptionPicker/OptionPicker.js b/src/OptionPicker/OptionPicker.js
@@ -27,13 +27,15 @@ type State = {|
 
 type Event = { nativeEvent: { key: string } };
 
-const filterSubOptionsByIds = (option, ids) => {
+const filterSubOptionsByIds = (option: OptionType, ids) => {
   const { subOptions } = option;
   // check if the subOptions exists
   if (!subOptions) return option;
 
   // filter out selected options
-  const filteredOptions = subOptions.filter(({ id }) => !ids.includes(id));
+  const filteredOptions: Array<OptionType> = subOptions.filter(
+    ({ id }) => !ids.includes(id),
+  );
   return { ...option, ...{ subOptions: filteredOptions } };
 };
 

diff --git a/src/RadioButton/RadioButton.js b/src/RadioButton/RadioButton.js
@@ -20,11 +20,13 @@ export default function RadioButton({
   label,
 }: Props) {
   const isCheckType = type === 'check';
-  const renderLabel = children || (
-    <View style={styles.label} testID="label-wrapper">
-      <Text>{label}</Text>
-    </View>
-  );
+  const renderLabel =
+    children ||
+    (label != null && label !== '' && (
+      <View style={styles.label} testID="label-wrapper">
+        <Text>{label}</Text>
+      </View>
+    ));
   return (
     <TouchableWithoutFeedback disabled={disabled} onPress={onPress}>
       <View style={[styles.wrapper, disabled && styles.wrapperDisabled, style]}>

diff --git a/src/RowOption/RowOption.js b/src/RowOption/RowOption.js
@@ -14,7 +14,7 @@ type Props = {|
   +border?: 'long' | 'short' | 'shaped',
   +type: 'localization' | 'destination' | 'airplane' | 'bus' | 'train',
   +header: string | React.Node,
-  +subheader: string | React.Node,
+  +subheader: ?(string | React.Node),
   +info?: string | React.Node,
   +onItemPress: () => void,
   +onAddPress: () => void,

diff --git a/src/RowOption/RowOptionContent.js b/src/RowOption/RowOptionContent.js
@@ -10,7 +10,7 @@ import { StyleSheet } from '../PlatformStyleSheet';
 type Props = {|
   +type: 'localization' | 'destination' | 'airplane' | 'bus' | 'train',
   +header: string | React.Node,
-  +subheader: string | React.Node,
+  +subheader: ?(string | React.Node),
   +info?: string | React.Node,
 |};
 
@@ -33,10 +33,12 @@ export default function RowOptionContent({
         {header}
       </Text>
       <View style={styles.rowDirection}>
-        <Text type="secondary" style={styles.subheader}>
-          {subheader}
-        </Text>
-        {info && (
+        {subheader != null && subheader !== '' && (
+          <Text type="secondary" style={styles.subheader}>
+            {subheader}
+          </Text>
+        )}
+        {info != null && info !== '' && (
           <View style={[styles.rowDirection, styles.padded]}>
             <View style={styles.dotSeparator} testID="dot-separator" />
             <Text type="secondary" style={styles.subheader} numberOfLines={1}>
-Original file line number
+Diff line change
@@ Expand Up @@
                   \\"width\\": 20,
                 },
     -           undefined,
+    +           false,
                 false,
                 false,
                 false,
-    +           false,
               ]
             }
     -     />
@@ Expand Down @@