Tooltip refactored and other minor fixes with placement and positioning (#782)

Author: decipher-cs

src/components/tools/Popper/Popper.tsx

@@ -2,7 +2,7 @@ import React, { useState, useRef } from 'react';
 import { customClassSwitcher } from '~/core';
 import { clsx } from 'clsx';
 
-import { useFloating, useInteractions, useHover, FloatingArrow, arrow, offset, flip, autoPlacement, hide, shift, autoUpdate, useRole, useDismiss, FloatingPortal } from '@floating-ui/react';
+import { useFloating, useInteractions, useHover, FloatingArrow, arrow, offset, flip, autoPlacement, hide, shift, autoUpdate, useRole, useDismiss, FloatingPortal, Placement } from '@floating-ui/react';
 
 // TODO : Use Floating Portal?
 // TODO : Collisions dont seem to be working as expected, need to investigate
@@ -22,19 +22,7 @@ export type PopperProps = {
     customRootClass?: string;
     activationStrategy?: 'hover';
     className?: string;
-    placement?:
-        | 'top'
-        | 'bottom'
-        | 'left'
-        | 'right'
-        | 'top-start'
-        | 'top-end'
-        | 'bottom-start'
-        | 'bottom-end'
-        | 'left-start'
-        | 'left-end'
-        | 'right-start'
-        | 'right-end';
+    placement?:Placement;
     children?: React.ReactNode; // TODO: fix
     open?: boolean;
     hoverDelay?: number;
@@ -101,7 +89,7 @@ const Popper = ({
         dismiss
     ]);
 
-    return <span>
+    return <>
         <span
             className={clsx('rad-ui-popper', `${rootClass}-reference-element`, className)} ref={refs.setReference} {...getReferenceProps(
                 {
@@ -116,7 +104,7 @@ const Popper = ({
                 {pop}</div>
             </FloatingPortal>
         }
-    </span>;
+    </>;
 };
 
 export default Popper;

src/components/ui/Tooltip/Tooltip.tsx

@@ -1,26 +1,13 @@
 import React from 'react';
-import Popper from '~/components/tools/Popper/Popper';
+import Popper, { PopperProps } from '~/components/tools/Popper/Popper';
 
 const COMPONENT_NAME = 'Tooltip';
 
 type TooltipProps = {
-    children: React.ReactNode;
-    label?: string;
-    placement?:
-        | 'top'
-        | 'bottom'
-        | 'left'
-        | 'right'
-        | 'top-start'
-        | 'top-end'
-        | 'bottom-start'
-        | 'bottom-end'
-        | 'left-start'
-        | 'left-end'
-        | 'right-start'
-        | 'right-end';
-    [key: string]: any;
-};
+  children: React.ReactNode;
+  label?: string;
+  placement?: PopperProps['placement'];
+} & JSX.IntrinsicElements['span'];
 
 const Tooltip = ({ children, label = '', placement = 'top', ...props }: TooltipProps) => {
     return (

src/components/ui/Tooltip/stories/Tooltip.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Tooltip from '../Tooltip';
+import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+import { Placement } from '@floating-ui/react';
+
+const placement = ['top', 'right', 'bottom', 'left', 'top-start', 'top-end', 'right-start', 'right-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end'] satisfies Placement[];
+
+const meta: Meta<typeof Tooltip> = {
+    title: 'Components/Tooltip',
+    component: Tooltip
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const Basic: Story = {
+    render: () => (
+        <SandboxEditor>
+            <div className="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] justify-center gap-3">
+                {placement.map((p) => (
+                    <Tooltip label={p} placement={p} key={p} className='capitalize border border-neutral-600 p-4 rounded-md'>
+                        <span>{p}</span>
+                    </Tooltip>
+                ))}
+            </div>
+        </SandboxEditor>
+    )
+};