🔨 Refactor Deployment to use hooks (#1969)

* 🔨 Refactor Deployment Workspace to use hooks

* Resolve discussions

* Fix TypeScript errors

* Move Netlify & Zeit components into it's own folder

* Extract DeployButton

* Extract SiteInfo

* Extract ViewLogsButton

* Extract Actions

* Extract Functions

* Extract DeployButton

* Extract Deploys

* Extract Actions

* Extract Alias

* Cleanup Zeit

* Reactor DeploymentIntegration

* Fix build

* Fix Netlify build

* Add observer

* Fix styling of button

* Make deployment button call without event

Author: MichaelDeBoey

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.js

@@ -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/elements.ts

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

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

@@ -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/DetailInfo/index.ts

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