feat: add first utils

Author: Almouro

.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}

.gitignore

@@ -0,0 +1,2 @@
+coverage
+node_modules

.travis.yml

@@ -0,0 +1,13 @@
+language: node_js
+cache:
+  directories:
+    - ~/.npm
+notifications:
+  email: false
+node_js:
+  - '9'
+after_success:
+  - npm run travis-deploy-once "npm run semantic-release"
+branches:
+  except:
+    - /^v\d+\.\d+\.\d+$/

index.js

@@ -0,0 +1,24 @@
+import { compose } from "recompose";
+import withError from "./src/withError";
+import withFocus from "./src/withFocus";
+import withFormik from "./src/withFormik";
+import withInputTypeProps from "./src/withInputTypeProps";
+import withTouched from "./src/withTouched";
+import makeReactNativeField from "./src/makeReactNativeField";
+import { withNextInputAutoFocusForm, withNextInputAutoFocusInput } from "./src/withNextInputAutoFocus";
+
+const makeInputsGreatAgain = compose(withInputTypeProps, withError, withTouched, makeReactNativeField);
+
+export default makeInputsGreatAgain;
+
+export {
+  makeInputsGreatAgain,
+  makeReactNativeField,
+  withError,
+  withFocus,
+  withFormik,
+  withInputTypeProps,
+  withTouched,
+  withNextInputAutoFocusForm,
+  withNextInputAutoFocusInput
+};

jest.config.js

@@ -0,0 +1,6 @@
+const path = require("path");
+
+module.exports = {
+  preset: "react-native",
+  setupFiles: [path.join(__dirname, "./jest/preamble.js")]
+};

jest/preamble.js

@@ -0,0 +1,14 @@
+import Enzyme from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const mockDocumentForEnzymeMount = () => {
+  const jsdom = require("jsdom");
+
+  const { JSDOM } = jsdom;
+
+  const { document } = new JSDOM("").window;
+  global.document = document;
+};
+mockDocumentForEnzymeMount();

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "react-native-formik",
+  "version": "0.0.0-development",
+  "description": "Make the most of your React Native forms with Formik",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest --coverage",
+    "commitmsg": "validate-commit-msg",
+    "commit": "git-cz",
+    "semantic-release": "semantic-release",
+    "travis-deploy-once": "travis-deploy-once"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Almouro/react-native-formik.git"
+  },
+  "keywords": ["react-native", "formik", "forms"],
+  "dependencies": {
+    "lodash": "4.17.5",
+    "recompose": "^0.26.0"
+  },
+  "author": "Almouro <contact@almouro.com> (http://alexandremoureaux.com/)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/bamlab/react-native-formik/issues"
+  },
+  "homepage": "https://github.com/bamlab/react-native-formik#readme",
+  "devDependencies": {
+    "babel-core": "6.26.0",
+    "babel-jest": "^22.4.1",
+    "babel-preset-react-native": "4.0.0",
+    "commitizen": "^2.9.6",
+    "cz-conventional-changelog": "^2.1.0",
+    "enzyme": "^3.3.0",
+    "enzyme-adapter-react-16": "^1.0.0",
+    "husky": "^0.14.3",
+    "jest": "^22.4.2",
+    "react": "16.2.0",
+    "react-dom": "16.2.0",
+    "react-native": "0.53.0",
+    "semantic-release": "^15.0.2",
+    "validate-commit-msg": "^2.14.0",
+    "travis-deploy-once": "^4.4.0"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  }
+}

src/__tests__/makeReactNativeField.js

@@ -0,0 +1,70 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { compose, withContext } from "recompose";
+import { TextInput } from "react-native";
+import { mount } from "enzyme";
+
+import { makeReactNativeField } from "../..";
+
+console.error = jest.fn();
+
+const setFieldValue = jest.fn();
+const setFieldTouched = jest.fn();
+
+const withFormikMock = withContext({ formik: PropTypes.object }, () => ({
+  formik: {
+    setFieldValue,
+    setFieldTouched,
+    values: { email: "contact@bam.tech" }
+  }
+}));
+const Input = compose(withFormikMock, makeReactNativeField)(TextInput);
+
+describe("makeReactNativeField", () => {
+  it("sets the input value", () => {
+    const emailInput = mount(<Input name="email" />);
+    expect(emailInput.find(TextInput).props().value).toEqual("contact@bam.tech");
+    const otherInput = mount(<Input name="other" />);
+    expect(otherInput.find(TextInput).props().value).toEqual(undefined);
+  });
+
+  it("handles input value change", () => {
+    const wrapper = mount(<Input name="email" />);
+    wrapper
+      .find(TextInput)
+      .props()
+      .onChangeText("New text");
+    expect(setFieldValue).toHaveBeenCalledWith("email", "New text");
+  });
+
+  it("allows override of onChangeText", () => {
+    const onChangeText = jest.fn();
+    const wrapper = mount(<Input name="email" onChangeText={onChangeText} />);
+    wrapper
+      .find(TextInput)
+      .props()
+      .onChangeText("New text");
+    expect(onChangeText).toHaveBeenCalledWith("New text");
+    expect(setFieldValue).toHaveBeenCalledWith("email", "New text");
+  });
+
+  it("handles input touch event", () => {
+    const wrapper = mount(<Input name="email" />);
+    wrapper
+      .find(TextInput)
+      .props()
+      .onBlur();
+    expect(setFieldTouched).toHaveBeenCalledWith("email");
+  });
+
+  it("allows override of onBlur", () => {
+    const onBlur = jest.fn();
+    const wrapper = mount(<Input name="email" onBlur={onBlur} />);
+    wrapper
+      .find(TextInput)
+      .props()
+      .onBlur();
+    expect(setFieldTouched).toHaveBeenCalledWith("email");
+    expect(onBlur).toHaveBeenCalled();
+  });
+});

src/__tests__/withError.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { compose, withContext } from "recompose";
+import { TextInput } from "react-native";
+import { mount } from "enzyme";
+
+import { withError } from "../..";
+
+console.error = jest.fn();
+
+const withFormikMock = withContext({ formik: PropTypes.object }, () => ({
+  formik: {
+    errors: { errored: "This is an error" }
+  }
+}));
+const Input = compose(withFormikMock, withError)(TextInput);
+
+describe("withError", () => {
+  it("sets the error prop", () => {
+    const erroredInput = mount(<Input name="errored" />);
+    expect(erroredInput.find(TextInput).props().error).toEqual("This is an error");
+    const validInput = mount(<Input name="valid" />);
+    expect(validInput.find(TextInput).props().error).toBeFalsy();
+  });
+
+  it("keeps other props", () => {
+    const wrapper = mount(<Input name="inputName" someProp="someValue" />);
+    expect(wrapper.find(TextInput).props().someProp).toEqual("someValue");
+  });
+});

src/__tests__/withFocus.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { TextInput } from "react-native";
+import { mount } from "enzyme";
+
+import { withFocus } from "../..";
+
+console.error = jest.fn();
+
+const Input = withFocus(TextInput);
+
+describe("withFocus", () => {
+  it("sets the focus prop", () => {
+    const wrapper = mount(<Input />);
+
+    expect(wrapper.find(TextInput).props().focused).toEqual(false);
+
+    wrapper
+      .find(TextInput)
+      .props()
+      .onFocus();
+    wrapper.update();
+    expect(wrapper.find(TextInput).props().focused).toEqual(true);
+
+    wrapper
+      .find(TextInput)
+      .props()
+      .onBlur();
+    wrapper.update();
+    expect(wrapper.find(TextInput).props().focused).toEqual(false);
+  });
+
+  it("calls onFocus and onBlur if passed", () => {
+    const onFocus = jest.fn();
+    const onBlur = jest.fn();
+
+    const wrapper = mount(<Input onFocus={onFocus} onBlur={onBlur} />);
+
+    expect(wrapper.find(TextInput).props().focused).toEqual(false);
+
+    wrapper
+      .find(TextInput)
+      .props()
+      .onFocus();
+    wrapper.update();
+    expect(onFocus).toHaveBeenCalled();
+    expect(wrapper.find(TextInput).props().focused).toEqual(true);
+
+    wrapper
+      .find(TextInput)
+      .props()
+      .onBlur();
+    wrapper.update();
+    expect(onBlur).toHaveBeenCalled();
+    expect(wrapper.find(TextInput).props().focused).toEqual(false);
+  });
+});