Button component implemented

src/common/Button/Button.js

@@ -0,0 +1,42 @@
+const React = require('react');
+const { useFocusable } = require('stremio-navigation');
+
+const ENTER_KEY_CODE = 13;
+
+const Button = React.forwardRef(({ children, ...props }, ref) => {
+    const focusable = useFocusable();
+    const tabIndex = (props.tabIndex === null || isNaN(props.tabIndex)) ?
+        (focusable ? 0 : -1)
+        :
+        props.tabIndex;
+    const onKeyUp = React.useCallback((event) => {
+        if (typeof props.onKeyUp === 'function') {
+            props.onKeyUp(event);
+        }
+
+        if (event.keyCode === ENTER_KEY_CODE && !event.nativeEvent.clickPrevented) {
+            event.currentTarget.click();
+        }
+    }, [props.onKeyUp]);
+    const onMouseDown = React.useCallback((event) => {
+        if (typeof props.onMouseDown === 'function') {
+            props.onMouseDown(event);
+        }
+
+        if (!event.nativeEvent.blurPrevented) {
+            event.preventDefault();
+            if (document.activeElement instanceof HTMLElement) {
+                document.activeElement.blur();
+            }
+        }
+    }, [props.onMouseDown]);
+    return React.createElement(
+        typeof props.href === 'string' ? 'a' : 'div',
+        { ...props, ref, tabIndex, onKeyUp, onMouseDown },
+        children
+    );
+});
+
+Button.displayName = 'Button';
+
+module.exports = Button;

src/common/Button/index.js

@@ -0,0 +1,3 @@
+const Button = require('./Button');
+
+module.exports = Button;

src/common/index.js

@@ -1,3 +1,4 @@
+const Button = require('./Button');
 const Checkbox = require('./Checkbox');
 const ColorPicker = require('./ColorPicker');
 const Input = require('./Input');
@@ -14,6 +15,7 @@ const useBinaryState = require('./useBinaryState');
 const useLocationHash = require('./useLocationHash');
 
 module.exports = {
+    Button,
     Checkbox,
     ColorPicker,
     Input,