updated support for electron

Author: da1nerd

.storybook/config.js

@@ -0,0 +1,4 @@
+module.exports = {
+    stories: ['../stories/*.js'],
+    addons: ['@storybook/preset-create-react-app']
+}

.storybook/main.js

@@ -103,9 +103,10 @@ function createWindow(windowId, options = {}) {
         REACT_DEVELOPER_TOOLS
       } = require('electron-devtools-installer');
 
-      installExtension(REACT_DEVELOPER_TOOLS).catch(e => {
-        console.error('Could not install React developer tools', e);
-      });
+      // TODO: fix this
+      // installExtension(REACT_DEVELOPER_TOOLS).catch(e => {
+      //   console.error('Could not install React developer tools', e);
+      // });
     } catch (e) {
       console.error('Could not install developer extensions', e);
     }

electron/electronWindows.js

@@ -1,6 +1,7 @@
 const fs = require('fs');
 const path = require('path');
-const {app, Menu} = require('electron');
+const {app, Menu, ipcMain} = require('electron');
+
 const {
   createWindow,
   defineWindow,
@@ -25,7 +26,8 @@ function createMainWindow() {
     center: true,
     autoHideMenuBar: true,
     webPreferences: {
-      nodeIntegration: true
+      nodeIntegration: true,
+      contextIsolation: false
     },
     title: app.getName()
   };
@@ -148,8 +150,7 @@ app.on('ready', () => {
   });
 });
 
-// receive log events from the render thread
-app.on('log-event', args => {
+ipcMain.handle('log-event', async (event, args) => {
   try {
     const logPath = path.normalize(`console.log`);
     const payload = `\n${new Date().toTimeString()} ${args.level}: ${args.args}`;

electron/index.js

@@ -5,10 +5,10 @@
   "main": "main.js",
   "homepage": "./",
   "dependencies": {
-    "@craco/craco": "^5.6.3",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-scripts": "^3.3.0"
+    "@craco/craco": "^6.1.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "^4.0.3"
   },
   "scripts": {
     "analyze": "source-map-explorer 'build/static/js/*.js'",
@@ -23,31 +23,36 @@
     "test": "craco test"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
   },
   "browserslist": [
     ">0.2%",
     "not dead",
-    "not ie <= 11",
     "not op_mini all"
   ],
+  "engines": {
+    "node": ">= 10.16"
+  },
   "devDependencies": {
-    "@babel/core": "^7.8.3",
-    "@storybook/react": "^5.3.9",
-    "@types/jest": "^24.9.1",
-    "@types/node": "^13.5.0",
-    "@types/react": "^16.9.19",
-    "@types/react-dom": "^16.9.5",
-    "babel-loader": "^8.0.6",
-    "concurrently": "^5.0.2",
-    "copyfiles": "^2.2.0",
-    "cross-env": "^7.0.0",
-    "electron": "^7.1.10",
-    "electron-devtools-installer": "^2.2.4",
-    "electron-packager": "^14.2.0",
-    "source-map-explorer": "^2.2.2",
-    "typescript": "^3.7.5",
-    "wait-on": "^4.0.0",
-    "webpack-cli": "^3.3.11"
+    "@babel/core": "^7.14.0",
+    "@storybook/preset-create-react-app": "^3.1.7",
+    "@storybook/react": "^6.2.9",
+    "@types/jest": "^26.0.23",
+    "@types/node": "^15.0.1",
+    "@types/react": "^17.0.4",
+    "@types/react-dom": "^17.0.3",
+    "concurrently": "^6.0.2",
+    "copyfiles": "^2.4.1",
+    "cross-env": "^7.0.3",
+    "electron": "^12.0.6",
+    "electron-devtools-installer": "^3.2.0",
+    "electron-packager": "^15.2.0",
+    "source-map-explorer": "^2.5.2",
+    "typescript": "^4.2.4",
+    "wait-on": "^5.3.0",
+    "webpack-cli": "^4.6.0"
   }
 }

package.json

@@ -1,4 +1,4 @@
-import {remote} from 'electron';
+import {ipcRenderer} from 'electron';
 
 /**
  * The console.log levels that will be intercepted.
@@ -55,7 +55,7 @@ export const registerLogHandler = (handler) => {
  * @returns {Function}
  */
 export const createElectronHandler = eventName => (level, ...args) => {
-  remote.app.emit(eventName, {
+  ipcRenderer.invoke(eventName, {
     level,
     args
   });

src/logger.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import {Button} from '@storybook/react/demo';
+
+/**
+ * Develop your components in isolation here using https://storybook.js.org/
+ */
+
+export const Primary = () => <Button primary><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>;