Add typescript/#42 (#47)

* add deps + command

* add directory

* setup typescript

* remove js files

* add types for components

* move typings to types folder

* refactor

* especify files in ts config

* add scripts and filter npm files

* delete files

* add components types

* move interfaces

* add type definition for components

* naming instance

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 coverage
-yarn.lock
+yarn.lock
+dist

index.js

@@ -1,5 +1,5 @@
-import { Block, Card, Button, Text, Input } from "./src";
-import * as Utils from "./src/utils";
+import { Block, Button, Card, Input, Text } from "./src";
 import * as theme from "./src/theme";
+import * as Utils from "./src/utils";
 
 export { Block, Card, Button, Text, Input, Utils, theme };

jest.config.js

@@ -7,9 +7,16 @@ module.exports = {
   coveragePathIgnorePatterns: ["node_modules", "src/utils"],
   moduleDirectories: ["node_modules"],
   transform: {
-    "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
+    "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
+    "\\.(ts|tsx)$": "ts-jest"
   },
   setupFiles: ["<rootDir>/jest.setup.js"],
-  moduleFileExtensions: ["js", "jsx"],
-  transformIgnorePatterns: []
+  moduleFileExtensions: ["js", "jsx", "ts", "tsx"],
+  transformIgnorePatterns: [],
+  globals: {
+    "ts-jest": {
+      tsConfig: "tsconfig.jest.json"
+    }
+  },
+  testPathIgnorePatterns: ["dist/"]
 };

package.json

@@ -9,14 +9,21 @@
   ],
   "homepage": "http://expo-ui-kit.com/",
   "description": "Expo.io UI Kit for React-Native",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
   "author": "React-UI-Kit <[email protected]> (https://react-ui-kit.com)",
   "license": "MIT",
   "scripts": {
     "lint": "eslint src",
     "test": "jest"
   },
   "devDependencies": {
+    "@types/enzyme": "^3.10.5",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/jest": "^25.2.1",
+    "@types/react": "^16.9.34",
+    "@types/react-native": "^0.62.2",
+    "@types/react-test-renderer": "^16.9.2",
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^6.5.0",
@@ -28,9 +35,11 @@
     "react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
     "react-native-testing-library": "^1.13.0",
     "react-test-renderer": "^16.13.1",
+    "ts-jest": "^25.3.1",
     "typescript": "^3.8.3"
   },
   "eslintConfig": {
     "extends": "universe/native"
-  }
+  },
+  "dependencies": {}
 }

src/Block.js

@@ -115,8 +115,8 @@ import { getSpacing, mergeTheme, parseSpacing } from "./utils";
  * </Block>
  */
 
-const Block = props => {
-  const getSpacings = type => {
+const Block = (props) => {
+  const getSpacings = (type) => {
     const {
       margin,
       marginTop,
@@ -203,8 +203,7 @@ const Block = props => {
     safe,
     style,
     children,
-    scroll,
-    ...rest
+    scroll
   } = props;
 
   const excludeProps = [
@@ -258,7 +257,7 @@ const Block = props => {
       shadowRadius: elevation
     },
     space && { justifyContent: `space-${space}` },
-    card && { borderRadius: SIZES.border },
+    card && { borderRadius: SIZES.radius },
     radius && { borderRadius: radius },
     // color shortcuts
     primary && { backgroundColor: COLORS.primary },

src/Button.js

@@ -7,7 +7,7 @@ import {
   TouchableWithoutFeedback
 } from "react-native";
 import expoTheme from "./theme";
-import { getSpacing, mergeTheme, parseSpacing, rgba } from "./utils";
+import { getSpacing, mergeTheme, parseSpacing, rgba } from "./utils/index";
 
 /**
  * https://facebook.github.io/react-native/docs/touchableopacity
@@ -56,7 +56,13 @@ import { getSpacing, mergeTheme, parseSpacing, rgba } from "./utils";
  *
  */
 
-function Button(props) {
+export const ButtonInstance = ({
+  Touchable = TouchableOpacity,
+  children,
+  ...props
+}) => <Touchable {...props}>{children}</Touchable>;
+
+const Button = (props) => {
   const getSpacings = (type) => {
     const {
       margin,
@@ -106,7 +112,6 @@ function Button(props) {
       ];
     }
   };
-
   const {
     disabled,
     opacity,
@@ -134,8 +139,7 @@ function Button(props) {
     withoutFeedback,
     theme,
     style,
-    children,
-    ...rest
+    children
   } = props;
 
   const excludeProps = [
@@ -205,7 +209,7 @@ function Button(props) {
     buttonStyles.backgroundColor = "transparent";
   }
 
-  const ButtonType = highlight
+  const Touchable = highlight
     ? TouchableHighlight
     : nativeFeedback
     ? TouchableNativeFeedback
@@ -214,15 +218,16 @@ function Button(props) {
     : TouchableOpacity;
 
   return (
-    <ButtonType
+    <ButtonInstance
       {...extraProps}
       disabled={disabled}
+      Touchable={Touchable}
       activeOpacity={opacity}
-      style={buttonStyles}>
-      {children}
-    </ButtonType>
+      style={buttonStyles}
+      children={children}
+    />
   );
-}
+};
 
 Button.defaultProps = {
   color: null,
@@ -232,7 +237,6 @@ Button.defaultProps = {
   margin: null,
   padding: null,
   flex: 0,
-  height: false,
   transparent: false,
   primary: false,
   secondary: false,

src/Card.js

@@ -2,7 +2,7 @@ import React from "react";
 import { StyleSheet } from "react-native";
 import Block from "./Block";
 import expoTheme from "./theme";
-import { mergeTheme, rgba } from "./utils";
+import { mergeTheme, rgba } from "./utils/index";
 
 /**
  * https://facebook.github.io/react-native/docs/view
@@ -48,7 +48,7 @@ import { mergeTheme, rgba } from "./utils";
  *
  */
 
-const Card = props => {
+const Card = (props) => {
   const {
     color,
     radius,

src/Input.js

@@ -1,8 +1,7 @@
 import React, { useReducer } from "react";
 import { StyleSheet, TextInput } from "react-native";
-
 import expoTheme from "./theme";
-import { mergeTheme, rgba } from "./utils";
+import { mergeTheme, rgba } from "./utils/index";
 
 /**
  * https://facebook.github.io/react-native/docs/textinput
@@ -168,7 +167,7 @@ Input.defaultProps = {
   pattern: null,
   onFocus: null,
   onBlur: null,
-  onChange: null,
+  onChangeText: null,
   onValidation: null,
   placeholder: null,
   autoCorrect: false,

src/Text.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { Animated, StyleSheet, Text } from "react-native";
 import expoTheme from "./theme";
-import { getSpacing, mergeTheme, parseSpacing } from "./utils";
+import { getSpacing, mergeTheme, parseSpacing } from "./utils/index";
 
 /**
  * Usage:
@@ -66,8 +66,8 @@ import { getSpacing, mergeTheme, parseSpacing } from "./utils";
  * - <Text animated>will render Animated.Text</Text>
  */
 
-const Typography = props => {
-  const getSpacings = type => {
+const Typography = (props) => {
+  const getSpacings = (type) => {
     const {
       margin,
       marginTop,

src/__tests__/Block.test.js

@@ -421,7 +421,8 @@ describe("<Block />", () => {
 
     const style = StyleSheet.flatten(component.props.style);
     expect(instance.props.card).toEqual(true);
-    expect(style.borderRadius).toEqual(SIZES.border);
+
+    expect(style.borderRadius).toEqual(SIZES.radius);
   });
 
   it("radius={4}", () => {
@@ -497,7 +498,7 @@ describe("<Block />", () => {
 
     expect(instance.props.theme).toEqual(customTheme);
 
-    let style = StyleSheet.flatten(component.props.style);
+    const style = StyleSheet.flatten(component.props.style);
 
     expect(style.backgroundColor).toEqual("red");
   });

src/__tests__/Button.test.js

@@ -1,16 +1,21 @@
 import { shallow } from "enzyme";
 import React from "react";
-import { StyleSheet } from "react-native";
+import {
+  StyleSheet,
+  TouchableHighlight,
+  TouchableNativeFeedback,
+  TouchableWithoutFeedback
+} from "react-native";
 import renderer from "react-test-renderer";
-
-import Button from "../Button";
+import Button, { RenderButton } from "../Button";
 import Text from "../Text";
 import { SIZES } from "../theme";
 import { rgba } from "../utils";
 
 describe("<Button />", () => {
   it("render default TouchableOpacity", () => {
     const button = shallow(<Button />);
+    const buttonType = shallow(<RenderButton />);
 
     const component = button;
 
@@ -24,7 +29,8 @@ describe("<Button />", () => {
       backgroundColor: "#4630EB",
       justifyContent: "center"
     });
-    expect(component.name()).toEqual("TouchableOpacity");
+
+    expect(buttonType.name()).toEqual("TouchableOpacity");
   });
 
   it("transparent", () => {
@@ -329,9 +335,12 @@ describe("<Button />", () => {
 
   it("ButtonType: nativeFeedback", () => {
     const component = shallow(<Button nativeFeedback />);
+    const buttonType = shallow(
+      <RenderButton Touchable={TouchableNativeFeedback} />
+    );
 
     expect(component.props().nativeFeedback).toEqual(true);
-    expect(component.name()).toEqual("DummyTouchableNativeFeedback");
+    expect(buttonType.name()).toEqual("DummyTouchableNativeFeedback");
   });
 
   /**
@@ -346,8 +355,14 @@ describe("<Button />", () => {
       </Button>
     );
 
+    const buttonType = shallow(
+      <RenderButton Touchable={TouchableHighlight}>
+        <Text />
+      </RenderButton>
+    );
+
     expect(component.props().highlight).toEqual(true);
-    expect(component.name()).toEqual("TouchableHighlight");
+    expect(buttonType.name()).toEqual("TouchableHighlight");
   });
 
   it("ButtonType: withoutFeedback", () => {
@@ -356,9 +371,14 @@ describe("<Button />", () => {
         <Text />
       </Button>
     );
+    const buttonType = shallow(
+      <RenderButton Touchable={TouchableWithoutFeedback}>
+        <Text />
+      </RenderButton>
+    );
 
     expect(component.props().withoutFeedback).toEqual(true);
-    expect(component.name()).toEqual("TouchableWithoutFeedback");
+    expect(buttonType.name()).toEqual("TouchableWithoutFeedback");
   });
 
   it("onPress", () => {