started editor

src/containers/App.tsx

@@ -4,11 +4,12 @@ import { bindActionCreators } from 'redux';
 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 { NavLink, Switch, Route, Redirect } from 'react-router-dom';
 import { FlowLayout } from "~/containers/flow/FlowLayout";
 import { LoginLayout } from "~/containers/login/LoginLayout";
 import { MainLayout } from "~/containers/main/MainLayout";
 import { ImageExample } from "~/containers/examples/ImageExample";
+import { EditorExample } from "~/containers/examples/EditorExample";
 
 interface IAppProps {}
 interface IAppState {}
@@ -20,12 +21,12 @@ class Component extends React.Component<IAppProps, IAppState> {
         <MainLayout>
           <Switch>
             <Route path="/examples/image" component={ImageExample} />
+            <Route path="/examples/edit" component={EditorExample} />
             <Route path="/" component={FlowLayout} />
 
-            <Route
-              path="/login"
-              component={LoginLayout}
-            />
+            <Route path="/login" component={LoginLayout} />
+
+            <Redirect to="/" />
           </Switch>
         </MainLayout>
       </ConnectedRouter>

src/containers/examples/EditorExample/index.tsx

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+import { Card } from "~/components/containers/Card";
+import * as styles from './styles.scss';
+import { Group } from "~/components/containers/Group";
+
+interface IProps {}
+
+const EditorExample: FC<IProps> = () => (
+    <Card className={styles.wrap}>
+      <Group horizontal className={styles.group}>
+        <div className={styles.editor}>
+          editor
+        </div>
+
+        <div className={styles.panel}>
+          panel
+        </div>
+      </Group>
+    </Card>
+);
+
+export { EditorExample };

src/containers/examples/EditorExample/styles.scss

@@ -0,0 +1,22 @@
+.wrap {
+  height: calc(100vh - 20px);
+  align-items: stretch;
+  justify-content: center;
+  display: flex;
+}
+
+.group {
+  display: flex;
+  align-items: stretch !important;
+  justify-content: stretch;
+  flex: 1;
+}
+
+.panel {
+  background: red;
+  flex: 0 0 33%;
+}
+
+.editor {
+  flex: 1;
+}