chore: Add ui/tooltip stories (twentyhq#966)

* Add ui/tooltip stories

Co-authored-by: Thiago Nascimbeni <[email protected]>

* Add requested changes

Co-authored-by: v1b3m <[email protected]>
Co-authored-by: Thiago Nascimbeni <[email protected]>

* Fix linting

Co-authored-by: v1b3m <[email protected]>
Co-authored-by: Thiago Nascimbeni <[email protected]>

---------

Co-authored-by: Thiago Nascimbeni <[email protected]>
Co-authored-by: v1b3m <[email protected]>

Author: 3 people

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}