Code reorganization

CompuIves · CompuIves · commit 2d2b3241e874 · 2019-03-22T19:20:40.000+01:00
diff --git a/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js b/packages/app/src/app/pages/Dashboard/Content/routes/TeamView/index.js
@@ -3,7 +3,7 @@ import { Query, Mutation } from 'react-apollo';
 import { inject, Observer } from 'mobx-react';
 import { sortBy } from 'lodash-es';
 
-import UserWithAvatar from 'app/components/UserWithAvatar';
+import { UserWithAvatar } from 'common/lib/components/UserWithAvatar';
 import { Button } from 'common/lib/components/Button';
 import AutosizeTextArea from 'common/lib/components/AutosizeTextArea';
 import Margin from 'common/lib/components/spacing/Margin';
diff --git a/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/index.js b/packages/app/src/app/pages/Profile/Header/UserInfo/ProfileInfo/index.js
@@ -4,7 +4,7 @@ import Row from 'common/lib/components/flex/Row';
 import Column from 'common/lib/components/flex/Column';
 
 import Margin from 'common/lib/components/spacing/Margin';
-import PatronStar from 'app/components/PatronStar';
+import { PatronStar } from 'common/lib/components/PatronStar';
 
 import { ProfileImage, Name, Username, IconWrapper } from './elements';
 
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.js
@@ -9,7 +9,7 @@ import {
 
 import TeamIcon from 'react-icons/lib/md/people';
 
-import UserWithAvatar from 'app/components/UserWithAvatar';
+import { UserWithAvatar } from 'common/lib/components/UserWithAvatar';
 import Stats from 'app/pages/common/Stats';
 import PrivacyStatus from 'app/components/PrivacyStatus';
 import GithubBadge from 'common/lib/components/GithubBadge';
diff --git a/packages/app/src/app/pages/Sandbox/SearchDependencies/DependencyHit/elements.js b/packages/app/src/app/pages/Sandbox/SearchDependencies/DependencyHit/elements.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import Select from 'common/lib/components/Select';
-import UserWithAvatar from 'app/components/UserWithAvatar';
+import { UserWithAvatar } from 'common/lib/components/UserWithAvatar';
 
 export const Container = styled.div`
   display: flex;
diff --git a/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/elements.js b/packages/app/src/app/pages/Search/SandboxCard/SandboxInfo/elements.js
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import UserWithAvatar from 'app/components/UserWithAvatar';
+import { UserWithAvatar } from 'common/lib/components/UserWithAvatar';
 
 export const CenteredText = styled.div`
   display: inline-flex;
diff --git a/packages/common/babel.config.js b/packages/common/babel.config.js
@@ -6,12 +6,12 @@ module.exports = {
     '@babel/preset-typescript',
   ],
   plugins: [
+    'lodash',
     '@babel/plugin-transform-async-to-generator',
     '@babel/plugin-proposal-object-rest-spread',
     '@babel/plugin-proposal-class-properties',
     '@babel/plugin-transform-runtime',
     '@babel/plugin-syntax-dynamic-import',
-    'babel-plugin-lodash',
     'babel-plugin-system-import-transformer',
     'babel-plugin-macros',
   ],
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -19,7 +19,7 @@
     "ot": "^0.0.15",
     "react-icons": "^2.2.7",
     "react-input-autosize": "^2.2.1",
-    "react-spring": "^8.0.4",
+    "react-spring": "^8.0.18",
     "react-textarea-autosize": "^6.1.0",
     "react-tippy": "^0.14.0",
     "styled-components": "^4.1.2"
@@ -30,6 +30,7 @@
     "@types/color": "0.12.1",
     "@types/humps": "^1.1.2",
     "@types/jest": "^24.0.9",
+    "@types/lodash": "^4.14.123",
     "@types/react": "^16.8.6",
     "@types/react-icons": "^2.2.7",
     "@types/socket.io-client": "^1.4.32",
diff --git a/packages/common/src/components/FeaturedSandbox/elements.ts b/packages/common/src/components/FeaturedSandbox/elements.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import UserWithAvatar from 'app/src/app/components/UserWithAvatar';
+import { UserWithAvatar } from '../UserWithAvatar';
 import theme from '../../theme';
 import Stats from '../Stats/index';
 
diff --git a/packages/common/src/components/FeaturedSandbox/index.tsx b/packages/common/src/components/FeaturedSandbox/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Spring, animated, Transition } from 'react-spring/renderprops';
+import { Spring, animated, Transition } from 'react-spring/renderprops.cjs';
 import { camelizeKeys } from 'humps';
 
 import Preview from '../Preview';
diff --git a/packages/common/src/components/PatronStar/elements.ts b/packages/common/src/components/PatronStar/elements.ts
@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import Tooltip from 'common/lib/components/Tooltip';
+import Tooltip from '../Tooltip';
 
 export const Container = styled(Tooltip)`
   margin-left: 0.25rem;
diff --git a/packages/common/src/components/PatronStar/index.tsx b/packages/common/src/components/PatronStar/index.tsx
@@ -4,7 +4,12 @@ import StarIcon from 'react-icons/lib/go/star';
 
 import { Container } from './elements';
 
-function PatronStar({ subscriptionSince, ...props }) {
+interface PatronStarProps {
+  subscriptionSince: string;
+  style?: React.CSSProperties;
+}
+
+export function PatronStar({ subscriptionSince, ...props }: PatronStarProps) {
   return (
     <Container
       title={`Patron since ${moment(subscriptionSince).format('MMM Y')}`}
@@ -13,5 +18,3 @@ function PatronStar({ subscriptionSince, ...props }) {
     </Container>
   );
 }
-
-export default PatronStar;
diff --git a/packages/common/src/components/Preview/index.tsx b/packages/common/src/components/Preview/index.tsx
@@ -2,14 +2,14 @@
 import * as React from 'react';
 import { Sandbox, Module } from '../../types';
 import { listen, dispatch, registerFrame, resetState } from 'codesandbox-api';
-import { debounce } from 'lodash-es';
+import debounce from 'lodash/debounce';
 import io from 'socket.io-client';
 
 import { frameUrl, host } from '../../utils/url-generator';
 import { getModulePath } from '../../sandbox/modules';
 import getTemplate from '../../templates';
 
-import { Spring } from 'react-spring/renderprops';
+import { Spring } from 'react-spring/renderprops.cjs';
 
 import { generateFileFromSandbox } from '../../templates/configuration/package-json';
 
diff --git a/packages/common/src/components/UserWithAvatar/elements.ts b/packages/common/src/components/UserWithAvatar/elements.ts
@@ -7,7 +7,7 @@ export const CenteredText = styled.div`
   flex-direction: row;
 `;
 
-export const AuthorName = styled.span`
+export const AuthorName = styled.span<{ useBigName?: boolean }>`
   display: inline-flex;
   align-items: center;
   margin: 0 0.75em;
@@ -26,7 +26,7 @@ export const Names = styled.div`
   flex-direction: column;
 `;
 
-export const Username = styled.div`
+export const Username = styled.div<{ hasTwoNames?: boolean }>`
   ${props =>
     props.hasTwoNames &&
     css`
diff --git a/packages/common/src/components/UserWithAvatar/index.tsx b/packages/common/src/components/UserWithAvatar/index.tsx
@@ -1,26 +1,35 @@
 import React from 'react';
 
-import ContributorHelm from 'common/lib/components/ContributorsBadge';
-import PatronStar from '../PatronStar';
+import ContributorHelm from '../ContributorsBadge';
+import { PatronStar } from '../PatronStar';
 import { CenteredText, AuthorName, Image, Names, Username } from './elements';
 
-function UserWithAvatar({
+export interface UserWithAvatarProps {
+  avatarUrl: string;
+  username: string;
+  name?: string;
+  hideBadge?: boolean;
+  subscriptionSince?: string;
+  useBigName?: boolean;
+}
+
+export function UserWithAvatar({
   avatarUrl,
   username,
   name,
   hideBadge,
   subscriptionSince,
   useBigName,
   ...props
-}) {
+}: UserWithAvatarProps) {
   return (
     <CenteredText {...props}>
       {avatarUrl && <Image src={avatarUrl} alt={username} />}
       <AuthorName useBigName={useBigName}>
         <Names>
           {name && <div>{name}</div>}
           {username && (
-            <Username hasTwoNames={name && username}>{username}</Username>
+            <Username hasTwoNames={name && !!username}>{username}</Username>
           )}
         </Names>
         {subscriptionSince && (
@@ -32,13 +41,10 @@ function UserWithAvatar({
         {!hideBadge && (
           <ContributorHelm
             style={{ margin: '0 .5rem', fontSize: '1.25em' }}
-            width={24}
             username={username}
           />
         )}
       </AuthorName>
     </CenteredText>
   );
 }
-
-export default UserWithAvatar;
diff --git a/packages/common/src/components/WideSandbox/elements.ts b/packages/common/src/components/WideSandbox/elements.ts
@@ -1,6 +1,6 @@
 import styled, { css } from 'styled-components';
 
-import UserWithAvatar from 'app/src/app/components/UserWithAvatar';
+import { UserWithAvatar } from '../UserWithAvatar';
 
 export const BG_COLOR = '#1C2022';
 export const BG_HOVER = '#212629';
diff --git a/packages/common/src/sandbox/modules.ts b/packages/common/src/sandbox/modules.ts
@@ -1,6 +1,6 @@
 // @flow
 import { Module, Directory } from '../types';
-import { memoize } from 'lodash-es';
+import memoize from 'lodash/memoize';
 
 const compareTitle = (
   original: string,
diff --git a/packages/common/src/templates/configuration/sandbox/ui.tsx b/packages/common/src/templates/configuration/sandbox/ui.tsx
@@ -1,8 +1,6 @@
 // @flow
 import * as React from 'react';
-import { sortBy } from 'lodash-es';
-
-import { Sandbox } from '../../../types';
+import sortBy from 'lodash/sortBy';
 
 import * as templates from '../../../templates';
 import { default as Template } from '../../../templates/template';
diff --git a/packages/dynamic-pages/babel.config.js b/packages/dynamic-pages/babel.config.js
diff --git a/packages/dynamic-pages/components/Modal.js b/packages/dynamic-pages/components/Modal.js
@@ -2,7 +2,7 @@ import React from 'react';
 import styled, { createGlobalStyle } from 'styled-components';
 import { ESC } from 'common/lib/utils/keycodes';
 
-import { Spring, animated } from 'react-spring/renderprops';
+import { Spring, animated } from 'react-spring/renderprops.cjs';
 
 const NoScroll = createGlobalStyle`
   html {
diff --git a/packages/dynamic-pages/next.config.js b/packages/dynamic-pages/next.config.js
@@ -1,6 +1,6 @@
 // next.config.js
 const withCSS = require('@zeit/next-css');
-const withTM = require('next-plugin-transpile-modules');
+const withTM = require('next-transpile-modules');
 
 const dotEnvResult = require('dotenv').config();
 
@@ -13,7 +13,7 @@ for (const key of Object.keys(parsedVariables)) {
 
 module.exports = withCSS(
   withTM({
-    transpileModules: ['common', 'app', 'lodash-es'],
+    transpileModules: ['common'],
     webpack(config) {
       // Further custom configuration here
       config.module.rules.unshift({
@@ -28,8 +28,21 @@ module.exports = withCSS(
         ],
       });
 
+      config.module.rules.unshift({
+        test: /common\/.*\.(js)$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              plugins: ['@babel/transform-modules-commonjs'],
+            },
+          },
+        ],
+      });
+
       return config;
     },
+
     env: {
       ...dotEnvVariables,
     },
diff --git a/packages/dynamic-pages/package.json b/packages/dynamic-pages/package.json
@@ -18,8 +18,8 @@
     "http-proxy-middleware": "^0.19.1",
     "isomorphic-unfetch": "^3.0.0",
     "lodash.throttle": "^4.1.1",
-    "next": "^8.0.0",
-    "next-plugin-transpile-modules": "^2.0.0",
+    "next": "^8.0.3",
+    "next-transpile-modules": "^2.0.0",
     "react": "16.8.1",
     "react-dom": "16.8.1",
     "react-visibility-sensor": "^5.0.2"
diff --git a/packages/homepage/src/screens/explore/_SandboxModal.elements.js b/packages/homepage/src/screens/explore/_SandboxModal.elements.js
@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import UserWithAvatar from 'app/src/app/components/UserWithAvatar';
+import { UserWithAvatar } from 'common/lib/components/UserWithAvatar';
 
 import RightArrow from 'react-icons/lib/md/keyboard-arrow-right';
 import LeftArrow from 'react-icons/lib/md/keyboard-arrow-left';
diff --git a/yarn.lock b/yarn.lock
