Tooltip System

/**
 * Higher-order tooltip wrapper component (lazy-loaded)
 * Wraps child elements to show tooltips on hover/focus
 */
const WithTooltip: React.ComponentType<{
  /** Tooltip content */
  tooltip: React.ReactNode | string;
  /** Tooltip placement */
  placement?: 'top' | 'bottom' | 'left' | 'right';
  /** Child element to attach tooltip to */
  children: React.ReactElement;
  /** Additional tooltip options */
  [key: string]: any;
}>;

/**
 * Pure tooltip wrapper component without lazy loading
 * Direct implementation of tooltip functionality
 */
const WithTooltipPure: React.ComponentType<{
  /** Tooltip content */
  tooltip: React.ReactNode | string;
  /** Tooltip placement */
  placement?: 'top' | 'bottom' | 'left' | 'right';
  /** Child element to attach tooltip to */
  children: React.ReactElement;
  /** Trigger behavior */
  trigger?: 'hover' | 'click' | 'focus';
  /** Additional tooltip options */
  [key: string]: any;
}>;

/**
 * Tooltip message component for simple text content
 */
const TooltipMessage: React.ComponentType<{
  /** Message title */
  title?: string;
  /** Message description */
  desc?: string;
  /** Message content */
  children?: React.ReactNode;
}>;

/**
 * Tooltip note component for informational content
 */
const TooltipNote: React.ComponentType<{
  /** Note content */
  note: string | React.ReactNode;
  /** Additional styling */
  [key: string]: any;
}>;

interface NormalLink {
  /** Unique identifier for the link */
  id: string;
  /** Display title for the link */
  title: string;
  /** Optional href for navigation */
  href?: string;
  /** Click handler for actions */
  onClick?: (event: SyntheticEvent, item: Pick<NormalLink, 'id' | 'active' | 'disabled' | 'title' | 'href'>) => void;
  /** Icon to display with the link */
  icon?: React.ReactNode;
  /** Active state */
  active?: boolean;
  /** Disabled state */
  disabled?: boolean;
}

interface CustomLink {
  /** Unique identifier for the link */
  id: string;
  /** Custom content to render instead of standard link */
  content: React.ReactNode;
}

type Link = NormalLink | CustomLink;

/**
 * @deprecated Use Link instead. This will be removed in Storybook 9.0
 */
type TooltipLinkListLink = Link;

interface TooltipLinkListProps {
  /** Array of links to display, can be flat array or grouped array */
  links: Link[] | Link[][];
  /** Custom link wrapper component */
  LinkWrapper?: React.ComponentType;
}

/**
 * Tooltip component that displays a list of links or actions
 * Supports both flat arrays and grouped arrays of links
 */
const TooltipLinkList: React.ComponentType<TooltipLinkListProps>;

/**
 * Individual list item component for custom tooltip lists
 * Exported as default export from the module
 */
const ListItem: React.ComponentType<{
  /** Item content */
  children: React.ReactNode;
  /** Click handler */
  onClick?: () => void;
  /** Active state */
  active?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Additional props */
  [key: string]: any;
}>;

import { WithTooltip, Button } from "@storybook/components";

// Simple text tooltip
<WithTooltip tooltip="This is a helpful tooltip">
  <Button>Hover me</Button>
</WithTooltip>

// Tooltip with placement
<WithTooltip tooltip="Top tooltip" placement="top">
  <Button>Top tooltip</Button>
</WithTooltip>

<WithTooltip tooltip="Bottom tooltip" placement="bottom">
  <Button>Bottom tooltip</Button>
</WithTooltip>

import { WithTooltipPure, IconButton } from "@storybook/components";

// Click-triggered tooltip
<WithTooltipPure 
  tooltip="Click tooltip content" 
  trigger="click"
  placement="right"
>
  <IconButton>
    Settings
  </IconButton>
</WithTooltipPure>

import { WithTooltip, TooltipMessage, Button } from "@storybook/components";

<WithTooltip
  tooltip={
    <TooltipMessage
      title="Feature Info"
      desc="This feature helps you manage your content more effectively."
    />
  }
>
  <Button>Info</Button>
</WithTooltip>

import { WithTooltip, TooltipNote, Badge } from "@storybook/components";

<WithTooltip
  tooltip={
    <TooltipNote note="This feature is currently in beta" />
  }
>
  <Badge>Beta</Badge>
</WithTooltip>

import { WithTooltip, TooltipLinkList, Button } from "@storybook/components";

const menuLinks = [
  {
    id: 'edit',
    title: 'Edit Story',
    onClick: () => console.log('Edit clicked'),
    icon: <EditIcon />
  },
  {
    id: 'duplicate',
    title: 'Duplicate Story',
    onClick: () => console.log('Duplicate clicked'),
    icon: <DuplicateIcon />
  },
  {
    id: 'delete',
    title: 'Delete Story',
    onClick: () => console.log('Delete clicked'),
    icon: <DeleteIcon />,
    disabled: true
  },
  {
    id: 'docs',
    title: 'View Documentation',
    href: 'https://storybook.js.org',
    icon: <DocsIcon />
  }
];

<WithTooltip
  tooltip={<TooltipLinkList links={menuLinks} />}
  trigger="click"
  placement="bottom"
>
  <Button>Actions Menu</Button>
</WithTooltip>

import { WithTooltip, ListItem, Button } from "@storybook/components";

<WithTooltip
  tooltip={
    <div>
      <ListItem onClick={() => console.log('Item 1')} active={true}>
        Active Item
      </ListItem>
      <ListItem onClick={() => console.log('Item 2')}>
        Regular Item
      </ListItem>
      <ListItem disabled={true}>
        Disabled Item
      </ListItem>
    </div>
  }
  trigger="click"
>
  <Button>Custom Menu</Button>
</WithTooltip>

import { 
  WithTooltip, 
  TooltipMessage, 
  TooltipLinkList, 
  Button,
  Separator 
} from "@storybook/components";

const complexTooltip = (
  <div>
    <TooltipMessage
      title="Story Actions"
      desc="Choose an action to perform on this story"
    />
    <Separator />
    <TooltipLinkList
      links={[
        { id: 'view', title: 'View Story', onClick: () => {} },
        { id: 'edit', title: 'Edit Story', onClick: () => {} },
        { id: 'share', title: 'Share Story', onClick: () => {} }
      ]}
    />
  </div>
);

<WithTooltip tooltip={complexTooltip} placement="right">
  <Button>Story Menu</Button>
</WithTooltip>