feat: add React component that uses keyboard-only-outlines (#1)

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": [["moxy", { "react": true }]]
+}

.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[{*.md,*.snap}]
+trim_trailing_whitespace = false
+
+[package.json]
+indent_size = 2

.enzyme.config.js

@@ -0,0 +1,17 @@
+/**
+ * Solves an issue with react-slick and React 16 *
+ * https://github.com/akiran/react-slick/issues/958
+ */
+window.matchMedia = window.matchMedia || function () {
+    return {
+        matches: false,
+        addListener: function () {},
+        removeListener: function () {},
+    };
+};
+
+// Setup enzyme.
+const { configure: configureEnzyme } = require('enzyme');
+const EnzymeAdapter = require('enzyme-adapter-react-16');
+
+configureEnzyme({ adapter: new EnzymeAdapter() });

.eslintrc

@@ -0,0 +1,14 @@
+{
+    "root": true,
+    "extends": [
+        "eslint-config-moxy/es9",
+        "eslint-config-moxy/addons/es-modules",
+        "eslint-config-moxy/addons/browser",
+        "eslint-config-moxy/addons/jest",
+        "eslint-config-moxy/addons/react"
+    ],
+    "parser": "babel-eslint",
+    "rules": {
+      "strict": 0
+    }
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+npm-debug.*
+coverage/

.travis.yml

@@ -0,0 +1,8 @@
+language: node_js
+node_js:
+  - "node"
+  - "lts/*"
+# Report coverage
+after_success:
+  - "npm i codecov"
+  - "node_modules/.bin/codecov"

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2018 Made With MOXY Lda <hello@moxy.studio>
+
+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

@@ -1 +1,58 @@
-# react-keyboard-only-outlines
+# KeyboardOnlyOutlines
+
+[![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Coverage Status][codecov-image]][codecov-url] [![Dependency status][david-dm-image]][david-dm-url] [![Dev Dependency status][david-dm-dev-image]][david-dm-dev-url] [![Greenkeeper badge][greenkeeper-image]][greenkeeper-url]
+
+[npm-url]:https://npmjs.org/package/react-keyboard-only-outlines
+[downloads-image]:https://img.shields.io/npm/dm/react-keyboard-only-outlines.svg
+[npm-image]:https://img.shields.io/npm/v/react-keyboard-only-outlines.svg
+[travis-url]:https://travis-ci.org/moxystudio/react-keyboard-only-outlines
+[travis-image]:http://img.shields.io/travis/moxystudio/react-keyboard-only-outlines/master.svg
+[codecov-url]:https://codecov.io/gh/moxystudio/react-keyboard-only-outlines
+[codecov-image]:https://img.shields.io/codecov/c/github/moxystudio/react-keyboard-only-outlines/master.svg
+[david-dm-url]:https://david-dm.org/moxystudio/react-keyboard-only-outlines
+[david-dm-image]:https://img.shields.io/david/moxystudio/react-keyboard-only-outlines.svg
+[david-dm-dev-url]:https://david-dm.org/moxystudio/react-keyboard-only-outlines?type=dev
+[david-dm-dev-image]:https://img.shields.io/david/dev/moxystudio/react-keyboard-only-outlines.svg
+[greenkeeper-image]:https://badges.greenkeeper.io/moxystudio/react-keyboard-only-outlines.svg
+[greenkeeper-url]:https://greenkeeper.io/
+
+A component that enables [keyboard-only-outlines](https://github.com/moxystudio/js-keyboard-only-outlines) so that outlines are only visible when using the keyboard.
+
+## Installation
+
+```sh
+$ npm install react-keyboard-only-outlines
+```
+
+## Usage
+
+You should use this component just once in your project:
+
+```jsx
+import { KeyboardOnlyOutlines } from 'react-keyboard-only-outlines';
+
+<KeyboardOnlyOutlines>
+    <MyApp />
+</KeyboardOnlyOutlines>
+```
+
+## Props
+
+| name | type | default | description |
+| ---- | ---- | ------- | ----------- |
+| stylesheetTarget | DOM Node | Automatic, see below | The DOM node where to insert the stylesheet with styles to disable the outlines |
+| styles | string | See [keyboard-only-outlines](https://github.com/moxystudio/js-keyboard-only-outlines) | The styles to apply when a focus event is caused by mouse navigation |
+
+The `stylesheetTarget` is automatically inferred by checking the component's [rootNode](https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode). In most cases, this will be `document.head` unless the component is mounted within a shadow root.
+
+## Tests
+
+```sh
+$ npm test
+$ npm test -- --watch # during development
+```
+
+
+## License
+
+Released under the [MIT License](http://www.opensource.org/licenses/mit-license.php).

index.js

@@ -0,0 +1,44 @@
+import { Component } from 'react';
+import { findDOMNode } from 'react-dom';
+import PropTypes from 'prop-types';
+import keyboardOnlyOutlines from 'keyboard-only-outlines';
+
+const getStylesheetTarget = (node) => {
+    const rootNode = node.getRootNode ? node.getRootNode() : document;
+
+    return rootNode === document ? document.head : rootNode;
+};
+
+export default class KeyboardOnlyOutlines extends Component {
+    static propTypes = {
+        children: PropTypes.node,
+        stylesheetTarget: PropTypes.object,
+        styles: PropTypes.string,
+    };
+
+    componentDidMount() {
+        const node = findDOMNode(this);
+
+        if (!node) {
+            throw new Error('Unable to find DOM node, did the children actually render a DOM element?');
+        }
+
+        const options = {
+            stylesheetTarget: this.props.stylesheetTarget || getStylesheetTarget(node),
+        };
+
+        if (this.props.styles != null) {
+            options.styles = this.props.styles;
+        }
+
+        this.dispose = keyboardOnlyOutlines(options);
+    }
+
+    componentWillUnmount() {
+        this.dispose && this.dispose();
+    }
+
+    render() {
+        return this.props.children || null;
+    }
+}

package.json

@@ -0,0 +1,88 @@
+{
+  "name": "react-keyboard-only-outlines",
+  "version": "0.0.0",
+  "description": "A React component that enables keyboard-only-outlines so that outlines are only visible when using the keyboard",
+  "main": "index.js",
+  "scripts": {
+    "build": "",
+    "lint": "eslint --ignore-path .gitignore .",
+    "test": "jest --coverage",
+    "prerelease": "npm t && npm run lint",
+    "release": "standard-version"
+  },
+  "husky": {
+    "hooks": {
+      "commit-msg": "commitlint -e $GIT_PARAMS",
+      "pre-commit": "lint-staged"
+    }
+  },
+  "standard-version": {
+    "scripts": {
+      "posttag": "git push --follow-tags origin master && npm publish"
+    }
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix --ignore-pattern test/fixtures",
+      "git add"
+    ],
+    "*.css": [
+      "stylelint --fix",
+      "git add"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/moxystudio/react-keyboard-only-outlines.git"
+  },
+  "keywords": [
+    "react",
+    "keyboard",
+    "outline",
+    "accessbility"
+  ],
+  "author": "João Mota",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/moxystudio/react-keyboard-only-outlines/issues"
+  },
+  "homepage": "https://github.com/moxystudio/react-keyboard-only-outlines#readme",
+  "dependencies": {
+    "keyboard-only-outlines": "^1.0.1"
+  },
+  "peerDepedencies": {
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^7.0.0",
+    "@commitlint/config-conventional": "^7.0.0",
+    "acorn": "^6.0.2",
+    "babel-eslint": "^10.0.1",
+    "babel-preset-moxy": "^2.3.5",
+    "enzyme": "^3.7.0",
+    "enzyme-adapter-react-16": "^1.6.0",
+    "eslint": "^5.3.0",
+    "eslint-config-moxy": "^6.0.1",
+    "husky": "^1.0.0",
+    "jest": "^23.6.0",
+    "jest-serializer-path": "^0.1.15",
+    "lint-staged": "^7.2.0",
+    "prop-types": "^15.6.2",
+    "react": "^16.6.0",
+    "react-dom": "^16.6.0",
+    "standard-version": "^4.4.0"
+  },
+  "jest": {
+    "coveragePathIgnorePatterns": [
+      "/node_modules/",
+      ".enzyme.config.js"
+    ],
+    "setupTestFrameworkScriptFile": "./.enzyme.config.js"
+  }
+}

test/index.spec.js

@@ -0,0 +1,45 @@
+import keyboardOnlyOutlines from 'keyboard-only-outlines';
+import React from 'react';
+import { mount } from 'enzyme';
+import Component from '../index';
+
+jest.mock('keyboard-only-outlines', () => jest.fn(() => jest.fn()));
+
+let mountedTree;
+
+afterAll(() => {
+    mountedTree = null;
+});
+
+it('renders the component and calls the keyboardOnlyOutlines constructor', () => {
+    jest.spyOn(Component.prototype, 'componentDidMount');
+    mountedTree = mount(<Component>Child</Component>);
+
+    expect(mountedTree.find(Component)).toHaveLength(1);
+
+    expect(Component.prototype.componentDidMount).toHaveBeenCalled();
+    expect(keyboardOnlyOutlines).toHaveBeenCalled();
+});
+
+it('calls the keyboardOnlyOutlines destructor', () => {
+    jest.spyOn(Component.prototype, 'componentWillUnmount');
+    mountedTree = mount(<Component>Child</Component>);
+
+    const dispose = mountedTree.instance().dispose;
+
+    mountedTree.unmount();
+
+    expect(Component.prototype.componentWillUnmount).toHaveBeenCalled();
+    expect(dispose).toHaveBeenCalled();
+});
+
+it('instantiates the component with the correct props', () => {
+    mountedTree = mount(<Component styles="body { background-color: green; }" stylesheetTarget={ document.body }>Child</Component>);
+
+    expect(mountedTree.instance().props.styles).toBe('body { background-color: green; }');
+    expect(mountedTree.instance().props.stylesheetTarget).toBe(document.body);
+});
+
+it('throws when a DOM node is not found', () => {
+    expect(() => { mount(<Component />); }).toThrow();
+});