Add redux-slider-monitor (#434)

* Add redux-slider-monitor

* Fix example configuration of redux-slider-monitor

* Fix lint errors

* CI: Run build:all before lint

.travis.yml

@@ -8,6 +8,6 @@ cache:
   directories:
     - "node_modules"
 script:
-  - npm run lint
   - npm run build:all
+  - npm run lint
   - npm test

packages/redux-slider-monitor/.babelrc

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

packages/redux-slider-monitor/.eslintignore

@@ -0,0 +1,3 @@
+lib
+**/node_modules
+examples/**/dist

packages/redux-slider-monitor/.eslintrc

@@ -0,0 +1,22 @@
+{
+  "extends": "eslint-config-airbnb",
+  "env": {
+    "browser": true,
+    "mocha": true,
+    "node": true
+  },
+  "parser": "babel-eslint",
+  "rules": {
+    "comma-dangle": [2, "never"],
+    "jsx-quotes": [2, "prefer-single"],
+    "react/jsx-uses-react": 2,
+    "react/jsx-uses-vars": 2,
+    "react/react-in-jsx-scope": 2,
+    "react/sort-comp": 0,
+    "react/forbid-prop-types": 0,
+    "import/no-extraneous-dependencies": 0,
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "jsx-a11y/no-static-element-interactions": 0
+  },
+  "plugins": ["react"]
+}

packages/redux-slider-monitor/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Cale Newman
+
+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.

packages/redux-slider-monitor/README.md

@@ -0,0 +1,61 @@
+## Redux Slider Monitor
+
+[![npm version](https://img.shields.io/npm/v/redux-slider-monitor.svg?style=flat-square)](https://www.npmjs.com/package/redux-slider-monitor)
+
+A custom monitor for use with [Redux DevTools](https://github.com/gaearon/redux-devtools).
+
+It uses a slider based on [react-slider](https://github.com/mpowaga/react-slider) to slide between different recorded actions. It also features play/pause/step-through, which is inspired by some very cool [Elm](http://elm-lang.org/) [examples](http://elm-lang.org/blog/time-travel-made-easy).
+
+[Try out the demo!](https://calesce.github.io/redux-slider-monitor/?debug_session=123)
+
+<image src="https://s3.amazonaws.com/f.cl.ly/items/1I3P222C3N2R1M2y1K3b/Screen%20Recording%202015-12-22%20at%2007.20%20PM.gif?v=1b6267e7" width='800'>
+
+### Installation
+
+```npm install redux-slider-monitor```
+
+### Recommended Usage
+
+Use with [`DockMonitor`](https://github.com/gaearon/redux-devtools-dock-monitor)
+```javascript
+<DockMonitor toggleVisibilityKey='ctrl-h'
+             changePositionKey='ctrl-q'
+             defaultPosition='bottom'
+             defaultSize={0.15}>
+  <SliderMonitor keyboardEnabled />
+</DockMonitor>
+```
+
+Dispatch some Redux actions. Use the slider to navigate between the state changes.
+
+Click the play/pause buttons to watch the state changes over time, or step backward or forward in state time with the left/right arrow buttons. Change replay speeds with the ```1x``` button, and "Live" will replay actions with the same time intervals in which they originally were dispatched.
+
+## Keyboard shortcuts
+
+Pass the ```keyboardEnabled``` prop to use these shortcuts
+
+```ctrl+j```: play/pause
+
+```ctrl+[```: step backward
+
+```ctrl+]```: step forward
+
+
+### Running Examples
+
+You can do this:
+
+```
+git clone https://github.com/calesce/redux-slider-monitor.git
+cd redux-slider-monitor
+npm install
+
+cd examples/todomvc
+npm install
+npm start
+open http://localhost:3000
+```
+
+### License
+
+MIT

packages/redux-slider-monitor/examples/todomvc/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    ["es2015", { "modules": false }],
+    "stage-0",
+    "react"
+  ],
+  "plugins": [
+    "react-hot-loader/babel"
+  ]
+}

packages/redux-slider-monitor/examples/todomvc/README.md

@@ -0,0 +1,6 @@
+# Redux DevTools TodoMVC example
+
+## Getting Started
+
+1. Install dependencies: `npm i`
+2. Start the development server: `npm start`

packages/redux-slider-monitor/examples/todomvc/actions/TodoActions.js

@@ -0,0 +1,42 @@
+import * as types from '../constants/ActionTypes';
+
+export function addTodo(text) {
+  return {
+    type: types.ADD_TODO,
+    text
+  };
+}
+
+export function deleteTodo(id) {
+  return {
+    type: types.DELETE_TODO,
+    id
+  };
+}
+
+export function editTodo(id, text) {
+  return {
+    type: types.EDIT_TODO,
+    id,
+    text
+  };
+}
+
+export function markTodo(id) {
+  return {
+    type: types.MARK_TODO,
+    id
+  };
+}
+
+export function markAll() {
+  return {
+    type: types.MARK_ALL
+  };
+}
+
+export function clearMarked() {
+  return {
+    type: types.CLEAR_MARKED
+  };
+}

packages/redux-slider-monitor/examples/todomvc/components/Footer.js

@@ -0,0 +1,72 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { SHOW_ALL, SHOW_MARKED, SHOW_UNMARKED } from '../constants/TodoFilters';
+
+const FILTER_TITLES = {
+  [SHOW_ALL]: 'All',
+  [SHOW_UNMARKED]: 'Active',
+  [SHOW_MARKED]: 'Completed'
+};
+
+export default class Footer extends Component {
+  static propTypes = {
+    markedCount: PropTypes.number.isRequired,
+    unmarkedCount: PropTypes.number.isRequired,
+    filter: PropTypes.string.isRequired,
+    onClearMarked: PropTypes.func.isRequired,
+    onShow: PropTypes.func.isRequired
+  };
+
+  render() {
+    return (
+      <footer className='footer'>
+        {this.renderTodoCount()}
+        <ul className='filters'>
+          {[SHOW_ALL, SHOW_UNMARKED, SHOW_MARKED].map(filter => (
+            <li key={filter}>{this.renderFilterLink(filter)}</li>
+          ))}
+        </ul>
+        {this.renderClearButton()}
+      </footer>
+    );
+  }
+
+  renderTodoCount() {
+    const { unmarkedCount } = this.props;
+    const itemWord = unmarkedCount === 1 ? 'item' : 'items';
+
+    return (
+      <span className='todo-count'>
+        <strong>{unmarkedCount || 'No'}</strong> {itemWord} left
+      </span>
+    );
+  }
+
+  renderFilterLink(filter) {
+    const title = FILTER_TITLES[filter];
+    const { filter: selectedFilter, onShow } = this.props;
+
+    return (
+      <a
+        className={classnames({ selected: filter === selectedFilter })}
+        style={{ cursor: 'hand' }}
+        onClick={() => onShow(filter)}
+      >
+        {title}
+      </a>
+    );
+  }
+
+  renderClearButton() {
+    const { markedCount, onClearMarked } = this.props;
+    if (markedCount > 0) {
+      return (
+        <button className='clear-completed' onClick={onClearMarked}>
+          Clear completed
+        </button>
+      );
+    }
+    return null;
+  }
+}

packages/redux-slider-monitor/examples/todomvc/components/Header.js

@@ -0,0 +1,28 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import TodoTextInput from './TodoTextInput';
+
+export default class Header extends Component {
+  static propTypes = {
+    addTodo: PropTypes.func.isRequired
+  };
+
+  handleSave = (text) => {
+    if (text.length !== 0) {
+      this.props.addTodo(text);
+    }
+  }
+
+  render() {
+    return (
+      <header className='header'>
+        <h1>todos</h1>
+        <TodoTextInput
+          newTodo
+          onSave={this.handleSave}
+          placeholder='What needs to be done?'
+        />
+      </header>
+    );
+  }
+}

packages/redux-slider-monitor/examples/todomvc/components/MainSection.js

@@ -0,0 +1,90 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import TodoItem from './TodoItem';
+import Footer from './Footer';
+import { SHOW_ALL, SHOW_MARKED, SHOW_UNMARKED } from '../constants/TodoFilters';
+
+const TODO_FILTERS = {
+  [SHOW_ALL]: () => true,
+  [SHOW_UNMARKED]: todo => !todo.marked,
+  [SHOW_MARKED]: todo => todo.marked
+};
+
+export default class MainSection extends Component {
+  static propTypes = {
+    todos: PropTypes.array.isRequired,
+    actions: PropTypes.object.isRequired
+  };
+
+  constructor(props, context) {
+    super(props, context);
+    this.handleClearMarked = this.handleClearMarked.bind(this);
+    this.handleShow = this.handleShow.bind(this);
+    this.state = { filter: SHOW_ALL };
+  }
+
+  handleClearMarked() {
+    const atLeastOneMarked = this.props.todos.some(todo => todo.marked);
+    if (atLeastOneMarked) {
+      this.props.actions.clearMarked();
+    }
+  }
+
+  handleShow(filter) {
+    this.setState({ filter });
+  }
+
+  render() {
+    const { todos, actions } = this.props;
+    const { filter } = this.state;
+
+    const filteredTodos = todos.filter(TODO_FILTERS[filter]);
+    const markedCount = todos.reduce((count, todo) => (todo.marked ? count + 1 : count), 0);
+
+    return (
+      <section className='main'>
+        {this.renderToggleAll(markedCount)}
+        <ul className='todo-list'>
+          {filteredTodos.map(todo => (
+            <TodoItem key={todo.id} todo={todo} {...actions} />
+          ))}
+        </ul>
+        {this.renderFooter(markedCount)}
+      </section>
+    );
+  }
+
+  renderToggleAll(markedCount) {
+    const { todos, actions } = this.props;
+    if (todos.length > 0) {
+      return (
+        <input
+          className='toggle-all'
+          type='checkbox'
+          checked={markedCount === todos.length}
+          onChange={actions.markAll}
+        />
+      );
+    }
+    return null;
+  }
+
+  renderFooter(markedCount) {
+    const { todos } = this.props;
+    const { filter } = this.state;
+    const unmarkedCount = todos.length - markedCount;
+
+    if (todos.length) {
+      return (
+        <Footer
+          markedCount={markedCount}
+          unmarkedCount={unmarkedCount}
+          filter={filter}
+          onClearMarked={this.handleClearMarked}
+          onShow={this.handleShow}
+        />
+      );
+    }
+    return null;
+  }
+}