Update yarn, Node 16.x & deps

.gitignore

@@ -7,6 +7,9 @@ package-lock.json
 .env
 .env.local
 .npmrc
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
 
 # output directory
 build

.yarnrc

@@ -0,0 +1,5 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+yarn-path ".yarn/releases/yarn-1.22.17.cjs"

.yarnrc.yml

@@ -0,0 +1,7 @@
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+
+yarnPath: .yarn/releases/yarn-3.1.1.cjs

package.json

@@ -37,38 +37,38 @@
     "test-compile": "tsc -watch -p ./"
   },
   "dependencies": {
+    "@types/vscode": "^1.63.1",
     "chokidar": "3.5.2",
-    "dotenv": "^8.2.0",
+    "dotenv": "^8.6.0",
     "eslint": "7.32.0",
     "git-url-parse": "11.6.0",
-    "jest": "27.3.1",
+    "jest": "27.4.5",
     "node-fetch": "2.6.6",
     "semver": "7.3.5",
-    "ts-jest": "27.0.7",
-    "typescript": "4.4.4",
+    "ts-jest": "27.1.2",
+    "typescript": "4.5.4",
     "vscode-extension-telemetry": "0.1.7"
   },
   "devDependencies": {
     "@types/assert": "^1.5.6",
     "@types/events": "3.0.0",
-    "@types/jest": "27.0.3",
-    "@types/jsdom": "^16.2.13",
-    "@types/node": "16.11.9",
+    "@types/jest": "27.4.0",
+    "@types/jsdom": "^16.2.14",
+    "@types/node": "16.11.17",
     "@types/node-fetch": "2.5.12",
     "@types/semver": "^7.3.9",
-    "@typescript-eslint/eslint-plugin": "5.4.0",
-    "@typescript-eslint/parser": "5.4.0",
-    "esbuild": "0.14.0",
+    "@typescript-eslint/eslint-plugin": "5.8.1",
+    "@typescript-eslint/parser": "5.8.1",
+    "esbuild": "0.14.9",
     "eslint-config-prettier": "8.3.0",
     "eslint-config-react-app": "6.0.0",
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "2.25.3",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.27.1",
+    "eslint-plugin-react": "7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
-    "prettier": "2.5.0",
-    "vscode": "^1.1.37",
+    "prettier": "2.5.1",
     "vscode-test": "^1.6.1"
   },
   "engines": {
@@ -104,5 +104,6 @@
   },
   "preview": true,
   "publisher": "CodeRoad",
-  "icon": "coderoad_icon.png"
+  "icon": "coderoad_icon.png",
+  "packageManager": "yarn@3.1.1"
 }

src/services/storage/index.ts

@@ -37,13 +37,13 @@ class Storage<T> {
         if (!sessionFile) {
           throw new Error('No session file found')
         }
-        const data: T = JSON.parse(sessionFile)
+        const valueFromFile: T = JSON.parse(sessionFile)
 
-        if (data) {
+        if (valueFromFile) {
           // validate session
-          const keys = Object.keys(data)
+          const keys = Object.keys(valueFromFile)
           if (keys.length) {
-            return data
+            return valueFromFile
           }
         }
       } catch (err) {
@@ -54,7 +54,8 @@ class Storage<T> {
     if (value) {
       // 2. read from local storage
       try {
-        return JSON.parse(value)
+        const valueFromLocalStorage = JSON.parse(value)
+        return valueFromLocalStorage
       } catch (err) {
         console.warn(`Failed to parse session state from local storage: ${value}`)
       }

web-app/.gitignore

@@ -4,6 +4,9 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
 
 # testing
 /coverage

web-app/package.json

@@ -28,50 +28,48 @@
   "dependencies": {
     "@alifd/next": "1.22.25",
     "@emotion/babel-preset-css-prop": "10.0.27",
-    "@emotion/core": "10.0.35",
+    "@emotion/core": "10.3.1",
     "@xstate/react": "^1.6.3",
     "babel-jest": "26.6.3",
     "emotion-theming": "10.0.27",
     "js-yaml": "4.1.0",
-    "markdown-it": "12.2.0",
+    "markdown-it": "12.3.0",
     "markdown-it-emoji": "2.0.0",
     "prismjs": "1.25.0",
-    "react": "16.13.1",
+    "react": "16.14.0",
     "react-addons-css-transition-group": "15.6.2",
-    "react-dom": "16.13.1",
+    "react-dom": "16.14.0",
     "reselect": "^4.1.5",
     "use-media": "1.4.0",
-    "xstate": "^4.26.1"
+    "xstate": "^4.27.0"
   },
   "devDependencies": {
     "@babel/core": "7.14.0",
-    "@storybook/addon-actions": "6.4.0",
+    "@storybook/addon-actions": "6.4.9",
     "@storybook/addon-knobs": "6.4.0",
-    "@storybook/addon-links": "6.4.0",
-    "@storybook/addons": "6.4.0",
+    "@storybook/addon-links": "6.4.9",
+    "@storybook/addons": "6.4.9",
     "@storybook/preset-create-react-app": "3.2.0",
     "@storybook/react": "6.4.0",
     "@types/git-url-parse": "9.0.1",
-    "@types/graphql": "14.5.0",
-    "@types/highlight.js": "10.1.0",
-    "@types/jest": "26.0.23",
+    "@types/jest": "26.0.24",
     "@types/js-yaml": "4.0.5",
     "@types/markdown-it": "12.2.3",
-    "@types/node": "16.11.10",
-    "@types/prismjs": "1.16.5",
-    "@types/react": "16.9.49",
+    "@types/node": "16.11.17",
+    "@types/prismjs": "1.16.6",
+    "@types/react": "16.14.21",
     "@types/react-addons-css-transition-group": "15.0.5",
-    "@types/react-dom": "16.9.8",
-    "babel-loader": "8.2.2",
+    "@types/react-dom": "16.9.14",
+    "babel-loader": "8.2.3",
     "babel-plugin-import": "1.13.3",
     "customize-cra": "1.0.0",
     "mini-css-extract-plugin": "0.11.2",
     "node-sass": "6.0.1",
-    "prettier": "2.5.0",
-    "react-app-rewired": "2.1.8",
+    "prettier": "2.5.1",
+    "react-app-rewired": "2.1.11",
     "react-scripts": "4.0.3",
-    "sass-loader": "12.3.0",
+    "sass-loader": "12.4.0",
     "source-map-explorer": "2.5.2",
-    "typescript": "4.4.4"
+    "typescript": "4.5.4"
   }
 }

web-app/src/components/Markdown/index.tsx

@@ -1,6 +1,6 @@
 import MarkdownIt from 'markdown-it'
 import Prism from 'prismjs'
-import { css, jsx, InterpolationWithTheme } from '@emotion/core'
+import { css, jsx } from '@emotion/core'
 // @ts-ignore no types for package
 import markdownEmoji from 'markdown-it-emoji'
 import * as React from 'react'

web-app/src/containers/SelectTutorial/forms/TutorialUrl.tsx

@@ -9,7 +9,7 @@ interface Props {
   onTutorialLoad(url: string): void
 }
 
-const urlRegex = /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)\.json/
+const urlRegex = /[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)\.json/
 
 const TutorialUrl = (props: Props) => {
   const [url, setUrl] = React.useState(props.defaultUrl)

web-app/src/services/listeners/index.ts

@@ -1,8 +1,5 @@
-import ReactDOM from 'react-dom'
-
 // document listeners
-
 document.addEventListener('securitypolicyviolation', () => {
   // TODO: add error handling
-  console.log('Security warning for resource')
+  console.warn('CodeRoad security warning for resource')
 })

web-app/src/services/state/actions/command.ts

@@ -1,7 +1,7 @@
 import * as T from 'typings'
 import { assign } from 'xstate'
 
-export default {
+const commands = {
   commandStart: assign({
     processes: (context: T.MachineContext, event: T.MachineEvent): any => {
       let processes: T.ProcessEvent[] = context.processes
@@ -28,3 +28,5 @@ export default {
     },
   }),
 }
+
+export default commands

web-app/src/services/state/actions/editor.ts

@@ -3,7 +3,7 @@ import * as TT from 'typings/tutorial'
 import { assign } from 'xstate'
 import * as selectors from '../../selectors'
 
-export default (editorSend: any) => ({
+const editorActions = (editorSend: any) => ({
   startup(): void {
     editorSend({
       type: 'EDITOR_STARTUP',
@@ -161,3 +161,5 @@ export default (editorSend: any) => ({
     })
   },
 })
+
+export default editorActions

web-app/src/services/state/actions/utils/stepNext.ts

@@ -1,6 +1,5 @@
 import * as T from 'typings'
 import * as TT from 'typings/tutorial'
-import logger from '../../../../services/logger'
 
 const getStepNext = (position: T.Position, level: TT.Level): T.Action => {
   const { steps } = level

web-app/tsconfig.json

@@ -24,7 +24,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "sourceMap": true,
     "noFallthroughCasesInSwitch": true
   },