[WEB-1878] ui: implementing popover component in a UI package (#5063)

* ui: impleented popover commponent

* chore: implemente component in project-states

* chore: added default styling for popover menu panel

* chore: removed propsWithChildren in popover component type

packages/ui/src/avatar/avatar.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { fn } from "@storybook/test";
 import { Avatar } from "./avatar";
 
 const meta: Meta<typeof Avatar> = {

packages/ui/src/index.ts

@@ -21,3 +21,4 @@ export * from "./drop-indicator";
 export * from "./favorite-star";
 export * from "./loader";
 export * from "./collapsible";
+export * from "./popovers";

packages/ui/src/popovers/index.ts

@@ -0,0 +1,2 @@
+export * from "./popover";
+export * from "./popover-menu";

packages/ui/src/popovers/popover-menu.stories.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { PopoverMenu } from "./popover-menu";
+
+const meta: Meta<typeof PopoverMenu> = {
+  title: "PopoverMenu",
+  component: PopoverMenu,
+};
+
+export default meta;
+
+// types
+type TPopoverMenu = {
+  id: number;
+  name: string;
+};
+
+type Story = StoryObj<typeof PopoverMenu<TPopoverMenu>>;
+
+// data
+const data: TPopoverMenu[] = [
+  { id: 1, name: "John Doe" },
+  { id: 2, name: "Jane Doe" },
+  { id: 3, name: "John Smith" },
+  { id: 4, name: "Jane Smith" },
+];
+
+// components
+const PopoverMenuItemRender = (item: TPopoverMenu) => (
+  <div className="text-sm text-gray-600 hover:text-gray-700 rounded-sm cursor-pointer hover:bg-gray-200 transition-all px-1.5 py-0.5 capitalize">
+    {item.name}
+  </div>
+);
+
+// stories
+export const Default: Story = {
+  args: {
+    popperPosition: "bottom-start",
+    panelClassName: "rounded bg-gray-100 p-2",
+    data: data,
+    keyExtractor: (item, index: number) => `${item.id}-${index}`,
+    render: (item) => PopoverMenuItemRender(item),
+  },
+};

packages/ui/src/popovers/popover-menu.tsx

@@ -0,0 +1,39 @@
+import React, { Fragment } from "react";
+// components
+import { Popover } from "./popover";
+// helpers
+import { cn } from "../../helpers";
+// types
+import { TPopoverMenu } from "./types";
+
+export const PopoverMenu = <T,>(props: TPopoverMenu<T>) => {
+  const {
+    popperPosition = "bottom-end",
+    popperPadding = 0,
+    buttonClassName = "",
+    button,
+    panelClassName = "",
+    data,
+    keyExtractor,
+    render,
+  } = props;
+
+  return (
+    <Popover
+      popperPosition={popperPosition}
+      popperPadding={popperPadding}
+      buttonClassName={buttonClassName}
+      button={button}
+      panelClassName={cn(
+        "my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2 text-xs shadow-custom-shadow-rg focus:outline-none",
+        panelClassName
+      )}
+    >
+      <Fragment>
+        {data.map((item, index) => (
+          <Fragment key={keyExtractor(item, index)}>{render(item, index)}</Fragment>
+        ))}
+      </Fragment>
+    </Popover>
+  );
+};

packages/ui/src/popovers/popover.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Popover } from "./popover";
+
+const meta: Meta<typeof Popover> = {
+  title: "Popover",
+  component: Popover,
+};
+
+export default meta;
+
+// types
+type Story = StoryObj<typeof Popover>;
+
+// data
+
+// components
+const RenderCustomPopoverComponent = (
+  <div className="space-y-2">
+    <div className="text-sm font-medium text-gray-500">Your custom component</div>
+    <div>
+      {["option1", "option2", "option3"].map((option) => (
+        <div
+          key={option}
+          className="text-sm text-gray-600 hover:text-gray-700 rounded-sm cursor-pointer hover:bg-gray-200 transition-all px-1.5 py-0.5 capitalize"
+        >
+          {option}
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+// stories
+export const Default: Story = {
+  args: {
+    popperPosition: "bottom-start",
+    panelClassName: "rounded bg-gray-100 p-2",
+    children: RenderCustomPopoverComponent,
+  },
+};
+
+export const CustomMenuButton: Story = {
+  args: {
+    popperPosition: "bottom-start",
+    button: (
+      <div className="p-2 text-sm font-medium rounded bg-gray-100 hover:bg-gray-200 transition-all">
+        Custom Menu Button
+      </div>
+    ),
+    panelClassName: "rounded bg-gray-100 p-2",
+    children: RenderCustomPopoverComponent,
+  },
+};

packages/ui/src/popovers/popover.tsx

@@ -0,0 +1,73 @@
+import React, { Fragment, useState } from "react";
+import { usePopper } from "react-popper";
+import { Popover as HeadlessReactPopover, Transition } from "@headlessui/react";
+// helpers
+import { cn } from "../../helpers";
+// types
+import { TPopover } from "./types";
+import { EllipsisVertical } from "lucide-react";
+
+export const Popover = (props: TPopover) => {
+  const {
+    popperPosition = "bottom-end",
+    popperPadding = 0,
+    buttonClassName = "",
+    button,
+    panelClassName = "",
+    children,
+  } = props;
+  // states
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  // react-popper derived values
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: popperPosition,
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: popperPadding,
+        },
+      },
+    ],
+  });
+
+  return (
+    <HeadlessReactPopover className="relative flex h-full w-full items-center justify-center">
+      <HeadlessReactPopover.Button ref={setReferenceElement} className="flex justify-center items-center">
+        {button ? (
+          button
+        ) : (
+          <div
+            className={cn(
+              "flex justify-center items-center text-base h-6 w-6 rounded transition-all bg-custom-background-90 hover:bg-custom-background-80",
+              buttonClassName
+            )}
+          >
+            <EllipsisVertical className="h-3 w-3" />
+          </div>
+        )}
+      </HeadlessReactPopover.Button>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-200"
+        enterFrom="opacity-0 translate-y-1"
+        enterTo="opacity-100 translate-y-0"
+        leave="transition ease-in duration-150"
+        leaveFrom="opacity-100 translate-y-0"
+        leaveTo="opacity-0 translate-y-1"
+      >
+        <HeadlessReactPopover.Panel
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+          className={cn("absolute left-0 top-full z-20 w-screen max-w-xs mt-2", panelClassName)}
+        >
+          {children}
+        </HeadlessReactPopover.Panel>
+      </Transition>
+    </HeadlessReactPopover>
+  );
+};

packages/ui/src/popovers/types.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from "react";
+import { Placement } from "@popperjs/core";
+
+export type TPopoverButtonDefaultOptions = {
+  // button and button styling
+  button?: ReactNode;
+  buttonClassName?: string;
+};
+
+export type TPopoverDefaultOptions = TPopoverButtonDefaultOptions & {
+  // popper styling
+  popperPosition?: Placement | undefined;
+  popperPadding?: number | undefined;
+  // panel styling
+  panelClassName?: string;
+};
+
+export type TPopover = TPopoverDefaultOptions & {
+  // children
+  children: ReactNode;
+};
+
+export type TPopoverMenu<T> = TPopoverDefaultOptions & {
+  data: T[];
+  keyExtractor: (item: T, index: number) => string;
+  render: (item: T, index: number) => ReactNode;
+};

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/layout.tsx

@@ -56,7 +56,7 @@ const ProjectSettingLayout: FC<IProjectSettingLayout> = observer((props) => {
           <div className="w-80 flex-shrink-0 overflow-y-hidden pt-8 sm:hidden hidden md:block lg:block">
             <ProjectSettingsSidebar />
           </div>
-          <div className="w-full pl-10 sm:pl-10 md:pl-0 lg:pl-0 overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
+          <div className="w-full pl-10 sm:pl-10 md:pl-3 lg:pl-3 overflow-y-scroll vertical-scrollbar scrollbar-md">
             {children}
           </div>
         </div>

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/states/page.tsx

@@ -18,7 +18,7 @@ const StatesSettingsPage = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className="w-full gap-10 overflow-y-auto py-8 pr-9">
+      <div className="py-8 pr-9">
         <div className="flex items-center border-b border-custom-border-100 py-3.5">
           <h3 className="text-xl font-medium">States</h3>
         </div>

web/core/components/project-states/create-update/form.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { FormEvent, FC, useEffect, useState, Fragment } from "react";
+import { FormEvent, FC, useEffect, useState, useMemo } from "react";
 import { TwitterPicker } from "react-color";
-import { Popover, Transition } from "@headlessui/react";
 import { IState } from "@plane/types";
-import { Button, Input } from "@plane/ui";
+import { Button, Popover, Input } from "@plane/ui";
 
 type TStateForm = {
   data: Partial<IState>;
@@ -47,30 +46,24 @@ export const StateForm: FC<TStateForm> = (props) => {
     }
   };
 
+  const PopoverButton = useMemo(
+    () => (
+      <div
+        className="group inline-flex items-center text-base font-medium focus:outline-none h-5 w-5 rounded transition-all"
+        style={{
+          backgroundColor: formData?.color ?? "black",
+        }}
+      />
+    ),
+    [formData?.color]
+  );
+
   return (
     <form onSubmit={formSubmit} className="relative flex items-center gap-2">
       {/* color */}
       <div className="flex-shrink-0">
-        <Popover className="relative flex h-full w-full items-center justify-center">
-          <Popover.Button
-            className="group inline-flex items-center text-base font-medium focus:outline-none h-5 w-5 rounded transition-all"
-            style={{
-              backgroundColor: formData?.color ?? "black",
-            }}
-          />
-          <Transition
-            as={Fragment}
-            enter="transition ease-out duration-200"
-            enterFrom="opacity-0 translate-y-1"
-            enterTo="opacity-100 translate-y-0"
-            leave="transition ease-in duration-150"
-            leaveFrom="opacity-100 translate-y-0"
-            leaveTo="opacity-0 translate-y-1"
-          >
-            <Popover.Panel className="absolute left-0 top-full z-20 mt-3 w-screen max-w-xs px-2 sm:px-0">
-              <TwitterPicker color={formData?.color} onChange={(value) => handleFormData("color", value.hex)} />
-            </Popover.Panel>
-          </Transition>
+        <Popover button={PopoverButton} panelClassName="mt-4 -ml-3">
+          <TwitterPicker color={formData?.color} onChange={(value) => handleFormData("color", value.hex)} />
         </Popover>
       </div>