revert(components): undo splitting web and mobile

docs/package.json

@@ -56,8 +56,6 @@
     "codelyzer": "^5.0.1",
     "protractor": "^5.3.2",
     "stylelint": "7.13.0",
-    "tslint": "5.8.0",
-    "typescript": "3.4.5",
     "uglify-es": "3.3.9",
     "uglifyjs-webpack-plugin": "2.1.2"
   },

jest.config.js

@@ -10,6 +10,8 @@ module.exports = {
   ],
   modulePathIgnorePatterns: [
     '<rootDir>/src/playground/',
+    '<rootDir>/src/template-js/',
+    '<rootDir>/src/template-ts/',
   ],
   testPathIgnorePatterns: [
     '<rootDir>/node_modules',

package.json

@@ -29,13 +29,13 @@
   "devDependencies": {
     "@babel/core": "^7.6.2",
     "@eva-design/eva": "^1.3.0",
-    "@types/gulp": "ts3.5",
-    "@types/gulp-replace": "ts3.5",
-    "@types/jest": "ts3.5",
-    "@types/lodash.merge": "ts3.5",
-    "@types/react-native": "ts3.5",
-    "@types/react-test-renderer": "ts3.5",
-    "@types/rimraf": "ts3.5",
+    "@types/gulp": "ts3.7",
+    "@types/gulp-replace": "ts3.7",
+    "@types/jest": "ts3.7",
+    "@types/lodash.merge": "ts3.7",
+    "@types/react-native": "ts3.7",
+    "@types/react-test-renderer": "ts3.7",
+    "@types/rimraf": "ts3.7",
     "babel-jest": "^24.9.0",
     "babel-plugin-module-resolver": "^3.2.0",
     "change-case": "^3.1.0",
@@ -57,7 +57,7 @@
     "tscpaths": "0.0.9",
     "tslint": "^5.12.1",
     "typedoc": "^0.15.3",
-    "typescript": "^3.5.1"
+    "typescript": "^3.7.3"
   },
   "resolutions": {
     "react": "~16.9.0",

src/components/ui/avatar/avatar.component.tsx

@@ -17,12 +17,11 @@ import {
   StyleType,
 } from '@kitten/theme';
 
-interface ComponentProps {
+export interface AvatarProps extends StyledComponentProps, ImageProps {
   shape?: string;
   size?: string;
 }
 
-export type AvatarProps = StyledComponentProps & ImageProps & ComponentProps;
 export type AvatarElement = React.ReactElement<AvatarProps>;
 
 /**

src/components/ui/bottomNavigation/bottomNavigation.component.tsx

@@ -25,14 +25,13 @@ import {
 
 type ChildrenProp = BottomNavigationTabElement | BottomNavigationTabElement[];
 
-interface ComponentProps {
+export interface BottomNavigationProps extends StyledComponentProps, ViewProps {
   children: ChildrenProp;
   selectedIndex?: number;
   indicatorStyle?: StyleProp<ViewStyle>;
   onSelect?: (index: number) => void;
 }
 
-export type BottomNavigationProps = StyledComponentProps & ViewProps & ComponentProps;
 export type BottomNavigationElement = React.ReactElement<BottomNavigationProps>;
 
 /**

src/components/ui/bottomNavigation/bottomNavigationTab.component.tsx

@@ -7,13 +7,15 @@
 import React from 'react';
 import {
   ImageStyle,
+  Platform,
   StyleProp,
   StyleSheet,
   TextStyle,
   TouchableOpacity,
   TouchableOpacityProps,
 } from 'react-native';
 import {
+  Interaction,
   styled,
   StyledComponentProps,
   StyleType,
@@ -23,19 +25,23 @@ import {
   TextElement,
 } from '../text/text.component';
 import { IconElement } from '../icon/icon.component';
-import { isValidString } from '../support/services';
+import {
+  isValidString,
+  WebEventResponder,
+  WebEventResponderCallbacks,
+  WebEventResponderInstance,
+} from '../support/services';
 
 type IconProp = (style: ImageStyle) => IconElement;
 
-interface ComponentProps {
+export interface BottomNavigationTabProps extends StyledComponentProps, TouchableOpacityProps {
   title?: string;
   titleStyle?: StyleProp<TextStyle>;
   icon?: IconProp;
   selected?: boolean;
   onSelect?: (selected: boolean) => void;
 }
 
-export type BottomNavigationTabProps = StyledComponentProps & TouchableOpacityProps & ComponentProps;
 export type BottomNavigationTabElement = React.ReactElement<BottomNavigationTabProps>;
 
 /**
@@ -63,10 +69,23 @@ export type BottomNavigationTabElement = React.ReactElement<BottomNavigationTabP
  *
  * @example BottomNavigationTabInlineStyling
  */
-export class BottomNavigationTabComponent extends React.Component<BottomNavigationTabProps> {
+export class BottomNavigationTabComponent extends React.Component<BottomNavigationTabProps>
+  implements WebEventResponderCallbacks {
 
   static styledComponentName: string = 'BottomNavigationTab';
 
+  private webEventResponder: WebEventResponderInstance = WebEventResponder.create(this);
+
+  // WebEventResponderCallbacks
+
+  public onMouseEnter = (): void => {
+    this.props.dispatch([Interaction.HOVER]);
+  };
+
+  public onMouseLeave = (): void => {
+    this.props.dispatch([]);
+  };
+
   private onPress = (): void => {
     if (this.props.onSelect) {
       this.props.onSelect(!this.props.selected);
@@ -146,7 +165,8 @@ export class BottomNavigationTabComponent extends React.Component<BottomNavigati
       <TouchableOpacity
         activeOpacity={1.0}
         {...restProps}
-        style={[container, styles.container, style]}
+        {...this.webEventResponder.eventHandlers}
+        style={[container, styles.container, webStyles.container, style]}
         onPress={this.onPress}>
         {iconElement}
         {titleElement}
@@ -164,4 +184,11 @@ const styles = StyleSheet.create({
   icon: {},
 });
 
+const webStyles = Platform.OS === 'web' && StyleSheet.create({
+  container: {
+    // @ts-ignore
+    outlineWidth: 0,
+  },
+});
+
 export const BottomNavigationTab = styled<BottomNavigationTabProps>(BottomNavigationTabComponent);

src/components/ui/button/button.component.tsx

@@ -8,6 +8,7 @@ import React from 'react';
 import {
   GestureResponderEvent,
   ImageStyle,
+  Platform,
   StyleProp,
   StyleSheet,
   TextStyle,
@@ -25,19 +26,23 @@ import {
   TextElement,
 } from '../text/text.component';
 import { IconElement } from '../icon/icon.component';
-import { isValidString } from '../support/services';
+import {
+  isValidString,
+  WebEventResponder,
+  WebEventResponderCallbacks,
+  WebEventResponderInstance,
+} from '../support/services';
 
 type IconProp = (style: ImageStyle) => IconElement;
 
-interface ComponentProps {
+export interface ButtonProps extends StyledComponentProps, TouchableOpacityProps {
   textStyle?: StyleProp<TextStyle>;
   icon?: IconProp;
   status?: string;
   size?: string;
   children?: string;
 }
 
-export type ButtonProps = StyledComponentProps & TouchableOpacityProps & ComponentProps;
 export type ButtonElement = React.ReactElement<ButtonProps>;
 
 /**
@@ -84,10 +89,30 @@ export type ButtonElement = React.ReactElement<ButtonProps>;
  *
  * @overview-example ButtonWithIcon
  */
-export class ButtonComponent extends React.Component<ButtonProps> {
+export class ButtonComponent extends React.Component<ButtonProps> implements WebEventResponderCallbacks {
 
   static styledComponentName: string = 'Button';
 
+  private webEventResponder: WebEventResponderInstance = WebEventResponder.create(this);
+
+  // WebEventResponderCallbacks
+
+  public onMouseEnter = (): void => {
+    this.props.dispatch([Interaction.HOVER]);
+  };
+
+  public onMouseLeave = (): void => {
+    this.props.dispatch([]);
+  };
+
+  public onFocus = (): void => {
+    this.props.dispatch([Interaction.FOCUSED]);
+  };
+
+  public onBlur = (): void => {
+    this.props.dispatch([]);
+  };
+
   private onPress = (event: GestureResponderEvent): void => {
     if (this.props.onPress) {
       this.props.onPress(event);
@@ -181,7 +206,8 @@ export class ButtonComponent extends React.Component<ButtonProps> {
       <TouchableOpacity
         activeOpacity={1.0}
         {...containerProps}
-        style={[container, styles.container, style]}
+        {...this.webEventResponder.eventHandlers}
+        style={[container, styles.container, webStyles.container, style]}
         onPress={this.onPress}
         onPressIn={this.onPressIn}
         onPressOut={this.onPressOut}>
@@ -202,4 +228,11 @@ const styles = StyleSheet.create({
   icon: {},
 });
 
+const webStyles = Platform.OS === 'web' && StyleSheet.create({
+  container: {
+    // @ts-ignore
+    outlineWidth: 0,
+  },
+});
+
 export const Button = styled<ButtonProps>(ButtonComponent);