From 7577bd977a5480d514e144fcc3a5bd186d1ae7cb Mon Sep 17 00:00:00 2001 From: Tanish Manku Date: Tue, 27 May 2025 00:14:47 -0700 Subject: [PATCH] Move popover --- .../components/reusable/Popover/Popover.tsx | 213 ------------------ .../src/components/reusable/Popover/index.ts | 1 - .../app/src/components/reusable/index.ts | 1 - .../components/ui/Activity/Activity.tsx | 2 +- .../comps/GenerateModals/Activity.tsx | 2 +- 5 files changed, 2 insertions(+), 217 deletions(-) delete mode 100644 frontend/apps/editor3d/app/src/components/reusable/Popover/Popover.tsx delete mode 100644 frontend/apps/editor3d/app/src/components/reusable/Popover/index.ts diff --git a/frontend/apps/editor3d/app/src/components/reusable/Popover/Popover.tsx b/frontend/apps/editor3d/app/src/components/reusable/Popover/Popover.tsx deleted file mode 100644 index 9e94ac3205..0000000000 --- a/frontend/apps/editor3d/app/src/components/reusable/Popover/Popover.tsx +++ /dev/null @@ -1,213 +0,0 @@ -import { ReactNode } from "react"; -import { Popover, Transition } from "@headlessui/react"; -import { twMerge } from "tailwind-merge"; -import { Button } from "@storyteller/ui-button" - -export interface PopoverItem { - label: string; - selected: boolean; - icon?: ReactNode; - action?: string; - disabled?: boolean; -} - -interface PopoverMenuProps { - items?: PopoverItem[]; - onSelect?: (item: PopoverItem) => void; - onAdd?: () => void; - triggerIcon?: ReactNode; - showAddButton?: boolean; - disableAddButton?: boolean; - showIconsInList?: boolean; - mode?: "default" | "toggle" | "button"; - triggerLabel?: string; - children?: ReactNode; - buttonClassName?: string; - panelClassName?: string; - onPanelAction?: (action: string) => void; - panelTitle?: string; - position?: "top" | "bottom"; - align?: "start" | "center" | "end"; - panelActionLabel?: string; -} - -export const PopoverMenu = ({ - items = [], - onSelect, - onAdd, - triggerIcon, - showAddButton = false, - disableAddButton = false, - showIconsInList = false, - mode = "default", - triggerLabel, - children, - buttonClassName, - panelClassName, - onPanelAction, - panelTitle, - position = "top", - align = "start", - panelActionLabel, -}: PopoverMenuProps) => { - const selectedItem = items.find((item) => item.selected); - - const handleItemClick = (item: PopoverItem, close: () => void) => { - if (mode === "button" && item.action && onPanelAction) { - onPanelAction(item.action); - close(); - } else { - onSelect?.(item); - close(); - } - }; - - const className = twMerge( - "text-sm font-medium rounded-lg px-3 py-2 shadow-sm", - "flex gap-2 items-center justify-center outline-none", - "transition-all duration-150", - "bg-[#5F5F68]/60 px-3 text-white hover:bg-[#5F5F68]/90", - buttonClassName, - ); - - const positionClasses = { - top: "bottom-full", - bottom: "top-full", - }; - - const alignClasses = { - start: "left-0", - center: "left-1/2 -translate-x-1/2", - end: "right-0", - }; - - return ( - - {({ close }) => ( - <> - - <> - {triggerIcon} - {mode === "toggle" && selectedItem ? ( - {selectedItem.label} - ) : null} - {mode === "default" && triggerLabel ? ( - {triggerLabel} - ) : null} - - - -
- - -
- {panelTitle && ( -
- {panelTitle} - {panelActionLabel && ( - - )} -
- )} - {mode === "default" && children ? ( -
{children}
- ) : ( -
- {items.map((item, index) => ( - - ))} - {showAddButton && onAdd && ( - - )} -
- )} -
- - -
- - )} - - ); -}; diff --git a/frontend/apps/editor3d/app/src/components/reusable/Popover/index.ts b/frontend/apps/editor3d/app/src/components/reusable/Popover/index.ts deleted file mode 100644 index 72f124f6d3..0000000000 --- a/frontend/apps/editor3d/app/src/components/reusable/Popover/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./Popover"; diff --git a/frontend/apps/editor3d/app/src/components/reusable/index.ts b/frontend/apps/editor3d/app/src/components/reusable/index.ts index ce854b2e21..63731458a4 100644 --- a/frontend/apps/editor3d/app/src/components/reusable/index.ts +++ b/frontend/apps/editor3d/app/src/components/reusable/index.ts @@ -2,7 +2,6 @@ export * from "./FilterButtons"; export * from "./InputVector"; export * from "./NumberInput"; export * from "./Pagination"; -export * from "./Popover"; export * from "./SearchFilter"; export * from "./UploadModal"; export * from "./UploadModal3D"; diff --git a/frontend/apps/editor3d/app/src/pages/Page2d/components/ui/Activity/Activity.tsx b/frontend/apps/editor3d/app/src/pages/Page2d/components/ui/Activity/Activity.tsx index b9427aa9e7..c91a09c137 100644 --- a/frontend/apps/editor3d/app/src/pages/Page2d/components/ui/Activity/Activity.tsx +++ b/frontend/apps/editor3d/app/src/pages/Page2d/components/ui/Activity/Activity.tsx @@ -1,7 +1,7 @@ import { useEffect, useState } from "react"; import { faBell, faSpinnerThird } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { PopoverMenu } from "~/components/reusable/Popover"; +import { PopoverMenu } from "@storyteller/ui-popover"; import { CompletedCard } from "./CompletedCard"; import { InProgressCard } from "./InProgressCard"; import { useJobContext } from "~/components/JobContext"; diff --git a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/Activity.tsx b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/Activity.tsx index 5a045f19e8..f1f614c996 100644 --- a/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/Activity.tsx +++ b/frontend/apps/editor3d/app/src/pages/PageEnigma/comps/GenerateModals/Activity.tsx @@ -1,7 +1,7 @@ import { useSignals } from "@preact/signals-react/runtime"; import { faBell, faSpinnerThird } from "@fortawesome/pro-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { PopoverMenu } from "~/components/reusable/Popover/Popover"; +import { PopoverMenu } from "@storyteller/ui-popover"; import { CompletedCard } from "./CompletedCard"; import { InProgressCard } from "./InProgressCard"; import { Tooltip } from "@storyteller/ui-tooltip";