Fix the type upgrades (codesandbox#3331)

* Fix the type upgrades

* Leave styled-components unchanged

Author: CompuIves

package.json

@@ -89,7 +89,7 @@
     "lint-staged": "^9.2.5",
     "prettier": "1.19.1",
     "pretty-quick": "^2.0.1",
-    "typescript": "3.7.2",
+    "typescript": "3.7.4",
     "username": "^5.1.0"
   },
   "husky": {

packages/app/package.json

@@ -253,7 +253,7 @@
     "@types/lodash-es": "^4.17.2",
     "@types/phoenix": "^1.4.0",
     "@types/prop-types": "^15.7.0",
-    "@types/react": "^16.8.12",
+    "@types/react": "^16.9.17",
     "@types/react-color": "^2.17.3",
     "@types/react-dom": "^16.8.3",
     "@types/react-helmet": "^5.0.11",
@@ -265,7 +265,7 @@
     "@types/semver": "6.2.0",
     "@types/socket.io-client": "^1.4.32",
     "@types/stripe-v3": "^3.1.7",
-    "@types/styled-components": "^4.1.13",
+    "@types/styled-components": "^4.4.2",
     "acorn-dynamic-import": "^4.0.0",
     "babel-jest": "^24.8.0",
     "babel-loader": "8.0.2",
@@ -331,7 +331,7 @@
     "terser": "^4.1.4",
     "terser-webpack-plugin": "^1.4.1",
     "thread-loader": "^2.1.2",
-    "typescript": "3.7.2",
+    "typescript": "3.7.4",
     "url-loader": "1.0.1",
     "webpack": "^4.36.1",
     "webpack-bundle-analyzer": "^2.13.1",

packages/app/src/app/pages/Dashboard/Sidebar/SandboxesItem/FolderEntry/index.tsx

@@ -219,11 +219,14 @@ class FolderEntry extends React.Component<Props, State> {
       });
     }
 
+    // TODO: fix the typings of this container and make sure it works with `as`
+    const UnTypedContainer = Container as any;
+
     return connectDropTarget(
       connectDragSource(
         <div>
           <ContextMenu items={menuItems}>
-            <Container
+            <UnTypedContainer
               as={onSelect ? 'div' : undefined}
               onClick={onSelect ? this.handleSelect : undefined}
               style={{
@@ -336,7 +339,7 @@ class FolderEntry extends React.Component<Props, State> {
               ) : (
                 name
               )}
-            </Container>
+            </UnTypedContainer>
           </ContextMenu>
 
           <ReactShow

packages/app/src/app/pages/Sandbox/Editor/Workspace/Chat/index.tsx

@@ -24,7 +24,7 @@ const Messages = styled.div`
 
 export const Chat: React.FC = () => {
   const [value, setValue] = useState('');
-  const [height, setHeight] = useState('');
+  const [height, setHeight] = useState<number>(null);
   const { state, actions } = useOvermind();
   const messagesRef = useRef(null);
   const scrollDown = () => {
@@ -34,7 +34,7 @@ export const Chat: React.FC = () => {
   };
   useEffect(scrollDown);
 
-  const handleKeyDown = (e: KeyboardEvent) => {
+  const handleKeyDown = (e: React.KeyboardEvent) => {
     if (e.keyCode === ENTER && !e.shiftKey) {
       e.preventDefault();
       e.stopPropagation();
@@ -47,7 +47,9 @@ export const Chat: React.FC = () => {
     }
   };
 
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
     setValue(e.target.value);
   };
 
@@ -112,17 +114,14 @@ export const Chat: React.FC = () => {
       <AutosizeTextArea
         useCacheForDOMMeasurements
         value={value}
-        // @ts-ignore
         onChange={handleChange}
         placeholder="Send a message..."
         style={{
           width: '100%',
           minHeight: height,
           marginTop: '0.5rem',
         }}
-        // @ts-ignore
         onKeyDown={handleKeyDown}
-        // @ts-ignore
         onHeightChange={setHeight}
       />
     </Container>

packages/app/src/app/pages/common/LikeHeart/index.tsx

@@ -1,5 +1,6 @@
 import { Sandbox } from '@codesandbox/common/lib/types';
 import React, { FunctionComponent, ComponentProps } from 'react';
+import { StyledComponentInnerOtherProps } from 'styled-components';
 
 import { useOvermind } from 'app/overmind';
 
@@ -17,11 +18,10 @@ type Props = {
   colorless?: boolean;
   sandbox: Sandbox;
   text?: number;
+  className?: string;
+  style?: React.CSSProperties;
 } & Partial<Pick<ComponentProps<typeof MaybeTooltip>, 'disableTooltip'>> &
-  Pick<
-    ComponentProps<typeof Container>,
-    'className' | 'highlightHover' | 'style'
-  >;
+  Pick<StyledComponentInnerOtherProps<typeof Container>, 'highlightHover'>;
 
 export const LikeHeart: FunctionComponent<Props> = ({
   className,

packages/app/src/app/pages/common/Navigation/Actions/ShowNotificationsAction.tsx

@@ -1,13 +1,15 @@
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import React, { FunctionComponent, MouseEvent } from 'react';
+import React, { FunctionComponent } from 'react';
 import BellIcon from 'react-icons/lib/md/notifications';
 
 import { useOvermind } from 'app/overmind';
 
 import { Action, UnreadIcon } from '../elements';
 
 type Props = {
-  openNotifications: (event: MouseEvent<HTMLDivElement>) => void;
+  openNotifications: (
+    event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>
+  ) => void;
 };
 export const ShowNotificationsAction: FunctionComponent<Props> = ({
   openNotifications,

packages/codesandbox-api/package.json

@@ -94,7 +94,7 @@
     "tslint-config-prettier": "^1.1.0",
     "tslint-config-standard": "^6.0.0",
     "typedoc": "^0.7.1",
-    "typescript": "3.7.2",
+    "typescript": "3.7.4",
     "uuid": "^3.3.2",
     "validate-commit-msg": "^2.12.2"
   },

packages/common/package.json

@@ -93,7 +93,7 @@
     "@types/color": "0.12.1",
     "@types/humps": "^1.1.2",
     "@types/lodash": "^4.14.123",
-    "@types/react": "^16.8.12",
+    "@types/react": "^16.9.17",
     "@types/react-icons": "^2.2.7",
     "@types/storybook__addon-actions": "^3.4.3",
     "@types/styled-components": "^4.1.13",
@@ -112,7 +112,7 @@
     "jest-styled-components": "^6.3.4",
     "jest-svg-transformer": "^1.0.0",
     "rimraf": "^2.6.3",
-    "typescript": "3.7.2",
+    "typescript": "3.7.4",
     "yarn": "^1.17.3"
   }
 }

packages/executors/package.json

@@ -29,6 +29,6 @@
     "@types/socket.io-client": "^1.4.32",
     "tsdx": "^0.6.1",
     "tslib": "^1.9.3",
-    "typescript": "3.7.2"
+    "typescript": "3.7.4"
   }
 }

packages/node-services/package.json

@@ -25,6 +25,6 @@
     "@types/node": "^11.10.5",
     "@types/resolve": "^0.0.8",
     "@types/ws": "^6.0.1",
-    "typescript": "3.7.2"
+    "typescript": "3.7.4"
   }
 }