From f6dbec504c502bc5dc421e12daca102e05662fea Mon Sep 17 00:00:00 2001
From: RitvikSardana <ritvik.sardana11@gmail.com>
Date: Fri, 30 Aug 2024 20:57:00 +0530
Subject: [PATCH] feat: mobile support

---
 desk/src/App.vue                              |  14 +-
 .../{desk/sidebar => }/UserMenu.vue           |   0
 .../canned_responses/CannedResponseList.vue   |  79 ------
 .../CannedResponseListItem.vue                |  47 ----
 .../ResponseTitleAndMessage.vue               | 164 ------------
 desk/src/components/global/Autocomplete.vue   | 233 ------------------
 desk/src/components/layouts/DesktopLayout.vue |  13 +
 desk/src/components/layouts/MobileLayout.vue  |  11 +
 .../{desk/sidebar => layouts}/SideBar.vue     |   7 +-
 .../notifications/Notifications.vue           |  14 +-
 desk/src/pages/desk/AgentRoot.vue             |  28 ++-
 desk/src/router/index.js                      |   2 -
 desk/tsconfig.json                            |   1 +
 13 files changed, 63 insertions(+), 550 deletions(-)
 rename desk/src/components/{desk/sidebar => }/UserMenu.vue (100%)
 delete mode 100644 desk/src/components/desk/settings/canned_responses/CannedResponseList.vue
 delete mode 100644 desk/src/components/desk/settings/canned_responses/CannedResponseListItem.vue
 delete mode 100644 desk/src/components/desk/settings/canned_responses/ResponseTitleAndMessage.vue
 delete mode 100644 desk/src/components/global/Autocomplete.vue
 create mode 100644 desk/src/components/layouts/DesktopLayout.vue
 create mode 100644 desk/src/components/layouts/MobileLayout.vue
 rename desk/src/components/{desk/sidebar => layouts}/SideBar.vue (96%)

diff --git a/desk/src/App.vue b/desk/src/App.vue
index ba9c49b26..37c20a52a 100644
--- a/desk/src/App.vue
+++ b/desk/src/App.vue
@@ -1,9 +1,7 @@
 <template>
-  <span class="fixed inset-0">
-    <RouterView class="antialiased" />
-    <Toasts />
-    <KeymapDialog />
-  </span>
+  <RouterView class="antialiased" />
+  <Toasts />
+  <KeymapDialog />
 </template>
 
 <script setup lang="ts">
@@ -16,12 +14,6 @@ import { stopSession } from "@/telemetry";
 import { init as initTelemetry } from "@/telemetry";
 useConfigStore();
 
-const viewportWidth = ref(
-  Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
-);
-
-provide("viewportWidth", viewportWidth);
-
 onMounted(async () => {
   window.addEventListener("online", () => {
     createToast({
diff --git a/desk/src/components/desk/sidebar/UserMenu.vue b/desk/src/components/UserMenu.vue
similarity index 100%
rename from desk/src/components/desk/sidebar/UserMenu.vue
rename to desk/src/components/UserMenu.vue
diff --git a/desk/src/components/desk/settings/canned_responses/CannedResponseList.vue b/desk/src/components/desk/settings/canned_responses/CannedResponseList.vue
deleted file mode 100644
index e5479f730..000000000
--- a/desk/src/components/desk/settings/canned_responses/CannedResponseList.vue
+++ /dev/null
@@ -1,79 +0,0 @@
-<template>
-  <div>
-    <div
-      class="group flex select-none items-center rounded-[6px] bg-[#F7F7F7] py-[10px] px-[11px] text-base font-medium text-gray-500"
-    >
-      <div class="h-[14px] w-[37px]">
-        <Input
-          type="checkbox"
-          @click="manager.selectAll()"
-          :checked="manager.allItemsSelected"
-          role="button"
-        />
-      </div>
-      <div class="group flex w-full flex-row items-center">
-        <div class="sm:w-10/12">Title</div>
-        <div class="sm:w-2/12">Author</div>
-        <div class="sm:w-2/12"></div>
-      </div>
-    </div>
-    <div
-      id="rows"
-      class="flex flex-col space-y-2 overflow-auto"
-      :style="{
-        height: viewportWidth > 768 ? 'calc(100vh - 120px)' : null,
-      }"
-    >
-      <div v-if="!manager.loading">
-        <div v-if="manager.list.length > 0">
-          <div
-            v-for="(canned_response, index) in manager.list"
-            :key="canned_response.name"
-          >
-            <CannedResponseListItem
-              :class="index == 0 ? 'mt-[9px] mb-[2px]' : 'my-[2px]'"
-              :canned_response="canned_response"
-              @toggle-select="manager.select(canned_response)"
-              :selected="manager.itemSelected(canned_response)"
-            />
-          </div>
-        </div>
-        <div v-else>
-          <div class="grid h-48 w-full place-content-center">
-            <div>
-              <CustomIcons name="empty-list" class="mx-auto mb-2 h-12 w-12" />
-              <div class="mb-2 text-gray-500">No canned response found</div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="pb-2">
-        <Button v-if="manager.hasNextPage" @click="manager.nextPage()">
-          Load More
-        </Button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { inject } from "vue";
-import { Input } from "frappe-ui";
-import CannedResponseListItem from "@/components/desk/settings/canned_responses/CannedResponseListItem.vue";
-import CustomIcons from "@/components/desk/global/CustomIcons.vue";
-export default {
-  name: "CannedResponseList",
-  props: ["manager"],
-  components: {
-    CannedResponseListItem,
-    CustomIcons,
-    Input,
-  },
-  setup() {
-    const viewportWidth = inject("viewportWidth");
-    return {
-      viewportWidth,
-    };
-  },
-};
-</script>
diff --git a/desk/src/components/desk/settings/canned_responses/CannedResponseListItem.vue b/desk/src/components/desk/settings/canned_responses/CannedResponseListItem.vue
deleted file mode 100644
index 16946f0cf..000000000
--- a/desk/src/components/desk/settings/canned_responses/CannedResponseListItem.vue
+++ /dev/null
@@ -1,47 +0,0 @@
-<template>
-  <div
-    class="block select-none rounded-[6px] py-[7px] px-[11px]"
-    :class="selected ? 'bg-blue-50 hover:bg-blue-100' : 'hover:bg-gray-50'"
-  >
-    <div
-      v-if="canned_response"
-      role="button"
-      class="flex items-center text-base"
-    >
-      <div class="flex h-[14px] w-[37px] items-center">
-        <Input
-          type="checkbox"
-          @click="$emit('toggleSelect')"
-          :checked="selected"
-          role="button"
-        />
-      </div>
-      <RouterLink
-        :to="`/settings/canned_responses/${canned_response.name}`"
-        class="group flex w-full items-center"
-      >
-        <div class="truncate pr-10 sm:w-10/12">
-          {{ canned_response.title }}
-        </div>
-        <div class="truncate pr-10 sm:w-2/12">
-          {{ canned_response.owner }}
-        </div>
-        <div class="truncate sm:w-2/12"></div>
-      </RouterLink>
-    </div>
-  </div>
-</template>
-
-<script>
-import { Input, FeatherIcon } from "frappe-ui";
-import Badge from "frappe-ui/src/components/Badge.vue";
-export default {
-  name: "CannedResponseListItem",
-  props: ["canned_response", "selected"],
-  components: {
-    Input,
-    FeatherIcon,
-    Badge,
-  },
-};
-</script>
diff --git a/desk/src/components/desk/settings/canned_responses/ResponseTitleAndMessage.vue b/desk/src/components/desk/settings/canned_responses/ResponseTitleAndMessage.vue
deleted file mode 100644
index 878824c26..000000000
--- a/desk/src/components/desk/settings/canned_responses/ResponseTitleAndMessage.vue
+++ /dev/null
@@ -1,164 +0,0 @@
-<template>
-  <div>
-    <div
-      v-if="!editable"
-      class="flex flex-col space-y-[16px] rounded-[8px] border p-[32px] shadow-sm"
-    >
-      <div
-        class="prose prose-p:my-1 mb-[10px] border-b pb-[16px] text-[24px] font-semibold"
-      >
-        {{ title }}
-      </div>
-      <div
-        class="overflow-y-auto"
-        style="min-height: calc(100vh - 500px); max-height: calc(100vh - 245px)"
-        v-html="message"
-      ></div>
-    </div>
-    <div v-else>
-      <div class="flex h-full flex-col space-y-[16px]">
-        <div>
-          <Input
-            label="Title"
-            type="text"
-            :value="title"
-            @input="
-              (val) => {
-                tempNewTitle = val;
-              }
-            "
-          />
-        </div>
-        <div class="flex flex-col">
-          <div
-            v-if="editMode"
-            class="mb-2 block text-sm leading-4 text-gray-700"
-          >
-            Message
-          </div>
-          <TextEditor
-            :class="editMode ? 'bg-gray-100' : ''"
-            ref="textEditor"
-            :editor-class="
-              !editable
-                ? 'flex flex-col'
-                : editMode
-                ? 'min-h-[20rem] overflow-y-auto max-h-[73vh] px-3 max-w-full'
-                : 'min-h-[20rem] overflow-y-auto max-h-[85vh]'
-            "
-            :content="message"
-            :starterkit-options="{
-              heading: { levels: [2, 3, 4, 5, 6] },
-            }"
-            @change="
-              (val) => {
-                tempNewMessage = val;
-              }
-            "
-            :editable="editMode"
-          >
-            <template v-slot:top>
-              <div v-if="editMode">
-                <TextEditorFixedMenu
-                  class="m-3 overflow-x-auto"
-                  :buttons="textEditorMenuButtons"
-                />
-              </div>
-            </template>
-          </TextEditor>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { TextEditor } from "frappe-ui";
-import { TextEditorFixedMenu } from "frappe-ui/src/components/TextEditor";
-import { ref, inject } from "vue";
-export default {
-  name: "ResponseTitleAndMessage",
-  props: ["title", "message", "editable", "responseResource"],
-  components: {
-    TextEditor,
-    TextEditorFixedMenu,
-  },
-  mounted() {
-    this.saveResponseTitleAndMessage = this.save;
-  },
-  watch: {
-    tempNewTitle(val) {
-      this.updateNewResponseInput({ field: "title", value: val });
-    },
-    tempNewMessage(val) {
-      this.updateNewResponseInput({ field: "message", value: val });
-    },
-  },
-  setup(props) {
-    const tempNewTitle = ref(props.title);
-    const tempNewMessage = ref(props.message);
-    const editMode = inject("editMode");
-    const updateNewResponseInput = inject("updateNewResponseInput");
-    const saveResponseTitleAndMessage = inject("saveResponseTitleAndMessage");
-    return {
-      tempNewTitle,
-      tempNewMessage,
-      editMode,
-      updateNewResponseInput,
-      saveResponseTitleAndMessage,
-    };
-  },
-  computed: {
-    textEditorMenuButtons() {
-      return [
-        "Paragraph",
-        ["Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6"],
-        "Separator",
-        "Bold",
-        "Italic",
-        "Separator",
-        "Bullet List",
-        "Numbered List",
-        "Separator",
-        "Align Left",
-        "Align Center",
-        "Align Right",
-        "Separator",
-        "Image",
-        "Video",
-        "Link",
-        "Blockquote",
-        "Code",
-        "Horizontal Rule",
-        [
-          "InsertTable",
-          "AddColumnBefore",
-          "AddColumnAfter",
-          "DeleteColumn",
-          "AddRowBefore",
-          "AddRowAfter",
-          "DeleteRow",
-          "MergeCells",
-          "SplitCell",
-          "ToggleHeaderColumn",
-          "ToggleHeaderRow",
-          "ToggleHeaderCell",
-          "DeleteTable",
-        ],
-        "Separator",
-        "Undo",
-        "Redo",
-      ];
-    },
-  },
-  methods: {
-    save() {
-      this.responseResource.setValue.submit({
-        title: this.tempNewTitle,
-        message: this.tempNewMessage,
-      });
-      this.editMode = false;
-    },
-  },
-};
-</script>
diff --git a/desk/src/components/global/Autocomplete.vue b/desk/src/components/global/Autocomplete.vue
deleted file mode 100644
index aa7695424..000000000
--- a/desk/src/components/global/Autocomplete.vue
+++ /dev/null
@@ -1,233 +0,0 @@
-<template>
-  <Combobox v-model="selectedValue" nullable v-slot="{ open: isComboboxOpen }">
-    <Popover class="w-full">
-      <template #target="{ open: openPopover }">
-        <div class="w-full">
-          <ComboboxButton
-            class="w-full"
-            @click="
-              () => {
-                if (searchable) {
-                  openPopover();
-                }
-              }
-            "
-          >
-            <slot name="input-holder" :selectedValue="selectedValue">
-              <div
-                class="flex h-[28px] w-full items-center justify-between rounded-md bg-gray-100 py-1.5 pl-3 pr-2"
-                :class="{
-                  'rounded-b-none': isComboboxOpen,
-                }"
-              >
-                <slot
-                  name="input"
-                  :selectedValue="selectedValue"
-                  :placeholder="searchable ? placeholder : ''"
-                >
-                  <span class="line-clamp-1 text-base" v-if="selectedValue">
-                    {{ displayValue(selectedValue) }}
-                  </span>
-                  <span class="text-base text-gray-500" v-else>
-                    {{ searchable ? placeholder : "" || "" }}
-                  </span>
-                </slot>
-                <CustomIcons
-                  v-if="searchable"
-                  name="select"
-                  class="h-[12px] w-[12px] stroke-gray-500"
-                />
-              </div>
-            </slot>
-          </ComboboxButton>
-        </div>
-      </template>
-      <template #body>
-        <ComboboxOptions
-          class="mt-2 max-h-[11rem] max-w-[240px] overflow-y-auto rounded-md border bg-white px-1.5 pb-1.5 shadow-md"
-          static
-          :class="width ? `w-[${width}px]` : 'w-[250px]'"
-          v-show="isComboboxOpen"
-        >
-          <div
-            class="items-st sticky top-0 mb-1.5 flex items-stretch space-x-1.5 bg-white pt-1.5"
-          >
-            <ComboboxInput
-              class="form-input w-full placeholder-gray-500"
-              type="text"
-              @change="
-                (e) => {
-                  query = e.target.value;
-                  if (resourceOptions) {
-                    dsearch(query);
-                  }
-                }
-              "
-              :value="query"
-              autocomplete="off"
-              placeholder="Search by keyword"
-            />
-            <Button icon="x" @click="selectedValue = null" />
-          </div>
-          <ComboboxOption
-            as="template"
-            v-for="option in filteredOptions"
-            :key="option.value"
-            :value="option"
-            v-slot="{ active, selected }"
-          >
-            <li
-              class="cursor-pointer rounded-md px-2.5 py-1.5 text-base"
-              :class="[{ 'bg-gray-100': active }]"
-            >
-              <Tooltip
-                v-if="option.label.length > (20 * width) / 220"
-                placement="top"
-                :text="option.label"
-              >
-                <div :class="['line-clamp-1', `w-[${width - 25 + 'px'}]`]">
-                  {{ option.label }}
-                </div>
-              </Tooltip>
-              <div v-else>{{ option.label }}</div>
-            </li>
-          </ComboboxOption>
-          <slot v-if="filteredOptions?.length == 0" name="no-result-found">
-            <li class="rounded-md px-2.5 py-1.5 text-base text-gray-600">
-              No results found
-            </li>
-          </slot>
-        </ComboboxOptions>
-      </template>
-    </Popover>
-  </Combobox>
-</template>
-<script>
-import {
-  Combobox,
-  ComboboxInput,
-  ComboboxOptions,
-  ComboboxOption,
-  ComboboxButton,
-} from "@headlessui/vue";
-import { Popover, debounce } from "frappe-ui";
-import CustomIcons from "@/components/desk/global/CustomIcons.vue";
-
-export default {
-  name: "Autocomplete",
-  props: {
-    modelValue: {
-      type: Object,
-      default: null,
-    },
-    options: {
-      type: Array,
-      default: () => [],
-    },
-    resourceOptions: {
-      type: Function,
-      default: () => {},
-    },
-    placeholder: {
-      type: String,
-    },
-    searchable: {
-      type: Boolean,
-      default: true,
-    },
-    width: {
-      type: Number,
-      default: 250,
-    },
-    show: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: ["update:modelValue", "change"],
-  components: {
-    Popover,
-    CustomIcons,
-    Combobox,
-    ComboboxInput,
-    ComboboxOptions,
-    ComboboxOption,
-    ComboboxButton,
-  },
-  data() {
-    return {
-      query: "",
-    };
-  },
-  mounted() {
-    this.dsearch("");
-  },
-  computed: {
-    valuePropPassed() {
-      return "value" in this.$attrs;
-    },
-    selectedValue: {
-      get() {
-        return this.valuePropPassed ? this.$attrs.value : this.modelValue;
-      },
-      set(val) {
-        this.query = "";
-        this.$emit(this.valuePropPassed ? "change" : "update:modelValue", val);
-      },
-    },
-    filteredOptions() {
-      if (!this.resourceOptions) {
-        if (!this.query) {
-          return this.options;
-        }
-        return this.options.filter((option) => {
-          let searchTexts = [option.label, option.value];
-          return searchTexts.some((text) =>
-            (text || "").toLowerCase().includes(this.query.toLowerCase())
-          );
-        });
-      } else {
-        let data = this.$resources.search.data || [];
-        if (data.length == 0) {
-          return [];
-        }
-        return this.resourceOptions.responseMap(data);
-      }
-    },
-  },
-  methods: {
-    displayValue(option) {
-      if (typeof option === "string") {
-        return option;
-      }
-      return option?.label;
-    },
-    dsearch: debounce(function (query) {
-      this.search(query);
-    }, 300),
-    search(query) {
-      if (!this.searchable) return;
-      this.$resources.search.fetch(this.resourceOptions.inputMap(query));
-    },
-  },
-  watch: {
-    resourceOptions(val) {
-      if (val) {
-        this.$nextTick(() => {
-          this.search("");
-        });
-      }
-    },
-  },
-  resources: {
-    search() {
-      if (!this.resourceOptions) {
-        return;
-      }
-      return {
-        url: this.resourceOptions.url,
-      };
-    },
-  },
-};
-</script>
diff --git a/desk/src/components/layouts/DesktopLayout.vue b/desk/src/components/layouts/DesktopLayout.vue
new file mode 100644
index 000000000..fcd61dcfa
--- /dev/null
+++ b/desk/src/components/layouts/DesktopLayout.vue
@@ -0,0 +1,13 @@
+<template>
+  <div class="flex h-screen w-screen">
+    <div class="h-full border-r bg-gray-50">
+      <SideBar />
+    </div>
+    <div class="flex-1 flex flex-col h-full overflow-auto">
+      <slot />
+    </div>
+  </div>
+</template>
+<script setup>
+import SideBar from "./SideBar.vue";
+</script>
diff --git a/desk/src/components/layouts/MobileLayout.vue b/desk/src/components/layouts/MobileLayout.vue
new file mode 100644
index 000000000..11335b9e4
--- /dev/null
+++ b/desk/src/components/layouts/MobileLayout.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="flex h-screen w-screen">
+    <SideBar />
+    <div class="flex h-full flex-1 flex-col overflow-auto">
+      <slot />
+    </div>
+  </div>
+</template>
+<script setup>
+import SideBar from "./SideBar.vue";
+</script>
diff --git a/desk/src/components/desk/sidebar/SideBar.vue b/desk/src/components/layouts/SideBar.vue
similarity index 96%
rename from desk/src/components/desk/sidebar/SideBar.vue
rename to desk/src/components/layouts/SideBar.vue
index a696783f6..07d6f4d8a 100644
--- a/desk/src/components/desk/sidebar/SideBar.vue
+++ b/desk/src/components/layouts/SideBar.vue
@@ -51,7 +51,7 @@
         v-bind="option"
         :key="option.label"
         :is-expanded="isExpanded"
-        :is-active="option.to?.includes(route.name.toString())"
+        :is-active="isActiveTab(option.to)"
       />
     </div>
     <div class="grow" />
@@ -83,7 +83,7 @@ import {
 } from "@/router";
 import { useDevice } from "@/composables";
 import { SidebarLink } from "@/components";
-import UserMenu from "./UserMenu.vue";
+import UserMenu from "@/components/UserMenu.vue";
 import LucideArrowLeftFromLine from "~icons/lucide/arrow-left-from-line";
 import LucideArrowRightFromLine from "~icons/lucide/arrow-right-from-line";
 import LucideBookOpen from "~icons/lucide/book-open";
@@ -144,6 +144,9 @@ const menuOptions = computed(() => [
   },
 ]);
 
+function isActiveTab(to: string) {
+  return route.name === to;
+}
 const profileSettings = [
   {
     component: markRaw(Apps),
diff --git a/desk/src/components/notifications/Notifications.vue b/desk/src/components/notifications/Notifications.vue
index d8dba0099..4225b1d93 100644
--- a/desk/src/components/notifications/Notifications.vue
+++ b/desk/src/components/notifications/Notifications.vue
@@ -93,11 +93,17 @@ import { UserAvatar } from "@/components";
 const notificationStore = useNotificationStore();
 const sidebarStore = useSidebarStore();
 const target = ref(null);
-onClickOutside(target, () => {
-  if (notificationStore.visible) {
-    notificationStore.toggle();
+onClickOutside(
+  target,
+  () => {
+    if (notificationStore.visible) {
+      notificationStore.toggle();
+    }
+  },
+  {
+    ignore: ["#notifications-btn"],
   }
-});
+);
 
 function getRoute(n: Notification) {
   switch (n.notification_type) {
diff --git a/desk/src/pages/desk/AgentRoot.vue b/desk/src/pages/desk/AgentRoot.vue
index 7fc5b819a..78c1b52cc 100644
--- a/desk/src/pages/desk/AgentRoot.vue
+++ b/desk/src/pages/desk/AgentRoot.vue
@@ -1,25 +1,37 @@
 <template>
-  <div class="flex h-screen w-screen">
-    <SideBar />
-    <Notifications />
-    <RouterView class="z-0 flex flex-1 flex-col overflow-auto" />
-    <CommandPalette />
-  </div>
+  <Layout>
+    <router-view class="z-0 flex flex-1 flex-col overflow-auto" />
+  </Layout>
+  <CommandPalette />
+  <Notifications />
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount } from "vue";
+import { computed, defineAsyncComponent, onBeforeMount } from "vue";
 import { useRouter } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import { useConfigStore } from "@/stores/config";
 import { CUSTOMER_PORTAL_LANDING, ONBOARDING_PAGE } from "@/router";
 import { CommandPalette, Notifications } from "@/components";
-import SideBar from "@/components/desk/sidebar/SideBar.vue";
 
 const router = useRouter();
 const authStore = useAuthStore();
 const configStore = useConfigStore();
 
+const MobileLayout = defineAsyncComponent(
+  () => import("@/components/Layouts/MobileLayout.vue")
+);
+const DesktopLayout = defineAsyncComponent(
+  () => import("@/components/Layouts/DesktopLayout.vue")
+);
+const Layout = computed(() => {
+  if (window.innerWidth < 640) {
+    return MobileLayout;
+  } else {
+    return DesktopLayout;
+  }
+});
+
 onBeforeMount(() => {
   if (!authStore.hasDeskAccess) {
     router.replace({ name: CUSTOMER_PORTAL_LANDING });
diff --git a/desk/src/router/index.js b/desk/src/router/index.js
index 5fb4c0d94..de3a0747a 100644
--- a/desk/src/router/index.js
+++ b/desk/src/router/index.js
@@ -2,8 +2,6 @@ import { createRouter, createWebHistory } from "vue-router";
 import { useAuthStore } from "@/stores/auth";
 import { useUserStore } from "@/stores/user";
 
-export const WEBSITE_ROOT = "Website Root";
-
 export const ONBOARDING_PAGE = "Setup";
 
 export const CUSTOMER_PORTAL_NEW_TICKET = "TicketNew";
diff --git a/desk/tsconfig.json b/desk/tsconfig.json
index 4f47b9e76..5ed9653ce 100644
--- a/desk/tsconfig.json
+++ b/desk/tsconfig.json
@@ -3,6 +3,7 @@
 		"esModuleInterop": true,
 		"allowSyntheticDefaultImports": true,
 		"target": "es2021",
+		"module": "esnext",
 		"moduleResolution":"node",
 		"paths": {
 			"@/*": ["./src/*"]