Initial commit

.editorconfig

@@ -0,0 +1,14 @@
+# editorconfig.org
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.md]
+# Allow <br/> from Markdown
+trim_trailing_whitespace = false

.flowconfig

@@ -0,0 +1,11 @@
+[ignore]
+.*/node_modules/.*
+.*/lib/.*
+.*/__tests__/.*
+
+[include]
+node_modules
+
+[options]
+esproposal.class_instance_fields=enable
+esproposal.class_static_fields=enable

.gitignore

@@ -0,0 +1,13 @@
+# OS X crap
+.DS_Store
+
+# no log
+.log
+
+# Node.js / npm
+node_modules
+
+# build
+lib
+
+coverage

.travis.yml

@@ -0,0 +1,22 @@
+language: node_js
+node_js:
+  - '6'
+
+# fail asap when there is a failure
+matrix:
+  fast_finish: true
+
+# cache node modules
+cache:
+  directories:
+    - node_modules
+
+before_install:
+  # faster npm install
+  - npm set progress=false
+  # remove useless/non listed deps
+  - npm prune
+
+script: npm run test
+
+after_success: npm run coverage

CHANGELOG.md

@@ -0,0 +1,2 @@
+
+✨ Initial release

README.md

@@ -1,3 +1,124 @@
 # react-event-as-prop
 
+[![Unix Build status](https://img.shields.io/travis/MoOx/react-event-as-prop/master.svg?branch=master&label=unix%20build)](https://travis-ci.org/MoOx/react-event-as-prop)
+[![Code Coverage](https://img.shields.io/coveralls/MoOx/react-event-as-prop/master.svg)](https://coveralls.io/github/MoOx/react-event-as-prop)
+[![Version](https://img.shields.io/npm/v/react-event-as-prop.svg)](https://github.com/MoOx/react-event-as-prop/blob/master/CHANGELOG.md)
+
+[![Repo on GitHub](https://img.shields.io/badge/repo-GitHub-3D76C2.svg)](https://github.com/MoOx/react-event-as-prop)
+[![Repo on GitLab](https://img.shields.io/badge/repo-GitLab-6C488A.svg)](https://gitlab.com/MoOx/react-event-as-prop)
+[![Repo on BitBucket](https://img.shields.io/badge/repo-BitBucket-1F5081.svg)](https://bitbucket.org/MoOx/react-event-as-prop)
+
+> React Higher-Order Components to get event like hover, focus, active as props
+
+## Installation
+
+```console
+$ npm install react-event-as-prop
+```
+
+## Usage
+
+### Simple usage
+
+```js
+import { Hoverable } from "react-event-as-prop"
+
+const Button = ({ hovered, ...props }) => {
+  return (
+    <button
+      // really important, it's to pass onMouseEnter & onMouseLeave
+      // generated by the HoCs
+      { ...props }
+
+      style={{
+        ...styles.main,
+        ...hovered && styles.hovered,
+      }}
+    >
+      { "Submit" }
+    </button>
+  )
+}
+
+const styles = {
+  main: {
+    fontWeight: "100",
+  },
+  hovered: {
+    fontWeight: "bold",
+  },
+}
+
+// ⚠️ Here is the trick
+export Hoverable(Button)
+```
+
+### Advanced Usage
+
+You can just pipe all HoCs !
+
+```js
+import { Hoverable, Touchable, Focusable } from "react-event-as-prop"
+
+const Button = ({ hovered, touched, focused, ...props }) => {
+  return (
+    <button
+      // really important, it's to pass on{Event}* generated by the HoCs
+      { ...props }
+
+      style={{
+        ...styles.main,
+        ...hovered && styles.hovered,
+        ...touched && styles.touched,
+        ...focused && styles.focused,
+      }}
+    >
+      { "Submit" }
+    </button>
+  )
+}
+
+const styles = {
+  main: {
+    fontWeight: "100",
+  },
+  hovered: {
+    fontWeight: "bold",
+  },
+  touched: {
+    opacity: 0.6,
+  },
+  focused: {
+    outline: "1px solid red",
+  },
+}
+
+// ⚠️ Here is the trick
+export Hoverable(Touchable(Focusable(Button)))
+```
+
+### Imports
+
+You can import all from the main package
+
+```js
+import { Hoverable, Touchable, Focusable } from "react-event-as-prop"
+```
+
+Or you can import just one
+
+```js
+import Hoverable from "react-event-as-prop/lib/Hoverable"
+```
+
+---
+
+## CONTRIBUTING
+
+* ⇄ Pull/Merge requests and ★ Stars are always welcome.
+* For bugs and feature requests, please create an issue.
+* Pull/Merge requests must be accompanied by passing automated tests (`$ npm test`).
+
+## [CHANGELOG](CHANGELOG.md)
+
 ## [LICENSE](LICENSE)

package.json

@@ -0,0 +1,89 @@
+{
+  "name": "react-event-as-prop",
+  "version": "0.0.0",
+  "description": "React Higher-Order Components to get event like hover, focus, active as props",
+  "keywords": [
+    "react",
+    "events",
+    "event",
+    "hoc",
+    "props",
+    "prop"
+  ],
+  "author": "Maxime Thirouin",
+  "license": "MIT",
+  "repository": "https://github.com/MoOx/react-event-as-prop.git",
+  "#repositories": "https://github.com/npm/npm/issues/11315",
+  "repositories": [
+    "https://github.com/MoOx/react-event-as-prop.git",
+    "https://gitlab.com/MoOx/react-event-as-prop.git",
+    "https://bitbucket.org/MoOx/react-event-as-prop.git"
+  ],
+  "main": "lib/index.js",
+  "files": [
+    "lib",
+    "src",
+    "!**/__tests__"
+  ],
+  "dependencies": {},
+  "devDependencies": {
+    "babel-cli": "^6.16.0",
+    "babel-core": "^6.17.0",
+    "babel-eslint": "^7.0.0",
+    "babel-jest": "^16.0.0",
+    "babel-plugin-flow-react-proptypes": "^0.14.0",
+    "babel-preset-latest": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-2": "^6.17.0",
+    "coveralls": "^2.11.14",
+    "eslint": "^3.7.1",
+    "eslint-config-i-am-meticulous": "^5.0.2",
+    "eslint-plugin-flow-vars": "^0.5.0",
+    "eslint-plugin-react": "^6.4.1",
+    "flow-bin": "^0.33.0",
+    "jest": "^16.0.1",
+    "npmpub": "^3.1.0",
+    "react": "^15.3.2",
+    "react-test-renderer": "^15.3.2"
+  },
+  "scripts": {
+    "transpile": "babel --ignore __tests__ --copy-files src --out-dir lib",
+    "prepublish": "rimraf lib && npm -s run transpile",
+    "lint:js:eslint": "eslint --ignore-path .gitignore --fix .",
+    "lint:js:flow": "flow src",
+    "lint:js": "npm -s run lint:js:eslint && npm -s run lint:js:flow",
+    "lint": "npm -s run lint:js",
+    "tests": "jest --coverage",
+    "pretest": "npm -s run lint",
+    "test": "npm -s run tests",
+    "coverage": "coveralls",
+    "release": "npmpub"
+  },
+  "babel": {
+    "presets": [
+      "babel-preset-react",
+      "babel-preset-latest",
+      "babel-preset-stage-2"
+    ]
+  },
+  "eslintConfig": {
+    "env": {
+      "jest": true
+    },
+    "parser": "babel-eslint",
+    "extends": [
+      "eslint-config-i-am-meticulous/react-flow"
+    ]
+  },
+  "jest": {
+    "notify": true,
+    "coverageThreshold": {
+      "global": {
+        "branches": 100,
+        "functions": 100,
+        "lines": 100,
+        "statements": 100
+      }
+    }
+  }
+}

src/Focusable/__tests__/__snapshots__/index.js.snap

@@ -0,0 +1,53 @@
+exports[`test focused props changes when focused 1`] = `
+<span
+  onBlur={[Function]}
+  onFocus={[Function]}
+  test={true}>
+  nope
+</span>
+`;
+
+exports[`test focused props changes when focused 2`] = `
+<span
+  onBlur={[Function]}
+  onFocus={[Function]}
+  test={true}>
+  focused
+</span>
+`;
+
+exports[`test focused props changes when focused 3`] = `
+<span
+  onBlur={[Function]}
+  onFocus={[Function]}
+  test={true}>
+  nope
+</span>
+`;
+
+exports[`test focused props changes when focused and execute on{Event} 1`] = `
+<span
+  onBlur={[Function]}
+  onFocus={[Function]}
+  test={true}>
+  nope
+</span>
+`;
+
+exports[`test focused props changes when focused and execute on{Event} 2`] = `
+<span
+  onBlur={[Function]}
+  onFocus={[Function]}
+  test={true}>
+  focused
+</span>
+`;
+
+exports[`test focused props changes when focused and execute on{Event} 3`] = `
+<span
+  onBlur={[Function]}
+  onFocus={[Function]}
+  test={true}>
+  nope
+</span>
+`;

src/Focusable/__tests__/index.js

@@ -0,0 +1,54 @@
+import React from "react"
+import renderer from "react-test-renderer"
+
+import Focusable from ".."
+
+const Compo = ({ focused, ...props }: { focused: boolean }) => (
+  <span { ...props }>{ focused ? "focused" : "nope" }</span>
+)
+const Composed = Focusable(Compo)
+
+test("focused props changes when focused", () => {
+  const component = renderer.create(
+    <Composed
+      test
+    />
+  )
+  let tree = component.toJSON()
+  expect(tree).toMatchSnapshot()
+
+  tree.props.onFocus()
+  tree = component.toJSON()
+  expect(tree).toMatchSnapshot()
+
+  tree.props.onBlur()
+  tree = component.toJSON()
+  expect(tree).toMatchSnapshot()
+})
+
+let flag = 0
+const handleFocus = () => flag = 1
+const handleBlur = () => flag = 2
+
+test("focused props changes when focused and execute on{Event}", () => {
+  const component = renderer.create(
+    <Composed
+      test
+      onFocus={ handleFocus }
+      onBlur={ handleBlur }
+    />
+  )
+  let tree = component.toJSON()
+  expect(tree).toMatchSnapshot()
+  expect(flag).toEqual(0)
+
+  tree.props.onFocus()
+  tree = component.toJSON()
+  expect(tree).toMatchSnapshot()
+  expect(flag).toEqual(1)
+
+  tree.props.onBlur()
+  tree = component.toJSON()
+  expect(tree).toMatchSnapshot()
+  expect(flag).toEqual(2)
+})