re-structure to monorepo.

packages/webapp/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerContent.tsx

@@ -0,0 +1,26 @@
+// @ts-nocheck
+import React from 'react';
+import {
+  DrawerHeaderContent,
+  DrawerBody,
+  FormattedMessage as T,
+} from '@/components';
+
+import QuickCreateItemDrawerForm from './QuickCreateItemDrawerForm';
+
+/**
+ * Quick create/edit item drawer content.
+ */
+export default function QuickCreateItemDrawerContent({ itemName }) {
+  return (
+    <React.Fragment>
+      <DrawerHeaderContent
+        name="quick-create-item"
+        title={<T id={'create_a_new_item'} />}
+      />
+      <DrawerBody>
+        <QuickCreateItemDrawerForm itemName={itemName} />
+      </DrawerBody>
+    </React.Fragment>
+  );
+}

packages/webapp/src/containers/Drawers/QuickCreateItemDrawer/QuickCreateItemDrawerForm.tsx

@@ -0,0 +1,87 @@
+// @ts-nocheck
+import React from 'react';
+import * as R from 'ramda';
+import styled from 'styled-components';
+
+import { Card, DrawerLoading } from '@/components';
+
+import ItemFormFormik from '../../Items/ItemFormFormik';
+import {
+  ItemFormProvider,
+  useItemFormContext,
+} from '../../Items/ItemFormProvider';
+
+import withDrawerActions from '@/containers/Drawer/withDrawerActions';
+import withDashboardActions from '@/containers/Dashboard/withDashboardActions';
+
+import { useDrawerContext } from '@/components/Drawer/DrawerProvider';
+
+/**
+ * Drawer item form loading.
+ * @returns {JSX}
+ */
+function DrawerItemFormLoading({ children }) {
+  const { isFormLoading } = useItemFormContext();
+
+  return <DrawerLoading loading={isFormLoading}>{children}</DrawerLoading>;
+}
+
+/**
+ * Quick create/edit item drawer form.
+ */
+function QuickCreateItemDrawerForm({
+  itemId,
+  itemName,
+  closeDrawer,
+
+  // #withDashboardActions
+  addQuickActionEvent,
+}) {
+  // Drawer context.
+  const { payload } = useDrawerContext();
+
+  // Handle the form submit request success.
+  const handleSubmitSuccess = (values, form, submitPayload, response) => {
+    if (submitPayload.redirect) {
+      closeDrawer('quick-create-item');
+    }
+    if (payload.quickActionEvent) {
+      addQuickActionEvent(payload.quickActionEvent, {
+        itemId: response.data.id,
+      });
+    }
+  };
+  // Handle the form cancel.
+  const handleFormCancel = () => {
+    closeDrawer('quick-create-item');
+  };
+
+  return (
+    <ItemFormProvider itemId={itemId}>
+      <DrawerItemFormLoading>
+        <ItemFormCard>
+          <ItemFormFormik
+            initialValues={{ name: itemName }}
+            onSubmitSuccess={handleSubmitSuccess}
+            onCancel={handleFormCancel}
+          />
+        </ItemFormCard>
+      </DrawerItemFormLoading>
+    </ItemFormProvider>
+  );
+}
+
+export default R.compose(
+  withDrawerActions,
+  withDashboardActions,
+)(QuickCreateItemDrawerForm);
+
+const ItemFormCard = styled(Card)`
+  margin: 15px;
+  margin-bottom: calc(15px + 65px);
+
+  .page-form__floating-actions {
+    margin-left: -36px;
+    margin-right: -36px;
+  }
+`;

packages/webapp/src/containers/Drawers/QuickCreateItemDrawer/index.tsx

@@ -0,0 +1,38 @@
+// @ts-nocheck
+import React from 'react';
+import { Drawer, DrawerSuspense } from '@/components';
+import withDrawers from '@/containers/Drawer/withDrawers';
+
+import { compose } from '@/utils';
+
+const QuickCretaeItemDrawerContent = React.lazy(() =>
+  import('./QuickCreateItemDrawerContent'),
+);
+
+/**
+ * Quick create item.
+ */
+function QuickCreateItemDrawer({
+  // #ownProps
+  name,
+
+  // #withDrawer
+  isOpen,
+  payload,
+}) {
+  return (
+    <Drawer
+      isOpen={isOpen}
+      name={name}
+      style={{ minWidth: '800px', maxWidth: '1000px' }}
+      size={'72%'}
+      payload={payload}
+    >
+      <DrawerSuspense>
+        <QuickCretaeItemDrawerContent itemName={payload.name} />
+      </DrawerSuspense>
+    </Drawer>
+  );
+}
+
+export default compose(withDrawers())(QuickCreateItemDrawer);