Merge branch 'develop' into accessibility

Author: raclim

README.md

@@ -38,7 +38,7 @@ Issues and Pull Requests categorized under the PATCH or MINOR Release Milestones
 
 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 December 22, 2023
+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/). 
 

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/common/IconButton.jsx

@@ -19,6 +19,7 @@ const IconButton = (props) => {
   return (
     <ButtonWrapper
       iconBefore={icon && <Icon />}
+      iconOnly
       display={Button.displays.inline}
       focusable="false"
       {...otherProps}

client/constants.js

@@ -130,8 +130,6 @@ export const CLEAR_PERSISTED_STATE = 'CLEAR_PERSISTED_STATE';
 
 export const HIDE_RUNTIME_ERROR_WARNING = 'HIDE_RUNTIME_ERROR_WARNING';
 export const SHOW_RUNTIME_ERROR_WARNING = 'SHOW_RUNTIME_ERROR_WARNING';
-export const SET_ASSETS = 'SET_ASSETS';
-export const DELETE_ASSET = 'DELETE_ASSET';
 
 export const TOGGLE_DIRECTION = 'TOGGLE_DIRECTION';
 export const SET_SORTING = 'SET_SORTING';

client/i18n.js

@@ -17,7 +17,8 @@ import {
   zhTW,
   uk,
   sv,
-  tr
+  tr,
+  enIN
 } from 'date-fns/locale';
 
 const fallbackLng = ['en-US'];
@@ -37,12 +38,13 @@ export const availableLanguages = [
   'uk-UA',
   'zh-CN',
   'zh-TW',
-  'tr'
+  'tr',
+  'ur'
 ];
 
 export function languageKeyToLabel(lang) {
   const languageMap = {
-    be: 'Bengali',
+    be: 'বাংলা',
     de: 'Deutsch',
     'en-US': 'English',
     'es-419': 'Español',
@@ -56,7 +58,8 @@ export function languageKeyToLabel(lang) {
     'uk-UA': 'Українська',
     'zh-CN': '简体中文',
     'zh-TW': '正體中文',
-    tr: 'Türkçe'
+    tr: 'Türkçe',
+    ur: 'اردو'
   };
   return languageMap[lang];
 }
@@ -77,7 +80,8 @@ export function languageKeyToDateLocale(lang) {
     'uk-UA': uk,
     'zh-CN': zhCN,
     'zh-TW': zhTW,
-    tr
+    tr,
+    ur: enIN
   };
   return languageMap[lang];
 }

client/middleware.js

@@ -0,0 +1,5 @@
+import { createListenerMiddleware } from '@reduxjs/toolkit';
+
+const listenerMiddleware = createListenerMiddleware();
+
+export default listenerMiddleware;

client/modules/App/App.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useEffect, useRef, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
-import getConfig from '../../utils/getConfig';
+import { showReduxDevTools } from '../../store';
 import DevTools from './components/DevTools';
 import { setPreviousPath } from '../IDE/actions/ide';
 import { setLanguage } from '../IDE/actions/preferences';
@@ -52,9 +52,7 @@ const App = ({ children }) => {
   return (
     <div className="app">
       <CookieConsent hide={hide} />
-      {isMounted &&
-        !window.devToolsExtension &&
-        getConfig('NODE_ENV') === 'development' && <DevTools />}
+      {isMounted && showReduxDevTools() && <DevTools />}
       {children}
     </div>
   );

client/modules/IDE/actions/assets.js

@@ -1,21 +1,22 @@
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
 import { startLoader, stopLoader } from './loader';
+import { assetsActions } from '../reducers/assets';
 
-function setAssets(assets, totalSize) {
-  return {
-    type: ActionTypes.SET_ASSETS,
-    assets,
-    totalSize
-  };
-}
+const { setAssets, deleteAsset } = assetsActions;
 
 export function getAssets() {
   return async (dispatch) => {
     dispatch(startLoader());
     try {
       const response = await apiClient.get('/S3/objects');
-      dispatch(setAssets(response.data.assets, response.data.totalSize));
+
+      const assetData = {
+        assets: response.data.assets,
+        totalSize: response.data.totalSize
+      };
+
+      dispatch(setAssets(assetData));
       dispatch(stopLoader());
     } catch (error) {
       dispatch({
@@ -26,13 +27,6 @@ export function getAssets() {
   };
 }
 
-export function deleteAsset(assetKey) {
-  return {
-    type: ActionTypes.DELETE_ASSET,
-    key: assetKey
-  };
-}
-
 export function deleteAssetRequest(assetKey) {
   return async (dispatch) => {
     try {

client/modules/IDE/actions/collections.js

@@ -6,7 +6,6 @@ import { setToastText, showToast } from './toast';
 
 const TOAST_DISPLAY_TIME_MS = 1500;
 
-// eslint-disable-next-line
 export function getCollections(username) {
   return (dispatch) => {
     dispatch(startLoader());
@@ -16,8 +15,7 @@ export function getCollections(username) {
     } else {
       url = '/collections';
     }
-    console.log(url);
-    apiClient
+    return apiClient
       .get(url)
       .then((response) => {
         dispatch({

client/modules/IDE/components/About.jsx

@@ -28,7 +28,7 @@ function About(props) {
         />
         <div className="about__content-column">
           <p className="about__version-info">
-            Web Editor: <span>v{packageData?.version}</span>
+            {t('About.WebEditor')}: <span>v{packageData?.version}</span>
           </p>
           <p className="about__version-info">
             p5.js: <span>v{p5version}</span>
@@ -44,7 +44,7 @@ function About(props) {
               aria-hidden="true"
               focusable="false"
             />
-            Home
+            {t('About.Home')}
           </a>
         </p>
         <p className="about__content-column-list">
@@ -86,7 +86,7 @@ function About(props) {
               aria-hidden="true"
               focusable="false"
             />
-            Twitter
+            {t('About.Twitter')}
           </a>
         </p>
         <p className="about__content-column-list">
@@ -100,7 +100,7 @@ function About(props) {
               aria-hidden="true"
               focusable="false"
             />
-            Instagram
+            {t('About.Instagram')}
           </a>
         </p>
       </div>
@@ -159,7 +159,7 @@ function About(props) {
               aria-hidden="true"
               focusable="false"
             />
-            Discord
+            {t('About.Discord')}
           </a>
         </p>
         <p className="about__content-column-list">