chore: Add ui/tooltip stories (#966)

* Add ui/tooltip stories

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

* Add requested changes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

* Fix linting

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>

---------

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>

front/src/modules/ui/tooltip/AppTooltip.tsx

@@ -1,6 +1,13 @@
 import { Tooltip } from 'react-tooltip';
 import styled from '@emotion/styled';
 
+export enum TooltipPosition {
+  Top = 'top',
+  Left = 'left',
+  Right = 'right',
+  Bottom = 'bottom',
+}
+
 export const AppTooltip = styled(Tooltip)`
   background-color: ${({ theme }) => theme.background.primary};
   box-shadow: ${({ theme }) => theme.boxShadow.light};

front/src/modules/ui/tooltip/OverflowingTextWithTooltip.tsx

@@ -55,6 +55,7 @@ export function OverflowingTextWithTooltip({
   return (
     <>
       <StyledOverflowingText
+        data-testid="tooltip"
         ref={textRef}
         id={textElementId}
         cursorPointer={isTitleOverflowing}

front/src/modules/ui/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { userEvent, within } from '@storybook/testing-library';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { OverflowingTextWithTooltip } from '../OverflowingTextWithTooltip';
+
+const placeholderText =
+  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tellus diam, rhoncus nec consequat quis, dapibus quis massa. Praesent tincidunt augue at ex bibendum, non finibus augue faucibus. In at gravida orci. Nulla facilisi. Proin ut augue ut nisi pellentesque tristique. Proin sodales libero id turpis tincidunt posuere.';
+
+const meta: Meta<typeof OverflowingTextWithTooltip> = {
+  title: 'UI/Tooltip/OverflowingTextWithTooltip',
+  component: OverflowingTextWithTooltip,
+};
+
+export default meta;
+type Story = StoryObj<typeof OverflowingTextWithTooltip>;
+
+export const Default: Story = {
+  args: {
+    text: placeholderText,
+  },
+  decorators: [ComponentDecorator],
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const tooltip = await canvas.findByTestId('tooltip');
+    userEvent.hover(tooltip);
+  },
+};

front/src/modules/ui/tooltip/__stories__/Tooltip.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { AppTooltip as Tooltip, TooltipPosition } from '../AppTooltip';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'UI/Tooltip/Tooltip',
+  component: Tooltip,
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {
+  args: {
+    place: TooltipPosition.Bottom,
+    content: 'Tooltip Test',
+    isOpen: true,
+    anchorSelect: '#hover-text',
+  },
+  decorators: [ComponentDecorator],
+  render: (args) => (
+    <>
+      <p id="hover-text" data-testid="tooltip">
+        Hover me!
+      </p>
+      <Tooltip {...args} />
+    </>
+  ),
+};
+
+export const Catalog: Story = {
+  args: { isOpen: true, content: 'Tooltip Test' },
+  play: async ({ canvasElement }) => {
+    Object.values(TooltipPosition).forEach((position) => {
+      const element = canvasElement.querySelector(
+        `#${position}`,
+      ) as HTMLElement;
+      element.style.margin = '75px';
+    });
+  },
+  parameters: {
+    catalog: [
+      {
+        name: 'anchorSelect',
+        values: Object.values(TooltipPosition),
+        props: (anchorSelect: TooltipPosition) => ({
+          anchorSelect: `#${anchorSelect}`,
+          place: anchorSelect,
+        }),
+      },
+    ],
+  },
+  decorators: [CatalogDecorator],
+};

front/src/testing/decorators/CatalogDecorator.tsx

@@ -96,7 +96,7 @@ export const CatalogDecorator: Decorator = (Story, context) => {
                     <RowTitle>{variable2.labels?.(value2) || value2}</RowTitle>
                   )}
                   {variable1.values.map((value1: string) => (
-                    <ElementContainer key={value1}>
+                    <ElementContainer key={value1} id={value1}>
                       {(variable1.labels?.(value1) || value1) && (
                         <ElementTitle>
                           {variable1.labels?.(value1) || value1}