Use Typescript for package sources implementation (#424)

* Install Typescript and babel plugin

* Rename all source files to ts

* Use TSX for Slider component

* Configure TS for package compilation with Babel

* Fix syntax and typechecking for mobile sources

* Use native event instead of synthetic event

* Add docs for tapToSeek property

* Update example lockfile for packages

* Convert web module into JSX file and translate into TS

* Include typechecking during CI workflow

* Update snapshots regarding new TS files

* Update tests to use TS with JSX syntax

* Update sources to new prettier parsing option

* Use interface for NativeProps instead of type

* Use ImageSource as a type for image instead of URI based

* Use JSON for Babel config instead of JS

* Rename TypeScript check to avoid copy-paste error

Co-authored-by: Michał Pierzchała <[email protected]>

* Cover review remarks

* Keep using bubbling events for continous change

* Update lockfiles after recent main changes

* Fix typing for react-test-renderer by adding @types

* Check for Example app typechecking and fix leftover mistakes

Co-authored-by: Michał Pierzchała <[email protected]>

Author: BartoszKlonowski

.github/workflows/ReactNativeSlider-CI.yml

@@ -21,7 +21,7 @@ jobs:
           key: ${{ hashFiles('./package/package.json') }}
 
 
-  lint:
+  verify-package-sources:
     name: Lint the sources
     runs-on: ubuntu-latest
     needs: install
@@ -39,6 +39,9 @@ jobs:
       - name: Run ESLint on the sources
         run: cd package && npx eslint src
 
+      - name: Run TypeScript on the sources
+        run: cd package && npx tsc --noEmit
+
 
   test:
     name: Run the unit tests
@@ -59,7 +62,7 @@ jobs:
         run: cd package && npx jest src
 
 
-  verify:
+  verify-example-sources:
     name: Verify example app sources
     runs-on: ubuntu-latest
 
@@ -73,11 +76,13 @@ jobs:
       - name: Run ESLint on the sources
         run: cd example && npx eslint .
 
+      - name: Run TypeScript on the sources
+        run: cd example && npx tsc --noEmit
 
   build-android-app:
     name: Build example app Android
     runs-on: ubuntu-latest
-    needs: [verify]
+    needs: [verify-example-sources]
 
     steps:
       - uses: actions/checkout@v3
@@ -97,7 +102,7 @@ jobs:
   build-iOS-app:
     name: Build example app iOS
     runs-on: macos-latest
-    needs: [verify]
+    needs: [verify-example-sources]
     steps:
       - uses: actions/checkout@v3
 

example/SliderExample.tsx

@@ -174,7 +174,7 @@ export const examples = [
   {
     title: 'Vertical slider',
     platform: 'windows',
-    render(): Element<any> {
+    render() {
       return <SliderExample value={0.6} vertical />;
     },
   },

example/package-lock.json

@@ -1,5 +1,6 @@
 // prettier-ignore
 {
+  "include": ["./SliderExample.tsx", "./App.tsx", "./index.tsx"],
   "extends": "@tsconfig/react-native/tsconfig.json",     /* Recommended React Native TSConfig base */
   "compilerOptions": {
     /* Visit https://aka.ms/tsconfig.json to read more about this file */

example/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-typescript", "module:metro-react-native-babel-preset"]
+}