codesandbox · CompuIves · May 1, 2019 · Mar 18, 2019 · Mar 21, 2019 · Mar 21, 2019
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "start:fast": "lerna run start --scope app --stream",
     "start:vscode": "VSCODE=1 yarn start:fast & cd standalone-packages/monaco-editor && yarn simpleserver & cd standalone-packages/vscode && yarn watch",
     "start:dynamic": "lerna run dev --scope dynamic-pages --stream",
+    "start:common": "lerna run start --scope common --stream",
     "start:home": "lerna run start --scope homepage --stream",
     "start:test": "lerna run start:test --scope app --stream",
     "start:dev_api": "lerna run start:dev_api --scope app --stream",

diff --git a/packages/app/src/app/components/CodeEditor/ImageViewer/index.tsx b/packages/app/src/app/components/CodeEditor/ImageViewer/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import React from 'react';
 import Input from '@codesandbox/common/lib/components/Input';
 import { Button } from '@codesandbox/common/lib/components/Button';

diff --git a/packages/app/src/app/components/CodeEditor/VSCode/Configuration/index.tsx b/packages/app/src/app/components/CodeEditor/VSCode/Configuration/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import React from 'react';
 import { TextOperation } from 'ot';
 import { Module } from '@codesandbox/common/lib/types';

diff --git a/packages/app/src/app/components/CodeEditor/VSCode/index.tsx b/packages/app/src/app/components/CodeEditor/VSCode/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import * as React from 'react';
 import { render } from 'react-dom';
 import { ThemeProvider } from 'styled-components';

diff --git a/...es/app/src/app/components/Preview/DevTools/Tests/TestDetails/TestBlock/TestName/index.tsx b/...es/app/src/app/components/Preview/DevTools/Tests/TestDetails/TestBlock/TestName/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import * as React from 'react';
 import { Test } from '../../../';
 

diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/TestBlock/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/TestBlock/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import * as React from 'react';
 import FileIcon from 'react-icons/lib/md/insert-drive-file';
 

diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/TestDetails/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import * as React from 'react';
 import FileIcon from 'react-icons/lib/md/insert-drive-file';
 import PlayIcon from 'react-icons/lib/go/playback-play';

diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestElement/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/TestElement/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 
 import * as React from 'react';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';

diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestOverview/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/TestOverview/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 
 import * as React from 'react';
 

diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestProgressBar/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/TestProgressBar/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 
 import * as React from 'react';
 import { ProgressBar, FailedBar, SuccessBar, IdleBar } from './elements';

diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestSummary/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/TestSummary/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import * as React from 'react';
 import PlayIcon from 'react-icons/lib/go/playback-play';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';

diff --git a/packages/app/src/app/components/Preview/DevTools/Tests/TestSummaryText/index.tsx b/packages/app/src/app/components/Preview/DevTools/Tests/TestSummaryText/index.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import * as React from 'react';
 import {
   TestDetails,

diff --git a/packages/app/src/app/index.html b/packages/app/src/app/index.html
@@ -1,59 +1,61 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta property="og:type" content="website">
-    <meta property="og:author" content='https://ivesvh.com'>
-    <meta property="og:title" content="CodeSandbox">
-    <meta property="og:site_name" content="CodeSandbox">
-    <meta property="og:description" content="CodeSandbox is an online editor tailored for web applications.">
-    <meta property="og:image" content="https://codesandbox.io/static/img/banner.png">
-    <meta property="og:image:width" content="1200">
-    <meta property="og:image:height" content="630">
-    <meta property="twitter:card" content="summary_large_image">
-    <meta property="twitter:site" content="@codesandbox">
-    <meta property="twitter:title" content="CodeSandbox">
-    <meta property="twitter:description" content="An online editor tailored for web application development.">
-    <meta property="twitter:image:src" content="https://codesandbox.io/static/img/banner.png">
-    <meta property="twitter:image:width" content="1200">
-    <meta property="twitter:image:height" content="630">
-    <meta name="theme-color" content="#40A9F3">
-    <meta name="description" content="CodeSandbox is an online editor tailored for web applications.">
-    <link rel="shortcut icon" href="/favicon.ico">
-    <link rel="manifest" href="/manifest.json">
-    <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
-    <script>
-      WebFont.load({
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta property="og:type" content="website">
+	<meta property="og:author" content='https://ivesvh.com'>
+	<meta property="og:title" content="CodeSandbox">
+	<meta property="og:site_name" content="CodeSandbox">
+	<meta property="og:description" content="CodeSandbox is an online editor tailored for web applications.">
+	<meta property="og:image" content="https://codesandbox.io/static/img/banner.png">
+	<meta property="og:image:width" content="1200">
+	<meta property="og:image:height" content="630">
+	<meta property="twitter:card" content="summary_large_image">
+	<meta property="twitter:site" content="@codesandbox">
+	<meta property="twitter:title" content="CodeSandbox">
+	<meta property="twitter:description" content="An online editor tailored for web application development.">
+	<meta property="twitter:image:src" content="https://codesandbox.io/static/img/banner.png">
+	<meta property="twitter:image:width" content="1200">
+	<meta property="twitter:image:height" content="630">
+	<meta name="theme-color" content="#40A9F3">
+	<meta name="description" content="CodeSandbox is an online editor tailored for web applications.">
+	<link rel="shortcut icon" href="/favicon.ico">
+	<link rel="manifest" href="/manifest.json">
+	<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
+	<script>
+		WebFont.load({
         google: {
-          families: ['Source Code Pro:500', 'Roboto:300,400,500,700', 'Poppins:300,400,500,600,700']
+          families: ['Source Code Pro:500', 'Roboto:300,400,500,700', 'Poppins:300,400,500,600,700', 'Open Sans:400']
         }
       });
-    </script>
-    <!-- Injected by server: -->
-    <!-- {{OEMBED TAG}} -->
-    <title>CodeSandbox</title>
-    <link href="/static/fonts/dmvendor.css" rel="stylesheet"></link>
-    <!-- Google Tag Manager -->
-    <script>
-      (function (w, d, s, l, i) {
+	</script>
+	<!-- Injected by server: -->
+	<!-- {{OEMBED TAG}} -->
+	<title>CodeSandbox</title>
+	<link href="/static/fonts/dmvendor.css" rel="stylesheet">
+	</link>
+	<!-- Google Tag Manager -->
+	<script>
+		(function (w, d, s, l, i) {
         w[l] = w[l] || []; w[l].push({
           'gtm.start':
             new Date().getTime(), event: 'gtm.js'
         }); var f = d.getElementsByTagName(s)[0],
           j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
             'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
       })(window, document, 'script', 'dataLayer', 'GTM-T3L6RFK');
-    </script>
-    <!-- End Google Tag Manager -->
-    <!-- <script async src="//cdn.headwayapp.co/widget.js"></script> -->
-    <script async rel="prefetch" src="https://js.stripe.com/v3/"></script>
-    <script src="<%= webpackConfig.output.publicPath %>static/browserfs3/browserfs<%=process.env.NODE_ENV
+	</script>
+	<!-- End Google Tag Manager -->
+	<!-- <script async src="//cdn.headwayapp.co/widget.js"></script> -->
+	<script async rel="prefetch" src="https://js.stripe.com/v3/"></script>
+	<script src="<%= webpackConfig.output.publicPath %>static/browserfs3/browserfs<%=process.env.NODE_ENV
       === 'development' ? '' : '.min'%>.js"
-      type="text/javascript"></script>
+	 type="text/javascript"></script>
 
-    <script>
-      if (BrowserFS) {
+	<script>
+		if (BrowserFS) {
         window.process = {
           env: {
             VSCODE_DEV: false
@@ -66,23 +68,22 @@
         };
         window.Buffer = BrowserFS.BFSRequire('buffer').Buffer;
       }
-    </script>
+	</script>
+
+	<link data-name="/public/vscode21/vs/editor/editor.main" rel="preload" as="style" href="/public/vscode21/vs/editor/codesandbox.editor.main.css">
+	</link>
+	<link rel="preload" as="script" href="/public/vscode21/vs/editor/codesandbox.editor.main.js">
+	</link>
+</head>
+
+<body style="margin: 0; padding: 0;">
+	<!-- Google Tag Manager (noscript) -->
+	<noscript>
+		<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T3L6RFK" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+	</noscript>
+	<!-- End Google Tag Manager (noscript) -->
+	<div id="root">
+	</div>
+</body>
 
-    <link data-name="/public/vscode21/vs/editor/editor.main"
-      rel="preload"
-      as="style"
-      href="/public/vscode21/vs/editor/codesandbox.editor.main.css">
-    </link>
-    <link rel="preload" as="script" href="/public/vscode21/vs/editor/codesandbox.editor.main.js"></link>
-  </head>
-  <body style="margin: 0; padding: 0;">
-    <!-- Google Tag Manager (noscript) -->
-    <noscript>
-      <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T3L6RFK"
-        height="0" width="0" style="display:none;visibility:hidden"></iframe>
-    </noscript>
-    <!-- End Google Tag Manager (noscript) -->
-    <div id="root">
-    </div>
-  </body>
 </html>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/Status.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/items/Server/Status.tsx
@@ -1,4 +1,4 @@
-// @flow
+
 import React from 'react';
 import styled from 'styled-components';
 

diff --git a/packages/app/src/app/pages/Sandbox/SearchDependencies/index.js b/packages/app/src/app/pages/Sandbox/SearchDependencies/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { InstantSearch, Configure, PoweredBy } from 'react-instantsearch/dom';
 import { connectAutoComplete } from 'react-instantsearch/connectors';
 
-import 'app/pages/Search/search.css';
+import Style from 'app/pages/Search/search';
 import DependenciesCSS from './dependencies';
 
 import RawAutoComplete from './RawAutoComplete';
@@ -48,6 +48,7 @@ export default class SearchDependencies extends React.PureComponent {
   render() {
     return (
       <div className="search-dependencies">
+        <Style />
         <DependenciesCSS />
         <InstantSearch
           appId="OFCNCOG2CU"

diff --git a/packages/app/src/app/pages/Search/Filters/Filter/Sort.js b/packages/app/src/app/pages/Search/Filters/Filter/Sort.js
@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import Down from 'react-icons/lib/md/expand-more';
+import Up from 'react-icons/lib/md/expand-less';
+import { SortBy } from 'react-instantsearch-dom';
+
+import { Container, Title, Button } from './elements';
+
+class Filter extends Component {
+  state = { open: false };
+
+  toggle = () => this.setState(({ open }) => ({ open: !open }));
+  render() {
+    const { title, defaultRefinement, items } = this.props;
+    const { open } = this.state;
+    return (
+      <Container open={open}>
+        <Title>
+          <span>{title}</span>
+          <Button onClick={this.toggle}>{open ? <Up /> : <Down />}</Button>
+        </Title>
+        <SortBy defaultRefinement={defaultRefinement} items={items} />
+      </Container>
+    );
+  }
+}
+export default Filter;
diff --git a/packages/app/src/app/pages/Search/Filters/Filter/elements.js b/packages/app/src/app/pages/Search/Filters/Filter/elements.js
@@ -2,8 +2,8 @@ import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
   padding: 1rem;
-  background-color: ${props => props.theme.background};
-  box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.24);
+  background-color: ${props => props.theme.background2};
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
   border-radius: 2px;
   margin-bottom: 1rem;
 
@@ -31,12 +31,13 @@ export const Container = styled.div`
 `;
 
 export const Title = styled.div`
-  font-weight: 300;
-  font-size: 1.25rem;
   margin-bottom: 1rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
+  font-size: 18px;
+  line-height: 25px;
+  font-weight: normal;
 
   svg {
     display: none;

diff --git a/packages/app/src/app/pages/Search/Filters/elements.js b/packages/app/src/app/pages/Search/Filters/elements.js
@@ -2,7 +2,9 @@ import styled from 'styled-components';
 
 export const Container = styled.aside`
   flex: 1;
+  max-width: 340px;
   @media (max-width: 768px) {
     width: 100%;
+    max-width: 100%;
   }
 `;
diff --git a/packages/app/src/app/pages/Search/Filters/index.js b/packages/app/src/app/pages/Search/Filters/index.js
@@ -1,12 +1,22 @@
 import React from 'react';
 import getTemplate from '@codesandbox/common/lib/templates';
+import { ALGOLIA_DEFAULT_INDEX } from '@codesandbox/common/lib/utils/config';
 
 import Filter from './Filter';
+import Sort from './Filter/Sort';
 import { Container } from './elements';
 
 function Filters() {
   return (
     <Container>
+      <Sort
+        title="Sort By"
+        items={[
+          { value: ALGOLIA_DEFAULT_INDEX, label: 'Views' },
+          { value: `${ALGOLIA_DEFAULT_INDEX}_likes`, label: 'Likes' },
+        ]}
+        defaultRefinement={ALGOLIA_DEFAULT_INDEX}
+      />
       <Filter
         title="Templates"
         operator="or"

diff --git a/packages/app/src/app/pages/Search/ResultInfo/index.js b/packages/app/src/app/pages/Search/ResultInfo/index.js
@@ -6,7 +6,11 @@ import { ClearAllContainer } from './elements';
 function ResultInfo() {
   return (
     <div style={{ marginBottom: '1rem', fontSize: '.875rem' }}>
-      <Stats />
+      <Stats
+        translations={{
+          stats: nbHits => `${nbHits.toLocaleString()} results found`,
+        }}
+      />
       <ClearAllContainer>
         <ClearRefinements />
       </ClearAllContainer>

diff --git a/packages/app/src/app/pages/Search/Results/elements.js b/packages/app/src/app/pages/Search/Results/elements.js
@@ -2,8 +2,7 @@ import styled from 'styled-components';
 
 export const Container = styled.div`
   flex: 2;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
-  margin-right: 2rem;
+  border-top: 1px solid #828282;
   padding-top: 1rem;
 
   color: rgba(255, 255, 255, 0.6);

diff --git a/packages/app/src/app/pages/Search/Results/index.js b/packages/app/src/app/pages/Search/Results/index.js
@@ -2,17 +2,31 @@ import React from 'react';
 
 import { Hits, Pagination } from 'react-instantsearch/dom';
 import Centered from '@codesandbox/common/lib/components/flex/Centered';
+import WideSandbox from '@codesandbox/common/lib/components/WideSandbox';
+import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 
 import ResultInfo from '../ResultInfo';
-import SandboxCard from '../SandboxCard';
-
 import { Container } from './elements';
 
 function Results() {
   return (
     <Container>
       <ResultInfo />
-      <Hits hitComponent={SandboxCard} />
+      <Hits
+        hitComponent={({ hit }) => (
+          <WideSandbox
+            selectSandbox={() =>
+              window.open(sandboxUrl({ id: hit.objectID, git: hit.git }))
+            }
+            noHeight
+            sandbox={{
+              ...hit,
+              title: hit.title || hit.objectID,
+              id: hit.objectID,
+            }}
+          />
+        )}
+      />
       <Centered horizontal>
         <Pagination />
       </Centered>

diff --git a/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/elements.js b/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/Stat/elements.js
Original file line number	Diff line number	Diff line change
		@@ -1,4 +1,4 @@
		// @flow


		import * as React from 'react';

Expand Down