Dependency cleanup (codesandbox#1742)

Author: CompuIves

package.json

@@ -25,7 +25,7 @@
     "add-contributor": "all-contributors add",
     "generate": "all-contributors generate",
     "precommit": "lint-staged",
-    "postinstall": "rimraf node_modules/@types packages/app/node_modules/styled-components node_modules/react-split-pane/node_modules/react* && cp -R node_modules/uglify-es node_modules/terser && yarn lerna run install-dependencies --scope vscode-textmate --scope codesandbox-browserfs --scope sse-loading-screen --stream && opencollective postinstall",
+    "postinstall": "rimraf node_modules/@types/react-native && rimraf packages/app/node_modules/styled-components node_modules/react-split-pane/node_modules/react* && cp -R node_modules/uglify-es node_modules/terser && yarn lerna run install-dependencies --scope vscode-textmate --scope codesandbox-browserfs --scope sse-loading-screen --stream && opencollective postinstall",
     "typecheck": "lerna run typecheck --scope app"
   },
   "lint-staged": {
@@ -49,18 +49,16 @@
       "packages/dynamic-pages"
     ],
     "nohoist": [
-      "**/@types",
-      "**/@types/**",
       "**/react-codemirror2",
       "**/react-codemirror2/**"
     ]
   },
   "resolutions": {
     "uglify-es": "npm:terser",
-    "react-split-pane/react-dom": "^16.8.3"
+    "react-split-pane/react-dom": "^16.8.6"
   },
   "devDependencies": {
-    "@types/react": "^16.8.6",
+    "@types/react": "^16.8.12",
     "all-contributors-cli": "^5.4.0",
     "babel-eslint": "^8.2.1",
     "eslint": "CompuIves/eslint#add/define-parser",
@@ -77,7 +75,7 @@
     "lerna": "^2.5.1",
     "lint-staged": "^5.0.0",
     "prettier": "^1.8.2",
-    "typescript": "^3.3.1"
+    "typescript": "^3.4.2"
   },
   "dependencies": {
     "opencollective": "^1.0.3"

packages/app/config/babel.dev.js

@@ -36,5 +36,6 @@ module.exports = {
     require.resolve('@babel/plugin-syntax-dynamic-import'),
     require.resolve('babel-plugin-styled-components'),
     require.resolve('babel-plugin-macros'),
+    require.resolve('babel-plugin-graphql-tag'),
   ],
 };

packages/app/config/babel.prod.js

@@ -32,6 +32,7 @@ module.exports = {
     require.resolve('@babel/plugin-syntax-dynamic-import'),
     require.resolve('babel-plugin-styled-components'),
     require.resolve('babel-plugin-macros'),
+    require.resolve('babel-plugin-graphql-tag'),
     // Optimization: hoist JSX that never changes out of render()
     // Disabled because of issues:
     // * https://github.com/facebookincubator/create-react-app/issues/525

…tree-master-examples-real-world-snap.png …tree-master-examples-real-world-snap.pngpackages/app/integration-tests/tests/__image_snapshots__/github-reactjs-redux-tree-master-examples-real-world-snap.png renamed to packages/app/integration-tests/tests/__image_snapshots__/github-reduxjs-redux-tree-master-examples-real-world-snap.png packages/app/integration-tests/tests/__image_snapshots__/github-reactjs-redux-tree-master-examples-real-world-snap.png renamed to packages/app/integration-tests/tests/__image_snapshots__/github-reduxjs-redux-tree-master-examples-real-world-snap.png

@@ -6,13 +6,13 @@ const SANDBOXES = [
   'vue',
   'svelte',
   'react-ts',
-  { id: 'github/reactjs/redux/tree/master/examples/todomvc', threshold: 0.04 },
+  { id: 'github/reduxjs/redux/tree/master/examples/todomvc', threshold: 0.04 },
   'vVoQVk78',
   'github/faceyspacey/redux-first-router-codesandbox/tree/master',
   'mZRjw05yp',
   'o29j95wx9',
   'k3q1zjjml5',
-  'github/reactjs/redux/tree/master/examples/real-world',
+  'github/reduxjs/redux/tree/master/examples/real-world',
   'github/CompuIves/codesandbox-presentation',
   'lp5rjr0z4z',
   'nOymMxyY',

…ux-tree-master-examples-todomvc-snap.png …ux-tree-master-examples-todomvc-snap.pngpackages/app/integration-tests/tests/__image_snapshots__/github-reactjs-redux-tree-master-examples-todomvc-snap.png renamed to packages/app/integration-tests/tests/__image_snapshots__/github-reduxjs-redux-tree-master-examples-todomvc-snap.png packages/app/integration-tests/tests/__image_snapshots__/github-reactjs-redux-tree-master-examples-todomvc-snap.png renamed to packages/app/integration-tests/tests/__image_snapshots__/github-reduxjs-redux-tree-master-examples-todomvc-snap.png

@@ -35,7 +35,6 @@
     "@babel/plugin-transform-runtime": "^7.1.0",
     "@babel/plugin-transform-template-literals": "^7.0.0",
     "@babel/polyfill": "^7.0.0",
-    "@babel/preset-env": "^7.1.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/preset-typescript": "^7.1.0",
@@ -44,17 +43,19 @@
     "@types/gsap": "^1.20.1",
     "@types/jest": "^24.0.11",
     "@types/lodash-es": "^4.17.2",
-    "@types/react": "^16.8.3",
-    "@types/react-dom": "^16.0.11",
+    "@types/prop-types": "^15.7.0",
+    "@types/react": "^16.8.12",
+    "@types/react-dom": "^16.8.3",
     "@types/react-icons": "2.2.7",
     "@types/resolve": "^0.0.8",
     "@types/socket.io-client": "^1.4.32",
-    "@types/styled-components": "^4.1.6",
+    "@types/styled-components": "^4.1.13",
     "autoprefixer": "8.5.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-jest": "^23.6.0",
     "babel-loader": "8.0.2",
     "babel-plugin-codegen": "^1.2.0",
+    "babel-plugin-graphql-tag": "^2.1.0",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-styled-components": "^1.9.4",
     "babel-plugin-syntax-dynamic-import": "^6.18.0",
@@ -111,7 +112,7 @@
     "style-loader": "^0.21.0",
     "sw-precache-webpack-plugin": "^0.11.5",
     "terser": "^3.8.0",
-    "typescript": "^3.3.1",
+    "typescript": "^3.4.2",
     "uglifyjs-webpack-plugin": "^1.2.5",
     "url-loader": "1.0.1",
     "webpack": "^4.10.2",
@@ -134,7 +135,7 @@
     "@svgr/core": "^2.4.1",
     "@vue/babel-preset-app": "^3.2.0",
     "airtable": "^0.5.8",
-    "apollo-boost": "^0.1.7",
+    "apollo-boost": "^0.3.1",
     "apollo-link-batch-http": "^1.2.2",
     "apollo-link-context": "^1.0.8",
     "axios": "^0.16.2",
@@ -178,8 +179,8 @@
     "fuse.js": "^3.2.1",
     "geniejs": "^0.5.1",
     "glamor": "^2.20.25",
-    "graphql": "^0.11.7",
-    "graphql-tag": "^2.9.2",
+    "graphql": "^14.1.1",
+    "graphql-tag": "^2.10.1",
     "gsap": "^1.20.3",
     "gulp": "^3.9.1",
     "gulp-filter": "^5.0.0",
@@ -222,13 +223,13 @@
     "qs": "^6.5.0",
     "querystring": "^0.2.0",
     "rc-slider": "^8.2.0",
-    "react": "^16.8.3",
+    "react": "^16.8.6",
     "react-addons-css-transition-group": "^15.6.0",
-    "react-apollo": "^2.1.4",
+    "react-apollo": "^2.5.4",
     "react-day-picker": "^7.2.4",
     "react-dnd": "^7.0.2",
     "react-dnd-html5-backend": "^2.4.1",
-    "react-dom": "^16.8.3",
+    "react-dom": "^16.8.6",
     "react-draggable": "^3.0.5",
     "react-error-overlay": "^1.0.10",
     "react-icons": "^2.2.7",
@@ -251,7 +252,7 @@
     "shortid": "^2.2.8",
     "store": "^2.0.12",
     "string-replace-loader": "^2.1.1",
-    "styled-components": "^4.1.2",
+    "styled-components": "^4.2.0",
     "subworkers": "^1.0.1",
     "svg-react-loader": "^0.4.4",
     "tern": "^0.21.0",

packages/app/integration-tests/tests/sandboxes.test.js

@@ -17,7 +17,9 @@ export const Container = styled.div`
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
 `;
 
-export const StyledContextMenu = styled(ContextMenu)`
+export const StyledContextMenu = styled(ContextMenu)<{
+  isDraggingItem: boolean;
+}>`
   padding-right: ${PADDING}px;
   box-sizing: border-box;
   opacity: ${({ isDraggingItem }) => (isDraggingItem ? 0 : 1)};

packages/app/package.json

@@ -12,7 +12,7 @@ import Unlisted from 'react-icons/lib/md/insert-link';
 import Private from 'react-icons/lib/md/lock';
 
 import Input from '@codesandbox/common/lib/components/Input';
-import getTemplate from '@codesandbox/common/lib/templates';
+import getTemplate, { TemplateType } from '@codesandbox/common/lib/templates';
 import theme from '@codesandbox/common/lib/theme';
 import track from '@codesandbox/common/lib/utils/analytics';
 
@@ -33,27 +33,47 @@ import {
 } from './elements';
 
 type Props = {
-  id: string,
-  title: string,
-  details: string,
-  selected: boolean,
-  setSandboxesSelected: (ids: string[], additive?: boolean) => void,
-  deleteSandboxes: () => void,
-  permanentlyDeleteSandboxes: () => void,
-  collectionPath: string, // eslint-disable-line react/no-unused-prop-types
-  collectionTeamId: ?string,
-  sandbox: Object,
-  page: ?string,
-  privacy: number,
-  isPatron: boolean,
-  setSandboxesPrivacy: () => void,
-  undeleteSandboxes: () => void,
+  id: string;
+  title: string;
+  details: string;
+  selected: boolean;
+  template: TemplateType;
+  screenshotUrl: string | undefined;
+  setSandboxesSelected: (
+    ids: string[],
+    options?: { additive?: boolean; range?: boolean }
+  ) => void;
+  selectedCount: number;
+  deleteSandboxes: () => void;
+  permanentlyDeleteSandboxes: () => void;
+  collectionPath: string; // eslint-disable-line react/no-unused-prop-types
+  collectionTeamId: string | undefined;
+  sandbox: Object;
+  page: string | undefined;
+  privacy: number;
+  isPatron: boolean;
+  setSandboxesPrivacy: (privacy: 0 | 1 | 2) => void;
+  isScrolling: () => boolean;
+  undeleteSandboxes: () => void;
+  removedAt?: number;
+  style?: React.CSSProperties;
+
+  // React-DnD, lazy typings
+  connectDragSource: any;
+  isDraggingItem: any;
+  connectDragPreview: any;
 };
 
-class SandboxItem extends React.PureComponent<Props> {
+type State = {
+  renamingSandbox: boolean;
+  screenshotUrl: string | undefined;
+};
+
+class SandboxItem extends React.PureComponent<Props, State> {
   el: HTMLDivElement;
+  screenshotTimeout: number;
 
-  state = {
+  state: State = {
     renamingSandbox: false,
     screenshotUrl: this.props.screenshotUrl,
   };
@@ -85,7 +105,7 @@ class SandboxItem extends React.PureComponent<Props> {
   checkScreenshot() {
     if (!this.state.screenshotUrl && this.hasScreenshot()) {
       // We only request the screenshot if the sandbox card is in view for > 1 second
-      this.screenshotTimeout = setTimeout(() => {
+      this.screenshotTimeout = window.setTimeout(() => {
         this.requestScreenshot();
       }, 1000);
     }
@@ -275,21 +295,19 @@ class SandboxItem extends React.PureComponent<Props> {
     ].filter(Boolean);
   };
 
-  selectSandbox = e => {
+  selectSandbox = (e: React.MouseEvent | React.FocusEvent) => {
     this.props.setSandboxesSelected([this.props.id], {
-      additive: e.metaKey,
-      range: e.shiftKey,
+      additive: 'metaKey' in e ? e.metaKey : false,
+      range: 'shiftKey' in e ? e.shiftKey : false,
     });
   };
 
-  openSandbox = (e, openNewWindow = false) => {
-    // check for cmd click
-    const cmd = e.ctrlKey || e.metaKey;
-    // Git sandboxes aren't shown here anyway
+  openSandbox = (openNewWindow = false) => {
+    // @ts-ignore Git sandboxes aren't shown here anyway
     const url = sandboxUrl({ id: this.props.id });
 
     if (!this.props.removedAt) {
-      if (openNewWindow === true || cmd) {
+      if (openNewWindow === true) {
         track('Dashboard - Sandbox Opened in a new tab');
         window.open(url, '_blank');
       } else {
@@ -300,36 +318,36 @@ class SandboxItem extends React.PureComponent<Props> {
     return true;
   };
 
-  handleMouseDown = e => {
+  handleMouseDown = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     e.stopPropagation();
 
     if (!this.props.selected || e.metaKey) {
       this.selectSandbox(e);
     }
   };
 
-  handleKeyDown = (e: KeyboardEvent) => {
+  handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.keyCode === ENTER) {
       track('Dashboard - Sandbox Opened With Enter');
       // enter
       this.openSandbox();
     }
   };
 
-  handleOnContextMenu = e => {
+  handleOnContextMenu = (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
     track('Dashboard - Sandbox Context Menu Opened');
     if (!this.props.selected) {
       this.selectSandbox(e);
     }
   };
 
-  handleOnFocus = e => {
+  handleOnFocus = (e: React.FocusEvent) => {
     if (!this.props.selected) {
       this.selectSandbox(e);
     }
   };
 
-  handleOnBlur = (e: MouseEvent) => {
+  handleOnBlur = (e: React.FocusEvent) => {
     if (this.props.selected && e.bubbles) {
       this.props.setSandboxesSelected([]);
     }
@@ -387,8 +405,8 @@ class SandboxItem extends React.PureComponent<Props> {
       details,
       template,
       connectDragSource,
-      selected,
       isDraggingItem,
+      selected,
     } = this.props;
 
     const { screenshotUrl } = this.state;
@@ -420,7 +438,12 @@ class SandboxItem extends React.PureComponent<Props> {
                   onContextMenu(e);
                   this.handleOnContextMenu(e);
                 }}
-                onDoubleClick={this.openSandbox}
+                onDoubleClick={event => {
+                  // check for cmd click
+                  const cmd = event.ctrlKey || event.metaKey;
+
+                  this.openSandbox(!!cmd);
+                }}
                 onBlur={this.handleOnBlur}
                 onFocus={this.handleOnFocus}
                 onKeyDown={this.handleKeyDown}
@@ -505,7 +528,6 @@ class SandboxItem extends React.PureComponent<Props> {
                                 onBlur={saveName}
                                 block
                                 defaultValue={title}
-                                small
                               />
                             );
                           }}