Fix TypeScript errors

Author: MichaelDeBoey

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

@@ -10,7 +10,7 @@ import {
 } from './elements';
 
 type Props = {
-  children: React.ReactChildren;
+  children: React.ReactNode;
   title: string;
   keepState?: boolean;
   disabled?: boolean;

packages/app/src/app/pages/Sandbox/Editor/Workspace/index.js

@@ -1,10 +1,11 @@
-import * as React from 'react';
-import { inject, observer } from 'mobx-react';
-
 import VERSION from '@codesandbox/common/lib/version';
+import { inject, observer } from 'mobx-react';
+import * as React from 'react';
+//  Fix css prop types in styled-components (see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-463640878)
+import {} from 'styled-components/cssprop';
 
-import getWorkspaceItems from 'app/store/modules/workspace/items';
 import SocialInfo from 'app/components/SocialInfo';
+import getWorkspaceItems from 'app/store/modules/workspace/items';
 
 import Files from './items/Files';
 import ProjectInfo from './items/ProjectInfo';

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/GitHub/CreateRepo/CreateRepo.tsx

@@ -13,7 +13,7 @@ import { useSignals, useStore } from 'app/store';
 import { Error } from './elements';
 
 type Props = {
-  style: React.CSSProperties;
+  style?: React.CSSProperties;
 };
 export const CreateRepo = observer(({ style }: Props) => {
   const {

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/GitHub/Git/Git.tsx

@@ -47,7 +47,7 @@ export const Git = observer(() => {
   }: React.ChangeEvent<HTMLInputElement>) => subjectChanged({ subject: value });
   const changeDescription = ({
     target: { value },
-  }: React.ChangeEvent<HTMLInputElement>) =>
+  }: React.ChangeEvent<HTMLTextAreaElement>) =>
     descriptionChanged({ description: value });
 
   const modulesNotSaved = !isAllModulesSynced;

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/GitHub/GitHub.tsx

@@ -38,7 +38,12 @@ export const GitHub = observer(() => {
     )
   ) : (
     <>
-      <Description margin={1} top={0}>
+      <Description
+        css={`
+          margin: 1;
+          top: 0;
+        `}
+      >
         You can create commits and open pull requests if you add GitHub to your
         integrations.
       </Description>

packages/app/src/app/pages/common/GithubIntegration/index.js

@@ -1,22 +1,36 @@
+import { observer } from 'mobx-react-lite';
 import React from 'react';
-import { inject, observer } from 'mobx-react';
 import GithubLogo from 'react-icons/lib/go/mark-github';
+
 import Integration from 'app/components/Integration';
+import { useSignals, useStore } from 'app/store';
+
+type Props = {
+  small?: boolean,
+};
+
+const GithubIntegration = ({ small }: Props) => {
+  const { signInGithubClicked, signOutGithubIntegration } = useSignals();
+  const {
+    isLoadingGithub,
+    signOutGithubIntegration: {
+      integrations: { github },
+    },
+  } = useStore();
 
-function GithubIntegration({ store, signals, small }) {
   return (
     <Integration
-      name="GitHub"
       color="#4078c0"
       description={small ? 'Commits & PRs' : 'Committing & Pull Requests'}
       Icon={GithubLogo}
+      loading={isLoadingGithub}
+      name="GitHub"
+      signIn={() => signInGithubClicked({ useExtraScopes: true })}
+      signOut={signOutGithubIntegration}
       small={small}
-      userInfo={store.user.integrations.github}
-      signOut={() => signals.signOutGithubIntegration()}
-      signIn={() => signals.signInGithubClicked({ useExtraScopes: true })}
-      loading={store.isLoadingGithub}
+      userInfo={github}
     />
   );
-}
+};
 
-export default inject('store', 'signals')(observer(GithubIntegration));
+export default observer(GithubIntegration);