Typescript work (react-native-elements#2781)

* convert RNE to typescript (react-native-elements#2766) * convert Avatar to typescript * convert the rest of the files into tsx, still rough * move tests back to being js * fix more type errors * more ts updates Co-authored-by: Jeremy Hamilton <jeremy.hamilton@tekfive.com> * typescript migration (react-native-elements#2779) * fix: typescript errors in SearchBar-default * refactor: all styles use StyleSheet.create * feat: add header Placement type * style: all react components use React.FunctionComponent * fix: add missing InputProps to SearchBarAndroidProps * fix(Tooltip): typescript errors * fix(Input): Animated.timing easing typo * fix: small fixes * fix(SearchBarAndroidProps): add missing InputProps * fix typing with static members of functions * ignore ts in slider; needs redone * finish up cleaning up the typescript conversion * trying out a different wrapped component * add dist folder to publish * a few more tsconfig changes * fix withTheme typing * Typescript work (react-native-elements#2792) * trying out a different wrapped component * add dist folder to publish * a few more tsconfig changes * fix withTheme typing Co-authored-by: Jeremy Hamilton <jeremy.hamilton@tekfive.com> * forwardRef in withTheme Co-authored-by: Jeremy Hamilton <jeremy.hamilton@tekfive.com> Co-authored-by: Mohammed Faragallah <o0frego0o@hotmail.com>
tt0mmy · Mar 3, 2021 · 4f90e00 · 4f90e00
1 parent ab0526b
commit 4f90e00
Show file tree

Hide file tree

Showing 119 changed files with 2,500 additions and 4,916 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,3 @@
 website
 coverage
+dist
diff --git a/.eslintrc b/.eslintrc
@@ -1,6 +1,7 @@
 {
   "extends": "@react-native-community",
   "rules": {
-    "react-native/no-inline-styles": 0
+    "react-native/no-inline-styles": 0,
+    "@typescript-eslint/no-unused-vars": ["error", { "ignoreRestSiblings": true }]
   }
 }
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,4 @@ website/build
 package-lock.json
 build
 *.orig
+dist/
diff --git a/package.json b/package.json
@@ -2,25 +2,26 @@
   "name": "react-native-elements",
   "version": "3.2.0",
   "description": "React Native Elements & UI Toolkit",
-  "main": "src/index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "prepublish": "tsc",
   "files": [
-    "src",
-    "!**/__tests__"
+    "dist"
   ],
-  "types": "src/index.d.ts",
   "keywords": [
     "react-native",
     "reactjs",
     "reactnative",
     "bootstrap"
   ],
   "scripts": {
+    "build": "tsc",
     "test": "jest",
     "test:update": "jest -u",
     "test:ci": "jest --runInBand",
     "test:watch": "jest --watch",
     "postinstall": "opencollective-postinstall || exit 0",
-    "lint": "eslint --ext js,ts .",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "prettify": "prettier --single-quote --trailing-comma=es5 --write './**/*.md'",
     "clean-install": "rimraf node_modules && yarn",
     "changelog": "auto-changelog -p"
@@ -43,16 +44,18 @@
     "hoist-non-react-statics": "^3.3.2",
     "lodash.isequal": "^4.5.0",
     "opencollective-postinstall": "^2.0.3",
-    "prop-types": "^15.7.2",
     "react-native-ratings": "^7.3.0",
     "react-native-size-matters": "^0.3.1"
   },
   "devDependencies": {
     "@react-native-community/eslint-config": "^2.0.0",
     "@testing-library/react-native": "^7.0.2",
-    "@types/prop-types": "^15.7.3",
-    "@types/react": "^16.9.0",
-    "@types/react-native": "^0.63.2",
+    "@types/color": "^3.0.1",
+    "@types/enzyme": "^3.10.8",
+    "@types/hoist-non-react-statics": "^3.3.1",
+    "@types/lodash.isequal": "^4.5.5",
+    "@types/react-native": "^0.63.48",
+    "@types/react-test-renderer": "^17.0.0",
     "auto-changelog": "^2.2.1",
     "babel-jest": "^26.3.0",
     "enzyme": "^3.11.0",
@@ -67,31 +70,33 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-native": "0.63.2",
-    "react-native-vector-icons": "^7.0.0",
     "react-native-safe-area-context": "^3.1.9",
+    "react-native-vector-icons": "^7.0.0",
     "react-test-renderer": "^16.13.1",
     "rimraf": "^3.0.2",
-    "typescript": "^3.9.5"
+    "typescript": "^4.1.3",
+    "utility-types": "^3.10.0"
   },
   "peerDependencies": {
-    "react-native-vector-icons": ">7.0.0",
-    "react-native-safe-area-context": "^3.1.9"
+    "react-native-safe-area-context": "^3.1.9",
+    "react-native-vector-icons": ">7.0.0"
   },
   "jest": {
     "preset": "react-native",
     "timers": "fake",
     "coverageDirectory": "./coverage/",
     "testPathIgnorePatterns": [
       "./src/searchbar/__tests__/common.js",
-      "<rootDir>/node_modules"
+      "<rootDir>/node_modules",
+      "<rootDir>/dist"
     ],
     "coveragePathIgnorePatterns": [
       "./src/searchbar/__tests__/common.js"
     ],
     "collectCoverageFrom": [
-      "src/**/*.js",
-      "!src/index.js",
-      "!src/helpers/*.js"
+      "src/**/*.tsx",
+      "!src/index.tsx",
+      "!src/helpers/*.tsx"
     ],
     "collectCoverage": true,
     "globals": {
@@ -102,15 +107,25 @@
     ],
     "transform": {
       ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub"
-    }
+    },
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js",
+      "jsx",
+      "json",
+      "node"
+    ]
   },
   "lint-staged": {
-    "src/**/*.js": [
+    "src/**/*.{ts,tsx}": [
       "eslint --fix",
+      "bash -c tsc",
       "jest --bail --findRelatedTests"
     ],
-    "src/index.d.ts": [
-      "eslint --fix"
+    "src/**/*.{js,jsx}": [
+      "eslint --fix",
+      "jest --bail --findRelatedTests"
     ],
     "**/*.md": [
       "prettier --single-quote --trailing-comma=es5 --write"

diff --git a/src/avatar/Accessory.js → src/avatar/Accessory.tsx b/src/avatar/Accessory.js → src/avatar/Accessory.tsx
@@ -1,36 +1,50 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { TouchableHighlight, View, Platform, StyleSheet } from 'react-native';
+import {
+  TouchableHighlight,
+  View,
+  Platform,
+  StyleSheet,
+  StyleProp,
+  ViewStyle,
+  ColorValue,
+} from 'react-native';
 import { withTheme } from '../config';
-import Image from '../image/Image';
-import Icon from '../icons/Icon';
+import Image, { ImageProps } from '../image/Image';
+import Icon, { IconProps } from '../icons/Icon';
 
-function Accessory({
-  size,
+export type AccessoryProps = Partial<IconProps> &
+  Partial<ImageProps> & {
+    underlayColor?: ColorValue;
+    style?: StyleProp<ViewStyle>;
+  };
+
+const Accessory: React.FunctionComponent<AccessoryProps> = ({
+  size = 10,
   style,
-  underlayColor,
+  underlayColor = '#000',
   onPress,
   onLongPress,
   source,
   ...props
-}) {
+}: AccessoryProps) => {
   return (
     <TouchableHighlight
-      style={StyleSheet.flatten([
+      style={[
         styles.accessory,
         {
           width: size,
           height: size,
           borderRadius: size / 2,
         },
         style,
-      ])}
+      ]}
       underlayColor={underlayColor}
       onPress={onPress}
       onLongPress={onLongPress}
     >
       <View>
         {source ? (
+          //@ts-ignore
           <Image
             style={{
               width: size,
@@ -40,29 +54,17 @@ function Accessory({
             {...props}
           />
         ) : (
-          <Icon size={size * 0.8} {...props} />
+          <Icon
+            name="mode-edit"
+            type="material"
+            color="#fff"
+            size={size * 0.8}
+            {...props}
+          />
         )}
       </View>
     </TouchableHighlight>
   );
-}
-
-Accessory.defaultProps = {
-  size: 10,
-  name: 'mode-edit',
-  type: 'material',
-  color: '#fff',
-  underlayColor: '#000',
-};
-
-Accessory.propTypes = {
-  size: PropTypes.number,
-  name: PropTypes.string,
-  type: PropTypes.string,
-  color: PropTypes.string,
-  underlayColor: PropTypes.string,
-  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  onPress: PropTypes.func,
 };
 
 const styles = StyleSheet.create({
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,3 +11,4 @@ website/build @@
     package-lock.json
     build
     *.orig
+    dist/