re-structure to monorepo.

packages/webapp/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,38 @@
+// @ts-nocheck
+import React from 'react';
+import { Position, Drawer } from '@blueprintjs/core';
+
+import '@/style/components/Drawer.scss';
+
+import { DrawerProvider } from './DrawerProvider';
+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}
+    >
+      <DrawerProvider {...props}>{children}</DrawerProvider>
+    </Drawer>
+  );
+}
+
+const DrawerRoot = compose(withDrawerActions)(DrawerComponent);
+export { DrawerRoot as Drawer };

packages/webapp/src/components/Drawer/DrawerActionsBar.tsx

@@ -0,0 +1,13 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+
+import { DashboardActionsBar } from '../Dashboard';
+
+export function DrawerActionsBar({ ...props }) {
+  return <DrawerActionsBarRoot {...props} />;
+}
+
+const DrawerActionsBarRoot = styled(DashboardActionsBar)`
+  border-bottom: 1px solid #d9d9da;
+`;

packages/webapp/src/components/Drawer/DrawerBody.tsx

@@ -0,0 +1,18 @@
+// @ts-nocheck
+import React from 'react';
+import { Classes } from '@blueprintjs/core';
+import { LoadingIndicator } from '../Indicator';
+
+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>;
+}
+
+export * from './DrawerActionsBar';

packages/webapp/src/components/Drawer/DrawerHeaderContent.tsx

@@ -0,0 +1,75 @@
+// @ts-nocheck
+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 styled from 'styled-components';
+import { compose } from '@/utils';
+
+/**
+ * Drawer header content.
+ */
+function DrawerHeaderContentRoot(props) {
+  const {
+    icon,
+    title = <T id={'view_paper'} />,
+    subTitle,
+    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}
+        <SubTitle>{subTitle}</SubTitle>
+      </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 const DrawerHeaderContent = compose(withDrawerActions)(
+  DrawerHeaderContentRoot,
+);
+
+/**
+ * SubTitle Drawer header.
+ * @returns {React.JSX}
+ */
+function SubTitle({ children }) {
+  if (children == null) {
+    return null;
+  }
+
+  return <SubTitleHead>{children}</SubTitleHead>;
+}
+
+const SubTitleHead = styled.div`
+  color: #666;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1;
+  padding: 2px 0px;
+  margin: 2px 0px;
+`;

packages/webapp/src/components/Drawer/DrawerInsider.tsx

@@ -0,0 +1,32 @@
+// @ts-nocheck
+import React from 'react';
+import classnames from 'classnames';
+import { LoadingIndicator } from '../Indicator';
+
+/**
+ * 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>
+  );
+}

packages/webapp/src/components/Drawer/DrawerMainTabs.tsx

@@ -0,0 +1,55 @@
+// @ts-nocheck
+import React from 'react';
+import { Tabs } from '@blueprintjs/core';
+import styled from 'styled-components';
+
+/**
+ * Drawer main tabs.
+ */
+export function DrawerMainTabs({ children, ...restProps }) {
+  return (
+    <DrawerMainTabsRoot>
+      <Tabs animate={true} large={true} {...restProps}>
+        {children}
+      </Tabs>
+    </DrawerMainTabsRoot>
+  );
+}
+
+const DrawerMainTabsRoot = styled.div`
+  .bp3-tabs {
+    .bp3-tab-list {
+      position: relative;
+      background-color: #fff;
+      padding: 0 15px;
+      border-bottom: 2px solid #e1e2e8;
+
+      > *:not(:last-child) {
+        margin-right: 25px;
+      }
+
+      &.bp3-large > .bp3-tab {
+        font-size: 15px;
+        color: #7f8596;
+        margin: 0 1rem;
+
+        &[aria-selected='true'],
+        &:not([aria-disabled='true']):hover {
+          color: #0052cc;
+        }
+      }
+      .bp3-tab-indicator-wrapper .bp3-tab-indicator {
+        height: 2px;
+        bottom: -2px;
+      }
+    }
+
+    .bp3-tab-panel {
+      margin-top: 0;
+
+      .card {
+        margin: 15px;
+      }
+    }
+  }
+`;

packages/webapp/src/components/Drawer/DrawerProvider.tsx

@@ -0,0 +1,17 @@
+// @ts-nocheck
+import React, { createContext, useContext } from 'react';
+
+const DrawerContext = createContext();
+
+/**
+ * Account form provider.
+ */
+function DrawerProvider({ ...props }) {
+  const provider = { ...props };
+
+  return <DrawerContext.Provider value={provider} {...props} />;
+}
+
+const useDrawerContext = () => useContext(DrawerContext);
+
+export { DrawerProvider, useDrawerContext };

packages/webapp/src/components/Drawer/DrawerSuspense.tsx

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

packages/webapp/src/components/Drawer/index.ts

@@ -0,0 +1,7 @@
+// @ts-nocheck
+export * from './Drawer';
+export * from './DrawerSuspense';
+export * from './DrawerHeaderContent';
+export * from './DrawerBody';
+export * from './DrawerInsider';
+export * from './DrawerMainTabs';