Merge branch 'master' into remove-old-sidebar

Author: siddharthkp

packages/app/src/app/components/CodeEditor/VSCode/workbench-theme.css

@@ -234,3 +234,8 @@
 .context-view.monaco-menu-container {
   font-size: 0.75rem;
 }
+
+/* Fixes https://github.com/codesandbox/codesandbox-client/issues/3882 */
+.monaco-editor .parameter-hints-widget {
+  overflow-y: scroll;
+}

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

@@ -2,7 +2,7 @@ import React from 'react';
 import CrossIcon from 'react-icons/lib/md/clear';
 import Margin from '@codesandbox/common/lib/components/spacing/Margin';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
-import { Button } from '@codesandbox/common/lib/components/Button';
+import { Button } from '@codesandbox/components';
 import { Details, Heading, Info, Action } from './elements';
 
 interface IDetailInfoProps {
@@ -31,7 +31,7 @@ export const DetailInfo: React.FC<IDetailInfoProps> = ({
         </Action>
       </Tooltip>
     ) : (
-      <Button small onClick={onSignIn}>
+      <Button style={{ width: 'auto' }} onClick={onSignIn}>
         Sign in
       </Button>
     )}

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

@@ -8,6 +8,7 @@ export const Container = styled.div<{
     display: inline-flex;
     width: 100%;
     border-radius: 4px;
+    border: 1px solid ${theme.colors.avatar.border};
     color: ${theme.light ? css`#636363` : css`rgba(255, 255, 255, 0.8)`};
     overflow: hidden;
 

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

@@ -74,6 +74,7 @@ class ModalComponent extends React.Component {
       left: 0,
       right: 0,
       margin: `0 auto ${top}vh`,
+      fontFamily: "'Inter', sans-serif",
       outline: 'none',
     },
   });

packages/app/src/app/components/SubscribeForm/CheckoutForm/elements.ts

@@ -1,12 +1,8 @@
 import styled from 'styled-components';
-import Input from '@codesandbox/common/lib/components/Input';
+import { Input } from '@codesandbox/components';
 
 export const CardContainer = styled.div`
-  padding: 0.5rem;
   margin-top: 0.25rem;
-  margin-bottom: 0.5rem;
-  border-radius: 4px;
-  background-color: rgba(0, 0, 0, 0.3);
 `;
 
 export const StripeInput = styled(Input)`
@@ -23,8 +19,3 @@ export const ErrorText = styled.div`
   color: ${props => props.theme.red};
   font-size: 0.875rem;
 `;
-
-export const Label = styled.label`
-  font-size: 0.875rem;
-  color: rgba(255, 255, 255, 0.5);
-`;

packages/app/src/app/components/SubscribeForm/CheckoutForm/index.tsx

@@ -4,10 +4,12 @@ import {
   CardElement,
   ReactStripeElements,
 } from 'react-stripe-elements';
-import { Button } from '@codesandbox/common/lib/components/Button';
+import { withTheme } from 'styled-components';
+import css from '@styled-system/css';
 import { logError } from '@codesandbox/common/lib/utils/analytics';
+import { Button, Label, Element } from '@codesandbox/components';
 
-import { CardContainer, StripeInput, ErrorText, Label } from './elements';
+import { CardContainer, StripeInput, ErrorText } from './elements';
 
 interface Props {
   name: string;
@@ -18,6 +20,7 @@ interface Props {
   stripe?: ReactStripeElements.StripeProps;
   error?: Error | string;
   hasCoupon?: boolean;
+  theme?: any;
 }
 
 interface State {
@@ -106,6 +109,7 @@ class CheckoutFormComponent extends React.PureComponent<Props, State> {
       isLoading,
       error,
       hasCoupon = false,
+      theme,
     } = this.props;
     const { errors, loading: stateLoading } = this.state;
 
@@ -115,34 +119,61 @@ class CheckoutFormComponent extends React.PureComponent<Props, State> {
 
     return (
       <form onSubmit={this.handleSubmit}>
-        <Label>Cardholder Name</Label>
+        <Label variant="muted" size={3} paddingBottom={1}>
+          Cardholder Name
+        </Label>
         {errors.name != null && <ErrorText>{errors.name}</ErrorText>}
-        <div>
+        <Element>
           <StripeInput
             value={this.state.name}
             onChange={this.setName}
             placeholder="Please enter your name"
           />
-        </div>
+        </Element>
 
-        <Label>Card</Label>
+        <Label variant="muted" size={3} paddingBottom={1}>
+          Card
+        </Label>
         {stripeError != null && <ErrorText>{stripeError}</ErrorText>}
         <CardContainer>
-          <CardElement
-            style={{ base: { color: 'white', fontWeight: '500' } }}
-          />
+          <Element
+            css={css({
+              height: '32px',
+              paddingTop: '6px',
+              width: '100%',
+              paddingX: 2,
+              fontSize: 3,
+              lineHeight: 1, // trust the height
+              fontFamily: 'Inter, sans-serif',
+              borderRadius: 'small',
+              backgroundColor: 'input.background',
+              border: '1px solid',
+              borderColor: 'input.border',
+              color: 'input.foreground',
+            })}
+          >
+            <CardElement
+              style={{
+                base: {
+                  color: theme.colors.input.foreground,
+                },
+              }}
+            />
+          </Element>
         </CardContainer>
 
         {hasCoupon && (
           <>
-            <Label>Coupon</Label>
-            <div>
+            <Label variant="muted" size={3} paddingBottom={1}>
+              Coupon
+            </Label>
+            <Element>
               <StripeInput
                 value={this.state.coupon}
                 onChange={this.setCoupon}
                 placeholder="Coupon or Discount Code"
               />
-            </div>
+            </Element>
           </>
         )}
 
@@ -157,5 +188,5 @@ class CheckoutFormComponent extends React.PureComponent<Props, State> {
     );
   }
 }
-
-export const CheckoutForm = injectStripe(CheckoutFormComponent);
+// @ts-ignore
+export const CheckoutForm = injectStripe(withTheme(CheckoutFormComponent));

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

@@ -2,8 +2,9 @@ import React from 'react';
 import { StripeProvider, Elements } from 'react-stripe-elements';
 import { STRIPE_API_KEY } from '@codesandbox/common/lib/utils/config';
 import { useScript } from 'app/hooks';
+import { Element } from '@codesandbox/components';
+import css from '@styled-system/css';
 import { CheckoutForm } from './CheckoutForm';
-import { Container } from './elements';
 
 interface ISubscribeFormProps {
   name: string;
@@ -37,7 +38,12 @@ export const SubscribeForm: React.FC<ISubscribeFormProps> = ({
 
   return (
     <>
-      <Container>
+      <Element
+        css={css({
+          width: 300,
+          borderRadius: 3,
+        })}
+      >
         <StripeProvider stripe={stripe}>
           <Elements>
             <CheckoutForm
@@ -51,7 +57,7 @@ export const SubscribeForm: React.FC<ISubscribeFormProps> = ({
             />
           </Elements>
         </StripeProvider>
-      </Container>
+      </Element>
     </>
   );
 };

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

@@ -12,6 +12,7 @@ import {
   SandboxFs,
 } from '@codesandbox/common/lib/types';
 import { getGlobal } from '@codesandbox/common/lib/utils/global';
+import delay from '@codesandbox/common/lib/utils/delay';
 import { protocolAndHost } from '@codesandbox/common/lib/utils/url-generator';
 import { getSavedCode } from 'app/overmind/utils/sandbox';
 import { json } from 'overmind';
@@ -22,6 +23,49 @@ import { appendFile, mkdir, rename, rmdir, unlink, writeFile } from './utils';
 const global = getGlobal() as Window & { BrowserFS: any };
 
 const SERVICE_URL = 'https://ata.codesandbox.io/api/v8';
+const BUCKET_URL = 'https://prod-packager-packages.codesandbox.io/v1/typings';
+
+async function callApi(url: string, method = 'GET') {
+  const response = await fetch(url, {
+    method,
+  });
+
+  if (!response.ok) {
+    const error = new Error(response.statusText || '' + response.status);
+    const message = await response.json();
+    // @ts-ignore
+    error.response = message;
+    // @ts-ignore
+    error.statusCode = response.status;
+    throw error;
+  }
+
+  return response.json();
+}
+
+async function requestPackager(url: string, retryCount = 0, method = 'GET') {
+  let retries = 0;
+
+  // eslint-disable-next-line no-constant-condition
+  while (true) {
+    try {
+      const manifest = await callApi(url, method); // eslint-disable-line no-await-in-loop
+
+      return manifest;
+    } catch (e) {
+      if (e.response && e.statusCode !== 504) {
+        throw new Error(e.response.error);
+      }
+      // 403 status code means the bundler is still bundling
+      if (retries < retryCount) {
+        retries += 1;
+        await delay(1000 * 2); // eslint-disable-line no-await-in-loop
+      } else {
+        throw e;
+      }
+    }
+  }
+}
 
 declare global {
   interface Window {
@@ -396,13 +440,18 @@ class SandboxFsSync {
 
   private async fetchDependencyTypingFiles(name: string, version: string) {
     const dependencyQuery = encodeURIComponent(`${name}@${version}`);
-    const fetchRequest = await fetch(`${SERVICE_URL}/${dependencyQuery}.json`);
 
-    if (!fetchRequest.ok) {
-      throw new Error('Fetch error');
+    try {
+      const url = `${BUCKET_URL}/${name}/${version}.json`;
+      return await requestPackager(url, 0).then(x => x.files);
+    } catch (e) {
+      // Hasn't been generated
     }
 
-    const { files } = await fetchRequest.json();
+    const { files } = await requestPackager(
+      `${SERVICE_URL}/${dependencyQuery}.json`,
+      3
+    );
 
     return files;
   }