chore(publish): setup publish script

- install @babel/cli
- add build and prepublishOnly script
- updated the readme
- refactor the code base

[Chores publish]

Author: Eazybee

.eslintignore

@@ -1,2 +1,3 @@
 webpack.config.js
 /webpack
+dist

.gitignore

@@ -1,3 +1,4 @@
 /node_modules
 /coverage
+/dist
 *.DS_Store

README.md

@@ -16,14 +16,14 @@
 
 <hr />
 
-[![Build Status](https://travis-ci.com/Eazybee/useFormBee.svg?branch=develop)](https://travis-ci.com/Eazybee/useFormBee) <a href="https://codeclimate.com/github/Eazybee/useFormBee/test_coverage"><img src="https://api.codeclimate.com/v1/badges/d103b30217999d81e940/test_coverage" /></a> <a href="https://codeclimate.com/github/Eazybee/useFormBee/maintainability"><img src="https://api.codeclimate.com/v1/badges/d103b30217999d81e940/maintainability" /></a> [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![NPM Version](https://img.shields.io/badge/npm-v1.0.0-blue)](http://makeapullrequest.com) 
+[![Build Status](https://travis-ci.com/Eazybee/useFormBee.svg?branch=develop)](https://travis-ci.com/Eazybee/useFormBee) <a href="https://codeclimate.com/github/Eazybee/useFormBee/test_coverage"><img src="https://api.codeclimate.com/v1/badges/d103b30217999d81e940/test_coverage" /></a> <a href="https://codeclimate.com/github/Eazybee/useFormBee/maintainability"><img src="https://api.codeclimate.com/v1/badges/d103b30217999d81e940/maintainability" /></a> [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![NPM Version](https://img.shields.io/badge/npm-v1.0.3-blue)](https://www.npmjs.com/package/useformbee) 
 
 
 ## The problem
 Handling forms in react can be a little bit tedious especially for new beginners like me 😃.  **I often find myself re-writing the same stateful logic and form validations**, especially when I have different forms in different components (such as _signup, login, profile update form_).
 
 ## Inspiration
-My mentor <a href='https://github.com/benfluleck'>@benfluleck</a> suggested I abstract my form logic so that it can easily be reusable. I created a useForm hook and showed it to him and my other colleague. To my surprise, they loved it and adviced that I made some improvements on it and also upload it to [npm](https://npmjs.com) as a library. 
+My mentor <a href='https://github.com/benfluleck'>@benfluleck</a> suggested I abstract my form logic so that it can easily be reusable. I created a useForm hook and showed it to him and my other colleague. To my surprise, they loved it and adviced that I made some improvements on it and also upload it to [npm](https://npmjs.com/package/useformbee) as a library. 
 
 ## The solution
 **useFormBee** is a custom react hook that helps me manage and abstract form logic.<br>
@@ -77,7 +77,7 @@ const Form = () => {
     age: 'numeric',
   };
 
-  //create you callback function
+  // create you callback function
   const saveFormData = (values) => {
     // ...your logic
   };
@@ -86,8 +86,8 @@ const Form = () => {
     values, handleChange, handleSubmit, errors, handleReset,
   } = useFormBee({ callback: saveFormData, rules });
 
-  //destructure field values
-  
+  // destructure field values
+
   // the values is created from Object.keys(rules)
   const { firstName, age } = values;
 
@@ -100,6 +100,7 @@ const Form = () => {
         name='firstName'
         required
       />
+
       {/* display username error  if there is an error */}
       {errors.firstName && <p>{errors.firstName }</p>}
       <br />
@@ -110,9 +111,11 @@ const Form = () => {
         onChange={handleChange}
         name='age'
       />
+
       {/* display age error  if there is an error */}
       {errors.age && <p>{errors.age}</p>}
       <br />
+
       <button type='submit'>Submit</button>
       <button type='reset'>Reset</button>
     </form>
@@ -126,10 +129,10 @@ Thanks goes to these people <a href='https://allcontributors.org/docs/en/emoji-k
 
 <table>
   <tr>
-    <td align="center"><a href="https://github.com/benfluleck"><img src="https://avatars3.githubusercontent.com/u/36575414?s=460&v=4" width="100px;" alt="Ezekiel Ilori"/><br /><sub><b>Ezekiel Ilori</b></sub></a><br /><a href="#" title="Idea">🤔</a> <a href="#" title="Code">💻</a> <a href="#" title="Tests">⚠️</a> <a href="#" title="Doc">📖</a></td>
+    <td align="center"><a href="https://github.com/Eazybee"><img src="https://avatars3.githubusercontent.com/u/36575414?s=460&v=4" width="100px;" alt="Ezekiel Ilori"/><br /><sub><b>Ezekiel Ilori</b></sub></a><br /><a href="#" title="Idea">🤔</a> <a href="#" title="Code">💻</a> <a href="#" title="Tests">⚠️</a> <a href="#" title="Doc">📖</a></td>
     <td align="center"><a href="https://github.com/benfluleck"><img src="https://avatars0.githubusercontent.com/u/26222856?s=400&v=4" width="100px;" alt="Benny Ogidan"/><br /><sub><b>Benny Ogidan</b></sub></a><br /><a href="#" title="Review">👀</a> <a href="#" title="Tests">⚠️</a></td>
   </tr>
 </table>
 
 ## LICENSE
-- MIT
+- [MIT](https://github.com/Eazybee/useFormBee/blob/develop/LICENSE)

package-lock.json

@@ -1,14 +1,16 @@
 {
-  "name": "useFormBee",
-  "version": "1.0.0",
+  "name": "useformbee",
+  "version": "1.0.3",
   "description": "useFormBee is a custom react hook that helps handle form input, validations and other similar functionalities",
-  "main": "src/index.js",
+  "main": "dist/hooks/useFormBee.js",
   "scripts": {
     "lint": "eslint '**/*js'",
     "lint:fix": "prettier-eslint '**/*js' --write",
     "test": "jest",
     "clean": "rm -rf build",
     "start": "npm run clean && webpack-dev-server --env.mode development --open --hot",
+    "build": "babel src --out-dir dist",
+    "prepublishOnly": "npm run build",
     "build-dev": "npm run clean && webpack --env.mode development",
     "build-prod": "npm run clean && webpack --env.mode production"
   },
@@ -29,13 +31,14 @@
     "webpack-merge": "^4.2.1"
   },
   "devDependencies": {
+    "@babel/cli": "^7.5.5",
     "@babel/core": "^7.5.0",
     "@babel/node": "^7.5.0",
     "@babel/plugin-transform-runtime": "^7.5.0",
     "@babel/preset-env": "^7.5.0",
     "@babel/preset-react": "^7.0.0",
     "@testing-library/jest-dom": "^4.0.0",
-    "@testing-library/react": "^8.0.7",
+    "@testing-library/react": "^8.0.9",
     "@testing-library/react-hooks": "^1.1.0",
     "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",
@@ -68,17 +71,17 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/Eazybee/Webpack.git"
+    "url": "git+https://github.com/Eazybee/useFormBee.git"
   },
   "keywords": [
-    "webpack",
     "react",
-    "configuration"
+    "useform",
+    "react form"
   ],
   "author": "Ilori Ezekiel",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/Eazybee/Webpack/issues"
+    "url": "https://github.com/Eazybee/useFormBee/issues"
   },
-  "homepage": "https://github.com/Eazybee/Webpack#readme"
+  "homepage": "https://github.com/Eazybee/useFormBee#readme"
 }

package.json

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import '../styles/app.css';
-import useForm from '../hooks/useForm';
+import useFormBee from '../hooks/useFormBee';
 import Table from './Table';
 
 const App = () => {
@@ -18,7 +18,7 @@ const App = () => {
 
   const {
     values, handleChange, handleSubmit, errors, handleReset,
-  } = useForm({ callback: login, rules });
+  } = useFormBee({ callback: login, rules });
 
   const { userName, age } = values;
   const {

src/components/App.jsx

@@ -1,13 +1,13 @@
 import { renderHook, act } from '@testing-library/react-hooks';
-import useForm from './useForm';
+import useFormBee from './useFormBee';
 import {
   callback, rules, event, getEvent, checkBoxEvent, multipleSelectEvent,
-} from '../../test/fixtures/useForm';
+} from '../../test/fixtures/useFormBee';
 
 
 describe('userForm hook', () => {
   it(' should render', () => {
-    const { result } = renderHook(() => useForm({ callback, rules }));
+    const { result } = renderHook(() => useFormBee({ callback, rules }));
     const {
       values, errors, handleChange, handleSubmit, handleReset,
     } = result.current;
@@ -23,7 +23,7 @@ describe('userForm hook', () => {
 
   describe('handleChange function', () => {
     it('should update username field value', () => {
-      const { result } = renderHook(() => useForm({ callback, rules }));
+      const { result } = renderHook(() => useFormBee({ callback, rules }));
       const { handleChange } = result.current;
       let valid;
 
@@ -42,7 +42,7 @@ describe('userForm hook', () => {
 
     it('should have error when passed empty string for a required field',
       () => {
-        const { result } = renderHook(() => useForm({ callback, rules }));
+        const { result } = renderHook(() => useFormBee({ callback, rules }));
         const { handleChange } = result.current;
         let valid;
 
@@ -58,7 +58,7 @@ describe('userForm hook', () => {
       });
 
     it('should have error when passed data with invalid data type', () => {
-      const { result } = renderHook(() => useForm({ callback, rules }));
+      const { result } = renderHook(() => useFormBee({ callback, rules }));
       const { handleChange } = result.current;
       let valid;
 
@@ -75,7 +75,7 @@ describe('userForm hook', () => {
     });
 
     it('should update checkbox', () => {
-      const { result } = renderHook(() => useForm({ callback, rules: { agreement: 'required|boolean' } }));
+      const { result } = renderHook(() => useFormBee({ callback, rules: { agreement: 'required|boolean' } }));
       const { handleChange } = result.current;
       let valid;
 
@@ -91,7 +91,7 @@ describe('userForm hook', () => {
     });
 
     it('should update checkbox and display required messaged for a required field', () => {
-      const { result } = renderHook(() => useForm({ callback, rules: { agreement: 'required|boolean' } }));
+      const { result } = renderHook(() => useFormBee({ callback, rules: { agreement: 'required|boolean' } }));
       const { handleChange } = result.current;
       let valid;
 
@@ -107,7 +107,7 @@ describe('userForm hook', () => {
     });
 
     it('should update multiple select', () => {
-      const { result } = renderHook(() => useForm({
+      const { result } = renderHook(() => useFormBee({
         callback, rules: { friends: ['alpha', { in: ['simi', 'mosimi', 'eazybee'] }] },
       }));
       const { handleChange } = result.current;
@@ -129,7 +129,7 @@ describe('userForm hook', () => {
 
   describe('handleSubmit function', () => {
     it('should submit and call calback function', () => {
-      const { result } = renderHook(() => useForm(
+      const { result } = renderHook(() => useFormBee(
         { callback, rules: { username: 'alpha' } },
       ));
 
@@ -146,7 +146,7 @@ describe('userForm hook', () => {
     });
 
     it('should not submit nor call calback function', () => {
-      const { result } = renderHook(() => useForm({ callback, rules }));
+      const { result } = renderHook(() => useFormBee({ callback, rules }));
       const { handleSubmit } = result.current;
 
       let callbackResponse;
@@ -164,7 +164,7 @@ describe('userForm hook', () => {
 
   describe('handleReset function', () => {
     it('should clear all inputs field when called', () => {
-      const { result } = renderHook(() => useForm({ callback, rules }));
+      const { result } = renderHook(() => useFormBee({ callback, rules }));
 
       const { handleReset } = result.current;