From b0bc81836226e2445ff058d519d1cbe258003423 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Tue, 2 Jul 2024 17:10:53 +0530
Subject: [PATCH] [WEB-1819] dev: collapsible component (#5001)

* dev: accordion component added

* chore: code refactor

* chore: collapsible component improvement
---
 packages/ui/src/collapsible/collapsible.tsx | 52 +++++++++++++++++++++
 packages/ui/src/collapsible/index.ts        |  1 +
 packages/ui/src/index.ts                    |  1 +
 3 files changed, 54 insertions(+)
 create mode 100644 packages/ui/src/collapsible/collapsible.tsx
 create mode 100644 packages/ui/src/collapsible/index.ts

diff --git a/packages/ui/src/collapsible/collapsible.tsx b/packages/ui/src/collapsible/collapsible.tsx
new file mode 100644
index 0000000000..6c08563f0a
--- /dev/null
+++ b/packages/ui/src/collapsible/collapsible.tsx
@@ -0,0 +1,52 @@
+import React, { FC, useState, useEffect, useCallback } from "react";
+import { Disclosure, Transition } from "@headlessui/react";
+
+export type TCollapsibleProps = {
+  title: string | React.ReactNode;
+  children: React.ReactNode;
+  buttonClassName?: string;
+  isOpen?: boolean;
+  onToggle?: () => void;
+  defaultOpen?: boolean;
+};
+
+export const Collapsible: FC<TCollapsibleProps> = (props) => {
+  const { title, children, buttonClassName, isOpen, onToggle, defaultOpen } = props;
+  // state
+  const [localIsOpen, setLocalIsOpen] = useState<boolean>(isOpen || defaultOpen ? true : false);
+
+  useEffect(() => {
+    if (isOpen !== undefined) {
+      setLocalIsOpen(isOpen);
+    }
+  }, [isOpen]);
+
+  // handlers
+  const handleOnClick = useCallback(() => {
+    if (isOpen !== undefined) {
+      if (onToggle) onToggle();
+    } else {
+      setLocalIsOpen((prev) => !prev);
+    }
+  }, [isOpen, onToggle]);
+
+  return (
+    <Disclosure>
+      <Disclosure.Button className={buttonClassName} onClick={handleOnClick}>
+        {title}
+      </Disclosure.Button>
+      <Transition
+        show={localIsOpen}
+        className="overflow-hidden"
+        enter="transition-max-height duration-400 ease-in-out"
+        enterFrom="max-h-0"
+        enterTo="max-h-screen"
+        leave="transition-max-height duration-400 ease-in-out"
+        leaveFrom="max-h-screen"
+        leaveTo="max-h-0"
+      >
+        <Disclosure.Panel static>{children}</Disclosure.Panel>
+      </Transition>
+    </Disclosure>
+  );
+};
diff --git a/packages/ui/src/collapsible/index.ts b/packages/ui/src/collapsible/index.ts
new file mode 100644
index 0000000000..dbd9262372
--- /dev/null
+++ b/packages/ui/src/collapsible/index.ts
@@ -0,0 +1 @@
+export * from "./collapsible";
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index e35a1ba5e0..59e7d609f4 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -20,3 +20,4 @@ export * from "./drag-handle";
 export * from "./drop-indicator";
 export * from "./favorite-star";
 export * from "./loader";
+export * from "./collapsible";