Merge branch 'develop' into refactor/keydown

Author: raclim

.storybook/preview.js

@@ -1,10 +1,11 @@
 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/build/css/main.css'
+import '../client/styles/storybook.css'
 
 const initialState = window.__INITIAL_STATE__;
 
@@ -13,9 +14,11 @@ const store = configureStore(initialState);
 export const decorators = [
   (Story) => (
     <Provider store={store}>
-      <ThemeProvider>
-        <Story />
-      </ThemeProvider>
+      <MemoryRouter>
+        <ThemeProvider>
+          <Story />
+        </ThemeProvider>
+      </MemoryRouter>
     </Provider>
   ),
 ]

client/styles/.gitignore

@@ -0,0 +1 @@
+storybook.css

client/styles/build/css/main.css

@@ -1,6 +1,6 @@
 {
   "name": "p5.js-web-editor",
-  "version": "2.7.1",
+  "version": "2.7.3",
   "description": "The web editor for p5.js.",
   "scripts": {
     "clean": "rimraf dist",
@@ -23,7 +23,8 @@
     "update-syntax-highlighting": "node ./server/scripts/update-syntax-highlighting.js",
     "update-p5-hinter": "node ./server/scripts/update-p5-hinter.js",
     "heroku-postbuild": "touch .env; npm run build",
-    "storybook": "storybook dev -p 6006",
+    "storybook:build:css": "node-sass client/styles/main.scss client/styles/storybook.css",
+    "storybook": "npm run storybook:build:css && storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "husky": {

package-lock.json

@@ -1,10 +1,11 @@
-import { mjml2html } from 'mjml';
+import mjml2html from 'mjml';
 
 export default (template) => {
   try {
     const output = mjml2html(template);
     return output.html;
   } catch (e) {
+    console.error(e);
     // fall through to null
   }
 

package.json

@@ -21,10 +21,9 @@ export default ({
     </mj-raw>
   </mj-head>
   <mj-body>
-    <mj-container>
       <mj-section>
         <mj-column>
-          <mj-image width="192" src="${domain}/images/p5js-square-logo.png" alt="p5.js" />
+          <mj-image width="192px" src="${domain}/images/p5js-square-logo.png" alt="p5.js" />
           <mj-divider border-color="#ed225d"></mj-divider>
         </mj-column>
       </mj-section>
@@ -71,7 +70,6 @@ export default ({
           </mj-text>
         </mj-column>
       </mj-section>
-    </mj-container>
   </mj-body>
 </mjml>
 `;

server/utils/renderMjml.js

@@ -18,10 +18,9 @@ export default ({
     </mj-raw>
   </mj-head>
   <mj-body>
-    <mj-container>
       <mj-section>
         <mj-column>
-          <mj-image width="192" src="${domain}/images/p5js-square-logo.png" alt="p5.js" />
+          <mj-image width="192px" src="${domain}/images/p5js-square-logo.png" alt="p5.js" />
           <mj-divider border-color="#ed225d"></mj-divider>
         </mj-column>
       </mj-section>
@@ -59,7 +58,6 @@ export default ({
           </mj-text>
         </mj-column>
       </mj-section>
-    </mj-container>
   </mj-body>
 </mjml>
 `;