Initial commit

Author: jasonmorita

.babelrc

@@ -0,0 +1,6 @@
+{
+    "presets": ["es2015", "stage-2", "react"],
+    "plugins": [
+        "transform-export-extensions"
+    ],
+}

.eslintignore

@@ -0,0 +1,2 @@
+dist/
+coverage/

.eslintrc

@@ -0,0 +1,20 @@
+{
+  "parser": "babel-eslint",
+  "extends": [
+    "airbnb-base",
+    "eslint:recommended",
+    "plugin:react/recommended"
+  ],
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+      "indent": ["error", 4],
+      "arrow-body-style": 0,
+      "react/jsx-uses-vars": ["error"],
+      "react/react-in-jsx-scope": ["error"]
+  },
+  "env": {
+      "jest": true
+  }
+}

.gitignore

@@ -0,0 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env

.npmignore

@@ -0,0 +1 @@
+src

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Jason Morita
+
+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

@@ -0,0 +1,59 @@
+# react-redux-ui-state
+React higher order component to provide UI state for components.
+
+## Problems this is trying reduce
+- Reduce the need to reach for `setState` to save time for simple flags
+- Reduce reducer boilerplate for properties like UI flags
+- Reduce tediousness of instances of the same component needing the same flags
+
+## How it works
+- Create a config object with an optional name property and a function (which gets passed props) which returns a state object consisting of your initial state.
+- Wrap your component in the HOC.
+- An action gets dispatched like `UI_STATE_ADD:some-component_<uuid>`
+- The initial state gets added to a `uiState` slice of the store with the name/state.
+- Call `setUiState` with a new state object.
+- An action gets dispatched like `UI_STATE_SET:some-component_<uuid>`
+
+Simple update function, same as React's `setState`.
+
+Simple to use:
+
+```javascript
+// rootReducer.js
+import { combineReducers } from 'redux';
+import { uiStateReducer } from 'react-redux-ui-state';
+
+export default function createRootReducer (reducers) {
+    return combineReducers({
+        ...reducers,
+        uiState: uiStateReducer,
+    });
+}
+
+// someComponent.js
+import React from 'react';
+import { uiState } from 'react-redux-ui-state';
+
+export function someComponent ({
+    someUiFlag,
+    setUiState,
+    uiStateName,
+}) {
+    return (
+        <button onClick={() => setUiState({ someUiFlag: !someUiFlag })}>
+            Toggle flag for {uiStateName}
+        </button>
+    );
+}
+
+const uiStateConfig = {
+    name: 'some-component',
+    state: () => ({
+        someUiFlag: false,
+    }),
+};
+
+export default uiState(uiStateConfig)(someComponent);
+```
+
+This is a work in progress. There could well be performance issues when used "at scale". Feel free to open a PR.

dist/hoc.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _reactRedux = require('react-redux');
+
+var _ = require('./');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+exports.default = function (config) {
+    return function (WrappedComponent) {
+        var uiStateName = (0, _.generateName)(config.name);
+        var maps = (0, _.generateMaps)(uiStateName);
+
+        var uiState = function (_Component) {
+            _inherits(uiState, _Component);
+
+            function uiState(props) {
+                _classCallCheck(this, uiState);
+
+                var _this = _possibleConstructorReturn(this, (uiState.__proto__ || Object.getPrototypeOf(uiState)).call(this, props));
+
+                _this.state = config.state(_this.props);
+                console.log('this.props', _this.props); // eslint-disable-line
+                return _this;
+            }
+
+            // this is essentially a "run-once"
+
+
+            _createClass(uiState, [{
+                key: 'componentWillMount',
+                value: function componentWillMount() {
+                    this.props.add(this.state);
+                }
+            }, {
+                key: 'render',
+                value: function render() {
+                    var _this2 = this;
+
+                    var setUiState = function setUiState(state, cb) {
+                        // we are using setState internally to take advantage of React
+                        return _this2.setState(state, function () {
+                            _this2.props.set(state);
+
+                            // optional callback to match setState API
+                            if (cb) {
+                                cb();
+                            }
+                        });
+                    };
+
+                    // these get passed to the child as props
+                    var uiStateProps = {
+                        setUiState: setUiState,
+                        setUIState: setUiState, // avoid case-sensitive typos
+                        uiStateName: uiStateName // the generated name for this component's state slice
+                    };
+
+                    // wrapped component with its props, the state from HOC and uiStateProps
+                    return _react2.default.createElement(WrappedComponent, _extends({}, this.props, this.state, uiStateProps));
+                }
+            }]);
+
+            return uiState;
+        }(_react.Component);
+
+        uiState.propTypes = {
+            add: _propTypes2.default.func.isRequired,
+            set: _propTypes2.default.func.isRequired
+        };
+
+        // the HOC itself is wrapped in connect
+        return (0, _reactRedux.connect)(maps.stateToProps, maps.dispatchToProps)(uiState);
+    };
+};

dist/index.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.types = exports.uiState = exports.uiStateReducer = undefined;
+exports.generateName = generateName;
+exports.generateType = generateType;
+exports.generateMaps = generateMaps;
+
+var _v = require('uuid/v4');
+
+var _v2 = _interopRequireDefault(_v);
+
+var _reducer = require('./reducer');
+
+var _reducer2 = _interopRequireDefault(_reducer);
+
+var _hoc = require('./hoc');
+
+var _hoc2 = _interopRequireDefault(_hoc);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+exports.uiStateReducer = _reducer2.default;
+exports.uiState = _hoc2.default;
+var types = exports.types = {
+    add: 'UI_STATE_ADD',
+    set: 'UI_STATE_SET'
+};
+
+function generateName() {
+    var name = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+
+    return (name || 'component') + '_' + (0, _v2.default)();
+}
+
+function generateType(type, name) {
+    return type + ':' + name;
+}
+
+// these are set as props on the HOC
+function generateMaps(name) {
+    return {
+        dispatchToProps: function dispatchToProps(dispatch) {
+            return {
+                add: function add() {
+                    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+                    return dispatch({
+                        type: generateType(types.add, name),
+                        payload: {
+                            name: name,
+                            state: state
+                        }
+                    });
+                },
+                set: function set() {
+                    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+                    return dispatch({
+                        type: generateType(types.set, name),
+                        payload: {
+                            name: name,
+                            state: state
+                        }
+                    });
+                }
+            };
+        },
+        stateToProps: function stateToProps(state) {
+            return {
+                state: state.uiState
+            };
+        }
+    };
+}

dist/reducer.js

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+exports.default = reducer;
+
+var _get = require('lodash/get');
+
+var _get2 = _interopRequireDefault(_get);
+
+var _immutabilityHelper = require('immutability-helper');
+
+var _immutabilityHelper2 = _interopRequireDefault(_immutabilityHelper);
+
+var _ = require('./');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+// this reducer handles all state changes for the uiState slice
+function reducer() {
+    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    var action = arguments[1];
+
+    // add initial state
+    if (action.type === (0, _.generateType)(_.types.add, (0, _get2.default)(action, 'payload.name'))) {
+        return _extends({}, state, _defineProperty({}, action.payload.name, action.payload.state));
+    }
+
+    // shallow merge for state updates
+    if (action.type === (0, _.generateType)(_.types.set, (0, _get2.default)(action, 'payload.name'))) {
+        return (0, _immutabilityHelper2.default)(state,
+        // if store not created with combinedReducers, assume state is top-level
+        state[action.payload.name] ? _defineProperty({}, action.payload.name, { $merge: action.payload.state }) : { $merge: action.payload.state });
+    }
+
+    return state;
+}