Profile view support (codesandbox#12)

* React loadable

* Work

* Intermediate

* Yarn updates

* Profile page progress

* Redesign button

* Profile page tweaks

* Profile page redesign

* Get path for user

* Intermediate

* Update deps

* Redesign work

* Adjusting places

* Intermediate

* Showcase view

* Change to sandbox shortid

* Change chevron

* Use new tooltip system

* Modals

* Select sandbox

* Progress

* Likes

* Unique module ids (codesandbox#14)

* Default to project view in embed if module is undefined

* Better tab indenting

* Add two examples

* Warmup cache for new packager (codesandbox#13)

* Warmup cache for new packager

* Throw initial error

* Put new packager full on

* Unique modules

* Prevent confirm modal when forking

* Tweaks

* Finishing touches

* Update logo

* Update snapshots

Author: CompuIves

.babelrc

@@ -10,6 +10,15 @@
         "babel-plugin-transform-object-rest-spread",
         "babel-plugin-transform-class-properties",
         "babel-plugin-transform-runtime",
+        "babel-plugin-syntax-dynamic-import",
+        "babel-plugin-lodash",
+        [
+          "react-loadable/babel",
+          {
+            "server": true,
+            "webpack": true
+          }
+        ],
         "babel-plugin-lodash",
         "babel-plugin-system-import-transformer"
       ]

config/babel.dev.js

@@ -16,6 +16,14 @@ module.exports = {
     require.resolve('babel-plugin-transform-class-properties'),
     require.resolve('babel-plugin-transform-runtime'),
     require.resolve('babel-plugin-lodash'),
+    require.resolve('babel-plugin-syntax-dynamic-import'),
+    [
+      require.resolve('react-loadable/babel'),
+      {
+        server: true,
+        webpack: true,
+      },
+    ],
     require.resolve('react-hot-loader/babel'),
   ],
 };

config/babel.prod.js

@@ -15,6 +15,14 @@ module.exports = {
     require.resolve('babel-plugin-transform-class-properties'),
     require.resolve('babel-plugin-transform-runtime'),
     require.resolve('babel-plugin-lodash'),
+    require.resolve('babel-plugin-syntax-dynamic-import'),
+    [
+      require.resolve('react-loadable/babel'),
+      {
+        server: true,
+        webpack: true,
+      },
+    ],
     // Optimization: hoist JSX that never changes out of render()
     // Disabled because of issues:
     // * https://github.com/facebookincubator/create-react-app/issues/525

package.json

@@ -9,6 +9,7 @@
     "babel-jest": "^19.0.0",
     "babel-loader": "^7.0.0",
     "babel-plugin-lodash": "^3.2.11",
+    "babel-plugin-syntax-dynamic-import": "^6.18.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
     "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-plugin-transform-react-constant-elements": "^6.23.0",
@@ -22,7 +23,7 @@
     "chalk": "1.1.3",
     "connect-history-api-fallback": "1.3.0",
     "cross-spawn": "^5.0.1",
-    "css-loader": "^0.28.0",
+    "css-loader": "^0.28.1",
     "detect-port": "^1.1.1",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^14.1.0",
@@ -36,7 +37,7 @@
     "extract-text-webpack-plugin": "^2.1.0",
     "file-loader": "^0.11.1",
     "filesize": "^3.5.6",
-    "flow-bin": "^0.44.2",
+    "flow-bin": "^0.45.0",
     "fs-extra": "^2.1.2",
     "gulp-replace": "^0.5.4",
     "gzip-size": "3.0.0",
@@ -49,7 +50,7 @@
     "opn": "4.0.2",
     "path-exists": "3.0.0",
     "postcss-loader": "^1.2.1",
-    "prettier": "^1.2.2",
+    "prettier": "^1.3.1",
     "promise": "7.1.1",
     "raw-loader": "^0.5.1",
     "react-hot-loader": "^3.0.0-beta.6",
@@ -58,11 +59,11 @@
     "rimraf": "^2.6.1",
     "run-sequence": "^1.2.2",
     "strip-ansi": "3.0.1",
-    "style-loader": "^0.16.1",
+    "style-loader": "^0.17.0",
     "url-loader": "^0.5.8",
-    "webpack": "^2.4.1",
+    "webpack": "^2.5.0",
     "webpack-dev-middleware": "^1.10.2",
-    "webpack-dev-server": "^2.4.4",
+    "webpack-dev-server": "^2.4.5",
     "whatwg-fetch": "^2.0.3"
   },
   "dependencies": {
@@ -79,9 +80,9 @@
     "codemirror": "^5.25.2",
     "color": "^0.11.4",
     "cssnano": "^3.10.0",
-    "debug": "^2.6.4",
+    "debug": "^2.6.6",
     "file-saver": "^1.3.3",
-    "glamor": "^2.20.12",
+    "glamor": "^2.20.25",
     "gulp": "^3.9.1",
     "gulp-filter": "^5.0.0",
     "gulp-postcss": "^6.4.0",
@@ -97,21 +98,24 @@
     "react-deep-force-update": "^2.0.1",
     "react-dnd": "^2.3.0",
     "react-dnd-html5-backend": "^2.3.0",
-    "react-docgen": "^2.14.1",
+    "react-docgen": "^2.15.0",
     "react-dom": "^15.5.4",
     "react-frame-component": "^1.0.3",
     "react-icons": "^2.2.2",
-    "react-motion": "^0.4.8",
+    "react-loadable": "^3.3.1",
+    "react-modal": "^1.7.7",
+    "react-motion": "^0.5.0",
     "react-proxy": "2",
     "react-redux": "^5.0.4",
     "react-router-dom": "^4.1.1",
     "react-router-redux": "next",
     "react-split-pane": "^0.1.63",
+    "react-tippy": "^0.11.1",
     "redbox-react": "^1.3.6",
     "redux": "^3.6.0",
     "reselect": "^3.0.0",
     "store": "^2.0.4",
-    "styled-components": "^1.4.5",
+    "styled-components": "^1.4.6",
     "tern": "^0.21.0"
   },
   "scripts": {

src/app/components/HoverMenu.js

@@ -0,0 +1,61 @@
+import React from 'react';
+
+type Props = {
+  children: Function,
+  onClose: Function,
+};
+
+type State = {
+  clicked: boolean,
+};
+
+export default class HoverMenu extends React.PureComponent {
+  props: Props;
+
+  state: State = {
+    clicked: false,
+  };
+
+  handleDocumentClick = () => {
+    if (!this.state.clicked) {
+      this.props.onClose();
+    }
+  };
+
+  componentDidMount() {
+    document.addEventListener('click', this.handleDocumentClick);
+  }
+
+  handleViewClick = () => {
+    // Prevent element from closing itself when you click on it
+    this.setState({ clicked: true });
+
+    setTimeout(() => {
+      this.setState({ clicked: false });
+    });
+  };
+
+  setOnclickListener = el => {
+    this.element = el;
+    if (el) {
+      el.addEventListener('click', this.handleViewClick);
+    }
+  };
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleDocumentClick);
+
+    if (this.element) {
+      this.element.removeEventListener('click', this.handleViewClick);
+    }
+  }
+
+  render() {
+    const { children } = this.props;
+    return (
+      <div ref={this.setOnclickListener}>
+        {children}
+      </div>
+    );
+  }
+}

src/app/components/Loading.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import Logo from './Logo';
+import Centered from './flex/Centered';
+
+const animation = keyframes`
+  0%, 10% { transform: rotateZ(0deg); }
+  90%, 100% { transform: rotateZ(360deg); }
+`;
+
+const LogoContainer = styled.div`
+  animation-name: ${animation};
+  animation-duration: 800ms;
+`;
+
+export default () => (
+  <Centered vertical horizontal>
+    <LogoContainer>
+      <Logo width={490} height={490} />
+    </LogoContainer>
+  </Centered>
+);

src/app/components/Logo.js

@@ -31,31 +31,24 @@ export default ({
       <polyline
         fill="none"
         stroke="#FFFFFF"
-        strokeWidth="50"
+        strokeWidth="80"
         strokeMiterlimit="10"
         points="899,287.833 509,513 509,963"
       />
       <line
         fill="none"
         stroke="#FFFFFF"
-        strokeWidth="50"
+        strokeWidth="80"
         strokeMiterlimit="10"
         x1="122.167"
         y1="289"
         x2="511.5"
         y2="513"
       />
-      <path
-        fill="none"
-        stroke="#000000"
-        strokeWidth="4"
-        strokeMiterlimit="10"
-        d="M122.167,739"
-      />
       <polygon
         fill="none"
         stroke="#FFFFFF"
-        strokeWidth="50"
+        strokeWidth="80"
         strokeMiterlimit="10"
         points="121,739.083 510.917,963.042 901,738.333 901,288 511,62 121,289"
       />

src/app/components/Stat/__snapshots__/format-number.test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`formatNumber handles all numbers over 1000 1`] = `"1.0k"`;
+
+exports[`formatNumber handles all numbers over 1000 2`] = `"1.1k"`;
+
+exports[`formatNumber handles all numbers over 1000 3`] = `"1.0k"`;
+
+exports[`formatNumber handles all numbers over 1000 4`] = `"2.1k"`;
+
+exports[`formatNumber handles all numbers over 1000 5`] = `"20.3k"`;
+
+exports[`formatNumber handles all numbers under 1000 1`] = `"42"`;
+
+exports[`formatNumber handles all numbers under 1000 2`] = `"142"`;
+
+exports[`formatNumber handles all numbers under 1000 3`] = `"999"`;
+
+exports[`formatNumber handles all numbers under 1000 4`] = `"1"`;
+
+exports[`formatNumber handles all numbers under 1000 5`] = `"0"`;

src/app/components/Stat/format-number.js

@@ -0,0 +1,7 @@
+export default function(count: number): string {
+  if (count >= 1000) {
+    return `${(count / 1000).toFixed(1)}k`;
+  }
+
+  return `${count}`;
+}

src/app/components/Stat/format-number.test.js

@@ -0,0 +1,19 @@
+import formatNumber from './format-number';
+
+describe('formatNumber', () => {
+  it('handles all numbers under 1000', () => {
+    expect(formatNumber(42)).toMatchSnapshot();
+    expect(formatNumber(142)).toMatchSnapshot();
+    expect(formatNumber(999)).toMatchSnapshot();
+    expect(formatNumber(1)).toMatchSnapshot();
+    expect(formatNumber(0)).toMatchSnapshot();
+  });
+
+  it('handles all numbers over 1000', () => {
+    expect(formatNumber(1042)).toMatchSnapshot();
+    expect(formatNumber(1142)).toMatchSnapshot();
+    expect(formatNumber(1000)).toMatchSnapshot();
+    expect(formatNumber(2099)).toMatchSnapshot();
+    expect(formatNumber(20299)).toMatchSnapshot();
+  });
+});