Merge branch 'master' into feat/new-pan-view-with-reanimated-2

* master:
  Upgrade eslint-plugin-uilib to version 2.0.09
  Typescript/wizard move to typescript (#1390)
  Feat/hint add props (#1399)
  Separate radioGroup and radioButton to fix their packages (#1388)
  Typescript/connection status bar (#1384)
  Fix typescript migration bug, code should enter here to calcylate tip position also when width is undefined (casting to 0) (#1396)
  Fix an exception with hard coded color rule (#1394)
  Add onChange to dependency array (#1391)
  fix colorPicker ts error
  Update stale.yml
  Typescript/general missing typings (#1389)
  fix hint animation (#1363)
  using renderInput instead renderExpandableInput was left out (#1386)
  DateTimePicker - Implement theme variant prop (#1357)
  Infra/Migrate Incubator.WheelPicker to reanimated 2 (#1379)
  Remove old typings that were migrated to generatedTypes
  Fix Hint export in generatedType/index
  Update react-native-gesture-handler to version 1.10.3
  Fix export of AvatarHelper in src/index.ts (#1376)
  ExampleScreenPresenter - fix typo (#1374)

Author: M-i-k-e-l

.github/stale.yml

@@ -14,8 +14,6 @@ onlyLabels: []
 exemptLabels:
   - pinned
   - WIP
-  - bug
-  - "feature request"
   - "typescript"
 
 # Set to true to ignore issues in a project (defaults to false)

demo/src/screens/ExampleScreenPresenter.js

@@ -44,7 +44,7 @@ export function renderBooleanGroup(title, options) {
                 marginR-s2
                 useCustomTheme
                 key={key}
-                textID={key}
+                testID={key}
                 value={value}
                 onValueChange={value => this.setState({[key]: value})}
               />

demo/src/screens/componentScreens/ConnectionStatusBarScreen.js renamed to demo/src/screens/componentScreens/ConnectionStatusBarScreen.tsx

@@ -2,15 +2,19 @@ import React, {Component} from 'react';
 import {View, Text, StyleSheet} from 'react-native';
 import {ConnectionStatusBar, Typography, Colors} from 'react-native-ui-lib'; //eslint-disable-line
 
+type ConnectionStatusBarScreenState = {
+  isConnected: boolean;
+};
+
 ConnectionStatusBar.registerGlobalOnConnectionLost(() => {
   // console.warn('what what?!? connection has been lost');
 });
 
-export default class ConnectionStatusBarScreen extends Component {
-  constructor(props) {
+export default class ConnectionStatusBarScreen extends Component<{}, ConnectionStatusBarScreenState> {
+  constructor(props: any) {
     super(props);
     this.state = {
-      isConnected: true,
+      isConnected: true
     };
   }
 
@@ -25,7 +29,7 @@ export default class ConnectionStatusBarScreen extends Component {
             textAlign: 'center',
             marginBottom: 10,
             ...Typography.text60,
-            color: Colors.dark40,
+            color: Colors.dark40
           }}
         >
           Turn your wifi on/off to see the component in action
@@ -43,6 +47,6 @@ const styles = StyleSheet.create({
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
-    paddingHorizontal: 25,
-  },
+    paddingHorizontal: 25
+  }
 });

demo/src/screens/componentScreens/DateTimePickerScreen.js

@@ -70,7 +70,7 @@ export default class DateTimePickerScreen extends Component {
           containerStyle={{marginVertical: 20}}
           title={'Date'}
           placeholder={'Select a date'}
-          renderExpandableInput={this.renderCustomInput}
+          renderInput={this.renderCustomInput}
           dateFormat={'MMM D, YYYY'}
           // value={new Date('2015-03-25T12:00:00-06:30')}
         />

demo/src/screens/componentScreens/HintsScreen.tsx

@@ -1,8 +1,11 @@
+import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert} from 'react-native';
-import {View, Text, Hint, Button, RadioGroup, RadioButton, Switch} from 'react-native-ui-lib'; //eslint-disable-line
+import {Colors, View, Text, Hint, Button, RadioGroup, RadioButton, Switch} from 'react-native-ui-lib';
+
 
 const settingsIcon = require('../../assets/icons/settings.png');
+const reactions = ['❤️', '😮', '😔', '😂', '😡'];
 
 type HintScreenProps = {};
 type HintScreenState = {
@@ -14,11 +17,14 @@ type HintScreenState = {
   useTargetFrame?: boolean;
   useSideTip?: boolean;
   showCustomContent?: boolean;
+  showReactionStrip?: boolean;
+  enableShadow?: boolean
 };
 
 export default class HintsScreen extends Component<HintScreenProps, HintScreenState> {
   constructor(props: HintScreenProps) {
     super(props);
+
     this.state = {
       showHint: true,
       useShortMessage: false,
@@ -27,20 +33,46 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
       targetPosition: 'flex-start',
       // useTargetFrame: true,
       useSideTip: false,
-      showCustomContent: false
+      showCustomContent: false,
+      showReactionStrip: false,
+      enableShadow: false
     };
   }
 
-  componentDidMount() {}
-
   toggleHintPosition = () => {
     this.setState({
       showBottomHint: !this.state.showBottomHint
     });
   };
 
   onHintPressed = () => {
-    alert('Hint Pressed');
+    Alert.alert('Hint Pressed');
+  }
+
+  onReactionPress = () => {
+    Alert.alert('Reaction button pressed');
+  }
+
+  renderCustomContent() {
+    return (
+      <Text text70 white>
+        Click
+        <Text onPress={() => Alert.alert('custom content :)')} text70BO red40>
+          {' here '}
+        </Text>
+        for more information
+      </Text>
+    );
+  }
+
+  renderReactionStrip() {
+    return (
+      <View row padding-8>
+        {_.map(reactions, (item, index) => (
+          <Button round link key={index} label={item} onPress={this.onReactionPress}/>
+        ))}
+      </View>
+    );
   }
 
   render() {
@@ -52,12 +84,14 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
       useShortMessage,
       useSideTip,
       useTargetFrame,
-      showCustomContent
+      showCustomContent,
+      showReactionStrip,
+      enableShadow
     } = this.state;
     const targetFrame = {x: 140, y: 100, width: 10, height: 10};
-    const message = useShortMessage
-      ? 'Add other cool and useful stuff.'
-      : 'Add other cool and useful stuff through adding apps to your visitors to enjoy.';
+    const message = useShortMessage ? 
+      'Add other cool and useful stuff.' : 
+      'Add other cool and useful stuff through adding apps to your visitors to enjoy.';
 
     return (
       <View flex>
@@ -95,16 +129,12 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
             // edgeMargins={30}
             // onBackgroundPress={() => this.setState({showHint: !showHint})}
             customContent={
-              showCustomContent ? (
-                <Text text70 white>
-                  Click
-                  <Text onPress={() => Alert.alert('custom content :)')} text70BO red40>
-                    {' here '}
-                  </Text>
-                  for more information
-                </Text>
-              ) : undefined
+              showCustomContent ? 
+                this.renderCustomContent() : showReactionStrip ? this.renderReactionStrip() : undefined
             }
+            color={!showCustomContent && showReactionStrip ? Colors.white : undefined}
+            removePaddings={!showCustomContent && showReactionStrip}
+            enableShadow={enableShadow}
             testID={'Hint'}
           >
             {!useTargetFrame && (
@@ -174,6 +204,11 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
             <Text marginL-10>Toggle Icon</Text>
           </View>
 
+          <View row centerV marginV-10>
+            <Switch value={enableShadow} onValueChange={value => this.setState({enableShadow: value})}/>
+            <Text marginL-10>Toggle shadow</Text>
+          </View>
+
           <View row centerV marginV-10>
             <Switch value={useTargetFrame} onValueChange={value => this.setState({useTargetFrame: value})}/>
             <Text marginL-10>Use random position</Text>
@@ -183,6 +218,14 @@ export default class HintsScreen extends Component<HintScreenProps, HintScreenSt
             <Switch value={showCustomContent} onValueChange={value => this.setState({showCustomContent: value})}/>
             <Text marginL-10>Show custom content</Text>
           </View>
+
+          <View row centerV marginV-10>
+            <Switch 
+              value={showReactionStrip} 
+              onValueChange={value => this.setState({showReactionStrip: value, enableShadow: true})}
+            />
+            <Text marginL-10>Show reaction strip</Text>
+          </View>
         </View>
       </View>
     );

demo/src/screens/componentScreens/WizardScreen.js renamed to demo/src/screens/componentScreens/WizardScreen.tsx

@@ -9,25 +9,30 @@ const stepTypes = _.map(Wizard.States, state => {
   return <Text key={state}>{state}</Text>;
 });
 
-export default class WizardScreen extends Component {
-  constructor(props) {
-    super(props);
+interface State {
+  activeIndex: number;
+  completedStepIndex?: number;
+  allTypesIndex: number;
+  selectedFlavor: string;
+  customerName?: string;
+  toastMessage?: string;
+}
 
-    this.state = {
-      activeIndex: 0,
-      completedStepIndex: undefined,
-      allTypesIndex: 0,
-      selectedFlavor: initialFlavor,
-      customerName: undefined,
-      toastMessage: undefined
-    };
-  }
+export default class WizardScreen extends Component<{}, State> {
+  state = {
+    activeIndex: 0,
+    completedStepIndex: undefined,
+    allTypesIndex: 0,
+    selectedFlavor: initialFlavor,
+    customerName: undefined,
+    toastMessage: undefined
+  };
 
-  onActiveIndexChanged = activeIndex => {
+  onActiveIndexChanged = (activeIndex: number) => {
     this.setState({activeIndex});
   };
 
-  onAllTypesIndexChanged = allTypesIndex => {
+  onAllTypesIndexChanged = (allTypesIndex: number) => {
     this.setState({allTypesIndex});
   };
 
@@ -88,7 +93,7 @@ export default class WizardScreen extends Component {
     }
   };
 
-  renderNextButton = disabled => {
+  renderNextButton = (disabled?: boolean) => {
     const {activeIndex} = this.state;
     const label = activeIndex === 2 ? 'done & reset' : 'next';
 
@@ -104,12 +109,12 @@ export default class WizardScreen extends Component {
     );
   };
 
-  renderFlavorRadioButton = index => {
+  renderFlavorRadioButton = (index: number) => {
     const value = flavors[index];
     return <RadioButton testID={value} marginL-10={index > 0} value={value} label={value}/>;
   };
 
-  setSelectedFlavor = selectedFlavor => {
+  setSelectedFlavor = (selectedFlavor: string) => {
     this.setState({selectedFlavor});
   };
 
@@ -130,7 +135,7 @@ export default class WizardScreen extends Component {
     );
   };
 
-  onNameEntered = customerName => {
+  onNameEntered = (customerName: string) => {
     this.setState({customerName});
   };
 
@@ -178,7 +183,7 @@ export default class WizardScreen extends Component {
     }
   };
 
-  getStepState(index) {
+  getStepState(index: number) {
     const {activeIndex, completedStepIndex} = this.state;
     let state = Wizard.States.DISABLED;
     if (completedStepIndex > index - 1) {