re-structure to monorepo.

packages/webapp/src/components/Dialog/Dialog.tsx

@@ -0,0 +1,25 @@
+// @ts-nocheck
+import React from 'react';
+import { Dialog } from '@blueprintjs/core';
+import withDialogActions from '@/containers/Dialog/withDialogActions';
+import { compose } from '@/utils';
+
+import '@/style/components/Dialog/Dialog.scss';
+
+function DialogComponent(props) {
+  const { name, children, closeDialog, onClose } = props;
+
+  const handleClose = (event) => {
+    closeDialog(name);
+    onClose && onClose(event);
+  };
+  return (
+    <Dialog {...props} onClose={handleClose}>
+      {children}
+    </Dialog>
+  );
+}
+
+const DialogRoot = compose(withDialogActions)(DialogComponent);
+
+export { DialogRoot as Dialog };

packages/webapp/src/components/Dialog/DialogContent.tsx

@@ -0,0 +1,15 @@
+// @ts-nocheck
+import React from 'react';
+import { Spinner, Classes } from '@blueprintjs/core';
+import classNames from 'classnames';
+
+export function DialogContent(props) {
+  const { isLoading, children } = props;
+
+  const loadingContent = (
+    <div className={classNames(Classes.DIALOG_BODY, 'is-loading')}>
+      <Spinner size={30} />
+    </div>
+  );
+  return isLoading ? loadingContent : children;
+}

packages/webapp/src/components/Dialog/DialogFooter.tsx

@@ -0,0 +1,16 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { Classes } from '@blueprintjs/core';
+
+export function DialogFooter({ children }) {
+  return (
+    <DialogFooterRoot className={Classes.DIALOG_FOOTER}>
+      {children}
+    </DialogFooterRoot>
+  );
+}
+
+const DialogFooterRoot = styled.div`
+  display: flex;
+`;

packages/webapp/src/components/Dialog/DialogFooterActions.tsx

@@ -0,0 +1,42 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import { Classes } from '@blueprintjs/core';
+
+/**
+ * Dialog footer actions.
+ * @returns {React.JSX}
+ */
+export function DialogFooterActions({ alignment = 'right', children }) {
+  return (
+    <DialogFooterActionsRoot
+      className={Classes.DIALOG_FOOTER_ACTIONS}
+      alignment={alignment}
+    >
+      {children}
+    </DialogFooterActionsRoot>
+  );
+}
+
+/**
+ * Dialog footer.
+ * @returns {React.JSX}
+ */
+export function DialogFooter({ ...props }) {
+  return <DialogFooterRoot {...props} />;
+}
+
+const DialogFooterRoot = styled.div`
+  flex: 0 0 auto;
+  margin: 0 20px;
+`;
+
+const DialogFooterActionsRoot = styled.div`
+  ${(props) =>
+    props.alignment === 'right' ? 'margin-left: auto;' : 'margin-right: auto;'};
+
+  .bp3-button {
+    margin-left: 5px;
+    margin-left: 5px;
+  }
+`;

packages/webapp/src/components/Dialog/DialogSuspense.tsx

@@ -0,0 +1,19 @@
+// @ts-nocheck
+import React, { Suspense } from 'react';
+import { Classes, Spinner } from '@blueprintjs/core';
+
+function LoadingContent() {
+  return (<div className={Classes.DIALOG_BODY}><Spinner size={30} /></div>);
+}
+
+export function DialogSuspense({
+  children
+}) {
+  return (
+    <Suspense fallback={<LoadingContent /> }>
+      <div className={'dialog__suspense-wrapper'}>
+        { children }
+      </div>
+    </Suspense>
+  );
+};

packages/webapp/src/components/Dialog/index.tsx

@@ -0,0 +1,8 @@
+// @ts-nocheck
+
+
+export * from './Dialog';
+export * from './DialogFooterActions';
+export * from './DialogSuspense';
+export * from './DialogContent';
+// export * from './DialogFooter';