From 6a38c2d0aafa6b9fc899d34d4464621a6a7a4518 Mon Sep 17 00:00:00 2001
From: coderwelsch <joseph.ribbe@abusix.com>
Date: Mon, 5 Aug 2024 13:48:42 +0200
Subject: [PATCH] feat: added new popover-menu component

---
 .../popover-menu/popover-menu-button.tsx      | 21 +++++++++
 .../popover-menu/popover-menu-context.tsx     | 25 ++++++++++
 .../popover-menu/popover-menu-overlay.tsx     |  6 +++
 .../popover-menu/popover-menu-panel.tsx       | 47 +++++++++++++++++++
 .../popover-menu/popover-menu.stories.tsx     | 35 ++++++++++++++
 src/components/popover-menu/popover-menu.tsx  | 42 +++++++++++++++++
 6 files changed, 176 insertions(+)
 create mode 100644 src/components/popover-menu/popover-menu-button.tsx
 create mode 100644 src/components/popover-menu/popover-menu-context.tsx
 create mode 100644 src/components/popover-menu/popover-menu-overlay.tsx
 create mode 100644 src/components/popover-menu/popover-menu-panel.tsx
 create mode 100644 src/components/popover-menu/popover-menu.stories.tsx
 create mode 100644 src/components/popover-menu/popover-menu.tsx

diff --git a/src/components/popover-menu/popover-menu-button.tsx b/src/components/popover-menu/popover-menu-button.tsx
new file mode 100644
index 00000000..c6a2d2dc
--- /dev/null
+++ b/src/components/popover-menu/popover-menu-button.tsx
@@ -0,0 +1,21 @@
+import { PopoverButton as HeadlessUiPopoverButton } from "@headlessui/react";
+import React from "react";
+import { usePopoverMenuContext } from "./popover-menu-context";
+import { Button, ButtonProps } from "../button/button";
+
+export interface NavigationPopoverButtonProps extends ButtonProps {
+    children: React.ReactNode;
+    onClick?: () => void;
+}
+
+export const PopoverMenuButton = ({ onClick, ...restProps }: NavigationPopoverButtonProps) => {
+    const {
+        popoverButton: { setReferenceElement },
+    } = usePopoverMenuContext();
+
+    return (
+        <HeadlessUiPopoverButton ref={(el) => el && setReferenceElement(el)} onClick={onClick}>
+            <Button {...restProps} />
+        </HeadlessUiPopoverButton>
+    );
+};
diff --git a/src/components/popover-menu/popover-menu-context.tsx b/src/components/popover-menu/popover-menu-context.tsx
new file mode 100644
index 00000000..71fae18a
--- /dev/null
+++ b/src/components/popover-menu/popover-menu-context.tsx
@@ -0,0 +1,25 @@
+import { CSSProperties, createContext, useContext } from "react";
+
+export const PopoverMenuContext = createContext<{
+    popoverButton: {
+        setReferenceElement: React.Dispatch<React.SetStateAction<HTMLButtonElement | undefined>>;
+    };
+    popoverPanel: {
+        setPopperElement: React.Dispatch<React.SetStateAction<HTMLElement | undefined>>;
+        styles: CSSProperties;
+        attributes: { [key: string]: string } | undefined;
+    };
+}>({
+    popoverButton: {
+        setReferenceElement: () => {},
+    },
+    popoverPanel: {
+        setPopperElement: () => {},
+        styles: {},
+        attributes: {},
+    },
+});
+
+export const usePopoverMenuContext = () => useContext(PopoverMenuContext);
+
+export const PopoverMenuContextProvider = PopoverMenuContext.Provider;
diff --git a/src/components/popover-menu/popover-menu-overlay.tsx b/src/components/popover-menu/popover-menu-overlay.tsx
new file mode 100644
index 00000000..c6a7cf64
--- /dev/null
+++ b/src/components/popover-menu/popover-menu-overlay.tsx
@@ -0,0 +1,6 @@
+import { PopoverBackdrop as HeadlessUiPopoverBackdrop } from "@headlessui/react";
+import * as React from "react";
+
+export const PopoverMenuOverlay = () => (
+    <HeadlessUiPopoverBackdrop className="fixed inset-0 z-30 bg-modal-background" />
+);
diff --git a/src/components/popover-menu/popover-menu-panel.tsx b/src/components/popover-menu/popover-menu-panel.tsx
new file mode 100644
index 00000000..69042a7e
--- /dev/null
+++ b/src/components/popover-menu/popover-menu-panel.tsx
@@ -0,0 +1,47 @@
+import { PopoverPanel as HeadlessUiPopoverPanel } from "@headlessui/react";
+import React from "react";
+import { usePopoverMenuContext } from "./popover-menu-context";
+
+export interface PopoverMenuPanelItemProps {
+    children: React.ReactNode;
+    onClick?: () => void;
+}
+
+const PopoverMenuPanelItem = ({ children, onClick }: PopoverMenuPanelItemProps) => {
+    return (
+        <div
+            className="flex w-full cursor-pointer items-center overflow-hidden px-4 py-2 hover:bg-neutral-100 focus:ring-2 focus:ring-primary-200"
+            onClick={onClick}
+            onKeyDown={onClick}
+            tabIndex={0}
+            role="button"
+        >
+            <p className="text-sm font-normal">{children}</p>
+        </div>
+    );
+};
+
+export interface NavigationPopoverPanelProps {
+    children: React.ReactNode;
+}
+
+const PopoverMenuPanel = ({ children }: NavigationPopoverPanelProps) => {
+    const {
+        popoverPanel: { setPopperElement, styles, attributes },
+    } = usePopoverMenuContext();
+
+    return (
+        <HeadlessUiPopoverPanel
+            ref={(el) => el && setPopperElement(el)}
+            style={styles}
+            {...attributes}
+            className="z-40 ml-2 w-52 rounded bg-neutral-0 py-2 shadow"
+        >
+            {children}
+        </HeadlessUiPopoverPanel>
+    );
+};
+
+PopoverMenuPanel.Item = PopoverMenuPanelItem;
+
+export { PopoverMenuPanel };
diff --git a/src/components/popover-menu/popover-menu.stories.tsx b/src/components/popover-menu/popover-menu.stories.tsx
new file mode 100644
index 00000000..29651e93
--- /dev/null
+++ b/src/components/popover-menu/popover-menu.stories.tsx
@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { PopoverMenu } from "./popover-menu";
+
+const meta: Meta<typeof PopoverMenu> = {
+    title: "Popover Menu",
+    component: PopoverMenu,
+    parameters: {
+        options: {
+            showPanel: false,
+        },
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof PopoverMenu>;
+
+export const Default: Story = {
+    render: () => (
+        <div className="relative flex min-h-screen min-w-736 flex-col">
+            <PopoverMenu>
+                <PopoverMenu.Button variant="secondary">Open Popover Menu</PopoverMenu.Button>
+
+                <PopoverMenu.Overlay />
+
+                <PopoverMenu.Panel>
+                    <PopoverMenu.Panel.Item>Item 1</PopoverMenu.Panel.Item>
+                    <PopoverMenu.Panel.Item>Item 1</PopoverMenu.Panel.Item>
+                    <PopoverMenu.Panel.Item>Item 1</PopoverMenu.Panel.Item>
+                </PopoverMenu.Panel>
+            </PopoverMenu>
+        </div>
+    ),
+};
diff --git a/src/components/popover-menu/popover-menu.tsx b/src/components/popover-menu/popover-menu.tsx
new file mode 100644
index 00000000..9b95da8a
--- /dev/null
+++ b/src/components/popover-menu/popover-menu.tsx
@@ -0,0 +1,42 @@
+import { Popover } from "@headlessui/react";
+import React, { useState } from "react";
+import { usePopper } from "react-popper";
+import { PopoverMenuButton } from "./popover-menu-button";
+import { PopoverMenuContextProvider } from "./popover-menu-context";
+import { PopoverMenuOverlay } from "./popover-menu-overlay";
+import { PopoverMenuPanel } from "./popover-menu-panel";
+
+export interface PopoverMenuProps {
+    children: React.ReactNode;
+}
+
+const PopoverMenu = ({ children }: PopoverMenuProps) => {
+    const [referenceElement, setReferenceElement] = useState<HTMLButtonElement>();
+    const [popperElement, setPopperElement] = useState<HTMLElement>();
+    const { styles, attributes } = usePopper(referenceElement, popperElement, {
+        placement: "top-start",
+    });
+
+    const context = {
+        popoverButton: {
+            setReferenceElement,
+        },
+        popoverPanel: {
+            setPopperElement,
+            styles: styles.popper,
+            attributes: attributes.popper,
+        },
+    };
+
+    return (
+        <PopoverMenuContextProvider value={context}>
+            <Popover>{children}</Popover>
+        </PopoverMenuContextProvider>
+    );
+};
+
+PopoverMenu.Button = PopoverMenuButton;
+PopoverMenu.Panel = PopoverMenuPanel;
+PopoverMenu.Overlay = PopoverMenuOverlay;
+
+export { PopoverMenu };