From 0bc80ce9ee508f8e938fc4f8a1487c8a62b4e72d Mon Sep 17 00:00:00 2001
From: gitstart-twenty <140154534+gitstart-twenty@users.noreply.github.com>
Date: Sat, 29 Jul 2023 01:44:46 +0700
Subject: [PATCH] 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   |  7 +++
 .../ui/tooltip/OverflowingTextWithTooltip.tsx |  1 +
 .../OverflowTextWithTooltip.stories.tsx       | 29 ++++++++++
 .../tooltip/__stories__/Tooltip.stories.tsx   | 57 +++++++++++++++++++
 .../testing/decorators/CatalogDecorator.tsx   |  2 +-
 5 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 front/src/modules/ui/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx
 create mode 100644 front/src/modules/ui/tooltip/__stories__/Tooltip.stories.tsx

diff --git a/front/src/modules/ui/tooltip/AppTooltip.tsx b/front/src/modules/ui/tooltip/AppTooltip.tsx
index f7d3e40f1..6aa4f9607 100644
--- a/front/src/modules/ui/tooltip/AppTooltip.tsx
+++ b/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};
diff --git a/front/src/modules/ui/tooltip/OverflowingTextWithTooltip.tsx b/front/src/modules/ui/tooltip/OverflowingTextWithTooltip.tsx
index e6c6f40cd..b24d0632b 100644
--- a/front/src/modules/ui/tooltip/OverflowingTextWithTooltip.tsx
+++ b/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}
diff --git a/front/src/modules/ui/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx b/front/src/modules/ui/tooltip/__stories__/OverflowTextWithTooltip.stories.tsx
new file mode 100644
index 000000000..7fd800b86
--- /dev/null
+++ b/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);
+  },
+};
diff --git a/front/src/modules/ui/tooltip/__stories__/Tooltip.stories.tsx b/front/src/modules/ui/tooltip/__stories__/Tooltip.stories.tsx
new file mode 100644
index 000000000..4e152b2ec
--- /dev/null
+++ b/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],
+};
diff --git a/front/src/testing/decorators/CatalogDecorator.tsx b/front/src/testing/decorators/CatalogDecorator.tsx
index f8e5ffb54..5b78e1626 100644
--- a/front/src/testing/decorators/CatalogDecorator.tsx
+++ b/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}