replaced HOC with 2 new HOCS, updated config files (#1)

.eslintignore

@@ -0,0 +1,3 @@
+dist
+examples
+node_modules

.gitignore

@@ -1,3 +1,2 @@
 node_modules
 *.log
-dist

.npmrc

@@ -0,0 +1,2 @@
+registry=http://registry.npmjs.org/
+package-lock=false

.travis.yml

@@ -1,6 +1,15 @@
+sudo: false
 language: node_js
-node_js:
-  - "node"
+cache:
+  directories:
+    - ~/.npm
+notifications:
+  email: false
+node_js: '8'
+install: yarn
 script:
-  - npm run build
-  - npm test
+  - yarn build
+  - yarn lint
+  - yarn test
+branches:
+  only: master

README.md

@@ -11,9 +11,7 @@ If you don't know about **feature flippers** (**feature toggles/flags**) please
 
 TL:DR; this technique allows you to activate/de-active your feature without changing code while your application is running. And this can be done on certain criteria and time. It can be applied to certain individuals (users) or you can use it for A/B testing.
 
-This library offers you a React HOC (high order component) to add your component into feature flipper. Currently feature flippers should be received through a Promise object. And feature can be activated/de-activated for everyone. There is no other criteria. 
-
-We are working on a middleware add-on. This will allow you to plug-in the feature flipper delivery and criteria methods.
+This library offers you a React HOC (high order component) to add your project. 
 
 Installation
 ============
@@ -27,16 +25,40 @@ yarn add react-feature-flipper
 Usage
 =====
 
-* Import `featureFlipper` HOC (high order component) from your React project.
+There are 2 HOCs:
+
+##### featureFlipper (or alternatively featureFlipperStatic with named import)
+
+This component is the default export of a library.
+
+* Import `featureFlipper` into your React project with default import.
+
+```js
+import featureFlipper from 'react-feature-flipper';
+```
+
+Code below enables `<HelloWorld />` component wherever used. Second item in array param enables/disables your component. 
+
+```js
+export default featureFlipper([HelloWorld, true])
+
+```
+
 
-  ```
-  import featureFlipper from 'react-feature-flipper';
-  ```
+#### featureFlipperPromise
 
-* Pass required parameters into featureFlipper method call with an array (eg. `[Component, features, featureName]`)
-  1. Your Component
-  2. Promise to return feature flippers. It should be an object with a property `features` having type of a string array.
-  3. The name of the feature flipper (string) you want to bind to a Component (optional).
+* Import `featureFlipperPromise` into your React project.
+
+```js
+import { featureFlipperPromise } from 'react-feature-flipper';
+```
+
+And use it as shown below.
+
+* Pass required parameters to featureFlipperPromise method call with an array items:
+  * First (required): Your Component
+  * Second (required): Promise to return all feature flippers. It should be an object with a property `features` having feature flippers (array of string).
+  * Third (optional): The name of the feature flipper (string) you want to bind to a Component. If you omit this param then HOC uses the name of the component to find required feature flipper. eg. It would be `HelloWorld` for the example below.
 
 ```js
 export default featureFlipper([
@@ -45,12 +67,10 @@ export default featureFlipper([
     resolve({
       features: ['hello_world', 'blabla']
     })),
-  'hello_world',
+  'hello_world'
 ])
 ```
 
-If you omit 3rd parameter (feature flipper name) HOC uses then name of the component to find required feature flipper. It would be `HelloWorld` if you consider the previous example.
-
 Tools
 ===== 
 
@@ -60,24 +80,27 @@ If you would like to see the example running on your local machine then:
 
   `git clone git@github.com:erhangundogan/react-feature-flipper.git`
 
-* Run `yarn`
+* Run
 
-* And then run `yarn dev`
+  * `yarn`
+  * `yarn build`
+  * `yarn dev` it should browse http://localhost:9000
+
 
 Example is located in `examples/FeatureFlipper` folder.
 
 Some other commands:
 
 ```bash
-yarn test
+yarn build
 ```
 
 ```bash
-yarn lint
+yarn test
 ```
 
 ```bash
-yarn build
+yarn lint
 ```
 
 ## LICENSE

examples/FeatureFlipper/ComponentFeatureFlippedPromise.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { featureFlipperPromise } from '../../dist/react-feature-flipper';
+import featureFlippersList from './features';
+
+const Component = () => (
+  <div className="example-component">
+    <h3>Feature flipper enabled component</h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </p>
+  </div>
+);
+
+// FeatureFlippedComponent will be rendered if "double_column" feature enabled
+export default featureFlipperPromise([Component, featureFlippersList, 'double_column']);

examples/FeatureFlipper/ComponentFeatureFlippedStatic.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import featureFlipperStatic from '../../dist/react-feature-flipper';
+
+const Component = () => (
+  <div className="example-component">
+    <h3>Feature flipper enabled component</h3>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+    </p>
+  </div>
+);
+
+export const ComponentFeatureFlippedStaticEnabled = featureFlipperStatic([Component]);
+export const ComponentFeatureFlippedStaticDisabled = featureFlipperStatic([Component, false]);

examples/FeatureFlipper/Container.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import ComponentFeatureFlippedPromise from './ComponentFeatureFlippedPromise';
+import {
+  ComponentFeatureFlippedStaticEnabled,
+  ComponentFeatureFlippedStaticDisabled
+} from './ComponentFeatureFlippedStatic';
+
+const Container = () => (
+  <div className="test-container">
+    <ComponentFeatureFlippedPromise />
+    <ComponentFeatureFlippedPromise />
+    <div className="feature-flipper-disabled">
+      <h3>Feature flipper disabled element/component</h3>
+    </div>
+    <ComponentFeatureFlippedStaticEnabled />
+    <ComponentFeatureFlippedStaticDisabled />
+  </div>
+);
+
+export default Container;

examples/FeatureFlipper/index.html

@@ -45,6 +45,7 @@
       background-color: white;
       width: 520px;
       padding: 20px;
+      margin-bottom: 20px;
     }
   </style>
 </head>

examples/FeatureFlipper/index.js

@@ -1,9 +1,9 @@
 /* eslint-disable no-undef */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import ExampleContainer from './ExampleContainer';
+import Container from './Container';
 
 ReactDOM.render(
-  <ExampleContainer />,
+  <Container />,
   document.getElementById('root')
 );

package.json

@@ -1,9 +1,12 @@
 {
   "name": "react-feature-flipper",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "license": "MIT",
   "description": "Feature flipper React HOC and middleware",
   "repository": "github:erhangundogan/react-feature-flipper",
+  "engines": {
+    "node": ">=8"
+  },
   "bugs": "https://github.com/erhangundogan/react-feature-flipper/issues",
   "homepage": "https://github.com/erhangundogan/react-feature-flipper",
   "keywords": [
@@ -12,14 +15,16 @@
     "feature-flipper",
     "feature-toggles",
     "feature-flags",
-    "middleware",
-    "redux",
-    "redux-middleware",
     "hoc",
     "a/b testing"
   ],
   "author": "Erhan Gundogan <erhan.gundogan@gmail.com>",
   "main": "dist/react-feature-flipper.js",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
     "prepare": "yarn build",
     "lint": "./node_modules/eslint/bin/eslint.js --config .eslintrc src/",

src/FeatureFlipper.js → src/FeatureFlipperPromise.js

@@ -1,21 +1,20 @@
 import React from 'react';
 
 /**
- * featureFlipper HOC
+ * featureFlipperPromise HOC
  *
- * @param {function} WrappedComponent - Component needs to be feature flipped
- * @param {Promise} featureFlippersPromise - Promise object to resolve feature flippers
- * @param {string=} feature - specify feature flipper for component or
- *  leave it empty to use component name as a feature
+ * @param {function} WrappedComponent Component needs to be feature flipped
+ * @param {Promise} featureFlippersPromise Promise object to resolve feature flippers
+ * @param {string} [feature=Component name] Specifies feature flipper name
  * @returns {function}
  */
-const featureFlipper = ([WrappedComponent, featureFlippersPromise, feature]) => {
+const featureFlipperPromise = ([WrappedComponent, featureFlippersPromise, feature]) => {
   class ff extends React.Component {
     constructor(props) {
       super(props);
 
       this.state = {
-        features: [],
+        features: []
       };
     }
 
@@ -45,4 +44,4 @@ const featureFlipper = ([WrappedComponent, featureFlippersPromise, feature]) =>
   return ff;
 };
 
-export default featureFlipper;
+export default featureFlipperPromise;

src/FeatureFlipperStatic.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+/**
+ * featureFlipperStatic HOC
+ *
+ * @param {function} WrappedComponent Component needs to be feature flipped
+ * @param {boolean} [isEnabled=true] boolean value to enable/disable feature
+ * @returns {function}
+ */
+const featureFlipperStatic = ([WrappedComponent, isEnabled = true]) => () => {
+  if (isEnabled) {
+    return (
+      <>
+        <WrappedComponent />
+      </>
+    );
+  }
+  return null;
+};
+
+export default featureFlipperStatic;