fix: consistent dropdowns, refactor: ui components

apps/app/components/issues/select/assignee.tsx

@@ -1,18 +1,17 @@
 import { useState, FC, Fragment } from "react";
 
-import Image from "next/image";
 import { useRouter } from "next/router";
 
 import useSWR from "swr";
 
 // headless ui
 import { Transition, Combobox } from "@headlessui/react";
+// services
+import projectServices from "services/project.service";
+// ui
+import { Avatar } from "components/ui";
 // icons
 import { UserIcon } from "@heroicons/react/24/outline";
-// service
-import projectServices from "services/project.service";
-// types
-import type { IProjectMember } from "types";
 // fetch keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
 
@@ -22,35 +21,6 @@ export type IssueAssigneeSelectProps = {
   onChange: (value: string[]) => void;
 };
 
-type AssigneeAvatarProps = {
-  user: IProjectMember | undefined;
-};
-
-export const AssigneeAvatar: FC<AssigneeAvatarProps> = ({ user }) => {
-  if (!user) return <></>;
-
-  if (user.member.avatar && user.member.avatar !== "") {
-    return (
-      <div className="relative h-4 w-4">
-        <Image
-          src={user.member.avatar}
-          alt="avatar"
-          className="rounded-full"
-          layout="fill"
-          objectFit="cover"
-        />
-      </div>
-    );
-  } else
-    return (
-      <div className="grid h-4 w-4 flex-shrink-0 place-items-center rounded-full bg-gray-700 capitalize text-white">
-        {user.member.first_name && user.member.first_name !== ""
-          ? user.member.first_name.charAt(0)
-          : user.member.email.charAt(0)}
-      </div>
-    );
-};
-
 export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
   projectId,
   value = [],
@@ -136,14 +106,14 @@ export const IssueAssigneeSelect: FC<IssueAssigneeSelectProps> = ({
                         className={({ active, selected }) =>
                           `${active ? "bg-indigo-50" : ""} ${
                             selected ? "bg-indigo-50 font-medium" : ""
-                          } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
+                          } flex cursor-pointer select-none items-center gap-2 truncate px-2 py-1 text-gray-900`
                         }
                         value={option.value}
                       >
                         {people && (
                           <>
-                            <AssigneeAvatar
-                              user={people?.find((p) => p.member.id === option.value)}
+                            <Avatar
+                              user={people?.find((p) => p.member.id === option.value)?.member}
                             />
                             {option.display}
                           </>

apps/app/components/issues/sidebar-select/assignee.tsx

@@ -97,8 +97,8 @@ export const SidebarAssigneeSelect: React.FC<Props> = ({ control, submitChanges,
                               <Listbox.Option
                                 key={option.member.id}
                                 className={({ active, selected }) =>
-                                  `${
-                                    active || selected ? "bg-indigo-50" : ""
+                                  `${active || selected ? "bg-indigo-50" : ""} ${
+                                    selected ? "font-medium" : ""
                                   } flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900`
                                 }
                                 value={option.member.id}

apps/app/components/issues/view-select/priority.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 // ui
-import { Listbox, Transition } from "@headlessui/react";
+import { CustomSelect } from "components/ui";
 // icons
 import { getPriorityIcon } from "components/icons/priority-icon";
 // types
@@ -22,67 +22,43 @@ export const ViewPrioritySelect: React.FC<Props> = ({
   position = "right",
   isNotAllowed,
 }) => (
-  <Listbox
-    as="div"
-    value={issue.priority}
+  <CustomSelect
+    label={
+      <span>
+        {getPriorityIcon(
+          issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
+          "text-sm"
+        )}
+      </span>
+    }
+    value={issue.state}
     onChange={(data: string) => {
       partialUpdateIssue({ priority: data });
     }}
-    className="group relative flex-shrink-0"
+    maxHeight="md"
+    buttonClassName={`flex ${
+      isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
+    } items-center gap-x-2 rounded px-2 py-0.5 capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
+      issue.priority === "urgent"
+        ? "bg-red-100 text-red-600 hover:bg-red-100"
+        : issue.priority === "high"
+        ? "bg-orange-100 text-orange-500 hover:bg-orange-100"
+        : issue.priority === "medium"
+        ? "bg-yellow-100 text-yellow-500 hover:bg-yellow-100"
+        : issue.priority === "low"
+        ? "bg-green-100 text-green-500 hover:bg-green-100"
+        : "bg-gray-100"
+    } border-none`}
+    noChevron
     disabled={isNotAllowed}
   >
-    {({ open }) => (
-      <div>
-        <Listbox.Button
-          className={`flex ${
-            isNotAllowed ? "cursor-not-allowed" : "cursor-pointer"
-          } items-center gap-x-2 rounded px-2 py-0.5 capitalize shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
-            issue.priority === "urgent"
-              ? "bg-red-100 text-red-600"
-              : issue.priority === "high"
-              ? "bg-orange-100 text-orange-500"
-              : issue.priority === "medium"
-              ? "bg-yellow-100 text-yellow-500"
-              : issue.priority === "low"
-              ? "bg-green-100 text-green-500"
-              : "bg-gray-100"
-          }`}
-        >
-          {getPriorityIcon(
-            issue.priority && issue.priority !== "" ? issue.priority ?? "" : "None",
-            "text-sm"
-          )}
-        </Listbox.Button>
-
-        <Transition
-          show={open}
-          as={React.Fragment}
-          leave="transition ease-in duration-100"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <Listbox.Options
-            className={`absolute z-10 mt-1 max-h-48 w-36 overflow-auto rounded-md bg-white py-1 text-xs shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none ${
-              position === "left" ? "left-0" : "right-0"
-            }`}
-          >
-            {PRIORITIES?.map((priority) => (
-              <Listbox.Option
-                key={priority}
-                className={({ active, selected }) =>
-                  `${active || selected ? "bg-indigo-50" : ""} ${
-                    selected ? "font-medium" : ""
-                  } flex cursor-pointer select-none items-center gap-x-2 px-3 py-2 capitalize`
-                }
-                value={priority}
-              >
-                {getPriorityIcon(priority, "text-sm")}
-                {priority ?? "None"}
-              </Listbox.Option>
-            ))}
-          </Listbox.Options>
-        </Transition>
-      </div>
-    )}
-  </Listbox>
+    {PRIORITIES?.map((priority) => (
+      <CustomSelect.Option key={priority} value={priority} className="capitalize">
+        <>
+          {getPriorityIcon(priority, "text-sm")}
+          {priority ?? "None"}
+        </>
+      </CustomSelect.Option>
+    ))}
+  </CustomSelect>
 );

apps/app/components/issues/view-select/state.tsx

@@ -24,7 +24,7 @@ type Props = {
 export const ViewStateSelect: React.FC<Props> = ({
   issue,
   partialUpdateIssue,
-  position,
+  position = "right",
   isNotAllowed,
 }) => {
   const router = useRouter();

apps/app/components/onboarding/invite-members.tsx

@@ -4,8 +4,7 @@ import useToast from "hooks/use-toast";
 import workspaceService from "services/workspace.service";
 import { IUser } from "types";
 // ui components
-import MultiInput from "components/ui/multi-input";
-import OutlineButton from "components/ui/outline-button";
+import { MultiInput, OutlineButton } from "components/ui";
 
 type Props = {
   setStep: React.Dispatch<React.SetStateAction<number>>;

apps/app/components/ui/custom-listbox/index.tsx → apps/app/components/ui/custom-listbox.tsx

@@ -2,8 +2,19 @@ import React from "react";
 
 // headless ui
 import { Listbox, Transition } from "@headlessui/react";
-// types
-import { Props } from "./types";
+
+type Props = {
+  title?: string;
+  label?: string;
+  options?: Array<{ display: string; value: any; color?: string; icon?: JSX.Element }>;
+  icon?: JSX.Element;
+  value: any;
+  onChange: (value: any) => void;
+  multiple?: boolean;
+  optionsFontsize?: "sm" | "md" | "lg" | "xl" | "2xl";
+  className?: string;
+  footerOption?: JSX.Element;
+};
 
 export const CustomListbox: React.FC<Props> = ({
   title = "",

apps/app/components/ui/custom-menu/index.tsx → apps/app/components/ui/custom-menu.tsx

@@ -5,9 +5,25 @@ import Link from "next/link";
 import { Menu, Transition } from "@headlessui/react";
 // icons
 import { ChevronDownIcon, EllipsisHorizontalIcon } from "@heroicons/react/24/outline";
-// types
-import { MenuItemProps, Props } from "./types";
-// constants
+
+type Props = {
+  children: React.ReactNode;
+  label?: string | JSX.Element;
+  className?: string;
+  ellipsis?: boolean;
+  width?: "sm" | "md" | "lg" | "xl" | "auto";
+  textAlignment?: "left" | "center" | "right";
+  noBorder?: boolean;
+  optionsPosition?: "left" | "right";
+};
+
+type MenuItemProps = {
+  children: JSX.Element | string;
+  renderAs?: "button" | "a";
+  href?: string;
+  onClick?: () => void;
+  className?: string;
+};
 
 const CustomMenu = ({
   children,

apps/app/components/ui/custom-select/index.tsx → apps/app/components/ui/custom-select.tsx

@@ -14,6 +14,7 @@ type CustomSelectProps = {
   width?: "auto" | string;
   input?: boolean;
   noChevron?: boolean;
+  buttonClassName?: string;
   disabled?: boolean;
 };
 
@@ -27,6 +28,7 @@ const CustomSelect = ({
   width = "auto",
   input = false,
   noChevron = false,
+  buttonClassName = "",
   disabled = false,
 }: CustomSelectProps) => (
   <Listbox
@@ -38,7 +40,7 @@ const CustomSelect = ({
   >
     <div>
       <Listbox.Button
-        className={`flex w-full ${
+        className={`${buttonClassName} flex w-full ${
           disabled ? "cursor-not-allowed" : "cursor-pointer hover:bg-gray-100"
         } items-center justify-between gap-1 rounded-md border shadow-sm duration-300 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 ${
           input ? "border-gray-300 px-3 py-2 text-sm" : "px-2 py-1 text-xs"
@@ -95,8 +97,8 @@ const Option: React.FC<OptionProps> = ({ children, value, className }) => (
   <Listbox.Option
     value={value}
     className={({ active, selected }) =>
-      `${selected ? "bg-indigo-50 font-medium" : ""} ${
-        active ? "bg-indigo-50" : ""
+      `${active || selected ? "bg-indigo-50" : ""} ${
+        selected ? "font-medium" : ""
       } relative flex cursor-pointer select-none items-center gap-2 truncate p-2 text-gray-900 ${className}`
     }
   >

apps/app/components/ui/index.ts

@@ -1,15 +1,17 @@
+export * from "./input";
+export * from "./text-area";
+export * from "./avatar";
 export * from "./button";
 export * from "./custom-listbox";
 export * from "./custom-menu";
 export * from "./custom-select";
+export * from "./datepicker";
 export * from "./empty-space";
 export * from "./header-button";
-export * from "./input";
 export * from "./loader";
+export * from "./multi-input";
 export * from "./outline-button";
+export * from "./progress-bar";
 export * from "./select";
 export * from "./spinner";
-export * from "./text-area";
-export * from "./avatar";
-export * from "./datepicker";
 export * from "./tooltip";