ADS3-Design-System/src/components/atoms/Tooltip/Tooltip.stories.tsx

import type { Meta, StoryObj } from '@storybook/react-vite'
import { Info, HelpCircle, Trash2, Copy } from 'lucide-react'
import { Tooltip } from './Tooltip'
import { Button } from '@/components/atoms/Button'
import { IconButton } from '@/components/atoms/IconButton'

const meta: Meta<typeof Tooltip> = {
  title: 'Atoms/Tooltip',
  component: Tooltip,
  tags: ['autodocs'],
  argTypes: {
    placement: {
      control: 'select',
      options: ['top', 'right', 'bottom', 'left'],
    },
  },
  decorators: [
    (Story) => (
      <div className="flex min-h-40 items-center justify-center p-16">
        <Story />
      </div>
    ),
  ],
}

export default meta
type Story = StoryObj<typeof meta>

export const Default: Story = {
  render: () => (
    <Tooltip content="This is a tooltip">
      <Button>Hover me</Button>
    </Tooltip>
  ),
}

// --- Placements ---

export const Top: Story = {
  render: () => (
    <Tooltip content="Placed on top" placement="top">
      <Button variant="secondary">Top</Button>
    </Tooltip>
  ),
}

export const Right: Story = {
  render: () => (
    <Tooltip content="Placed on the right" placement="right">
      <Button variant="secondary">Right</Button>
    </Tooltip>
  ),
}

export const Bottom: Story = {
  render: () => (
    <Tooltip content="Placed on the bottom" placement="bottom">
      <Button variant="secondary">Bottom</Button>
    </Tooltip>
  ),
}

export const Left: Story = {
  render: () => (
    <Tooltip content="Placed on the left" placement="left">
      <Button variant="secondary">Left</Button>
    </Tooltip>
  ),
}

// --- With icon buttons ---

export const OnIconButtons: Story = {
  render: () => (
    <div className="flex items-center gap-2">
      <Tooltip content="More information">
        <IconButton variant="tertiary" intent="neutral" icon={<Info />} aria-label="Info" />
      </Tooltip>
      <Tooltip content="Get help">
        <IconButton variant="tertiary" intent="neutral" icon={<HelpCircle />} aria-label="Help" />
      </Tooltip>
      <Tooltip content="Delete item" placement="bottom">
        <IconButton variant="tertiary" intent="danger" icon={<Trash2 />} aria-label="Delete" />
      </Tooltip>
      <Tooltip content="Copy to clipboard" placement="bottom">
        <IconButton variant="tertiary" intent="neutral" icon={<Copy />} aria-label="Copy" />
      </Tooltip>
    </div>
  ),
}

// --- Long content ---

export const LongContent: Story = {
  render: () => (
    <Tooltip content="This tooltip contains longer explanatory text that wraps across multiple lines within the max-width constraint.">
      <Button variant="secondary" intent="neutral">Hover for details</Button>
    </Tooltip>
  ),
}

// --- All placements ---

export const AllPlacements: Story = {
  decorators: [
    (Story) => (
      <div className="flex min-h-64 items-center justify-center p-24">
        <Story />
      </div>
    ),
  ],
  render: () => (
    <div className="grid grid-cols-3 gap-4">
      <div />
      <Tooltip content="Top" placement="top">
        <Button variant="secondary" intent="neutral" className="w-full">Top</Button>
      </Tooltip>
      <div />
      <Tooltip content="Left" placement="left">
        <Button variant="secondary" intent="neutral" className="w-full">Left</Button>
      </Tooltip>
      <div />
      <Tooltip content="Right" placement="right">
        <Button variant="secondary" intent="neutral" className="w-full">Right</Button>
      </Tooltip>
      <div />
      <Tooltip content="Bottom" placement="bottom">
        <Button variant="secondary" intent="neutral" className="w-full">Bottom</Button>
      </Tooltip>
      <div />
    </div>
  ),
}

// --- Instant (no delay) ---

export const NoDelay: Story = {
  render: () => (
    <Tooltip content="Appears instantly" delay={0}>
      <Button variant="secondary">No delay</Button>
    </Tooltip>
  ),
}