Extract common to a lib (#1653)

Allows homepage and dynamic-pages to work standalone

Author: CompuIves

.yarnrc

@@ -1 +1 @@
-workspaces-experimental true
+

package.json

@@ -8,7 +8,7 @@
     "build:prod": "lerna run build  --scope homepage --stream && lerna run build --scope app --stream && gulp",
     "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 common && lerna run build:dev --scope vscode-textmate --scope codesandbox-browserfs --scope node-services && lerna run build:dev --scope sse-hooks",
+    "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: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/config/webpack.common.js

@@ -7,8 +7,8 @@ const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HappyPack = require('happypack');
 const WatchMissingNodeModulesPlugin = require('../scripts/utils/WatchMissingNodeModulesPlugin');
-const env = require('common/lib/config/env');
-const getHost = require('common/lib/utils/host');
+const env = require('@codesandbox/common/lib/config/env');
+const getHost = require('@codesandbox/common/lib/utils/host');
 
 const babelDev = require('./babel.dev');
 const babelProd = require('./babel.prod');

packages/app/package.json

@@ -159,7 +159,7 @@
     "cerebral": "^4.0.0",
     "circular-json": "^0.4.0",
     "codemirror": "^5.27.4",
-    "codesandbox-api": "^0.0.20",
+    "codesandbox-api": "^0.0.22",
     "codesandbox-import-utils": "2.1.1",
     "color": "^0.11.4",
     "compare-versions": "^3.1.0",
@@ -247,7 +247,6 @@
     "sha1": "^1.1.1",
     "shelljs": "^0.7.8",
     "shortid": "^2.2.8",
-    "socket.io-client": "^2.1.1",
     "store": "^2.0.12",
     "string-replace-loader": "^2.1.1",
     "styled-components": "^4.1.2",

packages/app/src/app/components/Alert/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Button } from 'common/lib/components/Button';
+import { Button } from '@codesandbox/common/lib/components/Button';
 import { Container, Title, Text, Buttons } from './elements';
 
 function Alert({ title, body, onCancel, onDelete }) {

packages/app/src/app/components/CodeEditor/CodeMirror/elements.js

@@ -1,5 +1,5 @@
 import styled, { css, keyframes } from 'styled-components';
-import theme from 'common/lib/theme';
+import theme from '@codesandbox/common/lib/theme';
 
 const fadeInAnimation = keyframes`
   0%   { background-color: #374140; }

packages/app/src/app/components/CodeEditor/CodeMirror/index.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import CodeMirror from 'codemirror';
 import { withTheme } from 'styled-components';
 
-import type { ModuleError, Module } from 'common/lib/types';
+import type { ModuleError, Module } from '@codesandbox/common/lib/types';
 import { getCodeMirror } from 'app/utils/codemirror';
 
 import 'codemirror/addon/dialog/dialog';

packages/app/src/app/components/CodeEditor/Configuration/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { TextOperation } from 'ot';
-import { Module } from 'common/lib/types';
-import getUI from 'common/lib/templates/configuration/ui';
+import { Module } from '@codesandbox/common/lib/types';
+import getUI from '@codesandbox/common/lib/templates/configuration/ui';
 import getType from 'app/utils/get-type';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
-import Tooltip from 'common/lib/components/Tooltip';
-import { ConfigurationFile } from 'common/lib/templates/configuration/types';
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import { ConfigurationFile } from '@codesandbox/common/lib/templates/configuration/types';
 
 import CodeIcon from 'react-icons/lib/md/code';
 

packages/app/src/app/components/CodeEditor/FilePath/elements.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import ChevronLeft from 'react-icons/lib/md/chevron-left';
 import ExitZen from 'react-icons/lib/md/fullscreen-exit';
-import { withTooltip } from 'common/lib/components/Tooltip';
+import { withTooltip } from '@codesandbox/common/lib/components/Tooltip';
 
 export const Container = styled.div`
   background-color: rgba(0, 0, 0, 0.3);

packages/app/src/app/components/CodeEditor/FilePath/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getModulePath } from 'common/lib/sandbox/modules';
+import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
 import getType from 'app/utils/get-type';
 

packages/app/src/app/components/CodeEditor/FuzzySearch/index.js

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { sortBy, groupBy, flatten } from 'lodash-es';
 import Downshift from 'downshift';
 import matchSorter from 'match-sorter';
-import { getModulePath } from 'common/lib/sandbox/modules';
-import Input from 'common/lib/components/Input';
+import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
+import Input from '@codesandbox/common/lib/components/Input';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
 import getType from 'app/utils/get-type';
-import { ESC } from 'common/lib/utils/keycodes';
+import { ESC } from '@codesandbox/common/lib/utils/keycodes';
 import {
   Container,
   InputContainer,

packages/app/src/app/components/CodeEditor/ImageViewer/elements.ts

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Centered from 'common/lib/components/flex/Centered';
+import Centered from '@codesandbox/common/lib/components/flex/Centered';
 
 export const Container = styled(Centered)`
   height: 100%;

packages/app/src/app/components/CodeEditor/ImageViewer/index.tsx

@@ -1,7 +1,7 @@
 // @flow
 import React from 'react';
-import Input from 'common/lib/components/Input';
-import { Button } from 'common/lib/components/Button';
+import Input from '@codesandbox/common/lib/components/Input';
+import { Button } from '@codesandbox/common/lib/components/Button';
 import { Container, Title, SubTitle, Image, MaxWidth } from './elements';
 
 import { Props } from '../types';

packages/app/src/app/components/CodeEditor/Monaco/elements.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import theme from 'common/lib/theme';
+import theme from '@codesandbox/common/lib/theme';
 
 export const Container = styled.div`
   width: 100%;

packages/app/src/app/components/CodeEditor/Monaco/index.js

@@ -4,20 +4,20 @@ import { TextOperation } from 'ot';
 import { debounce } from 'lodash-es';
 import { join, dirname } from 'path';
 import { withTheme } from 'styled-components';
-import { getModulePath } from 'common/lib/sandbox/modules';
+import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
 import { listen } from 'codesandbox-api';
 
-import getTemplate from 'common/lib/templates';
+import getTemplate from '@codesandbox/common/lib/templates';
 import type {
   Module,
   Sandbox,
   ModuleError,
   ModuleCorrection,
   Directory,
-} from 'common/lib/types';
-import { getTextOperation } from 'common/lib/utils/diff';
+} from '@codesandbox/common/lib/types';
+import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
 
-import delay from 'common/lib/utils/delay';
+import delay from '@codesandbox/common/lib/utils/delay';
 
 /* eslint-disable import/no-webpack-loader-syntax */
 import LinterWorker from 'worker-loader?publicPath=/&name=monaco-linter.[hash:8].worker.js!./workers/linter';

packages/app/src/app/components/CodeEditor/VSCode/Configuration/index.tsx

@@ -1,15 +1,15 @@
 // @flow
 import React from 'react';
 import { TextOperation } from 'ot';
-import { Module } from 'common/lib/types';
-import getUI from 'common/lib/templates/configuration/ui';
+import { Module } from '@codesandbox/common/lib/types';
+import getUI from '@codesandbox/common/lib/templates/configuration/ui';
 import getType from 'app/utils/get-type';
 import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
-import theme from 'common/lib/theme';
+import theme from '@codesandbox/common/lib/theme';
 
 import { Props as EditorProps, Editor } from '../../types';
 import { Container, Title, Description } from './elements';
-import { ConfigurationFile } from 'common/lib/templates/configuration/types';
+import { ConfigurationFile } from '@codesandbox/common/lib/templates/configuration/types';
 
 type Disposable = {
   dispose: () => void;

packages/app/src/app/components/CodeEditor/VSCode/elements.ts

@@ -1,5 +1,5 @@
 import styled, { createGlobalStyle } from 'styled-components';
-import theme from 'common/lib/theme';
+import theme from '@codesandbox/common/lib/theme';
 
 export const Container = styled.div`
   width: 100%;

packages/app/src/app/components/CodeEditor/VSCode/index.tsx

@@ -4,22 +4,22 @@ import { render } from 'react-dom';
 import { ThemeProvider } from 'styled-components';
 import { TextOperation } from 'ot';
 import { debounce } from 'lodash-es';
-import { getModulePath, resolveModule } from 'common/lib/sandbox/modules';
+import { getModulePath, resolveModule } from '@codesandbox/common/lib/sandbox/modules';
 import { listen } from 'codesandbox-api';
 
 import prettify from 'app/src/app/utils/prettify';
-import DEFAULT_PRETTIER_CONFIG from 'common/lib/prettify-default-config';
-import getUI from 'common/lib/templates/configuration/ui';
+import DEFAULT_PRETTIER_CONFIG from '@codesandbox/common/lib/prettify-default-config';
+import getUI from '@codesandbox/common/lib/templates/configuration/ui';
 
-import getTemplate from 'common/lib/templates';
-import theme from 'common/lib/theme';
+import getTemplate from '@codesandbox/common/lib/templates';
+import theme from '@codesandbox/common/lib/theme';
 import {
   Module,
   Sandbox,
   ModuleError,
   ModuleCorrection,
-} from 'common/lib/types';
-import { getTextOperation } from 'common/lib/utils/diff';
+} from '@codesandbox/common/lib/types';
+import { getTextOperation } from '@codesandbox/common/lib/utils/diff';
 
 /* eslint-disable import/no-webpack-loader-syntax */
 // @ts-ignore

packages/app/src/app/components/CodeEditor/index.tsx

@@ -2,14 +2,14 @@ import React from 'react';
 import Title from 'app/components/Title';
 import SubTitle from 'app/components/SubTitle';
 import Loadable from 'app/utils/Loadable';
-import getUI from 'common/lib/templates/configuration/ui';
-import Centered from 'common/lib/components/flex/Centered';
-import Margin from 'common/lib/components/spacing/Margin';
-import isImage from 'common/lib/utils/is-image';
-import getDefinition from 'common/lib/templates';
-import { Sandbox } from 'common/lib/types';
-import { getModulePath } from 'common/lib/sandbox/modules';
-import Tooltip from 'common/lib/components/Tooltip';
+import getUI from '@codesandbox/common/lib/templates/configuration/ui';
+import Centered from '@codesandbox/common/lib/components/flex/Centered';
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import isImage from '@codesandbox/common/lib/utils/is-image';
+import getDefinition from '@codesandbox/common/lib/templates';
+import { Sandbox } from '@codesandbox/common/lib/types';
+import { getModulePath } from '@codesandbox/common/lib/sandbox/modules';
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 import UIIcon from 'react-icons/lib/md/dvr';
 import QuestionIcon from 'react-icons/lib/go/question';
 

packages/app/src/app/components/CodeEditor/types.js

@@ -5,7 +5,7 @@ import type {
   Sandbox,
   ModuleError,
   ModuleCorrection,
-} from 'common/lib/types';
+} from '@codesandbox/common/lib/types';
 
 export type Settings = {
   autoCompleteEnabled: boolean,

packages/app/src/app/components/CodeEditor/types.ts

@@ -5,7 +5,7 @@ import {
   Sandbox,
   ModuleError,
   ModuleCorrection,
-} from 'common/lib/types';
+} from '@codesandbox/common/lib/types';
 
 export type Settings = {
   autoCompleteEnabled: boolean;

packages/app/src/app/components/ContextMenu/elements.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 
 import { animated } from 'react-spring/renderprops';
-import theme from 'common/lib/theme';
+import theme from '@codesandbox/common/lib/theme';
 
 export const Container = styled(animated.div)`
   position: fixed;

packages/app/src/app/components/ContextMenu/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Spring } from 'react-spring/renderprops';
-import Portal from 'common/lib/components/Portal';
+import Portal from '@codesandbox/common/lib/components/Portal';
 
 import { Container, Item, ItemContainer } from './elements';
 

packages/app/src/app/components/DelayedAnimation/index.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import delayEffect from 'common/lib/utils/animation/delay-effect';
+import delayEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
 
 export default styled.div`
   ${props => delayEffect(props.delay || 0)};

packages/app/src/app/components/DeleteSandboxButton/elements.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import DeleteIcon from 'react-icons/lib/md/delete';
-import Tooltip from 'common/lib/components/Tooltip';
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 
 export const DeleteSandboxButton = styled(props => (
   <Tooltip title="Delete Sandbox">

packages/app/src/app/components/DeploymentIntegration/DetailInfo/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import Margin from 'common/lib/components/spacing/Margin';
-import { Button } from 'common/lib/components/Button';
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import { Button } from '@codesandbox/common/lib/components/Button';
 
 import { Details, Info } from './elements';
 

packages/app/src/app/components/GitProgress/elements.js

@@ -1,6 +1,6 @@
 import styled, { keyframes } from 'styled-components';
 
-import delayInEffect from 'common/lib/utils/animation/delay-effect';
+import delayInEffect from '@codesandbox/common/lib/utils/animation/delay-effect';
 import OpaqueLogo from 'app/components/OpaqueLogo';
 import GitHubLogo from 'app/components/GitHubLogo';
 import Cube from './Cube';

packages/app/src/app/components/HeaderSearchBar/elements.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import SearchIcon from 'react-icons/lib/go/search';
-import Relative from 'common/lib/components/Relative';
+import Relative from '@codesandbox/common/lib/components/Relative';
 
 export const Container = styled(Relative)`
   display: flex;

packages/app/src/app/components/HeaderSearchBar/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import history from 'app/utils/history';
-import { searchUrl } from 'common/lib/utils/url-generator';
+import { searchUrl } from '@codesandbox/common/lib/utils/url-generator';
 
 import {
   Container,

packages/app/src/app/components/Integration/DetailInfo/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import CrossIcon from 'react-icons/lib/md/clear';
-import Margin from 'common/lib/components/spacing/Margin';
-import Tooltip from 'common/lib/components/Tooltip';
-import { Button } from 'common/lib/components/Button';
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import Tooltip from '@codesandbox/common/lib/components/Tooltip';
+import { Button } from '@codesandbox/common/lib/components/Button';
 
 import { Details, Heading, Info, Action } from './elements';
 

packages/app/src/app/components/IntegrationModal/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 
-import Centered from 'common/lib/components/flex/Centered';
-import Margin from 'common/lib/components/spacing/Margin';
-import Relative from 'common/lib/components/Relative';
+import Centered from '@codesandbox/common/lib/components/flex/Centered';
+import Margin from '@codesandbox/common/lib/components/spacing/Margin';
+import Relative from '@codesandbox/common/lib/components/Relative';
 
 import {
   Container,

packages/app/src/app/components/Loading/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import Logo from 'common/lib/components/Logo';
-import Centered from 'common/lib/components/flex/Centered';
+import Logo from '@codesandbox/common/lib/components/Logo';
+import Centered from '@codesandbox/common/lib/components/flex/Centered';
 
 import { LogoContainer } from './elements';
 

packages/app/src/app/components/Overlay/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { observer } from 'mobx-react';
 
 import { Transition, animated, config } from 'react-spring/renderprops';
-import track from 'common/lib/utils/analytics';
+import track from '@codesandbox/common/lib/utils/analytics';
 
 class OverlayComponent extends React.Component {
   state = {

packages/app/src/app/components/Preview/DevTools/Console/Input/index.monaco.js

@@ -3,12 +3,16 @@ import React from 'react';
 import styled from 'styled-components';
 
 import ChevronRight from 'react-icons/lib/md/chevron-right';
-import theme from 'common/lib/theme';
+import theme from '@codesandbox/common/lib/theme';
 
 import MonacoEditor from 'app/components/CodeEditor/Monaco/MonacoReactComponent';
 import defineTheme from 'app/components/CodeEditor/Monaco/define-theme';
 
-import { ARROW_UP, ARROW_DOWN, ENTER } from 'common/lib/utils/keycodes';
+import {
+  ARROW_UP,
+  ARROW_DOWN,
+  ENTER,
+} from '@codesandbox/common/lib/utils/keycodes';
 
 import { IconContainer } from './elements';
 

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

@@ -4,11 +4,11 @@ import CodeMirror from 'codemirror';
 import styled from 'styled-components';
 
 import ChevronRight from 'react-icons/lib/md/chevron-right';
-import theme from 'common/lib/theme';
+import theme from '@codesandbox/common/lib/theme';
 
 import { getCodeMirror } from 'app/utils/codemirror';
 
-import { ARROW_UP, ARROW_DOWN, ENTER } from 'common/lib/utils/keycodes';
+import { ARROW_UP, ARROW_DOWN, ENTER } from '@codesandbox/common/lib/utils/keycodes';
 
 import { IconContainer, CodeMirrorContainer } from './elements';