navigation components moved into separate namespace

src/App/App.js

@@ -1,5 +1,5 @@
 const React = require('react');
-const { Router } = require('stremio-common');
+const { Router } = require('stremio-navigation');
 const routerViewsConfig = require('./routerViewsConfig');
 const styles = require('./styles');
 

src/common/Modal/ModalsContainerProvider/index.js

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

src/common/Popup/index.js

@@ -1,3 +0,0 @@
-import Popup from './Popup';
-
-export default Popup;

src/common/Router/Route/index.js

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

src/common/index.js

@@ -1,32 +1,19 @@
-import Slider from './Slider';
-import { FocusableProvider, withFocusable } from './Focusable';
-import Checkbox from './Checkbox';
-import ColorPicker from './ColorPicker';
-import Input from './Input';
-import { Modal, ModalsContainerContext, withModalsContainer } from './Modal';
-import Popup from './Popup';
-import Router from './Router';
-import NavBar from './NavBar';
-import MetaItem from './MetaItem';
-import ShareModal from './ShareModal';
-import UserPanel from './UserPanel';
-import Loader from './Loader';
+const Checkbox = require('./Checkbox');
+const ColorPicker = require('./ColorPicker');
+const Loader = require('./Loader');
+const MetaItem = require('./MetaItem');
+const NavBar = require('./NavBar');
+const ShareModal = require('./ShareModal');
+const Slider = require('./Slider');
+const UserPanel = require('./UserPanel');
 
-export {
+module.exports = {
     Checkbox,
     ColorPicker,
-    Input,
-    Popup,
-    NavBar,
-    ModalsContainerContext,
-    Modal,
-    withModalsContainer,
-    Router,
-    MetaItem,
-    ShareModal,
-    UserPanel,
     Loader,
+    MetaItem,
+    NavBar,
+    ShareModal,
     Slider,
-    FocusableProvider,
-    withFocusable
+    UserPanel
 };

src/navigation/FocusableContext/FocusableProvider.js

@@ -1,6 +1,6 @@
 const React = require('react');
 const PropTypes = require('prop-types');
-const withModalsContainer = require('../Modal/withModalsContainer');
+const { withModalsContainer } = require('../ModalsContainerContext');
 const FocusableContext = require('./FocusableContext');
 
 class FocusableProvider extends React.Component {

src/navigation/Input/Input.js

@@ -1,6 +1,6 @@
 const React = require('react');
 const PropTypes = require('prop-types');
-const withFocusable = require('../Focusable/withFocusable');
+const { withFocusable } = require('../FocusableContext');
 
 const ENTER_KEY_CODE = 13;
 const BUTTON_INPUT_TYPES = ['button', 'link', 'submit', 'checkbox'];

src/navigation/Modal/Modal.js

@@ -1,8 +1,8 @@
 const React = require('react');
 const ReactDOM = require('react-dom');
 const PropTypes = require('prop-types');
-const FocusableProvider = require('../Focusable/FocusableProvider');
-const withModalsContainer = require('./withModalsContainer');
+const { FocusableProvider } = require('../FocusableContext');
+const { withModalsContainer } = require('../ModalsContainerContext');
 
 const onModalsContainerDomTreeChange = ({ modalsContainerElement, contentElement }) => {
     return modalsContainerElement.lastElementChild === contentElement;

src/navigation/Modal/index.js

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

src/navigation/ModalsContainerContext/ModalsContainerProvider.js

@@ -1,5 +1,5 @@
 const React = require('react');
-const ModalsContainerContext = require('../ModalsContainerContext');
+const ModalsContainerContext = require('./ModalsContainerContext');
 const styles = require('./styles');
 
 class ModalsContainerProvider extends React.Component {

src/navigation/ModalsContainerContext/index.js

@@ -1,11 +1,7 @@
-const Modal = require('./Modal');
-const ModalsContainerContext = require('./ModalsContainerContext');
-const ModalsContainerProvider = require('./ModalsContainerProvider/ModalsContainerProvider');
+const ModalsContainerProvider = require('./ModalsContainerProvider');
 const withModalsContainer = require('./withModalsContainer');
 
 module.exports = {
-    Modal,
-    ModalsContainerContext,
     ModalsContainerProvider,
     withModalsContainer
 };

src/navigation/Popup/Label.js

@@ -1,4 +1,4 @@
-import React from 'react';
+const React = require('react');
 
 const Label = React.forwardRef(({ children, ...props }, ref) => {
     return React.cloneElement(React.Children.only(children), { ...props, ref });
@@ -6,4 +6,4 @@ const Label = React.forwardRef(({ children, ...props }, ref) => {
 
 Label.displayName = 'Popup.Label';
 
-export default Label;
+module.exports = Label;

src/navigation/Popup/Menu.js

@@ -1,4 +1,4 @@
-import React from 'react';
+const React = require('react');
 
 const Menu = React.forwardRef(({ children }, ref) => (
     <div ref={ref}>
@@ -8,4 +8,4 @@ const Menu = React.forwardRef(({ children }, ref) => (
 
 Menu.displayName = 'Popup.Menu';
 
-export default Menu;
+module.exports = Menu;

src/navigation/Popup/Popup.js

@@ -1,12 +1,12 @@
-import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { Modal } from 'stremio-common';
-import Label from './Label';
-import Menu from './Menu';
-import styles from './styles';
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const Modal = require('../Modal');
+const Label = require('./Label');
+const Menu = require('./Menu');
+const styles = require('./styles');
 
-class Popup extends Component {
+class Popup extends React.Component {
     constructor(props) {
         super(props);
 
@@ -276,10 +276,10 @@ class Popup extends Component {
         }
 
         return (
-            <Fragment>
+            <React.Fragment>
                 {this.renderLabel(this.props.children[0])}
                 {this.renderMenu(this.props.children[1])}
-            </Fragment>
+            </React.Fragment>
         );
     }
 }
@@ -293,4 +293,4 @@ Popup.propTypes = {
     onClose: PropTypes.func
 };
 
-export default Popup;
+module.exports = Popup;

src/navigation/Popup/index.js

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

src/navigation/Router/Route.js

@@ -1,6 +1,6 @@
 const React = require('react');
-const FocusableProvider = require('../../Focusable/FocusableProvider');
-const ModalsContainerProvider = require('../../Modal/ModalsContainerProvider');
+const { FocusableProvider } = require('../FocusableContext');
+const { ModalsContainerProvider } = require('../ModalsContainerContext');
 const styles = require('./styles');
 
 const onModalsContainerDomTreeChange = ({ modalsContainerElement }) => {

src/navigation/index.js

@@ -0,0 +1,11 @@
+const Input = require('./Input');
+const Modal = require('./Modal');
+const Popup = require('./Popup');
+const Router = require('./Router');
+
+module.exports = {
+    Input,
+    Modal,
+    Popup,
+    Router
+};

webpack.config.js

@@ -74,7 +74,8 @@ module.exports = {
         alias: {
             'stremio-common': path.resolve(__dirname, 'src/common'),
             'stremio-routes': path.resolve(__dirname, 'src/routes'),
-            'stremio-services': path.resolve(__dirname, 'src/services')
+            'stremio-services': path.resolve(__dirname, 'src/services'),
+            'stremio-navigation': path.resolve(__dirname, 'src/navigation')
         }
     },
     devServer: {