Upgrade typescript to 3.7.1-rc (codesandbox#2948)

* Upgrade typescript to 3.7.1-rc

* Fix typings

Author: CompuIves

package.json

@@ -85,9 +85,9 @@
     "husky": "^2.2.0",
     "lerna": "^3.16.4",
     "lint-staged": "^9.2.5",
-    "prettier": "1.17.0",
+    "prettier": "1.18.2",
     "pretty-quick": "^1.10.0",
-    "typescript": "3.6.3",
+    "typescript": "3.7.1-rc",
     "username": "^5.1.0"
   },
   "husky": {

packages/app/package.json

@@ -311,7 +311,7 @@
     "terser": "^4.1.4",
     "terser-webpack-plugin": "^1.4.1",
     "thread-loader": "^2.1.2",
-    "typescript": "3.6.3",
+    "typescript": "3.7.1-rc",
     "url-loader": "1.0.1",
     "webpack": "^4.36.1",
     "webpack-bundle-analyzer": "^2.13.1",

packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/NewSandboxModal/elements.ts

@@ -38,7 +38,7 @@ export const Container = styled.main<{
         height: 100%;
         overflow: hidden;
       `};
-  `}
+  `};
 `;
 
 export const TabContainer = styled.div<{
@@ -59,7 +59,7 @@ export const TabContainer = styled.div<{
         overflow: hidden;
         ${delayOutEffect(0)};
       `};
-  `}
+  `};
 `;
 
 export const InnerContainer = styled.div<{
@@ -77,7 +77,7 @@ export const InnerContainer = styled.div<{
         padding: 0;
         ${delayOutEffect(0)};
       `};
-  `}
+  `};
 `;
 
 export const Templates = styled.div`
@@ -129,38 +129,37 @@ const activeStyles = css`
   ${({ theme }) => css`
     background: ${theme.background};
     color: white;
-  `}
+  `};
 `;
 
 export const Button = styled.button<{
-  selected: boolean;
+  selected?: boolean;
 }>`
-  ${({ selected, theme }) => css`
-    position: relative;
-    padding: 1rem 2rem;
-    margin: 0;
-    border: none;
-    background: ${theme.background2};
-    color: rgba(255, 255, 255, 0.5);
-    font-family: 'Roboto', sans-serif;
-    font-size: 0.875rem;
-    font-weight: 500;
-    text-transform: uppercase;
-    transition: 0.15s ease all;
-    cursor: pointer;
-
-    ${selected &&
-      css`
-        ${activeStyles};
-      `};
+  position: relative;
+  padding: 1rem 2rem;
+  margin: 0;
+  border: none;
+  background: ${props => props.theme.background2};
+  color: rgba(255, 255, 255, 0.5);
+  font-family: 'Roboto', sans-serif;
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  transition: 0.15s ease all;
+  cursor: pointer;
 
-    &:focus {
-      color: white;
-    }
-    &:hover {
-      color: white;
-    }
-  `}
+  ${props =>
+    props.selected &&
+    css`
+      ${activeStyles};
+    `};
+
+  &:focus {
+    color: white;
+  }
+  &:hover {
+    color: white;
+  }
 `;
 
 export const Title = styled.h2`

packages/app/src/app/pages/Sandbox/Editor/Header/Buttons/Action/elements.ts

@@ -91,22 +91,22 @@ export const ActionA = styled.a<OptionProps>`
 export const ActionTooltip = styled(Tooltip)<
   OptionProps & { disabledAction?: boolean }
 >`
-  ${({ disabledAction, theme }) => css`
-    ${styles};
-    ${disabledAction &&
-      css`
-        color: ${theme.light
-          ? css`rgba(0,0,0,0.3)`
-          : css`rgba(255,255,255,0.3)`};
-        cursor: default;
+  ${styles};
 
-        &:hover {
-          color: ${theme.light
-            ? css`rgba(0,0,0,0.4)`
-            : css`rgba(255,255,255,0.4)`};
-        }
-      `};
-  `}
+  ${props =>
+    props.disabledAction &&
+    css`
+      color: ${props.theme.light
+        ? css`rgba(0,0,0,0.3)`
+        : css`rgba(255,255,255,0.3)`};
+      cursor: default;
+
+      &:hover {
+        color: ${props.theme.light
+          ? css`rgba(0,0,0,0.4)`
+          : css`rgba(255,255,255,0.4)`};
+      }
+    `};
 `;
 
 export const IconContainer = styled.div`

packages/app/src/app/pages/common/ErrorBoundary/CodeSadbox/CodeSadbox.tsx

@@ -62,8 +62,7 @@ export const CodeSadbox: React.FC<IFallbackComponentProps> = ({
               Back to Home
             </Button>
           )}
-          {/*
-              // @ts-ignore */}
+
           <Button
             small
             target="_blank"

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.6.3",
+    "typescript": "3.7.1-rc",
     "uuid": "^3.3.2",
     "validate-commit-msg": "^2.12.2"
   },

packages/common/package.json

@@ -107,7 +107,7 @@
     "jest-styled-components": "^6.3.3",
     "jest-svg-transformer": "^1.0.0",
     "rimraf": "^2.6.3",
-    "typescript": "3.6.3",
+    "typescript": "3.7.1-rc",
     "yarn": "^1.17.3"
   }
 }

packages/common/src/components/Button/index.tsx

@@ -15,6 +15,8 @@ export type Props = {
   danger?: boolean;
   secondary?: boolean;
   red?: boolean;
+  target?: string;
+  rel?: string;
 };
 
 function ButtonComponent({ style = {}, ...props }: Props) {

packages/common/src/components/Input/index.tsx

@@ -1,10 +1,12 @@
 import styled, { css } from 'styled-components';
 
-export const styles = css<{
+export interface IInputProps {
   block?: boolean;
   fullWidth?: boolean;
   error?: boolean;
-}>`
+}
+
+export const styles = css<IInputProps>`
   transition: 0.3s ease border-color;
   background-color: ${props =>
     props.theme['input.background'] || 'rgba(0, 0, 0, 0.3)'};
@@ -27,11 +29,11 @@ export const styles = css<{
   }
 `;
 
-const Input = styled.input`
+const Input = styled.input<IInputProps>`
   ${styles};
 `;
 
-export const TextArea = styled.textarea`
+export const TextArea = styled.textarea<IInputProps>`
   ${styles};
 `;
 

standalone-packages/react-sandpack/package.json

@@ -126,7 +126,7 @@
     "tslint-config-prettier": "^1.1.0",
     "tslint-config-standard": "^7.0.0",
     "typedoc": "^0.10.0",
-    "typescript": "3.6.3",
+    "typescript": "3.7.1-rc",
     "validate-commit-msg": "^2.12.2"
   },
   "peerDependencies": {