chore: move modal core components to the UI package (#4794)

* chore: move modal core components to the UI package

* fix: build errors

packages/ui/src/index.ts

@@ -7,6 +7,7 @@ export * from "./dropdowns";
 export * from "./dropdown";
 export * from "./form-fields";
 export * from "./icons";
+export * from "./modals";
 export * from "./progress";
 export * from "./spinners";
 export * from "./tooltip";

packages/ui/src/modals/alert-modal.tsx

@@ -1,11 +1,12 @@
-"use client";
+import React from "react";
 import { AlertTriangle, Info, LucideIcon } from "lucide-react";
-// ui
-import { Button, TButtonVariant } from "@plane/ui";
 // components
-import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
+import { Button, TButtonVariant } from "../button";
+import { ModalCore } from "./modal-core";
+// constants
+import { EModalPosition, EModalWidth } from "./constants";
 // helpers
-import { cn } from "@/helpers/common.helper";
+import { cn } from "../../helpers";
 
 export type TModalVariant = "danger" | "primary";
 

packages/ui/src/modals/constants.ts

@@ -0,0 +1,11 @@
+export enum EModalPosition {
+  TOP = "flex items-center justify-center text-center mx-4 my-10 md:my-20",
+  CENTER = "flex items-end sm:items-center justify-center p-4 min-h-full",
+}
+
+export enum EModalWidth {
+  XL = "sm:max-w-xl",
+  XXL = "sm:max-w-2xl",
+  XXXL = "sm:max-w-3xl",
+  XXXXL = "sm:max-w-4xl",
+}

packages/ui/src/modals/index.ts

@@ -0,0 +1,3 @@
+export * from "./alert-modal";
+export * from "./constants";
+export * from "./modal-core";

packages/ui/src/modals/modal-core.tsx

@@ -1,19 +1,9 @@
-import { Fragment } from "react";
+import React, { Fragment } from "react";
 import { Dialog, Transition } from "@headlessui/react";
+// constants
+import { EModalPosition, EModalWidth } from "./constants";
 // helpers
-import { cn } from "@/helpers/common.helper";
-
-export enum EModalPosition {
-  TOP = "flex items-center justify-center text-center mx-4 my-10 md:my-20",
-  CENTER = "flex items-end sm:items-center justify-center p-4 min-h-full",
-}
-
-export enum EModalWidth {
-  XL = "sm:max-w-xl",
-  XXL = "sm:max-w-2xl",
-  XXXL = "sm:max-w-3xl",
-  XXXXL = "sm:max-w-4xl",
-}
+import { cn } from "../../helpers";
 
 type Props = {
   children: React.ReactNode;

web/core/components/api-token/delete-token-modal.tsx

@@ -6,9 +6,7 @@ import { mutate } from "swr";
 // types
 import { IApiToken } from "@plane/types";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { AlertModalCore } from "@/components/core";
+import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // fetch-keys
 import { API_TOKENS_LIST } from "@/constants/fetch-keys";
 // services

web/core/components/api-token/modal/create-token-modal.tsx

@@ -6,10 +6,9 @@ import { mutate } from "swr";
 // types
 import { IApiToken } from "@plane/types";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { CreateApiTokenForm, GeneratedTokenDetails } from "@/components/api-token";
-import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 // fetch-keys
 import { API_TOKENS_LIST } from "@/constants/fetch-keys";
 // helpers

web/core/components/core/modals/index.ts

@@ -1,9 +1,7 @@
-export * from "./alert-modal";
 export * from "./bulk-delete-issues-modal";
 export * from "./existing-issues-list-modal";
 export * from "./gpt-assistant-popover";
 export * from "./link-modal";
-export * from "./modal-core";
 export * from "./user-image-upload-modal";
 export * from "./workspace-image-upload-modal";
 export * from "./issue-search-modal-empty-state";

web/core/components/cycles/delete-modal.tsx

@@ -6,9 +6,7 @@ import { useParams, useRouter, useSearchParams } from "next/navigation";
 // types
 import { ICycle } from "@plane/types";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { AlertModalCore } from "@/components/core";
+import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import { CYCLE_DELETED } from "@/constants/event-tracker";
 // hooks

web/core/components/cycles/modal.tsx

@@ -4,9 +4,8 @@ import React, { useEffect, useState } from "react";
 // types
 import type { CycleDateCheckData, ICycle, TCycleTabOptions } from "@plane/types";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 import { CycleForm } from "@/components/cycles";
 // constants
 import { CYCLE_CREATED, CYCLE_UPDATED } from "@/constants/event-tracker";

web/core/components/estimates/create/modal.tsx

@@ -3,10 +3,11 @@
 import { FC, useEffect, useMemo, useState } from "react";
 import { observer } from "mobx-react";
 import { ChevronLeft } from "lucide-react";
+// types
 import { IEstimateFormData, TEstimateSystemKeys, TEstimatePointsObject, TEstimateTypeError } from "@plane/types";
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
+// ui
+import { Button, EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 import { EstimateCreateStageOne, EstimatePointCreateRoot } from "@/components/estimates";
 // hooks
 import { useProjectEstimates } from "@/hooks/store";

web/core/components/estimates/delete/modal.tsx

@@ -2,9 +2,8 @@
 
 import { FC, useState } from "react";
 import { observer } from "mobx-react";
-import { Button, TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
+// ui
+import { Button, EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
 import { useEstimate, useProject, useProjectEstimates } from "@/hooks/store";
 

web/core/components/inbox/modals/create-edit-modal/modal.tsx

@@ -1,8 +1,9 @@
 import { FC } from "react";
 // types
 import { TIssue } from "@plane/types";
+// ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
-import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 import { InboxIssueCreateRoot, InboxIssueEditRoot } from "@/components/inbox/modals/create-edit-modal";
 
 type TInboxIssueCreateEditModalRoot = {

web/core/components/inbox/modals/decline-issue-modal.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 // types
 import type { TIssue } from "@plane/types";
-// components
-import { AlertModalCore } from "@/components/core";
+// ui
+import { AlertModalCore } from "@plane/ui";
 // hooks
 import { useProject } from "@/hooks/store";
 

web/core/components/inbox/modals/delete-issue-modal.tsx

@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import { observer } from "mobx-react";
 // types
 import type { TIssue } from "@plane/types";
-// components
-import { AlertModalCore } from "@/components/core";
+// ui
+import { AlertModalCore } from "@plane/ui";
 // hooks
 import { useProject } from "@/hooks/store";
 

web/core/components/issues/attachment/delete-attachment-modal.tsx

@@ -1,7 +1,8 @@
 import { FC, useState } from "react";
+// types
 import type { TIssueAttachment } from "@plane/types";
-// components
-import { AlertModalCore } from "@/components/core";
+// ui
+import { AlertModalCore } from "@plane/ui";
 // helper
 import { getFileName } from "@/helpers/attachment.helper";
 // types

web/core/components/issues/delete-issue-modal.tsx

@@ -4,9 +4,7 @@ import { useEffect, useState } from "react";
 // types
 import { TIssue } from "@plane/types";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { AlertModalCore } from "@/components/core";
+import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
 import { useIssues, useProject } from "@/hooks/store";
 

web/core/components/issues/issue-modal/modal.tsx

@@ -6,9 +6,7 @@ import { usePathname } from "next/navigation";
 // types
 import type { TIssue } from "@plane/types";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
+import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import { ISSUE_CREATED, ISSUE_UPDATED } from "@/constants/event-tracker";
 import { EIssuesStoreType } from "@/constants/issue";

web/core/components/labels/delete-label-modal.tsx

@@ -6,9 +6,7 @@ import { useParams } from "next/navigation";
 // types
 import type { IIssueLabel } from "@plane/types";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { AlertModalCore } from "@/components/core";
+import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
 import { useLabel } from "@/hooks/store";
 

web/core/components/modules/delete-module-modal.tsx

@@ -6,9 +6,7 @@ import { useParams, useRouter } from "next/navigation";
 // types
 import type { IModule } from "@plane/types";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { AlertModalCore } from "@/components/core";
+import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import { MODULE_DELETED } from "@/constants/event-tracker";
 // hooks

web/core/components/modules/modal.tsx

@@ -6,9 +6,8 @@ import { useForm } from "react-hook-form";
 // types
 import type { IModule } from "@plane/types";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 import { ModuleForm } from "@/components/modules";
 // constants
 import { MODULE_CREATED, MODULE_UPDATED } from "@/constants/event-tracker";

web/core/components/pages/modals/create-page-modal.tsx

@@ -2,8 +2,9 @@ import { FC, useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 // types
 import { TPage } from "@plane/types";
+// ui
+import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
 // components
-import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 import { PageForm } from "@/components/pages";
 // constants
 import { PAGE_CREATED } from "@/constants/event-tracker";

web/core/components/pages/modals/delete-page-modal.tsx

@@ -3,9 +3,7 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { AlertModalCore } from "@/components/core";
+import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import { PAGE_DELETED } from "@/constants/event-tracker";
 // hooks

web/core/components/project/publish-project/modal.tsx

@@ -8,9 +8,7 @@ import { Check, ExternalLink, Globe2 } from "lucide-react";
 // types
 import { IProject, TProjectPublishLayouts, TPublishSettings } from "@plane/types";
 // ui
-import { Button, Loader, ToggleSwitch, TOAST_TYPE, setToast, CustomSelect } from "@plane/ui";
-// components
-import { EModalWidth, ModalCore } from "@/components/core";
+import { Button, Loader, ToggleSwitch, TOAST_TYPE, setToast, CustomSelect, ModalCore, EModalWidth } from "@plane/ui";
 // helpers
 import { SPACE_BASE_URL } from "@/helpers/common.helper";
 import { copyTextToClipboard } from "@/helpers/string.helper";

web/core/components/states/delete-state-modal.tsx

@@ -6,9 +6,7 @@ import { useParams } from "next/navigation";
 // types
 import type { IState } from "@plane/types";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { AlertModalCore } from "@/components/core";
+import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import { STATE_DELETED } from "@/constants/event-tracker";
 // hooks

web/core/components/views/delete-view-modal.tsx

@@ -6,9 +6,7 @@ import { useParams } from "next/navigation";
 // types
 import { IProjectView } from "@plane/types";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { AlertModalCore } from "@/components/core";
+import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
 import { useProjectView } from "@/hooks/store";
 

web/core/components/views/modal.tsx

@@ -5,9 +5,8 @@ import { observer } from "mobx-react";
 // types
 import { IProjectView } from "@plane/types";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 import { ProjectViewForm } from "@/components/views";
 // hooks
 import { useProjectView } from "@/hooks/store";

web/core/components/web-hooks/create-webhook-modal.tsx

@@ -5,9 +5,7 @@ import { useParams } from "next/navigation";
 // types
 import { IWebhook, IWorkspace, TWebhookEventTypes } from "@plane/types";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
+import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // helpers
 import { csvDownload } from "@/helpers/download.helper";
 // components

web/core/components/web-hooks/delete-webhook-modal.tsx

@@ -3,9 +3,7 @@
 import React, { FC, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { AlertModalCore } from "@/components/core";
+import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // hooks
 import { useWebhook } from "@/hooks/store";
 

web/core/components/workspace/views/delete-view-modal.tsx

@@ -6,9 +6,7 @@ import { useParams } from "next/navigation";
 // types
 import { IWorkspaceView } from "@plane/types";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
-// components
-import { AlertModalCore } from "@/components/core";
+import { AlertModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // constants
 import { GLOBAL_VIEW_DELETED } from "@/constants/event-tracker";
 // hooks

web/core/components/workspace/views/modal.tsx

@@ -6,9 +6,8 @@ import { useParams, useRouter } from "next/navigation";
 // types
 import { IWorkspaceView } from "@plane/types";
 // ui
-import { TOAST_TYPE, setToast } from "@plane/ui";
+import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
 // components
-import { EModalPosition, EModalWidth, ModalCore } from "@/components/core";
 import { WorkspaceViewForm } from "@/components/workspace";
 // constants
 import { GLOBAL_VIEW_CREATED, GLOBAL_VIEW_UPDATED } from "@/constants/event-tracker";