🔨 Refactor app/components to TypeScript (codesandbox#2066)

This PR refactors (nearly) everything under app/components to TypeScript, adding new types and applying coding conventions.

Here are some basic rules regarding coding conventions (to be more thoroughly documented at a later date):

- Always use Named Exports (here's some good reasons why this is a good idea: https://humanwhocodes.com/blog/2019/01/stop-using-default-exports-javascript-module/)
- Write functional components with hooks (makes it much easier to detect unused methods, among numerous other good reasons)
- Prefer arrow functions (death to `this`)
- Prefer destructuring to property accessors
- Components should always be their own file with a Capitalized name matching the component name
- Multiple file components should be in a Capitalized folder matching the component name, with an `index.ts` file handling all exports to be consumed by outside components
- Prefer `interface` over `type` for typing Props
- In general, prop interfaces should follow a IComponentNameProps naming scheme, though this is largely stylistic
- Prefer `const SomeComponent: React.FC<ISomeComponentProps> = ({ . . . }) => { }` over `const SomeComponent = ({ . . . }: ISomeComponentProps) => { }`  to avoid needing to define common React component props
- For styled components, Inline types are fine where their footprint is small, ie: 
```typescript
const SomeElement = styled.div<{ large: boolean }>` 
  ${({ large }) => css`
    /* 
    Always wrap style declarations in a single function call and don't forget to
    use "css" for syntax highlighting!
    */
  `}
`
```
- All type interface definitions should live in a `types.ts` file adjacent to the component to reduce clutter in the component definition
- If a component uses GraphQL queries/mutations, all GraphQL documents should live in their files adjacent to the component that uses them, ie: `queries.gql` and `mutations.gql` to reduce clutter in the component definition
- All styles should be applied with styled-components and all styled elements should be defined in elements.js to reduce clutter in the component definition
- Global styles should be defined using styled-components in a `GlobalStyles.ts` file adjacent to the root component that requires it
- When using props in styled components, always wrap all of the styles in a single arrow function to make it easy to destructure props all in one place and always wrap nested template literals with the `css` tagged template to enable style linting/syntax highlighting.
- Style rules should be well ordered (to be enforced by stylelint at a later date). In general this means rules should be grouped by category, starting with Position > Box Model > Fonts > Animation > Misc > pseudo-selectors. For now this is low-priority.

The general rule of thumb here is: avoid clutter and if you have to scroll a component file, it probably needs to be broken up into smaller pieces. By separating concerns into small, well-organized files, code will be easier to read and thus easier to maintain.

That should cover more than what's implemented by this PR. These rules will be applied progressively so as to make the initial code review for refactors easier (as for the most part it will just require some components to be broken up into multiple files).

Commit Log:

* 🔨 Refactor app/components: Convert files to be refactored to Typescript

Changing the file extension of all files to be refactored to `.ts/.tsx, this is to make it easier to compare before and after changes in later commits.

Each component will be refactored one at a time in it's own commit for review. The process will go as follows:

1. change extensions (this commit)
2. refactor component files as-is
3. rename files and reorganize files where necessary
4. update all import references across the app

* 🔨 Refactor app/components/Alert: Apply Coding Conventions, Make Generic

Implemented some minor changes to the Alert component to make it more general-purpose. It now has an additional prop `confirmMesage: string` that controls the confirm button text. The click handler has also been renamed to onConfirm. (Previously these were "Delete" and onDelete)

TODO: Update props on all instances of this component.

* 🔨 Refactor app/components/ConfirmLink: Apply Coding Conventions

* 📝 Add Types to app/components/DelayedAnimation

* 🔨 Refactor app/components/DeleteSandboxButton: Apply Coding Conventions

TODO: Test to verify that styles are still being applied correctly

* 🔨 Refactor app/components/DeploymentIntegration: Apply Conventions

TODO: Update renamed props on all instances of this component.

* 🔨 Refactor app/components/EditableTags: Apply Conventions

TODO: Split out GlobalStyles into separate file, import Template interface to create props interface for this component.

* 🧹 Cleanup app/components/GitHubLogo

Applied minor changes to conform with project coding style.

Perhaps we should move this icon to a separate package along with others like it? Are we even using this one or did we get it from an external library? Maybe we can just delete this altogether.

* 🔨 Refactor app/components/GitProgress: Apply Conventions

Removed unused prop noAnimation.

TODO: Maybe move GitHubLogo and OpagueLogo into this component as subcomponents? Are those two logos being used elsewhere?

* 🔨 Refactor app/components/HeaderSearchBar: Apply Conventions

Changed the search input to be a controlled component.

* 🔨 Refactor app/components/HoverMenu: Apply Conventions

@CompuIves can you explain why this component previously was applying an event listener to the root element to call handleViewClick in addition to the native React onClick prop? This may require some additional refactoring if there's something I'm misunderstanding here.

* 🔨 Refactor app/components/Integration: Apply Conventions

TODO: Update props on component instances.

* 🔨 Refactor app/components/IntegrationModal: Apply Conventions

TODO: Maybe move this to pages/common/modals? Also maybe move it's dependent sub-components if they aren't being used elsewhere?

* 🧹 Cleanup app/components/Loading

Minor changes to conform to coding style.

* 🔨 Refactor app/components/ModeIcons: Apply Conventions

May need further refactoring.

TODO: Test to see if this still works the same as before.

* 🧹 Cleanup app/components/NetlifyLogo

Minor changes to conform to coding style.

* 🧹 Cleanup app/components/NowLogo

Added props interface and applied coding style.

* 🧹 Cleanup app/components/OpaqueLogo

Added props interface and applied coding style.

* 🔨 Refactor app/components/Overlay: Apply Conventions

@CompuIves please review this, I'm not sure that this refactor will work as expected. The original implementation was a bit strange and Transition appears to not like that we were using a boolean in it's item prop.

* 🧹 Cleanup app/components/PrivacyStatus

Minor stylistic changes, added props interface.

* 🧹 Cleanup app/components/ReactIcon

Applied code style conventions.

Is this icon needed? Can we pull it from a library instead?

* 🧹 Cleanup app/components/SandboxList

Applied coding style conventions and adjusted types.

TODO: Address ignored type errors. See comments.

* 🧹 Cleanup app/components/Skeleton

Minor code style changes. Added props interface.

TODO: Shouldn't Fullscreen have height: 100vh already? Perhaps this should be added there to remove unnecessary style props.

* 🧹 Cleanup app/components/SocialInfo

Minor coding style changes. Moved repeated link attributes to element.ts

* 🔨 Refactor app/components/Stat: Apply Conventions

Reorganized and added props interface.

TODO: We probably want to add tests for the full component not just it's number formatting function.

* 🔨 Refactor app/components/SubscribeForm: Apply Conventions

Updated react-stripe-elements from ^v1.7 to ^v3.0.0

injectStripe doesn't appear to want to expose the CheckoutForm props and I'm not sure if there is a way I can work around it. Someone with better TypeScript knowledge than me will have to figure this one out.

Refactored all components to apply coding conventions. SubrscribeForm is basically unchanged, but CheckoutForm was re-written using hooks, so it needs to be tested to ensure that it still works.

* 🧹 Cleanup app/components/SubTitle

Minor coding style changes, added types.

* 🧹 Cleanup app/components/Title

Minor coding style changes, added types.

* 🧹 Cleanup app/components/TypescriptIcon

Minor coding style changes.

* 🔨 Refactor app/components/UploadProgress: Apply Conventions

Removed unused prop noAnimation.

Applied coding style conventions, added prop interfaces.

* 🧹 Cleanup app/components/ZeitLogo

Minor coding style changes.

* Update packages/app/src/app/components/DeploymentIntegration/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/components/HoverMenu/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/components/DeploymentIntegration/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/components/HoverMenu/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/components/Integration/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/components/IntegrationModal/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/components/IntegrationModal/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/components/Overlay/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/components/Overlay/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* Update packages/app/src/app/components/SandboxList/index.tsx

Co-Authored-By: Michaël De Boey <[email protected]>

* 🔧 Fix suggested change in HoverMenu

* 🚧 WIP Resolve Conversations, Fix Build Errors

* 🧹 Cleanup Types to follow Coding Conventions

* 🔧 Add missing key prop to Overlay items

* 🧹 Reorganize files, Update Import References and Props, Fix Types

* 🔧 Fix missing key error, add note to remove DOM prop error later

* 🔧 Fix DeploymentIntegration not showing DetailInfo Children

* Prevent the websocket errors to appear in console

* 📦 Add React Display Name Babel Plugin, Deduplicate Cude Component

* Convert ContextMenu to types

* Fix ContextMenu usage

* Move JSX.Element to React.ReactNode

Author: Drake Costa

packages/app/babel.config.js

@@ -18,6 +18,7 @@ module.exports = {
         'babel-plugin-system-import-transformer',
         'babel-plugin-macros',
         'babel-plugin-styled-components',
+        '@babel/plugin-transform-react-display-name',
       ],
     },
   },

packages/app/config/babel.dev.js

@@ -38,5 +38,6 @@ module.exports = {
     require.resolve('babel-plugin-styled-components'),
     require.resolve('babel-plugin-macros'),
     require.resolve('babel-plugin-graphql-tag'),
+    require.resolve('@babel/plugin-transform-react-display-name'),
   ],
 };

packages/app/config/babel.prod.js

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

packages/app/package.json

@@ -35,6 +35,7 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-async-to-generator": "^7.5.0",
+    "@babel/plugin-transform-react-display-name": "^7.2.0",
     "@babel/plugin-transform-runtime": "^7.5.5",
     "@babel/plugin-transform-template-literals": "^7.4.4",
     "@babel/polyfill": "^7.4.4",
@@ -251,7 +252,7 @@
     "react-show": "^3.0.4",
     "react-split-pane": "^0.1.87",
     "react-spring": "^8.0.25",
-    "react-stripe-elements": "^1.2.0",
+    "react-stripe-elements": "^3.0.0",
     "react-tagsinput": "^3.19.0",
     "react-use": "^9.7.2",
     "react-virtualized": "^9.19.1",

packages/app/scripts/start.js

@@ -294,6 +294,7 @@ function run(port) {
   runDevServer(port, protocol, '/app.html');
 
   if (process.env.LOCAL_SERVER) {
+    // Sandbox server
     const proxy = httpProxy.createProxyServer({});
     http
       .createServer(function(req, res) {

packages/app/src/app/components/Alert/Alert.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Button } from '@codesandbox/common/lib/components/Button';
+import { Container, Title, Text, Buttons } from './elements';
+
+interface IAlertProps {
+  title: string;
+  body: string;
+  confirmMessage?: string;
+  onCancel: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  onConfirm: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const Alert: React.FC<IAlertProps> = ({
+  title,
+  body,
+  confirmMessage = 'Confirm',
+  onCancel,
+  onConfirm,
+  ...props
+}) => (
+  <Container {...props}>
+    <Title>{title}</Title>
+    <Text>{body}</Text>
+    <Buttons>
+      <Button small block secondary onClick={onCancel}>
+        Cancel
+      </Button>
+      <Button small block danger onClick={onConfirm}>
+        {confirmMessage}
+      </Button>
+    </Buttons>
+  </Container>
+);

…app/src/app/components/Alert/elements.js …app/src/app/components/Alert/elements.tspackages/app/src/app/components/Alert/elements.js renamed to packages/app/src/app/components/Alert/elements.ts packages/app/src/app/components/Alert/elements.js renamed to packages/app/src/app/components/Alert/elements.ts

@@ -1,20 +1,22 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  background-color: ${props => props.theme.background};
-  color: rgba(255, 255, 255, 0.8);
-  padding: 1rem;
+  ${({ theme }) => css`
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    background-color: ${theme.background};
+    color: rgba(255, 255, 255, 0.8);
+  `}
 `;
 
 export const Title = styled.div`
   display: flex;
   justify-content: center;
-  font-weight: 500;
-  font-size: 1.125rem;
   margin-top: 0 !important;
   margin-bottom: 1rem;
+  font-size: 1.125rem;
+  font-weight: 500;
   text-transform: uppercase;
 `;
 
@@ -27,6 +29,7 @@ export const Buttons = styled.div`
   display: flex;
   justify-content: center;
   margin-top: 1rem;
+
   button {
     display: flex;
     justify-content: center;

packages/app/src/app/components/Alert/index.js

@@ -0,0 +1 @@
+export { Alert } from './Alert';

packages/app/src/app/components/Alert/index.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import Title from 'app/components/Title';
-import SubTitle from 'app/components/SubTitle';
-import Loadable from 'app/utils/Loadable';
+import UIIcon from 'react-icons/lib/md/dvr';
+import QuestionIcon from 'react-icons/lib/go/question';
 import getUI from '@codesandbox/common/lib/templates/configuration/ui';
 import Centered from '@codesandbox/common/lib/components/flex/Centered';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
@@ -10,14 +9,14 @@ import getDefinition from '@codesandbox/common/lib/templates';
 import { Sandbox } from '@codesandbox/common/lib/types';
 import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import UIIcon from 'react-icons/lib/md/dvr';
-import QuestionIcon from 'react-icons/lib/go/question';
-
-import { Props } from './types';
+import { Title } from 'app/components/Title';
+import { SubTitle } from 'app/components/SubTitle';
+import Loadable from 'app/utils/Loadable';
 import ImageViewer from './ImageViewer';
 import Configuration from './Configuration';
 import VSCode from './VSCode';
 import MonacoDiff from './MonacoDiff';
+import { Props } from './types';
 import { Icons, Icon } from './elements';
 
 const CodeMirror = Loadable(() =>