Add project

Author: YoruNoHikage

.babelrc

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

.gitignore

@@ -0,0 +1,3 @@
+*.log
+lib
+node_modules

.npmignore

@@ -0,0 +1,2 @@
+*.log
+src

README.md

@@ -1,2 +1,57 @@
-# redux-devtools-dispatch
+# Redux DevTools Dispatch
 Dispatch your actions manually to test if your app react well.
+
+### Installation
+
+`npm install --save-dev redux-devtools-dispatch`
+
+### Usage
+
+You can declare your Dispatcher the same way you declare a Monitor in your Dev Tools.
+
+```js
+import React from 'react';
+import { createDevTools } from 'redux-devtools';
+import Dispatcher from 'redux-devtools-dispatch';
+
+export default createDevTools(
+  <Dispatcher />
+);
+```
+
+You can also use `<MultipleMonitors>`, a hacky class to use multiple monitors into the `<DockMonitor>`:
+
+```js
+import React from 'react';
+
+import { createDevTools } from 'redux-devtools';
+import LogMonitor from 'redux-devtools-log-monitor';
+import DockMonitor from 'redux-devtools-dock-monitor';
+import Dispatcher from 'redux-devtools-dispatch';
+import MultipleMonitors from 'redux-devtools-dispatch/lib/MultipleMonitors';
+
+export default createDevTools(
+  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q" defaultIsVisible={false}>
+    <MultipleMonitors>
+      <LogMonitor />
+      <Dispatcher />
+    </MultipleMonitors>
+  </DockMonitor>
+);
+```
+
+Then, just write an JSON action in the field, click on Dispatch, and that's all!
+
+### Props
+
+Name                  | Description
+-------------         | -------------
+`initEmpty`           | When `true`, the dispatcher is empty. By default, set to `false`, the dispatcher contains : `{ "type": "" }`.
+
+### Contributing
+
+As this package is my first, any comment, pull request, issue is welcome so I can learn more from everyone.
+
+### License
+
+MIT

package.json

@@ -0,0 +1,43 @@
+{
+  "name": "redux-devtools-dispatch",
+  "version": "0.1.0",
+  "description": "Dispatch your actions manually to test if your app react well",
+  "main": "lib/index.js",
+  "scripts": {
+    "clean": "rimraf lib",
+    "build": "babel src --out-dir lib",
+    "prepublish": "npm run clean && npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/YoruNoHikage/redux-devtools-dispatch.git"
+  },
+  "keywords": [
+    "redux",
+    "devtools",
+    "dispatch",
+    "actions",
+    "manually"
+  ],
+  "author": "Alexis Launay <[email protected]> (http://github.com/YoruNoHikage)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/YoruNoHikage/redux-devtools-dispatch/issues"
+  },
+  "homepage": "https://github.com/YoruNoHikage/redux-devtools-dispatch",
+  "devDependencies": {
+    "babel-cli": "^6.3.15",
+    "babel-core": "^6.1.20",
+    "babel-loader": "^6.2.0",
+    "babel-preset-es2015-loose": "^6.1.3",
+    "babel-preset-react": "^6.3.13",
+    "babel-preset-stage-0": "^6.3.13",
+    "rimraf": "^2.3.4",
+    "webpack": "^1.11.0"
+  },
+  "peerDependencies": {
+    "react": "^0.14.0",
+    "redux-devtools": "^3.0.0"
+  },
+  "dependencies": {}
+}

src/Dispatcher.js

@@ -0,0 +1,58 @@
+import React, { Component, PropTypes } from 'react';
+
+const buttonStyles = {
+  cursor: 'pointer',
+  fontWeight: 'bold',
+  borderRadius: '3px',
+  padding: '4px',
+  margin: '5px 3px',
+  fontSize: '0.8em',
+  color: 'white',
+  textDecoration: 'none',
+  backgroundColor: '#4F5A65',
+  border: 'none',
+  position: 'absolute',
+  bottom: '3px',
+  right: '5px'
+};
+
+const contentStyles = {
+  background: '#2A2F3A',
+  margin: '5px',
+  padding: '5px',
+  borderRadius: '3px',
+  outline: 'none',
+  color: 'white',
+  overflow: 'auto'
+};
+
+export default class Dispatcher extends Component {
+  static contextTypes = {
+    store: PropTypes.object
+  };
+
+  static update = () => {};
+
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  launchAction() {
+    this.context.store.dispatch(JSON.parse(this.refs.action.innerText.replace(/\s+/g, ' ')));
+  }
+
+  componentDidMount() {
+    this.refs.action.innerText = this.props.initEmpty ? '\n' : `{
+      "type": ""
+    }`;
+  }
+
+  render() {
+    return (
+      <div style={{background: '#4F5A65', fontFamily: 'monaco,Consolas,Lucida Console,monospace'}}>
+        <div contentEditable='true' style={contentStyles} ref='action'></div>
+        <button style={buttonStyles} onClick={this.launchAction.bind(this)}>Dispatch</button>
+      </div>
+    );
+  }
+}

src/MultipleMonitors.js

@@ -0,0 +1,41 @@
+import React, { Component, cloneElement } from 'react';
+
+function childrenMonitorState(props, state, action) {
+  return props.children.map(child => child.type.update(child.props, state, action));
+}
+
+function reducer(props, state = {}, action) {
+  return {
+    childrenMonitorState: childrenMonitorState(props, state.childMonitorState, action)
+  };
+}
+
+const defaultStyle = {
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+};
+
+export default class MultipleMonitors extends Component {
+  static update = reducer;
+
+  constructor(props, context) {
+    super(props, context);
+  }
+
+  render() {
+    const { monitorState, children, style = defaultStyle, ...rest } = this.props;
+
+    const monitors = children.map((e, i) => cloneElement(e, {
+      ...rest,
+      monitorState: monitorState.childrenMonitorState[i],
+      key: 'monitor' + i
+    }));
+
+    return (
+      <div style={style}>
+        {monitors}
+      </div>
+    );
+  }
+}

src/index.js

@@ -0,0 +1 @@
+export default from './Dispatcher';