Netlify (codesandbox#1520)

* netlify start

* Rename zeit.js to Zeit.js

* update session id

* add claim

* lets try

* design changes

* fix site id

* more things

* add poll

* fix url

* re add cxjs

* add building state

* make it ts

* fix ts

* revert to js

* fix template shjowing netlify

* make workflow better for new sites

* add logs

* change url and interval

* add dots

* add beta notice

* add styleguidist

Author: SaraVieira

package.json

@@ -76,7 +76,7 @@
     "lerna": "^2.5.1",
     "lint-staged": "^5.0.0",
     "prettier": "^1.8.2",
-        "typescript": "^3.3.1"
+    "typescript": "^3.3.1"
   },
   "dependencies": {
     "opencollective": "^1.0.3"

packages/app/config/babel.prod.js

@@ -1,5 +1,3 @@
-const path = require('path');
-
 module.exports = {
   // Don't try to find .babelrc because we want to force this configuration.
   babelrc: false,

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

@@ -7,45 +7,16 @@ export const Details = styled.div`
   flex: 3;
   padding: 0.75rem 1rem;
   background-color: ${props => props.bgColor};
+  margin-top: -1px;
 `;
 
 export const Heading = styled.div`
-  color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.5)' : 'rgba(255, 255, 255, 0.5)'};
+  color: ${props => (props.light ? 'rgba(0, 0, 0)' : 'rgba(255, 255, 255)')};
   font-size: 0.75rem;
   margin-bottom: 0.25rem;
 `;
 
 export const Info = styled.div`
   font-weight: 400;
-`;
-
-export const Action = styled.div`
-  display: flex;
-  transition: 0.3s ease all;
-  border: 1px solid
-    ${props => (props.red ? 'rgba(255, 0, 0, 0.4)' : props.theme.secondary)};
-  border-radius: 4px;
-
-  justify-content: center;
-  align-items: center;
-
-  color: ${props => (props.red ? 'rgba(255, 0, 0, 0.6)' : 'white')};
-
-  background-color: ${props =>
-    props.red ? 'transparent' : props.theme.secondary};
-
-  opacity: 0.8;
-  cursor: pointer;
-
-  height: 1.5rem;
-  width: 1.5rem;
-
-  &:hover {
-    opacity: 1;
-
-    color: white;
-    background-color: ${props =>
-      props.red ? 'rgba(255, 0, 0, 0.6)' : props.theme.secondary};
-  }
+  color: ${props => (props.light ? 'rgba(0, 0, 0)' : 'rgba(255, 255, 255)')};
 `;

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

@@ -4,13 +4,13 @@ import { Button } from '@codesandbox/common/lib/components/Button';
 
 import { Details, Info } from './elements';
 
-function DetailInfo({ info, deploy, bgColor }) {
+function DetailInfo({ info, deploy, bgColor, light, loading }) {
   return (
     <Details bgColor={bgColor}>
       <Margin right={2}>
-        <Info>{info}</Info>
+        <Info light={light}>{info}</Info>
       </Margin>
-      <Button small onClick={deploy}>
+      <Button small disabled={loading} onClick={deploy}>
         Deploy
       </Button>
     </Details>

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

@@ -9,22 +9,26 @@ export const Container = styled.div`
   font-size: 0.875rem;
 
   color: ${props =>
-    props.theme.light ? '#636363' : 'rgba(255, 255, 255, 0.8)'};
+    props.light || props.theme.light ? 'rgba(0, 0, 0)' : 'rgba(255, 255, 255)'};
 
   ${props =>
     props.loading &&
     css`
       opacity: 0.5;
+      pointer-events: none;
     `};
 `;
 
 export const IntegrationBlock = styled.div`
   display: inline-flex;
   align-items: center;
+  cursor: pointer;
+  box-sizing: border-box;
   background-color: ${props => props.bgColor};
   flex: 1;
   color: white;
   padding: 0.75em 0.75em;
+  min-height: 45px;
   font-size: 1em;
   justify-content: space-between;
 
@@ -37,4 +41,5 @@ export const IntegrationBlock = styled.div`
 export const Name = styled.span`
   margin-left: 0.75em;
   font-size: 1.375em;
+  color: ${props => (props.light ? 'rgba(0, 0, 0)' : 'rgba(255, 255, 255)')};
 `;

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

@@ -1,51 +1,69 @@
 import React from 'react';
 import Down from 'react-icons/lib/fa/angle-down';
 import Up from 'react-icons/lib/fa/angle-up';
+import Notice from 'common/lib/components/Notice';
 import DetailInfo from './DetailInfo';
 import { Container, IntegrationBlock, Name } from './elements';
 
-function Integration({
+const Integration = ({
+  light,
   Icon,
   name,
   deploy,
   children,
-  color,
   loading,
+  beta,
+  color,
   open = true,
   toggle,
-}) {
-  return (
-    <Container loading={loading}>
-      <IntegrationBlock bgColor={color}>
-        <div>
-          <Icon />
-          <Name>{name}</Name>
-        </div>
-        {open ? (
-          <Up
-            css={`
-              cursor: pointer;
-              width: 1.5rem;
-              height: auto;
-            `}
-            onClick={toggle}
-          />
-        ) : (
-          <Down
+}) => (
+  <Container>
+    <IntegrationBlock bgColor={color} onClick={toggle}>
+      <div>
+        <Icon />
+        <Name light={light}>{name}</Name>
+        {beta && (
+          <Notice
             css={`
-              cursor: pointer;
-              width: 1.5rem;
-              height: auto;
+              margin-left: 0.7rem;
             `}
-            onClick={toggle}
-          />
+          >
+            Beta
+          </Notice>
         )}
-      </IntegrationBlock>
+      </div>
       {open ? (
-        <DetailInfo deploy={deploy} info={children} bgColor={color} />
-      ) : null}
-    </Container>
-  );
-}
+        <Up
+          css={`
+            fill: ${light ? '#000' : '#fff'};
+            cursor: pointer;
+            width: 1.5rem;
+            height: auto;
+          `}
+          onClick={toggle}
+        />
+      ) : (
+        <Down
+          css={`
+            fill: ${light ? '#000' : '#fff'};
+            cursor: pointer;
+            width: 1.5rem;
+            height: auto;
+          `}
+          onClick={toggle}
+        />
+      )}
+    </IntegrationBlock>
+    {open ? (
+      <DetailInfo
+        loading={loading}
+        light={light}
+        deploy={deploy}
+        info={children}
+        bgColor={color}
+      />
+    ) : null}
+  </Container>
+);
 
 export default Integration;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import IconBase from 'react-icons/IconBase';
+
+function NetlifyLogo({ className }) {
+  return (
+    <IconBase className={className} viewBox="0 0 14 14">
+      <defs>
+        <path
+          id="a"
+          d="M7 .2l6 5.9c.2.2.2.7 0 1l-6 5.8c-.2.3-.7.3-1 0L.3 7.1a.7.7 0 0 1 0-1L6.1.2c.2-.3.7-.3 1 0z"
+        />
+      </defs>
+      <use
+        fill="#00AD9F"
+        fillRule="evenodd"
+        transform="translate(.4 .4)"
+        xlinkHref="#a"
+      />
+    </IconBase>
+  );
+}
+
+export default NetlifyLogo;

packages/app/src/app/pages/Sandbox/Editor/Workspace/Git/elements.js

@@ -19,17 +19,3 @@ export const ErrorMessage = styled.div`
   margin: 1rem;
   font-size: 0.875rem;
 `;
-
-export const Notice = styled.div`
-  font-size: 0.75rem;
-  color: white;
-  padding: 0.125rem 0.2rem;
-  background-image: linear-gradient(
-    45deg,
-    ${({ theme }) => theme.secondary.darken(0.2)} 0%,
-    ${({ theme }) => theme.secondary.darken(0.1)} 100%
-  );
-  border-radius: 4px;
-  float: right;
-  margin-right: 2rem;
-`;

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

@@ -5,12 +5,13 @@ import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import GithubBadge from '@codesandbox/common/lib/components/GithubBadge';
 import { githubRepoUrl } from '@codesandbox/common/lib/utils/url-generator';
 import { Button } from '@codesandbox/common/lib/components/Button';
+import Notice from '@codesandbox/common/lib/components/Notice';
 import Input, { TextArea } from '@codesandbox/common/lib/components/Input';
 
 import TotalChanges from './TotalChanges';
 import { WorkspaceSubtitle, WorkspaceInputContainer } from '../elements';
 
-import { Container, Buttons, ErrorMessage, Notice } from './elements';
+import { Container, Buttons, ErrorMessage } from './elements';
 
 function hasWriteAccess(rights: 'none' | 'read' | 'write' | 'admin') {
   return rights === 'write' || rights === 'admin';

packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Deployment/Elements.js

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 const mapColorToState = (state, theme) => {
   const STARTING = ['DEPLOYING', 'BUILDING', 'INITIALIZING'];
@@ -13,21 +13,6 @@ const mapColorToState = (state, theme) => {
   return theme.gray;
 };
 
-export const Deploys = styled.ul`
-  list-style: none;
-  padding: 0;
-  margin-top: 1rem;
-  flex-direction: column;
-  font-size: 0.875rem;
-  margin: 0 0.25rem;
-`;
-
-export const Deploy = styled.li`
-  display: flex;
-  margin-bottom: 1.5rem;
-  flex-direction: column;
-`;
-
 export const State = styled.span`
   align-items: center;
   display: flex;
@@ -45,18 +30,35 @@ export const State = styled.span`
   }
 `;
 
+export const Deploys = styled.ul`
+  list-style: none;
+  padding: 0;
+  margin-top: 1rem;
+  flex-direction: column;
+  font-size: 0.875rem;
+  margin: 0 0.25rem;
+`;
+
+export const Deploy = styled.li`
+  display: flex;
+  margin-bottom: 1.5rem;
+  flex-direction: column;
+`;
+
 export const Name = styled.span`
   font-weight: 600;
   color: ${props =>
-    props.theme.light ? 'rgba(0, 0, 0, 0.8)' : 'rgba(255, 255, 255, 0.8)'};
+    props.theme.light || props.light
+      ? 'rgba(0, 0, 0, 0.8)'
+      : 'rgba(255, 255, 255, 0.8)'};
   font-size: 1rem;
   margin-top: 0;
   margin-bottom: 0.5rem;
   vertical-align: middle;
 
   span {
     color: ${props =>
-      props.theme.light
+      props.theme.light || props.light
         ? props.theme.background3.darken(0.5)
         : props.theme.background3.lighten(0.5)};
     font-size: 12px;
@@ -74,6 +76,21 @@ export const Link = styled.a`
   border-radius: 2px;
   font-weight: 600;
   margin-top: 0.75rem;
+  display: flex;
+  align-items: center;
+  flex-grow: 0;
+  max-width: 50%;
+
+  svg {
+    margin-right: 10px;
+  }
+
+  ${props =>
+    props.disabled &&
+    css`
+      background: ${props.theme.gray};
+      pointer-events: none;
+    `};
 
   &:disabled {
     background: ${props => props.theme.gray};
@@ -101,3 +118,13 @@ export const DeploysWrapper = styled.div`
   margin: 0.5rem 0.75rem;
   margin-top: 0;
 `;
+
+export const Wrapper = styled.div`
+  opacity: 1;
+  ${props =>
+    props.loading &&
+    css`
+      opacity: 0.5;
+      pointer-events: none;
+    `};
+`;