Profile page (codesandbox#1571)

* start

* pºrogress

* i needed to, sorry

* things

* get liked anmdboxes0

* add more things

* add badges

* add slider

* more things

* add 404

* add menu

* fix more link

* add responsive

* add close account modal

* Fix lib paths

* Update common paths

* Update paths to theme

* Fix return type for template icons

* Update paths

* lodash

* Move some lodash back

* Revert README of codesandbox-api

* Temporary fix for lodash

* Styling tweaks

* Fix my color mistake

* remove slider yay

* remove unsudes deps

* much clean

* add ediing

* fix routing

* move delete when edit

* revert io

* re add mobile

* make link 100%

* only show badge if there are some

* onlu show see all liked if more than 5

* le tweaks

* remove unecessary files

* PR fixes

Author: SaraVieira

package.json

@@ -9,9 +9,11 @@
     "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 --scope codesandbox-browserfs --scope node-services --scope common && 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",
     "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:home": "lerna run start --scope homepage --stream",
     "start:test": "lerna run start:test --scope app --stream",
     "start:dev_api": "lerna run start --parallel --scope codesandbox-api & lerna run start:dev_api --scope app --stream",

packages/app/src/app/components/Preview/DevTools/Terminal/Shell/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { listen, dispatch } from 'codesandbox-api';
 import { withTheme } from 'styled-components';
 import { Terminal } from 'xterm';
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';
 import * as fit from 'xterm/lib/addons/fit/fit';
 
 import getTerminalTheme from '../terminal-theme';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import ContributorHelm from '../ContributorsBadge';
+import ContributorHelm from 'common/lib/components/ContributorsBadge';
 import PatronStar from '../PatronStar';
 import { CenteredText, AuthorName, Image, Names, Username } from './elements';
 

packages/app/src/app/pages/Profile/Header/UserInfo/Stats/Badges/index.js

@@ -3,17 +3,15 @@ import { Link } from 'react-router-dom';
 
 import Margin from 'common/lib/components/spacing/Margin';
 import Badge from 'common/lib/utils/badges/Badge';
-import ContributorsBadge from 'app/components/ContributorsBadge';
+import ContributorsBadge from 'common/lib/components/ContributorsBadge';
 
 import { patronUrl } from 'common/lib/utils/url-generator';
 
 function Badges({ badges, username }) {
   return (
     <Margin style={{ display: 'flex', alignItems: 'center' }} right={2}>
       <Link to={patronUrl()}>
-        {badges.map(badge => (
-          <Badge key={badge.id} badge={badge} size={64} />
-        ))}
+        {badges.map(badge => <Badge key={badge.id} badge={badge} size={64} />)}
       </Link>
 
       <ContributorsBadge

packages/app/src/app/pages/common/Modals/DeploymentModal/index.js

@@ -49,9 +49,7 @@ function DeploymentModal({ store, signals }) {
             <DeployText>Deploying sandbox...</DeployText>
             <DeployAnimationContainer deploying={store.deployment.deploying}>
               <StyledLogo width={70} height={70} />
-              {[0, 1, 2, 3].map(i => (
-                <StyledCube key={i} i={i} size={20} />
-              ))}
+              {[0, 1, 2, 3].map(i => <StyledCube key={i} i={i} size={20} />)}
               <StyledNowLogo backgroundColor="#24282A" />
             </DeployAnimationContainer>
           </Margin>

packages/app/src/embed/components/App/index.js

@@ -88,7 +88,8 @@ export default class App extends React.PureComponent<
       runOnClick,
       verticalMode = window.innerWidth < window.innerHeight,
       tabs,
-    } = props.embedOptions || getSandboxOptions(document.location.href);
+    } =
+      props.embedOptions || getSandboxOptions(document.location.href);
 
     this.state = {
       notFound: false,

packages/app/src/sandbox/version-resolving/merge-dependency.js

@@ -1,4 +1,4 @@
-import { uniq } from 'lodash';
+import { uniq } from 'lodash-es';
 import * as semver from 'semver';
 
 interface ILambdaResponse {

packages/common/src/components/Button/elements.ts

@@ -0,0 +1,143 @@
+import styled, { css } from 'styled-components';
+import Link from 'react-router-dom/Link';
+import theme from '../../theme';
+
+export type OptionProps = {
+  theme: any;
+  disabled?: boolean;
+  red?: boolean;
+  secondary?: boolean;
+  danger?: boolean;
+};
+
+const getBackgroundColor = ({
+  theme: internalTheme,
+  disabled,
+  red,
+  secondary,
+  danger,
+}: OptionProps) => {
+  if (disabled) return `background-color: ${theme.background2.darken(0.1)()}`;
+  if (internalTheme && internalTheme['button.background']) {
+    return `background-color: ${internalTheme['button.background']}`;
+  }
+  if (danger) return `background-color: ${theme.dangerBackground()}`;
+  if (secondary) return `background-color: transparent`;
+  if (red) return `background-color: ${theme.red.darken(0.2)()}`;
+
+  return `background-color: #40A9F3;`;
+};
+
+const getBackgroundHoverColor = ({
+  theme: internalTheme,
+  disabled,
+  red,
+  secondary,
+  danger,
+}: OptionProps) => {
+  if (disabled) return `background-color: ${theme.background2.darken(0.1)()}`;
+  if (internalTheme && internalTheme['button.hoverBackground']) {
+    return `background-color: ${internalTheme['button.hoverBackground']}`;
+  }
+  if (danger) return `background-color: #E25D6A`;
+  if (secondary) return `background-color: #66b9f4`;
+  if (red) return `background-color: #F27777`;
+
+  return `background-color: #66b9f4;`;
+};
+
+const getColor = ({ disabled, secondary }: OptionProps) => {
+  if (disabled) return theme.background2.lighten(1.5)();
+  if (secondary) return `#66b9f4`;
+
+  return 'white';
+};
+
+const getHoverColor = ({ secondary }: OptionProps) => {
+  if (secondary) return 'color: white';
+
+  return '';
+};
+
+const getBorder = ({
+  theme: internalTheme,
+  secondary,
+  danger,
+  red,
+  disabled,
+}: OptionProps) => {
+  if (disabled) return '2px solid #161A1C';
+  if (internalTheme && internalTheme['button.hoverBackground']) {
+    return `2px solid ${internalTheme['button.hoverBackground']}`;
+  }
+  if (secondary) return `2px solid #66B9F4`;
+  if (red) return '2px solid #F27777';
+  if (danger) return '2px solid #E25D6A';
+
+  return '2px solid #66B9F4';
+};
+
+const styles = css<{
+  disabled?: boolean;
+  secondary?: boolean;
+  danger?: boolean;
+  red?: boolean;
+  block?: boolean;
+  small?: boolean;
+}>`
+  transition: 0.3s ease all;
+
+  border: none;
+  outline: none;
+  ${props => getBackgroundColor(props)};
+  background-size: 720%;
+
+  border: ${props => getBorder(props)};
+  border-radius: 4px;
+
+  box-sizing: border-box;
+  font-size: 1.125em;
+  text-align: center;
+  color: ${props => getColor(props)};
+  font-weight: 400;
+  width: ${props => (props.block ? '100%' : 'inherit')};
+
+  user-select: none;
+  text-decoration: none;
+  font-weight: 600;
+
+  ${props =>
+    props.small
+      ? css`
+          padding: 0.5em 0.7em;
+          font-size: 0.875em;
+        `
+      : css`
+          padding: 0.65em 2.25em;
+        `};
+
+  svg {
+    font-size: 1.125em;
+  }
+
+  ${props =>
+    !props.disabled &&
+    `
+  cursor: pointer;
+  `};
+
+  &:hover {
+    ${props => getBackgroundHoverColor(props)};
+    ${props => getHoverColor(props)};
+  }
+`;
+
+export const LinkButton = styled(Link)`
+  ${styles};
+`;
+export const AButton = styled.a`
+  ${styles};
+`;
+export const Button = styled.button`
+  ${styles};
+`;

packages/common/src/components/Button/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { LinkButton, AButton, Button } from './elements';
+
+type Props = {
+  [key: string]: any;
+  to?: string;
+  href?: string;
+  small?: boolean;
+  style?: any;
+};
+
+function ButtonComponent({ style = {}, ...props }: Props) {
+  // Link
+  if (props.to) {
+    return <LinkButton style={style} {...props} />;
+  }
+
+  if (props.href) {
+    return <AButton style={style} {...props} />;
+  }
+
+  return <Button style={style} {...props} />;
+}
+
+export default ButtonComponent;

packages/common/src/components/CommunityBadges/index.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import IconBase from 'react-icons/lib/IconBase';
+import Tooltip from '../Tooltip';
+import getIcon from '../../templates/icons';
+import getDefinition from '../../templates/';
+import Color from 'color';
+import styled from 'styled-components';
+
+const IconContainer = styled.div`
+  max-width: 30%;
+  left: 50%;
+  position: absolute;
+  top: 6px;
+  transform: translateX(-50%);
+
+  svg,
+  img {
+    max-width: 100%;
+    filter: grayscale(0.4);
+    height: auto;
+  }
+`;
+
+export default ({ style, sandboxesNumber, template }) => {
+  const templateInfo = getDefinition(template);
+  const color = templateInfo.color();
+  const lighter = Color(color)
+    .lighten(0.2)
+    .rgb();
+
+  const Icon = getIcon(template);
+
+  return sandboxesNumber >= 50 ? (
+    <Tooltip
+      style={{ display: 'flex', position: 'relative' }}
+      title={`${sandboxesNumber < 100 ? 'Silver' : 'Gold'} medal for ${
+        templateInfo.niceName
+      }`}
+    >
+      <IconBase
+        style={style}
+        width="1em"
+        height="0.67em"
+        viewBox="0 0 204 320"
+        fill="none"
+      >
+        <path d="M162.478 320V182H102v104.895L162.478 320z" fill={color} />
+        <path
+          d="M41.522 319.628V182H102v105.639l-60.478 31.989z"
+          fill={`rgb(${lighter.r},${lighter.g},${lighter.b})`}
+        />
+        <circle
+          cx={102}
+          cy="102.355"
+          r={102}
+          transform="rotate(180 102 102.355)"
+          fill={sandboxesNumber < 100 ? '#EBEBEB' : '#EAC17A'}
+        />
+        <circle
+          cx={102}
+          cy="102.355"
+          r="92.7273"
+          transform="rotate(180 102 102.355)"
+          fill={sandboxesNumber < 100 ? '#C8C8C8' : '#CFAE72'}
+        />
+      </IconBase>
+      <IconContainer>
+        <Icon />
+      </IconContainer>
+    </Tooltip>
+  ) : null;
+};