Merge pull request #70 from Wolox/2.1.4

2.1.4

.babelrc

@@ -1,19 +1,23 @@
 {
   "presets": [
-    "es2015",
-    "react"
+    ["env", {
+      "targets": {
+        "browsers": ["last 2 versions", "safari >= 7"]
+      }
+    }],
+    "react" 
   ],
   "plugins": [
     "transform-class-properties",
     ["module-resolver", {
       "root": ["./src"],
       "alias": {
-        "constants": "./src/constants.js",
-        "assets": "./assets",
-        "tests-mocks": "./mocks",
-        "actions": "./src/store/actions",
-        "helper": "./src/store/reducers/helper.js",
-        "messagesComponents": "./src/components/Widget/components/Conversation/components/Messages/components"
+        "@constants": "./src/constants.js",
+        "@assets": "./assets",
+        "@tests-mocks": "./mocks",
+        "@actions": "./src/store/actions",
+        "@utils": "./src/utils",
+        "@messagesComponents": "./src/components/Widget/components/Conversation/components/Messages/components"
       }
     }]
   ]

.eslintignore

@@ -1 +1,2 @@
 lib
+dev

.eslintrc

@@ -0,0 +1,6 @@
+{   
+  "extends": "wolox",
+  "rules": {
+    "import/order": "off"
+  }
+}

.npmignore

@@ -9,3 +9,4 @@ circle.yml
 .eslintrc.js
 .eslintignore
 webpack.config.js
+package-lock.json

CONTRIBUTING.md

@@ -19,32 +19,23 @@ If you have a new feature you want to add or a bug you think you can fix, follow
 
 ## Installation
 
-To dev this project and see changes on the fly
+To dev this project and see changes on the fly, simply use the script
 
 ```bash
 npm start
 ```
 
-To get this project up and running, you need to build it with
-
-```bash
-npm run build
-```
-
-and then, add it to a dummy project using the file instead of the package. You can use either yarn or npm:
-
-```bash
-npm i <path-to>/react-chat-widget
-
-yarn add file:<path-to>/react-chat-widget
-```
-
 ##  Testing
 
 Your new feature **must** be tested with the proper tools. In this project, we use Jest and Enzyme. Once your tests are written, run:
 
 ```bash
 npm run test
 ```
+All new tests needs to be pass in order to approve the PR.
 
 If there any view changes, you need to add screenshots for what's been changed for us to see any improvement or your new feature.
+
+## Documentation
+
+If you are adding a new feature, you **must** add the documentation for it, showing how to use it.

README.md

@@ -161,18 +161,19 @@ export default App;
 |**fullScreenMode**|PropTypes.bool|NO|false|Allow the use of full screen in full desktop mode|
 |**badge**|PropTypes.number|NO|0|Display a notification badge on the launcher if the value is greater than 0|
 |**autofocus**|PropTypes.bool|NO|true|Autofocus or not the user input|
+|**customLauncher**|PropTypes.func|NO||Custom Launcher component to use instead of the default|
 
 #### Styles
 
-To change the styles you need the widget to have, simply override the CSS classes wrapping them within the containers and add your own style to them!
-For expample:
+To change the styles you need the widget to have, simply override the CSS classes wrapping them within the containers and add your own style to them! All classes are prefixed with `rcw-` so they don't override your other classes in case you are not hasing them. 
+To verride, you can do, for expample:
 
 ```css
-.conversation-container > .header {
+.rcw-conversation-container > .rcw-header {
   background-color: red;
 }
 
-.message > .response {
+.rcw-message > .rcw-response {
   background-color: black;
   color: white;
 }
@@ -206,6 +207,7 @@ In order to add new messages, you are provided with the following methods:
     }
     ```
   - By default, `target` value is `_blank` which will open the link in a new window.
+
 - **renderCustomComponent**
   - params: 
     - component: Component to be render,
@@ -227,6 +229,18 @@ You can also control certain actions of the widget:
   - params: No params expected
   - Method to toggle the availability of the message input for the user to write on
 
+#### Widget components
+
+##### Custom Launcher
+
+You can use a custom component for the Launcher if you need one that's not the default, simply use the **customLauncher** prop like:
+
+```js
+  launcher={handleToggle => this.getCustomLauncher(handleToggle)}
+```
+
+`getCustomLauncher()`is a method that will return the `Launcher`component. By default, the function passed by that prop, will receive the `handleToggle` parammeter that is the method which toggles the widget.
+
 ## About
 
 This project is maintained by [Martín Callegari](https://github.com/mcallegari10) and it was written by [Wolox](http://www.wolox.com.ar).

circle.yml

@@ -4,7 +4,7 @@ machine:
 
 dependencies:
   override:
-    - yarn
+    - npm i
 test:
   override:
-    - yarn run test
+    - npm run test

dev/App.js

@@ -1,7 +1,7 @@
-import React from 'react';
-import { Widget, addResponseMessage } from '../';
+import React, { Component } from 'react';
+import { Widget, addResponseMessage } from '../index';
 
-export default class App extends React.Component {
+export default class App extends Component {
   componentDidMount() {
     addResponseMessage('Welcome to this awesome chat!');
   }

dev/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <title>Dev Widget</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

dev/main.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
 
-const elem = document.createElement('div');
-document.body.appendChild(elem);
+import App from './App';
 
-ReactDOM.render(<App />, elem);
+ReactDOM.render(<App />, document.getElementById('root'));

index.js

@@ -6,8 +6,9 @@ import {
   renderCustomComponent,
   toggleWidget,
   toggleInputDisabled,
-  dropMessages
-} from './src/store/actions/dispatcher';
+  dropMessages,
+  isWidgetOpened
+} from './src/store/dispatcher';
 
 export {
   ConnectedWidget as Widget,
@@ -17,5 +18,6 @@ export {
   renderCustomComponent,
   toggleWidget,
   toggleInputDisabled,
-  dropMessages
+  dropMessages,
+  isWidgetOpened
 };