fix(init): Initial commit.

Initial implementation of the ComponentQueries library.

Author: ctrlplusb

.babelrc

@@ -0,0 +1,11 @@
+{
+  "presets": ["es2015", "stage-1", "react"],
+  "ignore": [
+    "/node_modules/"
+  ],
+  "env": {
+    "test": {
+      "plugins": ["rewire"]
+    }
+  }
+}

.eslintrc

@@ -0,0 +1,28 @@
+{
+  "parser": "babel-eslint",
+  "extends": "airbnb",
+  "env": {
+    "browser": true,
+    "es6": true,
+    "mocha": true,
+    "node": true
+  },
+  "ecmaFeatures": {
+    "defaultParams": true
+  },
+  "rules": {
+    "comma-dangle": 0,
+    "func-names": 0,
+    "indent": [2, 2, { "SwitchCase": 1 }],
+    "new-cap": 0,
+    "no-lone-blocks": 0,
+    // until we have glob based rules we have to disable this rule, as our
+    // assert library uses expressions in this format.
+    // follow - https://github.com/eslint/eslint/issues/3611
+    "no-unused-expressions": 0,
+    "no-confusing-arrow": 0,
+    "prefer-arrow-callback": 0,
+    "quotes": [2, "backtick", "avoid-escape"],
+    "space-infix-ops": 0
+  }
+}

.gitignore

@@ -0,0 +1,35 @@
+# Webpack stats file output used for bundle optimisation.
+lib/stats.json
+
+#####=== Node ===#####
+
+# Logs
+logs
+*.log
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git-
+node_modules
+
+# Debug log from npm
+npm-debug.log

.travis.yml

@@ -0,0 +1,22 @@
+sudo: false
+language: node_js
+cache:
+  directories:
+    - node_modules
+branches:
+  only:
+    - master
+notifications:
+  email: false
+node_js:
+  - '4'
+before_install:
+  - npm i -g npm@^3.0.0
+before_script:
+  - npm prune
+script:
+  - npm run test:coverage
+  - npm run build
+after_success:
+  - npm run report-coverage
+  - npm run semantic-release

README.md

@@ -1,2 +1,39 @@
-# react-component-queries
-Provide props to your React Components based on their Width and/or Height.
+<p align='center'>
+  <h1 align='center'>COMPONENT QUERIES</h1>
+  <p align='center'>Provide props to your React Components based on their Width and/or Height.</p>
+</p>
+
+[![Travis](https://img.shields.io/travis/ctrlplusb/react-component-queries.svg?style=flat-square)](https://travis-ci.org/ctrlplusb/react-component-queries)
+[![npm](https://img.shields.io/npm/v/react-component-queries.svg?style=flat-square)](http://npm.im/react-component-queries)
+[![MIT License](https://img.shields.io/npm/l/react-component-queries.svg?style=flat-square)](http://opensource.org/licenses/MIT)
+[![Codecov](https://img.shields.io/codecov/c/github/ctrlplusb/react-component-queries.svg?style=flat-square)](https://codecov.io/github/ctrlplusb/react-component-queries)
+[![Maintenance](https://img.shields.io/maintenance/yes/2016.svg?style=flat-square)]()
+
+* Responsive Components!
+* Easy to use.
+* Extensive browser support.
+* Supports any Component type, i.e. stateless/class.
+* Works with React 0.14.x and 15.x.x.
+
+## Simple Example 
+
+Below is a super simple example highlighting the use of the library. Read the Usage section in its entirety for a full description on configuration and usage.
+
+```javascript
+import ComponentQueries from 'react-component-queries';
+
+class MyComponent extends Component {
+  render() {
+    return (
+      <div>My scale prop value is {this.props.scale}</div>
+    );
+  }
+}
+
+export default ComponentQueries(
+  // Provide as many query functions as you need.
+  (width) => width <= 330 ? { scale: 'mobile' } : {},
+  (width) => width > 330 && width <=960 ? { scale: 'tablet' } : {},
+  (width) => width > 960 && width <=1024 ? { scale: 'desktop' } : {},
+)(MyComponent);
+```

package.json

@@ -0,0 +1,86 @@
+{
+  "name": "react-component-queries",
+  "description": "Provide props to your Components based on their Width and/or Height.",
+  "main": "lib/react-component-queries.js",
+  "scripts": {
+    "prebuild": "rm -rf lib && mkdir lib",
+    "build": "NODE_ENV=production webpack",
+    "commit": "git-cz",
+    "test": "NODE_ENV=test mocha --compilers js:babel-register --recursive --require ./test/setup.js \"test/**/*.test.js\"",
+    "test:coverage": "NODE_ENV=test babel-node $(npm bin)/isparta cover $(npm bin)/_mocha -- -R spec --require ./test/setup.js",
+    "report-coverage": "cat ./coverage/lcov.info | $(npm bin)/codecov",
+    "lint": "eslint src",
+    "semantic-release": "semantic-release pre && npm publish && semantic-release post",
+    "example": "NODE_ENV=development node ./example"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ctrlplusb/react-component-queries.git"
+  },
+  "keywords": [
+    "react",
+    "responsive",
+    "hoc",
+    "element-queries",
+    "media-queries"
+  ],
+  "author": "Sean Matheson <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/ctrlplusb/react-component-queries/issues"
+  },
+  "homepage": "https://github.com/ctrlplusb/react-component-queries#readme",
+  "devDependencies": {
+    "babel-cli": "6.7.5",
+    "babel-core": "6.7.6",
+    "babel-eslint": "6.0.2",
+    "babel-loader": "6.2.4",
+    "babel-plugin-rewire": "1.0.0-rc-2",
+    "babel-preset-es2015": "6.6.0",
+    "babel-preset-react": "6.5.0",
+    "babel-preset-stage-1": "6.5.0",
+    "babel-register": "6.7.2",
+    "chai": "3.5.0",
+    "codecov.io": "0.1.6",
+    "commitizen": "2.7.6",
+    "compression": "1.6.1",
+    "cz-conventional-changelog": "1.1.5",
+    "enzyme": "2.2.0",
+    "eslint": "2.8.0",
+    "eslint-config-airbnb": "7.0.0",
+    "eslint-loader": "1.3.0",
+    "eslint-plugin-jsx-a11y": "0.6.2",
+    "eslint-plugin-mocha": "2.2.0",
+    "eslint-plugin-react": "4.3.0",
+    "express": "4.13.4",
+    "ghooks": "1.2.1",
+    "isparta": "4.0.0",
+    "jsdom": "8.4.0",
+    "mocha": "2.4.5",
+    "path": "0.12.7",
+    "react": "15.0.1",
+    "react-addons-test-utils": "15.0.1",
+    "react-dom": "15.0.1",
+    "semantic-release": "^6.2.1",
+    "stats-webpack-plugin": "0.3.1",
+    "webpack": "1.13.0",
+    "webpack-dev-middleware": "1.6.1",
+    "webpack-hot-middleware": "2.10.0"
+  },
+  "peerDependencies": {
+    "react": "^0.14.0 || ^15.0.0",
+    "react-dom": "^0.14.0 || ^15.0.0",
+    "react-sizeme": "^1.0.0"
+  },
+  "czConfig": {
+    "path": "node_modules/cz-conventional-changelog"
+  },
+  "config": {
+    "ghooks": {
+      "pre-commit": "npm run test"
+    }
+  },
+  "dependencies": {
+    "invariant": "^2.2.0"
+  }
+}

src/ComponentQueries.js

@@ -0,0 +1,89 @@
+// Libraries and Utils.
+import React, { Component, PropTypes } from 'react';
+import invariant from 'invariant';
+import SizeMe from 'react-sizeme';
+
+/**
+ * :: Queries -> Component -> Component
+ *
+ * This is a HOC that provides you with the mechanism to specify Component
+ * queries. A Component query is a similar concept to media queries except it
+ * operates on the Component's width/height rather than the entire viewport
+ * width/height.
+ */
+function ComponentQueries(...queries) {
+  invariant(
+    queries.length > 0,
+    `You must provide at least one query to ComponentQueries.`);
+  invariant(
+    queries.filter(q => typeof q !== `function`).length === 0,
+    `All provided queries for ComponentQueries should be functions.`
+  );
+
+  function query(width, height) {
+    return queries.reduce((acc, cur) =>
+      Object.assign({}, acc, cur(width, height))
+    , {});
+  }
+
+  return function WrapComponent(WrappedComponent) {
+    class ComponentWithComponentQueries extends Component {
+      state = {
+        queryResult: {}
+      }
+
+      componentWillMount() {
+        this.runQueries(this.props.size);
+      }
+
+      shouldComponentUpdate(nextProps) {
+        const { size: currentSize } = this.props;
+        const { size: nextSize } = nextProps;
+
+        if (this.hasSizeChanged(currentSize, nextSize)) {
+          this.runQueries(nextSize);
+        }
+
+        return true;
+      }
+
+      hasSizeChanged(current, next) {
+        const { height: cHeight, width: cWidth } = current;
+        const { height: nHeight, width: nWidth } = next;
+
+        return (cHeight !== nHeight) || (cWidth !== nWidth);
+      }
+
+      runQueries({ width, height }) {
+        const queryResult = query(width, height);
+
+        this.setState({ queryResult });
+      }
+
+      render() {
+        const { size, ...otherProps } = this.props; // eslint-disable-line no-unused-vars
+
+        return (
+          <WrappedComponent
+            {...this.state.queryResult}
+            {...otherProps}
+          />
+        );
+      }
+    }
+
+    ComponentWithComponentQueries.propTypes = {
+      size: PropTypes.shape({
+        width: PropTypes.number.isRequired,
+        height: PropTypes.number.isRequired
+      }).isRequired
+    };
+
+    return SizeMe({
+      monitorWidth: true,
+      monitorHeight: true
+    })(ComponentWithComponentQueries);
+  };
+}
+
+export default ComponentQueries;

src/index.js

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

test/ComponentQueries.test.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { expect } from 'chai';
+import { describeWithDOM } from './jsdom';
+import { mount } from 'enzyme';
+
+describeWithDOM(`Given the ComponentQueries library`, () => {
+  let ComponentQueries;
+
+  beforeEach(() => {
+    ComponentQueries = require(`../src/index.js`).default;
+
+    // Set up our mocks.
+    const ComponentQueriesRewireAPI = ComponentQueries.__RewireAPI__;
+
+    // Mock the SizeMe HOC to just return our ComponentQueries instance.
+    ComponentQueriesRewireAPI.__Rewire__(`SizeMe`, () => x => x);
+  });
+
+  describe(`When providing a configuration object`, () => {
+    describe(`And no queries are provided`, () => {
+      it(`Then an error should be thrown`, () => {
+        const action = () => {
+          ComponentQueries();
+        };
+
+        expect(action).to.throw(/provide at least one query to ComponentQueries/);
+      });
+    });
+
+    describe(`And an invalid query type is provided`, () => {
+      it(`Then an error should be thrown`, () => {
+        const action = () => {
+          ComponentQueries(`wrong!`);
+        };
+
+        expect(action).to.throw(/queries for ComponentQueries should be functions/);
+      });
+    });
+  });
+
+  describe(`When rendering a component queries component`, () => {
+    it(`Then it should receive the appropriate props based on it's queries`, () => {
+      let receivedProps;
+
+      const ComponentQueriedComponent = ComponentQueries(
+        (width) => width <= 100 ? { foo: `bar` } : {},
+        (width) => width > 100 && width <= 500 ? { bob: `baz` } : {}
+      )((props) => { receivedProps = props; return <div></div>; });
+
+      // Initial render
+      const mounted = mount(<ComponentQueriedComponent size={{ width: 100, height: 100 }} />);
+      expect(receivedProps).to.eql({ foo: `bar` });
+
+      // Update size, but no size change
+      mounted.setProps({ size: { width: 100, height: 100 } });
+      expect(receivedProps).to.eql({ foo: `bar` });
+
+      // Update size, with change.
+      mounted.setProps({ size: { width: 101, height: 100 } });
+      expect(receivedProps).to.eql({ bob: `baz` });
+    });
+  });
+});