Updated to current versions

.storybook/config.js

@@ -1,9 +1,10 @@
-const { configure } = require('@storybook/react')
+const { configure } = require("@storybook/react")
+const requireContext = require("require-context.macro")
 
-const req = require.context('../src', true, /story\.tsx?$/)
+const req = requireContext("../src", true, /story\.tsx?$/)
 
 function loadStories() {
-  req.keys().forEach((filename) => req(filename))
+  req.keys().forEach(filename => req(filename))
 }
 
 configure(loadStories, module)

.storybook/webpack.config.js

@@ -1,18 +1,17 @@
 const path = require("path")
-const genDefaultConfig = require("@storybook/react/dist/server/config/defaults/webpack.config.js")
 
-module.exports = (config, env) => {
-  const myConfig = genDefaultConfig(config, env)
+module.exports = async ({ config }) => {
+  //const myConfig = genDefaultConfig(config, env)
 
-  myConfig.module.rules.push({
+  config.module.rules.push({
     test: /\.tsx?$/,
     loader: "ts-loader",
     exclude: /node_modules/,
     include: [path.resolve(__dirname, "..", "src"), path.resolve(__dirname, "views")],
   })
 
-  myConfig.resolve.extensions.unshift(".tsx")
-  myConfig.resolve.extensions.unshift(".ts")
+  config.resolve.extensions.unshift(".tsx")
+  config.resolve.extensions.unshift(".ts")
 
-  return myConfig
+  return config
 }

package.json

@@ -68,60 +68,66 @@
     "typecheck": "tsc -p . --noEmit --pretty"
   },
   "dependencies": {
-    "electron-is-dev": "^0.3.0",
-    "electron-log": "^2.2.13",
-    "electron-store": "^1.3.0",
-    "electron-updater": "^2.18.2",
+    "electron-is-dev": "^1.1.0",
+    "electron-log": "^3.0.6",
+    "electron-store": "^3.2.0",
+    "electron-updater": "^4.0.6",
     "electron-window-state-manager": "^0.3.2",
     "glamor": "^2.20.40",
-    "mousetrap": "^1.6.1",
-    "popmotion": "^8.1.7",
-    "popmotion-react": "^2.1.0",
-    "prop-types": "^15.6.0",
-    "ramda": "^0.25.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-transition-group": "^2.2.1"
+    "mousetrap": "^1.6.3",
+    "popmotion": "^8.6.10",
+    "prop-types": "^15.7.2",
+    "ramda": "^0.26.1",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-pose": "^4.0.8",
+    "react-transition-group": "^4.0.1"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^3.3.3",
-    "@storybook/addon-links": "^3.3.3",
-    "@storybook/addon-storyshots": "^3.3.3",
-    "@storybook/react": "^3.3.3",
-    "@types/electron-is-dev": "^0.3.0",
-    "@types/electron-store": "^1.2.0",
-    "@types/jest": "^22.0.1",
-    "@types/mousetrap": "^1.6.0",
-    "@types/react": "^16.0.34",
-    "@types/react-dom": "^16.0.3",
-    "@types/react-test-renderer": "^16.0.0",
-    "@types/storybook__react": "^3.0.6",
+    "@babel/core": "^7.4.5",
+    "@storybook/addon-actions": "^5.0.11",
+    "@storybook/addon-links": "^5.0.11",
+    "@storybook/addon-storyshots": "^5.0.11",
+    "@storybook/react": "^5.0.11",
+    "@types/jest": "^24.0.13",
+    "@types/mousetrap": "^1.6.2",
+    "@types/node": "^12.0.3",
+    "@types/react": "^16.8.19",
+    "@types/react-dom": "^16.8.4",
+    "@types/react-test-renderer": "^16.8.1",
+    "@types/semver": "^6.0.0",
+    "@types/storybook__addon-storyshots": "^4.0.0",
+    "@types/storybook__react": "^4.0.1",
+    "babel-loader": "^8.0.6",
+    "babel-plugin-macros": "^2.5.1",
     "babel-preset-react": "^6.24.1",
-    "coveralls": "^3.0.0",
-    "electron": "^1.7.10",
-    "electron-builder": "^19.52.1",
-    "fuse-box": "^3.0.2",
-    "husky": "^0.14.3",
-    "jest": "^22.0.4",
+    "coveralls": "^3.0.3",
+    "electron": "^5.0.2",
+    "electron-builder": "^20.41.0",
+    "fuse-box": "^3.7.1",
+    "husky": "^2.3.0",
+    "jest": "^24.8.0",
     "jest-expect-contain-deep": "^1.0.1",
-    "lint-staged": "^6.0.0",
-    "npm-run-all": "^4.1.2",
-    "prettier": "^1.9.2",
-    "react-powerplug": "^0.1.2",
-    "react-test-renderer": "^16.2.0",
-    "ts-jest": "^22.0.1",
-    "ts-loader": "^3.2.0",
-    "ts-node": "^4.1.0",
-    "tslint": "^5.8.0",
-    "tslint-config-prettier": "^1.6.0",
-    "typescript": "~2.6.2"
+    "lint-staged": "^8.1.7",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^1.17.1",
+    "react-powerplug": "^1.0.0",
+    "react-test-renderer": "^16.8.6",
+    "require-context.macro": "^1.0.4",
+    "ts-jest": "^24.0.2",
+    "ts-loader": "^6.0.1",
+    "ts-node": "^8.2.0",
+    "tslint": "^5.16.0",
+    "tslint-config-prettier": "^1.18.0",
+    "typescript": "~3.5.1",
+    "webpack": "^4.32.2"
   },
   "jest": {
     "setupFiles": [
       "./test/setup.ts"
     ],
     "transform": {
-      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+      ".(ts|tsx)": "ts-jest"
     },
     "moduleNameMapper": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/test/mock-file.ts",
@@ -152,7 +158,15 @@
       }
     },
     "collectCoverage": false,
-    "mapCoverage": true
+    "globals": {
+      "ts-jest": {
+        "babelConfig": {
+          "plugins": [
+            "macros"
+          ]
+        }
+      }
+    }
   },
   "lint-staged": {
     "*.{ts,tsx}": [

src/main-window/main-window.ts

@@ -1,4 +1,4 @@
-const { app, BrowserWindow } = require("electron")
+import { app, BrowserWindow } from "electron"
 const WindowStateManager = require("electron-window-state-manager")
 import { loadURL } from "./load-url"
 
@@ -29,15 +29,16 @@ export function createMainWindow(appPath: string, showDelay: number = 100) {
     y: windowState.y,
     show: false,
     useContentSize: true,
-    titleBarStyle: "hidden-inset",
+    titleBarStyle: "hiddenInset",
     autoHideMenuBar: true,
-    // backgroundColor: '#fff',
+    backgroundColor: "#fff",
     vibrancy: "light",
-    transparent: true,
+    transparent: false,
     title: app.getName(),
     webPreferences: {
       backgroundThrottling: false,
       textAreasAreResizable: false,
+      nodeIntegration: true,
     },
   })
 

src/menu/macos-menu.ts

@@ -11,11 +11,11 @@ export function createMacMenu(
   const appMenu: Electron.MenuItemConstructorOptions = {
     label: name,
     submenu: [
-      { label: `About ${name}`, role: "orderFrontStandardAboutPanel" },
+      { label: `About ${name}`, role: "about" },
       { type: "separator" },
       { label: `Hide ${name}`, accelerator: "Command+H", role: "hide" },
-      { label: "Hide Others", accelerator: "Command+Option+H", role: "hideOtherApplications" },
-      { label: "Show All", role: "unhideAllApplications" },
+      { label: "Hide Others", accelerator: "Command+Option+H", role: "hideothers" },
+      { label: "Show All", role: "unhide" },
       { type: "separator" },
       { ...shared.quit, accelerator: "Command+Q" },
     ],

src/views/example/welcome-screen/welcome-screen.tsx

@@ -11,7 +11,7 @@ const HIDDEN = cssProps({
 })
 
 // a sample store
-const store = new Store()
+const store = new Store<SampleTabType>()
 
 interface WelcomeScreenState {
   tab: SampleTabType

src/views/shared/spin-animation/spin-animation.tsx

@@ -1,43 +1,14 @@
-import * as React from "react"
-import { MotionValue, MotionStateProps, MotionStates } from "popmotion-react"
-import { tween } from "popmotion"
-
-const DEFAULT_DURATION = 500
-const DEFAULT_REVOLUTIONS = 1
+import posed from "react-pose"
 
 export interface SpinAnimationProps {
   duration?: number
   revolutions?: number
 }
 
-/**
- * Provides a container which will do a barrel roll when clicked.
- */
-export class SpinAnimation extends React.PureComponent<SpinAnimationProps, {}> {
-  render() {
-    const duration = this.props.duration || DEFAULT_DURATION
-    const forwardAngle = 360 * (this.props.revolutions || DEFAULT_REVOLUTIONS)
-
-    // istanbul ignore next
-    const motionStates: MotionStates = {
-      on: ({ value }) => tween({ from: value.get(), to: forwardAngle, duration }).start(value),
-      off: ({ value }) => tween({ from: value.get(), to: 0, duration }).start(value),
-    }
+const SpinAnimation = posed.div({
+  pressable: true,
+  init: { rotate: 0 },
+  press: { rotate: 360 },
+})
 
-    return (
-      <MotionValue onStateChange={motionStates}>
-        {(motionState: MotionStateProps) => (
-          <div
-            style={{ transform: `rotate(${motionState.v}deg)`, cursor: "pointer" }}
-            onClick={
-              // istanbul ignore next
-              motionState.state === "on" ? motionState.setStateTo.off : motionState.setStateTo.on
-            }
-          >
-            {this.props.children}
-          </div>
-        )}
-      </MotionValue>
-    )
-  }
-}
+export { SpinAnimation }

src/views/theme/styles.ts

@@ -20,10 +20,10 @@ const flexbox = {
 
 const electron = {
   /** Enable window dragging. */
-  windowDrag: cssProps({ WebkitAppRegion: "drag" }),
+  windowDrag: cssProps({ ["WebkitAppRegion" as any]: "drag" }),
 
   /** Disable window dragging. */
-  noWindowDrag: cssProps({ WebkitAppRegion: "no-drag" }),
+  noWindowDrag: cssProps({ ["WebkitAppRegion" as any]: "no-drag" }),
 }
 
 /**

test/__snapshots__/storyshots.test.ts.snap

@@ -156,15 +156,7 @@ exports[`Storyshots Fun Dog default 1`] = `
         }
       }
     >
-      <div
-        onClick={[Function]}
-        style={
-          Object {
-            "cursor": "pointer",
-            "transform": "rotate(0deg)",
-          }
-        }
-      >
+      <div>
         <img
           data-css-10m1z31=""
           draggable={false}
@@ -290,15 +282,7 @@ exports[`Storyshots SpinAnimation default 1`] = `
         }
       }
     >
-      <div
-        onClick={[Function]}
-        style={
-          Object {
-            "cursor": "pointer",
-            "transform": "rotate(0deg)",
-          }
-        }
-      >
+      <div>
         I am going to spin.
       </div>
     </span>

test/setup.ts

@@ -1,4 +1,5 @@
 import "./mock-request-animation-frame"
+import * as React from "react"
 
 jest.mock("electron-window-state-manager", () => {
   return jest.fn().mockImplementation(() => ({
@@ -33,3 +34,21 @@ jest.mock("electron", () => {
 })
 
 jest.mock("mousetrap")
+
+const mockPoseComponent = (name: string) => () => (props: {
+  children: React.ReactChildren
+  style: ElementCSSInlineStyle,
+}) => {
+  const { style, children } = props
+  return React.createElement(name, { style }, children)
+}
+
+jest.mock("react-pose", () => {
+  const module = jest.genMockFromModule("react-pose") as any
+
+  module.default = jest.fn()
+
+  module.default.div = mockPoseComponent("div")
+
+  return module
+})

test/storyshots.test.ts

@@ -1,3 +1,3 @@
 import initStoryshots from "@storybook/addon-storyshots"
 
-initStoryshots()
+initStoryshots({})

tsconfig.json

@@ -9,10 +9,11 @@
     "noUnusedLocals": true,
     "strictNullChecks": false,
     "noImplicitReturns": true,
-    "noImplicitAny": true
+    "noImplicitAny": true,
+    "allowJs": false,
+    "resolveJsonModule": true,
+    "esModuleInterop": true
   },
   "include": ["src", "typings", "fuse.ts", "./storybook/views"],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }

tslint.json

@@ -9,6 +9,6 @@
     "trailing-comma": [true, { "singleline": "never", "multiline": "always" }],
     "no-empty": false,
     "no-duplicate-imports": false,
-    "max-classes-per-file": [false]
+    "max-classes-per-file": false
   }
 }

typings/require-context.macro.d.ts

@@ -0,0 +1 @@
+declare module "require-context.macro"