Merge branch 'release-2.12.0' into release

Author: raclim

.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

@@ -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 January 16, 2023
+2.12.0 MINOR Release: By February 27, 2024
 
 [You can read more about Semantic Versioning and the differences between a MINOR and PATCH release](https://semver.org/). 
 

client/constants.js

@@ -137,9 +137,6 @@ 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';
 

client/modules/App/components/ThemeProvider.jsx

@@ -1,23 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { ThemeProvider } from 'styled-components';
+import theme from '../../../theme';
 
-import theme, { Theme } from '../../../theme';
-
-const Provider = ({ children, currentTheme }) => (
-  <ThemeProvider theme={{ ...theme[currentTheme] }}>{children}</ThemeProvider>
-);
+const Provider = ({ children }) => {
+  const currentTheme = useSelector((state) => state.preferences.theme);
+  return (
+    <ThemeProvider theme={{ ...theme[currentTheme] }}>{children}</ThemeProvider>
+  );
+};
 
 Provider.propTypes = {
-  children: PropTypes.node.isRequired,
-  currentTheme: PropTypes.oneOf(Object.keys(Theme)).isRequired
+  children: PropTypes.node.isRequired
 };
 
-function mapStateToProps(state) {
-  return {
-    currentTheme: state.preferences.theme
-  };
-}
-
-export default connect(mapStateToProps)(Provider);
+export default Provider;

client/modules/IDE/actions/assets.js

@@ -1,6 +1,6 @@
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
-import { startLoader, stopLoader } from './loader';
+import { startLoader, stopLoader } from '../reducers/loading';
 import { assetsActions } from '../reducers/assets';
 
 const { setAssets, deleteAsset } = assetsActions;

client/modules/IDE/actions/collections.js

@@ -1,7 +1,7 @@
 import browserHistory from '../../../browserHistory';
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
-import { startLoader, stopLoader } from './loader';
+import { startLoader, stopLoader } from '../reducers/loading';
 import { setToastText, showToast } from './toast';
 
 const TOAST_DISPLAY_TIME_MS = 1500;
@@ -80,7 +80,7 @@ export function addToCollection(collectionId, projectId) {
 
         const collectionName = response.data.name;
 
-        dispatch(setToastText(`Added to "${collectionName}`));
+        dispatch(setToastText(`Added to "${collectionName}"`));
         dispatch(showToast(TOAST_DISPLAY_TIME_MS));
 
         return response.data;
@@ -110,7 +110,7 @@ export function removeFromCollection(collectionId, projectId) {
 
         const collectionName = response.data.name;
 
-        dispatch(setToastText(`Removed from "${collectionName}`));
+        dispatch(setToastText(`Removed from "${collectionName}"`));
         dispatch(showToast(TOAST_DISPLAY_TIME_MS));
 
         return response.data;

client/modules/IDE/actions/loader.js

@@ -1,6 +1,6 @@
 import apiClient from '../../../utils/apiClient';
 import * as ActionTypes from '../../../constants';
-import { startLoader, stopLoader } from './loader';
+import { startLoader, stopLoader } from '../reducers/loading';
 
 // eslint-disable-next-line
 export function getProjects(username) {

client/modules/IDE/actions/projects.js

@@ -5,6 +5,7 @@ import { rest } from 'msw';
 
 import * as ProjectActions from './projects';
 import * as ActionTypes from '../../../constants';
+import { startLoader, stopLoader } from '../reducers/loading';
 import {
   initialTestState,
   mockProjects
@@ -33,9 +34,9 @@ describe('projects action creator tests', () => {
     store = mockStore(initialTestState);
 
     const expectedActions = [
-      { type: ActionTypes.START_LOADING },
+      { type: startLoader.type },
       { type: ActionTypes.SET_PROJECTS, projects: mockProjects },
-      { type: ActionTypes.STOP_LOADING }
+      { type: stopLoader.type }
     ];
 
     return store

client/modules/IDE/actions/projects.unit.test.js

@@ -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">