Skip to content

Commit 5b28327

Browse files
vamsikrishnamathalavamsikrishnamathala
authored
[WEB-5782]chore: migrated modals to @plane/ui (#8420)
* chore: migrated modal to @plane/ui * chore: fixed spacings
1 parent 39728d4 commit 5b28327

25 files changed

+1521
-2403
lines changed

‎apps/web/core/components/account/deactivate-account-modal.tsx‎

Lines changed: 26 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import React, { useState } from "react";
1+
import { useState } from "react";
22
import { Trash2 } from "lucide-react";
3-
import { Dialog, Transition } from "@headlessui/react";
43
import { PROFILE_SETTINGS_TRACKER_EVENTS } from "@plane/constants";
54
import { useTranslation } from "@plane/i18n";
65
// ui
76
import { Button } from "@plane/propel/button";
87
import { TOAST_TYPE, setToast } from "@plane/propel/toast";
8+
import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
99
// hooks
1010
import { captureError, captureSuccess } from "@/helpers/event-tracker.helper";
1111
import { useUser } from "@/hooks/store/user";
@@ -47,6 +47,7 @@ export function DeactivateAccountModal(props: Props) {
4747
signOut();
4848
router.push("/");
4949
handleClose();
50+
return;
5051
})
5152
.catch((err: any) => {
5253
captureError({
@@ -62,65 +63,30 @@ export function DeactivateAccountModal(props: Props) {
6263
};
6364

6465
return (
65-
<Transition.Root show={isOpen} as={React.Fragment}>
66-
<Dialog as="div" className="relative z-20" onClose={handleClose}>
67-
<Transition.Child
68-
as={React.Fragment}
69-
enter="ease-out duration-300"
70-
enterFrom="opacity-0"
71-
enterTo="opacity-100"
72-
leave="ease-in duration-200"
73-
leaveFrom="opacity-100"
74-
leaveTo="opacity-0"
75-
>
76-
<div className="fixed inset-0 bg-backdrop transition-opacity" />
77-
</Transition.Child>
78-
79-
<div className="fixed inset-0 z-20 overflow-y-auto">
80-
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
81-
<Transition.Child
82-
as={React.Fragment}
83-
enter="ease-out duration-300"
84-
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
85-
enterTo="opacity-100 translate-y-0 sm:scale-100"
86-
leave="ease-in duration-200"
87-
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
88-
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
89-
>
90-
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-surface-1 text-left shadow-raised-200 transition-all sm:my-8 sm:w-[40rem]">
91-
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
92-
<div className="">
93-
<div className="flex items-start gap-x-4">
94-
<div className="mt-3 grid place-items-center rounded-full bg-red-500/20 p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 ">
95-
<Trash2
96-
className="h-4 w-4 text-red-600 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6"
97-
aria-hidden="true"
98-
/>
99-
</div>
100-
<div>
101-
<Dialog.Title as="h3" className="my-4 text-20 font-medium leading-6 text-primary">
102-
{t("deactivate_your_account")}
103-
</Dialog.Title>
104-
<p className="mt-6 list-disc pr-4 text-14 font-regular text-secondary">
105-
{t("deactivate_your_account_description")}
106-
</p>
107-
</div>
108-
</div>
109-
</div>
110-
</div>
111-
<div className="mb-2 flex items-center justify-end gap-2 p-4 sm:px-6">
112-
<Button variant="secondary" size="lg" onClick={onClose}>
113-
{t("cancel")}
114-
</Button>
115-
<Button variant="error-fill" size="lg" onClick={handleDeleteAccount}>
116-
{isDeactivating ? t("deactivating") : t("confirm")}
117-
</Button>
118-
</div>
119-
</Dialog.Panel>
120-
</Transition.Child>
66+
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
67+
<div className="px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
68+
<div className="">
69+
<div className="flex items-start gap-x-4">
70+
<div className="mt-3 grid place-items-center rounded-full bg-red-500/20 p-2 sm:mt-3 sm:p-2 md:mt-0 md:p-4 lg:mt-0 lg:p-4 ">
71+
<Trash2 className="h-4 w-4 text-red-600 sm:h-4 sm:w-4 md:h-6 md:w-6 lg:h-6 lg:w-6" aria-hidden="true" />
72+
</div>
73+
<div>
74+
<h3 className="my-4 text-20 font-medium leading-6 text-primary">{t("deactivate_your_account")}</h3>
75+
<p className="mt-6 list-disc pr-4 text-14 font-regular text-secondary">
76+
{t("deactivate_your_account_description")}
77+
</p>
78+
</div>
12179
</div>
12280
</div>
123-
</Dialog>
124-
</Transition.Root>
81+
</div>
82+
<div className="mb-2 flex items-center justify-end gap-2 p-4 sm:px-6">
83+
<Button variant="secondary" size="lg" onClick={handleClose}>
84+
{t("cancel")}
85+
</Button>
86+
<Button variant="error-fill" size="lg" onClick={handleDeleteAccount}>
87+
{isDeactivating ? t("deactivating") : t("confirm")}
88+
</Button>
89+
</div>
90+
</ModalCore>
12591
);
12692
}

‎apps/web/core/components/automation/select-month-modal.tsx‎

Lines changed: 84 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
1-
import React from "react";
21
import { useParams } from "next/navigation";
32
// react-hook-form
43
import { Controller, useForm } from "react-hook-form";
5-
// headless ui
6-
import { Dialog, Transition } from "@headlessui/react";
74
import { Button } from "@plane/propel/button";
85
import type { IProject } from "@plane/types";
96
// ui
10-
import { Input } from "@plane/ui";
11-
// types
7+
import { Input, EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
128

139
// types
1410
type Props = {
@@ -43,124 +39,92 @@ export function SelectMonthModal({ type, initialValues, isOpen, handleClose, han
4339
};
4440

4541
return (
46-
<Transition.Root show={isOpen} as={React.Fragment}>
47-
<Dialog as="div" className="relative z-30" onClose={onClose}>
48-
<Transition.Child
49-
as={React.Fragment}
50-
enter="ease-out duration-300"
51-
enterFrom="opacity-0"
52-
enterTo="opacity-100"
53-
leave="ease-in duration-200"
54-
leaveFrom="opacity-100"
55-
leaveTo="opacity-0"
56-
>
57-
<div className="fixed inset-0 bg-backdrop transition-opacity" />
58-
</Transition.Child>
59-
60-
<div className="fixed inset-0 z-10 overflow-y-auto">
61-
<div className="flex min-h-full items-center justify-center p-4 text-center sm:p-0">
62-
<Transition.Child
63-
as={React.Fragment}
64-
enter="ease-out duration-300"
65-
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
66-
enterTo="opacity-100 translate-y-0 sm:scale-100"
67-
leave="ease-in duration-200"
68-
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
69-
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
70-
>
71-
<Dialog.Panel className="relative transform rounded-lg bg-surface-1 px-4 pb-4 pt-5 text-left shadow-raised-200 transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:p-6">
72-
<form onSubmit={handleSubmit(onSubmit)}>
73-
<div>
74-
<Dialog.Title as="h3" className="text-16 font-medium leading-6 text-primary">
75-
Customize time range
76-
</Dialog.Title>
77-
<div className="mt-8 flex items-center gap-2">
78-
<div className="flex w-full flex-col justify-center gap-1">
79-
{type === "auto-close" ? (
80-
<>
81-
<Controller
82-
control={control}
83-
name="close_in"
84-
rules={{
85-
required: "Select a month between 1 and 12.",
86-
min: 1,
87-
max: 12,
88-
}}
89-
render={({ field: { value, onChange, ref } }) => (
90-
<div className="relative flex w-full flex-col justify-center gap-1">
91-
<Input
92-
id="close_in"
93-
name="close_in"
94-
type="number"
95-
value={value?.toString()}
96-
onChange={onChange}
97-
ref={ref}
98-
hasError={Boolean(errors.close_in)}
99-
placeholder="Enter Months"
100-
className="w-full border-subtle"
101-
min={1}
102-
max={12}
103-
/>
104-
<span className="absolute right-8 top-2.5 text-13 text-secondary">Months</span>
105-
</div>
106-
)}
107-
/>
42+
<ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.CENTER} width={EModalWidth.XXL}>
43+
<form onSubmit={handleSubmit(onSubmit)}>
44+
<div>
45+
<h3 className="text-16 font-medium leading-6 text-primary">Customize time range</h3>
46+
<div className="mt-8 flex items-center gap-2">
47+
<div className="flex w-full flex-col justify-center gap-1">
48+
{type === "auto-close" ? (
49+
<>
50+
<Controller
51+
control={control}
52+
name="close_in"
53+
rules={{
54+
required: "Select a month between 1 and 12.",
55+
min: 1,
56+
max: 12,
57+
}}
58+
render={({ field: { value, onChange, ref } }) => (
59+
<div className="relative flex w-full flex-col justify-center gap-1">
60+
<Input
61+
id="close_in"
62+
name="close_in"
63+
type="number"
64+
value={value?.toString()}
65+
onChange={onChange}
66+
ref={ref}
67+
hasError={Boolean(errors.close_in)}
68+
placeholder="Enter Months"
69+
className="w-full border-subtle"
70+
min={1}
71+
max={12}
72+
/>
73+
<span className="absolute right-8 top-2.5 text-13 text-secondary">Months</span>
74+
</div>
75+
)}
76+
/>
10877

109-
{errors.close_in && (
110-
<span className="px-1 text-13 text-red-500">Select a month between 1 and 12.</span>
111-
)}
112-
</>
113-
) : (
114-
<>
115-
<Controller
116-
control={control}
117-
name="archive_in"
118-
rules={{
119-
required: "Select a month between 1 and 12.",
120-
min: 1,
121-
max: 12,
122-
}}
123-
render={({ field: { value, onChange, ref } }) => (
124-
<div className="relative flex w-full flex-col justify-center gap-1">
125-
<Input
126-
id="archive_in"
127-
name="archive_in"
128-
type="number"
129-
value={value?.toString()}
130-
onChange={onChange}
131-
ref={ref}
132-
hasError={Boolean(errors.archive_in)}
133-
placeholder="Enter Months"
134-
className="w-full border-subtle"
135-
min={1}
136-
max={12}
137-
/>
138-
<span className="absolute right-8 top-2.5 text-13 text-secondary">Months</span>
139-
</div>
140-
)}
141-
/>
142-
{errors.archive_in && (
143-
<span className="px-1 text-13 text-red-500">Select a month between 1 and 12.</span>
144-
)}
145-
</>
146-
)}
78+
{errors.close_in && (
79+
<span className="px-1 text-13 text-red-500">Select a month between 1 and 12.</span>
80+
)}
81+
</>
82+
) : (
83+
<>
84+
<Controller
85+
control={control}
86+
name="archive_in"
87+
rules={{
88+
required: "Select a month between 1 and 12.",
89+
min: 1,
90+
max: 12,
91+
}}
92+
render={({ field: { value, onChange, ref } }) => (
93+
<div className="relative flex w-full flex-col justify-center gap-1">
94+
<Input
95+
id="archive_in"
96+
name="archive_in"
97+
type="number"
98+
value={value?.toString()}
99+
onChange={onChange}
100+
ref={ref}
101+
hasError={Boolean(errors.archive_in)}
102+
placeholder="Enter Months"
103+
className="w-full border-subtle"
104+
min={1}
105+
max={12}
106+
/>
107+
<span className="absolute right-8 top-2.5 text-13 text-secondary">Months</span>
147108
</div>
148-
</div>
149-
</div>
150-
<div className="mt-5 flex justify-end gap-2">
151-
<Button variant="secondary" size="lg" onClick={onClose}>
152-
Cancel
153-
</Button>
154-
<Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
155-
{isSubmitting ? "Submitting..." : "Submit"}
156-
</Button>
157-
</div>
158-
</form>
159-
</Dialog.Panel>
160-
</Transition.Child>
109+
)}
110+
/>
111+
{errors.archive_in && (
112+
<span className="px-1 text-13 text-red-500">Select a month between 1 and 12.</span>
113+
)}
114+
</>
115+
)}
116+
</div>
161117
</div>
162118
</div>
163-
</Dialog>
164-
</Transition.Root>
119+
<div className="mt-5 flex justify-end gap-2">
120+
<Button variant="secondary" size="lg" onClick={onClose}>
121+
Cancel
122+
</Button>
123+
<Button variant="primary" size="lg" type="submit" loading={isSubmitting}>
124+
{isSubmitting ? "Submitting..." : "Submit"}
125+
</Button>
126+
</div>
127+
</form>
128+
</ModalCore>
165129
);
166130
}

0 commit comments

Comments
 (0)