Major changes to build process and documentation. Adding examples and docs directory. See release notes for more details

Author: jfusco

.babelrc

@@ -1,10 +1,11 @@
 {
 	"presets": [
 		"react",
-		"es2015",
-		"stage-2"
+		"es2015"
 	],
 	"plugins": [
-		"transform-class-properties"
+		"transform-function-bind",
+		"transform-class-properties",
+		"transform-object-rest-spread"
 	]
 }

.npmignore

@@ -1,8 +1,14 @@
 /.idea/
 /__tests__/
 /gulp/
-/src/
+/src/example/
+/src/component/js/
 /coverage/
+/docs/
+/webpack/
+/src/component/index.html
+/src/component/index.js
+demo.gif
 .editorconfig
 .babelrc
 .eslintignore
@@ -13,3 +19,4 @@
 config.json
 gulpfile.babel.js
 webpack.config.babel.js
+webpack.config.example.babel.js

.travis.yml

@@ -4,5 +4,6 @@ node_js:
 before_install:
   - npm install -g gulp
   - npm install -g eslint
+  - npm install -g babel-eslint
 script:
-    - "gulp eslint && npm test"
+    - "npm run lint && npm test"

README.md

@@ -10,18 +10,35 @@
 
 > WAI-ARIA compliant React autocomplete component
 
+### Demo
+https://jfusco.github.io/react-predictive-input
+
+## Getting Started ##
+
+#### Installation
+From the root of your project.
+```sh
+npm install react-predictive-input --save
+```
+
 ## Usage
 Implementation of autocomplete. See [available options](#options) below.
 ```js
 import React, { Component } from 'react';
 import { render } from 'react-dom';
-import Autocomplete from 'react-autocomplete';
+import Autocomplete from 'react-predictive-input';
 
 class Application extends Component{
+	static defaultProps = {
+        fruit: ['bananas', 'strawberries', 'blueberries', 'pineapples', 'apples', 'tomatos', 'mangos', 'oranges', 'grapes', 'Rasberries', 'Blackberries', 'starfruit']
+    };
+
+    static propTypes = {
+        fruit: PropTypes.arrayOf(PropTypes.string)
+    };
+
 	constructor(props){
 		super(props);
-
-		this.fruit = ['bananas', 'strawberries', 'blueberries', 'pineapples', 'apples', 'tomatos', 'mangos', 'oranges', 'grapes', 'Rasberries', 'Blackberries', 'starfruit'];
 	}
 
 	onItemSelected(value){
@@ -32,9 +49,10 @@ class Application extends Component{
 		return (
 			<div>
 				<Autocomplete
-				 id="1"
-				 placeholder="Fruits"
-				 onSelected={this.onItemSelected.bind(this)} />
+				 id="fruit"
+				 placeholder="Search a type of fruit"
+				 data={this.props.fruit}
+				 onSelected={::this.onItemSelected)} />
 			</div>
 		);
 	}
@@ -59,14 +77,14 @@ render(<Application />, document.getElementById('application'));
 ##### id ~ required
 The unique `id` of the component - used for setting up accessibility
 ```js
-<Autocomplete id="1" />
+<Autocomplete id="fruit" />
 ```
 
 <a name="placeholder"></a>
 ##### placeholder ~ optional ~ default `null`
 A `string` used as placeholder text in the tags input field
 ```js
-<Autocomplete placeholder="Fruits" />
+<Autocomplete placeholder="Search a type of fruit" />
 ```
 
 <a name="data"></a>
@@ -130,7 +148,7 @@ onItemSelected(value) {
 #### Installation
 Import the main SCSS file in to your application SCSS files
 ```scss
-@import "src/scss/components/react-autocomplete";
+@import "node_modules/react-predictive-input/src/component/scss/styles.scss";
 ```
 
 There are a few variables set to `!default` that can be overriden. If you need to change it more just override the actual styles.
@@ -176,7 +194,7 @@ $ac-s-padding
 
 If you don't care to override variables and just want to override actual styles you may choose to import the minified compiled version of the css instead
 ```scss
-@import "dist/react-autocomplete.min.css";
+@import "node_modules/react-predictive-input/dist/styles.css";
 ```
 
 ## Tests ##

__tests__/Suggestion-test.js

@@ -5,14 +5,19 @@ jest.disableAutomock();
 import React from 'react';
 import { findDOMNode } from 'react-dom';
 import { createRenderer, Simulate, renderIntoDocument } from 'react-addons-test-utils';
-import Suggestion from '../src/js/Suggestion';
+import Suggestion from '../src/component/js/Suggestion';
 
 describe('Suggestion', () => {
 	it('should render', () => {
 		const renderer = createRenderer();
+		const onMouseOver = jest.genMockFunction();
+		const onMouseDown = jest.genMockFunction();
 
 		renderer.render(
-			<Suggestion />
+			<Suggestion
+				className=""
+				onMouseOver={onMouseOver}
+				onMouseDown={onMouseDown} />
 		);
 
 		const suggestion = renderer.getRenderOutput();

config.json

@@ -1,7 +1,4 @@
 {
-	"css": {
-		"fileName": "react-autocomplete"
-	},
 	"scripts": {
 		"fileName": "react-autocomplete",
 		"entry": "Autocomplete",