better sidepane

package-lock.json

@@ -2569,9 +2569,9 @@
       "integrity": "sha512-2azXFP9n4aA2QNLkKm/F9pzKxgYj1SMawZ5Eh9iC21RH3XNcFsivLVU2NhpMgQm7YobSByvIol4c42ZFusXFHQ=="
     },
     "@types/prop-types": {
-      "version": "15.7.0",
+      "version": "15.7.1",
-      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.1.tgz",
-      "integrity": "sha512-eItQyV43bj4rR3JPV0Skpl1SncRCdziTEK9/v8VwXmV6d/qOUO8/EuWeHBbCZcsfSHfzI5UyMJLCSXtxxznyZg=="
+      "integrity": "sha512-CFzn9idOEpHrgdw8JsoTkaDDyRWk1jrzIV8djzcgpq0y9tG4B4lFT+Nxh52DVpDXV+n4+NPNv7M1Dj5uMp6XFg=="
     },
     "@types/q": {
       "version": "1.5.1",
@@ -2580,9 +2580,9 @@
       "dev": true
     },
     "@types/react": {
-      "version": "16.8.1",
+      "version": "16.8.23",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.23.tgz",
-      "integrity": "sha512-tD1ETKJcuhANOejRc/p7OgQ16DKnbGi0M3LccelKlPnUCDp2a5koVxZFoRN9HN+A+m84HB5VGN7I+r3nNhS3PA==",
+      "integrity": "sha512-abkEOIeljniUN9qB5onp++g0EY38h7atnDHxwKUFz1r3VH1+yG1OKi2sNPTyObL40goBmfKFpdii2lEzwLX1cA==",
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^2.2.0"
@@ -4937,6 +4937,10 @@
         }
       }
     },
+    "classie": {
+      "version": "github:eiriklv/classie#da1d3019904433872a8656d3cd69fc41d69c477a",
+      "from": "github:eiriklv/classie"
+    },
     "classnames": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
@@ -6338,9 +6342,9 @@
       }
     },
     "csstype": {
-      "version": "2.6.3",
+      "version": "2.6.6",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.3.tgz",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.6.tgz",
-      "integrity": "sha512-rINUZXOkcBmoHWEyu7JdHu5JMzkGRoMX4ov9830WNgxf5UYxcBUO0QTKAqeJ5EZfSdlrcJYkC8WwfVW7JYi4yg=="
+      "integrity": "sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -6524,6 +6528,10 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "desandro-get-style-property": {
+      "version": "github:eiriklv/get-style-property#a5a74ad48d96c7d5ddcf652e9fa5d4283af37823",
+      "from": "github:eiriklv/get-style-property"
+    },
     "destroy": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
@@ -6593,6 +6601,19 @@
         "buffer-indexof": "^1.0.0"
       }
     },
+    "doc-ready": {
+      "version": "github:eiriklv/doc-ready#31c2481101af5dab33311fea4c7fc684b58fa8ad",
+      "from": "github:eiriklv/doc-ready",
+      "requires": {
+        "eventie": "github:eiriklv/eventie"
+      },
+      "dependencies": {
+        "eventie": {
+          "version": "github:eiriklv/eventie#c9d290c6aa57712257dc8c0b6bf21c9374190a3c",
+          "from": "github:eiriklv/eventie"
+        }
+      }
+    },
     "doctrine": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
@@ -7282,12 +7303,21 @@
       "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
       "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q=="
     },
+    "eventemitter": {
+      "version": "github:braznaavtrav/EventEmitter#7169056a2f8b3b55d78ab1b85bad39277e7e88b2",
+      "from": "github:braznaavtrav/EventEmitter"
+    },
     "eventemitter3": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-3.1.0.tgz",
       "integrity": "sha512-ivIvhpq/Y0uSjcHDcOIccjmYjGLcP09MFGE7ysAwkAvkXfpZlC985pH2/ui64DKazbTW/4kN3yqozUxlXzI6cA==",
       "dev": true
     },
+    "eventie": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/eventie/-/eventie-1.0.6.tgz",
+      "integrity": "sha1-1P/IsMK15JPCqhsiy+kY067nRDc="
+    },
     "events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz",
@@ -8483,6 +8513,13 @@
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.2.tgz",
       "integrity": "sha1-9wLmMSfn4jHBYKgMFVSstw1QR+U="
     },
+    "get-size": {
+      "version": "github:eiriklv/get-size#c1ebd019815fc6247c094c17a41b61d0e8191b08",
+      "from": "github:eiriklv/get-size",
+      "requires": {
+        "desandro-get-style-property": "github:eiriklv/get-style-property"
+      }
+    },
     "get-stdin": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-4.0.1.tgz",
@@ -10445,6 +10482,10 @@
         "object-visit": "^1.0.0"
       }
     },
+    "matches-selector": {
+      "version": "github:desandro/matches-selector#082376f4bbe7ff8c5c6bb258ec43259c9a80a7c3",
+      "from": "github:desandro/matches-selector#v1.0.3"
+    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -11697,6 +11738,24 @@
         "os-tmpdir": "^1.0.0"
       }
     },
+    "outlayer": {
+      "version": "github:eiriklv/outlayer#aea1c8239d30ccc1d3664ca3fff2f6d4b20fb812",
+      "from": "github:eiriklv/outlayer",
+      "requires": {
+        "desandro-get-style-property": "github:eiriklv/get-style-property",
+        "doc-ready": "github:eiriklv/doc-ready",
+        "eventemitter": "github:braznaavtrav/EventEmitter",
+        "eventie": "github:eiriklv/eventie",
+        "get-size": "github:eiriklv/get-size",
+        "matches-selector": "github:desandro/matches-selector#v1.0.3"
+      },
+      "dependencies": {
+        "eventie": {
+          "version": "github:eiriklv/eventie#c9d290c6aa57712257dc8c0b6bf21c9374190a3c",
+          "from": "github:eiriklv/eventie"
+        }
+      }
+    },
     "output-file-sync": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/output-file-sync/-/output-file-sync-2.0.1.tgz",
@@ -11756,6 +11815,16 @@
       "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=",
       "dev": true
     },
+    "packery": {
+      "version": "github:eiriklv/packery#8e812a0a16575ef923f5e72efcea85aadc6fea67",
+      "from": "github:eiriklv/packery",
+      "requires": {
+        "classie": "github:eiriklv/classie",
+        "desandro-get-style-property": "github:eiriklv/get-style-property",
+        "get-size": "github:eiriklv/get-size",
+        "outlayer": "github:eiriklv/outlayer"
+      }
+    },
     "pako": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
@@ -13227,9 +13296,9 @@
       "integrity": "sha1-HcKzrqYwKwhTbs7jGIyS0li4jOE="
     },
     "ramda": {
-      "version": "0.24.1",
+      "version": "0.26.1",
-      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.24.1.tgz",
+      "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.26.1.tgz",
-      "integrity": "sha1-w7d1UZfzW43DUCIoJixMkd22uFc="
+      "integrity": "sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ=="
     },
     "ramdasauce": {
       "version": "2.1.3",
@@ -13237,6 +13306,13 @@
       "integrity": "sha512-Ml3CPim4SKwmg5g9UI77lnRSeKr/kQw7YhQ6rfdMcBYy6DMlwmkEwQqjygJ3OhxPR+NfFfpjKl3Tf8GXckaqqg==",
       "requires": {
         "ramda": "^0.24.1"
+      },
+      "dependencies": {
+        "ramda": {
+          "version": "0.24.1",
+          "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.24.1.tgz",
+          "integrity": "sha1-w7d1UZfzW43DUCIoJixMkd22uFc="
+        }
       }
     },
     "randombytes": {
@@ -13288,14 +13364,14 @@
       }
     },
     "react": {
-      "version": "16.8.1",
+      "version": "16.8.6",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.8.6.tgz",
-      "integrity": "sha512-wLw5CFGPdo7p/AgteFz7GblI2JPOos0+biSoxf1FPsGxWQZdN/pj6oToJs1crn61DL3Ln7mN86uZ4j74p31ELQ==",
+      "integrity": "sha512-pC0uMkhLaHm11ZSJULfOBqV4tIZkx87ZLvbbQYunNixAAvjnC+snJCg0XQXn9VIsttVsbZP/H/ewzgsd5fxKXw==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.13.1"
+        "scheduler": "^0.13.6"
       },
       "dependencies": {
         "prop-types": {
@@ -13317,18 +13393,27 @@
               }
             }
           }
+        },
+        "scheduler": {
+          "version": "0.13.6",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
+          "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
         }
       }
     },
     "react-dom": {
-      "version": "16.8.1",
+      "version": "16.8.6",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.1.tgz",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.8.6.tgz",
-      "integrity": "sha512-N74IZUrPt6UiDjXaO7UbDDFXeUXnVhZzeRLy/6iqqN1ipfjrhR60Bp5NuBK+rv3GMdqdIuwIl22u1SYwf330bg==",
+      "integrity": "sha512-1nL7PIq9LTL3fthPqwkvr2zY7phIPjYrT0jp4HjyEQrEROnw4dG41VVwi/wfoCneoleqrNX7iAD+pXebJZwrwA==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.13.1"
+        "scheduler": "^0.13.6"
       },
       "dependencies": {
         "prop-types": {
@@ -13350,6 +13435,15 @@
               }
             }
           }
+        },
+        "scheduler": {
+          "version": "0.13.6",
+          "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.13.6.tgz",
+          "integrity": "sha512-IWnObHt413ucAYKsD9J1QShUKkbKLQQHdxRyw73sw4FN26iWr3DY/H34xGPe4nmL1DwXyWmSWmMrA9TfQbE/XQ==",
+          "requires": {
+            "loose-envify": "^1.1.0",
+            "object-assign": "^4.1.1"
+          }
         }
       }
     },
@@ -13477,10 +13571,18 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/react-packery-component/-/react-packery-component-1.0.2.tgz",
       "integrity": "sha1-FSEiHaSRZ8s87fR9W1UsM0iBgKk=",
+      "requires": {
+        "imagesloaded": "github:eiriklv/imagesloaded",
+        "packery": "github:eiriklv/packery"
+      },
       "dependencies": {
         "imagesloaded": {
-          "version": "git+https://github.com/eiriklv/imagesloaded.git#04535a148206e58790927e133f24ca199163b995",
+          "version": "github:eiriklv/imagesloaded#04535a148206e58790927e133f24ca199163b995",
-          "from": "git+https://github.com/eiriklv/imagesloaded.git"
+          "from": "github:eiriklv/imagesloaded",
+          "requires": {
+            "eventie": ">=1.0.4 <2",
+            "wolfy87-eventemitter": "4.x"
+          }
         }
       }
     },
@@ -13776,6 +13878,13 @@
       "requires": {
         "ramda": "^0.24.1",
         "ramdasauce": "^2.0.0"
+      },
+      "dependencies": {
+        "ramda": {
+          "version": "0.24.1",
+          "resolved": "https://registry.npmjs.org/ramda/-/ramda-0.24.1.tgz",
+          "integrity": "sha1-w7d1UZfzW43DUCIoJixMkd22uFc="
+        }
       }
     },
     "regenerate": {
@@ -17074,6 +17183,11 @@
         "string-width": "^1.0.2 || 2"
       }
     },
+    "wolfy87-eventemitter": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/wolfy87-eventemitter/-/wolfy87-eventemitter-4.3.0.tgz",
+      "integrity": "sha1-ZJc5bJXnQ1nwa241QJM5MY2Nlk8="
+    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",

package.json

@@ -57,7 +57,7 @@
     "@hot-loader/react-dom": "^16.8.1",
     "@types/classnames": "^2.2.7",
     "@types/node": "^11.9.0",
-    "@types/react": "16.8.1",
+    "@types/react": "16.8.23",
     "axios": "^0.18.0",
     "babel-runtime": "^6.26.0",
     "classnames": "^2.2.6",
@@ -70,8 +70,9 @@
     "lodash": "^4.17.10",
     "node-sass": "^4.11.0",
     "raleway-cyrillic": "^4.0.2",
-    "react": "16.8.1",
+    "ramda": "^0.26.1",
-    "react-dom": "16.8.1",
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
     "react-grid-layout": "^0.16.6",
     "react-hot-loader": "^4.1.1",
     "react-layout-pack": "^0.2.3",

src/components/flow/Cell/index.tsx

@@ -7,6 +7,7 @@ interface IProps {
   width?: number;
   title?: string;
   is_hero?: boolean;
+  is_stamp?: boolean;
 }
 
 const Cell: FC<IProps> = ({
@@ -14,6 +15,7 @@ const Cell: FC<IProps> = ({
   height = 1,
   title,
   is_hero,
+  is_stamp,
 }) => (
     <div
       className={classNames(styles.cell, { is_hero })}

src/components/flow/TestGrid/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Cell } from "~/components/flow/Cell";
+import { range } from 'ramda';
 
 const style = require('./style.scss');
 
@@ -11,13 +12,14 @@ export const TestGrid = () => (
       title="Example cell Example cell Example cell Example cell Example cell Example cell Example cell "
       is_hero
     />
-
+    {
-    <Cell />
+      range(1,20).map(el => (
-    <Cell
+        <Cell
-      height={2}
+          width={1}
-      title="Example cell Example cell Example cell Example cell Example cell Example cell Example cell "
+          height={1}
-    />
+          title="Example cell Example cell Example cell Example cell Example cell Example cell Example cell "
-    <Cell width={2} />
+        />
-    <Cell />
+      ))
+    }
   </div>
 );

src/components/login/LoginForm/index.tsx

@@ -7,8 +7,8 @@ import { userSendLoginRequest, userSetLoginError } from "~/redux/user/actions";
 import { IUserFormStateLogin, IUserState } from "~/redux/user/reducer";
 import { Info } from "~/components/input/Info";
 
-const login = require('~/containers/LoginLayout/style');
+import * as login from '~/containers/login/LoginLayout/styles.scss';
-const style = require('./style.scss');
+import * as style from './style.scss';
 
 interface ILoginFormProps {
   error: IUserFormStateLogin['error'],

src/components/main/SidePane/index.tsx

@@ -1,25 +1,38 @@
-import React, { useEffect, useState } from 'react';
+import React, { FC, LegacyRef, ReactChild, useCallback, useEffect, useState } from 'react';
 import * as styles from './styles.scss';
 import classNames from 'classnames';
 
-export const SidePane = ({ }) => {
+interface IProps {
+  container: React.RefObject<HTMLDivElement>;
+}
+
+export const SidePane: FC<IProps> = ({
+  container,
+}) => {
   const [left, setLeft] = useState(0);
 
-  const moveThis = () => {
+  const moveThis = useCallback(() => {
-    const shift = ((document.body.getBoundingClientRect().width - 1024) / 2) - 54 - 10;
+    const shift = window.innerWidth > (1024 + 64 + 20)
+      ? ((window.innerWidth - 1024 - 64 - 20) / 2) - 54 - 10 + 64
+      : 10;
+
     setLeft(shift);
-  };
+    console.log({ shift });
+  }, [setLeft, container]);
 
   useEffect(() => {
-    window.addEventListener('resize', moveThis)
+    moveThis();
+    window.addEventListener('resize', moveThis);
+    document.addEventListener('DOMContentLoaded', moveThis);
 
-    return () => { window.removeEventListener('resize', moveThis); }
+    return () => {
-  });
+      window.removeEventListener('resize', moveThis);
-
+      document.removeEventListener('DOMContentLoaded', moveThis);
-  useEffect(moveThis, []);
+    }
+  }, [container]);
 
   return (
-    <div className={styles.pane} style={{ left }}>
+    <div className={styles.pane} style={{ transform: `translate(${left}px, 0px)` }}>
       <div className={classNames(styles.group, 'logo')} />
 
       <div className={styles.group}>

src/containers/App.tsx

@@ -5,8 +5,10 @@ import { hot } from 'react-hot-loader';
 import { ConnectedRouter } from "connected-react-router";
 import { history } from "~/redux/store";
 import { NavLink, Switch, Route } from 'react-router-dom';
-import { FlowLayout } from "~/containers/FlowLayout";
+import { FlowLayout } from "~/containers/flow/FlowLayout";
-import { LoginLayout } from "~/containers/LoginLayout";
+import { LoginLayout } from "~/containers/login/LoginLayout";
+import { MainLayout } from "~/containers/main/MainLayout";
+import { ImageExample } from "~/containers/examples/ImageExample";
 
 interface IAppProps {}
 interface IAppState {}
@@ -15,19 +17,17 @@ class Component extends React.Component<IAppProps, IAppState> {
   render() {
     return (
       <ConnectedRouter history={history}>
-        <div>
+        <MainLayout>
           <Switch>
-            <Route
+            <Route path="/examples/image" component={ImageExample} />
-              exact
+            <Route path="/" component={FlowLayout} />
-              path="/"
+
-              component={FlowLayout}
-            />
             <Route
               path="/login"
               component={LoginLayout}
             />
           </Switch>
-        </div>
+        </MainLayout>
       </ConnectedRouter>
     );
   }

src/containers/FlowLayout/index.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import { MainLayout } from "~/containers/MainLayout";
-import { HeroPlaceholder } from "~/components/flow/HeroPlaceholder";
-import { TestGrid } from "~/components/flow/TestGrid";
-// const style = require('./style.scss');
-
-export const FlowLayout = () => (
-  <MainLayout>
-    <div className="default_container content_container">
-      <TestGrid />
-    </div>
-  </MainLayout>
-);

src/containers/MainLayout/index.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { SidePane } from "~/components/main/SidePane";
-import { Header } from "~/components/main/Header";
-
-import * as styles from './styles.scss';
-
-export const MainLayout = ({ children }) => (
-  <div className={styles.wrapper}>
-    {
-      // <Header />
-    }
-    {
-      <SidePane />
-    }
-    {children}
-  </div>
-);

src/containers/MainLayout/styles.scss

@@ -1,4 +0,0 @@
-.wrapper {
-  width: 100%;
-  padding: $gap 0;
-}

src/containers/examples/ImageExample/index.tsx

@@ -0,0 +1,9 @@
+import React, { FC } from 'react';
+
+interface IProps {}
+
+const ImageExample: FC<IProps> = () => (
+    <div>image example</div>
+);
+
+export { ImageExample };

src/containers/flow/FlowLayout/index.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { MainLayout } from "~/containers/main/MainLayout";
+import { TestGrid } from "~/components/flow/TestGrid";
+// const style = require('./style.scss');
+
+export const FlowLayout = () => (
+  <div className="default_container content_container">
+    <TestGrid />
+  </div>
+);

src/containers/login/LoginLayout/index.tsx

@@ -3,15 +3,15 @@ import { LoginForm } from '~/components/login/LoginForm';
 import { Header } from "~/components/main/Header";
 import { GodRays } from "~/components/main/GodRays";
 
-const style = require('./style.scss');
+import * as styles from './styles.scss';
 
 export const LoginLayout: React.FunctionComponent<{}> = () => (
-  <div className={style.wrapper}>
+  <div className={styles.wrapper}>
     <GodRays />
-    <div className={style.header}>
+    <div className={styles.header}>
       <Header />
     </div>
-    <div className={style.container}>
+    <div className={styles.container}>
       <LoginForm />
     </div>
   </div>

src/containers/main/MainLayout/index.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { SidePane } from "~/components/main/SidePane";
+import * as styles from './styles.scss';
+import { useRef } from "react";
+
+export const MainLayout = ({ children }) => {
+  const container = useRef(null);
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.content} ref={container}>
+        {children}
+      </div>
+
+      <SidePane container={container} />
+    </div>
+  );
+};

src/containers/main/MainLayout/styles.scss

@@ -0,0 +1,15 @@
+.wrapper {
+  width: 100%;
+  padding: $gap $gap 0 74px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-direction: row;
+  box-sizing: border-box;
+}
+
+.content {
+  flex: 0 1 $content_width;
+  position: relative;
+  background: red;
+}

src/containers/node/NodeLayout/index.tsx

@@ -0,0 +1,10 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+
+interface IProps {}
+
+const NodeLayout: FC<IProps> = () => (
+  <div></div>
+);
+
+export { NodeLayout };

src/index.tsx

@@ -1,9 +1,3 @@
-/*
-  LAYOUT PACKING:
-  https://github.com/rexxars/react-layout-pack
-  https://github.com/gxapplications/react-gridifier
-  https://github.com/STRML/react-grid-layout
- */
 import * as React from 'react';
 import { render } from 'react-dom';
 import { Provider } from 'react-redux';