thunderstrike/plane
thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

chore: swap dropdown component with plane/ui component (#2480)

Browse Source 
* chore: swap custom menu component with plane/ui component

* chore: swap custom select component with plane/ui component

* chore: swap custom search select component with plane/ui component
This commit is contained in:
Anmol Singh Bhatia 2023-10-19 15:24:51 +05:30 committed by GitHub
parent 0b8367a262
commit c0793ec8a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
91 changed files with 681 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
packages/ui/src/dropdowns/custom-menu.tsx Normal file
View File

@ -0,0 +1,152 @@
import * as React from "react";
// react-poppper
import { usePopper } from "react-popper";
// headless ui
import { Menu } from "@headlessui/react";
// type
import { ICustomMenuDropdownProps, ICustomMenuItemProps } from "./helper";
// icons
import { ChevronDown, MoreHorizontal } from "lucide-react";
const CustomMenu = (props: ICustomMenuDropdownProps) => {
const {
buttonClassName = "",
customButtonClassName = "",
placement,
children,
className = "",
customButton,
disabled = false,
ellipsis = false,
label,
maxHeight = "md",
noBorder = false,
noChevron = false,
optionsClassName = "",
verticalEllipsis = false,
width = "auto",
menuButtonOnClick,
} = props;
const [referenceElement, setReferenceElement] =
React.useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] =
React.useState<HTMLDivElement | null>(null);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: placement ?? "bottom-start",
});
return (
<Menu as="div" className={`relative w-min text-left ${className}`}>
{({ open }) => (
<>
{customButton ? (
<Menu.Button as={React.Fragment}>
<button
ref={setReferenceElement}
type="button"
onClick={menuButtonOnClick}
className={customButtonClassName}
>
{customButton}
</button>
</Menu.Button>
) : (
<>
{ellipsis || verticalEllipsis ? (
<Menu.Button as={React.Fragment}>
<button
ref={setReferenceElement}
type="button"
onClick={menuButtonOnClick}
disabled={disabled}
className={`relative grid place-items-center rounded p-1 text-custom-text-200 hover:text-custom-text-100 outline-none ${
disabled
? "cursor-not-allowed"
: "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
>
<MoreHorizontal
className={`h-3.5 w-3.5 ${
verticalEllipsis ? "rotate-90" : ""
}`}
/>
</button>
</Menu.Button>
) : (
<Menu.Button as={React.Fragment}>
<button
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 rounded-md px-2.5 py-1 text-xs whitespace-nowrap duration-300 ${
open
? "bg-custom-background-90 text-custom-text-100"
: "text-custom-text-200"
} ${
noBorder
? ""
: "border border-custom-border-300 shadow-sm focus:outline-none"
} ${
disabled
? "cursor-not-allowed text-custom-text-200"
: "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
>
{label}
{!noChevron && <ChevronDown className="h-3.5 w-3.5" />}
</button>
</Menu.Button>
)}
</>
)}
<Menu.Items>
<div
className={`z-10 overflow-y-scroll whitespace-nowrap rounded-md border border-custom-border-300 p-1 text-xs shadow-custom-shadow-rg focus:outline-none bg-custom-background-90 my-1 ${
maxHeight === "lg"
? "max-h-60"
: maxHeight === "md"
? "max-h-48"
: maxHeight === "rg"
? "max-h-36"
: maxHeight === "sm"
? "max-h-28"
: ""
} ${
width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
} ${optionsClassName}`}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
{children}
</div>
</Menu.Items>
</>
)}
</Menu>
);
};
const MenuItem: React.FC<ICustomMenuItemProps> = (props) => {
const { children, onClick, className = "" } = props;
return (
<Menu.Item as="div">
{({ active, close }) => (
<button
type="button"
className={`w-full select-none truncate rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80 ${
active ? "bg-custom-background-80" : ""
} ${className}`}
onClick={onClick}
>
{children}
</button>
)}
</Menu.Item>
);
};
CustomMenu.MenuItem = MenuItem;
export { CustomMenu };

204
packages/ui/src/dropdowns/custom-search-select.tsx Normal file
View File

@ -0,0 +1,204 @@
import React, { useState } from "react";
// react-popper
import { usePopper } from "react-popper";
// headless ui
import { Combobox } from "@headlessui/react";
// icons
import { Check, ChevronDown, Search } from "lucide-react";
// types
import { ICustomSearchSelectProps } from "./helper";
export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
const {
customButtonClassName = "",
buttonClassName = "",
className = "",
customButton,
placement,
disabled = false,
footerOption,
input = false,
label,
maxHeight = "md",
multiple = false,
noChevron = false,
onChange,
options,
onOpen,
optionsClassName = "",
value,
width = "auto",
} = props;
const [query, setQuery] = useState("");
const [referenceElement, setReferenceElement] =
useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
null
);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: placement ?? "bottom-start",
});
const filteredOptions =
query === ""
? options
: options?.filter((option) =>
option.query.toLowerCase().includes(query.toLowerCase())
);
const comboboxProps: any = {
value,
onChange,
disabled,
};
if (multiple) comboboxProps.multiple = true;
return (
<Combobox
as="div"
className={`relative flex-shrink-0 text-left ${className}`}
{...comboboxProps}
>
{({ open }: { open: boolean }) => {
if (open && onOpen) onOpen();
return (
<>
{customButton ? (
<Combobox.Button as={React.Fragment}>
<button
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 w-full text-xs ${
disabled
? "cursor-not-allowed text-custom-text-200"
: "cursor-pointer hover:bg-custom-background-80"
} ${customButtonClassName}`}
>
{customButton}
</button>
</Combobox.Button>
) : (
<Combobox.Button as={React.Fragment}>
<button
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
} ${
disabled
? "cursor-not-allowed text-custom-text-200"
: "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
>
{label}
{!noChevron && !disabled && (
<ChevronDown className="h-3 w-3" aria-hidden="true" />
)}
</button>
</Combobox.Button>
)}
<Combobox.Options as={React.Fragment}>
<div
className={`z-10 min-w-[10rem] border border-custom-border-300 p-2 rounded-md bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none my-1 ${
width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
} ${optionsClassName}`}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2">
<Search className="h-3 w-3 text-custom-text-200" />
<Combobox.Input
className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Type to search..."
displayValue={(assigned: any) => assigned?.name}
/>
</div>
<div
className={`mt-2 space-y-1 ${
maxHeight === "lg"
? "max-h-60"
: maxHeight === "md"
? "max-h-48"
: maxHeight === "rg"
? "max-h-36"
: maxHeight === "sm"
? "max-h-28"
: ""
} overflow-y-scroll`}
>
{filteredOptions ? (
filteredOptions.length > 0 ? (
filteredOptions.map((option) => (
<Combobox.Option
key={option.value}
value={option.value}
className={({ active, selected }) =>
`flex items-center justify-between gap-2 cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || selected
? "bg-custom-background-80"
: ""
} ${
selected
? "text-custom-text-100"
: "text-custom-text-200"
}`
}
>
{({ active, selected }) => (
<>
{option.content}
{multiple ? (
<div
className={`flex items-center justify-center rounded border border-custom-border-400 p-0.5 ${
active || selected
? "opacity-100"
: "opacity-0"
}`}
>
<Check
className={`h-3 w-3 ${
selected ? "opacity-100" : "opacity-0"
}`}
/>
</div>
) : (
<Check
className={`h-3 w-3 ${
selected ? "opacity-100" : "opacity-0"
}`}
/>
)}
</>
)}
</Combobox.Option>
))
) : (
<span className="flex items-center gap-2 p-1">
<p className="text-left text-custom-text-200 ">
No matching results
</p>
</span>
)
) : (
<p className="text-center text-custom-text-200">
Loading...
</p>
)}
</div>
{footerOption}
</div>
</Combobox.Options>
</>
);
}}
</Combobox>
);
};

135
packages/ui/src/dropdowns/custom-select.tsx Normal file
View File

@ -0,0 +1,135 @@
import React, { useState } from "react";
// react-popper
import { usePopper } from "react-popper";
// headless ui
import { Listbox } from "@headlessui/react";
// icons
import { Check, ChevronDown } from "lucide-react";
// types
import { ICustomSelectItemProps, ICustomSelectProps } from "./helper";
const CustomSelect = (props: ICustomSelectProps) => {
const {
customButtonClassName = "",
buttonClassName = "",
placement,
children,
className = "",
customButton,
disabled = false,
input = false,
label,
maxHeight = "md",
noChevron = false,
onChange,
optionsClassName = "",
value,
width = "auto",
} = props;
const [referenceElement, setReferenceElement] =
useState<HTMLButtonElement | null>(null);
const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
null
);
const { styles, attributes } = usePopper(referenceElement, popperElement, {
placement: placement ?? "bottom-start",
});
return (
<Listbox
as="div"
value={value}
onChange={onChange}
className={`relative flex-shrink-0 text-left ${className}`}
disabled={disabled}
>
<>
{customButton ? (
<Listbox.Button as={React.Fragment}>
<button
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 w-full text-xs ${
disabled
? "cursor-not-allowed text-custom-text-200"
: "cursor-pointer hover:bg-custom-background-80"
} ${customButtonClassName}`}
>
{customButton}
</button>
</Listbox.Button>
) : (
<Listbox.Button as={React.Fragment}>
<button
ref={setReferenceElement}
type="button"
className={`flex items-center justify-between gap-1 w-full rounded-md border border-custom-border-300 shadow-sm duration-300 focus:outline-none ${
input ? "px-3 py-2 text-sm" : "px-2.5 py-1 text-xs"
} ${
disabled
? "cursor-not-allowed text-custom-text-200"
: "cursor-pointer hover:bg-custom-background-80"
} ${buttonClassName}`}
>
{label}
{!noChevron && !disabled && (
<ChevronDown className="h-3 w-3" aria-hidden="true" />
)}
</button>
</Listbox.Button>
)}
</>
<Listbox.Options>
<div
className={`z-10 border border-custom-border-300 overflow-y-auto rounded-md bg-custom-background-90 text-xs shadow-custom-shadow-rg focus:outline-none my-1 ${
maxHeight === "lg"
? "max-h-60"
: maxHeight === "md"
? "max-h-48"
: maxHeight === "rg"
? "max-h-36"
: maxHeight === "sm"
? "max-h-28"
: ""
} ${
width === "auto" ? "min-w-[8rem] whitespace-nowrap" : width
} ${optionsClassName}`}
ref={setPopperElement}
style={styles.popper}
{...attributes.popper}
>
<div className="space-y-1 p-2">{children}</div>
</div>
</Listbox.Options>
</Listbox>
);
};
const Option = (props: ICustomSelectItemProps) => {
const { children, value, className } = props;
return (
<Listbox.Option
value={value}
className={({ active, selected }) =>
`cursor-pointer select-none truncate rounded px-1 py-1.5 ${
active || selected ? "bg-custom-background-80" : ""
} ${
selected ? "text-custom-text-100" : "text-custom-text-200"
} ${className}`
}
>
{({ selected }) => (
<div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-2">{children}</div>
{selected && <Check className="h-4 w-4 flex-shrink-0" />}
</div>
)}
</Listbox.Option>
);
};
CustomSelect.Option = Option;
export { CustomSelect };

69
packages/ui/src/dropdowns/helper.tsx Normal file
View File

@ -0,0 +1,69 @@
import { Placement } from "@blueprintjs/popover2";
export interface IDropdownProps {
customButtonClassName?: string;
buttonClassName?: string;
className?: string;
customButton?: JSX.Element;
disabled?: boolean;
input?: boolean;
label?: string | JSX.Element;
maxHeight?: "sm" | "rg" | "md" | "lg";
noChevron?: boolean;
onOpen?: () => void;
optionsClassName?: string;
width?: "auto" | string;
placement?: Placement;
}
export interface ICustomMenuDropdownProps extends IDropdownProps {
children: React.ReactNode;
ellipsis?: boolean;
noBorder?: boolean;
verticalEllipsis?: boolean;
menuButtonOnClick?: (...args: any) => void;
}
export interface ICustomSelectProps extends IDropdownProps {
children: React.ReactNode;
value: any;
onChange: any;
}
interface CustomSearchSelectProps {
footerOption?: JSX.Element;
onChange: any;
options:
| {
value: any;
query: string;
content: React.ReactNode;
}[]
| undefined;
}
interface SingleValueProps {
multiple?: false;
value: any;
}
interface MultipleValuesProps {
multiple?: true;
value: any[] | null;
}
export type ICustomSearchSelectProps = IDropdownProps &
CustomSearchSelectProps &
(SingleValueProps | MultipleValuesProps);
export interface ICustomMenuItemProps {
children: React.ReactNode;
onClick?: (args?: any) => void;
className?: string;
}
export interface ICustomSelectItemProps {
children: React.ReactNode;
value: any;
className?: string;
}

3
packages/ui/src/dropdowns/index.tsx Normal file
View File

@ -0,0 +1,3 @@
export * from "./custom-menu";
export * from "./custom-select";
export * from "./custom-search-select";

1
packages/ui/src/index.tsx
View File

@ -6,3 +6,4 @@ export * from "./loader";
export * from "./tooltip"; export * from "./tooltip";
export * from "./icons"; export * from "./icons";
export * from "./breadcrumbs"; export * from "./breadcrumbs";
export * from "./dropdowns";

2
web/components/analytics/custom-analytics/select/project.tsx
View File

@ -1,5 +1,5 @@
// ui // ui
import { CustomSearchSelect } from "components/ui"; import { CustomSearchSelect } from "@plane/ui";
// types // types
import { IProject } from "types"; import { IProject } from "types";

2
web/components/analytics/custom-analytics/select/segment.tsx
View File

@ -1,7 +1,7 @@
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect } from "@plane/ui";
// types // types
import { IAnalyticsParams, TXAxisValues } from "types"; import { IAnalyticsParams, TXAxisValues } from "types";
// constants // constants

2
web/components/analytics/custom-analytics/select/x-axis.tsx
View File

@ -1,7 +1,7 @@
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect } from "@plane/ui";
// types // types
import { TXAxisValues } from "types"; import { TXAxisValues } from "types";
// constants // constants

2
web/components/analytics/custom-analytics/select/y-axis.tsx
View File

@ -1,5 +1,5 @@
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect } from "@plane/ui";
// types // types
import { TYAxisValues } from "types"; import { TYAxisValues } from "types";
// constants // constants

3
web/components/automation/auto-archive-automation.tsx
View File

@ -1,8 +1,7 @@
import React, { useState } from "react"; import React, { useState } from "react";
// component // component
import { CustomSelect } from "components/ui"; import { CustomSelect, ToggleSwitch } from "@plane/ui";
import { ToggleSwitch } from "@plane/ui";
import { SelectMonthModal } from "components/automation"; import { SelectMonthModal } from "components/automation";
// icon // icon
import { ArchiveRestore } from "lucide-react"; import { ArchiveRestore } from "lucide-react";

3
web/components/automation/auto-close-automation.tsx
View File

@ -2,9 +2,8 @@ import React, { useState } from "react";
import useSWR from "swr"; import useSWR from "swr";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
// component // component
import { CustomSearchSelect, CustomSelect } from "components/ui";
import { SelectMonthModal } from "components/automation"; import { SelectMonthModal } from "components/automation";
import { ToggleSwitch, StateGroupIcon, DoubleCircleIcon } from "@plane/ui"; import { CustomSelect, CustomSearchSelect, ToggleSwitch, StateGroupIcon, DoubleCircleIcon } from "@plane/ui";
// icons // icons
import { ArchiveX } from "lucide-react"; import { ArchiveX } from "lucide-react";
// services // services

3
web/components/core/filters/date-filter-select.tsx
View File

@ -1,9 +1,8 @@
import React from "react"; import React from "react";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect, CalendarAfterIcon, CalendarBeforeIcon } from "@plane/ui";
// icons // icons
import { CalendarAfterIcon, CalendarBeforeIcon } from "@plane/ui";
import { CalendarDays } from "lucide-react"; import { CalendarDays } from "lucide-react";
// fetch-keys // fetch-keys

2
web/components/core/theme/theme-switch.tsx
View File

@ -2,7 +2,7 @@ import { FC } from "react";
// constants // constants
import { THEME_OPTIONS, I_THEME_OPTION } from "constants/themes"; import { THEME_OPTIONS, I_THEME_OPTION } from "constants/themes";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect } from "@plane/ui";
type Props = { type Props = {
value: I_THEME_OPTION | null; value: I_THEME_OPTION | null;

3
web/components/cycles/cycles-board-card.tsx
View File

@ -10,9 +10,8 @@ import { SingleProgressStats } from "components/core";
import { CycleCreateEditModal } from "./cycle-create-edit-modal"; import { CycleCreateEditModal } from "./cycle-create-edit-modal";
import { CycleDeleteModal } from "./cycle-delete-modal"; import { CycleDeleteModal } from "./cycle-delete-modal";
// ui // ui
import { CustomMenu } from "components/ui";
import { AssigneesList } from "components/ui/avatar"; import { AssigneesList } from "components/ui/avatar";
import { Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui"; import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
// icons // icons
import { import {
AlarmClock, AlarmClock,

3
web/components/cycles/cycles-list-item.tsx
View File

@ -6,8 +6,7 @@ import useToast from "hooks/use-toast";
import { CycleCreateEditModal } from "./cycle-create-edit-modal"; import { CycleCreateEditModal } from "./cycle-create-edit-modal";
import { CycleDeleteModal } from "./cycle-delete-modal"; import { CycleDeleteModal } from "./cycle-delete-modal";
// ui // ui
import { RadialProgressBar, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui"; import { CustomMenu, RadialProgressBar, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
import { CustomMenu } from "components/ui";
// icons // icons
import { import {
AlarmClock, AlarmClock,

4
web/components/cycles/sidebar.tsx
View File

@ -13,8 +13,8 @@ import { SidebarProgressStats } from "components/core";
import ProgressChart from "components/core/sidebar/progress-chart"; import ProgressChart from "components/core/sidebar/progress-chart";
import { CycleDeleteModal } from "components/cycles/cycle-delete-modal"; import { CycleDeleteModal } from "components/cycles/cycle-delete-modal";
// ui // ui
import { CustomMenu, CustomRangeDatePicker } from "components/ui"; import { CustomRangeDatePicker } from "components/ui";
import { Loader, ProgressBar } from "@plane/ui"; import { CustomMenu, Loader, ProgressBar } from "@plane/ui";
// icons // icons
import { import {
CalendarDays, CalendarDays,

3
web/components/cycles/single-cycle-card.tsx
View File

@ -10,8 +10,7 @@ import useToast from "hooks/use-toast";
// components // components
import { SingleProgressStats } from "components/core"; import { SingleProgressStats } from "components/core";
// ui // ui
import { Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui"; import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
import { CustomMenu } from "components/ui";
import { AssigneesList } from "components/ui/avatar"; import { AssigneesList } from "components/ui/avatar";
// icons // icons
import { import {

3
web/components/cycles/single-cycle-list.tsx
View File

@ -6,8 +6,7 @@ import { useRouter } from "next/router";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu, Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
import { Tooltip, LinearProgressIndicator, ContrastIcon, RunningIcon } from "@plane/ui";
// icons // icons
import { import {
AlarmClock, AlarmClock,

3
web/components/estimates/single-estimate.tsx
View File

@ -10,8 +10,7 @@ import useProjectDetails from "hooks/use-project-details";
// components // components
import { DeleteEstimateModal } from "components/estimates"; import { DeleteEstimateModal } from "components/estimates";
// ui // ui
import { Button } from "@plane/ui"; import { Button, CustomMenu } from "@plane/ui";
import { CustomMenu } from "components/ui";
//icons //icons
import { Pencil, Trash2 } from "lucide-react"; import { Pencil, Trash2 } from "lucide-react";
// helpers // helpers

3
web/components/exporter/export-modal.tsx
View File

@ -9,8 +9,7 @@ import { ProjectExportService } from "services/project";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { Button } from "@plane/ui"; import { Button, CustomSearchSelect } from "@plane/ui";
import { CustomSearchSelect } from "components/ui";
// types // types
import { IUser, IImporterService } from "types"; import { IUser, IImporterService } from "types";

3
web/components/integration/github/import-data.tsx
View File

@ -7,8 +7,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
// components // components
import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration"; import { SelectRepository, TFormValues, TIntegrationSteps } from "components/integration";
// ui // ui
import { Button, ToggleSwitch } from "@plane/ui"; import { Button, CustomSearchSelect, ToggleSwitch } from "@plane/ui";
import { CustomSearchSelect } from "components/ui";
// helpers // helpers
import { truncateText } from "helpers/string.helper"; import { truncateText } from "helpers/string.helper";
// types // types

2
web/components/integration/github/select-repository.tsx
View File

@ -4,7 +4,7 @@ import useSWRInfinite from "swr/infinite";
// services // services
import { ProjectService } from "services/project"; import { ProjectService } from "services/project";
// ui // ui
import { CustomSearchSelect } from "components/ui"; import { CustomSearchSelect } from "@plane/ui";
// helpers // helpers
import { truncateText } from "helpers/string.helper"; import { truncateText } from "helpers/string.helper";
// types // types

4
web/components/integration/github/single-user-select.tsx
View File

@ -5,8 +5,8 @@ import useSWR from "swr";
// services // services
import { WorkspaceService } from "services/workspace.service"; import { WorkspaceService } from "services/workspace.service";
// ui // ui
import { Avatar, CustomSearchSelect, CustomSelect } from "components/ui"; import { Avatar } from "components/ui";
import { Input } from "@plane/ui"; import { CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
// types // types
import { IGithubRepoCollaborator } from "types"; import { IGithubRepoCollaborator } from "types";
import { IUserDetails } from "./root"; import { IUserDetails } from "./root";

3
web/components/integration/jira/give-details.tsx
View File

@ -8,8 +8,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
// icons // icons
import { Plus } from "lucide-react"; import { Plus } from "lucide-react";
// components // components
import { CustomSelect } from "components/ui"; import { CustomSelect, Input } from "@plane/ui";
import { Input } from "@plane/ui";
// types // types
import { IJiraImporterForm } from "types"; import { IJiraImporterForm } from "types";

4
web/components/integration/jira/import-users.tsx
View File

@ -7,8 +7,8 @@ import { WORKSPACE_MEMBERS_WITH_EMAIL } from "constants/fetch-keys";
// services // services
import { WorkspaceService } from "services/workspace.service"; import { WorkspaceService } from "services/workspace.service";
// components // components
import { CustomSelect, CustomSearchSelect, Avatar } from "components/ui"; import { Avatar } from "components/ui";
import { Input, ToggleSwitch } from "@plane/ui"; import { CustomSelect, CustomSearchSelect, Input, ToggleSwitch } from "@plane/ui";
// types // types
import { IJiraImporterForm } from "types"; import { IJiraImporterForm } from "types";

2
web/components/integration/single-import.tsx
View File

@ -1,5 +1,5 @@
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu } from "@plane/ui";
// icons // icons
import { Trash2 } from "lucide-react"; import { Trash2 } from "lucide-react";
// helpers // helpers

4
web/components/issues/comment/comment-card.tsx
View File

@ -8,7 +8,7 @@ import { Check, Globe2, Lock, MessageSquare, Pencil, Trash2, X } from "lucide-re
// hooks // hooks
import useUser from "hooks/use-user"; import useUser from "hooks/use-user";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu } from "@plane/ui";
import { CommentReaction } from "components/issues"; import { CommentReaction } from "components/issues";
import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor"; import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
// helpers // helpers
@ -156,7 +156,6 @@ export const CommentCard: React.FC<Props> = ({
<> <>
{comment.access === "INTERNAL" ? ( {comment.access === "INTERNAL" ? (
<CustomMenu.MenuItem <CustomMenu.MenuItem
renderAs="button"
onClick={() => onSubmit(comment.id, { access: "EXTERNAL" })} onClick={() => onSubmit(comment.id, { access: "EXTERNAL" })}
className="flex items-center gap-1" className="flex items-center gap-1"
> >
@ -165,7 +164,6 @@ export const CommentCard: React.FC<Props> = ({
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
) : ( ) : (
<CustomMenu.MenuItem <CustomMenu.MenuItem
renderAs="button"
onClick={() => onSubmit(comment.id, { access: "INTERNAL" })} onClick={() => onSubmit(comment.id, { access: "INTERNAL" })}
className="flex items-center gap-1" className="flex items-center gap-1"
> >

10
web/components/issues/draft-issue-form.tsx
View File

@ -22,8 +22,8 @@ import {
import { CreateStateModal } from "components/states"; import { CreateStateModal } from "components/states";
import { CreateLabelModal } from "components/labels"; import { CreateLabelModal } from "components/labels";
// ui // ui
import { CustomMenu } from "components/ui"; import {} from "components/ui";
import { Button, Input, ToggleSwitch } from "@plane/ui"; import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
// icons // icons
import { Sparkle, X } from "lucide-react"; import { Sparkle, X } from "lucide-react";
// types // types
@ -578,15 +578,15 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
<CustomMenu ellipsis> <CustomMenu ellipsis>
{watch("parent") ? ( {watch("parent") ? (
<> <>
<CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}> <CustomMenu.MenuItem onClick={() => setParentIssueListModalOpen(true)}>
Change parent issue Change parent issue
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
<CustomMenu.MenuItem renderAs="button" onClick={() => setValue("parent", null)}> <CustomMenu.MenuItem onClick={() => setValue("parent", null)}>
Remove parent issue Remove parent issue
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
</> </>
) : ( ) : (
<CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}> <CustomMenu.MenuItem onClick={() => setParentIssueListModalOpen(true)}>
Select Parent Issue Select Parent Issue
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
)} )}

21
web/components/issues/form.tsx
View File

@ -24,8 +24,7 @@ import {
import { CreateStateModal } from "components/states"; import { CreateStateModal } from "components/states";
import { CreateLabelModal } from "components/labels"; import { CreateLabelModal } from "components/labels";
// ui // ui
import { CustomMenu } from "components/ui"; import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
import { Button, Input, ToggleSwitch } from "@plane/ui";
// icons // icons
import { LayoutPanelTop, Sparkle, X } from "lucide-react"; import { LayoutPanelTop, Sparkle, X } from "lucide-react";
// types // types
@ -533,27 +532,15 @@ export const IssueForm: FC<IssueFormProps> = observer((props) => {
> >
{watch("parent") ? ( {watch("parent") ? (
<> <>
<CustomMenu.MenuItem <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
renderAs="button"
className="!p-1"
onClick={() => setParentIssueListModalOpen(true)}
>
Change parent issue Change parent issue
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
<CustomMenu.MenuItem <CustomMenu.MenuItem className="!p-1" onClick={() => setValue("parent", null)}>
renderAs="button"
className="!p-1"
onClick={() => setValue("parent", null)}
>
Remove parent issue Remove parent issue
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
</> </>
) : ( ) : (
<CustomMenu.MenuItem <CustomMenu.MenuItem className="!p-1" onClick={() => setParentIssueListModalOpen(true)}>
renderAs="button"
className="!p-1"
onClick={() => setParentIssueListModalOpen(true)}
>
Select Parent Issue Select Parent Issue
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
)} )}

13
web/components/issues/issue-layouts/spreadsheet/spreadsheet-column.tsx
View File

@ -22,7 +22,7 @@ import {
SpreadsheetUpdatedOnColumn, SpreadsheetUpdatedOnColumn,
} from "components/issues"; } from "components/issues";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu } from "@plane/ui";
// types // types
import { import {
IIssue, IIssue,
@ -101,10 +101,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
} }
width="xl" width="xl"
> >
<CustomMenu.MenuItem <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}>
renderAs="button"
onClick={() => handleOrderBy(propertyDetails.ascendingOrderKey, property)}
>
<div <div
className={`flex gap-1.5 px-1 items-center justify-between ${ className={`flex gap-1.5 px-1 items-center justify-between ${
selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}` selectedMenuItem === `${propertyDetails.ascendingOrderKey}_${property}`
@ -124,10 +121,7 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
)} )}
</div> </div>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
<CustomMenu.MenuItem <CustomMenu.MenuItem onClick={() => handleOrderBy(propertyDetails.descendingOrderKey, property)}>
renderAs="button"
onClick={() => handleOrderBy(propertyDetails.descendingOrderKey, property)}
>
<div <div
className={`flex gap-1.5 px-1 items-center justify-between ${ className={`flex gap-1.5 px-1 items-center justify-between ${
selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}` selectedMenuItem === `${propertyDetails.descendingOrderKey}_${property}`
@ -152,7 +146,6 @@ export const SpreadsheetColumn: React.FC<Props> = (props) => {
displayFilters?.order_by !== "-created_at" && displayFilters?.order_by !== "-created_at" &&
selectedMenuItem.includes(property) && ( selectedMenuItem.includes(property) && (
<CustomMenu.MenuItem <CustomMenu.MenuItem
renderAs="button"
className={`mt-0.5 ${selectedMenuItem === `-created_at_${property}` ? "bg-custom-background-80" : ""}`} className={`mt-0.5 ${selectedMenuItem === `-created_at_${property}` ? "bg-custom-background-80" : ""}`}
key={property} key={property}
onClick={() => handleOrderBy("-created_at", property)} onClick={() => handleOrderBy("-created_at", property)}

3
web/components/issues/issue-layouts/spreadsheet/spreadsheet-view.tsx
View File

@ -8,8 +8,7 @@ import {
// ListInlineCreateIssueForm, // ListInlineCreateIssueForm,
SpreadsheetIssuesColumn, SpreadsheetIssuesColumn,
} from "components/issues"; } from "components/issues";
import { CustomMenu } from "components/ui"; import { CustomMenu, Spinner } from "@plane/ui";
import { Spinner } from "@plane/ui";
// types // types
import { import {
IIssue, IIssue,

9
web/components/issues/main-content.tsx
View File

@ -22,9 +22,8 @@ import {
} from "components/issues"; } from "components/issues";
import { SubIssuesRoot } from "./sub-issues"; import { SubIssuesRoot } from "./sub-issues";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu, LayersIcon } from "@plane/ui";
// icons // icons
import { LayersIcon } from "@plane/ui";
import { MinusCircle } from "lucide-react"; import { MinusCircle } from "lucide-react";
// types // types
import { IIssue, IIssueComment } from "types"; import { IIssue, IIssueComment } from "types";
@ -138,8 +137,9 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges,
{siblingIssuesList.map((issue) => ( {siblingIssuesList.map((issue) => (
<CustomMenu.MenuItem <CustomMenu.MenuItem
key={issue.id} key={issue.id}
renderAs="a" onClick={() =>
href={`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id}`} router.push(`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id}`)
}
className="flex items-center gap-2 py-2" className="flex items-center gap-2 py-2"
> >
<LayersIcon className="h-4 w-4" /> <LayersIcon className="h-4 w-4" />
@ -154,7 +154,6 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges,
) )
) : null} ) : null}
<CustomMenu.MenuItem <CustomMenu.MenuItem
renderAs="button"
onClick={() => submitChanges({ parent: null })} onClick={() => submitChanges({ parent: null })}
className="flex items-center gap-2 text-red-500 py-2" className="flex items-center gap-2 text-red-500 py-2"
> >

3
web/components/issues/peek-overview/header.tsx
View File

@ -3,9 +3,8 @@ import Link from "next/link";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect, FullScreenPeekIcon, ModalPeekIcon, SidePeekIcon } from "@plane/ui";
// icons // icons
import { FullScreenPeekIcon, ModalPeekIcon, SidePeekIcon } from "@plane/ui";
import { LinkIcon, MoveRight, Trash2 } from "lucide-react"; import { LinkIcon, MoveRight, Trash2 } from "lucide-react";
// helpers // helpers
import { copyTextToClipboard } from "helpers/string.helper"; import { copyTextToClipboard } from "helpers/string.helper";

3
web/components/issues/select/assignee.tsx
View File

@ -5,7 +5,8 @@ import useSWR from "swr";
// services // services
import { ProjectService } from "services/project"; import { ProjectService } from "services/project";
// ui // ui
import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui"; import { AssigneesList, Avatar } from "components/ui";
import { CustomSearchSelect } from "@plane/ui";
import { User2 } from "lucide-react"; import { User2 } from "lucide-react";
// fetch-keys // fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";

2
web/components/issues/select/estimate.tsx
View File

@ -1,7 +1,7 @@
import React from "react"; import React from "react";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect } from "@plane/ui";
// icons // icons
import { Triangle } from "lucide-react"; import { Triangle } from "lucide-react";
// fetch-keys // fetch-keys

4
web/components/issues/select/priority.tsx
View File

@ -1,9 +1,7 @@
import React from "react"; import React from "react";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect, PriorityIcon } from "@plane/ui";
// icons
import { PriorityIcon } from "@plane/ui";
// types // types
import { TIssuePriorities } from "types"; import { TIssuePriorities } from "types";
// constants // constants

2
web/components/issues/select/project.tsx
View File

@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect } from "@plane/ui";
// helpers // helpers
import { renderEmoji } from "helpers/emoji.helper"; import { renderEmoji } from "helpers/emoji.helper";
// icons // icons

3
web/components/issues/select/state.tsx
View File

@ -7,9 +7,8 @@ import useSWR from "swr";
// services // services
import { ProjectStateService } from "services/project"; import { ProjectStateService } from "services/project";
// ui // ui
import { CustomSearchSelect } from "components/ui"; import { CustomSearchSelect, DoubleCircleIcon, StateGroupIcon } from "@plane/ui";
// icons // icons
import { DoubleCircleIcon, StateGroupIcon } from "@plane/ui";
import { Plus } from "lucide-react"; import { Plus } from "lucide-react";
// helpers // helpers
import { getStatesList } from "helpers/state.helper"; import { getStatesList } from "helpers/state.helper";

2
web/components/issues/sidebar-select/assignee.tsx
View File

@ -7,7 +7,7 @@ import useSWR from "swr";
// services // services
import { ProjectService } from "services/project"; import { ProjectService } from "services/project";
// ui // ui
import { CustomSearchSelect } from "components/ui"; import { CustomSearchSelect } from "@plane/ui";
import { AssigneesList, Avatar } from "components/ui/avatar"; import { AssigneesList, Avatar } from "components/ui/avatar";
// fetch-keys // fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";

3
web/components/issues/sidebar-select/cycle.tsx
View File

@ -8,8 +8,7 @@ import useSWR, { mutate } from "swr";
import { IssueService } from "services/issue"; import { IssueService } from "services/issue";
import { CycleService } from "services/cycle.service"; import { CycleService } from "services/cycle.service";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect, Spinner, Tooltip } from "@plane/ui";
import { Spinner, Tooltip } from "@plane/ui";
// helper // helper
import { truncateText } from "helpers/string.helper"; import { truncateText } from "helpers/string.helper";
// types // types

2
web/components/issues/sidebar-select/estimate.tsx
View File

@ -3,7 +3,7 @@ import React from "react";
// hooks // hooks
import useEstimateOption from "hooks/use-estimate-option"; import useEstimateOption from "hooks/use-estimate-option";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect } from "@plane/ui";
// icons // icons
import { Triangle } from "lucide-react"; import { Triangle } from "lucide-react";

3
web/components/issues/sidebar-select/module.tsx
View File

@ -4,8 +4,7 @@ import useSWR, { mutate } from "swr";
// services // services
import { ModuleService } from "services/module.service"; import { ModuleService } from "services/module.service";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect, Spinner, Tooltip } from "@plane/ui";
import { Spinner, Tooltip } from "@plane/ui";
// helper // helper
import { truncateText } from "helpers/string.helper"; import { truncateText } from "helpers/string.helper";
// types // types

4
web/components/issues/sidebar-select/priority.tsx
View File

@ -1,9 +1,7 @@
import React from "react"; import React from "react";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect, PriorityIcon } from "@plane/ui";
// icons
import { PriorityIcon } from "@plane/ui";
// types // types
import { TIssuePriorities } from "types"; import { TIssuePriorities } from "types";
// constants // constants

3
web/components/issues/sidebar-select/state.tsx
View File

@ -7,8 +7,7 @@ import useSWR from "swr";
// services // services
import { ProjectStateService } from "services/project"; import { ProjectStateService } from "services/project";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect, Spinner, StateGroupIcon } from "@plane/ui";
import { Spinner, StateGroupIcon } from "@plane/ui";
// helpers // helpers
import { getStatesList } from "helpers/state.helper"; import { getStatesList } from "helpers/state.helper";
import { addSpaceIfCamelCase } from "helpers/string.helper"; import { addSpaceIfCamelCase } from "helpers/string.helper";

3
web/components/issues/sub-issues/issue.tsx
View File

@ -10,8 +10,7 @@ import { IssuePeekOverview } from "components/issues/peek-overview";
import { SubIssuesRootList } from "./issues-list"; import { SubIssuesRootList } from "./issues-list";
import { IssueProperty } from "./properties"; import { IssueProperty } from "./properties";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu, Tooltip } from "@plane/ui";
import { Tooltip } from "@plane/ui";
// types // types
import { IUser, IIssue } from "types"; import { IUser, IIssue } from "types";
import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root"; import { ISubIssuesRootLoaders, ISubIssuesRootLoadersHandler } from "./root";

2
web/components/issues/sub-issues/root.tsx
View File

@ -11,7 +11,7 @@ import { CreateUpdateIssueModal, DeleteIssueModal } from "components/issues";
import { SubIssuesRootList } from "./issues-list"; import { SubIssuesRootList } from "./issues-list";
import { ProgressBar } from "./progressbar"; import { ProgressBar } from "./progressbar";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu } from "@plane/ui";
// hooks // hooks
import { useProjectMyMembership } from "contexts/project-member.context"; import { useProjectMyMembership } from "contexts/project-member.context";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";

4
web/components/issues/view-select/assignee.tsx
View File

@ -3,8 +3,8 @@ import { useRouter } from "next/router";
// services // services
import { TrackEventService } from "services/track_event.service"; import { TrackEventService } from "services/track_event.service";
// ui // ui
import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui"; import { AssigneesList, Avatar } from "components/ui";
import { Tooltip } from "@plane/ui"; import { CustomSearchSelect, Tooltip } from "@plane/ui";
import { User2 } from "lucide-react"; import { User2 } from "lucide-react";
// types // types
import { IUser, IIssue } from "types"; import { IUser, IIssue } from "types";

3
web/components/issues/view-select/estimate.tsx
View File

@ -2,8 +2,7 @@ import React from "react";
// hooks // hooks
import useEstimateOption from "hooks/use-estimate-option"; import useEstimateOption from "hooks/use-estimate-option";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect, Tooltip } from "@plane/ui";
import { Tooltip } from "@plane/ui";
// icons // icons
import { Triangle } from "lucide-react"; import { Triangle } from "lucide-react";
// types // types

3
web/components/issues/view-select/label.tsx
View File

@ -6,8 +6,7 @@ import { IssueLabelService } from "services/issue";
// component // component
import { CreateLabelModal } from "components/labels"; import { CreateLabelModal } from "components/labels";
// ui // ui
import { CustomSearchSelect } from "components/ui"; import { CustomSearchSelect, Tooltip } from "@plane/ui";
import { Tooltip } from "@plane/ui";
// icons // icons
import { Plus, Tag } from "lucide-react"; import { Plus, Tag } from "lucide-react";
// types // types

3
web/components/issues/view-select/priority.tsx
View File

@ -3,8 +3,7 @@ import { useRouter } from "next/router";
// services // services
import { TrackEventService } from "services/track_event.service"; import { TrackEventService } from "services/track_event.service";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect, Tooltip, PriorityIcon } from "@plane/ui";
import { Tooltip, PriorityIcon } from "@plane/ui";
// helpers // helpers
import { capitalizeFirstLetter } from "helpers/string.helper"; import { capitalizeFirstLetter } from "helpers/string.helper";
// types // types

2
web/components/labels/single-label-group.tsx
View File

@ -9,7 +9,7 @@ import { Disclosure, Transition } from "@headlessui/react";
// services // services
import { IssueLabelService } from "services/issue"; import { IssueLabelService } from "services/issue";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu } from "@plane/ui";
// icons // icons
import { ChevronDown, Component, Pencil, Plus, Trash2, X } from "lucide-react"; import { ChevronDown, Component, Pencil, Plus, Trash2, X } from "lucide-react";
// types // types

2
web/components/labels/single-label.tsx
View File

@ -3,7 +3,7 @@ import React, { useRef, useState } from "react";
//hook //hook
import useOutsideClickDetector from "hooks/use-outside-click-detector"; import useOutsideClickDetector from "hooks/use-outside-click-detector";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu } from "@plane/ui";
// types // types
import { IIssueLabels } from "types"; import { IIssueLabels } from "types";
//icons //icons

3
web/components/modules/select/lead.tsx
View File

@ -4,7 +4,8 @@ import useSWR from "swr";
// services // services
import { ProjectService } from "services/project"; import { ProjectService } from "services/project";
// ui // ui
import { Avatar, CustomSearchSelect } from "components/ui"; import { Avatar } from "components/ui";
import { CustomSearchSelect } from "@plane/ui";
// icons // icons
import { UserCircle } from "lucide-react"; import { UserCircle } from "lucide-react";
// fetch-keys // fetch-keys

4
web/components/modules/select/members.tsx
View File

@ -4,9 +4,9 @@ import useSWR from "swr";
// services // services
import { ProjectService } from "services/project"; import { ProjectService } from "services/project";
// ui // ui
import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui"; import { AssigneesList, Avatar } from "components/ui";
// icons // icons
import { UserGroupIcon } from "@plane/ui"; import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
// fetch-keys // fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";

4
web/components/modules/select/status.tsx
View File

@ -3,9 +3,7 @@ import React from "react";
// react hook form // react hook form
import { Controller, FieldError, Control } from "react-hook-form"; import { Controller, FieldError, Control } from "react-hook-form";
// ui // ui
import { CustomSelect } from "components/ui"; import { CustomSelect, DoubleCircleIcon, ModuleStatusIcon } from "@plane/ui";
// icons
import { DoubleCircleIcon, ModuleStatusIcon } from "@plane/ui";
// types // types
import type { IModule } from "types"; import type { IModule } from "types";
// constants // constants

3
web/components/modules/sidebar-select/select-lead.tsx
View File

@ -4,7 +4,8 @@ import useSWR from "swr";
// services // services
import { ProjectService } from "services/project"; import { ProjectService } from "services/project";
// ui // ui
import { Avatar, CustomSearchSelect } from "components/ui"; import { Avatar } from "components/ui";
import { CustomSearchSelect } from "@plane/ui";
// icons // icons
import { UserCircle2 } from "lucide-react"; import { UserCircle2 } from "lucide-react";
// fetch-keys // fetch-keys

4
web/components/modules/sidebar-select/select-members.tsx
View File

@ -7,8 +7,8 @@ import useSWR from "swr";
// services // services
import { ProjectService } from "services/project"; import { ProjectService } from "services/project";
// ui // ui
import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui"; import { AssigneesList, Avatar } from "components/ui";
import { UserGroupIcon } from "@plane/ui"; import { CustomSearchSelect, UserGroupIcon } from "@plane/ui";
// icons // icons
// fetch-keys // fetch-keys
import { PROJECT_MEMBERS } from "constants/fetch-keys"; import { PROJECT_MEMBERS } from "constants/fetch-keys";

3
web/components/modules/sidebar-select/select-status.tsx
View File

@ -3,8 +3,7 @@ import React from "react";
// react-hook-form // react-hook-form
import { Control, Controller, UseFormWatch } from "react-hook-form"; import { Control, Controller, UseFormWatch } from "react-hook-form";
// ui // ui
import { DoubleCircleIcon } from "@plane/ui"; import { CustomSelect, DoubleCircleIcon } from "@plane/ui";
import { CustomSelect } from "components/ui";
// types // types
import { IModule } from "types"; import { IModule } from "types";
// common // common

3
web/components/modules/sidebar.tsx
View File

@ -14,8 +14,7 @@ import useToast from "hooks/use-toast";
import { LinkModal, LinksList, SidebarProgressStats } from "components/core"; import { LinkModal, LinksList, SidebarProgressStats } from "components/core";
import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules"; import { DeleteModuleModal, SidebarLeadSelect, SidebarMembersSelect } from "components/modules";
import ProgressChart from "components/core/sidebar/progress-chart"; import ProgressChart from "components/core/sidebar/progress-chart";
import { CustomMenu, CustomSelect } from "components/ui"; import { CustomSelect, CustomMenu, Loader, ProgressBar } from "@plane/ui";
import { Loader, ProgressBar } from "@plane/ui";
// icon // icon
import { import {
AlertCircle, AlertCircle,

4
web/components/modules/single-module-card.tsx
View File

@ -9,8 +9,8 @@ import useToast from "hooks/use-toast";
// components // components
import { DeleteModuleModal } from "components/modules"; import { DeleteModuleModal } from "components/modules";
// ui // ui
import { AssigneesList, CustomMenu } from "components/ui"; import { AssigneesList } from "components/ui";
import { Tooltip } from "@plane/ui"; import { CustomMenu, Tooltip } from "@plane/ui";
// icons // icons
import { CalendarDays, LinkIcon, Pencil, Star, Target, Trash2 } from "lucide-react"; import { CalendarDays, LinkIcon, Pencil, Star, Target, Trash2 } from "lucide-react";
// helpers // helpers

4
web/components/notifications/notification-card.tsx
View File

@ -7,8 +7,7 @@ import { useRouter } from "next/router";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// icons // icons
import { CustomMenu } from "components/ui"; import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
import { ArchiveIcon, Tooltip } from "@plane/ui";
import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react"; import { ArchiveRestore, Clock, MessageSquare, User2 } from "lucide-react";
// helper // helper
@ -219,7 +218,6 @@ export const NotificationCard: React.FC<NotificationCardProps> = (props) => {
{snoozeOptions.map((item) => ( {snoozeOptions.map((item) => (
<CustomMenu.MenuItem <CustomMenu.MenuItem
key={item.label} key={item.label}
renderAs="button"
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();

7
web/components/notifications/notification-header.tsx
View File

@ -1,8 +1,7 @@
import React from "react"; import React from "react";
// components // components
import { CustomMenu } from "components/ui"; import { ArchiveIcon, CustomMenu, Tooltip } from "@plane/ui";
import { ArchiveIcon, Tooltip } from "@plane/ui";
//icon //icon
import { ArrowLeft, CheckCheck, Clock, ListFilter, MoreVertical, RefreshCw, X } from "lucide-react"; import { ArrowLeft, CheckCheck, Clock, ListFilter, MoreVertical, RefreshCw, X } from "lucide-react";
@ -102,14 +101,13 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
</div> </div>
} }
> >
<CustomMenu.MenuItem renderAs="button" onClick={markAllNotificationsAsRead}> <CustomMenu.MenuItem onClick={markAllNotificationsAsRead}>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<CheckCheck className="h-3.5 w-3.5" /> <CheckCheck className="h-3.5 w-3.5" />
Mark all as read Mark all as read
</div> </div>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
<CustomMenu.MenuItem <CustomMenu.MenuItem
renderAs="button"
onClick={() => { onClick={() => {
setArchived(false); setArchived(false);
setReadNotification(false); setReadNotification(false);
@ -122,7 +120,6 @@ export const NotificationHeader: React.FC<NotificationHeaderProps> = (props) =>
</div> </div>
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
<CustomMenu.MenuItem <CustomMenu.MenuItem
renderAs="button"
onClick={() => { onClick={() => {
setSnoozed(false); setSnoozed(false);
setReadNotification(false); setReadNotification(false);

4
web/components/notifications/select-snooze-till-modal.tsx
View File

@ -7,8 +7,8 @@ import { getAllTimeIn30MinutesInterval } from "helpers/date-time.helper";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// components // components
import { Button } from "@plane/ui"; import { Button, CustomSelect } from "@plane/ui";
import { CustomDatePicker, CustomSelect } from "components/ui"; import { CustomDatePicker } from "components/ui";
import { X } from "lucide-react"; import { X } from "lucide-react";
// types // types
import type { IUserNotification } from "types"; import type { IUserNotification } from "types";

3
web/components/onboarding/user-details.tsx
View File

@ -6,8 +6,7 @@ import useToast from "hooks/use-toast";
// services // services
import { UserService } from "services/user.service"; import { UserService } from "services/user.service";
// ui // ui
import { CustomSearchSelect, CustomSelect } from "components/ui"; import { Button, CustomSelect, CustomSearchSelect, Input } from "@plane/ui";
import { Button, Input } from "@plane/ui";
// types // types
import { IUser } from "types"; import { IUser } from "types";
// fetch-keys // fetch-keys

5
web/components/pages/single-page-block.tsx
View File

@ -17,8 +17,7 @@ import { GptAssistantModal } from "components/core";
import { CreateUpdateBlockInline } from "components/pages"; import { CreateUpdateBlockInline } from "components/pages";
import { RichTextEditor } from "@plane/rich-text-editor"; import { RichTextEditor } from "@plane/rich-text-editor";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu, LayersIcon, TextArea } from "@plane/ui";
import { LayersIcon, TextArea } from "@plane/ui";
// icons // icons
import { RefreshCw, LinkIcon, Zap, Check, MoreVertical, Pencil, Sparkle, Trash2 } from "lucide-react"; import { RefreshCw, LinkIcon, Zap, Check, MoreVertical, Pencil, Sparkle, Trash2 } from "lucide-react";
// helpers // helpers
@ -304,7 +303,7 @@ export const SinglePageBlock: React.FC<Props> = ({ block, projectDetails, showBl
{...provided.dragHandleProps} {...provided.dragHandleProps}
> >
<MoreVertical className="h-4" /> <MoreVertical className="h-4" />
<MoreVertical className="-ml-2.5 h-4" /> <MoreVertical className="-ml-5 h-4" />
</button> </button>
<div <div
ref={actionSectionRef} ref={actionSectionRef}

3
web/components/pages/single-page-detailed-item.tsx
View File

@ -7,8 +7,7 @@ import { useRouter } from "next/router";
import useUser from "hooks/use-user"; import useUser from "hooks/use-user";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu, Tooltip } from "@plane/ui";
import { Tooltip } from "@plane/ui";
// icons // icons
import { AlertCircle, LinkIcon, Lock, Pencil, Star, Trash2, Unlock } from "lucide-react"; import { AlertCircle, LinkIcon, Lock, Pencil, Star, Trash2, Unlock } from "lucide-react";
// helpers // helpers

3
web/components/pages/single-page-list-item.tsx
View File

@ -7,8 +7,7 @@ import { useRouter } from "next/router";
import useUser from "hooks/use-user"; import useUser from "hooks/use-user";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu, Tooltip } from "@plane/ui";
import { Tooltip } from "@plane/ui";
// icons // icons
import { AlertCircle, FileText, LinkIcon, Lock, Pencil, Star, Trash2, Unlock } from "lucide-react"; import { AlertCircle, FileText, LinkIcon, Lock, Pencil, Star, Trash2, Unlock } from "lucide-react";
// helpers // helpers

3
web/components/profile/profile-issues-view-options.tsx
View File

@ -10,8 +10,7 @@ import useEstimateOption from "hooks/use-estimate-option";
// components // components
import { MyIssuesSelectFilters } from "components/issues"; import { MyIssuesSelectFilters } from "components/issues";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu, ToggleSwitch, Tooltip } from "@plane/ui";
import { ToggleSwitch, Tooltip } from "@plane/ui";
// icons // icons
import { ChevronDown, Kanban, List } from "lucide-react"; import { ChevronDown, Kanban, List } from "lucide-react";
// helpers // helpers

4
web/components/project/create-project-modal.tsx
View File

@ -8,8 +8,8 @@ import { useMobxStore } from "lib/mobx/store-provider";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import { useWorkspaceMyMembership } from "contexts/workspace-member.context"; import { useWorkspaceMyMembership } from "contexts/workspace-member.context";
// ui // ui
import { CustomSelect } from "components/ui"; import { Button, CustomSelect, CustomSearchSelect, Input, TextArea } from "@plane/ui";
import { Button, Input, TextArea } from "@plane/ui"; import { Avatar } from "components/ui";
// components // components
import { ImagePickerPopover } from "components/core"; import { ImagePickerPopover } from "components/core";
import EmojiIconPicker from "components/emoji-icon-picker"; import EmojiIconPicker from "components/emoji-icon-picker";

3
web/components/project/form.tsx
View File

@ -3,8 +3,7 @@ import { Controller, useForm } from "react-hook-form";
// components // components
import EmojiIconPicker from "components/emoji-icon-picker"; import EmojiIconPicker from "components/emoji-icon-picker";
import { ImagePickerPopover } from "components/core"; import { ImagePickerPopover } from "components/core";
import { CustomSelect } from "components/ui"; import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
import { Button, Input, TextArea } from "@plane/ui";
// types // types
import { IProject, IWorkspace } from "types"; import { IProject, IWorkspace } from "types";
// helpers // helpers

3
web/components/project/member-select.tsx
View File

@ -7,7 +7,8 @@ import useSWR from "swr";
// services // services
import { ProjectService } from "services/project"; import { ProjectService } from "services/project";
// ui // ui
import { Avatar, CustomSearchSelect } from "components/ui"; import { Avatar } from "components/ui";
import { CustomSearchSelect } from "@plane/ui";
// icon // icon
import { Ban } from "lucide-react"; import { Ban } from "lucide-react";
// fetch-keys // fetch-keys

4
web/components/project/send-project-invitation-modal.tsx
View File

@ -8,8 +8,8 @@ import { useForm, Controller, useFieldArray } from "react-hook-form";
import { Dialog, Transition } from "@headlessui/react"; import { Dialog, Transition } from "@headlessui/react";
// ui // ui
import { Button } from "@plane/ui"; import { Button, CustomSelect, CustomSearchSelect } from "@plane/ui";
import { Avatar, CustomSearchSelect, CustomSelect } from "components/ui"; import { Avatar } from "components/ui";
//icons //icons
import { ChevronDown, Plus, X } from "lucide-react"; import { ChevronDown, Plus, X } from "lucide-react";
// services // services

3
web/components/project/settings/single-label.tsx
View File

@ -3,8 +3,7 @@ import { Controller, useForm } from "react-hook-form";
import { TwitterPicker } from "react-color"; import { TwitterPicker } from "react-color";
import { Popover, Transition } from "@headlessui/react"; import { Popover, Transition } from "@headlessui/react";
// ui // ui
import { CustomMenu } from "components/ui"; import { Button, CustomMenu, Input } from "@plane/ui";
import { Button, Input } from "@plane/ui";
// icons // icons
import { Component, Pencil } from "lucide-react"; import { Component, Pencil } from "lucide-react";
// types // types

3
web/components/project/sidebar-list-item.tsx
View File

@ -17,7 +17,6 @@ import {
LogOut, LogOut,
ChevronDown, ChevronDown,
} from "lucide-react"; } from "lucide-react";
import { Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// helpers // helpers
@ -27,7 +26,7 @@ import { IProject } from "types";
// mobx store // mobx store
import { useMobxStore } from "lib/mobx/store-provider"; import { useMobxStore } from "lib/mobx/store-provider";
// components // components
import { CustomMenu } from "components/ui"; import { CustomMenu, Tooltip, ArchiveIcon, PhotoFilterIcon, DiceIcon, ContrastIcon, LayersIcon } from "@plane/ui";
import { LeaveProjectModal, DeleteProjectModal } from "components/project"; import { LeaveProjectModal, DeleteProjectModal } from "components/project";
import { PublishProjectModal } from "components/project/publish-project"; import { PublishProjectModal } from "components/project/publish-project";

3
web/components/states/create-state-modal.tsx
View File

@ -9,8 +9,7 @@ import { ProjectStateService } from "services/project";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { CustomSelect } from "components/ui"; import { Button, CustomSelect, Input, TextArea } from "@plane/ui";
import { Button, Input, TextArea } from "@plane/ui";
// icons // icons
import { ChevronDown } from "lucide-react"; import { ChevronDown } from "lucide-react";
// types // types

3
web/components/states/create-update-state-inline.tsx
View File

@ -15,8 +15,7 @@ import { ProjectStateService } from "services/project";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { CustomSelect } from "components/ui"; import { Button, CustomSelect, Input, Tooltip } from "@plane/ui";
import { Button, Input, Tooltip } from "@plane/ui";
// types // types
import type { IUser, IState, IStateResponse } from "types"; import type { IUser, IState, IStateResponse } from "types";
// fetch-keys // fetch-keys

2
web/components/views/view-list-item.tsx
View File

@ -8,7 +8,7 @@ import { useMobxStore } from "lib/mobx/store-provider";
// components // components
import { DeleteProjectViewModal } from "components/views"; import { DeleteProjectViewModal } from "components/views";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu } from "@plane/ui";
// icons // icons
import { PencilIcon, Sparkles, StarIcon, TrashIcon } from "lucide-react"; import { PencilIcon, Sparkles, StarIcon, TrashIcon } from "lucide-react";
// types // types

4
web/components/web-view/comment-card.tsx
View File

@ -9,7 +9,7 @@ import { FileService } from "services/file.service";
// hooks // hooks
import useUser from "hooks/use-user"; import useUser from "hooks/use-user";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu } from "@plane/ui";
import { CommentReaction } from "components/issues"; import { CommentReaction } from "components/issues";
import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor"; import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
@ -155,7 +155,6 @@ export const CommentCard: React.FC<Props> = (props) => {
<> <>
{comment.access === "INTERNAL" ? ( {comment.access === "INTERNAL" ? (
<CustomMenu.MenuItem <CustomMenu.MenuItem
renderAs="button"
onClick={() => onSubmit(comment.id, { access: "EXTERNAL" })} onClick={() => onSubmit(comment.id, { access: "EXTERNAL" })}
className="flex items-center gap-1" className="flex items-center gap-1"
> >
@ -164,7 +163,6 @@ export const CommentCard: React.FC<Props> = (props) => {
</CustomMenu.MenuItem> </CustomMenu.MenuItem>
) : ( ) : (
<CustomMenu.MenuItem <CustomMenu.MenuItem
renderAs="button"
onClick={() => onSubmit(comment.id, { access: "INTERNAL" })} onClick={() => onSubmit(comment.id, { access: "INTERNAL" })}
className="flex items-center gap-1" className="flex items-center gap-1"
> >

3
web/components/workspace/completed-issues-graph.tsx
View File

@ -1,5 +1,6 @@
// ui // ui
import { CustomMenu, LineGraph } from "components/ui"; import { LineGraph } from "components/ui";
import { CustomMenu } from "@plane/ui";
// constants // constants
import { MONTHS } from "constants/project"; import { MONTHS } from "constants/project";

3
web/components/workspace/create-workspace-form.tsx
View File

@ -6,8 +6,7 @@ import { WorkspaceService } from "services/workspace.service";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { CustomSelect } from "components/ui"; import { Button, CustomSelect, Input } from "@plane/ui";
import { Button, Input } from "@plane/ui";
// types // types
import { IUser, IWorkspace } from "types"; import { IUser, IWorkspace } from "types";
// fetch-keys // fetch-keys

3
web/components/workspace/send-workspace-invitation-modal.tsx
View File

@ -7,8 +7,7 @@ import { WorkspaceService } from "services/workspace.service";
// hooks // hooks
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
// ui // ui
import { CustomSelect } from "components/ui"; import { Button, CustomSelect, Input } from "@plane/ui";
import { Button, Input } from "@plane/ui";
// icons // icons
import { Plus, X } from "lucide-react"; import { Plus, X } from "lucide-react";
// types // types

2
web/components/workspace/views/view-list-item.tsx
View File

@ -6,7 +6,7 @@ import { useState } from "react";
// components // components
import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "components/workspace"; import { CreateUpdateWorkspaceViewModal, DeleteGlobalViewModal } from "components/workspace";
// ui // ui
import { CustomMenu } from "components/ui"; import { CustomMenu } from "@plane/ui";
// icons // icons
import { Pencil, Sparkles, Trash2 } from "lucide-react"; import { Pencil, Sparkles, Trash2 } from "lucide-react";
// helpers // helpers

3
web/pages/[workspaceSlug]/me/profile/index.tsx
View File

@ -14,8 +14,7 @@ import { WorkspaceSettingLayout } from "layouts/setting-layout/workspace-setting
import { ImagePickerPopover, ImageUploadModal } from "components/core"; import { ImagePickerPopover, ImageUploadModal } from "components/core";
import { WorkspaceSettingHeader } from "components/headers"; import { WorkspaceSettingHeader } from "components/headers";
// ui // ui
import { Button, Input, Spinner } from "@plane/ui"; import { Button, CustomSelect, CustomSearchSelect, Input, Spinner } from "@plane/ui";
import { CustomSearchSelect, CustomSelect } from "components/ui";
// icons // icons
import { User2, UserCircle2 } from "lucide-react"; import { User2, UserCircle2 } from "lucide-react";
// types // types

6
web/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
View File

@ -19,8 +19,7 @@ import { CycleService } from "services/cycle.service";
import useToast from "hooks/use-toast"; import useToast from "hooks/use-toast";
import useUserAuth from "hooks/use-user-auth"; import useUserAuth from "hooks/use-user-auth";
// ui // ui
import { BreadcrumbItem, Breadcrumbs, ContrastIcon } from "@plane/ui"; import { BreadcrumbItem, Breadcrumbs, CustomMenu, ContrastIcon } from "@plane/ui";
import { CustomMenu } from "components/ui";
import { EmptyState } from "components/common"; import { EmptyState } from "components/common";
// images // images
import emptyCycle from "public/empty-state/cycle.svg"; import emptyCycle from "public/empty-state/cycle.svg";
@ -126,8 +125,7 @@ const SingleCycle: React.FC = () => {
{cycles?.map((cycle) => ( {cycles?.map((cycle) => (
<CustomMenu.MenuItem <CustomMenu.MenuItem
key={cycle.id} key={cycle.id}
renderAs="a" onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`)}
href={`/${workspaceSlug}/projects/${projectId}/cycles/${cycle.id}`}
> >
{truncateText(cycle.name, 40)} {truncateText(cycle.name, 40)}
</CustomMenu.MenuItem> </CustomMenu.MenuItem>

6
web/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
View File

@ -15,8 +15,7 @@ import { ModuleDetailsSidebar } from "components/modules";
import { ModuleLayoutRoot } from "components/issues"; import { ModuleLayoutRoot } from "components/issues";
import { ModuleIssuesHeader } from "components/headers"; import { ModuleIssuesHeader } from "components/headers";
// ui // ui
import { BreadcrumbItem, Breadcrumbs, DiceIcon } from "@plane/ui"; import { BreadcrumbItem, Breadcrumbs, CustomMenu, DiceIcon } from "@plane/ui";
import { CustomMenu } from "components/ui";
import { EmptyState } from "components/common"; import { EmptyState } from "components/common";
// images // images
import emptyModule from "public/empty-state/module.svg"; import emptyModule from "public/empty-state/module.svg";
@ -121,8 +120,7 @@ const SingleModule: React.FC = () => {
{modules?.map((module) => ( {modules?.map((module) => (
<CustomMenu.MenuItem <CustomMenu.MenuItem
key={module.id} key={module.id}
renderAs="a" onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`)}
href={`/${workspaceSlug}/projects/${projectId}/modules/${module.id}`}
> >
{truncateText(module.name, 40)} {truncateText(module.name, 40)}
</CustomMenu.MenuItem> </CustomMenu.MenuItem>

3
web/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
View File

@ -28,9 +28,8 @@ import { CreateUpdateBlockInline, SinglePageBlock } from "components/pages";
import { CreateLabelModal } from "components/labels"; import { CreateLabelModal } from "components/labels";
import { CreateBlock } from "components/pages/create-block"; import { CreateBlock } from "components/pages/create-block";
// ui // ui
import { CustomSearchSelect } from "components/ui";
import { EmptyState } from "components/common"; import { EmptyState } from "components/common";
import { BreadcrumbItem, Breadcrumbs, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui"; import { BreadcrumbItem, Breadcrumbs, CustomSearchSelect, TextArea, Loader, ToggleSwitch, Tooltip } from "@plane/ui";
// images // images
import emptyPage from "public/empty-state/page.svg"; import emptyPage from "public/empty-state/page.svg";
// icons // icons

3
web/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
View File

@ -19,8 +19,7 @@ import SendProjectInvitationModal from "components/project/send-project-invitati
import { MemberSelect } from "components/project"; import { MemberSelect } from "components/project";
import { ProjectSettingHeader } from "components/headers"; import { ProjectSettingHeader } from "components/headers";
// ui // ui
import { Button, Loader } from "@plane/ui"; import { Button, CustomMenu, CustomSelect, Loader } from "@plane/ui";
import { CustomMenu, CustomSelect } from "components/ui";
// icons // icons
import { ChevronDown, X } from "lucide-react"; import { ChevronDown, X } from "lucide-react";
// types // types

6
web/pages/[workspaceSlug]/projects/[projectId]/views/[viewId].tsx
View File

@ -11,8 +11,7 @@ import { ProjectAuthorizationWrapper } from "layouts/auth-layout-legacy";
// components // components
import { ProjectViewLayoutRoot } from "components/issues"; import { ProjectViewLayoutRoot } from "components/issues";
// ui // ui
import { BreadcrumbItem, Breadcrumbs, PhotoFilterIcon } from "@plane/ui"; import { BreadcrumbItem, Breadcrumbs, CustomMenu, PhotoFilterIcon } from "@plane/ui";
import { CustomMenu } from "components/ui";
import { EmptyState } from "components/common"; import { EmptyState } from "components/common";
// icons // icons
// images // images
@ -77,8 +76,7 @@ const SingleView: React.FC = () => {
{views?.map((view) => ( {views?.map((view) => (
<CustomMenu.MenuItem <CustomMenu.MenuItem
key={view.id} key={view.id}
renderAs="a" onClick={() => router.push(`/${workspaceSlug}/projects/${projectId}/views/${view.id}`)}
href={`/${workspaceSlug}/projects/${projectId}/views/${view.id}`}
> >
{truncateText(view.name, 40)} {truncateText(view.name, 40)}
</CustomMenu.MenuItem> </CustomMenu.MenuItem>

3
web/pages/[workspaceSlug]/settings/index.tsx
View File

@ -20,8 +20,7 @@ import { DeleteWorkspaceModal } from "components/workspace";
import { WorkspaceSettingHeader } from "components/headers"; import { WorkspaceSettingHeader } from "components/headers";
// ui // ui
import { Disclosure, Transition } from "@headlessui/react"; import { Disclosure, Transition } from "@headlessui/react";
import { CustomSelect } from "components/ui"; import { Button, CustomSelect, Input, Spinner } from "@plane/ui";
import { Button, Input, Spinner } from "@plane/ui";
// icons // icons
import { ChevronDown, ChevronUp, Pencil } from "lucide-react"; import { ChevronDown, ChevronUp, Pencil } from "lucide-react";
// types // types

3
web/pages/[workspaceSlug]/settings/members.tsx
View File

@ -18,8 +18,7 @@ import ConfirmWorkspaceMemberRemove from "components/workspace/confirm-workspace
import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal"; import SendWorkspaceInvitationModal from "components/workspace/send-workspace-invitation-modal";
import { WorkspaceSettingHeader } from "components/headers"; import { WorkspaceSettingHeader } from "components/headers";
// ui // ui
import { Button, Loader } from "@plane/ui"; import { Button, CustomMenu, CustomSelect, Loader } from "@plane/ui";
import { CustomMenu, CustomSelect } from "components/ui";
// icons // icons
import { ChevronDown, X } from "lucide-react"; import { ChevronDown, X } from "lucide-react";
// types // types