Merge branch 'master' into Infra/eslint-v2

* master: (77 commits)
  Button - refactor into smaller files (#1168)
  replace @react-native-community/picker with @react-native-picker/picker (#1063)
  Update generate types
  fix: catch undefined StatusBarManager (#1189)
  prop value shape deprecation lint rule (#1094)
  Infra/expo app fixes (#1166)
  Safe require blur-view dependency in Card (#1179)
  Update our stars count
  Update expo snack link with only supported platforms
  Export TabBarProps and fix BadgeScreen typescript errors
  Disable flipper
  Avoid passing overlayContent in CardSecion (#1187)
  Fix Carousel typings
  updating published version
  no-direct-import eslint rule - adding `applyAutofix` flag (#1183)
  Feat/image demo broken (#1173)
  Remove addItems from screen with fewItems
  Add vertical scroll to Carousel component (#1175)
  Fix Carousel gif
  Update Carousel gifs
  ...

# Conflicts:
#	eslint-rules/lib/rules/typography-deprecation.js
#	eslint-rules/package.json
#	eslint-rules/tests/lib/rules/typography-deprecation.js
#	eslint-rules/tests/typography_deprecation.json

Author: M-i-k-e-l

.github/pull_request_template.md

@@ -2,4 +2,4 @@
 *Enter description to help the reviewer understand what's the change about...*
 
 ## Changelog
-*Add a quick message for our users about this change*
+*Add a quick message for our users about this change (include Compoennt name, relevant props and general purpose of the PR)*

README.md

@@ -1,27 +1,17 @@
 <p align="center">
-UI Toolset & Components Library for React Native
-<img src="https://user-images.githubusercontent.com/1780255/64093084-a11b0300-cd5f-11e9-9175-a7b4d2b717a7.png"/>
+     <img src="https://user-images.githubusercontent.com/1780255/105469025-56759000-5ca0-11eb-993d-3568c1fd54f4.png" height="250px" style="display:block"/>
+</p>
+<p align="center">UI Toolset & Components Library for React Native</p>
+<p align="center">
+     <img src="https://user-images.githubusercontent.com/1780255/105469340-bec47180-5ca0-11eb-8986-3eb986f884d9.jpg"/>
 </p>
 
-<table>
-     <tr>
-          <td>
-               <img height="500" src="https://user-images.githubusercontent.com/1780255/72094962-3044b280-3320-11ea-8e41-aa83743bafb9.gif">
-          </td>
-          <td>
-               <img height="500" src="https://user-images.githubusercontent.com/1780255/72094961-3044b280-3320-11ea-95e2-9aa745c8b07d.gif">
-          </td>
-          <td>
-               <img height="500" src="https://user-images.githubusercontent.com/1780255/72094958-2fac1c00-3320-11ea-8f67-9d759cfa4ae1.gif">
-          </td>
-     </tr>
-</table>
-     
 
 ---
 [![Build Status](https://travis-ci.org/wix/react-native-ui-lib.svg?branch=master)](https://travis-ci.org/wix/react-native-ui-lib)
 [![npm](https://img.shields.io/npm/v/react-native-ui-lib.svg)](https://www.npmjs.com/package/react-native-ui-lib)
 [![NPM Downloads](https://img.shields.io/npm/dm/react-native-ui-lib.svg?style=flat)](https://www.npmjs.com/package/react-native-ui-lib)
+ <a href="https://twitter.com/rnuilib"><img src="https://img.shields.io/twitter/follow/rnuilib.svg?style=flat&colorA=1DA1F2&colorB=20303C&label=Follow%20us%20on%20Twitter" alt="Follow on Twitter"></a>
 
 
 Check out our [Docs](https://wix.github.io/react-native-ui-lib/). <br>

demo/src/assets/images/placeholderMissingImage.png

@@ -2,13 +2,18 @@ import {Assets, Typography, Spacings} from 'react-native-ui-lib'; // eslint-disa
 
 Assets.loadAssetsGroup('icons.demo', {
   add: require('./assets/icons/add.png'),
+  camera: require('./assets/icons/cameraSelected.png'),
   close: require('./assets/icons/close.png'),
   dashboard: require('./assets/icons/dashboard.png'),
   image: require('./assets/icons/image.png'),
   refresh: require('./assets/icons/refresh.png'),
   search: require('./assets/icons/search.png')
 });
 
+Assets.loadAssetsGroup('images.demo', {
+  brokenImage: require('./assets/images/placeholderMissingImage.png')
+});
+
 Typography.loadTypographies({
   h1: {...Typography.text40},
   h2: {...Typography.text50},

demo/src/configurations.js

@@ -34,9 +34,15 @@ module.exports = {
       get CarouselScreen() {
         return require('./screens/componentScreens/CarouselScreen').default;
       },
+      get CarouselVerticalScreen() {
+        return require('./screens/componentScreens/CarouselVerticalScreen').default;
+      },
       get CheckboxScreen() {
         return require('./screens/componentScreens/CheckboxScreen').default;
       },
+      get ChipScreen() {
+        return require('./screens/componentScreens/ChipScreen').default;
+      },
       get ConnectionStatusBarScreen() {
         return require('./screens/componentScreens/ConnectionStatusBarScreen').default;
       },
@@ -203,6 +209,10 @@ module.exports = {
       get ProgressBarScreen() {
         return require('./screens/componentScreens/ProgressBarScreen').default;
       },
+      // Incubator 
+      get IncubatorTextFieldScreen() {
+        return require('./screens/incubatorScreens/IncubatorTextFieldScreen').default;
+      },
       // realExamples
       get AppleMusic() {
         return require('./screens/realExamples/AppleMusic').default;

demo/src/index.js

@@ -181,7 +181,7 @@ class MainScreen extends Component {
           paddingV-s2
           onPress={() => this.openScreen(item)}
           onLongPress={() => this.setDefaultScreen(item)}
-          activeBackgroundColor={Colors.blue40}
+          activeBackgroundColor={Colors.primary}
           activeOpacity={1}
         >
           <Text style={[item.deprecate && styles.entryTextDeprecated]} dark10 text50>

demo/src/screens/MainScreen.js

@@ -86,6 +86,7 @@ export const navigationData = {
     title: 'Layouts & Templates',
     screens: [
       {title: 'Carousel', tags: 'carousel', screen: 'unicorn.components.CarouselScreen'},
+      {title: 'Carousel (Vertical)', tags: 'carousel', screen: 'unicorn.components.CarouselVerticalScreen'},
       {title: 'LoadingScreen', tags: 'loading screen', screen: 'unicorn.screens.LoadingScreen'},
       {title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
       {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},

demo/src/screens/MenuStructure.js

@@ -45,7 +45,7 @@ export default class ActionBarScreen extends Component {
 
           <View style={styles.page}>
             <ActionBar
-              backgroundColor={Colors.blue30}
+              backgroundColor={Colors.primary}
               actions={[
                 {label: 'Hide', onPress: () => Alert.alert('hide'), white: true},
                 {label: 'Add Discount', onPress: () => Alert.alert('add discount'), white: true},

demo/src/screens/componentScreens/ActionBarScreen.tsx

@@ -1,22 +1,18 @@
 import React, {Component} from 'react';
 import {ScrollView, StyleSheet} from 'react-native';
-import {Colors, View, Badge, Button, Text} from 'react-native-ui-lib'; //eslint-disable-line
+import {Colors, View, Badge, Button, Text, Image} from 'react-native-ui-lib'; //eslint-disable-line
 const BadgesSpace = 30;
 const plusIcon = require('../../assets/icons/chevronUp.png');
 const minusIcon = require('../../assets/icons/chevronDown.png');
 const star = require('../../assets/icons/star.png');
 const bell = require('../../assets/icons/bell.png');
 
 export default class BadgesScreen extends Component {
-  constructor(props) {
-    super(props);
+  state = {
+    value: 42
+  };
 
-    this.state = {
-      value: 42
-    };
-  }
-
-  changeLabelValue(value) {
+  changeLabelValue(value: number) {
     const currValue = this.state.value;
     const newValue = currValue + value;
     if (newValue >= 1) {
@@ -25,6 +21,23 @@ export default class BadgesScreen extends Component {
   }
 
   render() {
+    const customElement1 = (
+      <View row>
+        <Image source={bell}/>
+        <Image source={bell}/>
+      </View>
+    );
+
+    const customElement2 = (
+      <View row>
+        <Image source={bell}/>
+        <Text white text90>
+          37
+        </Text>
+        <Image source={bell}/>
+      </View>
+    );
+
     return (
       <ScrollView style={{backgroundColor: Colors.dark70}} contentContainerStyle={styles.container}>
         <Text text50 row center marginB-15>
@@ -86,7 +99,6 @@ export default class BadgesScreen extends Component {
         <View row>
           <View
             center
-            column
             style={{justifyContent: 'space-around', alignItems: 'flex-start', width: 140, height: 140}}
           >
             <Text text80 row>
@@ -98,7 +110,7 @@ export default class BadgesScreen extends Component {
             </Text>
           </View>
 
-          <View center column style={{justifyContent: 'space-around', width: 40, height: 140}}>
+          <View center style={{justifyContent: 'space-around', width: 40, height: 140}}>
             <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.green30} size={'pimpleSmall'}/>
             <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={'pimpleBig'}/>
             <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={'pimpleHuge'}/>
@@ -141,10 +153,17 @@ export default class BadgesScreen extends Component {
           Counter Icon Badges
         </Text>
         <View row paddingH-15>
-            <Badge marginR-10 label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.red30}/>
-            <Badge marginR-10 label={'4'} icon={bell} backgroundColor={Colors.red30}/>
+          <Badge marginR-10 label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.red30}/>
+          <Badge marginR-10 label={'4'} icon={bell} backgroundColor={Colors.red30}/>
         </View>
 
+        <Text text50 marginB-10 row center marginT-25>
+          Custom Element Badges
+        </Text>
+        <View row paddingH-15>
+          <Badge marginR-10 label={'17'} customElement={customElement1}/>
+          <Badge marginR-10 customElement={customElement2} backgroundColor={Colors.grey30}/>
+        </View>
       </ScrollView>
     );
   }

demo/src/screens/componentScreens/BadgesScreen.tsx

@@ -318,7 +318,7 @@ export default class ButtonsScreen extends Component {
 
             <Button
               style={{marginBottom: ButtonSpace}}
-              blue30
+              primary
               outline
               iconSource={plusIcon}
               label="Icon"
@@ -339,7 +339,7 @@ export default class ButtonsScreen extends Component {
               style={{marginBottom: ButtonSpace}}
             >
               <Image source={plusIcon} />
-              <Text style={{marginLeft: 10, color: Colors.blue30}}>
+              <Text marginL-10 primary>
                 Custom Icon
               </Text>
             </Button>

demo/src/screens/componentScreens/ButtonsScreen.tsx

@@ -0,0 +1,109 @@
+import {Carousel, Constants, Text, View, Colors} from 'react-native-ui-lib';
+import React, {Component} from 'react';
+import _ from 'lodash';
+import {StyleSheet} from 'react-native';
+import {
+  renderBooleanOption,
+  renderSliderOption
+} from '../ExampleScreenPresenter';
+
+interface Props {}
+
+interface State {
+  numberOfPagesShown: number;
+  autoplay: boolean;
+}
+
+const BACKGROUND_COLORS = [
+  Colors.red50,
+  Colors.yellow20,
+  Colors.purple50,
+  Colors.green50,
+  Colors.cyan50,
+  Colors.purple20,
+  Colors.blue60,
+  Colors.red10,
+  Colors.green20,
+  Colors.purple60
+];
+
+const pageHeight = Constants.windowHeight / 2;
+
+class CarouselVerticalScreen extends Component<Props, State> {
+  carousel = React.createRef<typeof Carousel>();
+
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      numberOfPagesShown: 5,
+      autoplay: false
+    };
+  }
+
+  render() {
+    const {numberOfPagesShown, autoplay} = this.state
+    return (
+      <View flex paddingT-20>
+        <View marginH-20 marginB-20>
+          {renderBooleanOption.call(this, 'autoplay', 'autoplay')}
+          {renderSliderOption.call(
+            this,
+            'Number of pages shown',
+            'numberOfPagesShown',
+            {
+              min: 3,
+              max: 10,
+              step: 1,
+              initial: 5
+            }
+          )}
+        </View>
+        <Carousel
+          key={'carousel'}
+          ref={this.carousel}
+          autoplay={autoplay}
+          pageWidth={Constants.windowWidth}
+          pageHeight={pageHeight}
+          initialPage={0}
+          containerStyle={{height: pageHeight}}
+          allowAccessibleLayout
+          horizontal={false}
+        >
+          {_.map([...Array(numberOfPagesShown)], (_, index) => (
+            <Page
+              style={{backgroundColor: BACKGROUND_COLORS[index]}}
+              key={index}
+            >
+              <Text style={styles.pageText}>{index}</Text>
+            </Page>
+          ))}
+        </Carousel>
+      </View>
+    );
+  }
+}
+
+// @ts-ignore
+const Page = ({children, style, ...others}) => {
+  return (
+    <View center {...others} style={[styles.page, style]}>
+      {children}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {},
+  page: {
+    flex: 1,
+    height: pageHeight,
+    width: Constants.windowWidth
+  },
+  pageText: {
+    fontSize: 40,
+    color: 'white'
+  }
+});
+
+export default CarouselVerticalScreen

demo/src/screens/componentScreens/CarouselVerticalScreen.tsx

@@ -1,10 +1,36 @@
 import React, {Component} from 'react';
-import {DateTimePicker, View, Text} from 'react-native-ui-lib'; // eslint-disable-line
+import {ScrollView} from 'react-native';
+import {DateTimePicker, Text, TouchableOpacity, Colors} from 'react-native-ui-lib'; // eslint-disable-line
 
 export default class DateTimePickerScreen extends Component {
+
+  getCustomInputValue = value => {
+    if (!value) {
+      return 'Default';
+    }
+    return value.includes(new Date().getFullYear() + 1) ? 'Next Year' : value;
+  };
+
+  renderCustomInput = (props, toggle) => {
+    const {value} = props;
+    return (
+      <TouchableOpacity
+        flex
+        row
+        spread
+        onPress={() => {
+          toggle(true);
+        }}
+      >
+        <Text>Valid from</Text>
+        <Text absR color={Colors.primary} text80BO>{this.getCustomInputValue(value)}</Text>
+      </TouchableOpacity>
+    );
+  };
+
   render() {
     return (
-      <View flex padding-s5>
+      <ScrollView style={{padding: 14}}>
         <Text text40>Date Time Picker</Text>
         <DateTimePicker
           containerStyle={{marginVertical: 20}}
@@ -37,7 +63,18 @@ export default class DateTimePickerScreen extends Component {
           placeholder={'Select time'}
           value={new Date('2015-03-25T12:00:00-06:30')}
         />
-      </View>
+        <Text text60R marginT-40>
+          Custom Input
+        </Text>
+        <DateTimePicker
+          containerStyle={{marginVertical: 20}}
+          title={'Date'}
+          placeholder={'Select a date'}
+          renderExpandableInput={this.renderCustomInput}
+          dateFormat={'MMM D, YYYY'}
+          // value={new Date('2015-03-25T12:00:00-06:30')}
+        />
+      </ScrollView>
     );
   }
 }