Gatsby starter (#335)

* WIP: Business logic added. Styling needs to be improved. * WIP: Fix flow typing * added preview in codesandbox. * fixed test * removed toastr & used modal * improved styling * added test for config variable substitution * WIP: CurrentStepIndex not working as expected. * fixed flow types * WIP: Added starter exists check. Dialog displayed too late. * fixed starter check * addressed review comments. * removed starter modal & changed starter selection * added default spacing * added tests * removed commented line * addressed review - new typeahead logic * fixed flow
joshwcomeau · Jan 21, 2019 · db0f006 · db0f006
1 parent 5405e6c
commit db0f006
Show file tree

Hide file tree

Showing 33 changed files with 1,268 additions and 155 deletions.
diff --git a/config/testFrameworkSetup.js b/config/testFrameworkSetup.js
@@ -1,6 +1,7 @@
 const { JSDOM } = require('jsdom');
 const jsdom = new JSDOM('<!doctype html><html><body></body></html>');
 const { window } = jsdom;
+const fetch = require('jest-fetch-mock');
 
 global.document = window.document;
 global.window = window;
@@ -19,3 +20,5 @@ global.cancelAnimationFrame = function(id) {
 require('jsdom-global')();
 // Import test framework for styled components for better snapshot messages
 require('jest-styled-components');
+
+jest.setMock('node-fetch', fetch);
diff --git a/package.json b/package.json
@@ -54,7 +54,9 @@
     "electron-store": "2.0.0",
     "electron-updater": "3.1.2",
     "fix-path": "2.1.0",
+    "fuse.js": "3.3.0",
     "gatsby-cli": "1.1.58",
+    "js-yaml": "3.12.0",
     "ps-tree": "1.1.0",
     "react-custom-scrollbars": "4.2.1",
     "rimraf": "2.6.2",
@@ -111,13 +113,15 @@
     "immer": "1.3.1",
     "import-all.macro": "2.0.3",
     "jest": "23.3",
+    "jest-fetch-mock": "2.1.0",
     "jest-styled-components": "6.2.2",
     "jsdom": "13.0.0",
     "jsdom-global": "3.0.2",
     "lint-staged": "7.2.0",
     "loader-utils": "1.1.0",
     "mixpanel-browser": "2.22.4",
     "moment": "2.22.2",
+    "node-fetch": "2.3.0",
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.10",
     "prettier": "1.13.7",

diff --git a/src/components/AddDependencySearchResult/AddDependencySearchResult.js b/src/components/AddDependencySearchResult/AddDependencySearchResult.js
@@ -15,6 +15,7 @@ import {
 } from '../../reducers/projects.reducer';
 import { COLORS } from '../../constants';
 
+import Divider from '../Divider';
 import Spacer from '../Spacer';
 import Spinner from '../Spinner';
 import ExternalLink from '../ExternalLink';
@@ -211,12 +212,6 @@ const Description = styled.div`
   margin-right: 120px;
 `;
 
-const Divider = styled.div`
-  width: 100%;
-  height: 1px;
-  background: ${COLORS.gray[100]};
-`;
-
 const StatsItemHighlight = styled.span`
   font-weight: 600;
   -webkit-font-smoothing: antialiased;

diff --git a/src/components/App/App.js b/src/components/App/App.js
@@ -22,11 +22,12 @@ import type { Project } from '../../types';
 
 type Props = {
   selectedProjectId: ?Project,
+  modalVisible: boolean,
 };
 
 class App extends PureComponent<Props> {
   render() {
-    const { selectedProjectId } = this.props;
+    const { selectedProjectId, modalVisible } = this.props;
     return (
       <Initialization>
         {wasSuccessfullyInitialized =>
@@ -37,7 +38,7 @@ class App extends PureComponent<Props> {
                 <ApplicationMenu />
                 <LoadingScreen />
                 <Sidebar />
-                <MainContent>
+                <MainContent disableScroll={modalVisible}>
                   {selectedProjectId ? <ProjectPage /> : <IntroScreen />}
                 </MainContent>
               </Wrapper>
@@ -69,12 +70,19 @@ const Wrapper = styled.div`
 
 const MainContent = styled.div`
   position: relative;
-  min-height: 100vh;
   flex: 1;
+  ${props =>
+    props.disableScroll
+      ? `
+    height: 100vh;
+    overflow: hidden;
+  `
+      : 'min-height: 100vh;'};
 `;
 
 const mapStateToProps = state => ({
   selectedProjectId: getSelectedProjectId(state),
+  modalVisible: !!state.modal,
 });
 
 export default connect(mapStateToProps)(App);
diff --git a/src/components/CodesandboxLogo/Logo.js b/src/components/CodesandboxLogo/Logo.js
@@ -0,0 +1,71 @@
+// @flow
+import React from 'react';
+import styled from 'styled-components';
+
+const Logo = ({
+  width = 32,
+  height = 32,
+  className,
+}: {
+  width: number,
+  height: number,
+  className: ?string,
+}) => (
+  <svg
+    x="0px"
+    y="0px"
+    className={className}
+    width={`${width}px`}
+    height={`${height}px`}
+    viewBox="0 0 1024 1024"
+  >
+    <g id="Layer_1">
+      <polyline
+        fill="#FFFFFF"
+        points="719.001,851 719.001,639.848 902,533.802 902,745.267 719.001,851"
+      />
+      <polyline
+        fill="#FFFFFF"
+        points="302.082,643.438 122.167,539.135 122.167,747.741 302.082,852.573 302.082,643.438"
+      />
+      <polyline
+        fill="#FFFFFF"
+        points="511.982,275.795 694.939,169.633 512.06,63 328.436,169.987 511.982,275.795"
+      />
+    </g>
+    <g id="Layer_2">
+      <polyline
+        fill="none"
+        stroke="#FFFFFF"
+        strokeWidth="80"
+        strokeMiterlimit="10"
+        points="899,287.833 509,513 509,963"
+      />
+      <line
+        fill="none"
+        stroke="#FFFFFF"
+        strokeWidth="80"
+        strokeMiterlimit="10"
+        x1="122.167"
+        y1="289"
+        x2="511.5"
+        y2="513"
+      />
+      <polygon
+        fill="none"
+        stroke="#FFFFFF"
+        strokeWidth="80"
+        strokeMiterlimit="10"
+        points="121,739.083 510.917,963.042 901,738.333 901,288 511,62 121,289"
+      />
+    </g>
+  </svg>
+);
+
+const StyledLogo = styled(Logo)`
+  border-radius: 50%;
+  background: #000;
+  padding: 5px;
+`;
+
+export default StyledLogo;
diff --git a/src/components/CodesandboxLogo/index.js b/src/components/CodesandboxLogo/index.js
@@ -0,0 +1,2 @@
+// @flow
+export { default } from './Logo';
diff --git a/src/components/CreateNewProjectWizard/BuildPane.js b/src/components/CreateNewProjectWizard/BuildPane.js
@@ -6,6 +6,7 @@ import { check } from 'react-icons-kit/feather/check';
 
 import { COLORS } from '../../constants';
 import createProject from '../../services/create-project.service';
+import { replaceProjectStarterStringWithUrl } from './helpers';
 
 import Spacer from '../Spacer';
 import WhimsicalInstaller from '../WhimsicalInstaller';
@@ -36,6 +37,7 @@ type Props = {
   projectName: string,
   projectType: ?ProjectType,
   projectIcon: ?string,
+  projectStarter: string,
   status: Status,
   projectHomePath: string,
   handleCompleteBuild: (project: ProjectInternal) => void,
@@ -79,7 +81,12 @@ class BuildPane extends PureComponent<Props, State> {
   }
 
   buildProject = () => {
-    const { projectName, projectType, projectIcon } = this.props;
+    const {
+      projectName,
+      projectType,
+      projectIcon,
+      projectStarter: projectStarterInput,
+    } = this.props;
 
     if (!projectName || !projectType || !projectIcon) {
       console.error('Missing one of:', {
@@ -92,13 +99,21 @@ class BuildPane extends PureComponent<Props, State> {
       );
     }
 
+    // Replace starter string with URL.
+    // No need to check if it exists as this already happend before we're here.
+    const projectStarter = replaceProjectStarterStringWithUrl(
+      projectStarterInput
+    );
+
     createProject(
-      { projectName, projectType, projectIcon },
+      { projectName, projectType, projectIcon, projectStarter },
       this.props.projectHomePath,
       this.handleStatusUpdate,
       this.handleError,
       this.handleComplete
     );
+
+    return true;
   };
 
   handleStatusUpdate = (output: any) => {