Fix New Sandbox Modal (codesandbox#1194)

* fix modal

*  lint :(

* Update sapper.js

Author: SaraVieira

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

@@ -26,7 +26,6 @@ const usedTemplates = sortBy(
 
 const TEMPLATE_BASE_WIDTH = 150;
 const MAIN_TEMPLATE_BASE_WIDTH = 190;
-const SERVER_TEMPLATE_BASE_WIDTH = 150; // 150
 
 export default class Modal extends React.PureComponent {
   selectTemplate = template => {
@@ -39,21 +38,21 @@ export default class Modal extends React.PureComponent {
     const paddedWidth = width;
     const mainTemplates = usedTemplates.filter(t => t.main && !t.isServer);
     const otherTemplates = usedTemplates.filter(t => !t.main && !t.isServer);
-    const serverTemplates = usedTemplates.filter(t => t.isServer);
+    const mainServerTemplates = usedTemplates.filter(t => t.main && t.isServer);
+    const otherServerTemplates = usedTemplates.filter(
+      t => !t.main && t.isServer
+    );
 
     const mainTemplatesPerRow = Math.max(
       1,
       paddedWidth / MAIN_TEMPLATE_BASE_WIDTH
     );
     const templatesPerRow = Math.max(1, paddedWidth / TEMPLATE_BASE_WIDTH);
-    const serverTemplatesPerRow = Math.max(
-      1,
-      paddedWidth / SERVER_TEMPLATE_BASE_WIDTH
-    );
 
     const mainRows = chunk(mainTemplates, mainTemplatesPerRow);
     const rows = chunk(otherTemplates, templatesPerRow);
-    const serverRows = chunk(serverTemplates, serverTemplatesPerRow);
+    const mainServerRows = chunk(mainServerTemplates, mainTemplatesPerRow);
+    const serverRows = chunk(otherServerTemplates, templatesPerRow);
 
     return (
       <Container
@@ -64,7 +63,7 @@ export default class Modal extends React.PureComponent {
         <InnerContainer forking={forking} closing={closing}>
           <Title>Client Templates</Title>
           {mainRows.map((ts, i) => (
-            // eslint-disable-next-line
+            // eslint-disable-next-line react/no-array-index-key
             <Templates key={i}>
               {ts.map(t => (
                 <Template
@@ -78,7 +77,7 @@ export default class Modal extends React.PureComponent {
           ))}
 
           {rows.map((ts, i) => (
-            // eslint-disable-next-line
+            // eslint-disable-next-line react/no-array-index-key
             <Templates style={{ fontSize: '.8rem' }} key={i}>
               {ts.map(t => (
                 <Template
@@ -93,12 +92,27 @@ export default class Modal extends React.PureComponent {
           ))}
 
           <Title>Server Templates</Title>
+          {mainServerRows.map((ts, i) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <Templates key={i}>
+              {ts.map(t => (
+                <Template
+                  width={Math.floor(paddedWidth / mainTemplatesPerRow - 16)}
+                  key={t.name}
+                  template={t}
+                  selectTemplate={this.selectTemplate}
+                />
+              ))}
+            </Templates>
+          ))}
+
           {serverRows.map((ts, i) => (
-            // eslint-disable-next-line
-            <Templates style={{ fontSize: '.9rem' }} key={i}>
+            // eslint-disable-next-line react/no-array-index-key
+            <Templates style={{ fontSize: '.8rem' }} key={i}>
               {ts.map(t => (
                 <Template
-                  width={Math.floor(paddedWidth / serverTemplatesPerRow - 16)}
+                  small
+                  width={Math.floor(paddedWidth / templatesPerRow - 16)}
                   key={t.name}
                   template={t}
                   selectTemplate={this.selectTemplate}

packages/common/templates/gatsby.js

@@ -16,5 +16,6 @@ export default new Template(
     isServer: true,
     mainFile: ['/src/pages/index.js'],
     showOnHomePage: true,
+    main: true,
   }
 );

packages/common/templates/next.js

@@ -17,5 +17,6 @@ export default new Template(
     mainFile: ['/pages/index.js'],
     backgroundColor: decorateSelector(() => '#000000'),
     showOnHomePage: true,
+    main: true,
   }
 );

packages/common/templates/node.js

@@ -11,6 +11,7 @@ export default new Template(
   {
     isServer: true,
     showOnHomePage: true,
+    main: true,
     mainFile: ['/pages/index.vue', '/pages/index.js', '/src/pages/index.js'],
   }
 );

packages/common/templates/nuxt.js

@@ -16,5 +16,6 @@ export default new Template(
     isServer: true,
     mainFile: ['/pages/index.vue'],
     showOnHomePage: true,
+    main: true,
   }
 );

packages/common/templates/sapper.js

@@ -11,6 +11,6 @@ export default new Template(
   {
     isServer: true,
     mainFile: ['/src/routes/index.html'],
-    showOnHomePage: false,
+    showOnHomePage: true,
   }
 );

packages/homepage/content/docs/2-importing.md

@@ -32,7 +32,6 @@ We infer sandbox settings based on several files in a repository.
 | Template - React            | If `package.json` dependencies contains `react-scripts`.    |
 | Template - React-Typescript | If `package.json` dependencies contains `react-scripts-ts`. |
 | Template - Svelte           | If `package.json` dependencies contains `svelte`.           |
-| Template - Node             | If `package.json` dependencies contains `ember-cli`.        |
 
 Additionally, you may specify a `template` property in your `./sandbox.config.json` file.