From f639e467f84338dc2dcb67bc52c801021e70265a Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Fri, 3 Nov 2023 17:21:38 +0530 Subject: [PATCH] refactor: replace ui components with plane ui components (#2626) * refactor: replace button component with plane ui component and remove old button component * refactor: replace dropdown component with plane ui component * refactor: replace tooltip, input, textarea, spinner and loader component with plane ui component * refactor: plane ui code refactor --- .../src/breadcrumbs/{index.tsx => index.ts} | 0 .../ui/src/dropdowns/{index.tsx => index.ts} | 0 .../src/form-fields/{index.tsx => index.ts} | 0 packages/ui/src/icons/{index.tsx => index.ts} | 0 .../src/icons/state/{index.tsx => index.ts} | 0 .../ui/src/progress/{index.tsx => index.ts} | 0 .../ui/src/tooltip/{index.tsx => index.ts} | 0 web/components/cycles/cycles-view.tsx | 2 +- web/components/cycles/delete-modal.tsx | 11 ++-- web/components/estimates/estimate-select.tsx | 2 +- web/components/headers/project-views.tsx | 14 ++--- .../roots/project-view-root.tsx | 6 +-- web/components/labels/label-select.tsx | 2 +- .../labels/project-setting-label-group.tsx | 2 +- .../project-setting-label-list-item.tsx | 2 +- web/components/project/members-select.tsx | 4 +- web/components/project/priority-select.tsx | 4 +- web/components/states/create-state-modal.tsx | 3 +- .../states/create-update-state-inline.tsx | 3 +- web/components/states/state-select.tsx | 3 +- web/components/ui/buttons/danger-button.tsx | 36 ------------- web/components/ui/buttons/index.ts | 3 -- web/components/ui/buttons/primary-button.tsx | 32 ----------- .../ui/buttons/secondary-button.tsx | 32 ----------- web/components/ui/buttons/type.d.ts | 10 ---- web/components/ui/index.ts | 1 - web/components/ui/multi-level-dropdown.tsx | 2 +- web/components/ui/product-updates-modal.tsx | 3 +- web/components/views/delete-view-modal.tsx | 10 ++-- web/components/views/form.tsx | 54 ++++++++++++------- web/components/views/views-list.tsx | 4 +- web/components/views/workspace-dashboard.tsx | 8 +-- web/layouts/auth-layout/workspace-wrapper.tsx | 10 ++-- 33 files changed, 85 insertions(+), 178 deletions(-) rename packages/ui/src/breadcrumbs/{index.tsx => index.ts} (100%) rename packages/ui/src/dropdowns/{index.tsx => index.ts} (100%) rename packages/ui/src/form-fields/{index.tsx => index.ts} (100%) rename packages/ui/src/icons/{index.tsx => index.ts} (100%) rename packages/ui/src/icons/state/{index.tsx => index.ts} (100%) rename packages/ui/src/progress/{index.tsx => index.ts} (100%) rename packages/ui/src/tooltip/{index.tsx => index.ts} (100%) delete mode 100644 web/components/ui/buttons/danger-button.tsx delete mode 100644 web/components/ui/buttons/index.ts delete mode 100644 web/components/ui/buttons/primary-button.tsx delete mode 100644 web/components/ui/buttons/secondary-button.tsx delete mode 100644 web/components/ui/buttons/type.d.ts diff --git a/packages/ui/src/breadcrumbs/index.tsx b/packages/ui/src/breadcrumbs/index.ts similarity index 100% rename from packages/ui/src/breadcrumbs/index.tsx rename to packages/ui/src/breadcrumbs/index.ts diff --git a/packages/ui/src/dropdowns/index.tsx b/packages/ui/src/dropdowns/index.ts similarity index 100% rename from packages/ui/src/dropdowns/index.tsx rename to packages/ui/src/dropdowns/index.ts diff --git a/packages/ui/src/form-fields/index.tsx b/packages/ui/src/form-fields/index.ts similarity index 100% rename from packages/ui/src/form-fields/index.tsx rename to packages/ui/src/form-fields/index.ts diff --git a/packages/ui/src/icons/index.tsx b/packages/ui/src/icons/index.ts similarity index 100% rename from packages/ui/src/icons/index.tsx rename to packages/ui/src/icons/index.ts diff --git a/packages/ui/src/icons/state/index.tsx b/packages/ui/src/icons/state/index.ts similarity index 100% rename from packages/ui/src/icons/state/index.tsx rename to packages/ui/src/icons/state/index.ts diff --git a/packages/ui/src/progress/index.tsx b/packages/ui/src/progress/index.ts similarity index 100% rename from packages/ui/src/progress/index.tsx rename to packages/ui/src/progress/index.ts diff --git a/packages/ui/src/tooltip/index.tsx b/packages/ui/src/tooltip/index.ts similarity index 100% rename from packages/ui/src/tooltip/index.tsx rename to packages/ui/src/tooltip/index.ts diff --git a/web/components/cycles/cycles-view.tsx b/web/components/cycles/cycles-view.tsx index cacd23905..4eea43e6d 100644 --- a/web/components/cycles/cycles-view.tsx +++ b/web/components/cycles/cycles-view.tsx @@ -6,7 +6,7 @@ import { useMobxStore } from "lib/mobx/store-provider"; // components import { CyclesBoard, CyclesList, CyclesListGanttChartView } from "components/cycles"; // ui components -import { Loader } from "components/ui"; +import { Loader } from "@plane/ui"; // types import { TCycleLayout } from "types"; diff --git a/web/components/cycles/delete-modal.tsx b/web/components/cycles/delete-modal.tsx index 02d6126fe..b7f25028d 100644 --- a/web/components/cycles/delete-modal.tsx +++ b/web/components/cycles/delete-modal.tsx @@ -3,7 +3,7 @@ import { Dialog, Transition } from "@headlessui/react"; import { observer } from "mobx-react-lite"; import { AlertTriangle } from "lucide-react"; // components -import { DangerButton, SecondaryButton } from "components/ui"; +import { Button } from "@plane/ui"; // hooks import useToast from "hooks/use-toast"; // types @@ -101,10 +101,13 @@ export const CycleDeleteModal: React.FC = observer((props) => {

- Cancel - + + +
diff --git a/web/components/estimates/estimate-select.tsx b/web/components/estimates/estimate-select.tsx index 5ac283b83..e02cfaf89 100644 --- a/web/components/estimates/estimate-select.tsx +++ b/web/components/estimates/estimate-select.tsx @@ -3,7 +3,7 @@ import { usePopper } from "react-popper"; import { Combobox } from "@headlessui/react"; import { Check, ChevronDown, Search, Triangle } from "lucide-react"; // types -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; import { Placement } from "@popperjs/core"; // constants import { IEstimatePoint } from "types"; diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx index 52aa23c2f..a50e0774b 100644 --- a/web/components/headers/project-views.tsx +++ b/web/components/headers/project-views.tsx @@ -8,9 +8,7 @@ import { useMobxStore } from "lib/mobx/store-provider"; // components import { CreateUpdateProjectViewModal } from "components/views"; // components -import { Breadcrumbs, BreadcrumbItem } from "@plane/ui"; -// ui -import { PrimaryButton } from "components/ui"; +import { Breadcrumbs, BreadcrumbItem, Button } from "@plane/ui"; // helpers import { truncateText } from "helpers/string.helper"; @@ -59,10 +57,14 @@ export const ProjectViewsHeader: React.FC = observer(() => {
- setCreateViewModal(true)}> - +
diff --git a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx index 368b6b6fa..c8ee36fe7 100644 --- a/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx +++ b/web/components/issues/issue-layouts/filters/applied-filters/roots/project-view-root.tsx @@ -7,7 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider"; // components import { AppliedFiltersList } from "components/issues"; // ui -import { PrimaryButton } from "components/ui"; +import { Button } from "@plane/ui"; // helpers import { areFiltersDifferent } from "helpers/filter.helper"; // types @@ -102,9 +102,9 @@ export const ProjectViewAppliedFiltersRoot: React.FC = observer(() => { states={projectStore.states?.[projectId?.toString() ?? ""]} /> {storedFilters && viewDetails && areFiltersDifferent(storedFilters, viewDetails.query_data ?? {}) && ( - + )} ); diff --git a/web/components/labels/label-select.tsx b/web/components/labels/label-select.tsx index c70aa8d29..162c78b96 100644 --- a/web/components/labels/label-select.tsx +++ b/web/components/labels/label-select.tsx @@ -4,7 +4,7 @@ import { Placement } from "@popperjs/core"; import { Combobox } from "@headlessui/react"; import { Check, ChevronDown, Search } from "lucide-react"; // ui -import { Tooltip } from "components/ui"; +import { Tooltip } from "@plane/ui"; // types import { IIssueLabels } from "types"; diff --git a/web/components/labels/project-setting-label-group.tsx b/web/components/labels/project-setting-label-group.tsx index 675bcee72..a9949bb00 100644 --- a/web/components/labels/project-setting-label-group.tsx +++ b/web/components/labels/project-setting-label-group.tsx @@ -6,7 +6,7 @@ import { Disclosure, Transition } from "@headlessui/react"; import { observer } from "mobx-react-lite"; import { useMobxStore } from "lib/mobx/store-provider"; // ui -import { CustomMenu } from "components/ui"; +import { CustomMenu } from "@plane/ui"; // icons import { ChevronDown, Component, Pencil, Plus, Trash2, X } from "lucide-react"; // types diff --git a/web/components/labels/project-setting-label-list-item.tsx b/web/components/labels/project-setting-label-list-item.tsx index 41b4a8cb7..1729a6d8b 100644 --- a/web/components/labels/project-setting-label-list-item.tsx +++ b/web/components/labels/project-setting-label-list-item.tsx @@ -3,7 +3,7 @@ import React, { useRef, useState } from "react"; //hook import useOutsideClickDetector from "hooks/use-outside-click-detector"; // ui -import { CustomMenu } from "components/ui"; +import { CustomMenu } from "@plane/ui"; // types import { IIssueLabels } from "types"; //icons diff --git a/web/components/project/members-select.tsx b/web/components/project/members-select.tsx index b08e2ce00..457dd7d80 100644 --- a/web/components/project/members-select.tsx +++ b/web/components/project/members-select.tsx @@ -3,10 +3,8 @@ import { usePopper } from "react-popper"; import { Placement } from "@popperjs/core"; import { Combobox } from "@headlessui/react"; import { Check, ChevronDown, Search, User2 } from "lucide-react"; -// components -import { Tooltip } from "components/ui"; // ui -import { Avatar, AvatarGroup } from "@plane/ui"; +import { Avatar, AvatarGroup, Tooltip } from "@plane/ui"; // types import { IUserLite } from "types"; diff --git a/web/components/project/priority-select.tsx b/web/components/project/priority-select.tsx index 38a51ff6e..322938579 100644 --- a/web/components/project/priority-select.tsx +++ b/web/components/project/priority-select.tsx @@ -3,9 +3,7 @@ import { usePopper } from "react-popper"; import { Placement } from "@popperjs/core"; import { Combobox } from "@headlessui/react"; import { Check, ChevronDown, Search } from "lucide-react"; -import { PriorityIcon } from "@plane/ui"; -// components -import { Tooltip } from "components/ui"; +import { PriorityIcon, Tooltip } from "@plane/ui"; // helpers import { capitalizeFirstLetter } from "helpers/string.helper"; // types diff --git a/web/components/states/create-state-modal.tsx b/web/components/states/create-state-modal.tsx index c89937c07..46e36898d 100644 --- a/web/components/states/create-state-modal.tsx +++ b/web/components/states/create-state-modal.tsx @@ -10,8 +10,7 @@ import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useToast from "hooks/use-toast"; // ui -import { CustomSelect } from "components/ui"; -import { Button, Input, TextArea } from "@plane/ui"; +import { Button, CustomSelect, Input, TextArea } from "@plane/ui"; // icons import { ChevronDown } from "lucide-react"; // types diff --git a/web/components/states/create-update-state-inline.tsx b/web/components/states/create-update-state-inline.tsx index 8c910daa4..15a268272 100644 --- a/web/components/states/create-update-state-inline.tsx +++ b/web/components/states/create-update-state-inline.tsx @@ -11,8 +11,7 @@ import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useToast from "hooks/use-toast"; // ui -import { CustomSelect } from "components/ui"; -import { Button, Input, Tooltip } from "@plane/ui"; +import { Button, CustomSelect, Input, Tooltip } from "@plane/ui"; // types import type { IState } from "types"; // fetch-keys diff --git a/web/components/states/state-select.tsx b/web/components/states/state-select.tsx index b3765e767..8f1872f19 100644 --- a/web/components/states/state-select.tsx +++ b/web/components/states/state-select.tsx @@ -4,8 +4,7 @@ import { Placement } from "@popperjs/core"; import { Combobox } from "@headlessui/react"; import { Check, ChevronDown, Search } from "lucide-react"; // ui -import { StateGroupIcon } from "@plane/ui"; -import { Tooltip } from "components/ui"; +import { StateGroupIcon, Tooltip } from "@plane/ui"; // types import { IState } from "types"; diff --git a/web/components/ui/buttons/danger-button.tsx b/web/components/ui/buttons/danger-button.tsx deleted file mode 100644 index 3adb7012b..000000000 --- a/web/components/ui/buttons/danger-button.tsx +++ /dev/null @@ -1,36 +0,0 @@ -// types -import { ButtonProps } from "./type"; - -export const DangerButton: React.FC = ({ - children, - className = "", - onClick, - type = "button", - disabled = false, - loading = false, - size = "sm", - outline = false, -}) => ( - -); diff --git a/web/components/ui/buttons/index.ts b/web/components/ui/buttons/index.ts deleted file mode 100644 index 0ce5c556a..000000000 --- a/web/components/ui/buttons/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from "./danger-button"; -export * from "./primary-button"; -export * from "./secondary-button"; diff --git a/web/components/ui/buttons/primary-button.tsx b/web/components/ui/buttons/primary-button.tsx deleted file mode 100644 index 8817679b4..000000000 --- a/web/components/ui/buttons/primary-button.tsx +++ /dev/null @@ -1,32 +0,0 @@ -// types -import { ButtonProps } from "./type"; - -export const PrimaryButton: React.FC = ({ - children, - className = "", - onClick, - type = "button", - disabled = false, - loading = false, - size = "sm", - outline = false, -}) => ( - -); diff --git a/web/components/ui/buttons/secondary-button.tsx b/web/components/ui/buttons/secondary-button.tsx deleted file mode 100644 index a642dd65f..000000000 --- a/web/components/ui/buttons/secondary-button.tsx +++ /dev/null @@ -1,32 +0,0 @@ -// types -import { ButtonProps } from "./type"; - -export const SecondaryButton: React.FC = ({ - children, - className = "", - onClick, - type = "button", - disabled = false, - loading = false, - size = "sm", - outline = false, -}) => ( - -); diff --git a/web/components/ui/buttons/type.d.ts b/web/components/ui/buttons/type.d.ts deleted file mode 100644 index b227887ef..000000000 --- a/web/components/ui/buttons/type.d.ts +++ /dev/null @@ -1,10 +0,0 @@ -export type ButtonProps = { - children: React.ReactNode; - className?: string; - onClick?: (e: any) => void; - type?: "button" | "submit" | "reset"; - disabled?: boolean; - loading?: boolean; - size?: "sm" | "md" | "lg"; - outline?: boolean; -}; diff --git a/web/components/ui/index.ts b/web/components/ui/index.ts index 9aa134642..e92fbf6f8 100644 --- a/web/components/ui/index.ts +++ b/web/components/ui/index.ts @@ -1,4 +1,3 @@ -export * from "./buttons"; export * from "./dropdowns"; export * from "./graphs"; export * from "./input"; diff --git a/web/components/ui/multi-level-dropdown.tsx b/web/components/ui/multi-level-dropdown.tsx index dfc743811..13ed5c29c 100644 --- a/web/components/ui/multi-level-dropdown.tsx +++ b/web/components/ui/multi-level-dropdown.tsx @@ -3,7 +3,7 @@ import { Fragment, useState } from "react"; // headless ui import { Menu, Transition } from "@headlessui/react"; // ui -import { Loader } from "components/ui"; +import { Loader } from "@plane/ui"; // icons import { Check, ChevronDown, ChevronLeft, ChevronRight } from "lucide-react"; diff --git a/web/components/ui/product-updates-modal.tsx b/web/components/ui/product-updates-modal.tsx index f5298be6e..4cd2bfc56 100644 --- a/web/components/ui/product-updates-modal.tsx +++ b/web/components/ui/product-updates-modal.tsx @@ -7,7 +7,8 @@ import { Dialog, Transition } from "@headlessui/react"; // services import { WorkspaceService } from "services/workspace.service"; // components -import { Loader, MarkdownRenderer } from "components/ui"; +import { MarkdownRenderer } from "components/ui"; +import { Loader } from "@plane/ui"; // icons import { X } from "lucide-react"; // helpers diff --git a/web/components/views/delete-view-modal.tsx b/web/components/views/delete-view-modal.tsx index b4167e369..5d0f6bd96 100644 --- a/web/components/views/delete-view-modal.tsx +++ b/web/components/views/delete-view-modal.tsx @@ -8,7 +8,7 @@ import { useMobxStore } from "lib/mobx/store-provider"; // hooks import useToast from "hooks/use-toast"; // ui -import { DangerButton, SecondaryButton } from "components/ui"; +import { Button } from "@plane/ui"; // icons import { AlertTriangle } from "lucide-react"; // types @@ -112,10 +112,12 @@ export const DeleteProjectViewModal: React.FC = observer((props) => {
- Cancel - + +
diff --git a/web/components/views/form.tsx b/web/components/views/form.tsx index 9ec5b16f7..55ccb2fee 100644 --- a/web/components/views/form.tsx +++ b/web/components/views/form.tsx @@ -7,7 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider"; // components import { AppliedFiltersList, FilterSelection, FiltersDropdown } from "components/issues"; // ui -import { Input, PrimaryButton, SecondaryButton, TextArea } from "components/ui"; +import { Button, Input, TextArea } from "@plane/ui"; // types import { IProjectView } from "types"; // constants @@ -32,7 +32,6 @@ export const ProjectViewForm: React.FC = observer(({ handleFormSubmit, ha control, formState: { errors, isSubmitting }, handleSubmit, - register, reset, setValue, watch, @@ -70,32 +69,45 @@ export const ProjectViewForm: React.FC = observer(({ handleFormSubmit, ha

{data ? "Update" : "Create"} View

- ( + + )} />
-