Merge branch 'develop' into storybook-upgrade

.storybook/decorator-theme.js

@@ -0,0 +1,53 @@
+import { upperFirst } from 'lodash';
+import React from 'react';
+import styled, { ThemeProvider } from 'styled-components';
+import theme, { prop } from '../client/theme';
+
+const PreviewArea = styled.div`
+  background: ${prop('backgroundColor')};
+  flex-grow: 1;
+  padding: 2rem;
+  & > h4 {
+    margin-top: 0;
+    color: ${prop('primaryTextColor')};
+  }
+`;
+
+const themeKeys = Object.keys(theme);
+
+export const withThemeProvider = (Story, context) => {
+  const setting = context.globals.theme;
+  if (setting === 'all') {
+    return (
+      <div style={{ display: 'flex', flexWrap: 'wrap' }}>
+        {Object.keys(theme).map((themeName) => (
+          <ThemeProvider theme={theme[themeName]} key={themeName}>
+            <PreviewArea className={themeName}>
+              <h4>{upperFirst(themeName)}</h4>
+              <Story />
+            </PreviewArea>
+          </ThemeProvider>
+        ))}
+      </div>
+    );
+  } else {
+    const themeName = setting;
+    return (
+      <ThemeProvider theme={theme[themeName]}>
+        <PreviewArea className={themeName}>
+          <Story />
+        </PreviewArea>
+      </ThemeProvider>
+    );
+  }
+};
+
+export const themeToolbarItem = {
+  description: 'Global theme for components',
+  defaultValue: 'all',
+  toolbar: {
+    title: 'Theme',
+    icon: 'mirror',
+    items: [...themeKeys, 'all']
+  }
+};

.storybook/preview.js

@@ -2,10 +2,10 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { MemoryRouter } from 'react-router';
 
-import ThemeProvider from '../client/modules/App/components/ThemeProvider';
 import configureStore from '../client/store';
 import '../client/i18n-test';
 import '../client/styles/storybook.css'
+import { withThemeProvider, themeToolbarItem } from './decorator-theme';
 
 const initialState = window.__INITIAL_STATE__;
 
@@ -21,5 +21,9 @@ export const decorators = [
       </MemoryRouter>
     </Provider>
   ),
-]
+  withThemeProvider
+];
 
+export const globalTypes = {
+  theme: themeToolbarItem
+};

Dockerfile

@@ -10,7 +10,6 @@ FROM base as development
 ENV NODE_ENV development
 COPY package.json package-lock.json ./
 RUN npm install
-RUN npm rebuild node-sass
 COPY .babelrc index.js nodemon.json ./
 COPY ./webpack ./webpack
 COPY client ./client
@@ -27,6 +26,5 @@ FROM base as production
 ENV NODE_ENV=production
 COPY package.json package-lock.json index.js ./
 RUN npm install --production
-RUN npm rebuild node-sass
 COPY --from=build $APP_HOME/dist ./dist
 CMD ["npm", "run", "start:prod"]

README.md

@@ -31,17 +31,6 @@ If you have found a bug in the p5.js Web Editor, you can file it under the ["iss
 
 To see which pull requests and issues are currently being reviewed, check the [PR Review Board](https://github.com/processing/p5.js-web-editor/projects/9) or the following Milestones: [MINOR Release](https://github.com/processing/p5.js-web-editor/milestone/8). 
 
-Issues and Pull Requests categorized under the PATCH or MINOR Release Milestones will be prioritized since they are planned to be merged for the next release to Production. Please feel free to [comment on this pinned issue](https://github.com/processing/p5.js-web-editor/issues/2534) if you would like your issue to be considered for the next release!
-
-
-### When Will the Next Production Release Be?
-
-We will aim to deploy on a 1-2 month basis. Here are some dates we’re working towards: 
-
-2.11.0 MINOR Release: By January 16, 2023
-
-[You can read more about Semantic Versioning and the differences between a MINOR and PATCH release](https://semver.org/). 
-
 
 ## References for Contributing to the p5.js Web Editor
 

client/common/useKeyDownHandlers.js

@@ -33,7 +33,11 @@ export default function useKeyDownHandlers(keyHandlers) {
     const isMac = navigator.userAgent.toLowerCase().indexOf('mac') !== -1;
     const isCtrl = isMac ? e.metaKey : e.ctrlKey;
     if (e.shiftKey && isCtrl) {
-      handlers.current[`ctrl-shift-${e.key.toLowerCase()}`]?.(e);
+      handlers.current[
+        `ctrl-shift-${
+          /^\d+$/.test(e.code.at(-1)) ? e.code.at(-1) : e.key.toLowerCase()
+        }`
+      ]?.(e);
     } else if (isCtrl) {
       handlers.current[`ctrl-${e.key.toLowerCase()}`]?.(e);
     }

client/components/Dropdown/TableDropdown.jsx

@@ -1,20 +1,18 @@
 import React from 'react';
-import { useMediaQuery } from 'react-responsive';
 import styled from 'styled-components';
 import { prop, remSize } from '../../theme';
 import DropdownMenu from './DropdownMenu';
 
 import DownFilledTriangleIcon from '../../images/down-filled-triangle.svg';
 import MoreIconSvg from '../../images/more.svg';
+import useIsMobile from '../../modules/IDE/hooks/useIsMobile';
 
 const DotsHorizontal = styled(MoreIconSvg)`
   transform: rotate(90deg);
 `;
 
 const TableDropdownIcon = () => {
-  // TODO: centralize breakpoints
-  const isMobile = useMediaQuery({ maxWidth: 770 });
-
+  const isMobile = useIsMobile();
   return isMobile ? (
     <DotsHorizontal focusable="false" aria-hidden="true" />
   ) : (

client/components/PreviewNav.jsx

@@ -12,12 +12,14 @@ const PreviewNav = ({ owner, project }) => {
     <nav className="nav preview-nav">
       <div className="nav__items-left">
         <div className="nav__item-logo">
-          <LogoIcon
-            role="img"
-            aria-label={t('Common.p5logoARIA')}
-            focusable="false"
-            className="svg__logo"
-          />
+          <Link to={`/${owner.username}/sketches`}>
+            <LogoIcon
+              role="img"
+              aria-label={t('Common.p5logoARIA')}
+              focusable="false"
+              className="svg__logo"
+            />
+          </Link>
         </div>
         <Link
           className="nav__item"

client/components/SkipLink.jsx

@@ -0,0 +1,35 @@
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+
+const SkipLink = ({ targetId, text }) => {
+  const [focus, setFocus] = useState(false);
+  const { t } = useTranslation();
+  const handleFocus = () => {
+    setFocus(true);
+  };
+
+  const handleBlur = () => {
+    setFocus(false);
+  };
+  const linkClasses = classNames('skip_link', { focus });
+
+  return (
+    <a
+      href={`#${targetId}`}
+      className={linkClasses}
+      onFocus={handleFocus}
+      onBlur={handleBlur}
+    >
+      {t(`SkipLink.${text}`)}
+    </a>
+  );
+};
+
+SkipLink.propTypes = {
+  targetId: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired
+};
+
+export default SkipLink;

client/components/createRedirectWithUsername.jsx

@@ -1,29 +1,24 @@
-import React from 'react';
-import { connect } from 'react-redux';
-import browserHistory from '../browserHistory';
+import { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
 
-const RedirectToUser = ({ username, url = '/:username/sketches' }) => {
-  React.useEffect(() => {
-    if (username == null) {
-      return;
+const RedirectToUser = ({ url = '/:username/sketches' }) => {
+  const history = useHistory();
+  const username = useSelector((state) =>
+    state.user ? state.user.username : null
+  );
+  useEffect(() => {
+    if (username) {
+      history.replace(url.replace(':username', username));
     }
-
-    browserHistory.replace(url.replace(':username', username));
-  }, [username]);
+  }, [history, url, username]);
 
   return null;
 };
 
-function mapStateToProps(state) {
-  return {
-    username: state.user ? state.user.username : null
-  };
-}
-
-const ConnectedRedirectToUser = connect(mapStateToProps)(RedirectToUser);
-
-const createRedirectWithUsername = (url) => (props) => (
-  <ConnectedRedirectToUser {...props} url={url} />
-);
+RedirectToUser.propTypes = {
+  url: PropTypes.string.isRequired
+};
 
-export default createRedirectWithUsername;
+export default RedirectToUser;

client/constants.js

@@ -2,7 +2,6 @@
 // multiple files
 export const UPDATE_FILE_CONTENT = 'UPDATE_FILE_CONTENT';
 export const TOGGLE_SKETCH = 'TOGGLE_SKETCH';
-
 export const START_SKETCH = 'START_SKETCH';
 export const STOP_SKETCH = 'STOP_SKETCH';
 
@@ -53,8 +52,6 @@ export const SET_BLOB_URL = 'SET_BLOB_URL';
 export const EXPAND_SIDEBAR = 'EXPAND_SIDEBAR';
 export const COLLAPSE_SIDEBAR = 'COLLAPSE_SIDEBAR';
 
-export const CONSOLE_EVENT = 'CONSOLE_EVENT';
-export const CLEAR_CONSOLE = 'CLEAR_CONSOLE';
 export const EXPAND_CONSOLE = 'EXPAND_CONSOLE';
 export const COLLAPSE_CONSOLE = 'COLLAPSE_CONSOLE';
 
@@ -137,10 +134,10 @@ export const SET_SORT_PARAMS = 'SET_SORT_PARAMS';
 export const SET_SEARCH_TERM = 'SET_SEARCH_TERM';
 export const CLOSE_SKETCHLIST_MODAL = 'CLOSE_SKETCHLIST_MODAL';
 
-export const START_LOADING = 'START_LOADING';
-export const STOP_LOADING = 'STOP_LOADING';
-
 export const START_SAVING_PROJECT = 'START_SAVING_PROJECT';
 export const END_SAVING_PROJECT = 'END_SAVING_PROJECT';
 
 export const SET_COOKIE_CONSENT = 'SET_COOKIE_CONSENT';
+
+export const CONSOLE_EVENT = 'CONSOLE_EVENT';
+export const CLEAR_CONSOLE = 'CLEAR_CONSOLE';