update it

webui/.babelrc

@@ -8,6 +8,9 @@
       "displayName": false, 
       "preprocess": false 
     }],
-    ["polished"]
+    ["polished"],
+    ["module-resolver", {
+      "root": ["./src"]
+    }]
   ]
 }

webui/src/components/Base/Header.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import oc from 'open-color';
 
 import MenuIcon from 'react-icons/lib/md/menu';
-import ThumbnailIcon from './Thumbnail';
+import {ThumbnailIcon} from 'components';
 
 const Wrapper = styled.div`
   display: flex;

webui/src/components/Base/Layout.js

@@ -1,15 +1,13 @@
 import PropTypes from 'prop-types';
-
-import styled from 'styled-components';
-import { media, transitions} from '../lib/style-utils';
-import oc from 'open-color';
-
 import Head from 'next/head';
 
-import HeaderContainer from '../containers/HeaderContainer';
-import SidebarContainer from '../containers/SidebarContainer';
+import styled from 'styled-components';
+import oc from 'open-color';
 
-import Package from '../../package';
+import HeaderContainer from 'containers/HeaderContainer';
+import SidebarContainer from 'containers/SidebarContainer';
+
+import Package from '../../../package';
 
 const Body = styled.div`
   display: flex;

webui/src/components/Base/Login.js

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 
 import styled from 'styled-components';
 import oc from 'open-color';
-import { media } from '../lib/style-utils';
+import { media } from '../../lib/style-utils';
 
-import ThumbnailIcon from './Thumbnail';
+import {ThumbnailIcon} from 'components';
 import CloseIcon from 'react-icons/lib/md/close';
 
 const Wrapper = styled.div`

webui/src/components/Base/Logout.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import oc from 'open-color';
 
-import Modal from './Modal';
+import { Modal } from '../../components';
 
 const TitleWrapper = styled.div`
   padding-left: 1rem;

webui/src/components/Base/Sidebar.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 
 import styled from 'styled-components';
-import { media, transitions} from '../lib/style-utils';
+import { media, transitions } from 'lib/style-utils';
 import oc from 'open-color';
 
 import PdnIcon from 'react-icons/lib/md/cast';

webui/src/components/Shared/Modal.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 
 import styled from 'styled-components';
 import onClickOutside from 'react-onclickoutside';
-import {media, transitions} from '../lib/style-utils';
 import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
+import {media, transitions} from 'lib/style-utils';
 
 const Wrapper = styled.div`
   position: fixed;

webui/src/components/User/index.js

@@ -0,0 +1,5 @@
+import ViewSelector from './ViewSelector';
+
+export {
+  ViewSelector
+};

webui/src/components/index.js

@@ -0,0 +1,25 @@
+import Layout from './Base/Layout';
+import Header from './Base/Header';
+import Sidebar from './Base/Sidebar';
+import Login from './Base/Login';
+import Logout from './Base/Logout';
+
+import Modal from './Shared/Modal';
+import ThumbnailIcon from './Shared/ThumbnailIcon';
+import Dimmed from './Shared/Dimmed';
+
+import * as User from './User';
+
+export {
+  Layout,
+  Header,
+  Sidebar,
+  Login,
+  Logout,
+
+  Modal,
+  ThumbnailIcon,
+  Dimmed,
+
+  User
+}

webui/src/containers/App.js

@@ -6,9 +6,9 @@ import { bindActionCreators, compose } from 'redux';
 import * as uiActions from '../actions/ui';
 import withWidth, { SMALL } from '../lib/with-width';
 
-import Layout from '../components/Layout';
-import PdnContainer from '../containers/PdnContainer';
-import UserContainer from '../containers/UserContainer';
+import { Layout } from 'components';
+import PdnContainer from 'containers/PdnContainer';
+import UserContainer from 'containers/UserContainer';
 
 class App extends Component {
   static propTypes = {

webui/src/containers/Auth.js

@@ -5,12 +5,12 @@ import { bindActionCreators } from 'redux';
 import Router from 'next/router';
 import NProgress from 'nprogress';
 
-import Session from '../lib/session';
+import Session from 'lib/session';
 
-import * as authActions from '../actions/auth';
-import * as uiActions from '../actions/ui';
+import * as authActions from 'actions/auth';
+import * as uiActions from 'actions/ui';
 
-import Login from '../components/Login';
+import { Login } from 'components';
 
 class Auth extends Component {
   state = {

webui/src/containers/HeaderContainer.js

@@ -4,13 +4,11 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
-import * as uiActions from '../actions/ui';
+import * as uiActions from 'actions/ui';
 
-import Session from '../lib/session';
+import Session from 'lib/session';
 
-import Header from '../components/Header';
-import Logout from '../components//Logout';
-import Dimmed from '../components//Dimmed';
+import { Header, Logout, Dimmed } from 'components';
 
 class HeaderContainer extends Component {
   state = {

webui/src/containers/PdnContainer.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import oc from 'open-color';
 
-import Layout from '../components/Layout';
+import { Layout } from 'components';
 
 const PdnContainer = () => (
   <Layout.Content>

webui/src/containers/SidebarContainer.js

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators, compose } from 'redux';
 
-import withWidth, { SMALL } from '../lib/with-width';
-import * as uiActions from '../actions/ui';
+import withWidth, { SMALL } from 'lib/with-width';
+import * as uiActions from 'actions/ui';
 
-import Sidebar from '../components/Sidebar';
+import { Sidebar } from 'components';
 
 class SidebarContainer extends Component {
   static propTypes = {

webui/src/containers/UserContainer.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import oc from 'open-color';
 
-import ViewSelector from '../components/User/ViewSelector';
+import { User } from 'components';
 
 const Wrapper = styled.div`
 `;
@@ -25,7 +25,7 @@ class UserContainer extends Component {
 
     return (
       <Wrapper>
-        <ViewSelector onSelect={handleSelectView} selected={view}/>
+        <User.ViewSelector onSelect={handleSelectView} selected={view}/>
       </Wrapper>
     )
   }

webui/src/reducers/auth.js

@@ -1,5 +1,5 @@
 import { handleActions } from 'redux-actions';
-import { AUTH } from '../actions/auth';
+import { AUTH } from 'actions/auth';
 
 const initialState = {
   isLoggedIn: false,

webui/src/reducers/ui.js

@@ -1,5 +1,5 @@
 import { handleActions } from 'redux-actions';
-import { UI } from '../actions/ui';
+import { UI } from 'actions/ui';
 
 const initialState = {
   sidebar: {

webui/src/sagas/auth.js

@@ -1,7 +1,7 @@
 import { takeEvery, put, call, take } from 'redux-saga/effects';
 
-import { AUTH } from '../actions/auth';
-import { UI, toggleSidebar } from '../actions/ui';
+import { AUTH } from 'actions/auth';
+import { UI, toggleSidebar } from 'actions/ui';
 
 function* testCode() {
   yield put(toggleSidebar());