🔨 Refactor Deployment to use hooks

packages/app/src/app/components/DeploymentIntegration/DeploymentIntegration.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { DetailInfo } from './DetailInfo';
+import {
+  Container,
+  Down,
+  IntegrationBlock,
+  Name,
+  Notice,
+  Up,
+} from './elements';
+
+export const DeploymentIntegration = ({
+  beta = false,
+  children,
+  color,
+  deploy,
+  Icon,
+  light = false,
+  loading = false,
+  name,
+  open = true,
+  toggle,
+}) => (
+  <Container>
+    <IntegrationBlock bgColor={color} onClick={toggle}>
+      <div>
+        <Icon />
+
+        <Name light={light}>{name}</Name>
+
+        {beta && <Notice>Beta</Notice>}
+      </div>
+
+      {open ? <Up light={light} /> : <Down light={light} />}
+    </IntegrationBlock>
+
+    {open ? (
+      <DetailInfo
+        bgColor={color}
+        deploy={deploy}
+        info={children}
+        light={light}
+        loading={loading}
+      />
+    ) : null}
+  </Container>
+);

packages/app/src/app/components/DeploymentIntegration/DetailInfo/DetailInfo.tsx

@@ -0,0 +1,17 @@
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import { Button } from '@codesandbox/common/lib/components/Button';
+import React from 'react';
+
+import { Details, Info } from './elements';
+
+export const DetailInfo = ({ info, deploy, bgColor, light, loading }) => (
+  <Details bgColor={bgColor}>
+    <Margin right={2}>
+      <Info light={light}>{info}</Info>
+    </Margin>
+
+    <Button small disabled={loading} onClick={() => deploy()}>
+      Deploy
+    </Button>
+  </Details>
+);

packages/app/src/app/components/DeploymentIntegration/DetailInfo/elements.ts

@@ -0,0 +1,28 @@
+import styled, { css } from 'styled-components';
+
+export const Details = styled.div<{ bgColor: string }>`
+  ${({ bgColor }) => css`
+    display: inline-flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 3;
+    padding: 0.75rem 1rem;
+    background-color: ${bgColor};
+    margin-top: -1px;
+  `}
+`;
+
+export const Heading = styled.div<{ light: boolean }>`
+  ${({ light }) => css`
+    color: ${light ? '#000000' : '#ffffff'};
+    font-size: 0.75rem;
+    margin-bottom: 0.25rem;
+  `}
+`;
+
+export const Info = styled.div<{ light: boolean }>`
+  ${({ light }) => css`
+    color: ${light ? '#000000' : '#ffffff'};
+    font-weight: 400;
+  `}
+`;

packages/app/src/app/components/DeploymentIntegration/DetailInfo/index.ts

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

packages/app/src/app/components/DeploymentIntegration/elements.ts

@@ -0,0 +1,68 @@
+import BaseNotice from '@codesandbox/common/lib/components/Notice';
+import BaseDown from 'react-icons/lib/fa/angle-down';
+import BaseUp from 'react-icons/lib/fa/angle-up';
+import styled, { css } from 'styled-components';
+
+export const Container = styled.div`
+  ${({ theme }) => css`
+    display: inline-flex;
+    border-radius: 4px;
+    overflow: hidden;
+    width: 100%;
+    flex-direction: column;
+    font-size: 0.875rem;
+
+    color: ${theme.light ? '#000000' : '#ffffff'};
+  `}
+`;
+
+export const Down = styled(BaseDown)<{ light: boolean }>`
+  ${({ light }) => css`
+    fill: ${light ? '#000000' : '#ffffff'};
+    cursor: pointer;
+    width: 1.5rem;
+    height: auto;
+  `}
+`;
+
+export const IntegrationBlock = styled.div<{ bgColor: string }>`
+  ${({ bgColor }) => css`
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    box-sizing: border-box;
+    background-color: ${bgColor};
+    flex: 1;
+    color: white;
+    padding: 0.75em 0.75em;
+    min-height: 45px;
+    font-size: 1em;
+    justify-content: space-between;
+
+    > div {
+      display: flex;
+      align-items: center;
+    }
+  `}
+`;
+
+export const Name = styled.span<{ light: boolean }>`
+  ${({ light }) => css`
+    margin-left: 0.75em;
+    font-size: 1.375em;
+    color: ${light ? '#000000' : '#ffffff'};
+  `}
+`;
+
+export const Notice = styled(BaseNotice)`
+  margin-left: 0.7rem;
+`;
+
+export const Up = styled(BaseUp)<{ light: boolean }>`
+  ${({ light }) => css`
+    fill: ${light ? '#000000' : '#ffffff'};
+    cursor: pointer;
+    width: 1.5rem;
+    height: auto;
+  `}
+`;

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

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

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

@@ -1,20 +1,25 @@
 import VERSION from '@codesandbox/common/lib/version';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
+//  Fix css prop types in styled-components (see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31245#issuecomment-463640878)
+import * as CSSProps from 'styled-components/cssprop'; // eslint-disable-line
+
 import SocialInfo from 'app/components/SocialInfo';
 import { useStore } from 'app/store';
 import getWorkspaceItems, {
   getDisabledItems,
 } from 'app/store/modules/workspace/items';
+
+import ConfigurationFiles from './items/ConfigurationFiles';
+import { Deployment } from './items/Deployment';
 import Files from './items/Files';
 import { GitHub } from './items/GitHub';
-import Server from './items/Server';
 import Live from './items/Live';
 import { More } from './items/More';
-import Deployment from './items/Deployment';
-import ConfigurationFiles from './items/ConfigurationFiles';
 import { NotOwnedSandboxInfo } from './items/NotOwnedSandboxInfo';
 import { ProjectInfo } from './items/ProjectInfo';
+import Server from './items/Server';
+
 import { Advertisement } from './Advertisement';
 import Chat from './Chat';
 import { ConnectionNotice } from './ConnectionNotice';