Revert "Merge branch 'master' into fix/picker_multiValue"

This reverts commit b9f020e, reversing
changes made to 834d846.

Author: lidord-wix

demo/src/screens/MenuStructure.js

@@ -154,7 +154,6 @@ export const navigationData = {
     title: 'Incubator (Experimental)',
     screens: [
       {title: 'Native TouchableOpacity', tags: 'touchable native', screen: 'unicorn.incubator.TouchableOpacityScreen'},
-      {title: '(New) Dialog', tags: 'dialog modal popup alert', screen: 'unicorn.incubator.IncubatorDialogScreen'},
       {title: '(New) TextField', tags: 'text field input', screen: 'unicorn.components.IncubatorTextFieldScreen'},
       {title: 'ExpandableOverlay', tags: 'text field expandable input picker', screen: 'unicorn.components.IncubatorExpandableOverlayScreen'},
       {title: 'WheelPicker (Incubator)', tags: 'wheel picker spinner experimental', screen: 'unicorn.incubator.WheelPickerScreen'},

demo/src/screens/componentScreens/PickerScreen.js

@@ -171,7 +171,7 @@ export default class PickerScreen extends Component {
             onChange={filter => this.setState({filter})}
             renderPicker={({label}) => {
               return (
-                <View row>
+                <View row center>
                   <Image style={{marginRight: 1, height: 16, resizeMode: 'contain'}} source={tagIcon}/>
                   <Text grey10 text80>
                     {label} Posts
@@ -194,7 +194,7 @@ export default class PickerScreen extends Component {
             getItemValue={contact => contact.name}
             renderPicker={contact => {
               return (
-                <View row>
+                <View row center>
                   <Avatar size={30} source={{uri: contact.thumbnail}}/>
                   <Text text70 marginL-10>
                     {contact.name}

demo/src/screens/incubatorScreens/IncubatorDialogScreen.tsx

@@ -89,10 +89,11 @@ export default class TextFieldScreen extends Component {
         </Text>
         <Incubator.ExpandableOverlay
           ref={this.expandableInputRef}
-          modalProps={{animationType: 'slide', onDismiss: () => console.warn('Modal is dismissed')}}
+          modalProps={{animationType: 'slide'}}
           expandableContent={this.renderInputModal()}
           showTopBar
           topBarProps={{title: 'Edit Input', doneLabel: 'Done', onCancel: this.onCancel, onDone: this.onDone}}
+          dialogProps={{bottom: true}}
         >
           <Incubator.TextField placeholder="Expandable input" value={textFieldValue}/>
         </Incubator.ExpandableOverlay>
@@ -111,7 +112,7 @@ export default class TextFieldScreen extends Component {
           ref={this.expandablePickerRef}
           useDialog
           expandableContent={this.renderPickerContent()}
-          dialogProps={{bottom: true, onDismiss: () => console.warn('Dialog is dismissed')}}
+          dialogProps={{bottom: true}}
         >
           {this.renderColorRow(selectedColor)}
         </Incubator.ExpandableOverlay>

demo/src/screens/incubatorScreens/IncubatorExpandableOverlayScreen.tsx

@@ -5,16 +5,16 @@ const {TransitionView} = Incubator;
 import {renderRadioGroup} from '../ExampleScreenPresenter';
 
 interface State {
-  enterDirection: Incubator.TransitionViewDirection;
-  exitDirection: Incubator.TransitionViewDirection;
+  enterDirection: Incubator.Direction;
+  exitDirection: Incubator.Direction;
   key: number;
 }
 
 export default class TransitionViewScreen extends Component<{}, State> {
   private ref = React.createRef<typeof TransitionView>();
   state = {
-    enterDirection: Incubator.TransitionViewDirectionEnum.LEFT,
-    exitDirection: Incubator.TransitionViewDirectionEnum.DOWN,
+    enterDirection: 'left' as Incubator.Direction,
+    exitDirection: 'bottom' as Incubator.Direction,
     key: 1
   };
 
@@ -30,16 +30,21 @@ export default class TransitionViewScreen extends Component<{}, State> {
     const {key, enterDirection, exitDirection} = this.state;
     return (
       <View padding-20 bg-grey80 flex>
-        {renderRadioGroup.call(this, 'Enter direction', 'enterDirection', Incubator.TransitionViewDirectionEnum, {
-          isRow: true
-        })}
-        {renderRadioGroup.call(this, 'Exit direction', 'exitDirection', Incubator.TransitionViewDirectionEnum, {
-          isRow: true
-        })}
+        {renderRadioGroup.call(this,
+          'Enter direction',
+          'enterDirection',
+          {top: 'top', bottom: 'bottom', left: 'left', right: 'right'},
+          {isRow: true})}
+        {renderRadioGroup.call(this,
+          'Exit direction',
+          'exitDirection',
+          {top: 'top', bottom: 'bottom', left: 'left', right: 'right'},
+          {isRow: true})}
         <Button label="Refresh" onPress={() => this.setState({key: key + 1})}/>
         <View flex center>
           <TransitionView
             key={`${key}`}
+            // @ts-expect-error
             ref={this.ref}
             enterFrom={enterDirection}
             exitTo={exitDirection}

demo/src/screens/incubatorScreens/TransitionViewScreen.tsx

@@ -3,7 +3,6 @@ import {gestureHandlerRootHOC} from 'react-native-gesture-handler';
 export function registerScreens(registrar) {
   registrar('unicorn.incubator.TouchableOpacityScreen', () =>
     gestureHandlerRootHOC(require('./TouchableOpacityScreen').default));
-  registrar('unicorn.incubator.IncubatorDialogScreen', () => require('./IncubatorDialogScreen').default);
   registrar('unicorn.components.IncubatorExpandableOverlayScreen', () => require('./IncubatorExpandableOverlayScreen').default);
   registrar('unicorn.components.IncubatorTextFieldScreen', () => require('./IncubatorTextFieldScreen').default);
   registrar('unicorn.incubator.PanViewScreen', () => require('./PanViewScreen').default);

demo/src/screens/incubatorScreens/index.js

@@ -1,9 +1,8 @@
 ---
-sidebar_position: 3
-sidebar_label: Assets
+index: 6
+path: "/foundation/assets"
 title: "Assets"
 ---
-
 Assets are a big part of the whole UI system, whether it's an icon, placeholder or an illustration, we use them everywhere.  
 Load groups of assets and easily render them with the _Image_ component.
 

docs/foundation/assets.md

@@ -1,10 +1,10 @@
 ---
-sidebar_position: 2
-sidebar_label: Colors
+sidebar_position: 7
+path: "/foundation/colors"
 title: "Colors"
 ---
 
-### loadColors
+#### loadColors
 Load a set of colors to be used in the app.  
 These colors will be accessible through the Colors class and as modifiers.
 usage:
@@ -27,7 +27,7 @@ import {View, Text, Colors} from 'react-native-ui-lib';
 <View>
 ```
 
-### loadSchemes
+#### loadSchemes
 Load a set of scheme colors to support dark/light mode.  
 This feature works hand in hand with our modifiers 
 
@@ -58,7 +58,7 @@ Colors.loadSchemes({
 </View>
 ```
 
-### rgba
+#### rgba
 usage:
 ```js
 import {Colors} from 'react-native-ui-lib';
@@ -67,7 +67,7 @@ Colors.rgba('#ff2442', 0.05); // 'rgb(255, 36, 66, 0.05)'
 Colors.rgba(44, 224, 112, 0.2); // 'rgb(44, 224, 112, 0.2)'
 ```
 
-### getColorTint
+#### getColorTint
 usage:
 ```js
 import {Colors} from 'react-native-ui-lib';
@@ -76,7 +76,7 @@ Colors.getColorTint(Colors.green30, 70); // will return the value of Colors.gree
 Colors.getColorTint('#ff2442', 50); // will return the 5th tint in an autogenerate 8-tints palette based on '#ff2442'
 ```
 
-### isDark
+#### isDark
 returns `true` if a color is considered dark (bright colors will return `false`)
 ```js
 import {Colors} from 'react-native-ui-lib';

docs/foundation/colors.md

@@ -1,9 +1,8 @@
 ---
-sidebar_position: 4
-sidebar_label: Modifiers
+index: 5
+path: "/foundation/modifiers"
 title: "Modifiers"
 ---
-
 As you have probably noticed already, we translate our style presets into modifiers.  
 **Modifiers** help you create a stunning UI easily and quickly.
 

docs/foundation/modifiers.md

@@ -1,9 +1,8 @@
 ---
-sidebar_position: 1
-sidebar_label: Style
+sidebar_position: 4
+path: "/foundation/style"
 title: "Style"
 ---
-
 The base foundation of each UI component is its style.
 We use basic style presets to define the rules and the style guide we follow.
 

docs/foundation/style.md

@@ -1,9 +1,8 @@
 ---
-sidebar_position: 5
-sidebar_label: ThemeManager
-title: "ThemeManager"
+index: 7
+path: "/foundation/theme-manager"
+title: "Theme Manager"
 ---
-
 Use `ThemeManager` to set default global behavior for your app.
 
 #### setComponentTheme

docs/foundation/theme-manager.md

@@ -1,8 +1,8 @@
 ---
+index: 1
 sidebar_position: 1
-sidebar_label: Setup
+path: "/getting-started/setup"
 title: "Setup"
-# path: "/getting-started/setup"
 ---
 
 ## Before You Start: UILib Packages

docs/getting-started/setup.md

@@ -1,8 +1,8 @@
 ---
+index: 2
 sidebar_position: 2
-sidebar_label: Usage
+path: "/getting-started/usage"
 title: "Usage"
-# path: "/getting-started/usage"
 ---
 This is a quick example of how to use our basic components, modifiers and presets to generate a good looking screen.  
 For detailed information please go over the other sections: [Style](../foundation/style.md), [Modifiers](../foundation/modifiers.md), Components...

docs/getting-started/usage.md

@@ -1,8 +1,8 @@
 ---
+index: 3
 sidebar_position: 3
-sidebar_label: Migrating v4 -> v5
-title: "Migrating v4 -> v5"
-# path: "/getting-started/v5"
+path: "/getting-started/v5"
+title: "v4 -> v5"
 ---
 ## `[email protected]`
 

docs/getting-started/v5.md

@@ -1,8 +1,7 @@
 ---
-sidebar_position: 4
-sidebar_label: Migrating v5 -> v6
-title: "Migrating v5 -> v6"
-# path: "/getting-started/v6"
+index: 3.5
+path: "/getting-started/v6"
+title: "v5 -> v6"
 ---
 ## `[email protected]`
 

docs/getting-started/v6.md

@@ -16,7 +16,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
     projectName: 'react-native-ui-lib', // Usually your repo name.
     customFields: {
       expoSnackLink: 'https://snack.expo.io/@ethanshar/rnuilib_snack?platform=ios&supportedPlatforms=ios,android',
-      stars: '3.8'
+      stars: '3.8',
     },
     plugins: ['docusaurus-plugin-sass'],
     presets: [

docuilib/docusaurus.config.js

@@ -27,29 +27,22 @@ module.exports = {
     {
       type: 'category',
       label: 'Getting Started',
-      collapsed: false,
-      items: [
-        {
-          type: 'autogenerated',
-          dirName: `getting-started`
-        }
-      ]
+      items: ['getting-started/setup', 'getting-started/usage', 'getting-started/v5', 'getting-started/v6']
     },
     {
       type: 'category',
       label: 'Foundation',
-      collapsed: false,
       items: [
-        {
-          type: 'autogenerated',
-          dirName: `foundation`
-        }
+        'foundation/style',
+        'foundation/modifiers',
+        'foundation/assets',
+        'foundation/theme-manager',
+        'foundation/colors'
       ]
     },
     {
       type: 'category',
       label: 'Components',
-      collapsible: false,
       items: ['Basic', 'Form', 'Overlays', 'Layout', 'Lists', 'Native', 'Incubator'].map(category => {
         return {
           type: 'category',