Adding documentation to the README file - adding allowDupes option in…

… tags component - fixing eslint task

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Prakhar Srivastav
+
+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,2 +1,199 @@
 # react-tags
-> Simple tagging component for React projects.
+
+![npm][npm-version-image]
+[![peerDependency Status][peer-dep-image]][peer-dep-url]
+[![devDependency Status][dev-dep-image]][dev-dep-url]
+
+> Simple tagging component for React projects.
+
+## Getting Started ##
+
+#### Installation
+From the root of your project.
+```sh
+npm install react-tags --save
+```
+
+## Usage
+Simple implementation of tags. See [options available](#options) below.
+```js
+import React, { Component } from 'react';
+import { render } from 'react-dom';
+import Tags from 'react-tags';
+
+class Application extends Component{
+	constructor(props){
+		super(props);
+
+		this.state = {
+			tags: ['hello', 'world']
+		}
+	}
+
+	onTagsChange(tags){
+		console.log(`new tags: ${tags}`);
+	}
+
+	render(){
+		return (
+			<div>
+				<Tags
+				 initialTags={this.state.tags}
+				 placeholder="Add a tag"
+				 change={this.onTagsChange} />
+			</div>
+		);
+	}
+}
+
+render(<Application />, document.getElementById('application'));
+```
+
+<a name="options"></a>
+#### Options
+* **[`initialTags`](#initialTags)**
+* **[`placeholder`](#placeholder)**
+* **[`change`](#change)**
+* **[`added`](#added)**
+* **[`readOnly`](#readOnly)**
+* **[`removeTagWithDeleteKey`](#removeTagWithDeleteKey)**
+* **[`removeTagIcon`](#removeTagIcon)**
+* **[`allowDupes`](#allowDupes)**
+* **[`id`](#id)**
+
+<a name="initialTags"></a>
+##### initialTags ~ optional ~ default `[]`
+An `array` of tags to be passed in and rendered right away in the component
+```js
+const tags = ['hello', 'world'];
+
+<Tags initialTags={tags} />
+```
+
+<a name="placeholder"></a>
+##### placeholder ~ optional ~ default `null`
+A `string` used as placeholder text in the tags input field
+```js
+<Tags placeholder="Add a tag" />
+```
+
+<a name="change"></a>
+##### change ~ optional
+A `function` fired anytime there is a change - returns the new `array` of tags
+```js
+onTagsChange(tags){
+	console.log(`new tags: ${tags}`);
+}
+
+<Tags change={this.onTagsChange} />
+```
+
+<a name="added"></a>
+##### added ~ optional
+A `function` fired when a new tag is added - returns a `string` of the new tag
+```js
+onTagAdded(tag){
+	console.log(`new tag: ${tags}`);
+}
+
+<Tags added={this.onTagAdded} />
+```
+
+<a name="removed"></a>
+##### removed ~ optional
+A `function` fired when a new tag is deleted - returns a `string` of the tag that was deleted
+```js
+onTagRemoved(tag){
+	console.log(`deleted tag: ${tag}`);
+}
+
+<Tags removed={this.onTagRemoved} />
+```
+
+<a name="readOnly"></a>
+##### readOnly ~ optional ~ default `false`
+A `boolean` that sets the tag component to read only mode. No adding or removing tags and pointer events
+```js
+<Tags readOnly={true} />
+```
+
+<a name="removeTagWithDeleteKey"></a>
+##### removeTagWithDeleteKey ~ optional ~ default `true`
+A `boolean` that allows tags to be removed with the delete key when the input field is empty
+```js
+<Tags removeTagWithDeleteKey={true} />
+```
+
+<a name="removeTagIcon"></a>
+##### removeTagIcon ~ optional ~ default `"x"`
+The `element` to be used for the delete icon
+```js
+const removeIcon = () => {
+	return (
+		<i class="my-custom-icon"></i>
+	);
+}
+
+<Tags removeTagsIcon={removeIcon()} />
+```
+
+<a name="allowDupes"></a>
+##### allowDupes ~ optional ~ default `false`
+A `boolean` that allows tags to be added more than once
+```js
+<Tags allowDupes={false} />
+```
+
+<a name="id"></a>
+##### id ~ optional ~ default `null`
+The `string` to be used for the ID of the component
+```js
+<Tags id="my-tags-component" />
+```
+
+## Styling
+#### Installation
+Import the main SCSS file in to your application SCSS files
+```scss
+@import "node_modules/react-tags/src/scss/react-tags";
+```
+
+There are a few variables set to `!default` that can be overriden. If you need to change it more just override the actual styles.
+
+**Any overriden variables needs to go above the `@import` statement to take effect**
+```scss
+//-- Global UI
+$tag-base-height
+$tag-base-font-size
+$tag-base-border-radius
+$tag-base-font-color
+$tag-base-margin
+$tag-base-font-family
+
+//-- Tags
+$tag-background-color
+$tag-background-hover-color
+$tag-remove-color
+$tag-remove-font-size
+$tag-remove-hover-color
+
+//-- Input
+$tag-input-bg-color
+$tag-input-border
+$tag-input-placeholder-color
+```
+
+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 "node_modules/react-tags/dist/react-tags.min.css";
+```
+
+## License ##
+
+ * [MIT License](http://www.opensource.org/licenses/mit-license.php)
+
+[npm-version-image]: https://img.shields.io/npm/v/npm.svg?maxAge=2592000
+[dev-dep-image]: https://david-dm.org/JFusco/react-tags/dev-status.svg
+[dev-dep-url]: https://david-dm.org/JFusco/react-tags#info=devDependencies
+[peer-dep-image]: https://david-dm.org/JFusco/react-tags/peer-status.svg
+[peer-dep-url]: https://david-dm.org/JFusco/react-tags#info=peerDependencies

gulp/tasks/eslint.js

@@ -3,7 +3,7 @@
 module.exports = (gulp, $) => {
 	gulp.task('eslint', () => {
 		return gulp.src('./src/**/*.js', {read: false})
-			.pipe($.shell('eslint --fix --ignore-path .eslintignore ./src/js/!*'))
+			.pipe($.shell('eslint --fix --ignore-path .eslintignore ./src/js/*'))
 			.pipe($.filelog('Fixing JS'));
 	});
 };

package.json

@@ -1,12 +1,25 @@
 {
 	"name": "react-tags",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"description": "Simple tagging component",
 	"main": "dist-components/Tags.js",
+	"license": "MIT",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/JFusco/react-tags"
 	},
+	"author": {
+		"name": "Joe Fusco",
+		"email": "[email protected]"
+	},
+	"keywords": [
+		"react",
+		"tags",
+		"react component",
+		"tagging",
+		"tag input",
+		"es6"
+	],
 	"peerDependencies": {
 		"react": "^15.2.1",
 		"react-addons-update": "^15.2.1"
@@ -18,24 +31,24 @@
 		"babel-preset-es2015": "^6.9.0",
 		"babel-preset-react": "^6.11.1",
 		"babel-register": "^6.9.0",
-		"babel-eslint": "~6.0.4",
+		"babel-eslint": "^6.1.2",
 		"gulp-sass": "^2.3.2",
 		"gulp-shell": "^0.5.2",
-		"http-server": "^0.9.0",
-		"react": "^15.2.1",
-		"react-addons-update": "^15.2.1",
-		"webpack": "^1.13.1",
 		"gulp": "^3.9.1",
 		"gulp-rename": "^1.2.2",
-		"gulp-eslint": "~2.0.0",
+		"gulp-eslint": "^3.0.1",
 		"gulp-load-plugins": "~1.2.4",
 		"gulp-clean-css": "^2.0.11",
-		"gulp-scss-lint": "^0.3.9",
+		"gulp-scss-lint": "^0.4.0",
 		"gulp-scss-lint-stylish": "^1.0.1",
 		"gulp-util": "~3.0.7",
 		"gulp-watch": "~4.3.6",
-		"run-sequence": "^1.2.1",
 		"gulp-filelog": "~0.4.1",
+		"http-server": "^0.9.0",
+		"react": "^15.2.1",
+		"react-addons-update": "^15.2.1",
+		"webpack": "^1.13.1",
+		"run-sequence": "^1.2.1",
 		"minimist": "~1.2.0"
 	}
 }

src/js/Tags.js

@@ -46,6 +46,10 @@ export default class Tags extends Component{
 	addTag(){
 		const value = this.input.value.trim();
 
+		if (!this.props.allowDupes){
+			if (this.state.tags.indexOf(value) >= 0) return;
+		}
+
 		this.setState({
 			tags: update(this.state.tags, {$push: [value] })
 		}, () => {