chore: added storybook to component

src/components/Tooltip/index.tsx

@@ -1,12 +1,18 @@
-import React, { ComponentProps, ElementType, ReactNode, useState } from "react";
+import React, {
+    ComponentProps,
+    ElementType,
+    ReactNode,
+    useRef,
+    useState,
+} from "react";
 import { Placement } from "@popperjs/core";
 import { usePopper } from "react-popper";
 import clsx from "clsx";
 import "./Tooltip.scss";
 
 type AsElement = "a" | "div" | "button";
 type TooltipVariantType = "error" | "general";
-type TooltipProps<T extends AsElement> = ComponentProps<T> & {
+export type TooltipProps<T extends AsElement> = ComponentProps<T> & {
     as: T;
     children: ReactNode;
     tooltipContainerClassName?: string;
@@ -15,6 +21,11 @@ type TooltipProps<T extends AsElement> = ComponentProps<T> & {
     variant?: "general" | "error";
 };
 
+const TooltipVariantClass: Record<TooltipVariantType, string> = {
+    error: "deriv-tooltip--error",
+    general: "deriv-tooltip--general",
+};
+
 /**
  * A component that renders an icon, a link, or a div with a tooltip.
  *
@@ -49,26 +60,23 @@ export const Tooltip = <T extends AsElement>({
     variant = "general",
     ...rest
 }: TooltipProps<T>) => {
-    const [referenceElement, setReferenceElement] = useState(null);
-    const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(
-        null,
-    );
+    const referenceElement = useRef<HTMLElement | null>(null);
+    const popperElement = useRef<HTMLDivElement | null>(null);
     const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(
         null,
     );
 
-    const { styles, attributes } = usePopper(referenceElement, popperElement, {
-        placement: tooltipPosition,
-        modifiers: [
-            { name: "arrow", options: { element: arrowElement } },
-            { name: "offset", options: { offset: [0, 8] } },
-        ],
-    });
-
-    const TooltipVariantClass: Record<TooltipVariantType, string> = {
-        error: "deriv-tooltip--error",
-        general: "deriv-tooltip--general",
-    };
+    const { styles, attributes } = usePopper(
+        referenceElement.current,
+        popperElement.current,
+        {
+            placement: tooltipPosition,
+            modifiers: [
+                { name: "arrow", options: { element: arrowElement } },
+                { name: "offset", options: { offset: [0, 8] } },
+            ],
+        },
+    );
 
     const [showTooltip, setShowTooltip] = useState(false);
     const onMouseEnter = () => setShowTooltip(true);
@@ -79,7 +87,7 @@ export const Tooltip = <T extends AsElement>({
     return (
         <>
             <Tag
-                ref={setReferenceElement}
+                ref={referenceElement}
                 className={clsx("deriv-tooltip__trigger", rest.className)}
                 onMouseEnter={onMouseEnter}
                 onMouseLeave={onMouseLeave}
@@ -94,7 +102,7 @@ export const Tooltip = <T extends AsElement>({
                         TooltipVariantClass[variant],
                         tooltipContainerClassName,
                     )}
-                    ref={setPopperElement}
+                    ref={popperElement}
                     style={styles.popper}
                     {...attributes.popper}
                 >

stories/Tooltip.stories.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { StoryObj, Meta } from "@storybook/react";
+import { Tooltip } from "../src/main";
+
+const meta: Meta = {
+    title: "Components/Tooltip",
+    component: Tooltip,
+    args: {
+        as: "a",
+        tooltipContent: "tooltip content",
+        tooltipPosition: "top",
+        children: "Hover over me",
+    },
+    argTypes: {
+        as: {
+            description:
+                'The HTML element or React component to render which can be "a" | "div" | "button".',
+            control: {
+                type: "select",
+                options: ["a", "div", "button"],
+            },
+            defaultValue: "a",
+        },
+        tooltipContent: {
+            description: "The content to display inside the tooltip.",
+        },
+        tooltipPosition: {
+            description: "The position of the tooltip relative to the element.",
+            control: {
+                type: "select",
+                options: [
+                    "auto",
+                    "auto-start",
+                    "auto-end",
+                    "top",
+                    "top-start",
+                    "top-end",
+                    "bottom",
+                    "bottom-start",
+                    "bottom-end",
+                    "right",
+                    "right-start",
+                    "right-end",
+                    "left",
+                    "left-start",
+                    "left-end",
+                ],
+                defaultValue: "auto",
+            },
+        },
+        tooltipContainerClassName: {
+            description: "The class name for the tooltip container.",
+            control: false,
+        },
+        variant: {
+            description: "The variant of the tooltip.",
+            control: {
+                type: "select",
+                options: ["general", "error"],
+            },
+        },
+    },
+    parameters: { layout: "centered" },
+    tags: ["autodocs"],
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof Tooltip> = {
+    name: "Default Tooltip",
+    args: {
+        as: "button",
+        children: "Hover over me",
+        tooltipContent: "This is a tooltip",
+        tooltipPosition: "top",
+    },
+    render: (args) => (
+        <div
+            style={{
+                width: "900px",
+                height: "100%",
+                display: "grid",
+                placeContent: "center",
+            }}
+        >
+            <Tooltip {...args} />
+        </div>
+    ),
+};