Adapt plugin sharing (#1553)

* Reuse old package config

* Add plugin config shape

* Add ButtonGroup to core components

* List all sharing sites

* Displaying buttons from config

* First iteration of Dropdown component (need CSS)

* Using Dropdown for sharing button

* Create HotKeys component

* Move Backdrop to its own file

* Trying a cleaner API for Dropdown

* Add README.md

* livereload: Add missing gitbook-plugin dependency

* sharing: Now use Immutable state

* sharing: Adapt quickly to new Dropdown

* sharing: Fix sharing from dropdown

6 files changed, 265 insertions, 0 deletions

diff --git a/packages/gitbook-core/package.json b/packages/gitbook-core/package.json
index b5b2d3f..7aea7fb 100644
--- a/packages/gitbook-core/package.json
+++ b/packages/gitbook-core/package.json
@@ -10,6 +10,7 @@
     "history": "^4.3.0",
     "html-tags": "^1.1.1",
     "immutable": "^3.8.1",
+    "mousetrap": "1.6.0",
     "react": "^15.3.1",
     "react-dom": "^15.3.1",
     "react-helmet": "^3.1.0",
diff --git a/packages/gitbook-core/src/components/Backdrop.js b/packages/gitbook-core/src/components/Backdrop.js
new file mode 100644
index 0000000..18f3c4d
--- /dev/null
+++ b/packages/gitbook-core/src/components/Backdrop.js
@@ -0,0 +1,38 @@
+const React      = require('react');
+
+/**
+ * Backdrop for modals, dropdown, etc. that covers the whole screen
+ * and handles click.
+ *
+ * <Backdrop onClick={onCloseModal} />
+ */
+const Backdrop = React.createClass({
+    propTypes: {
+        // Callback when backdrop is clicked
+        onClick:  React.PropTypes.func.isRequired,
+        // Z-index for the backdrop
+        zIndex:   React.PropTypes.number
+    },
+
+    getDefaultProps() {
+        return {
+            zIndex: 200
+        };
+    },
+
+    render() {
+        const { zIndex, onClick } = this.props;
+        const style = {
+            zIndex,
+            position: 'fixed',
+            top: 0,
+            right: 0,
+            width: '100%',
+            height: '100%'
+        };
+
+        return <div style={style} onClick={onClick}></div>;
+    }
+});
+
+module.exports = Backdrop;
diff --git a/packages/gitbook-core/src/components/ButtonGroup.js b/packages/gitbook-core/src/components/ButtonGroup.js
new file mode 100644
index 0000000..4c20b68
--- /dev/null
+++ b/packages/gitbook-core/src/components/ButtonGroup.js
@@ -0,0 +1,23 @@
+const React = require('react');
+const classNames = require('classnames');
+
+const ButtonGroup = React.createClass({
+    propTypes: {
+        className: React.PropTypes.string,
+        children:  React.PropTypes.node,
+        onClick:   React.PropTypes.func
+    },
+
+    render() {
+        let { className, children } = this.props;
+
+        className = classNames(
+            'GitBook-ButtonGroup',
+            className
+        );
+
+        return <div className={className}>{children}</div>;
+    }
+});
+
+module.exports = ButtonGroup;
diff --git a/packages/gitbook-core/src/components/Dropdown.js b/packages/gitbook-core/src/components/Dropdown.js
new file mode 100644
index 0000000..f43a6fc
--- /dev/null
+++ b/packages/gitbook-core/src/components/Dropdown.js
@@ -0,0 +1,141 @@
+const React      = require('react');
+const classNames = require('classnames');
+
+const Backdrop = require('./Backdrop');
+
+/**
+ * Dropdown to display a menu
+ *
+ * <Dropdown.Container>
+ *
+ *     <Button />
+ *
+ *     <Dropdown.Menu open={this.state.open}>
+ *         <Dropdown.Item href={...}> ... </Dropdown.Item>
+ *         <Dropdown.Item onClick={...}> ... </Dropdown.Item>
+ *
+ *         <Dropdown.Item> A submenu
+ *              <Dropdown.Menu>
+ *                  <Dropdown.Item href={...}> Subitem </Dropdown.Item>
+ *              </Dropdown.Menu>
+ *         </Dropdown.Item>
+ *
+ *     </Dropdown.Menu>
+ * </Dropdown.Container>
+ */
+
+const DropdownContainer = React.createClass({
+    propTypes: {
+        className:  React.PropTypes.string,
+        span: React.PropTypes.bool,
+        children: React.PropTypes.node
+    },
+
+    render() {
+        let { className, span, children } = this.props;
+
+        className = classNames(
+            'GitBook-Dropdown',
+            className
+        );
+
+        return span ?
+               <span className={className}>{children}</span>
+             : <div className={className}>{children}</div>;
+    }
+});
+
+/**
+ * A dropdown item, which is always a link, and can contain a nested
+ * DropdownMenu.
+ */
+const DropdownItem = React.createClass({
+    propTypes: {
+        children:  React.PropTypes.node,
+        onClick:   React.PropTypes.func,
+        href:      React.PropTypes.string
+    },
+
+    onClick(e) {
+        if (!this.props.href) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (this.props.onClick) this.props.onClick();
+        }
+    },
+
+    render() {
+        const {
+            children, href,
+            onClick, // eslint-disable-line no-unused-vars
+            ...otherProps
+        } = this.props;
+
+        let inner = [], submenu = [];
+        submenu = filterChildren(children, isDropdownMenu);
+        inner = filterChildren(children, (child) => !isDropdownMenu(child));
+
+        return (
+            <li className="GitBook-DropdownItem">
+                <a href={href || '#'}
+                   onClick={this.onClick}
+                   {...otherProps} >
+                    {inner}
+                </a>
+                {submenu}
+            </li>
+        );
+    }
+});
+
+/**
+ * @param {Node} children
+ * @param {Function} predicate
+ * @return {Node} children that pass the predicate
+ */
+function filterChildren(children, predicate) {
+    return React.Children.map(
+        children,
+        (child) => predicate(child) ? child : null
+    );
+}
+
+/**
+ * A DropdownMenu to display DropdownItems. Must be inside a
+ * DropdownContainer.
+ */
+const DropdownMenu = React.createClass({
+    propTypes: {
+        className: React.PropTypes.string,
+        children:  React.PropTypes.node,
+        open:      React.PropTypes.bool
+    },
+
+    render() {
+        const { open } = this.props;
+        const className = classNames(
+            'GitBook-DropdownMenu',
+            { 'GitBook-DropdownMenu-open': open }
+        );
+
+        return (
+            <ul className={className}>
+                {this.props.children}
+            </ul>
+        );
+    }
+});
+
+function isDropdownMenu(child) {
+    return (child && child.type && child.type.displayName === 'DropdownMenu');
+}
+
+const Dropdown = {
+    Item: DropdownItem,
+    Menu: DropdownMenu,
+    Container: DropdownContainer,
+    Backdrop
+};
+
+module.exports = Dropdown;
diff --git a/packages/gitbook-core/src/components/HotKeys.js b/packages/gitbook-core/src/components/HotKeys.js
new file mode 100644
index 0000000..c2c67c8
--- /dev/null
+++ b/packages/gitbook-core/src/components/HotKeys.js
@@ -0,0 +1,56 @@
+const React = require('react');
+const Mousetrap = require('mousetrap');
+const { string, node, func, shape, arrayOf } = React.PropTypes;
+
+const bindingShape = shape({
+    // A key "escape", a combination of key "mod+s", or a key sequence "ctrl+x ctrl+s"
+    key: string.isRequired,
+    // function (event) {}
+    handler: func.isRequired
+});
+
+/**
+ * Defines hotkeys globally when this component is mounted.
+ *
+ * keymap = [{
+ *   key: 'escape',
+ *   handler: (e) => quit()
+ * }, {
+ *   key: 'mod+s',
+ *   handler: (e) => save()
+ * }]
+ *
+ * <HotKeys keymap={keymap}>
+ *   < ... />
+ * </HotKeys>
+ */
+
+const HotKeys = React.createClass({
+    propTypes: {
+        children: node.isRequired,
+        keymap: arrayOf(bindingShape)
+    },
+
+    getDefaultProps() {
+        return { keymap: [] };
+    },
+
+    componentDidMount() {
+        this.props.keymap.forEach((binding) => {
+            Mousetrap.bind(binding.key, binding.handler);
+        });
+    },
+
+    componentWillUnmount() {
+        this.props.keymap.forEach((binding) => {
+            Mousetrap.unbind(binding.key, binding.handler);
+        });
+    },
+
+    render() {
+        // Simply render the only child
+        return React.Children.only(this.props.children);
+    }
+});
+
+module.exports = HotKeys;
diff --git a/packages/gitbook-core/src/index.js b/packages/gitbook-core/src/index.js
index d51d073..f820599 100644
--- a/packages/gitbook-core/src/index.js
+++ b/packages/gitbook-core/src/index.js
@@ -12,7 +12,10 @@ const { ImportLink, ImportScript, ImportCSS } = require('./components/Import');
 const HTMLContent = require('./components/HTMLContent');
 const Link = require('./components/Link');
 const Icon = require('./components/Icon');
+const HotKeys = require('./components/HotKeys');
 const Button = require('./components/Button');
+const ButtonGroup = require('./components/ButtonGroup');
+const Dropdown = require('./components/Dropdown');
 const I18nProvider = require('./components/I18nProvider');
 
 const ACTIONS = require('./actions/TYPES');
@@ -49,7 +52,10 @@ module.exports = {
     FlexBox: Box,
     Link,
     Icon,
+    HotKeys,
     Button,
+    ButtonGroup,
+    Dropdown,
     // Utilities
     Shapes,
     // Librairies