Initial commit

mrmckeb · Sep 8, 2018 · 3c1ad8b · 3c1ad8b
commit 3c1ad8b
Show file tree

Hide file tree

Showing 12 changed files with 4,678 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,17 @@
+# http://editorconfig.org/
+root = true
+
+# All filetypes
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# JavaScript and CSS
+[*.{css,js,jsx,ts,tsx}]
+indent_size = tab
+indent_style = tab
+tab_width = 4
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+/dist
+/node_modules
+npm-debug.log
+yarn-error.log
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,11 @@
+.editorconfig
+.gitignore
+npm-debug.log
+rollup.config.js
+tsconfig.json
+yarn-error.log
+yarn.lock
+demo/
+node_modules/
+src/
+tests/
diff --git a/README.md b/README.md
@@ -0,0 +1,35 @@
+# react-outline-manager
+
+A simple component to help manage outlines in React applications.
+
+## How it works
+
+Outlines on focussable elements are hidden by default, but shown if a user begins to interact with their keyboard
+(specifically, the `tab` key).
+
+Includes CJS, ESM, and UMD (supporting browser usage).
+
+TypeScript definitions are also included.
+
+## Usage
+
+To use, wrap your tree with this component.
+
+```
+<ReactOutlineManager>
+  <YourApp />
+</ReactOutlineManager>
+```
+
+## Props
+
+### `toggle`
+
+By default, outlines are permanently shown after being enabled.
+
+Set the `toggle` prop to have React Outline Manager hide outlines again when the user resumes interacting with their
+mouse or with touch.
+
+### `className`
+
+Pass in a `className` as a string.
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+
+<head>
+  <meta charset="utf-8" />
+  <title>React Outline Manager Demo</title>
+  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
+  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="index.umd.js"></script>
+  <script src="index.js"></script>
+</body>
+
+</html>
diff --git a/demo/index.js b/demo/index.js
@@ -0,0 +1,17 @@
+'use strict';
+
+const createElement = React.createElement;
+
+class Demo extends React.Component {
+
+	render () {
+		return createElement(ReactOutlineHander, { toggle: true }, [
+			createElement('button', { key: 'a' }),
+			createElement('input', { key: 'b' }),
+			createElement('textarea', { key: 'c' }),
+		]);
+	}
+
+}
+
+ReactDOM.render(createElement(Demo), document.getElementById('root'));
diff --git a/demo/index.umd.js b/demo/index.umd.js
@@ -0,0 +1,180 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
+  typeof define === 'function' && define.amd ? define(['react'], factory) :
+  (global.ReactOutlineHander = factory(global.React));
+}(this, (function (react) { 'use strict';
+
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a 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);
+    }
+  }
+
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
+
+  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;
+  }
+
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function");
+    }
+
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        writable: true,
+        configurable: true
+      }
+    });
+    if (superClass) _setPrototypeOf(subClass, superClass);
+  }
+
+  function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+      return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _getPrototypeOf(o);
+  }
+
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
+
+    return _setPrototypeOf(o, p);
+  }
+
+  function _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return self;
+  }
+
+  function _possibleConstructorReturn(self, call) {
+    if (call && (typeof call === "object" || typeof call === "function")) {
+      return call;
+    }
+
+    return _assertThisInitialized(self);
+  }
+
+  var DEFAULT_CLASSNAME = 'ReactOutlineHandler';
+
+  var ReactOutlineHander =
+  /*#__PURE__*/
+  function (_Component) {
+    _inherits(ReactOutlineHander, _Component);
+
+    function ReactOutlineHander() {
+      var _getPrototypeOf2;
+
+      var _this;
+
+      _classCallCheck(this, ReactOutlineHander);
+
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+
+      _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(ReactOutlineHander)).call.apply(_getPrototypeOf2, [this].concat(args)));
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "state", {
+        isUsingKeyboard: false
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "addListeners", function () {
+        window.addEventListener('keydown', _this.handleTab);
+        if (_this.props.toggle) window.addEventListener('mousedown', _this.handleMouseDown);
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleTab", function (_ref) {
+        var keyCode = _ref.keyCode;
+
+        if (keyCode === 9) {
+          _this.setState({
+            isUsingKeyboard: true
+          });
+
+          if (!_this.props.toggle) window.removeEventListener('keydown', _this.handleTab);
+        }
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "handleMouseDown", function () {
+        _this.setState({
+          isUsingKeyboard: false
+        });
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "insertStyleTag", function () {
+        var script = document.createElement('style');
+        var className = _this.props.className || DEFAULT_CLASSNAME;
+        script.id = className;
+        script.innerText = ".".concat(className, " a:focus,.").concat(className, " area:focus,.").concat(className, " button:focus,.").concat(className, " iframe:focus,.").concat(className, " input:focus,.").concat(className, " select:focus,.").concat(className, " textarea:focus,.").concat(className, " [tabindex]:focus,.").concat(className, " [contenteditable]:focus { outline: none; }");
+        document.head.appendChild(script);
+      });
+
+      _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "removeListeners", function () {
+        window.removeEventListener('keydown', _this.handleTab);
+        window.removeEventListener('mousedown', _this.handleMouseDown);
+      });
+
+      return _this;
+    }
+
+    _createClass(ReactOutlineHander, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.addListeners();
+        this.insertStyleTag();
+      }
+    }, {
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.removeListeners();
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var className = this.props.className || DEFAULT_CLASSNAME;
+        return React.createElement("div", !this.state.isUsingKeyboard ? {
+          className: className
+        } : null, this.props.children);
+      }
+    }]);
+
+    return ReactOutlineHander;
+  }(react.Component);
+
+  return ReactOutlineHander;
+
+})));
diff --git a/package.json b/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "react-outline-manager",
+  "version": "1.0.0",
+  "description": "A simple helper for toggling CSS outlines.",
+  "keywords": [
+    "a11y",
+    "accessibility",
+    "accessible",
+    "outline",
+    "react-component",
+    "react-web",
+    "react"
+  ],
+  "homepage": "https://github.com/mrmckeb/react-outline-manager",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mrmckeb/react-outline-manager"
+  },
+  "author": {
+    "name": "Brody McKee",
+    "url": "https://github.com/mrmckeb"
+  },
+  "license": "MIT",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "browser": "dist/index.umd.js",
+  "typings": "dist/index.d.ts",
+  "scripts": {
+    "build": "rollup -c",
+    "build:definitions": "tsc --project tsconfig.json --noEmit false --emitDeclarationOnly",
+    "dev": "rollup -c -w",
+    "pretest": "yarn build",
+    "prepublish": "yarn build && yarn build:definitions",
+    "start": "serve demo",
+    "test:coverage": "nwb test-react --coverage",
+    "test:watch": "nwb test-react --server",
+    "test": "jest"
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^16.5.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.0.0",
+    "@types/react": "^16.4.13",
+    "jest": "^23.5.0",
+    "react": "^16.5.0",
+    "react-dom": "^16.5.0",
+    "rollup": "^0.65.2",
+    "rollup-plugin-babel": "^4.0.3",
+    "rollup-plugin-replace": "^2.0.0",
+    "rollup-plugin-uglify": "^5.0.2",
+    "serve": "^10.0.0",
+    "typescript": "^3.0.3"
+  },
+  "dependencies": {}
+}