chrone: sperate client and server to different repos.

src/components/Drawer/Drawer.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Position, Drawer } from '@blueprintjs/core';
+
+import 'style/components/Drawer.scss';
+
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+import { compose } from 'utils';
+
+/**
+ * Drawer component.
+ */
+function DrawerComponent(props) {
+  const { name, children, onClose, closeDrawer } = props;
+
+  const handleClose = (event) => {
+    closeDrawer(name);
+    onClose && onClose(event);
+  };
+
+  return (
+    <Drawer
+      size={'700px'}
+      canOutsideClickClose={true}
+      canEscapeKeyClose={true}
+      position={Position.RIGHT}
+      onClose={handleClose}
+      portalClassName={'drawer-portal'}
+      {...props}
+    >
+      {children}
+    </Drawer>
+  );
+}
+
+export default compose(withDrawerActions)(DrawerComponent);

src/components/Drawer/DrawerHeaderContent.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import { FormattedMessage as T } from 'components';
+import { Classes, Icon, H4, Button } from '@blueprintjs/core';
+
+import withDrawerActions from 'containers/Drawer/withDrawerActions';
+
+import { compose } from 'utils';
+
+/**
+ * Drawer header content.
+ */
+function DrawerHeaderContent(props) {
+  const {
+    icon,
+    title = <T id={'view_paper'} />,
+    onClose,
+    name,
+    closeDrawer,
+  } = props;
+
+  if (title == null) {
+    return null;
+  }
+
+  const handleClose = (event) => {
+    closeDrawer(name);
+    onClose && onClose(event);
+  };
+
+  return (
+    <div className={Classes.DRAWER_HEADER}>
+      <Icon icon={icon} iconSize={Icon.SIZE_LARGE} />
+      <H4>{title}</H4>
+
+      <Button
+        aria-label="Close"
+        className={Classes.DIALOG_CLOSE_BUTTON}
+        icon={<Icon icon="small-cross" iconSize={Icon.SIZE_LARGE} />}
+        minimal={true}
+        onClick={handleClose}
+      />
+    </div>
+  );
+}
+
+export default compose(withDrawerActions)(DrawerHeaderContent);

src/components/Drawer/DrawerInsider.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import classnames from 'classnames';
+import LoadingIndicator from 'components/LoadingIndicator';
+
+/**
+ * Drawer inside.
+ */
+export function DrawerInsider({
+  loading,
+  children,
+  name,
+  mount = false,
+  className,
+}) {
+  return (
+    <div className={classnames({
+      'drawer__insider': true,
+      'drawer__insider--loading': loading,
+      [`drawer__insider--${name}`]: !!name,
+    }, className)}>
+      <LoadingIndicator loading={loading} mount={mount}>
+        { children }
+      </LoadingIndicator>
+    </div>
+  );
+}

src/components/Drawer/DrawerMainTabs.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Tabs } from '@blueprintjs/core';
+
+/**
+ * Drawer main tabs.
+ */
+export function DrawerMainTabs({ children, ...restProps }) {
+  return (
+    <div class="drawer__main-tabs">
+      <Tabs animate={true} large={true} {...restProps}>
+        {children}
+      </Tabs>
+    </div>
+  );
+}

src/components/Drawer/DrawerSuspense.js

@@ -0,0 +1,13 @@
+import React, { Suspense } from 'react';
+import { DrawerLoading } from 'components';
+
+/**
+ * Loading content.
+ */
+function LoadingContent() {
+  return <DrawerLoading loading={true} />;
+}
+
+export default function DrawerSuspense({ children }) {
+  return <Suspense fallback={<LoadingContent />}>{children}</Suspense>;
+}

src/components/Drawer/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Classes } from '@blueprintjs/core';
+import LoadingIndicator from 'components/LoadingIndicator';
+
+export function DrawerLoading({ loading, mount = false, children }) {
+  return (
+    <LoadingIndicator loading={loading} mount={mount}>
+      {children}
+    </LoadingIndicator>
+  );
+}
+
+export function DrawerBody({ children }) {
+  return <div className={Classes.DRAWER_BODY}>{children}</div>;
+}