Merge branch 'develop' into fileTypeIcons

Author: raclim

.env.example

@@ -19,7 +19,6 @@ MAILGUN_KEY=<your-mailgun-api-key>
 ML5_LIBRARY_USERNAME=ml5
 ML5_LIBRARY_EMAIL=[email protected]
 ML5_LIBRARY_PASS=helloml5
-MOBILE_ENABLED=true
 MONGO_URL=mongodb://localhost:27017/p5js-web-editor
 PORT=8000
 PREVIEW_PORT=8002

.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

@@ -29,22 +29,7 @@ If you have found a bug in the p5.js Web Editor, you can file it under the ["iss
 
 ### How Do I Know My Issue or Pull Request is Getting Reviewed?
 
-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: [PATCH Release](https://github.com/processing/p5.js-web-editor/milestone/9), [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: 
-
-MINOR Release for [p5.js version 1.8.0](https://github.com/processing/p5.js/releases/tag/v1.8.0): By October 27, 2023
-
-PATCH Release: By November 2, 2023
-
-MINOR Release: By November 30, 2023
-
-[You can read more about Semantic Versioning and the differences between a MINOR and PATCH release](https://semver.org/). 
+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). 
 
 
 ## References for Contributing to the p5.js Web Editor

client/common/Button.jsx

@@ -21,7 +21,8 @@ const displays = {
 const StyledButton = styled.button`
   &&& {
     font-weight: bold;
-    display: flex;
+    display: ${({ display }) =>
+      display === displays.inline ? 'inline-flex' : 'flex'};
     justify-content: center;
     align-items: center;
 
@@ -107,57 +108,6 @@ const StyledInlineButton = styled.button`
   }
 `;
 
-const StyledIconButton = styled.button`
-  &&& {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    width: ${remSize(32)}px;
-    height: ${remSize(32)}px;
-    text-decoration: none;
-
-    color: ${({ kind }) => prop(`Button.${kind}.default.foreground`)};
-    background-color: ${({ kind }) => prop(`Button.${kind}.hover.background`)};
-    cursor: pointer;
-    border: 1px solid transparent;
-    border-radius: 50%;
-    padding: ${remSize(8)} ${remSize(25)};
-    line-height: 1;
-
-    &:hover:not(:disabled) {
-      color: ${({ kind }) => prop(`Button.${kind}.hover.foreground`)};
-      background-color: ${({ kind }) =>
-        prop(`Button.${kind}.hover.background`)};
-
-      svg * {
-        fill: ${({ kind }) => prop(`Button.${kind}.hover.foreground`)};
-      }
-    }
-
-    &:active:not(:disabled) {
-      color: ${({ kind }) => prop(`Button.${kind}.active.foreground`)};
-      background-color: ${({ kind }) =>
-        prop(`Button.${kind}.active.background`)};
-
-      svg * {
-        fill: ${({ kind }) => prop(`Button.${kind}.active.foreground`)};
-      }
-    }
-
-    &:disabled {
-      color: ${({ kind }) => prop(`Button.${kind}.disabled.foreground`)};
-      background-color: ${({ kind }) =>
-        prop(`Button.${kind}.disabled.background`)};
-      cursor: not-allowed;
-    }
-
-    > * + * {
-      margin-left: ${remSize(8)};
-    }
-  }
-`;
-
 /**
  * A Button performs an primary action
  */
@@ -184,12 +134,8 @@ const Button = ({
   );
   let StyledComponent = StyledButton;
 
-  if (display === displays.inline) {
-    StyledComponent = StyledInlineButton;
-  }
-
   if (iconOnly) {
-    StyledComponent = StyledIconButton;
+    StyledComponent = StyledInlineButton;
   }
 
   if (href) {
@@ -265,7 +211,7 @@ Button.propTypes = {
   /**
    * The display type of the button—inline or block
    */
-  display: PropTypes.string,
+  display: PropTypes.oneOf(Object.values(displays)),
   /**
    * SVG icon to place after child content
    */
@@ -286,7 +232,7 @@ Button.propTypes = {
    * Specifying an href will use an <a> to link to the URL
    */
   href: PropTypes.string,
-  /*
+  /**
    * An ARIA Label used for accessibility
    */
   'aria-label': PropTypes.string,

client/components/mobile/IconButton.jsx renamed to client/common/IconButton.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import Button from '../../common/Button';
-import { remSize } from '../../theme';
+import Button from './Button';
+import { remSize } from '../theme';
 
 const ButtonWrapper = styled(Button)`
   width: ${remSize(48)};
@@ -19,6 +19,7 @@ const IconButton = (props) => {
   return (
     <ButtonWrapper
       iconBefore={icon && <Icon />}
+      iconOnly
       display={Button.displays.inline}
       focusable="false"
       {...otherProps}

client/common/RouterTab.jsx

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+/**
+ * Wraps the react-router `NavLink` with dashboard-header__tab styling.
+ */
+const Tab = ({ children, to }) => (
+  <li className="dashboard-header__tab">
+    <NavLink
+      className="dashboard-header__tab__title"
+      activeClassName="dashboard-header__tab--selected"
+      to={{ pathname: to, state: { skipSavingPath: true } }}
+    >
+      {children}
+    </NavLink>
+  </li>
+);
+
+Tab.propTypes = {
+  children: PropTypes.string.isRequired,
+  to: PropTypes.string.isRequired
+};
+
+export default Tab;

client/modules/IDE/hooks/useKeyDownHandlers.js renamed to client/common/useKeyDownHandlers.js

@@ -1,4 +1,4 @@
-import mapKeys from 'lodash/mapKeys';
+import { mapKeys } from 'lodash';
 import PropTypes from 'prop-types';
 import { useCallback, useEffect, useRef } from 'react';
 

client/common/useModalClose.js

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react';
+import useKeyDownHandlers from './useKeyDownHandlers';
+
+/**
+ * Common logic for Modal, Overlay, etc.
+ *
+ * Pass in the `onClose` handler.
+ *
+ * Can optionally pass in a ref, in case the `onClose` function needs to use the ref.
+ *
+ * Calls the provided `onClose` function on:
+ *  - Press Escape key.
+ *  - Click outside the element.
+ *
+ * Returns a ref to attach to the outermost element of the modal.
+ *
+ * @param {() => void} onClose
+ * @param {React.MutableRefObject<HTMLElement | null>} [passedRef]
+ * @return {React.MutableRefObject<HTMLElement | null>}
+ */
+export default function useModalClose(onClose, passedRef) {
+  const createdRef = useRef(null);
+  const modalRef = passedRef || createdRef;
+
+  useEffect(() => {
+    modalRef.current?.focus();
+
+    function handleClick(e) {
+      // ignore clicks on the component itself
+      if (modalRef.current && !modalRef.current.contains(e.target)) {
+        onClose?.();
+      }
+    }
+
+    document.addEventListener('click', handleClick, false);
+
+    return () => {
+      document.removeEventListener('click', handleClick, false);
+    };
+  }, [onClose, modalRef]);
+
+  useKeyDownHandlers({ escape: onClose });
+
+  return modalRef;
+}