Complete TS Migration (#1927)

* Create a build script

* Include src/index.ts in the transpilation

* Stop exporting manual typed components

* Fix main index file export and remove old index files

* add react-native-color to transformIgnorePatterns

* Remove old index.d.ts file

* Remove exclusion of src/index.ts file

* Add missing exports

* Add more missing exports

* Add manual typings of BaseInput

* Exclude legacy BaseInput from TS build

* Remove redundant ts-expect-error

* Revert some of recent changes

* Fix TS for BaseInput component

* Fix tsconfig

* Revert "Fix TS for BaseInput component"

This reverts commit 9d5b121.

* Convert baseComponent to TS

* Fix typings for baseComponent

* Remove src/index.js file

Author: ethanshar

generatedTypes/index.d.ts

@@ -1,8 +1,8 @@
 {
   "name": "react-native-ui-lib",
   "version": "5.0.0",
-  "main": "index.js",
-  "types": "index.d.ts",
+  "main": "src/index.ts",
+  "types": "src/index.d.ts",
   "author": "Ethan Sharabi <[email protected]>",
   "homepage": "https://github.com/wix/react-native-ui-lib",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "build:lib": "./node_modules/.bin/babel lib --out-dir lib --config-file ./src/.babelrc.json --extensions '.ts,.tsx'",
     "build:exports": "npm run build:src && npm run build:lib",
     "build:packages": "node scripts/buildPackages.js",
-    "build": "tsc --p tsconfig.build.json && npm run build:exports && npm run build:packages",
+    "build": "node scripts/build.js",
     "prepush": "npm run build:dev && npm run test",
     "log": "react-native log-ios | grep 'ethan -'",
     "docs:deploy": "./scripts/deployDocs.sh",
@@ -122,7 +122,7 @@
   "jest": {
     "preset": "react-native",
     "transformIgnorePatterns": [
-      "node_modules/(?!(@react-native|react-native|react-native-reanimated|react-native-redash)/)"
+      "node_modules/(?!(@react-native|react-native|react-native-reanimated|react-native-redash|react-native-color)/)"
     ],
     "testPathIgnorePatterns": [
       "/e2e/",

index.d.ts

@@ -0,0 +1,17 @@
+const childProcess = require('child_process');
+
+console.info('## Start RNUILib Build ##');
+
+console.info('## Build Typescript ##');
+childProcess.execSync('tsc --p tsconfig.build.json');
+
+console.info('## Build src files ##');
+childProcess.execSync(`./node_modules/.bin/babel src --out-dir src --config-file ./src/.babelrc.json --extensions '.ts,.tsx'`);
+
+console.info('## Build lib (native component) files ##');
+childProcess.execSync(`./node_modules/.bin/babel lib --out-dir lib --config-file ./src/.babelrc.json --extensions '.ts,.tsx'`);
+
+console.info('## Build standalone components packages ##');
+require('./buildPackages');
+
+console.info('## Complete RNUILib Build ##');

index.js

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, {ComponentType} from 'react';
 // import PropTypes from 'prop-types';
 import {StyleSheet} from 'react-native';
 import _ from 'lodash';
 import {Colors} from '../style';
 import * as Modifiers from './modifiers';
 
-export default function baseComponent(usePure) {
+export default function baseComponent(usePure: boolean): ComponentType {
   const parent = usePure ? React.PureComponent : React.Component;
   class BaseComponent extends parent {
     // static propTypes = {
@@ -14,9 +14,12 @@ export default function baseComponent(usePure) {
     //   useNativeDriver: PropTypes.bool,
     // };
 
+    styles: any;
+    view: any;
+
     static extractOwnProps = Modifiers.extractOwnProps;
 
-    constructor(props) {
+    constructor(props: any) {
       super(props);
       if (!this.styles) {
         this.generateStyles();
@@ -28,7 +31,7 @@ export default function baseComponent(usePure) {
     }
 
     // TODO: remove this after migrating all components to use asBaseComponent HOC
-    UNSAFE_componentWillReceiveProps(nextProps) {
+    UNSAFE_componentWillReceiveProps(nextProps: any) {
       this.updateModifiers(this.getThemeProps(), nextProps);
     }
 
@@ -71,7 +74,7 @@ export default function baseComponent(usePure) {
     }
 
     // TODO: stop using this and remove it
-    extractContainerStyle(props) {
+    extractContainerStyle(props: any) {
       let containerStyle = {};
       if (props.containerStyle) {
         containerStyle = _.pickBy(props.containerStyle, (_value, key) => {
@@ -82,12 +85,12 @@ export default function baseComponent(usePure) {
       return containerStyle;
     }
 
-    updateModifiers(currentProps, nextProps) {
+    updateModifiers(currentProps: any, nextProps: any) {
       const ignoredKeys = ['children', 'forwardedRef', 'style', 'testID'];
       const allKeys = _.union([..._.keys(currentProps), ..._.keys(nextProps)]).filter(key => !ignoredKeys.includes(key));
       const changedKeys = _.filter(allKeys, key => !_.isEqual(currentProps[key], nextProps[key]));
 
-      const options = {};
+      const options: any = {};
       if (_.find(changedKeys, key => Modifiers.FLEX_KEY_PATTERN.test(key))) {
         options.flex = true;
       }
@@ -124,7 +127,7 @@ export default function baseComponent(usePure) {
       flex: true
     },
     props = this.getThemeProps()) {
-      const style = {};
+      const style: any = {};
 
       if (options.backgroundColor) {
         style.backgroundColor = Modifiers.extractBackgroundColorValue(props);
@@ -154,10 +157,10 @@ export default function baseComponent(usePure) {
     // }
 
     // React Native Methods
-    setRef = r => (this.view = r);
+    setRef = (r: any) => (this.view = r);
     getRef = () => this.view;
-    measureInWindow = (...args) => this.getRef().measureInWindow(...args);
-    measure = (...args) => this.getRef().measure(...args); // TODO: do we need this
+    measureInWindow = (...args: any) => this.getRef().measureInWindow(...args);
+    measure = (...args: any) => this.getRef().measure(...args); // TODO: do we need this
   }
 
   return BaseComponent;

package.json

@@ -1,7 +1,7 @@
 const createBaseComponentClass = usePure => require('./baseComponent').default(usePure);
 
-let BaseComponentClass;
-let PureBaseComponentClass;
+let BaseComponentClass = createBaseComponentClass(false);
+let PureBaseComponentClass = createBaseComponentClass(true);
 
 module.exports = {
   get BaseComponent() {

scripts/build.js

@@ -0,0 +1,95 @@
+import {ReactElement, Component} from 'react';
+import {
+  GestureResponderEvent,
+  ImageSourcePropType,
+  StyleProp,
+  TextInputProps as RNTextInputProps,
+  TextStyle,
+  ViewStyle,
+  ColorValue
+} from 'react-native';
+// import {BaseComponent} from '../commons';
+// import {TopBarProps} from './Modal';
+
+export type BaseInputDefaultValidator = 'required' | 'email' | 'url' | 'number' | 'price';
+export type BaseInputCustomValidator = (value?: string) => boolean;
+export type BaseInputValidator = BaseInputDefaultValidator | BaseInputCustomValidator;
+export type BaseInputValidateProp = BaseInputValidator | BaseInputValidator[];
+
+export interface BaseInputProps extends RNTextInputProps {
+  color?: ColorValue;
+  containerStyle?: StyleProp<ViewStyle>;
+  validate?: BaseInputValidateProp;
+  markRequired?: boolean;
+  errorMessage?: string | string[];
+  validateOnStart?: boolean;
+  validateOnChange?: boolean;
+  validateOnBlur?: boolean;
+  onChangeValidity?: (isValid: boolean) => void;
+}
+
+export type InputColorValue = ColorValue | {[key: string]: ColorValue};
+
+export interface TextBaseInputProps {
+  migrate?: boolean;
+  floatingPlaceholder?: boolean;
+  floatingPlaceholderColor?: InputColorValue;
+  helperText?: string;
+  hideUnderline?: boolean;
+  underlineColor?: InputColorValue;
+  disabledColor?: ColorValue;
+  centered?: boolean;
+  error?: string;
+  enableErrors?: boolean;
+  expandable?: boolean;
+  transformer?: (text?: string) => string | undefined;
+  title?: string;
+  titleColor?: InputColorValue;
+  titleStyle?: StyleProp<TextStyle>;
+  showCharacterCounter?: boolean;
+  floatOnFocus?: boolean;
+  useTopErrors?: boolean;
+  rightIconSource?: ImageSourcePropType;
+}
+
+export interface TextFieldRightButtonProps {
+  iconSource?: ImageSourcePropType;
+  iconColor?: ColorValue;
+  onPress?: (event: GestureResponderEvent) => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+export interface TextFieldProps extends BaseInputProps, TextBaseInputProps {
+  renderExpandableInput?: (props: TextFieldProps) => ReactElement;
+  renderExpandable?: (props: TextFieldProps, state: TextFieldState) => ReactElement;
+  onToggleExpandableModal?: (value?: string) => void;
+  // topBarProps?: TopBarProps;
+  rightButtonProps?: TextFieldRightButtonProps;
+}
+
+export type TextFieldState = any;
+
+export class TextField extends BaseInput<TextFieldProps, TextFieldState> {}
+
+export interface TextInputProps extends BaseInputProps, TextBaseInputProps {
+  renderExpandableInput?: (props: TextInputProps) => ReactElement | ReactElement[];
+  renderExpandable?: (props: TextInputProps, state: TextInputState) => ReactElement | ReactElement[];
+}
+
+export type TextInputState = any;
+
+export class TextInput extends BaseInput<TextInputProps, TextInputState> {}
+
+export interface MaskedInputProps extends TextFieldProps {
+  renderMaskedText?: (value?: string) => ReactElement | ReactElement[];
+  containerStyle?: StyleProp<ViewStyle>;
+}
+
+export class MaskedInput extends BaseInput<MaskedInputProps> {}
+
+export default class BaseInput<Props extends BaseInputProps = BaseInputProps, State = {}> extends Component<
+  Props,
+  State
+> {
+  onBlur(): void;
+}