binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
Download patch file Download diff file Expand all files Collapse all files

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
import useUser from "hooks/use-user";
// ui
import { CustomMenu } from "components/ui";
import { CustomMenu } from "@plane/ui";
import { CommentReaction } from "components/issues";
import { LiteTextEditorWithRef, LiteReadOnlyEditorWithRef } from "@plane/lite-text-editor";
// helpers
@ -156,7 +156,6 @@ export const CommentCard: React.FC<Props> = ({
<>
{comment.access === "INTERNAL" ? (
<CustomMenu.MenuItem
renderAs="button"
onClick={() => onSubmit(comment.id, { access: "EXTERNAL" })}
className="flex items-center gap-1"
>
@ -165,7 +164,6 @@ export const CommentCard: React.FC<Props> = ({
</CustomMenu.MenuItem>
) : (
<CustomMenu.MenuItem
renderAs="button"
onClick={() => onSubmit(comment.id, { access: "INTERNAL" })}
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 { CreateLabelModal } from "components/labels";
// ui
import { CustomMenu } from "components/ui";
import { Button, Input, ToggleSwitch } from "@plane/ui";
import {} from "components/ui";
import { Button, CustomMenu, Input, ToggleSwitch } from "@plane/ui";
// icons
import { Sparkle, X } from "lucide-react";
// types
@ -578,15 +578,15 @@ export const DraftIssueForm: FC<IssueFormProps> = (props) => {
<CustomMenu ellipsis>
{watch("parent") ? (
<>
<CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}>
<CustomMenu.MenuItem onClick={() => setParentIssueListModalOpen(true)}>
Change parent issue
</CustomMenu.MenuItem>
<CustomMenu.MenuItem renderAs="button" onClick={() => setValue("parent", null)}>
<CustomMenu.MenuItem onClick={() => setValue("parent", null)}>
Remove parent issue
</CustomMenu.MenuItem>
</>
) : (
<CustomMenu.MenuItem renderAs="button" onClick={() => setParentIssueListModalOpen(true)}>
<CustomMenu.MenuItem onClick={() => setParentIssueListModalOpen(true)}>
Select Parent Issue
</CustomMenu.MenuItem>
)}

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

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

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

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

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

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

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

@ -22,9 +22,8 @@ import {
} from "components/issues";
import { SubIssuesRoot } from "./sub-issues";
// ui
import { CustomMenu } from "components/ui";
import { CustomMenu, LayersIcon } from "@plane/ui";
// icons
import { LayersIcon } from "@plane/ui";
import { MinusCircle } from "lucide-react";
// types
import { IIssue, IIssueComment } from "types";
@ -138,8 +137,9 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges,
{siblingIssuesList.map((issue) => (
<CustomMenu.MenuItem
key={issue.id}
renderAs="a"
href={`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id}`}
onClick={() =>
router.push(`/${workspaceSlug}/projects/${projectId as string}/issues/${issue.id}`)
}
className="flex items-center gap-2 py-2"
>
<LayersIcon className="h-4 w-4" />
@ -154,7 +154,6 @@ export const IssueMainContent: React.FC<Props> = ({ issueDetails, submitChanges,
)
) : null}
<CustomMenu.MenuItem
renderAs="button"
onClick={() => submitChanges({ parent: null })}
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
import useToast from "hooks/use-toast";
// ui
import { CustomSelect } from "components/ui";
import { CustomSelect, FullScreenPeekIcon, ModalPeekIcon, SidePeekIcon } from "@plane/ui";
// icons
import { FullScreenPeekIcon, ModalPeekIcon, SidePeekIcon } from "@plane/ui";
import { LinkIcon, MoveRight, Trash2 } from "lucide-react";
// helpers
import { copyTextToClipboard } from "helpers/string.helper";

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

@ -5,7 +5,8 @@ import useSWR from "swr";
// services
import { ProjectService } from "services/project";
// ui
import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
import { AssigneesList, Avatar } from "components/ui";
import { CustomSearchSelect } from "@plane/ui";
import { User2 } from "lucide-react";
// 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";
// ui
import { CustomSelect } from "components/ui";
import { CustomSelect } from "@plane/ui";
// icons
import { Triangle } from "lucide-react";
// fetch-keys

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

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

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

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

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

@ -7,9 +7,8 @@ import useSWR from "swr";
// services
import { ProjectStateService } from "services/project";
// ui
import { CustomSearchSelect } from "components/ui";
import { CustomSearchSelect, DoubleCircleIcon, StateGroupIcon } from "@plane/ui";
// icons
import { DoubleCircleIcon, StateGroupIcon } from "@plane/ui";
import { Plus } from "lucide-react";
// helpers
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
import { ProjectService } from "services/project";
// ui
import { CustomSearchSelect } from "components/ui";
import { CustomSearchSelect } from "@plane/ui";
import { AssigneesList, Avatar } from "components/ui/avatar";
// 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 { CycleService } from "services/cycle.service";
// ui
import { CustomSelect } from "components/ui";
import { Spinner, Tooltip } from "@plane/ui";
import { CustomSelect, Spinner, Tooltip } from "@plane/ui";
// helper
import { truncateText } from "helpers/string.helper";
// types

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

@ -3,7 +3,7 @@ import React from "react";
// hooks
import useEstimateOption from "hooks/use-estimate-option";
// ui
import { CustomSelect } from "components/ui";
import { CustomSelect } from "@plane/ui";
// icons
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
import { ModuleService } from "services/module.service";
// ui
import { CustomSelect } from "components/ui";
import { Spinner, Tooltip } from "@plane/ui";
import { CustomSelect, Spinner, Tooltip } from "@plane/ui";
// helper
import { truncateText } from "helpers/string.helper";
// types

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

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

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

@ -7,8 +7,7 @@ import useSWR from "swr";
// services
import { ProjectStateService } from "services/project";
// ui
import { CustomSelect } from "components/ui";
import { Spinner, StateGroupIcon } from "@plane/ui";
import { CustomSelect, Spinner, StateGroupIcon } from "@plane/ui";
// helpers
import { getStatesList } from "helpers/state.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 { IssueProperty } from "./properties";
// ui
import { CustomMenu } from "components/ui";
import { Tooltip } from "@plane/ui";
import { CustomMenu, Tooltip } from "@plane/ui";
// types
import { IUser, IIssue } from "types";
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 { ProgressBar } from "./progressbar";
// ui
import { CustomMenu } from "components/ui";
import { CustomMenu } from "@plane/ui";
// hooks
import { useProjectMyMembership } from "contexts/project-member.context";
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
import { TrackEventService } from "services/track_event.service";
// ui
import { AssigneesList, Avatar, CustomSearchSelect } from "components/ui";
import { Tooltip } from "@plane/ui";
import { AssigneesList, Avatar } from "components/ui";
import { CustomSearchSelect, Tooltip } from "@plane/ui";
import { User2 } from "lucide-react";
// 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
import useEstimateOption from "hooks/use-estimate-option";
// ui
import { CustomSelect } from "components/ui";
import { Tooltip } from "@plane/ui";
import { CustomSelect, Tooltip } from "@plane/ui";
// icons
import { Triangle } from "lucide-react";
// types

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

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

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

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