Popover frontend component creation

docs/src/stories/Popover/Content.stories.tsx

@@ -0,0 +1,74 @@
+import { Popover, PopoverContentProps } from '@droz-js/visu'
+import { ShareFat } from '@phosphor-icons/react'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<PopoverContentProps> = {
+  title: 'Popover/Content',
+  component: Popover.Content,
+  argTypes: {
+    children: {
+      control: 'none',
+      description: 'Conteúdo do popover.',
+      table: {
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+    align: {
+      control: 'none',
+      description: 'Alinhamento do conteúdo do popover.',
+      options: ['center', 'start', 'end'],
+      table: {
+        type: { summary: ['center', 'start', 'end'].join('|') },
+        defaultValue: { summary: 'center' },
+      },
+      type: {
+        name: 'enum',
+        required: false,
+        value: ['center', 'start', 'end'],
+      },
+    },
+
+    side: {
+      control: 'none',
+      description: 'Posição do conteúdo em relação ao popover.',
+      options: ['top', 'right', 'bottom', 'left'],
+      table: {
+        type: { summary: ['top', 'right', 'bottom', 'left'].join('|') },
+        defaultValue: { summary: 'bottom' },
+      },
+      type: {
+        name: 'enum',
+        required: false,
+        value: ['top', 'right', 'bottom', 'left'],
+      },
+    },
+  },
+  args: {
+    children: '',
+  },
+}
+
+export default meta
+type PopoverContentStory = StoryObj<PopoverContentProps>
+
+export const Comum: PopoverContentStory = {
+  render: (args) => {
+    return (
+      <Popover.Root>
+        <Popover.Trigger>
+          <ShareFat size={32} />
+        </Popover.Trigger>
+        <Popover.Content {...args}>
+          <div className="flex flex-col">
+            <span>
+              O Root é apenas o container do componente. Verifique o código na
+              docs.
+            </span>
+          </div>
+        </Popover.Content>
+      </Popover.Root>
+    )
+  },
+}

docs/src/stories/Popover/Root.Stories.tsx

@@ -0,0 +1,45 @@
+import { Avatar, Popover, PopoverRootProps } from '@droz-js/visu'
+import { ShareFat } from '@phosphor-icons/react'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<PopoverRootProps> = {
+  title: 'Popover/Root',
+  component: Popover.Content,
+  argTypes: {
+    children: {
+      table: {
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+  },
+  args: {
+    children: '',
+  },
+}
+
+export default meta
+type PopoverRootStory = StoryObj<PopoverRootProps>
+
+export const Comum: PopoverRootStory = {
+  render: (args) => {
+    return (
+      <Popover.Root {...args}>
+        <Popover.Trigger>
+          <ShareFat size={32} />
+        </Popover.Trigger>
+        <Popover.Content>
+          <div className="flex flex-col">
+            <Avatar fallback="FC" />
+
+            <span>
+              O Root é apenas o container do componente. Verifique o código na
+              docs.
+            </span>
+          </div>
+        </Popover.Content>
+      </Popover.Root>
+    )
+  },
+}

docs/src/stories/Popover/Trigger.stories.tsx

@@ -0,0 +1,77 @@
+import { Avatar, Popover, PopoverTriggerProps } from '@droz-js/visu'
+import { ShareFat } from '@phosphor-icons/react'
+import { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<PopoverTriggerProps> = {
+  title: 'Popover/Trigger',
+  component: Popover.Trigger,
+  argTypes: {
+    children: {
+      control: 'none',
+      description:
+        'Conteúdo exibido para receber o hover que irá mostar o card.',
+      table: {
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+  },
+  args: {
+    children: '',
+  },
+}
+
+export default meta
+type PopoverRootStory = StoryObj<PopoverTriggerProps>
+
+export const Comum: PopoverRootStory = {
+  render: (args) => {
+    return (
+      <Popover.Root {...args}>
+        <Popover.Trigger>
+          <ShareFat size={32} />
+        </Popover.Trigger>
+        <Popover.Content>
+          <div className="flex flex-col">
+            <span>
+              O Popover é utilizado para estruturas mais complexas do que um
+              Tooltip.
+            </span>
+            <span>
+              O Root é apenas o container do componente. Verifique o código na
+              docs.
+            </span>
+          </div>
+        </Popover.Content>
+      </Popover.Root>
+    )
+  },
+}
+
+export const ComComponente: PopoverRootStory = {
+  name: 'Componente como trigger',
+  render: (args) => {
+    return (
+      <div className="flex flex-col items-center justify-center">
+        <span>Qualquer elemento pode ser um trigger</span>
+        <Popover.Root>
+          <Popover.Trigger {...args}>
+            <div>
+              <Avatar fallback="FC" />
+            </div>
+          </Popover.Trigger>
+          <Popover.Content>
+            <div className="flex flex-col">
+              <Avatar fallback="FC" />
+              <span>
+                O Root é apenas o container do componente. Verifique o código na
+                docs.
+              </span>
+            </div>
+          </Popover.Content>
+        </Popover.Root>
+      </div>
+    )
+  },
+}

package/src/App.tsx

@@ -1,8 +1,9 @@
 import LayoutDefault from './layout/Default'
-import { Form, Toggle } from './library'
+import { Button, Form } from './library'
+import Popover from './library/Popover'
 
 import { zodResolver } from '@hookform/resolvers/zod'
-import { Alien, Eraser } from '@phosphor-icons/react'
+import { Eraser, ShareFat } from '@phosphor-icons/react'
 import { useState } from 'react'
 import { SubmitHandler, useForm } from 'react-hook-form'
 import { z } from 'zod'
@@ -13,6 +14,10 @@ const formSchema = z.object({
 
 type FormSchemaProps = z.infer<typeof formSchema>
 
+const generateTestItems = () => {
+  return ['Item 1', 'Item 2', 'Item blabla', 'Item bloblo', 'Item blibli']
+}
+
 function App() {
   const [test, setTest] = useState('')
   const {
@@ -44,16 +49,25 @@ function App() {
       <Form.Root onSubmit={handleSubmit(onSubmit)}>
         {/* ================================= TEST AREA ================================= */}
 
-        <div className="w-156">
-          <Toggle.Root type="multiple" expanded>
-            <Toggle.Item
-              icon={<Alien />}
-              value="a"
-              text="text a"
-              notification
-            />
-            <Toggle.Item value="b" text="text b" />
-          </Toggle.Root>
+        <div className="flex w-156 justify-center">
+          <Popover.Root>
+            <Popover.Trigger>
+              <button className="flex h-8 w-8 items-center justify-center rounded-full bg-primary-200">
+                <ShareFat />
+              </button>
+            </Popover.Trigger>
+            <Popover.Content align="center" side="bottom">
+              {/* Lista de 5 itens como children */}
+              <div className="flex flex-col gap-2">
+                <div>aqui placeholer</div>
+                {generateTestItems().map((item, index) => (
+                  <Button className="w-full gap-2 pt-2" key={index}>
+                    {item}
+                  </Button>
+                ))}
+              </div>
+            </Popover.Content>
+          </Popover.Root>
         </div>
 
         {/* ================================= TEST AREA ================================= */}

package/src/__tests__/Popover/Content.test.tsx

@@ -0,0 +1,23 @@
+import { Popover } from '@library'
+
+import { render, screen } from '@testing-library/react'
+import { clsx } from 'clsx'
+
+jest.mock('clsx', () => {
+  return {
+    clsx: jest.fn().mockImplementation(() => clsx),
+  }
+})
+
+describe('PopoverContent tests', () => {
+  it('Should render a PopoverContent element', () => {
+    render(
+      <Popover.Root>
+        <Popover.Content data-testid="element"></Popover.Content>
+      </Popover.Root>,
+    )
+    const element = screen.queryByTestId('element')
+
+    expect(element).toBeDefined()
+  })
+})

package/src/__tests__/Popover/Root.test.tsx

@@ -0,0 +1,19 @@
+import { Popover } from '@library'
+
+import { render, screen } from '@testing-library/react'
+import { clsx } from 'clsx'
+
+jest.mock('clsx', () => {
+  return {
+    clsx: jest.fn().mockImplementation(() => clsx),
+  }
+})
+
+describe('PopoverRoot tests', () => {
+  it('Should render a PopoverRoot element', () => {
+    render(<Popover.Root data-testid="element"></Popover.Root>)
+    const element = screen.queryByTestId('element')
+
+    expect(element).toBeDefined()
+  })
+})

package/src/__tests__/Popover/Trigger.test.tsx

@@ -0,0 +1,23 @@
+import { Popover } from '@library'
+
+import { render, screen } from '@testing-library/react'
+import { clsx } from 'clsx'
+
+jest.mock('clsx', () => {
+  return {
+    clsx: jest.fn().mockImplementation(() => clsx),
+  }
+})
+
+describe('PopoverTrigger tests', () => {
+  it('Should render a PopoverTrigger element', () => {
+    render(
+      <Popover.Root>
+        <Popover.Trigger data-testid="element"></Popover.Trigger>
+      </Popover.Root>,
+    )
+    const element = screen.queryByTestId('element')
+
+    expect(element).toBeDefined()
+  })
+})

package/src/library/Popover/Content.tsx

@@ -0,0 +1,40 @@
+import { cn } from '@/src/utils/class-merge.helper'
+import { Position } from '@types'
+
+import * as RadixPopover from '@radix-ui/react-popover'
+import { FC } from 'react'
+
+export interface PopoverContentProps extends RadixPopover.PopoverContentProps {
+  className?: string
+  align?: 'start' | 'end' | 'center'
+  side?: Position
+}
+
+const PopoverContent: FC<PopoverContentProps> = ({
+  children,
+  className,
+  align,
+  side,
+  ...rest
+}) => {
+  return (
+    <RadixPopover.Portal>
+      <RadixPopover.Content
+        align={align}
+        side={side}
+        className={cn(
+          'z-100 rounded-lg border-none bg-primary-200 p-3',
+          className,
+        )}
+        sideOffset={5}
+        {...rest}
+      >
+        <div className="bg-background-200">{children}</div>
+      </RadixPopover.Content>
+    </RadixPopover.Portal>
+  )
+}
+
+PopoverContent.displayName = 'Popover.Content'
+
+export default PopoverContent

package/src/library/Popover/Root.tsx

@@ -0,0 +1,12 @@
+import * as RadixPopover from '@radix-ui/react-popover'
+import { FC } from 'react'
+
+export interface PopoverRootProps extends RadixPopover.PopoverProps {}
+
+const PopoverRoot: FC<PopoverRootProps> = ({ children, ...rest }) => {
+  return <RadixPopover.Root {...rest}>{children}</RadixPopover.Root>
+}
+
+PopoverRoot.displayName = 'Popover.Root'
+
+export default PopoverRoot

package/src/library/Popover/Trigger.tsx

@@ -0,0 +1,16 @@
+import * as RadixPopover from '@radix-ui/react-popover'
+import { FC } from 'react'
+
+export interface PopoverTriggerProps extends RadixPopover.PopoverTriggerProps {}
+
+const PopoverTrigger: FC<PopoverTriggerProps> = ({ children, ...rest }) => {
+  return (
+    <RadixPopover.Trigger asChild {...rest}>
+      {children}
+    </RadixPopover.Trigger>
+  )
+}
+
+PopoverTrigger.displayName = 'Popover.Trigger'
+
+export default PopoverTrigger