Merge pull request #7 from pburtchaell/pburtchaell-development

Add tests and update examples

.babelrc

@@ -1,7 +1,7 @@
 {
   "presets": [
-    "stage-0",
     "es2015",
+    "stage-0",
     "react"
   ]
 }

.eslintrc

@@ -1,5 +1,6 @@
 {
   "extends": "eslint-config-airbnb",
+  "parser": "babel-eslint",
   "env": {
     "browser": true,
     "node": true,
@@ -18,7 +19,7 @@
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
     "react/jsx-boolean-value": 0,
-    "react/react-in-jsx-scope": 2,
+    "react/react-in-jsx-scope": 0,
     "react/jsx-filename-extension": 0,
     "react/prop-types": 0,
     "react/no-unused-prop-types": 0,
@@ -36,6 +37,6 @@
     "spy": true,
     "shallow": true,
     "mount": true,
-    "jsdom": true
+    "TYPES"
   }
 }

.github/CONTRIBUTING.md

@@ -0,0 +1,75 @@
+# Contributing
+
+[![Known Vulnerabilities](https://snyk.io/test/npm/react-input/badge.svg)](https://snyk.io/test/npm/react-input) [![Dependency Status](https://david-dm.org/pburtchaell/redux-promise-middleware.svg)](https://david-dm.org/pburtchaell/redux-promise-middleware) [![Build Status](https://travis-ci.org/pburtchaell/react-input.svg)](https://travis-ci.org/pburtchaell/react-input) [![Coverage Status](https://coveralls.io/repos/pburtchaell/react-input/badge.svg?branch=master&service=github)](https://coveralls.io/github/pburtchaell/react-input?branch=master)
+
+**It is imperative that pull requests include tests and documentation and issues follow guidelines.** Please be familar with the [GitHub Community Guidelines](https://help.github.com/articles/github-community-guidelines/) before contributing to this project. If you are new to open source, check out this 38 minute course on [how to contribute to open source on GitHub](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github). It's free! :smile:
+
+## Getting Started
+
+1. Clone the repository
+2. Install dependencies: `npm install`, or, if you use Yarn: `yarn`
+3. Run tests: `npm test`
+4. Run example: `npm start`
+
+## Need Help? :raising_hand:
+
+It's okay to ask for help via a GitHub issue, but first read the ["Filing an Issue"](#filing-an-issue) guide and consider:
+
+* Is my issue specific to this project?
+* Is [StackOverflow](http://stackoverflow.com/questions/ask) a better place to ask for help? If yes, use the **#react** tags.
+* Can I reduce the code example to the bare minimum required to explain what I need help with?
+* Can I create a [JSBin](https://jsbin.com/?html,output) for the code example?
+* Can I explain what the expected behavior is?
+* Can I explain what the actual beavior is?
+
+## Found a Bug?
+
+**The best bug report is a failing test in the repository as a pull request.** Please refer to the ["Filing an Issue"](#filing-an-issue) guide and include:
+
+* Version number
+* Steps to reproduce
+* Expected behavior
+* Actual behavior
+
+## Have a Feature Request?
+
+If you have a feature request, provide commentary and code samples on what this feature means for you.
+
+* What do you perceive it will enable you to do?
+* What potential bugs will be avoided?
+* What edge cases will it support?
+* Is it a [micro-optimization](http://stackoverflow.com/questions/tagged/micro-optimization). If yes, is it a valuable?
+
+Please refer to the ["Filing an Issue"](#filing-an-issue) guide.
+
+## Filing an Issue
+
+1. Check if a related open issue exists by using search. See the GitHub guide to [searching issues](https://help.github.com/articles/searching-issues/).
+2. If a related issue does *not* exist, open an issue.
+3. If a related issue does exist, contribute to the conversation there.
+
+Before you create an issue, consider:
+
+* Did you describe the problem you are encountering?
+* Did you describe the expected behavior?
+* Did you provide a formatted code example? See the GitHub guide on [how to format code with Markdown](help.github.com/categories/writing-on-github/).
+* Did you include a relevant label?
+
+If you include all of the above, it is easier to understand you. We respond quicker to formatted, comprehensive issues.
+
+Please keep in mind that issues should *contribute* to the community. The primary function of issues should be for bugs and feature requests. If you open an issue asking for help, that's fine. However, if you do not provide context or code examples, the issue will be closed and you will be redirected to this document.
+
+## Making a Contribution
+
+1. Check [the issues](https://github.com/pburtchaell/react-input/issues) for "help wanted" labels.
+2. Check if there is a pull request already open for this issue. If there is, please do not duplicate efforts.
+3. Commit the changes required to resolve the issue. Git commit messages [should be written in the imperative](http://chris.beams.io/posts/git-commit/). A pre-commit hook will run tests and lint code. If needed, you can force a commit with `--no-verify`.
+4. If needed, add one or more unit test(s). **For new features and bug fixes, a unit test is required.** Follow the [red/green/refactor process](https://en.wikipedia.org/wiki/Test-driven_development#Development_style).
+5. Run tests and linter: `npm test`. Code is linted using ES Lint. Rules are located in `.eslintrc`. You must maintain the existing code style. **Tests must pass before the PR is merged.**
+6. Document new features and/or API changes.
+
+If you add a new dependency (for the package or development), you will need to use [Yarn](https://yarnpkg.com/) to update the `yarn.lock` file with the dependency version. By installing depdencies faster than npm, Yarn drastically decreases the time it takes to run builds on continuous integration.
+
+## File organization
+
+All code, including tests, is written in next-generation JavaScript and transpiled using Babel. Source files are located in `src` and transpiled to `dist`, which is gitignored. Tests should be placed in a `test` directory.

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,33 @@
+:wave: Hi! If you switch to "Preview" mode (using the button above), this is easier to read and you can click on links. This template exists to help you create an issue that is both valuable to you and to the GitHub community.
+
+:point_right: **Found a bug?** [Read this](https://github.com/pburtchaell/react-input/blob/master/.github/CONTRIBUTING.md#found-a-bug).
+:point_right: **Have a feature request?** [Read this](https://github.com/pburtchaell/react-input/blob/master/.github/CONTRIBUTING.md#have-a-feature-request).
+:point_right: **Need help?** [Read this](https://github.com/pburtchaell/react-input/blob/master/.github/CONTRIBUTING.md#need-help).
+
+If you delete this template and do not provide the information we need to resolve your issue, *your issue will be closed* and you will be redirected to the contributing guide. :skull:
+
+---
+
+For help, use this template:
+
+## Version Number
+
+## Code Example
+
+## Expected Behavior
+
+## Actual Behavior
+
+---
+
+For bugs, use this template:
+
+## Version Number
+
+## Test Case
+
+## Steps to Reproduce
+
+## Expected Behavior
+
+## Actual Behavior

.gitignore

@@ -1,5 +1,8 @@
 node_modules/
-_gh_pages/
 dist/
+coverage/
+.coverage
+.coveralls.yml
+.idea/
 *.log
 .DS_Store

.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+  - "4.1"
+cache: yarn

LICENSE

@@ -1,12 +1,21 @@
-Copyright 2015-current Patrick Burtchaell.
-
-The above copyright notice and this permission notice shall be included
-in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
-IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
-CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
-TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
-SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+The MIT License (MIT)
+
+Copyright (c) 2015 Patrick Burtchaell
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,13 +1,14 @@
-# react-input [![npm version](https://badge.fury.io/js/react-input.svg)](http://badge.fury.io/js/react-input) [![Dependency Status](https://david-dm.org/pburtchaell/react-classes.svg)](https://david-dm.org/pburtchaell/react-input)
+# React Input
+
+[![npm version](https://badge.fury.io/js/react-input.svg)](http://badge.fury.io/js/react-input) [![Build Status](https://travis-ci.org/pburtchaell/react-input.svg?branch=master)](https://travis-ci.org/pburtchaell/react-input) [![Coverage Status](https://coveralls.io/repos/github/pburtchaell/react-input/badge.svg)](https://coveralls.io/github/pburtchaell/react-input) [![npm downloads](https://img.shields.io/npm/dm/react-input.svg?style=flat)](https://www.npmjs.com/package/react-input)
 
 ## Overview
 
 React input is a lightweight, dependency free component for building forms in React without having to think about what happens under the hood. It uses one component and an array of objects that describe the inputs in the form.
 
 ## Usage
 
-- Install the component via npm: `npm install react-input`
-- Require the Form component
+Install the component via npm: `npm install react-input`.
 
 ```
 <Form
@@ -23,10 +24,10 @@ React input is a lightweight, dependency free component for building forms in Re
         // handle a changed value on the input
       },
       renderAfter: () => (
-        <div>Include custom JSX after the input. This is useful for instructional text or strength meters for passwords</div>
+        <div>Include an element after the input, which is useful for instructional text or strength meters for passwords</div>
       ),
       renderBefore: () => (
-        <div>Include custom JSX before the input</div>
+        <div>Include an element before the input</div>
       )
     },
     // additional inputs to include in the form
@@ -57,11 +58,11 @@ The `isPending`, `isRejected` and `isFulfilled` props are useful to add differen
 | onChange  | Runs when any input in the form changes. The first parameter is the state of the form after the change. |
 | onSubmit  | Runs when the submit button is clicked. The first parameter is the current state of the form.           |
 
-### Input Props and Events
+### Input Properties and Events
 
 Only text based inputs can be used, e.g., `email`, `text`, `tel` and `password`.
 
-#### Props
+#### Properties
 
 | Name         | Type     | Description                     | Required  | Default  |
 |--------------|----------|---------------------------------|---------- |----------|
@@ -71,8 +72,8 @@ Only text based inputs can be used, e.g., `email`, `text`, `tel` and `password`.
 | label        | boolean  | Label for the input field       |           | true     |
 | required     | boolean  | Make field required             |           | true     |
 | error        | boolean  | Is the input in an error state? |           | false    |
-| renderAfter  | function | JSX to render after the input   |           |          |
-| renderBefore | function | JSX to render before the input  |           |          |
+| renderAfter  | function | Element to render after the input   |           |          |
+| renderBefore | function | Element to render before the input  |           |          |
 
 #### Events
 
@@ -83,6 +84,4 @@ Only text based inputs can be used, e.g., `email`, `text`, `tel` and `password`.
 In addition to the props listed above, all standard HTML input attributes are supported and can be used as props on the inputs.
 
 ---
-Built with care in New Orleans by [Patrick Burtchaell](http://twitter.com/pburtchaell).
-
-Copyright 2015-current Patrick Burtchaell. Licensed MIT.
+Copyright 2015 Patrick Burtchaell. Licensed MIT.

bin/test.sh

@@ -0,0 +1,29 @@
+#!/bin/bash
+
+# Description: run tests normally, for local testing
+# Param 1: the reporter to use, defaults to spec
+runTests()
+{
+  `npm bin`/jest
+}
+
+# Description: run tests with coverage
+runCoverageTests()
+{
+  `npm bin`/jest --coverage
+}
+
+# If on Travis, run tests with Istanbul
+if [ -n "${TRAVIS_JOB_ID}" ]; then
+
+  echo -e "Job id set to ${TRAVIS_JOB_ID}. \nRunning tests..."
+  NODE_ENV=test runCoverageTests
+
+  echo "Sending coverage information to Coveralls..."
+  cat ./coverage/lcov.info | `npm bin`/coveralls || true
+  rm -rf ./coverage
+
+# Otherwise, when local, run tests normally without Istanbul
+else
+  NODE_ENV=test runTests ${REPORTER}
+fi

example/README.md

@@ -1,8 +1,7 @@
 # Example
 
-A simple example that demonstrates React input using ES 2015 syntax.
+A simple example that demonstrates React input.
 
 1. Clone the project.
-2. CD to example: `cd example`
-3. Install dependencies: `npm install`
-4. Run `npm start`
+2. Install dependencies: `npm install`
+3. Run `npm start`