Add an import from GitHub page (codesandbox#33)

* Add an import from GitHub page

* Update Button snapshots

Author: CompuIves

src/app/components/Input.js

@@ -5,8 +5,9 @@ export default styled.input`
   border: none;
   outline: none;
   border-radius: 4px;
-  border: 1px solid rgba(0,0,0,.1);
+  border: 1px solid rgba(0, 0, 0, .1);
   color: white;
-  padding: 2px 0;
+  padding: 0.25em;
   width: inherit;
+  box-sizing: border-box;
 `;

src/app/components/buttons/Button.js

@@ -39,6 +39,7 @@ const styles = css`
 
   border-radius: 4px;
 
+  box-sizing: border-box;
   font-size: 1.125rem;
   text-align: center;
   color: ${props => getColor(props)};
@@ -80,8 +81,8 @@ const styles = css`
   }`}
 `;
 const LinkButton = styled(Link)`${styles}`;
-const AButton = styled.a`${styles}`;
-const Button = styled.button`${styles}`;
+const AButton = styled.a`${styles};`;
+const Button = styled.button`${styles};`;
 
 type Props = {
   [key: any]: any,

src/app/components/buttons/__snapshots__/Button.test.js.snap

@@ -2,15 +2,15 @@
 
 exports[`Button renders 1`] = `
 <button
-  className="sc-htpNat hUeRGA"
+  className="sc-htpNat iGlKTD"
 >
   Test
 </button>
 `;
 
 exports[`Button renders disabled 1`] = `
 <button
-  className="sc-htpNat izIXMc"
+  className="sc-htpNat fTFVBb"
   disabled={true}
 >
   Test
@@ -19,7 +19,7 @@ exports[`Button renders disabled 1`] = `
 
 exports[`Button renders href 1`] = `
 <a
-  className="sc-bwzfXH cMAwix"
+  className="sc-bwzfXH eBmlcd"
   href="https://ivesvh.com"
 >
   Test
@@ -28,7 +28,7 @@ exports[`Button renders href 1`] = `
 
 exports[`Button renders onClick 1`] = `
 <button
-  className="sc-htpNat hUeRGA"
+  className="sc-htpNat iGlKTD"
   onClick={[Function]}
 >
   Test
@@ -37,15 +37,15 @@ exports[`Button renders onClick 1`] = `
 
 exports[`Button renders properties 1`] = `
 <button
-  className="sc-htpNat kgEmQI"
+  className="sc-htpNat dpXcLN"
 >
   Test
 </button>
 `;
 
 exports[`Button renders to 1`] = `
 <a
-  className="sc-bdVaJa kfQsdG"
+  className="sc-bdVaJa gUBIAT"
   href="https://ivesvh.com"
   onClick={[Function]}
 >

src/app/pages/GitHub/index.js

@@ -0,0 +1,119 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+
+import Navigation from 'app/containers/Navigation';
+import Centered from 'app/components/flex/Centered';
+import Title from 'app/components/text/Title';
+import SubTitle from 'app/components/text/SubTitle';
+import Input from 'app/components/Input';
+import Button from 'app/components/buttons/Button';
+import { gitHubToSandboxUrl, protocolAndHost } from 'app/utils/url-generator';
+
+const Container = styled.div`
+  height: 100%;
+  width: 100%;
+  margin: 1rem;
+`;
+
+const Content = styled(Centered)`
+  max-width: 50em;
+  margin: auto;
+  margin-top: 10%;
+`;
+
+const Label = styled.label`
+  text-align: left;
+  width: 100%;
+  margin-bottom: 0.25rem;
+  color: rgba(255, 255, 255, 0.3);
+`;
+
+const Description = styled.div`margin-bottom: 1rem;`;
+
+const StyledInput = styled(Input)`
+  font-size: 1.25rem;
+  margin-bottom: 2rem;
+`;
+
+const ErrorMessage = styled.div`
+  color: ${props => props.theme.red};
+  margin-bottom: 2rem;
+`;
+
+type State = {
+  url: string,
+  error: ?string,
+  transformedUrl: string,
+};
+
+const getFullGitHubUrl = url =>
+  `${protocolAndHost()}${gitHubToSandboxUrl(url)}`;
+
+export default class GitHub extends React.PureComponent {
+  state: State = {
+    url: 'https://github.com/reactjs/redux/tree/master/examples/counter',
+    error: null,
+    transformedUrl: getFullGitHubUrl(
+      'https://github.com/reactjs/redux/tree/master/examples/counter',
+    ),
+  };
+
+  updateUrl = e => {
+    const url = e.target.value;
+
+    if (!url.includes('github.com')) {
+      this.setState({
+        url,
+        error: "The URL should contain from 'github.com'.",
+      });
+    } else {
+      this.setState({
+        url: e.target.value,
+        transformedUrl: getFullGitHubUrl(url),
+        error: null,
+      });
+    }
+  };
+
+  render() {
+    const { url, transformedUrl, error } = this.state;
+    return (
+      <Container>
+        <Navigation title="GitHub Import" />
+
+        <Content vertical horizontal>
+          <Description>
+            <Title>Import from GitHub</Title>
+            <SubTitle>
+              Enter the URL to your GitHub repository to generate a URL to your
+              sandbox. The sandbox will stay in sync with your repository.
+            </SubTitle>
+          </Description>
+
+          <Label htmlFor="githuburl">GitHub URL</Label>
+
+          <StyledInput
+            name="githuburl"
+            value={url}
+            onChange={this.updateUrl}
+            placeholder="GitHub URL (can contain branch and path too)"
+          />
+          {error !== null &&
+            <ErrorMessage>
+              {error}
+            </ErrorMessage>}
+
+          <Label htmlFor="sandboxurl">Converted Sandbox URL</Label>
+          <StyledInput
+            name="sandboxurl"
+            value={transformedUrl}
+            placeholder="The Sandbox URL"
+          />
+
+          <Button to={gitHubToSandboxUrl(url)}>Open Sandbox</Button>
+        </Content>
+      </Container>
+    );
+  }
+}

src/app/pages/index.js

@@ -50,6 +50,10 @@ const CLI = Loadable({
   loader: () => import('./CLI'),
   LoadingComponent: Loading,
 });
+const GitHub = Loadable({
+  loader: () => import('./GitHub'),
+  LoadingComponent: Loading,
+});
 
 type Props = {
   hasLogin: boolean,
@@ -93,6 +97,7 @@ class Routes extends React.PureComponent {
         <Content>
           <Switch>
             <Route exact path="/" render={() => <Redirect to="/s/new" />} />
+            <Route exact path="/s/github" component={GitHub} />
             <Route path="/s/:id*" component={Sandbox} />
             <Route path="/signin/:jwt?" component={SignIn} />
             <Route path="/u/:username" component={Profile} />

src/app/utils/url-generator.js

@@ -86,3 +86,6 @@ export const optionsToParameterizedUrl = (options: Object) => {
 
   return keyValues ? `?${keyValues}` : '';
 };
+
+export const gitHubToSandboxUrl = (githubUrl: string) =>
+  githubUrl.replace('https://github.com', '/s/github');