V7 (#2489)

* V7/ remove leftToggleHapticTrigger drawer (#2470)

* remove leftToggleHapticTrigger

* formatting

* Fader - FaderPosition enum remove LEFT and RIGHT cases

* V7 remove native WheelPicker (#2475)

* Remove native WheelPicker

* Remove WheelPickerDialog

* Remove WheelPickerPackage leftovers

* Remove PickerPackage(s)

* Missed one

* Remove 'style' prop from ColorPicker (#2480)

* v7_Picker (#2478)

* Migrate picker component

* Remove commented code

* Incubator Toast zIndex set to 100 as default when using Android (#2477)

* V7 primary colors (#2476)

* remove Colors.primary

* remove themeColors

* update test

* TabController - remove 'selectedIndex' prop (#2481)

* remove contentOnRight prop (#2473)

* V7 dark shadows (#2472)

* remove dark shadow presets

* update screen

* formatting

* deprecate imageSource of Avatar (#2471)

* KeyboardAwareListView - remove component (#2474)

* Remove some Skeleton props (#2482)

* Move moment to be optional dependency (#2485)

* V7_DateTimePicker (#2487)

* Migrate ChipsInput to Incubator ChipsInput (#2483)

* Migrate ChipsInput to Incubator ChipsInput

* removed old ChipsInput componenet

* Moved Incubator ChipsInput to components, fixed review notes

* V7/ ThemeManager (#2484)

* remove old theme keys and themeManager getters

* remove primaryColor from theme

* revert chipsInput change

---------

Co-authored-by: Ethan Sharabi <1780255+ethanshar@users.noreply.github.com>

* TabBar - remove component (#2467)

* v7_TextField (#2468)

* Enable text field migration

* Ignore/fix TS errors

* Move incubator TextField example screen to be the official screen

* Remove centered prop from migration since it is supported

* Remove transformer from migration list cause it is supported as formatter

* V7_KeyboardAccessoryView - remove 'iOSScrollBehavior' prop (#2469)

* KeyboardAccessoryView - remove 'iOSScrollBehavior' prop and 'iosScrollBehaviors' enum

* fix pr comments

* V7/ update colors docs (#2488)

* update colors docs

* improve docs

* add missing comma

* WheelPicker - move from incubator (#2486)

* Press is actually sync (#2459)

* Tests/Add testID to AnimatedScanner (#2458)

* add testID to AnimatedScanner

* update API

* Update src/components/animatedScanner/index.js

fix lint

---------

Co-authored-by: Inbal Tish <33805983+Inbal-Tish@users.noreply.github.com>

* Re-export WheelPicker from Incubator and add a TODO to delete

* V7 - Upgrade typescript to latest version 4.9.5 and fix errors (#2490)

* Docs - adding v6 to v7 migration guide (#2491)

---------

Co-authored-by: Lidor Dafna <66782556+lidord-wix@users.noreply.github.com>
Co-authored-by: Inbal Tish <inbalti@wix.com>
Co-authored-by: Miki Leib <38354019+M-i-k-e-l@users.noreply.github.com>
Co-authored-by: Adi Mordo <adids1221@gmail.com>
Co-authored-by: Inbal Tish <33805983+Inbal-Tish@users.noreply.github.com>
Co-authored-by: Audrius Savickas <umarasss@gmail.com>
Co-authored-by: M-i-k-e-l <michaelle@wix.com>

Author: 6 people

demo/src/index.js

@@ -130,18 +130,15 @@ module.exports = {
         return require('./screens/componentScreens/TextScreen').default;
       },
       // TODO: fix Expo issues (navigation) before un-commenting
-      // get TextFieldScreen() {
-      //   return require('./screens/componentScreens/TextFieldScreen').default;
-      // },
+      get TextFieldScreen() {
+        return require('./screens/componentScreens/TextFieldScreen').default;
+      },
       get TourScreen() {
         return require('./screens/componentScreens/TourScreen').default;
       },
       get FeatureHighlightScreen() {
         return require('./screens/componentScreens/FeatureHighlightScreen').default;
       },
-      get WheelPickerDialogScreen() {
-        return require('./screens/componentScreens/WheelPickerDialogScreen').default;
-      },
       get SliderScreen() {
         return require('./screens/componentScreens/SliderScreen').default;
       },
@@ -173,9 +170,6 @@ module.exports = {
       get SafeAreaSpacerViewScreen() {
         return require('./screens/nativeComponentScreens/SafeAreaSpacerViewScreen').default;
       },
-      get WheelPickerViewScreen() {
-        return require('./screens/nativeComponentScreens/WheelPickerViewScreen').default;
-      },
       // Full Screen components
       get EmptyStateScreen() {
         return require('./screens/componentScreens/EmptyStateScreen').default;
@@ -221,9 +215,6 @@ module.exports = {
         return require('./screens/componentScreens/ProgressBarScreen').default;
       },
       // Incubator
-      get IncubatorTextFieldScreen() {
-        return require('./screens/incubatorScreens/IncubatorTextFieldScreen').default;
-      },
       get PanViewScreen() {
         return require('./screens/incubatorScreens/PanViewScreen').default;
       },

demo/src/screens/MenuStructure.js

@@ -43,7 +43,6 @@ export const navigationData = {
         screen: 'unicorn.components.SharedTransitionScreen'
       },
       {title: 'Stack Aggregator', tags: 'stack aggregator', screen: 'unicorn.components.StackAggregatorScreen'},
-      {title: 'Wheel Picker Dialog', tags: 'wheel picker dialog', screen: 'unicorn.components.WheelPickerDialogScreen'},
       {title: 'Marquee', tags: 'sliding text', screen: 'unicorn.components.MarqueeScreen'}
     ]
   },
@@ -71,8 +70,12 @@ export const navigationData = {
       {title: 'Stepper', tags: 'stepper form', screen: 'unicorn.components.StepperScreen'},
       {title: 'Slider', tags: 'slider', screen: 'unicorn.components.SliderScreen'},
       {title: 'Switch', tags: 'switch toggle', screen: 'unicorn.components.SwitchScreen'},
-      {title: 'ChipsInput', tags: 'chips tags input form', screen: 'unicorn.components.ChipsInputScreen'},
-      {title: 'Masked Inputs', tags: 'text input form mask', screen: 'unicorn.components.MaskedInputScreen'}
+      {title: 'Masked Inputs', tags: 'text input form mask', screen: 'unicorn.components.MaskedInputScreen'},
+      {
+        title: 'WheelPicker',
+        tags: 'wheel picker spinner',
+        screen: 'unicorn.components.WheelPickerScreen'
+      }
     ]
   },
   Overlays: {
@@ -141,7 +144,6 @@ export const navigationData = {
         tags: 'native overlay',
         screen: 'unicorn.nativeComponents.HighlightOverlayViewScreen'
       },
-      {title: 'Wheel Picker', tags: 'wheel picker', screen: 'unicorn.nativeComponents.WheelPickerViewScreen'},
       {title: 'SafeArea Spacer', tags: 'native safe area', screen: 'unicorn.nativeComponents.SafeAreaSpacerViewScreen'},
       {
         title: 'KeyboardTracking (iOS)',
@@ -175,21 +177,15 @@ export const navigationData = {
     title: 'Incubator (Experimental)',
     screens: [
       {title: 'Calendar', tags: 'calendar', screen: 'unicorn.components.IncubatorCalendarScreen'},
-      {title: 'ChipsInput (New)', tags: 'chips input', screen: 'unicorn.components.IncubatorChipsInputScreen'},
+      {title: 'ChipsInput', tags: 'chips input', screen: 'unicorn.components.ChipsInputScreen'},
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
       {title: 'Dialog (New)', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
-      {title: 'TextField (New)', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},
       {title: 'Toast (New)', tags: 'toast', screen: 'unicorn.components.IncubatorToastScreen'},
       {
         title: 'ExpandableOverlay',
         tags: 'text field expandable input picker',
         screen: 'unicorn.components.IncubatorExpandableOverlayScreen'
       },
-      {
-        title: 'WheelPicker (Incubator)',
-        tags: 'wheel picker spinner experimental',
-        screen: 'unicorn.incubator.WheelPickerScreen'
-      },
       {title: 'Pan View', tags: 'pan swipe drag', screen: 'unicorn.incubator.PanViewScreen'}
     ]
   },

demo/src/screens/componentScreens/ChipScreen.tsx

@@ -1,7 +1,6 @@
-import _ from 'lodash';
 import React, {Component} from 'react';
 import {Alert} from 'react-native';
-import {Chip, Colors, Spacings, Text, Typography, View, Incubator, WheelPickerDialog, Image} from 'react-native-ui-lib';
+import {Chip, Colors, Spacings, Text, Typography, View, Image} from 'react-native-ui-lib';
 
 const avatarImage = {
   uri: 'https://randomuser.me/api/portraits/women/24.jpg'
@@ -20,64 +19,9 @@ export default class ChipScreen extends Component {
   ];
 
   state = {
-    showDialog: false,
     selectedValue: this.colors[2].label
   };
 
-  toggleDialog = (showDialog: boolean) => {
-    this.setState({showDialog});
-  };
-
-  openDialog = () => {
-    this.toggleDialog(true);
-  };
-
-  closeDialog = () => {
-    this.toggleDialog(false);
-  };
-
-  onSelect = (itemValue: string) => {
-    const values = _.filter(this.colors, {value: itemValue});
-    if (values.length > 0) {
-      this.setState({selectedValue: values[0].label});
-    }
-    this.closeDialog();
-  };
-
-  renderItem = ({item: color}) => {
-    return (
-      <Text text50 margin-20 color={color.value}>
-        {color.label}
-      </Text>
-    );
-  };
-
-  renderContent = () => {
-    const {selectedValue} = this.state;
-
-    return (
-      <WheelPickerDialog
-        items={this.colors}
-        selectedValue={selectedValue}
-        onSelect={this.onSelect}
-        onCancel={this.closeDialog}
-        wheelPickerProps={{
-          style: {width: 200}
-        }}
-      />
-    );
-  };
-
-  renderPickerDialog = () => {
-    const {showDialog} = this.state;
-
-    return (
-      <Incubator.Dialog visible={showDialog} useSafeArea bottom onDismiss={this.closeDialog}>
-        {this.renderContent()}
-      </Incubator.Dialog>
-    );
-  };
-
   renderExample = (text: string, chip: JSX.Element) => {
     return (
       <View row spread marginB-12>
@@ -90,7 +34,6 @@ export default class ChipScreen extends Component {
   render() {
     return (
       <View style={{padding: 20}}>
-        {this.renderPickerDialog()}
         <Text marginB-20 text40 $textDefault>
           Chip
         </Text>
@@ -120,12 +63,11 @@ export default class ChipScreen extends Component {
             iconStyle={{width: 24, height: 24}}
             iconProps={{tintColor: Colors.$iconDefault}}
           />)}
-        {this.renderExample('Right icon + onPress + dynamic label',
+        {this.renderExample('Right icon',
           <Chip
             label={this.state.selectedValue}
             rightIconSource={chevron}
             iconStyle={{margin: 8}}
-            onPress={this.openDialog}
           />)}
         {this.renderExample('Label + Avatar', <Chip label={'Chip'} avatarProps={{source: avatarImage, size: 20}}/>)}
         {this.renderExample('Label + Counter',