wip - removing old stuff, more restructure

package.json

@@ -11,8 +11,6 @@
     "build:scripts": "cross-env NODE_ENV=production webpack --config webpack.cli.js",
     "add-contributor": "all-contributors add",
     "generate-contributors": "all-contributors generate",
-    "storybook": "start-storybook -p 9001",
-    "storybook-build": "build-storybook -o dist",
     "lint": "npm run lint:js & npm run lint:css",
     "lint:js": "eslint .",
     "lint:js:fix": "npm run lint:js -- --fix",
@@ -73,7 +71,6 @@
     "last 2 ChromeAndroid versions"
   ],
   "devDependencies": {
-    "@kadira/storybook": "^1.36.0",
     "all-contributors-cli": "^4.4.0",
     "babel": "^6.5.2",
     "babel-cli": "^6.18.0",
@@ -87,7 +84,6 @@
     "babel-preset-react": "^6.23.0",
     "babel-preset-stage-1": "^6.22.0",
     "babel-runtime": "^6.23.0",
-    "caniuse-lite": "^1.0.30000745",
     "cross-env": "^5.0.2",
     "css-loader": "^0.28.7",
     "cssnano": "^v4.0.0-rc.2",
@@ -110,7 +106,6 @@
     "postcss-import": "^11.0.0",
     "postcss-loader": "^2.0.7",
     "raf": "^3.4.0",
-    "react-hot-loader": "^3.0.0-beta.7",
     "react-test-renderer": "^16.0.0",
     "style-loader": "^0.18.2",
     "stylefmt": "^4.3.1",
@@ -121,7 +116,6 @@
     "stylelint-declaration-use-variable": "^1.6.0",
     "svg-inline-loader": "^0.8.0",
     "uglifyjs-webpack-plugin": "^1.0.1",
-    "url-loader": "^0.5.9",
     "webpack": "^3.6.0",
     "webpack-dev-server": "^2.9.1",
     "webpack-merge": "^4.1.0",
@@ -130,7 +124,6 @@
   "dependencies": {
     "classnames": "^2.2.5",
     "create-react-class": "^15.6.0",
-    "focus-trap-react": "^3.0.3",
     "fuzzy": "^0.1.1",
     "gotrue-js": "^0.9.15",
     "gray-matter": "^3.0.6",
@@ -141,7 +134,6 @@
     "jwt-decode": "^2.1.0",
     "localforage": "^1.4.2",
     "lodash": "^4.13.1",
-    "material-design-icons": "^3.0.1",
     "mdast-util-definitions": "^1.2.2",
     "mdast-util-to-string": "^1.0.4",
     "moment": "^2.11.2",
@@ -166,7 +158,7 @@
     "react-topbar-progress-indicator": "^2.0.0",
     "react-transition-group": "^2.2.1",
     "react-waypoint": "^7.1.0",
-    "reboot.css": "^0.0.4",
+    "reboot.css": "^1.0.0",
     "redux": "^3.3.1",
     "redux-notifications": "^4.0.1",
     "redux-optimist": "^0.0.2",

src/backends/git-gateway/AuthenticationPage.js

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from "react";
 import { partial } from 'lodash';
 import { Notifs } from 'redux-notifications';
-import { Toast } from '../../UI/index';
-import Icon from '../../icons/Icon';
+import Toast from '../../components/UI/toast/Toast';
+import Icon from '../../components/UI/Icon/Icon';
 
 let component = null;
 

src/backends/github/AuthenticationPage.js

@@ -1,9 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import Authenticator from '../../lib/netlify-auth';
-import Icon from '../../icons/Icon';
+import Icon from '../../components/UI/Icon/Icon';
 import { Notifs } from 'redux-notifications';
-import { Toast } from '../../UI/index';
+import Toast from '../../components/UI/toast/Toast';
 
 export default class AuthenticationPage extends React.Component {
   static propTypes = {

src/backends/test-repo/AuthenticationPage.js

@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Icon from '../../icons/Icon';
+import Icon from '../../components/UI/Icon/Icon';
 
 export default class AuthenticationPage extends React.Component {
   static propTypes = {

src/App/App.js → src/components/App/App.js

@@ -5,16 +5,17 @@ import { connect } from 'react-redux';
 import { Route, Switch, Link, Redirect } from 'react-router-dom';
 import { Notifs } from 'redux-notifications';
 import TopBarProgress from 'react-topbar-progress-indicator';
-import { loadConfig as actionLoadConfig } from '../actions/config';
-import { loginUser as actionLoginUser, logoutUser as actionLogoutUser } from '../actions/auth';
-import { currentBackend } from '../backends/backend';
-import { showCollection, createNewEntry } from '../actions/collections';
-import { openMediaLibrary as actionOpenMediaLibrary } from '../actions/mediaLibrary';
+import { loadConfig as actionLoadConfig } from '../../actions/config';
+import { loginUser as actionLoginUser, logoutUser as actionLogoutUser } from '../../actions/auth';
+import { currentBackend } from '../../backends/backend';
+import { showCollection, createNewEntry } from '../../actions/collections';
+import { openMediaLibrary as actionOpenMediaLibrary } from '../../actions/mediaLibrary';
 import Header from './Header';
 import MediaLibrary from '../MediaLibrary/MediaLibrary';
-import { Loader, Toast } from '../UI/index';
-import { getCollectionUrl, getNewEntryUrl } from '../lib/urlHelper';
-import { SIMPLE, EDITORIAL_WORKFLOW } from '../constants/publishModes';
+import Loader from '../UI/loader/Loader';
+import Toast from '../UI/toast/Toast';
+import { getCollectionUrl, getNewEntryUrl } from '../../lib/urlHelper';
+import { SIMPLE, EDITORIAL_WORKFLOW } from '../../constants/publishModes';
 import Collection from '../Collection/Collection';
 import Workflow from '../Workflow/Workflow';
 import Editor from '../Editor/Editor';

src/App/Header.js → src/components/App/Header.js

@@ -3,7 +3,7 @@ import React from "react";
 import ImmutablePropTypes from "react-immutable-proptypes";
 import { NavLink } from 'react-router-dom';
 import { Dropdown, DropdownItem } from '../UI/Dropdown/Dropdown';
-import Icon from '../icons/Icon';
+import Icon from '../UI/Icon/Icon';
 
 export default class Header extends React.Component {
 

src/Collection/Collection.js → src/components/Collection/Collection.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
-import { getNewEntryUrl } from '../lib/urlHelper';
+import { getNewEntryUrl } from '../../lib/urlHelper';
 import Sidebar from './Sidebar';
 import Top from './Top';
 import EntriesCollection from './Entries/EntriesCollection';

src/Collection/Entries/Entries.js → src/components/Collection/Entries/Entries.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { Loader } from '../../UI';
+import Loader from '../../UI/loader/Loader';
 import EntryListing from './EntryListing';
 
 const Entries = ({ collections, entries, publicFolder, page, onPaginate, isFetching }) => {

src/Collection/Entries/EntriesCollection.js → src/components/Collection/Entries/EntriesCollection.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
-import { loadEntries } from '../../actions/entries';
-import { selectEntries } from '../../reducers';
+import { loadEntries } from '../../../actions/entries';
+import { selectEntries } from '../../../reducers';
 import Entries from './Entries';
 
 class EntriesCollection extends React.Component {

src/Collection/Entries/EntriesSearch.js → src/components/Collection/Entries/EntriesSearch.js

@@ -2,11 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
-import { selectSearchedEntries } from '../../reducers';
+import { selectSearchedEntries } from '../../../reducers';
 import {
   searchEntries as actionSearchEntries,
   clearSearch as actionClearSearch
-} from '../../actions/search';
+} from '../../../actions/search';
 import Entries from './Entries';
 
 class EntriesSearch extends React.Component {

src/Collection/Entries/EntryCard.js → src/components/Collection/Entries/EntryCard.js

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import c from 'classnames';
-import history from '../../routing/history';
-import { resolvePath } from '../../lib/pathHelper';
+import history from '../../../routing/history';
+import { resolvePath } from '../../../lib/pathHelper';
 
 const EntryCard = ({ collection, entry, inferedFields, publicFolder }) => {
   const path = `/collections/${ collection.get('name') }/entries/${ entry.get('slug') }`;

src/Collection/Entries/EntryListing.js → src/components/Collection/Entries/EntryListing.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Waypoint from 'react-waypoint';
 import { Map } from 'immutable';
-import { selectFields, selectInferedField } from '../../reducers/collections';
+import { selectFields, selectInferedField } from '../../../reducers/collections';
 import EntryCard from './EntryCard';
 
 export default class EntryListing extends React.Component {

src/Collection/Sidebar.js → src/components/Collection/Sidebar.js

@@ -2,9 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { NavLink } from 'react-router-dom';
-import { searchCollections } from '../actions/collections';
-import { getCollectionUrl } from '../lib/urlHelper';
-import Icon from '../icons/Icon';
+import { searchCollections } from '../../actions/collections';
+import { getCollectionUrl } from '../../lib/urlHelper';
+import Icon from '../UI/Icon/Icon';
 
 export default class Collection extends React.Component {
 

src/Editor/Editor.js → src/components/Editor/Editor.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
-import history from '../routing/history';
+import history from '../../routing/history';
 import {
   loadEntry,
   createDraftFromEntry,
@@ -12,16 +12,16 @@ import {
   changeDraftFieldValidation,
   persistEntry,
   deleteEntry,
-} from '../actions/entries';
-import { closeEntry } from '../actions/editor';
-import { deserializeValues } from '../lib/serializeEntryValues';
-import { addAsset } from '../actions/media';
-import { openMediaLibrary, removeInsertedMedia } from '../actions/mediaLibrary';
-import { selectEntry, getAsset } from '../reducers';
-import { selectFields } from '../reducers/collections';
+} from '../../actions/entries';
+import { closeEntry } from '../../actions/editor';
+import { deserializeValues } from '../../lib/serializeEntryValues';
+import { addAsset } from '../../actions/media';
+import { openMediaLibrary, removeInsertedMedia } from '../../actions/mediaLibrary';
+import { selectEntry, getAsset } from '../../reducers';
+import { selectFields } from '../../reducers/collections';
 import EditorInterface from './EditorInterface/EditorInterface';
 import withWorkflow from './withWorkflow';
-import { Loader } from '../UI';
+import Loader from '../UI/loader/Loader';
 
 class Editor extends React.Component {
   static propTypes = {

src/Editor/EditorControlPane/ControlHOC.js → src/components/Editor/EditorControlPane/ControlHOC.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import ImmutablePropTypes from "react-immutable-proptypes";
-import ValidationErrorTypes from '../../constants/validationErrorTypes';
+import ValidationErrorTypes from '../../../constants/validationErrorTypes';
 
 const truthy = () => ({ error: false });
 

src/Editor/EditorControlPane/EditorControlPane.js → src/components/Editor/EditorControlPane/EditorControlPane.js

@@ -3,7 +3,7 @@ import React, { Component } from 'react';
 import { Map, fromJS } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import c from 'classnames';
-import { resolveWidget } from '../../lib/registry';
+import { resolveWidget } from '../../../lib/registry';
 import ControlHOC from './ControlHOC';
 
 function isHidden(field) {

src/Editor/EditorInterface/EditorInterface.css → src/components/Editor/EditorInterface/EditorInterface.css

@@ -21,8 +21,16 @@
   height: 100%;
 }
 
+/**
+ * Override unnecessary style so editor card drop shadow is visible.
+ */
+.SplitPane.vertical {
+  overflow: visible !important;
+}
+
 .nc-entryEditor-controlPane,
 .nc-entryEditor-previewPane {
+  @apply(--dropShadowDeep);
   background-color: #fff;
   height: 100%;
   overflow-y: auto;
@@ -42,6 +50,7 @@
   z-index: 299;
 
   & button {
+    @apply(--dropShadowMiddle);
     background-color: #fff;
     color: var(--primaryColor);
     border-radius: 32px;
@@ -53,7 +62,6 @@
     justify-content: center;
     align-items: center;
     margin-bottom: 6px;
-    box-shadow: 0 2px 6px 0 rgba(68,74,87,0.15), 0 1px 3px 0 rgba(68,74,87,0.30);
   }
 }
 

src/Editor/EditorInterface/EditorInterface.js → src/components/Editor/EditorInterface/EditorInterface.js

@@ -8,7 +8,7 @@ import EditorControlPane from '../EditorControlPane/EditorControlPane';
 import EditorPreviewPane from '../EditorPreviewPane/EditorPreviewPane';
 import EditorToolbar from './EditorToolbar';
 import { StickyContext } from '../../UI/Sticky/Sticky';
-import Icon from '../../icons/Icon';
+import Icon from '../../UI/Icon/Icon';
 
 const PREVIEW_VISIBLE = 'cms.preview-visible';
 const SCROLL_SYNC_ENABLED = 'cms.scroll-sync-enabled';

src/Editor/EditorInterface/EditorToolbar.js → src/components/Editor/EditorInterface/EditorToolbar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Icon from '../../icons/Icon';
+import Icon from '../../UI/Icon/Icon';
 import { Dropdown, DropdownItem } from '../../UI/Dropdown/Dropdown';
 
 const EditorToolbar = (

src/Editor/EditorPreviewPane/EditorPreviewPane.js → src/components/Editor/EditorPreviewPane/EditorPreviewPane.js

@@ -3,10 +3,10 @@ import React from 'react';
 import { List, Map } from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Frame from 'react-frame-component';
-import { resolveWidget, getPreviewTemplate, getPreviewStyles } from '../../lib/registry';
+import { resolveWidget, getPreviewTemplate, getPreviewStyles } from '../../../lib/registry';
 import ErrorBoundary from '../../UI/ErrorBoundary/ErrorBoundary';
-import { selectTemplateName, selectInferedField } from '../../reducers/collections';
-import { INFERABLE_FIELDS } from '../../constants/fieldInference';
+import { selectTemplateName, selectInferedField } from '../../../reducers/collections';
+import { INFERABLE_FIELDS } from '../../../constants/fieldInference';
 import EditorPreviewContent from './EditorPreviewContent.js';
 import PreviewHOC from './PreviewHOC';
 import EditorPreview from './EditorPreview';

src/Editor/withWorkflow.js → src/components/Editor/withWorkflow.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { EDITORIAL_WORKFLOW } from '../constants/publishModes';
-import { selectUnpublishedEntry, selectEntry } from '../reducers';
-import { selectAllowDeletion } from "../reducers/collections";
-import { loadUnpublishedEntry, persistUnpublishedEntry } from '../actions/editorialWorkflow';
+import { EDITORIAL_WORKFLOW } from '../../constants/publishModes';
+import { selectUnpublishedEntry, selectEntry } from '../../reducers';
+import { selectAllowDeletion } from '../../reducers/collections';
+import { loadUnpublishedEntry, persistUnpublishedEntry } from '../../actions/editorialWorkflow';
 
 function mapStateToProps(state, ownProps) {
   const { collections } = state;

src/EditorWidgets/Markdown/MarkdownControl/Toolbar/Toolbar.js → src/components/EditorWidgets/Markdown/MarkdownControl/Toolbar/Toolbar.js

@@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import c from 'classnames';
 import { Dropdown, DropdownItem } from '../../../../UI/Dropdown/Dropdown';
 import Switch from '../../../../UI/Toggle/Toggle';
-import Icon from '../../../../icons/Icon';
+import Icon from '../../../../UI/Icon/Icon';
 import ToolbarButton from './ToolbarButton';
 
 export default class Toolbar extends React.Component {

src/EditorWidgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.js → src/components/EditorWidgets/Markdown/MarkdownControl/Toolbar/ToolbarButton.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classnames from 'classnames';
-import Icon from '../../../../icons/Icon';
+import Icon from '../../../../UI/Icon/Icon';
 
 const ToolbarButton = ({ label, icon, action, active, disabled }) => (
   <button

src/EditorWidgets/Markdown/MarkdownControl/VisualEditor/Shortcode.js → src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/Shortcode.js

@@ -3,10 +3,10 @@ import c from 'classnames';
 import { Map } from 'immutable';
 import { connect } from 'react-redux';
 import { partial, capitalize } from 'lodash';
-import { resolveWidget, getEditorComponents } from '../../../../lib/registry';
-import { openMediaLibrary, removeInsertedMedia } from '../../../../actions/mediaLibrary';
-import { addAsset } from '../../../../actions/media';
-import { getAsset } from '../../../../reducers';
+import { resolveWidget, getEditorComponents } from '../../../../../lib/registry';
+import { openMediaLibrary, removeInsertedMedia } from '../../../../../actions/mediaLibrary';
+import { addAsset } from '../../../../../actions/media';
+import { getAsset } from '../../../../../reducers';
 import ListItemTopBar from '../../../../UI/ListItemTopBar/ListItemTopBar';
 
 class Shortcode extends React.Component {

src/EditorWidgets/Markdown/MarkdownControl/VisualEditor/index.js → src/components/EditorWidgets/Markdown/MarkdownControl/VisualEditor/index.js

@@ -5,7 +5,7 @@ import { Map } from 'immutable';
 import { Value, Document, Block, Text } from 'slate';
 import { Editor as Slate } from 'slate-react';
 import { slateToMarkdown, markdownToSlate, htmlToSlate } from '../../serializers';
-import { getEditorComponents } from '../../../../lib/registry';
+import { getEditorComponents } from '../../../../../lib/registry';
 import Toolbar from '../Toolbar/Toolbar';
 import { Sticky } from '../../../../UI/Sticky/Sticky';
 import { renderNode, renderMark } from './renderers';