Make tabs on new sandbox modal (codesandbox#1423)

<!-- Is it a Bug fix, feature, docs update, ... -->
**What kind of change does this PR introduce?**
Adds tabs to the new sandbox modal since we are getting too many templates

<!-- You can also link to an open issue here -->
**What is the current behavior?**
Currently ut's a long modal

<!-- if this is a feature change -->
**What is the new behavior?**
Tabs for popular, client, server and preset templates


<img width="1320" alt="screenshot 2019-01-03 at 22 54 02" src="https://user-images.githubusercontent.com/1051509/50664276-cb3bdb80-0fac-11e9-9830-7766cbd828d8.png">

Author: SaraVieira

package.json

@@ -9,6 +9,7 @@
     "build:embed": "lerna run build:embed --scope app --stream && gulp",
     "build:clean": "lerna run build:clean --scope app --scope homepage && rimraf www",
     "build:deps": "lerna run build:dev --scope codesandbox-api && lerna run build:dev --scope @codesandbox/common && lerna run build:dev --scope vscode-textmate --scope codesandbox-browserfs --scope node-services && lerna run build:dev --scope sse-hooks",
+    "build:common": "lerna run build:dev --scope  @codesandbox/common --stream",
     "build:dynamic": "lerna run build --scope dynamic-pages --stream",
     "start": "yarn build:deps && lerna run start --scope app --stream",
     "start:fast": "lerna run start --scope app --stream",

packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/Modal/Template/elements.js

@@ -5,25 +5,12 @@ export const Container = styled.div`
   display: inline-block;
   padding: 1em;
   color: white;
-
-  width: 100%;
   border: 2px solid rgba(0, 0, 0, 0.3);
   background-color: rgba(0, 0, 0, 0.2);
   border-radius: 4px;
   display: flex;
   align-items: center;
-  margin-bottom: 1em;
   cursor: pointer;
-
-  @media (min-width: 768px) {
-    width: ${props => props.width}px;
-    margin-right: 1em;
-
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-
   outline: none;
 
   ${props =>

packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/Modal/Template/index.js

@@ -4,7 +4,7 @@ import getIcon from '@codesandbox/common/lib/templates/icons';
 import { ENTER } from '@codesandbox/common/lib/utils/keycodes';
 import { Container, IconContainer, Title, SubTitle } from './elements';
 
-export default ({ template, subtitle, width, selectTemplate, small }) => {
+export default ({ template, subtitle, selectTemplate, small }) => {
   const Icon = getIcon(template.name);
 
   const select = () => selectTemplate(template);
@@ -15,7 +15,6 @@ export default ({ template, subtitle, width, selectTemplate, small }) => {
     <Container
       onClick={select}
       color={template.color}
-      width={width}
       onKeyDown={e => {
         if (e.keyCode === ENTER) {
           select();

packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/Modal/availableTemplates.js

@@ -0,0 +1,57 @@
+import * as templates from '@codesandbox/common/lib/templates';
+import { sortBy } from 'lodash-es';
+
+const usedTemplates = sortBy(
+  Object.keys(templates)
+    .filter(x => x !== 'default')
+    .map(t => templates[t])
+    .filter(t => t.showOnHomePage),
+  'niceName'
+);
+
+const presets = [
+  {
+    ...templates.react,
+    variantName: templates.react.niceName,
+    niceName: 'React + TS',
+    shortid: 'react-ts',
+  },
+  {
+    ...templates.parcel,
+    variantName: templates.parcel.niceName,
+    niceName: 'Vanilla + TS',
+    shortid: 'vanilla-ts',
+  },
+];
+
+export default [
+  {
+    name: 'Popular Templates',
+    types: [
+      {
+        name: 'Client Templates',
+        templates: usedTemplates.filter(t => t.popular && !t.isServer),
+      },
+      {
+        name: 'Server Templates',
+        templates: usedTemplates.filter(t => t.popular && t.isServer),
+      },
+      {
+        name: 'Presets',
+        templates: presets,
+      },
+    ],
+  },
+  {
+    name: 'Client Templates',
+    templates: usedTemplates.filter(t => !t.isServer),
+  },
+  {
+    name: 'Server Templates',
+    templates: usedTemplates.filter(t => t.isServer),
+  },
+  {
+    name: 'Presets',
+    templates: presets,
+  },
+];

packages/app/src/app/pages/Dashboard/Content/CreateNewSandbox/Modal/elements.js

@@ -8,10 +8,11 @@ export const Container = styled.main`
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   color: ${props =>
     props.theme.light ? 'rgba(0, 0, 0, 0.7)' : 'rgba(255, 255, 255, 0.7)'};
-  border-radius: 4px;
+  border-radius: 0 0 4px 4px;
   padding: 2rem;
   width: 100%;
   box-sizing: border-box;
+  position: relative;
 
   ${props =>
     props.closing &&
@@ -35,9 +36,6 @@ export const Container = styled.main`
 `;
 
 export const InnerContainer = styled.div`
-  transition: 0.15s ease opacity;
-  ${delayEffect(0.3)};
-
   ${props =>
     (props.closing || props.forking) &&
     css`
@@ -47,30 +45,28 @@ export const InnerContainer = styled.div`
     `};
 `;
 
-export const Title = styled.h2`
-  font-weight: 600;
-  text-transform: uppercase;
-  font-size: 0.875rem;
-  color: rgba(255, 255, 255, 0.5);
-  margin-bottom: 1rem;
-  margin-top: 1rem;
+export const Templates = styled.div`
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 1rem;
 
-  &:first-child {
-    margin-top: 0;
+  @media (min-width: 768px) {
+    grid-template-columns: repeat(4, 1fr);
   }
 `;
 
-export const Templates = styled.div`
+export const ImportChoices = styled.div`
+  margin-top: 2.5em;
   display: flex;
   align-items: center;
-
-  @media (max-width: 870px) {
-    flex-wrap: wrap;
-  }
+  justify-content: space-between;
+  ${delayEffect(0.1)};
 `;
 
-export const ImportChoices = styled(Templates)`
-  justify-content: space-between;
+export const Tab = styled.section`
+  display: ${props => (props.visible ? 'block' : 'none')};
+  transition: 0.15s ease opacity;
+  ${delayEffect(0.1)};
 `;
 
 export const ImportChoice = styled.a`
@@ -92,3 +88,85 @@ export const ImportChoice = styled.a`
     color: rgba(255, 255, 255, 1);
   }
 `;
+
+const activeStyles = css`
+  color: white;
+  padding-bottom: 0;
+  padding-top: 0;
+  outline: none;
+
+  &:after {
+    width: 110%;
+
+    @media screen and (max-width: 500px) {
+      width: 100%;
+    }
+  }
+`;
+
+export const Button = styled.button`
+  background: transparent;
+  font-family: 'Roboto', sans-serif;
+  border: none;
+  margin: 0;
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 0.875rem;
+  color: ${props => (props.selected ? 'white' : 'rgba(255, 255, 255, 0.5)')};
+  padding: 0 20px;
+  transition: 0.15s ease all;
+  position: relative;
+  cursor: pointer;
+  ${delayEffect(0.1)};
+
+  &:after {
+    content: '';
+    margin-top: 22px;
+    display: block;
+    position: relative;
+    background: #40a9f3;
+    height: 2px;
+    box-sizing: border-box;
+    width: 0%;
+    margin-left: -5%;
+    transition: all 200ms ease;
+
+    @media screen and (max-width: 500px) {
+      margin-left: 0%;
+    }
+  }
+
+  ${props =>
+    props.selected &&
+    css`
+      ${activeStyles};
+    `};
+
+  &:hover {
+    ${activeStyles};
+  }
+`;
+
+export const TabContainer = styled.div`
+  width: 100%;
+  border-radius: 4px 4px 0 0;
+  display: flex;
+  background: #1b1d1f;
+  height: 62px;
+  box-sizing: border-box;
+  padding: 0 2rem;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+`;
+
+export const Title = styled.h2`
+  grid-column: 1/-1;
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 0.875rem;
+  color: rgba(255, 255, 255, 0.5);
+  margin-bottom: 0;
+  margin-top: 1rem;
+  &:first-child {
+    margin-top: 0;
+  }
+`;