Merge branch 'master' into v6-merge-master

* master: (30 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:
#	demo/src/screens/componentScreens/BadgesScreen.tsx
#	generatedTypes/components/button/index.d.ts
#	markdowns/getting-started/setup.md
#	src/components/button/index.tsx
#	src/components/card/CardSection.tsx
#	src/components/card/index.tsx
#	src/components/loaderScreen/index.js
#	src/components/modal/index.tsx
#	typings/components/Toast.d.ts
#	uilib-docs/src/templates/markdown.scss

Author: M-i-k-e-l

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

@@ -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

@@ -8,15 +8,11 @@ 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) {
@@ -103,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>
@@ -115,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={6}/>
             <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.red30} size={10}/>
             <Badge containerStyle={{marginLeft: BadgesSpace}} backgroundColor={Colors.blue30} size={14}/>

demo/src/screens/componentScreens/BadgesScreen.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,19 +1,20 @@
 import React, {Component} from 'react';
-import {View, Text, Image, Colors} from 'react-native-ui-lib';
+import {View, Text, Image, Colors, Assets} from 'react-native-ui-lib';
 import {renderBooleanOption, renderRadioGroup, renderSliderOption} from '../ExampleScreenPresenter';
 
-import cameraIcon from '../../assets/icons/cameraSelected.png';
 
 const IMAGE_URL =
   'https://images.pexels.com/photos/748837/pexels-photo-748837.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260';
-
+const BROKEN_URL = 'file:///Desktop/website/img/cupcake.jpg';
 const DEFAULT_SIZE = 100;
+
 class ImageScreen extends Component {
   state = {
     cover: true,
     showOverlayContent: false,
     overlayType: 'none',
-    margin: 0
+    margin: 0,
+    showErrorImage: false
   };
 
   renderOverlayContent() {
@@ -25,7 +26,7 @@ class ImageScreen extends Component {
             <View row centerV>
               <Image
                 style={{margin: 5, marginRight: 10}}
-                source={cameraIcon}
+                source={Assets.icons.demo.camera}
                 tintColor={overlayType !== 'none' ? Colors.white : undefined}
               />
               <Text text30 white={overlayType !== 'none'}>
@@ -35,19 +36,20 @@ class ImageScreen extends Component {
           </View>
         );
       } else {
-        return <Image style={{margin: 5}} source={cameraIcon}/>;
+        return <Image style={{margin: 5}} source={Assets.icons.demo.camera}/>;
       }
     }
   }
 
   render() {
-    const {cover, overlayType, margin} = this.state;
+    const {cover, overlayType, margin, showErrorImage} = this.state;
 
     return (
       <View flex>
         <View centerH height={250}>
           <Image
-            source={{uri: IMAGE_URL}}
+            source={{uri: showErrorImage ? BROKEN_URL : IMAGE_URL}}
+            errorSource={Assets.images.demo.brokenImage}
             cover={cover}
             overlayType={overlayType !== 'none' ? overlayType : undefined}
             style={!cover && {width: DEFAULT_SIZE, height: DEFAULT_SIZE}}
@@ -61,6 +63,7 @@ class ImageScreen extends Component {
             <View flex>
               {renderBooleanOption.call(this, 'Show as Cover Image', 'cover')}
               {renderBooleanOption.call(this, 'Show Overlay Content', 'showOverlayContent')}
+              {renderBooleanOption.call(this, 'Show Error Image', 'showErrorImage')}
               {renderRadioGroup.call(this, 'Overlay Type', 'overlayType', {none: 'none', ...Image.overlayTypes})}
               {renderSliderOption.call(this, 'Margin(margin-XX)', 'margin', {step: 4, min: 0, max: 40})}
             </View>

demo/src/screens/componentScreens/ImageScreen.tsx

@@ -1,40 +1,22 @@
 import React, {Component} from 'react';
-import {View as AnimatableView} from 'react-native-animatable';
-import {View, Text, LoaderScreen, Colors} from 'react-native-ui-lib';//eslint-disable-line
-
+import {View, Text, LoaderScreen, Colors} from 'react-native-ui-lib';
 export default class LoadingScreen extends Component {
-
   state = {
-    loading: true,
+    loading: true
   };
 
   componentDidMount() {
     setTimeout(() => {
-      this.setState({
-        animationConfig: {
-          animation: 'fadeOut',
-          onAnimationEnd: () => this.setState({loading: false}),
-        },
-      });
+      this.setState({loading: false});
     }, 2500);
   }
 
   render() {
-    const {loading, animationConfig} = this.state;
+    const {loading} = this.state;
     return (
       <View flex bg-orange70 center>
-        <Text text10>
-          Content Content Content
-        </Text>
-        {loading &&
-        <AnimatableView {...animationConfig}>
-          <LoaderScreen
-            color={Colors.blue30}
-            message="Loading..."
-            overlay
-          />
-        </AnimatableView>
-        }
+        <Text text10>Content Content Content</Text>
+        {loading && <LoaderScreen color={Colors.blue30} message="Loading..." overlay/>}
       </View>
     );
   }

demo/src/screens/componentScreens/LoadingScreen.js

@@ -84,6 +84,7 @@ export default class PickerScreen extends Component {
             placeholder="Favorite Language"
             floatingPlaceholder
             value={this.state.language}
+            enableModalBlur={false}
             onChange={item => this.setState({language: item})}
             topBarProps={{title: 'Languages'}}
             style={{color: Colors.red20}}

demo/src/screens/componentScreens/PickerScreen.js

@@ -10,6 +10,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.components.CardsScreen', () => require('./CardsScreen').default);
   registrar('unicorn.animations.CardScannerScreen', () => require('../componentScreens/CardScannerScreen').default);
   registrar('unicorn.components.CarouselScreen', () => require('./CarouselScreen').default);
+  registrar('unicorn.components.CarouselVerticalScreen', () => require('./CarouselVerticalScreen').default);
   registrar('unicorn.components.CheckboxScreen', () => require('./CheckboxScreen').default);
   registrar('unicorn.components.ChipScreen', () => require('./ChipScreen').default);
   registrar('unicorn.components.ConnectionStatusBar', () => require('./ConnectionStatusBarScreen').default);

demo/src/screens/componentScreens/index.js

@@ -2,13 +2,16 @@ const MAP_SCHEMA = {
   type: 'object',
   properties: {
     origin: {
-      type: 'string',
+      type: 'string'
     },
     destination: {
-      type: 'string',
+      type: 'string'
     },
+    applyAutofix: {
+      type: 'boolean'
+    }
   },
-  additionalProperties: false,
+  additionalProperties: false
 };
 
 module.exports = {
@@ -19,7 +22,7 @@ module.exports = {
       recommended: true,
     },
     messages: {
-      uiLib: 'Do not import directly from this source. Please use another import source (autofix available).',
+      uiLib: 'Do not import directly from this source. Please use another import source (autofix may be available).',
     },
     fixable: 'code',
     schema: [
@@ -31,12 +34,14 @@ module.exports = {
       try {
         const origin = context.options[0].origin;
         const destination = context.options[0].destination;
-        const message = `Do not import directly from '${origin}'. Please use '${destination}' (autofix available).`;
+        const applyAutofix = context.options[0].applyAutofix;
+        const autofixMessage = applyAutofix ? ' (autofix available)' : '';
+        const message = `Do not import directly from '${origin}'. Please use '${destination}'${autofixMessage}.`;
         context.report({
           node,
           message,
           fix(fixer) {
-            if (node && destination) {
+            if (node && applyAutofix && destination) {
               return fixer.replaceText(node.source, `'${destination}'`);
             }
           },