Merge pull request #21 from pburtchaell/v2

Version 2.0.0

.babelrc

@@ -0,0 +1,4 @@
+{
+  "stage": 0,
+  "loose": "all"
+}

.eslintrc

@@ -0,0 +1,23 @@
+{
+  "extends": "eslint-config-airbnb",
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true,
+    "mocha": true
+  },
+  "ecmaFeatures": {
+    "jsx": true,
+    "modules": true
+  },
+  "rules": {
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2,
+    "padded-blocks": 0,
+    "block-scoped-var": 0
+  },
+  "plugins": [
+    "react"
+  ]
+}

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 bin/tests/.tmp/
 dist/
+*.log*

.npmignore

@@ -1,3 +1,7 @@
-bin/
 example/
-webpack.config.js
+src/
+.eslintrc
+.babelrc
+Makefile
+webpack.local.config.js
+webpack.local.server.js

CONTRIBUTING.md

@@ -0,0 +1,24 @@
+# Contributing
+
+**Please make sure your PR includes both tests and documentation.**
+
+## Getting started
+
+1. Clone the repository
+2. Install dependencies: `npm install`
+3. You can now add any changes needed.
+4. Run unit test and linter: `npm test`
+
+## 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. Note that running tests uses JSDom, which requires io.js.
+
+## Documentation
+
+New features or API changes should be documented in the README.
+
+## Code style
+
+Code is linted using ESLint and babel-eslint. Rules are located in `.eslintrc`. Please do your best to maintain the existing code style.

Makefile

@@ -0,0 +1,20 @@
+bin = ./node_modules/.bin
+
+SRC_JS = $(shell find src -name "*.js")
+DIST_JS = $(patsubst src/%.js, dist/%.js, $(SRC_JS))
+
+$(DIST_JS): dist/%.js: src/%.js
+	mkdir -p $(dir $@)
+	$(bin)/babel $< -o $@
+
+# Task: js
+# Builds distribution JS files for publishing to npm.
+js: $(DIST_JS)
+
+# Task: test-all
+# Runs all unit tests
+test-all:
+	NODE_ENV=test `npm bin`/mocha --compilers js:babel/register --recursive
+	`npm bin`/eslint ./src/*.js
+	`npm bin`/eslint ./test/*.js
+	`npm bin`/eslint ./examples/es2015/*.js

README.md

@@ -6,50 +6,41 @@
 
 This is a component designed to provide "[snackbar](http://www.google.com/design/spec/components/snackbars-toasts.html#snackbars-toasts-usage)" notification messages. I would suggest reading the usage guidelines for [snackbars](http://www.google.com/design/spec/components/snackbars-toasts.html#).
 
+Please read the [contributing guide](/CONTRUBUTING.md) if you are interested in contributing. If you are coming from version 1.0.0, there is an [upgrade guide](/UPGRADING.md) to help you make the switch. If you have questions, please feel free to create an issue on GitHub or message me (@pburtchaell) on the [Reactiflux Slack community](http://www.reactiflux.com/).
+
 ## Getting Started
 
-1. First, install the component via npm: `npm install react-notification`
-2. Require the component: `import Notification from 'react-notification';`
+Install the component via npm: `npm install react-notification`.
 
 ## Usage
 
 ```
 <Notification
+  isActive={boolean}
   message={string}
   action={string}
-  styles={object}
-  onClick={func}
+  onClick={myClickHander}
 />
 ```
 
-## Example
-
-See [here](/bin/tests/test.js).
-
 ### Props
 
-| Name      | Type            | Description                                         | Required  |
-|---------  |---------------  |---------------------------------------------------  |---------- |
-| message   | string          | The message for the notification                    | true      |
-| action    | string          | The name of the action, e.g., "close" or "undo"     |           |
-| styles    | object || bool  | Styles to apply to the component*                   |           |
-| dismissAfter | integer      | Time in milliseconds to dismiss the notification (eg. `2000` for 2 seconds) |           |
+| Name      | Type               | Description                                       | Required  | Default  |
+|-----------|--------------------|---------------------------------------------------|---------- |----------|
+| isActive  | boolean            | If true, the notification is visible              | true      | `false`  |
+| message   | string             | The message for the notification                  | true      |          |
+| action    | string             | The name of the action, e.g., "close" or "undo"   | true      |          |
+| styles    | object || boolean  | Custom styles to apply to the component*          |           |          |
+| styles    | boolean            | Timeout for onDismiss event                       |           | `2000`   |
 
 *Setting this prop to `false` will disable all inline styles. This is useful if you aren't using React inline styles and would like to use CSS instead. See [styles](#styles) for more.
 
-### Methods
-
-| Method   | Usage                  |                          |
-|--------  |----------------------  |------------------------  |
-| show     | `Notification.show()`  | Opens the notification.  |
-| hide     | `Notification.hide()`  | Hides the notifciation.  |
-
-
 ## Events
 
-| Event     | Description                                         |
-|---------  |---------------------------------------------------  |
-| onClick   | Callback function to run when the action is clicked |
+| Event     | Description                                                |
+|-----------|------------------------------------------------------------|
+| onClick   | Callback function to run when the action is clicked        |
+| onDismiss | Callback function to run when dismissAfter timer runs out |
 
 ## Styles
 
@@ -75,17 +66,19 @@ I would highly suggest using this method since the styles included in the compon
 
 ```
 getNotificationStyles() {
-
-  var bar = {
+  let bar = {
     background: '#263238'
   };
 
-  var action = {
-    color: '#FFCCBC'
+  let active = {
+    left: '3rem'
   };
 
-  return { bar, action };
+  let action = {
+    color: '#FFCCBC'
+  };
 
+  return { bar, active, action };
 },
 
 render() {

UPGRADING.md

@@ -0,0 +1,22 @@
+# 1.0.0 to 2.0.0
+
+The 2.0.0 release is a component with no local state and consequently, no methods to show and hide the component. Instead, you need to use the `isActive` prop to control the visibility of the component.
+
+Additionally, the functionality of the `dissmissAfter` prop is changed. Instead of the component dismissing the notification using local state, it will run a callback event `onDismiss` after the time specified in `dismissAfter`.
+
+For example, if you want your notification to dismiss after two seconds:
+
+```js
+var props = {
+  isActive: this.state.isNotficationActive,
+  message: 'This is a notification',
+  action: 'Dismiss',
+  dismissAfter: 2000,
+  onDismiss: this.hideMyNotification,
+  onClick: this.hideMyNotification
+}
+
+<Notfication  {...props} />
+```
+
+If you have questions, please feel free to create an issue on GitHub or message me (@pburtchaell) on the [Reactiflux Slack community](http://www.reactiflux.com/).

examples/README.md

@@ -0,0 +1,4 @@
+# Examples
+
+- ES5 example using `React.createClass`.
+- ES 2015 example with multiple notifications.