@neynar/ui 0.1.1

package/src/components/ui/stories/tooltip.stories.tsx

@@ -0,0 +1,444 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { Info, Copy, ExternalLink, Settings, HelpCircle } from "lucide-react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
+import { Button } from "../button";
+import { Badge } from "../badge";
+import { Avatar, AvatarFallback } from "../avatar";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../card";
+
+const meta = {
+  title: "Overlays/Tooltip",
+  component: Tooltip,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A versatile tooltip component built on Radix UI primitives. Provides contextual information when users hover or focus on an element. Perfect for help text, definitions, and additional context.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    // Since Tooltip is a composition of sub-components, we'll document the key props here
+    delayDuration: {
+      control: { type: "number" },
+      description: "Time in milliseconds to wait before showing tooltip",
+      table: {
+        type: { summary: "number" },
+        defaultValue: { summary: "0" },
+      },
+    },
+  },
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Interactive: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div className="text-center space-y-4">
+        <h3 className="text-lg font-medium">Interactive Tooltip Playground</h3>
+        <p className="text-sm text-muted-foreground">
+          Test different tooltip configurations and interactions
+        </p>
+      </div>
+
+      <div className="grid grid-cols-2 gap-6">
+        {/* Basic Text Tooltip */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Basic Text</label>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="outline">Hover me</Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>This is a basic tooltip with helpful text</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+
+        {/* Icon Button */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Icon Button</label>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="icon">
+                <Info className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Information about this feature</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+
+        {/* Disabled Element */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Disabled Element</label>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span>
+                <Button disabled>Disabled Action</Button>
+              </span>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>This action is disabled. Complete setup first.</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+
+        {/* Rich Content */}
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Rich Content</label>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Badge variant="secondary" className="cursor-help">
+                API Key
+              </Badge>
+            </TooltipTrigger>
+            <TooltipContent className="max-w-[250px]">
+              <div className="space-y-1">
+                <p className="font-medium">API Authentication</p>
+                <p className="text-xs">
+                  Your key is used to authenticate all requests to the Neynar
+                  API
+                </p>
+              </div>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive playground for testing different tooltip configurations, content types, and trigger elements.",
+      },
+    },
+  },
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="text-center space-y-2">
+        <h3 className="text-lg font-medium">Tooltip Positions</h3>
+        <p className="text-sm text-muted-foreground">
+          Tooltips automatically position themselves and include collision
+          detection
+        </p>
+      </div>
+
+      {/* Positioning */}
+      <div className="grid grid-cols-3 gap-8 place-items-center min-h-[200px]">
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline">Top</Button>
+          </TooltipTrigger>
+          <TooltipContent side="top">
+            <p>Tooltip positioned on top</p>
+          </TooltipContent>
+        </Tooltip>
+
+        <div />
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline">Right</Button>
+          </TooltipTrigger>
+          <TooltipContent side="right">
+            <p>Tooltip positioned on right</p>
+          </TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline">Left</Button>
+          </TooltipTrigger>
+          <TooltipContent side="left">
+            <p>Tooltip positioned on left</p>
+          </TooltipContent>
+        </Tooltip>
+
+        <div />
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button variant="outline">Bottom</Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            <p>Tooltip positioned on bottom</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
+
+      {/* Content Variations */}
+      <div className="space-y-4">
+        <h4 className="text-md font-medium">Content Variations</h4>
+        <div className="flex flex-wrap gap-4">
+          {/* Simple text */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="sm">
+                Simple
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Simple text tooltip</p>
+            </TooltipContent>
+          </Tooltip>
+
+          {/* Long content */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="sm">
+                Long Content
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent className="max-w-[300px]">
+              <div className="space-y-2">
+                <p className="font-medium">Security Best Practices</p>
+                <ul className="text-xs space-y-1">
+                  <li>• Never share your private keys</li>
+                  <li>• Use hardware wallets for signers</li>
+                  <li>• Enable 2FA on your account</li>
+                </ul>
+              </div>
+            </TooltipContent>
+          </Tooltip>
+
+          {/* With custom offset */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="ghost" size="sm">
+                Custom Offset
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="top" sideOffset={15}>
+              <p>Tooltip with increased spacing</p>
+            </TooltipContent>
+          </Tooltip>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Comprehensive showcase of all tooltip variants including positioning, content types, and styling options.",
+      },
+    },
+  },
+};
+
+export const InContext: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-6">
+      <div className="text-center space-y-2">
+        <h3 className="text-lg font-medium">Real-world Usage Example</h3>
+        <p className="text-sm text-muted-foreground">
+          Tooltips in a typical Farcaster application dashboard
+        </p>
+      </div>
+
+      {/* Cast Analytics Card */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Cast Analytics Dashboard</CardTitle>
+          <CardDescription>
+            Performance metrics for your recent cast activity
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-6">
+            {/* Metrics Row */}
+            <div className="grid grid-cols-3 gap-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">Impressions</span>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Info className="h-3 w-3 text-muted-foreground cursor-help" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Number of times your cast was viewed</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+                <span className="text-lg font-bold">12.5k</span>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">Engagement</span>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Info className="h-3 w-3 text-muted-foreground cursor-help" />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>
+                        Percentage of viewers who interacted (like, recast,
+                        reply)
+                      </p>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+                <span className="text-lg font-bold">8.4%</span>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">Quality Score</span>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Info className="h-3 w-3 text-muted-foreground cursor-help" />
+                    </TooltipTrigger>
+                    <TooltipContent className="max-w-[250px]">
+                      <p>
+                        Based on engagement, reply quality, and community
+                        feedback. Higher scores increase visibility in feeds.
+                      </p>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+                <Badge variant="default">High</Badge>
+              </div>
+            </div>
+
+            {/* User Profile Section */}
+            <div className="border-t pt-4">
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-3">
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div className="flex items-center gap-2 cursor-pointer">
+                        <Avatar>
+                          <AvatarFallback>DW</AvatarFallback>
+                        </Avatar>
+                        <span className="font-medium">dwr.eth</span>
+                      </div>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <div className="space-y-1">
+                        <p className="font-semibold">Dan Romero</p>
+                        <p className="text-xs">FID: 3 • 45.2k followers</p>
+                        <p className="text-xs">Co-founder of Farcaster</p>
+                      </div>
+                    </TooltipContent>
+                  </Tooltip>
+
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Badge variant="secondary" className="cursor-help">
+                        Verified
+                      </Badge>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>This account is verified on Farcaster</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+
+                {/* Action buttons */}
+                <div className="flex gap-1">
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button variant="ghost" size="icon">
+                        <Copy className="h-4 w-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Copy profile link</p>
+                    </TooltipContent>
+                  </Tooltip>
+
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button variant="ghost" size="icon">
+                        <ExternalLink className="h-4 w-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Open in Warpcast</p>
+                    </TooltipContent>
+                  </Tooltip>
+
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <Button variant="ghost" size="icon">
+                        <Settings className="h-4 w-4" />
+                      </Button>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>Profile settings</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </div>
+              </div>
+            </div>
+
+            {/* API Configuration Section */}
+            <div className="border-t pt-4 space-y-3">
+              <div className="flex items-center gap-2">
+                <label className="text-sm font-medium">API Configuration</label>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <HelpCircle className="h-3 w-3 text-muted-foreground cursor-help" />
+                  </TooltipTrigger>
+                  <TooltipContent className="max-w-[300px]">
+                    <div className="space-y-2">
+                      <p className="font-medium">API Key Security</p>
+                      <p className="text-xs">
+                        Your Neynar API key is used to authenticate requests.
+                        Keep it secret and never expose it in client-side code.
+                      </p>
+                    </div>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+
+              <div className="flex gap-2">
+                <input
+                  type="password"
+                  value="neynar_XXXX...XXXX"
+                  readOnly
+                  className="flex-1 rounded-md border px-3 py-2 text-sm bg-muted"
+                />
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button size="sm" variant="outline">
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>Copy API key to clipboard</p>
+                  </TooltipContent>
+                </Tooltip>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Real-world example showing tooltips integrated into a typical Farcaster application dashboard with user profiles, metrics, and API configuration.",
+      },
+    },
+  },
+};