Merge branch 'master' into chameleon

Author: christianalfoni

.all-contributorsrc

@@ -1385,6 +1385,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "hetpatel33",
+      "name": "Het Patel",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/13877514?v=4",
+      "profile": "http://hetpatel33.github.io",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

README.md

@@ -1,4 +1,4 @@
-# [CodeSandbox](https://codesandbox.io) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/codesandbox) [![All Contributors](https://img.shields.io/badge/all_contributors-146-orange.svg?style=flat-square)](#contributors-) [![CircleCI](https://circleci.com/gh/codesandbox/codesandbox-client.svg?style=svg)](https://circleci.com/gh/codesandbox/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
+# [CodeSandbox](https://codesandbox.io) [![Join the community on Spectrum](https://withspectrum.github.io/badge/badge.svg)](https://spectrum.chat/codesandbox) [![All Contributors](https://img.shields.io/badge/all_contributors-148-orange.svg?style=flat-square)](#contributors-) [![CircleCI](https://circleci.com/gh/codesandbox/codesandbox-client.svg?style=svg)](https://circleci.com/gh/codesandbox/codesandbox-client) [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf)](https://www.browserstack.com/automate/public-build/cVJuczlJWUtqWXhIbFN1ZjVQekF4NzNsd3phNEZRaGlWU0pHYVVkdGRFWT0tLXFtTVhaOWRySmN0ZG5QVDNDQ0g5Z0E9PQ==--79fe3eae4f149a400d396c9b12d3988f685785cf) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) [![first-timers-only Friendly](https://img.shields.io/badge/first--timers--only-friendly-blue.svg)](http://www.firsttimersonly.com/) [![lerna](https://img.shields.io/badge/maintained%20with-lerna-cc00ff.svg)](https://lerna.js.org/)
 
 [![Backers on Open Collective](https://opencollective.com/codesandbox/backers/badge.svg)](#backers)
 [![Sponsors on Open Collective](https://opencollective.com/codesandbox/sponsors/badge.svg)](#sponsors)
@@ -41,7 +41,8 @@ Thanks goes to these wonderful people
 ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
 <table>
   <tr>
     <td align="center"><a href="http://ivesvh.com"><img src="https://avatars0.githubusercontent.com/u/587016?v=3" width="100px;" alt="Ives van Hoorne"/><br /><sub><b>Ives van Hoorne</b></sub></a><br /><a href="#question-CompuIves" title="Answering Questions">💬</a> <a href="#blog-CompuIves" title="Blogposts">📝</a> <a href="https://github.com/codesandbox/codesandbox-client/issues?q=author%3ACompuIves" title="Bug reports">🐛</a> <a href="https://github.com/codesandbox/codesandbox-client/commits?author=CompuIves" title="Code">💻</a> <a href="#design-CompuIves" title="Design">🎨</a> <a href="https://github.com/codesandbox/codesandbox-client/commits?author=CompuIves" title="Documentation">📖</a> <a href="#example-CompuIves" title="Examples">💡</a> <a href="#infra-CompuIves" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#review-CompuIves" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/codesandbox/codesandbox-client/commits?author=CompuIves" title="Tests">⚠️</a> <a href="#tool-CompuIves" title="Tools">🔧</a></td>
@@ -232,8 +233,13 @@ Thanks goes to these wonderful people
     <td align="center"><a href="https://github.com/Sakthivel"><img src="https://avatars3.githubusercontent.com/u/205201?v=4" width="100px;" alt="Sakthivel Sengodan Sapient"/><br /><sub><b>Sakthivel Sengodan Sapient</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=sakthivel" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/vanya829"><img src="https://avatars0.githubusercontent.com/u/1397979?v=4" width="100px;" alt="vanya829"/><br /><sub><b>vanya829</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=vanya829" title="Code">💻</a></td>
   </tr>
+  <tr>
+    <td align="center"><a href="http://hetpatel33.github.io"><img src="https://avatars0.githubusercontent.com/u/13877514?v=4" width="100px;" alt="Het Patel"/><br /><sub><b>Het Patel</b></sub></a><br /><a href="https://github.com/codesandbox/codesandbox-client/commits?author=hetpatel33" title="Code">💻</a></td>
+  </tr>
 </table>
 
+<!-- markdownlint-enable -->
+<!-- prettier-ignore-end -->
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 ## Backers

packages/app/package.json

@@ -152,9 +152,9 @@
     "normalizr": "^3.2.3",
     "onigasm": "^2.2.1",
     "ot": "^0.0.15",
-    "overmind": "^19.3.0-1569928101550",
+    "overmind": "^20.0.0",
     "overmind-devtools": "^19.0.0",
-    "overmind-react": "^20.3.0-1569928101550",
+    "overmind-react": "^21.0.0",
     "phoenix": "^1.3.0",
     "postcss": "^6.0.9",
     "postcss-selector-parser": "^2.2.3",

packages/app/src/app/components/Preview/DevTools/Tabs/Tab/index.tsx

@@ -9,18 +9,21 @@ import {
 } from 'react-dnd';
 import CrossIcon from 'react-icons/lib/md/clear';
 
+import { DevToolsTabPosition } from '@codesandbox/common/lib/types';
 import { Tab, CloseTab } from './elements';
 import { IViewType, Status } from '../..';
-import { ITabPosition } from '..';
 import { UnreadDevToolsCount } from './UnreadDevToolsCount';
 
 export interface TabProps {
   active: boolean;
   pane: IViewType;
   onClick: (e: React.MouseEvent<HTMLDivElement>) => void;
   onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
-  moveTab?: (currentPosition: ITabPosition, nextPosition: ITabPosition) => void;
-  closeTab?: (pos: ITabPosition) => void;
+  moveTab?: (
+    currentPosition: DevToolsTabPosition,
+    nextPosition: DevToolsTabPosition
+  ) => void;
+  closeTab?: (pos: DevToolsTabPosition) => void;
   index: number;
   devToolIndex: number;
   canDrag: boolean;
@@ -146,11 +149,11 @@ const entryTarget = {
       return;
     }
 
-    const previousPosition: ITabPosition = {
+    const previousPosition: DevToolsTabPosition = {
       tabPosition: sourceItem.index,
       devToolIndex: sourceItem.devToolIndex,
     };
-    const nextPosition: ITabPosition = {
+    const nextPosition: DevToolsTabPosition = {
       tabPosition: props.index,
       devToolIndex: props.devToolIndex,
     };

packages/app/src/app/components/Preview/DevTools/Tabs/TabDropZone/index.tsx

@@ -6,8 +6,8 @@ import {
   DropTargetMonitor,
   DropTargetConnector,
 } from 'react-dnd';
+import { DevToolsTabPosition } from '@codesandbox/common/lib/types';
 
-import { ITabPosition } from '..';
 import { PREVIEW_TAB_ID } from '../Tab';
 
 const DropZone = styled.div<{ isOver: boolean }>`
@@ -26,7 +26,10 @@ const DropZone = styled.div<{ isOver: boolean }>`
 `;
 
 export interface TabDropZoneProps {
-  moveTab: (currentPosition: ITabPosition, nextPosition: ITabPosition) => void;
+  moveTab: (
+    currentPosition: DevToolsTabPosition,
+    nextPosition: DevToolsTabPosition
+  ) => void;
   index: number;
   devToolIndex: number;
 }
@@ -61,7 +64,7 @@ const entryTarget = {
       return;
     }
 
-    const previousPosition: ITabPosition = {
+    const previousPosition: DevToolsTabPosition = {
       tabPosition: sourceItem.index,
       devToolIndex: sourceItem.devToolIndex,
     };

packages/app/src/app/components/Preview/DevTools/Tabs/elements.ts

@@ -4,6 +4,7 @@ export const Container = styled.div`
   display: flex;
   flex: auto;
   margin-right: 1rem;
+  overflow-x: auto;
 `;
 
 export const Tabs = styled.div`

packages/app/src/app/components/Preview/DevTools/Tabs/index.tsx

@@ -1,26 +1,22 @@
 import React from 'react';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 import { ViewTab } from '@codesandbox/common/lib/templates/template';
+import { DevToolsTabPosition } from '@codesandbox/common/lib/types';
 
 import { Status, IViews } from '..';
 import { Actions, Container, Tabs } from './elements';
 import { DraggableTab, PaneTab, TabProps } from './Tab';
 import { TabDropZone, TabDropZoneProps } from './TabDropZone';
 // import { AddTab } from './AddTab';
 
-export interface ITabPosition {
-  devToolIndex: number;
-  tabPosition: number;
-}
-
 export interface Props {
   hidden: boolean;
   currentPaneIndex: number;
   owned: boolean;
   setPane: (i: number) => void;
   devToolIndex: number;
-  moveTab?: (prevPos: ITabPosition, newPos: ITabPosition) => void;
-  closeTab?: (pos: ITabPosition) => void;
+  moveTab?: (prevPos: DevToolsTabPosition, newPos: DevToolsTabPosition) => void;
+  closeTab?: (pos: DevToolsTabPosition) => void;
   status?: { [title: string]: Status | undefined };
 
   panes: ViewTab[];

packages/app/src/app/components/Preview/DevTools/index.tsx

@@ -7,8 +7,9 @@ import { TemplateType } from '@codesandbox/common/lib/templates';
 import { ViewConfig } from '@codesandbox/common/lib/templates/template';
 import track from '@codesandbox/common/lib/utils/analytics';
 
+import { DevToolsTabPosition } from '@codesandbox/common/lib/types';
 import { console } from './Console';
-import { DevToolTabs, ITabPosition } from './Tabs';
+import { DevToolTabs } from './Tabs';
 import { problems } from './Problems';
 import { reactDevTools } from './React-Devtools';
 import { terminal } from './Terminal';
@@ -95,9 +96,12 @@ type Props = {
   primary: boolean;
   viewConfig: ViewConfig;
   devToolIndex: number;
-  moveTab?: (prevPos: ITabPosition, nextPos: ITabPosition) => void;
-  closeTab?: (pos: ITabPosition) => void;
-  setPane: (pos: ITabPosition) => void;
+  moveTab?: (
+    prevPos: DevToolsTabPosition,
+    nextPos: DevToolsTabPosition
+  ) => void;
+  closeTab?: (pos: DevToolsTabPosition) => void;
+  setPane: (pos: DevToolsTabPosition) => void;
   addedViews?: IViews;
   hideTabs?: boolean;
   currentDevToolIndex: number;

packages/app/src/app/overmind/effects/jwt.ts

@@ -1,5 +1,5 @@
-import store from 'store/dist/store.modern';
 import { identify, resetUserId } from '@codesandbox/common/lib/utils/analytics';
+import store from 'store/dist/store.modern';
 
 export default {
   get() {

packages/app/src/app/overmind/effects/utils/sandbox.ts

@@ -22,6 +22,7 @@ export function transformSandbox(sandbox: Sandbox) {
   // We need to add client side properties for tracking
   return {
     ...sandbox,
+    environmentVariables: null,
     modules: sandbox.modules.map(transformModule),
     directories: sandbox.directories.map(transformDirectory),
   };