Merge develop

Author: catarak

.env.example

@@ -10,20 +10,24 @@ EXAMPLE_USER_PASSWORD=hellop5js
 GG_EXAMPLES_USERNAME=generativedesign
 GG_EXAMPLES_EMAIL=benedikt.gross@generative-gestaltung.de
 GG_EXAMPLES_PASS=generativedesign
-ML5_LIBRARY_USERNAME=ml5
-ML5_LIBRARY_EMAIL=examples@ml5js.org
-ML5_LIBRARY_PASS=helloml5
 GITHUB_ID=<your-github-client-id>
 GITHUB_SECRET=<your-github-client-secret>
 GOOGLE_ID=<your-google-client-id> (use google+ api)
 GOOGLE_SECRET=<your-google-client-secret> (use google+ api)
 MAILGUN_DOMAIN=<your-mailgun-domain>
 MAILGUN_KEY=<your-mailgun-api-key>
+ML5_LIBRARY_USERNAME=ml5
+ML5_LIBRARY_EMAIL=examples@ml5js.org
+ML5_LIBRARY_PASS=helloml5
+MOBILE_ENABLED=true
 MONGO_URL=mongodb://localhost:27017/p5js-web-editor
 PORT=8000
+PREVIEW_PORT=8002
+EDITOR_URL=http://localhost:8000
+PREVIEW_URL=http://localhost:8002
 S3_BUCKET=<your-s3-bucket>
 S3_BUCKET_URL_BASE=<alt-for-s3-url>
 SESSION_SECRET=whatever_you_want_this_to_be_it_only_matters_for_production
+TRANSLATIONS_ENABLED=true
 UI_ACCESS_TOKEN_ENABLED=false
 UPLOAD_LIMIT=250000000
-MOBILE_ENABLED=true

.github/workflows/deploy.yml

@@ -20,6 +20,8 @@ jobs:
     steps:
       - name: Check out the repo
         uses: actions/checkout@v2
+        with:
+          ref: release
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v1
       - name: Login to Docker Hub

.prettierrc

@@ -14,5 +14,6 @@
   "tabWidth": 2,
   "trailingComma": "none",
   "useTabs": false,
-  "quoteProps": "as-needed"
+  "quoteProps": "as-needed",
+  "endOfLine":"auto"
 }

client/__test__/mocks/fileMock.js renamed to client/__mocks__/fileMock.js

@@ -0,0 +1,28 @@
+import { enUS, es, ja, hi } from 'date-fns/locale';
+import i18n from '../i18n-test';
+
+export function languageKeyToLabel(lang) {
+  const languageMap = {
+    'en-US': 'English',
+    'es-419': 'Español',
+    ja: '日本語',
+    hi: 'हिन्दी'
+  };
+  return languageMap[lang];
+}
+
+export function languageKeyToDateLocale(lang) {
+  const languageMap = {
+    'en-US': enUS,
+    'es-419': es,
+    ja,
+    hi
+  };
+  return languageMap[lang];
+}
+
+export function currentDateLocale() {
+  return languageKeyToDateLocale(i18n.language);
+}
+
+export default i18n;

client/__mocks__/i18n.js

@@ -0,0 +1 @@
+module.exports = {};

client/__mocks__/styleMock.js

@@ -617,6 +617,16 @@ class Nav extends React.PureComponent {
             />
           </button>
           <ul className="nav__dropdown">
+            <li className="nav__dropdown-item">
+              <button
+                onFocus={this.handleFocusForLang}
+                onBlur={this.handleBlur}
+                value="de"
+                onClick={(e) => this.handleLangSelection(e)}
+              >
+                Deutsch
+              </button>
+            </li>
             <li className="nav__dropdown-item">
               <button
                 onFocus={this.handleFocusForLang}
@@ -647,6 +657,16 @@ class Nav extends React.PureComponent {
                 Français
               </button>
             </li>
+            <li className="nav__dropdown-item">
+              <button
+                onFocus={this.handleFocusForLang}
+                onBlur={this.handleBlur}
+                value="hi"
+                onClick={(e) => this.handleLangSelection(e)}
+              >
+                हिन्दी
+              </button>
+            </li>
             <li className="nav__dropdown-item">
               <button
                 onFocus={this.handleFocusForLang}
@@ -661,10 +681,10 @@ class Nav extends React.PureComponent {
               <button
                 onFocus={this.handleFocusForLang}
                 onBlur={this.handleBlur}
-                value="hi"
+                value="pt-BR"
                 onClick={(e) => this.handleLangSelection(e)}
               >
-                हिन्दी
+                Português
               </button>
             </li>
           </ul>
@@ -877,8 +897,6 @@ Nav.propTypes = {
   cmController: PropTypes.shape({
     tidyCode: PropTypes.func,
     showFind: PropTypes.func,
-    findNext: PropTypes.func,
-    findPrev: PropTypes.func,
     showReplace: PropTypes.func,
     getContent: PropTypes.func
   }),

client/components/Nav.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import { NavComponent } from '../Nav';
+import { NavComponent } from './Nav';
+
+jest.mock('../i18n');
 
 describe('Nav', () => {
   const props = {

client/components/__test__/Nav.test.jsx renamed to client/components/Nav.unit.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { useModalBehavior } from '../utils/custom-hooks';
+import { useModalBehavior } from '../modules/IDE/hooks/custom-hooks';
 
 const BackgroundOverlay = styled.div`
   position: fixed;

client/components/__test__/__snapshots__/Nav.test.jsx.snap renamed to client/components/__snapshots__/Nav.unit.test.jsx.snap

@@ -1,29 +1,41 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import Backend from 'i18next-http-backend';
-import { enUS, es, ja, hi, frCA } from 'date-fns/locale';
+import { enUS, es, ja, hi, ptBR, de, frCA } from 'date-fns/locale';
 
 const fallbackLng = ['en-US'];
-const availableLanguages = ['en-US', 'es-419', 'ja', 'hi', 'fr-CA'];
+const availableLanguages = [
+  'de',
+  'en-US',
+  'es-419',
+  'fr-CA',
+  'hi',
+  'ja',
+  'pt-BR'
+];
 
 export function languageKeyToLabel(lang) {
   const languageMap = {
+    de: 'Deutsch',
     'en-US': 'English',
     'es-419': 'Español',
-    ja: '日本語',
+    'fr-CA': 'Français',
     hi: 'हिन्दी',
-    'fr-CA': 'Français'
+    ja: '日本語',
+    'pt-BR': 'Português'
   };
   return languageMap[lang];
 }
 
 export function languageKeyToDateLocale(lang) {
   const languageMap = {
+    de,
     'en-US': enUS,
     'es-419': es,
-    ja,
+    'fr-CA': frCA,
     hi,
-    'fr-CA': frCA
+    ja,
+    'pt-BR': ptBR
   };
   return languageMap[lang];
 }