Merge branch 'develop' into new_branch

Author: raclim

.eslintrc

@@ -14,7 +14,8 @@
     "import/named": 0,
     "import/namespace": 0,
     "import/no-unresolved": 0,
-    "import/no-named-as-default": 2,
+    "import/no-named-as-default": 0,
+    "import/no-named-as-default-member": 0,
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
     "indent": 0,
     "no-console": 0,

client/common/useKeyDownHandlers.js

@@ -38,6 +38,9 @@ export default function useKeyDownHandlers(keyHandlers) {
           /^\d+$/.test(e.code.at(-1)) ? e.code.at(-1) : e.key.toLowerCase()
         }`
       ]?.(e);
+    } else if (isCtrl && e.altKey && e.code === 'KeyN') {
+      // specifically for creating a new file
+      handlers.current[`ctrl-alt-n`]?.(e);
     } else if (isCtrl) {
       handlers.current[`ctrl-${e.key.toLowerCase()}`]?.(e);
     }

client/constants.js

@@ -55,8 +55,6 @@ export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
 export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
 export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 
-export const UPDATE_LINT_MESSAGE = 'UPDATE_LINT_MESSAGE';
-export const CLEAR_LINT_MESSAGE = 'CLEAR_LINT_MESSAGE';
 export const TOGGLE_FORCE_DESKTOP = 'TOGGLE_FORCE_DESKTOP';
 
 export const UPDATE_FILE_NAME = 'UPDATE_FILE_NAME';

client/index.jsx

@@ -21,19 +21,21 @@ const initialState = window.__INITIAL_STATE__;
 const store = configureStore(initialState);
 
 const App = () => (
-  <Provider store={store}>
-    <ThemeProvider>
-      <Router history={browserHistory}>
-        <SkipLink targetId="play-sketch" text="PlaySketch" />
-        <Routing />
-      </Router>
-    </ThemeProvider>
-  </Provider>
+  <>
+    <Router history={browserHistory}>
+      <SkipLink targetId="play-sketch" text="PlaySketch" />
+      <Routing />
+    </Router>
+  </>
 );
 
 render(
-  <Suspense fallback={<Loader />}>
-    <App />
-  </Suspense>,
+  <Provider store={store}>
+    <ThemeProvider>
+      <Suspense fallback={<Loader />}>
+        <App />
+      </Suspense>
+    </ThemeProvider>
+  </Provider>,
   document.getElementById('root')
 );

client/modules/App/components/loader.jsx

@@ -1,11 +1,55 @@
 import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { prop, remSize } from '../../../theme';
+
+const skBounce = keyframes`
+  0%, 100% {
+    transform: scale(0.0);
+  }
+  50% {
+    transform: scale(1.0);
+  }
+`;
+const Container = styled.div`
+  &&& {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: ${prop('backgroundColor')};
+  }
+`;
+const LoaderWrapper = styled.div`
+  &&& {
+    width: ${remSize(80)};
+    height: ${remSize(80)};
+    position: relative;
+  }
+`;
+const LoaderCircle = styled.div`
+  &&& {
+    width: 100%;
+    height: 100%;
+    border-radius: 80%;
+    background-color: ${prop('logoColor')};
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    left: 0;
+    animation: ${skBounce} 2s infinite ease-in-out;
+    &:nth-child(2) {
+      animation-delay: -1s;
+    }
+  }
+`;
 
 const Loader = () => (
-  <div className="loader-container">
-    <div className="loader">
-      <div className="loader__circle1" />
-      <div className="loader__circle2" />
-    </div>
-  </div>
+  <Container>
+    <LoaderWrapper>
+      <LoaderCircle />
+      <LoaderCircle />
+    </LoaderWrapper>
+  </Container>
 );
 export default Loader;

client/modules/IDE/actions/editorAccessibility.js

@@ -1,22 +1,5 @@
-import * as ActionTypes from '../../../constants';
-
-export function updateLintMessage(severity, line, message) {
-  return {
-    type: ActionTypes.UPDATE_LINT_MESSAGE,
-    severity,
-    line,
-    message
-  };
-}
-
-export function clearLintMessage() {
-  return {
-    type: ActionTypes.CLEAR_LINT_MESSAGE
-  };
-}
-
-export function toggleForceDesktop() {
-  return {
-    type: ActionTypes.TOGGLE_FORCE_DESKTOP
-  };
-}
+export {
+  updateLintMessage,
+  clearLintMessage,
+  toggleForceDesktop
+} from '../reducers/editorAccessibility';

client/modules/IDE/components/Header/Nav.jsx

@@ -133,6 +133,8 @@ const ProjectMenu = () => {
 
   const replaceCommand =
     metaKey === 'Ctrl' ? `${metaKeyName}+H` : `${metaKeyName}+⌥+F`;
+  const newFileCommand =
+    metaKey === 'Ctrl' ? `${metaKeyName}+Alt+N` : `${metaKeyName}+⌥+N`;
 
   return (
     <ul className="nav__items-left" role="menubar">
@@ -220,6 +222,7 @@ const ProjectMenu = () => {
       <NavDropdownMenu id="sketch" title={t('Nav.Sketch.Title')}>
         <NavMenuItem onClick={() => dispatch(newFile(rootFile.id))}>
           {t('Nav.Sketch.AddFile')}
+          <span className="nav__keyboard-shortcut">{newFileCommand}</span>
         </NavMenuItem>
         <NavMenuItem onClick={() => dispatch(newFolder(rootFile.id))}>
           {t('Nav.Sketch.AddFolder')}

client/modules/IDE/components/Header/__snapshots__/Nav.unit.test.jsx.snap

@@ -637,6 +637,11 @@ exports[`Nav renders editor version for desktop 1`] = `
                 role="menuitem"
               >
                 Add File
+                <span
+                  class="nav__keyboard-shortcut"
+                >
+                  Ctrl+Alt+N
+                </span>
               </button>
             </li>
             <li

client/modules/IDE/components/IDEKeyHandlers.jsx

@@ -8,7 +8,8 @@ import {
   expandSidebar,
   showErrorModal,
   startSketch,
-  stopSketch
+  stopSketch,
+  newFile
 } from '../actions/ide';
 import { setAllAccessibleOutput } from '../actions/preferences';
 import { cloneProject, saveProject } from '../actions/project';
@@ -25,6 +26,10 @@ export const useIDEKeyHandlers = ({ getContent }) => {
   const sidebarIsExpanded = useSelector((state) => state.ide.sidebarIsExpanded);
   const consoleIsExpanded = useSelector((state) => state.ide.consoleIsExpanded);
 
+  const rootFile = useSelector(
+    (state) => state.files.filter((file) => file.name === 'root')[0]
+  );
+
   const isUserOwner = useSelector(getIsUserOwner);
   const isAuthenticated = useSelector(getAuthenticated);
   const sketchOwner = useSelector(getSketchOwner);
@@ -72,6 +77,11 @@ export const useIDEKeyHandlers = ({ getContent }) => {
         sidebarIsExpanded ? collapseSidebar() : expandSidebar()
       );
     },
+    'ctrl-alt-n': (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dispatch(newFile(rootFile.id));
+    },
     'ctrl-`': (e) => {
       e.preventDefault();
       dispatch(consoleIsExpanded ? collapseConsole() : expandConsole());

client/modules/IDE/components/KeyboardShortcutModal.jsx

@@ -6,6 +6,8 @@ function KeyboardShortcutModal() {
   const { t } = useTranslation();
   const replaceCommand =
     metaKey === 'Ctrl' ? `${metaKeyName} + H` : `${metaKeyName} + ⌥ + F`;
+  const newFileCommand =
+    metaKey === 'Ctrl' ? `${metaKeyName} + Alt + N` : `${metaKeyName} + ⌥ + N`;
   return (
     <div className="keyboard-shortcuts">
       <h3 className="keyboard-shortcuts__title">
@@ -69,6 +71,10 @@ function KeyboardShortcutModal() {
           <span className="keyboard-shortcut__command">{metaKeyName} + K</span>
           <span>{t('KeyboardShortcuts.CodeEditing.ColorPicker')}</span>
         </li>
+        <li className="keyboard-shortcut-item">
+          <span className="keyboard-shortcut__command">{newFileCommand}</span>
+          <span>{t('KeyboardShortcuts.CodeEditing.CreateNewFile')}</span>
+        </li>
       </ul>
       <h3 className="keyboard-shortcuts__title">General</h3>
       <ul className="keyboard-shortcuts__list">

client/modules/IDE/components/QuickAddList/QuickAddList.jsx

@@ -10,8 +10,21 @@ const Item = ({ isAdded, onSelect, name, url }) => {
   const buttonLabel = isAdded
     ? t('QuickAddList.ButtonRemoveARIA')
     : t('QuickAddList.ButtonAddToCollectionARIA');
+
+  const handleKeyDown = (event) => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      onSelect(event);
+    }
+  };
+
   return (
-    <li className="quick-add__item" onClick={onSelect}> { /* eslint-disable-line */ }
+    <div
+      role="button"
+      className="quick-add__item"
+      onClick={onSelect}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+    >
       <button
         className="quick-add__item-toggle"
         onClick={onSelect}
@@ -28,7 +41,7 @@ const Item = ({ isAdded, onSelect, name, url }) => {
       >
         {t('QuickAddList.View')}
       </Link>
-    </li>
+    </div>
   );
 };
 

client/modules/IDE/components/Searchbar/Collection.jsx

@@ -1,25 +1,33 @@
-import { bindActionCreators } from 'redux';
-import { connect } from 'react-redux';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import i18next from 'i18next';
 import * as SortingActions from '../../actions/sorting';
 
 import Searchbar from './Searchbar';
 
 const scope = 'collection';
 
-function mapStateToProps(state) {
-  return {
-    searchLabel: i18next.t('Searchbar.SearchCollection'),
-    searchTerm: state.search[`${scope}SearchTerm`]
+const SearchbarContainer = () => {
+  const dispatch = useDispatch();
+  const searchLabel = i18next.t('Searchbar.SearchCollection');
+  const searchTerm = useSelector((state) => state.search[`${scope}SearchTerm`]);
+
+  const setSearchTerm = (term) => {
+    dispatch(SortingActions.setSearchTerm(scope, term));
   };
-}
 
-function mapDispatchToProps(dispatch) {
-  const actions = {
-    setSearchTerm: (term) => SortingActions.setSearchTerm(scope, term),
-    resetSearchTerm: () => SortingActions.resetSearchTerm(scope)
+  const resetSearchTerm = () => {
+    dispatch(SortingActions.resetSearchTerm(scope));
   };
-  return bindActionCreators(Object.assign({}, actions), dispatch);
-}
 
-export default connect(mapStateToProps, mapDispatchToProps)(Searchbar);
+  return (
+    <Searchbar
+      searchLabel={searchLabel}
+      searchTerm={searchTerm}
+      setSearchTerm={setSearchTerm}
+      resetSearchTerm={resetSearchTerm}
+    />
+  );
+};
+
+export default SearchbarContainer;

client/modules/IDE/components/Searchbar/Searchbar.jsx

@@ -1,24 +1,24 @@
 import React, { useState, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { throttle } from 'lodash';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
 import i18next from 'i18next';
 import SearchIcon from '../../../../images/magnifyingglass.svg';
 
 const Searchbar = ({
   searchTerm,
   setSearchTerm,
   resetSearchTerm,
-  searchLabel,
-  t
+  searchLabel
 }) => {
+  const { t } = useTranslation();
   const [searchValue, setSearchValue] = useState(searchTerm);
 
   const throttledSearchChange = useCallback(
     throttle((value) => {
       setSearchTerm(value.trim());
     }, 500),
-    []
+    [setSearchTerm]
   );
 
   const handleResetSearch = () => {
@@ -65,12 +65,11 @@ Searchbar.propTypes = {
   searchTerm: PropTypes.string.isRequired,
   setSearchTerm: PropTypes.func.isRequired,
   resetSearchTerm: PropTypes.func.isRequired,
-  searchLabel: PropTypes.string,
-  t: PropTypes.func.isRequired
+  searchLabel: PropTypes.string
 };
 
 Searchbar.defaultProps = {
   searchLabel: i18next.t('Searchbar.SearchSketch')
 };
 
-export default withTranslation()(Searchbar);
+export default Searchbar;