Fix/types to prop types (#797)

* add babelrc file for src sub direrctory

* prepare build configuration

* migrate Swipeable to tsx cause it gave errors

* generate d.ts for Swipeable component and ts-nocheck this file

* update our build script

* remove unused babel-preset-latest package

Author: ethanshar

babel.config.js

@@ -1,11 +1,8 @@
 module.exports = {
   env: {
     test: {
-      presets: ['module:metro-react-native-babel-preset'],
-      retainLines: true,
-    },
+      presets: ['module:metro-react-native-babel-preset']
+    }
   },
-  presets: ['module:metro-react-native-babel-preset'],
-  retainLines: true,
-  plugins: ['transform-inline-environment-variables'],
+  presets: ['module:metro-react-native-babel-preset']
 };

generatedTypes/components/drawer/Swipeable.d.ts

@@ -0,0 +1,74 @@
+import { Component } from 'react';
+import { Animated } from 'react-native';
+export declare type PropType = {
+    children: any;
+    friction: number;
+    leftThreshold?: number;
+    rightThreshold?: number;
+    fullLeftThreshold?: number;
+    fullSwipeLeft?: boolean;
+    overshootLeft?: boolean;
+    overshootRight?: boolean;
+    overshootFriction?: number;
+    onSwipeableLeftOpen?: Function;
+    onSwipeableRightOpen?: Function;
+    onSwipeableOpen?: Function;
+    onSwipeableClose?: Function;
+    onSwipeableLeftWillOpen?: Function;
+    onSwipeableRightWillOpen?: Function;
+    onSwipeableWillOpen?: Function;
+    onSwipeableWillClose?: Function;
+    onFullSwipeLeft?: Function;
+    onWillFullSwipeLeft?: Function;
+    onDragStart?: Function;
+    renderLeftActions?: (progressAnimatedValue: any, dragAnimatedValue: any) => any;
+    renderRightActions?: (progressAnimatedValue: any, dragAnimatedValue: any) => any;
+    leftActionsContainerStyle: any;
+    rightActionsContainerStyle: any;
+    useNativeAnimations: boolean;
+    animationOptions?: Object;
+    containerStyle?: Object;
+    childrenContainerStyle?: Object;
+};
+declare type StateType = {
+    dragX: Animated.Value;
+    rowTranslation: Animated.Value;
+    leftWidth: number | typeof undefined;
+    rightOffset: number | typeof undefined;
+    rowWidth: number | typeof undefined;
+};
+export default class Swipeable extends Component<PropType, StateType> {
+    static defaultProps: {
+        friction: number;
+        overshootFriction: number;
+        useNativeAnimations: boolean;
+        fullLeftThreshold: number;
+    };
+    constructor(props: PropType);
+    UNSAFE_componentWillUpdate(props: PropType, state: StateType): void;
+    _updateAnimatedEvent: (props: PropType, state: StateType) => void;
+    _onTapHandlerStateChange: ({ nativeEvent }: {
+        nativeEvent: any;
+    }) => void;
+    _onHandlerStateChange: ({ nativeEvent }: {
+        nativeEvent: any;
+    }) => void;
+    _handleRelease: (nativeEvent: any) => void;
+    _animateRow: (fromValue: any, toValue: any, velocityX: any) => void;
+    _currentOffset: () => number;
+    close: () => void;
+    openLeft: () => void;
+    openRight: () => void;
+    _onRowLayout: ({ nativeEvent }: {
+        nativeEvent: any;
+    }) => void;
+    _onLeftLayout: ({ nativeEvent }: {
+        nativeEvent: any;
+    }) => void;
+    _onRightLayout: ({ nativeEvent }: {
+        nativeEvent: any;
+    }) => void;
+    handleMeasure: (name: any, nativeEvent: any) => void;
+    render(): JSX.Element;
+}
+export {};

package.json

@@ -26,7 +26,8 @@
     "lint:test": "mocha --compilers js:babel-core/register eslint-rules/tests/lib/rules",
     "xcode": "open ./ios/uilib.xcodeproj",
     "build:dev": "tsc --p tsconfig.dev.json",
-    "build": "tsc --p tsconfig.build.json",
+    "build:exports": "./node_modules/.bin/babel src --out-dir src --config-file ./src/.babelrc.json --extensions '.ts,.tsx' --ignore 'src/index.ts'",
+    "build": "tsc --p tsconfig.build.json && npm run build:exports",
     "log": "react-native log-ios | grep 'ethan -'",
     "docs:install": "(cd ./uilib-docs && rm -rf node_modules && rm -rf package-lock.json && npm install)",
     "docs:deploy": "(cd ./uilib-docs && gatsby build --prefix-paths && gh-pages -d public --branch gh-pages)",
@@ -56,8 +57,10 @@
     "url-parse": "^1.2.0"
   },
   "devDependencies": {
+    "@babel/cli": "^7.10.1",
     "@babel/core": "^7.4.0",
     "@babel/preset-env": "^7.3.1",
+    "@babel/preset-react": "^7.10.1",
     "@babel/runtime": "^7.4.2",
     "@react-native-community/async-storage": "^1.6.2",
     "@react-native-community/blur": "^3.4.1",
@@ -72,6 +75,7 @@
     "@typescript-eslint/parser": "^2.13.0",
     "@welldone-software/why-did-you-render": "^3.2.1",
     "babel-jest": "^25.2.4",
+    "babel-plugin-typescript-to-proptypes": "^1.3.2",
     "babel-preset-react-native": "*",
     "eslint": "^5.16.0",
     "eslint-config-wix": "^1.1.28",

src/.babelrc.json

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-typescript", "@babel/preset-react"],
+  "plugins": ["babel-plugin-typescript-to-proptypes"]
+}

src/components/drawer/Swipeable.js renamed to src/components/drawer/Swipeable.tsx

@@ -1,3 +1,4 @@
+// @ts-nocheck
 // @flow
 // Similarly to the DrawerLayout component this deserves to be put in a
 // separate repo. Although, keeping it here for the time being will allow us
@@ -67,12 +68,12 @@ export default class Swipeable extends Component<PropType, StateType> {
     fullLeftThreshold: 0.45
   };
 
-  _onGestureEvent: ?Animated.Event;
-  _transX: ?Animated.Interpolation;
-  _showLeftAction: ?Animated.Interpolation | ?Animated.Value;
-  _leftActionTranslate: ?Animated.Interpolation;
-  _showRightAction: ?Animated.Interpolation | ?Animated.Value;
-  _rightActionTranslate: ?Animated.Interpolation;
+  // _onGestureEvent: ?Animated.Event;
+  // _transX: ?Animated.Interpolation;
+  // _showLeftAction: ?Animated.Interpolation | ?Animated.Value;
+  // _leftActionTranslate: ?Animated.Interpolation;
+  // _showRightAction: ?Animated.Interpolation | ?Animated.Value;
+  // _rightActionTranslate: ?Animated.Interpolation;
 
   constructor(props: PropType) {
     super(props);

tsconfig.build.json

@@ -1,7 +1,7 @@
 {
   "extends": "./tsconfig",
   "compilerOptions": {
-    "emitDeclarationOnly": false
+    "emitDeclarationOnly": true
   },
   "include": ["src/**/*", "typings/**/*"],
   "exclude": [ "node_modules", "src/index.ts"]