Rewrite to TS (software-mansion#1327)

## Description

This PR combines three others (software-mansion#1273, software-mansion#1280, software-mansion#1291) and rewrites Gesture Handler and examples to TS.
We tried to make non-breaking changes but this should be tested.

Most types were overhauled, although they should remain compatible with old ones thanks to the type aliases in the `src/handlers/gestureHandlerTypesCompat.ts` file.

CI for iOS was disabled due to strange fails. It should be reenabled when we add unit/e2e tests to RNGH.

Fixes software-mansion#1076 - removed Flow from DrawerLayout
Fixes software-mansion#1261 - added TS types
Fixes software-mansion#998 - regenerated example app
Fixes software-mansion#887 - removed prop types

## Changes

### Package packing, configs & source code

- Swipeable and DrawerLayout are now resolved by their own `package.json`s
- React Native uses source code directly, browser and TS use files from `dist/`
- Removed prop types

#### Internal

- Removed unused babel config in the root dir, adjust Eslint config
- Removed unused functions
- Changed private names from `_name` to `private name`
- Replaced `x && x()` syntax with `x.?()`

### Types

- Added types compatibility layer for the new types (`gestureHandlerTypesCompat.ts`)
- Added generation of declarations and declarations map when TS is transpiled
- Moved types from declaration files to files with implementation
- Added types to Android / iOS / shared JS code
- Added basic types to the web version

### Example app

- Removed unused bits in examples
- Regenerated Example app with latest RN
- Removed stray files from examples/
- Updated Travis config to include newer Android build tools & iOS scheme name change
- Organized Example code structure
- Removed Example tests (they weren't testing anything)
- Reconfigured web version of examples

## Testing

PRs that were merged into `ts-rewrite` branch were tested by using `npm pack` and adding it to the new app. In the case of software-mansion#1273 & software-mansion#1280, we additionally checked bundled diff for changes.

We diffed master to generated dist/ directory using `diff --color -wryN -W 200 src/ dist/src`with imports removed by `find src -name "*.js" -type f -exec sed -i '' '/import/d' {} \;`

Co-authored-by: WoLewicki <[email protected]>
Co-authored-by: Jakub <[email protected]>

Author: 2 people

.eslintrc.json

@@ -0,0 +1,54 @@
+{
+  "extends": [
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "satya164"
+  ],
+  "settings": {
+    "react": { "version": "16" },
+    "import/resolver": {
+      "babel-module": {}
+    }
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "env": { "browser": true, "node": true, "jest/globals": true },
+  "plugins": ["jest"],
+  "ignorePatterns": ["dist/**/*"],
+  "rules": {
+    // temporary, remove after we type internals better
+    "@typescript-eslint/restrict-template-expressions": "warn",
+    "@typescript-eslint/no-unsafe-member-access": "warn",
+    "@typescript-eslint/no-unsafe-call": "warn",
+    "@typescript-eslint/no-unsafe-assignment": "warn",
+    "@typescript-eslint/no-unsafe-return": "warn",
+
+    // common
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "import/named": "off",
+    "react/sort-comp": "off",
+    "prefer-const": [
+      "error",
+      {
+        "destructuring": "all"
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "argsIgnorePattern": "^_" }
+    ],
+    "no-redeclare": "off",
+    "@typescript-eslint/no-redeclare": "error",
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": "error",
+    "@typescript-eslint/ban-ts-comment": [
+      "error",
+      {
+        "ts-ignore": "allow-with-description",
+        "ts-expect-error": "allow-with-description"
+      }
+    ]
+  }
+}

.gitignore

@@ -45,11 +45,15 @@ buck-out/
 !debug.keystore
 
 # Expo
-/.expo
+.expo/
+web-build/
 
 # vscode
 jsconfig.json
 .classpath
 .project
 .settings/
 .vscode
+
+# TS
+dist/

.travis.yml

@@ -1,44 +1,45 @@
 matrix:
   include:
-    - language: objective-c
-      os: osx
-      osx_image: xcode12.2
-      xcode_workspace: './e2e/ios/ExampleE2E.xcworkspace'
-      xcode_scheme: ExampleE2E
-      podfile: './e2e/ios/Podfile'
-      xcode_sdk: iphonesimulator12.4
-      xcode_destination: platform=iOS Simulator,OS=12.4,name=iPhone X
-      env: NODE_VERSION=10.19.0
+    # Fix this config
+    # - language: objective-c
+    #   os: osx
+    #   osx_image: xcode12.2
+    #   xcode_workspace: './e2e/ios/ExampleE2E.xcworkspace'
+    #   xcode_scheme: ExampleE2E
+    #   podfile: './e2e/ios/Podfile'
+    #   xcode_sdk: iphonesimulator12.4
+    #   xcode_destination: platform=iOS Simulator,OS=12.4,name=iPhone X
+    #   env: NODE_VERSION=10.19.0
 
-      branches:
-        only:
-          - master
+    #   branches:
+    #     only:
+    #       - master
 
-      cache: yarn
+    #   cache: yarn
 
-      install:
-        - nvm --version
-        - echo $NODE_VERSION
-        - sudo launchctl limit maxfiles 2048 unlimited
-        - sudo ulimit -n 10000
-        - brew tap wix/brew
-        - brew install applesimutils
-        - nvm install $NODE_VERSION
-        - nvm use $NODE_VERSION
-        - nvm alias default $NODE_VERSION
-        - brew install yarn --ignore-dependencies
-        - npm install -g react-native-cli
-        - npm install -g detox-cli
-        - yarn
-        - cd ci/e2e
-        - yarn
-        - cd ios
-        - pod install
-        - cd ..
-        - export PRODUCT_BUNDLE_IDENTIFIER="com.swmansion.rn_gesture_handler_example"
-        - detox build -c ios.sim.release | xcpretty
-      script:
-        - detox test -c ios.sim.release --no-color --headless --cleanup
+    #   install:
+    #     - nvm --version
+    #     - echo $NODE_VERSION
+    #     - sudo launchctl limit maxfiles 2048 unlimited
+    #     - sudo ulimit -n 10000
+    #     - brew tap wix/brew
+    #     - brew install applesimutils
+    #     - nvm install $NODE_VERSION
+    #     - nvm use $NODE_VERSION
+    #     - nvm alias default $NODE_VERSION
+    #     - brew install yarn --ignore-dependencies
+    #     - npm install -g react-native-cli
+    #     - npm install -g detox-cli
+    #     - yarn
+    #     - cd ci/e2e
+    #     - yarn
+    #     - cd ios
+    #     - pod install
+    #     - cd ..
+    #     - export PRODUCT_BUNDLE_IDENTIFIER="com.swmansion.rn_gesture_handler_example"
+    #     - detox build -c ios.sim.release | xcpretty
+    #   script:
+    #     - detox test -c ios.sim.release --no-color --headless --cleanup
 
     - language: android
       dist: trusty
@@ -57,8 +58,9 @@ matrix:
         components:
           - tools
           - platform-tools
+          - build-tools-29.0.2
           - build-tools-28.0.3
-          - android-28
+          - android-29
       install:
         - nvm install $NODE_VERSION
         - nvm use $NODE_VERSION
@@ -76,8 +78,8 @@ matrix:
     - language: objective-c
       os: osx
       osx_image: xcode12.2
-      xcode_workspace: './Example/ios/GestureHandler.xcworkspace'
-      xcode_scheme: GestureHandler
+      xcode_workspace: './Example/ios/Example.xcworkspace'
+      xcode_scheme: Example
       podfile: './Example/ios/Podfile'
       xcode_sdk: iphonesimulator12.2
       xcode_destination: platform=iOS Simulator,OS=12.2,name=iPhone X
@@ -107,4 +109,19 @@ matrix:
         - export PRODUCT_BUNDLE_IDENTIFIER="com.swmansion.rn_gesture_handler_example"
 
       script:
-        - xcodebuild -workspace ios/GestureHandler.xcworkspace -destination 'platform=iOS Simulator,OS=12.2,name=iPhone X' -scheme GestureHandler -parallelizeTargets -configuration Debug -derivedDataPath ios/build -UseModernBuildSystem=YES
+        - xcodebuild -workspace ios/Example.xcworkspace -destination 'platform=iOS Simulator,OS=12.2,name=iPhone X' -scheme Example -parallelizeTargets -configuration Debug -derivedDataPath ios/build -UseModernBuildSystem=YES | xcpretty
+
+    - language: node_js
+      node_js:
+        - 12
+      cache:
+        directories:
+          - node_modules
+      script:
+        - yarn
+        - yarn tsc --noEmit
+        - yarn lint-check
+        - cd examples/Example
+        - yarn
+        - yarn tsc --noEmit
+        - yarn lint-check

DrawerLayout.d.ts

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/src/components/DrawerLayout",
+  "react-native": "../src/components/DrawerLayout",
+  "browser": "../src/components/DrawerLayout",
+  "types": "../dist/src/components/DrawerLayout.d.ts"
+}

DrawerLayout.js

@@ -0,0 +1,6 @@
+{
+  "main": "../dist/src/components/Swipeable",
+  "react-native": "../src/components/Swipeable",
+  "browser": "../src/components/Swipeable",
+  "types": "../dist/src/components/Swipeable.d.ts"
+}

DrawerLayout/package.json

@@ -64,15 +64,19 @@ color (default to `"black"`) of a semi-transparent overlay to be displayed on to
 function. This attribute is present in the standard implementation already and is one of the required params. Gesture handler version of DrawerLayout make it possible for the function passed as `renderNavigationView` to take an Animated value as a parameter that indicates the progress of drawer opening/closing animation (progress value is 0 when closed and 1 when opened). This can be used by the drawer component to animated its children while the drawer is opening or closing.
 
 ### `onDrawerClose`
+
 function. This function is called when the drawer is closed.
 
 ### `onDrawerOpen`
+
 function. This function is called when the drawer is opened.
 
 ### `onDrawerSlide`
+
 function. This function is called as a drawer sliding open from touch events. The progress of the drawer opening/closing is passed back as 0 when closed and 1 when opened.
 
 ### `onDrawerStateChanged`
+
 function. This function is called when the status of the drawer changes. Possible values that can be passed back are: 'Idle', 'Dragging', and 'Settling'.
 
 ### `enableTrackpadTwoFingerGesture` (iOS only)
@@ -85,7 +89,6 @@ component or function. Children is a component which is rendered by default and
 
 ## Methods
 
-
 ### `openDrawer(options)`
 
 `openDrawer` can take an optional `options` parameter which is an object, enabling further customization of the open animation.
@@ -106,14 +109,14 @@ component or function. Children is a component which is rendered by default and
 
 ## Example:
 
-See the [drawer example](https://github.com/software-mansion/react-native-gesture-handler/blob/master/examples/Example/horizontalDrawer/index.js) from [GestureHandler Example App](example.md) or view it directly on your phone by visiting [our expo demo](https://snack.expo.io/@adamgrzybowski/react-native-gesture-handler-demo).
+See the [drawer example](https://github.com/software-mansion/react-native-gesture-handler/blob/master/examples/Example/horizontalDrawer/index.tsx) from [GestureHandler Example App](example.md) or view it directly on your phone by visiting [our expo demo](https://snack.expo.io/@adamgrzybowski/react-native-gesture-handler-demo).
 
 ```js
 class Drawerable extends Component {
-  handleDrawerSlide = status => {
+  handleDrawerSlide = (status) => {
     // outputs a value between 0 and 1
     console.log(status);
-  }
+  };
 
   renderDrawer = () => {
     return (

Swipeable.d.ts

@@ -131,7 +131,7 @@ method that opens component on right side.
 
 ### Example:
 
-See the [swipeable example](https://github.com/software-mansion/react-native-gesture-handler/blob/master/examples/Example/swipeable/index.js) from [GestureHandler Example App](example.md) or view it directly on your phone by visiting [our expo demo](https://snack.expo.io/@adamgrzybowski/react-native-gesture-handler-demo).
+See the [swipeable example](https://github.com/software-mansion/react-native-gesture-handler/blob/master/examples/Example/swipeable/index.tsx) from [GestureHandler Example App](example.md) or view it directly on your phone by visiting [our expo demo](https://snack.expo.io/@adamgrzybowski/react-native-gesture-handler-demo).
 
 ```js
 import React, { Component } from 'react';

Swipeable.js

@@ -45,4 +45,4 @@ import {
 } from 'react-native-gesture-handler';
 ```
 
-For a comparison of both touchable implementations see our [touchables example](https://github.com/software-mansion/react-native-gesture-handler/blob/master/examples/Example/touchables/index.js)
+For a comparison of both touchable implementations see our [touchables example](https://github.com/software-mansion/react-native-gesture-handler/blob/master/examples/Example/touchables/index.tsx)