From 6d0f20f8d8b81f98c87c5543ad89124fc31ce243 Mon Sep 17 00:00:00 2001 From: Yago Russo Date: Thu, 18 Jan 2024 17:50:28 -0300 Subject: [PATCH] chore: removed tooltip.time (#110) --- .../src/stories/Tooltip/Hover.stories.tsx | 17 ++- .../docs/src/stories/Tooltip/Time.stories.tsx | 140 ------------------ package-lock.json | 22 +-- package.json | 10 +- packages/visu/src/App.tsx | 5 +- .../visu/src/__tests__/Tooltip/Hover.test.tsx | 20 +++ .../visu/src/__tests__/Tooltip/Time.test.tsx | 119 --------------- packages/visu/src/library/Tooltip/Hover.tsx | 16 +- packages/visu/src/library/Tooltip/Time.tsx | 81 ---------- packages/visu/src/library/Tooltip/index.ts | 3 - 10 files changed, 61 insertions(+), 372 deletions(-) delete mode 100644 apps/docs/src/stories/Tooltip/Time.stories.tsx delete mode 100644 packages/visu/src/__tests__/Tooltip/Time.test.tsx delete mode 100644 packages/visu/src/library/Tooltip/Time.tsx diff --git a/apps/docs/src/stories/Tooltip/Hover.stories.tsx b/apps/docs/src/stories/Tooltip/Hover.stories.tsx index 26c878ad..e520e638 100644 --- a/apps/docs/src/stories/Tooltip/Hover.stories.tsx +++ b/apps/docs/src/stories/Tooltip/Hover.stories.tsx @@ -32,10 +32,17 @@ const meta: Meta = { }, type: { name: 'boolean', required: false }, }, + closeTime: { + control: 'number', + description: 'Define o tempo em milissegundos para fechar o conteúdo do Tooltip.', + table: { + type: { summary: 'number' }, + }, + type: { name: 'number', required: false }, + }, delayDuration: { control: 'number', - description: - 'Define o tempo de delay em milissegundos para exibir o conteúdo do Tooltip.', + description: 'Define o tempo de delay em milissegundos para exibir o conteúdo do Tooltip.', table: { type: { summary: 'number' }, defaultValue: { summary: '300' }, @@ -53,8 +60,7 @@ const meta: Meta = { }, side: { control: { type: 'inline-radio' }, - description: - 'Define o local em que o componente irá aparecer, relativo ao trigger.', + description: 'Define o local em que o componente irá aparecer, relativo ao trigger.', options: ['bottom', 'left', 'right', 'top'], table: { type: { @@ -80,8 +86,7 @@ const meta: Meta = { text: { control: 'none', name: 'text (deprecated)', - description: - 'Define o valor em texto do componente. (deprecated) - Use a propriedade `content`.', + description: 'Define o valor em texto do componente. (deprecated) - Use a propriedade `content`.', table: { type: { summary: 'text' }, }, diff --git a/apps/docs/src/stories/Tooltip/Time.stories.tsx b/apps/docs/src/stories/Tooltip/Time.stories.tsx deleted file mode 100644 index b487b80a..00000000 --- a/apps/docs/src/stories/Tooltip/Time.stories.tsx +++ /dev/null @@ -1,140 +0,0 @@ -import { Button, Tooltip, TooltipTimeProps } from '@droz-js/visu' -import { Meta, StoryObj } from '@storybook/react' -import { Question } from 'phosphor-react' - -const meta: Meta = { - title: 'Tooltip/Time', - component: Tooltip.Time, - argTypes: { - children: { - control: 'none', - description: 'Trigger do Tooltip.', - table: { - type: { - summary: 'React.ReactNode', - }, - }, - }, - content: { - control: 'text', - description: 'Define o conteúdo exibido no Tooltip.', - table: { - type: { summary: 'React.ReactNode' }, - }, - type: { name: 'string', required: false }, - }, - defaultOpen: { - control: 'boolean', - description: 'Define se o Tooltip deve iniciar aberto ou fechado.', - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: 'false' }, - }, - type: { name: 'boolean', required: false }, - }, - closeTime: { - control: 'number', - description: 'Define o tempo em milissegundos para fechar o conteúdo do Tooltip.', - table: { - type: { summary: 'number' }, - defaultValue: { summary: '2000' }, - }, - type: { name: 'number', required: false }, - }, - open: { - control: 'boolean', - description: 'Define se o conteúdo do Tooltip está visível ou não.', - table: { - type: { summary: 'boolean' }, - defaultValue: { summary: 'false' }, - }, - type: { name: 'boolean', required: false }, - }, - side: { - control: { type: 'inline-radio' }, - description: 'Define o local em que o componente irá aparecer, relativo ao trigger.', - options: ['bottom', 'left', 'right', 'top'], - table: { - type: { - summary: ['bottom', 'left', 'right', 'top'].join('|'), - }, - defaultValue: { summary: 'bottom' }, - }, - type: { name: 'string', required: false }, - }, - onOpenChange: { - control: 'none', - description: 'Callback executado quando o estado de `open` é alterado.', - table: { - type: { summary: 'function' }, - }, - type: { name: 'function', required: false }, - }, - - /** - * @deprecated - Deprecated props will be removed in the next major version. - */ - text: { - control: 'none', - name: 'text (deprecated)', - description: 'Define o valor em texto do componente. (deprecated) - Use a propriedade `content`.', - table: { - type: { summary: 'text' }, - }, - type: { name: 'string', required: false }, - }, - }, - args: { - children: '', - content: 'Texto do tooltip', - defaultOpen: false, - closeTime: 2000, - open: false, - side: 'bottom', - }, - parameters: { - design: { - type: 'figma', - url: 'https://www.figma.com/file/cUmiZr1GhrB9HsRCuOJ0S2/%5BDroz-Nexo%5D-Library?type=design&node-id=3107-18351&t=NDiO1Vda4DCr6uFV-0', - allowFullscreen: true, - }, - }, -} - -export default meta -type TooltipTimeStory = StoryObj - -export const ComTexto: TooltipTimeStory = { - name: 'Com texto', - render: (args) => { - return ( - - - - ) - }, -} - -export const ComReactNode: TooltipTimeStory = { - name: 'Com ReactNode', - args: { - content: ( - <> -

Texto do tooltip

- Button do tooltip - - ), - }, - argTypes: { - content: { - control: 'none', - }, - }, - render: (args) => { - return ( - - - - ) - }, -} diff --git a/package-lock.json b/package-lock.json index fc701319..8f2a05b8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,10 +13,10 @@ ], "devDependencies": { "@trivago/prettier-plugin-sort-imports": "^4.0.0", - "@typescript-eslint/eslint-plugin": "^6.4.0", - "@typescript-eslint/parser": "^6.4.0", + "@typescript-eslint/eslint-plugin": "^6.4.1", + "@typescript-eslint/parser": "^6.4.1", "eslint": "^8.33.0", - "eslint-config-next": "^13.4.7", + "eslint-config-next": "^13.4.19", "eslint-config-prettier": "^8.8.0", "eslint-config-standard": "^17.1.0", "eslint-plugin-import": "^2.27.5", @@ -28,9 +28,9 @@ "eslint-plugin-unused-imports": "^3.0.0", "glob": "^7.2.3", "husky": "^8.0.3", - "lint-staged": "^13.1.0", + "lint-staged": "^13.1.4", "phosphor-react": "latest", - "prettier": "2.8.3", + "prettier": "2.8.8", "prettier-plugin-tailwindcss": "^0.4.1", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -15912,9 +15912,9 @@ } }, "node_modules/follow-redirects": { - "version": "1.15.3", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", - "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==", + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", "dev": true, "funding": [ { @@ -25587,9 +25587,9 @@ } }, "node_modules/prettier": { - "version": "2.8.3", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.3.tgz", - "integrity": "sha512-tJ/oJ4amDihPoufT5sM0Z1SKEuKay8LfVAMlbbhnnkvt6BUserZylqo2PN+p9KeljLr0OHa2rXHU1T8reeoTrw==", + "version": "2.8.8", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz", + "integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==", "dev": true, "bin": { "prettier": "bin-prettier.js" diff --git a/package.json b/package.json index 5cd0823e..81949531 100644 --- a/package.json +++ b/package.json @@ -24,10 +24,10 @@ }, "devDependencies": { "@trivago/prettier-plugin-sort-imports": "^4.0.0", - "@typescript-eslint/eslint-plugin": "^6.4.0", - "@typescript-eslint/parser": "^6.4.0", + "@typescript-eslint/eslint-plugin": "^6.4.1", + "@typescript-eslint/parser": "^6.4.1", "eslint": "^8.33.0", - "eslint-config-next": "^13.4.7", + "eslint-config-next": "^13.4.19", "eslint-config-prettier": "^8.8.0", "eslint-config-standard": "^17.1.0", "eslint-plugin-import": "^2.27.5", @@ -39,9 +39,9 @@ "eslint-plugin-unused-imports": "^3.0.0", "glob": "^7.2.3", "husky": "^8.0.3", - "lint-staged": "^13.1.0", + "lint-staged": "^13.1.4", "phosphor-react": "latest", - "prettier": "2.8.3", + "prettier": "2.8.8", "prettier-plugin-tailwindcss": "^0.4.1", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/packages/visu/src/App.tsx b/packages/visu/src/App.tsx index 4029a119..95fb4610 100644 --- a/packages/visu/src/App.tsx +++ b/packages/visu/src/App.tsx @@ -32,10 +32,9 @@ function App() { , onClick: clearState }]}>
{/* ================================= TEST AREA ================================= */} - + Time - - + {/* ================================= TEST AREA ================================= */}
diff --git a/packages/visu/src/__tests__/Tooltip/Hover.test.tsx b/packages/visu/src/__tests__/Tooltip/Hover.test.tsx index 651dfd2f..65b59d2f 100644 --- a/packages/visu/src/__tests__/Tooltip/Hover.test.tsx +++ b/packages/visu/src/__tests__/Tooltip/Hover.test.tsx @@ -106,4 +106,24 @@ describe('TooltipHover tests', () => { expect(screen.getByRole('tooltip')).toHaveTextContent('Text1') }) }) + + it('Should close the tooltip after the specified closeTime', async () => { + const closeTime = 2500 + + render( + +
Hello
+ , + ) + + const element = screen.getByTestId('element') + fireEvent.click(element) + + await waitFor(() => { + expect(screen.getByRole('tooltip')).toContainHTML('Text') + setTimeout(() => { + expect(screen.queryByRole('tooltip')).toBeNull() + }, closeTime + 100) + }) + }) }) diff --git a/packages/visu/src/__tests__/Tooltip/Time.test.tsx b/packages/visu/src/__tests__/Tooltip/Time.test.tsx deleted file mode 100644 index 0bfbc8fe..00000000 --- a/packages/visu/src/__tests__/Tooltip/Time.test.tsx +++ /dev/null @@ -1,119 +0,0 @@ -import { Tooltip } from '@library' -import { fireEvent, render, screen, waitFor } from '@testing-library/react' -import userEvent from '@testing-library/user-event' - -// Testes limitados por conta do Radix -describe('TooltipTime tests', () => { - it('Should render a TooltipTime element', () => { - render( - -
Hello
- , - ) - const element = screen.getByTestId('element') - - expect(element).toBeInTheDocument() - }) - - it('Should render a text with the prop "content"', async () => { - const user = userEvent.setup() - - render( - -
Hello
- , - ) - const element = screen.getByTestId('element') - await user.click(element) - - await waitFor(() => { - expect(screen.getByRole('tooltip')).toHaveTextContent('Text1') - }) - }) - - it('Should render a ReactNode content with the prop "content"', async () => { - const user = userEvent.setup() - - render( - Text1}> -
Hello
- , - ) - const element = screen.getByTestId('element') - await user.click(element) - - await waitFor(() => { - expect(screen.getByRole('tooltip')).toContainHTML('Text1') - }) - }) - - it('Should render content when trigger gets a click', async () => { - render( - Text1}> -
Hello
- , - ) - const element = screen.getByTestId('element') - fireEvent.click(element) - - await waitFor(() => { - expect(screen.getByRole('tooltip')).toContainHTML('Text1') - }) - }) - - it('Should execute "onOpenChange" when "open" value changes', async () => { - const onOpenChange = jest.fn() - console.log(onOpenChange) - render( - Text1} onOpenChange={onOpenChange}> -
Hello
- , - ) - const element = screen.getByTestId('element') - fireEvent.click(element) - - await waitFor(() => { - expect(screen.getByRole('tooltip')).toContainHTML('Text1') - expect(onOpenChange).toBeCalledTimes(1) - expect(onOpenChange).toBeCalledWith(true) - }) - }) - - /** - * @deprecated - Teste para uma propriedade deprecated - */ - it('Should render a text with the prop "text"', async () => { - const user = userEvent.setup() - - render( - -
Hello
- , - ) - const element = screen.getByTestId('element') - await user.click(element) - - await waitFor(() => { - expect(screen.getByRole('tooltip')).toHaveTextContent('Text1') - }) - }) - - it('Should close the tooltip after the specified closeTime', async () => { - const closeTime = 3500 // Tempo de fechamento em milissegundos - - render( - Text1} closeTime={closeTime}> -
Hello
- , - ) - const element = screen.getByTestId('element') - fireEvent.click(element) - - await waitFor(() => { - expect(screen.getByRole('tooltip')).toContainHTML('Text1') - setTimeout(() => { - expect(screen.queryByRole('tooltip')).toBeNull() - }, closeTime + 100) - }) - }) -}) diff --git a/packages/visu/src/library/Tooltip/Hover.tsx b/packages/visu/src/library/Tooltip/Hover.tsx index 739b0445..891a569b 100644 --- a/packages/visu/src/library/Tooltip/Hover.tsx +++ b/packages/visu/src/library/Tooltip/Hover.tsx @@ -7,10 +7,10 @@ export interface TooltipHoverProps extends Omit, // Optional because we can't remove `text` until the next major release content?: ReactNode defaultOpen?: boolean + closeTime?: number delayDuration?: number open?: boolean side?: Position - onOpenChange?: (open: boolean) => void /** * @deprecated Use `content` instead. Will be removed in the next major release @@ -22,6 +22,7 @@ const TooltipHover: FC = ({ children, className, content, + closeTime, defaultOpen = false, delayDuration = 300, open = false, @@ -33,9 +34,16 @@ const TooltipHover: FC = ({ const [tooltipOpen, setTooltipOpen] = useState(open) const handleOpenChange = useCallback( - (value: boolean) => { - setTooltipOpen(value) - if (onOpenChange) onOpenChange(value) + (isOpen: boolean) => { + if (!isOpen && closeTime) { + setTimeout(() => { + setTooltipOpen(false) + if (onOpenChange) onOpenChange(false) + }, closeTime) + } else { + setTooltipOpen(isOpen) + if (onOpenChange) onOpenChange(isOpen) + } }, [onOpenChange], ) diff --git a/packages/visu/src/library/Tooltip/Time.tsx b/packages/visu/src/library/Tooltip/Time.tsx deleted file mode 100644 index 4397f530..00000000 --- a/packages/visu/src/library/Tooltip/Time.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import * as RadixTooltip from '@radix-ui/react-tooltip' -import { Position } from '@types' -import { clsx } from 'clsx' -import { FC, HTMLAttributes, ReactNode, useCallback, useEffect, useState } from 'react' - -export interface TooltipTimeProps extends Omit, 'content'> { - // Optional because we can't remove `text` until the next major release - content?: ReactNode - defaultOpen?: boolean - open?: boolean - side?: Position - closeTime?: number - onOpenChange?: (open: boolean) => void - /** - * @deprecated Use `content` instead. Will be removed in the next major release - */ - text?: string -} - -const TooltipTime: FC = ({ - children, - className, - content, - defaultOpen = false, - closeTime = 2000, - open = false, - onOpenChange, - side, - text, - ...rest -}) => { - const [tooltipOpen, setTooltipOpen] = useState(open) - - const handleOpenChange = useCallback( - (value: boolean) => { - setTooltipOpen(value) - if (onOpenChange) onOpenChange(value) - - if (value && closeTime) { - setTimeout(() => { - setTooltipOpen(false) - if (onOpenChange) onOpenChange(false) - }, closeTime) - } - }, - [onOpenChange, closeTime], - ) - - useEffect(() => { - setTooltipOpen(open) - }, [open]) - - const handleTooltipClick = () => { - handleOpenChange(!tooltipOpen) - } - - return ( - - - - {children} - - - - - -
- - {content || text} - -
- - - - - ) -} - -TooltipTime.displayName = 'Tooltip.Time' - -export default TooltipTime diff --git a/packages/visu/src/library/Tooltip/index.ts b/packages/visu/src/library/Tooltip/index.ts index f1cff74a..155a9a0e 100644 --- a/packages/visu/src/library/Tooltip/index.ts +++ b/packages/visu/src/library/Tooltip/index.ts @@ -1,18 +1,15 @@ import TooltipClose from './Close' import TooltipHover from './Hover' import TooltipStep from './Step' -import TooltipTime from './Time' export type { TooltipCloseProps } from './Close' export type { TooltipHoverProps } from './Hover' export type { TooltipStepProps } from './Step' -export type { TooltipTimeProps } from './Time' const Tooltip = { Close: TooltipClose, Hover: TooltipHover, Step: TooltipStep, - Time: TooltipTime, } export default Tooltip