@neynar/ui 0.1.1

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

@@ -0,0 +1,373 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { toast } from "sonner";
+import { Toaster } from "../sonner";
+import { Button } from "../button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../card";
+
+const meta: Meta<typeof Toaster> = {
+  title: "Data Display/Sonner",
+  component: Toaster,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "An opinionated toast component for React built on Sonner. Provides beautiful, accessible notifications with minimal setup and automatic theme integration.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    position: {
+      control: "select",
+      options: ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"],
+      description: "Position of toasts on screen",
+    },
+    richColors: {
+      control: "boolean",
+      description: "Enable enhanced colors for different toast types",
+    },
+    expand: {
+      control: "boolean", 
+      description: "Expand toasts by default to show full content",
+    },
+    duration: {
+      control: "number",
+      description: "Default duration in milliseconds before auto-dismiss",
+    },
+    gap: {
+      control: "number",
+      description: "Spacing between toasts in pixels",
+    },
+    visibleToasts: {
+      control: "number",
+      description: "Maximum number of toasts visible at once",
+    },
+    closeButton: {
+      control: "boolean",
+      description: "Show close button on each toast",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <>
+        <Story />
+        <Toaster position="bottom-right" />
+      </>
+    ),
+  ],
+} satisfies Meta<typeof Toaster>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Interactive: Story = {
+  args: {
+    position: "bottom-right",
+    richColors: false,
+    expand: false,
+    duration: 4000,
+    gap: 14,
+    visibleToasts: 3,
+    closeButton: false,
+  },
+  render: (args) => (
+    <div className="space-y-4">
+      <Toaster {...args} />
+      <div className="grid grid-cols-2 gap-4">
+        <Button onClick={() => toast("Basic notification")}>
+          Basic Toast
+        </Button>
+        <Button 
+          variant="outline"
+          onClick={() => toast.success("Operation completed successfully")}
+        >
+          Success Toast
+        </Button>
+        <Button 
+          variant="outline"
+          onClick={() => toast.error("Something went wrong")}
+        >
+          Error Toast
+        </Button>
+        <Button 
+          variant="outline"
+          onClick={() => toast("Event created", {
+            description: "Your event has been scheduled",
+            action: {
+              label: "View",
+              onClick: () => console.log("View event")
+            }
+          })}
+        >
+          With Action
+        </Button>
+        <Button 
+          variant="outline"
+          onClick={() => {
+            const promise = new Promise((resolve) => setTimeout(resolve, 2000));
+            toast.promise(promise, {
+              loading: "Processing...",
+              success: "Complete!",
+              error: "Failed to process"
+            });
+          }}
+        >
+          Promise Toast
+        </Button>
+        <Button 
+          variant="outline"
+          onClick={() => toast.dismiss()}
+        >
+          Dismiss All
+        </Button>
+      </div>
+    </div>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Toast Types</h3>
+        <div className="grid grid-cols-3 gap-3">
+          <Button 
+            size="sm"
+            onClick={() => toast("Default notification")}
+          >
+            Default
+          </Button>
+          <Button 
+            size="sm"
+            variant="outline"
+            onClick={() => toast.success("Success message")}
+          >
+            Success
+          </Button>
+          <Button 
+            size="sm"
+            variant="outline"
+            onClick={() => toast.error("Error message")}
+          >
+            Error
+          </Button>
+          <Button 
+            size="sm"
+            variant="outline"
+            onClick={() => toast.warning("Warning message")}
+          >
+            Warning
+          </Button>
+          <Button 
+            size="sm"
+            variant="outline"
+            onClick={() => toast.info("Info message")}
+          >
+            Info
+          </Button>
+          <Button 
+            size="sm"
+            variant="outline"
+            onClick={() => toast.loading("Loading...")}
+          >
+            Loading
+          </Button>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Positions</h3>
+        <div className="grid grid-cols-3 gap-3">
+          <Button 
+            size="sm"
+            variant="secondary"
+            onClick={() => toast.success("Top Left", { position: "top-left" })}
+          >
+            Top Left
+          </Button>
+          <Button 
+            size="sm"
+            variant="secondary"
+            onClick={() => toast.success("Top Center", { position: "top-center" })}
+          >
+            Top Center
+          </Button>
+          <Button 
+            size="sm"
+            variant="secondary"
+            onClick={() => toast.success("Top Right", { position: "top-right" })}
+          >
+            Top Right
+          </Button>
+          <Button 
+            size="sm"
+            variant="secondary"
+            onClick={() => toast.success("Bottom Left", { position: "bottom-left" })}
+          >
+            Bottom Left
+          </Button>
+          <Button 
+            size="sm"
+            variant="secondary"
+            onClick={() => toast.success("Bottom Center", { position: "bottom-center" })}
+          >
+            Bottom Center
+          </Button>
+          <Button 
+            size="sm"
+            variant="secondary"
+            onClick={() => toast.success("Bottom Right", { position: "bottom-right" })}
+          >
+            Bottom Right
+          </Button>
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-3 text-lg font-semibold">Durations</h3>
+        <div className="flex gap-3">
+          <Button 
+            size="sm"
+            variant="ghost"
+            onClick={() => toast("Quick (1s)", { duration: 1000 })}
+          >
+            Quick (1s)
+          </Button>
+          <Button 
+            size="sm"
+            variant="ghost"
+            onClick={() => toast("Standard (4s)", { duration: 4000 })}
+          >
+            Standard (4s)
+          </Button>
+          <Button 
+            size="sm"
+            variant="ghost"
+            onClick={() => toast("Long (8s)", { duration: 8000 })}
+          >
+            Long (8s)
+          </Button>
+          <Button 
+            size="sm"
+            variant="ghost"
+            onClick={() => toast("Persistent", { duration: Infinity })}
+          >
+            Persistent
+          </Button>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const InContext: Story = {
+  render: () => (
+    <Card className="w-[500px]">
+      <CardHeader>
+        <CardTitle>Farcaster Dashboard</CardTitle>
+        <CardDescription>
+          Manage your Farcaster presence and interactions
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid grid-cols-2 gap-3">
+          <Button
+            onClick={() => 
+              toast.success("Cast published", {
+                description: "Your cast has been published to /farcaster",
+                action: {
+                  label: "View Cast",
+                  onClick: () => console.log("Opening cast...")
+                }
+              })
+            }
+          >
+            Publish Cast
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => 
+              toast("New follower: @vitalik.eth", {
+                description: "They followed you 2 minutes ago",
+                action: {
+                  label: "Follow Back",
+                  onClick: () => toast.success("Followed @vitalik.eth")
+                }
+              })
+            }
+          >
+            Follow Notification
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => {
+              const mintPromise = new Promise((resolve) => setTimeout(resolve, 3000));
+              toast.promise(mintPromise, {
+                loading: "Minting Frame NFT...",
+                success: "NFT minted successfully! View on OpenSea",
+                error: "Failed to mint NFT"
+              });
+            }}
+          >
+            Mint Frame NFT
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => 
+              toast.warning("API rate limit approaching", {
+                description: "85% of your hourly limit used",
+                action: {
+                  label: "Upgrade Plan",
+                  onClick: () => console.log("Opening billing...")
+                }
+              })
+            }
+          >
+            Rate Limit Warning
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => 
+              toast("Cast deleted", {
+                description: "Your cast has been removed from the feed",
+                action: {
+                  label: "Undo",
+                  onClick: () => toast.success("Cast restored")
+                }
+              })
+            }
+          >
+            Delete Cast
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => 
+              toast.info("Frame analytics ready", {
+                description: "View engagement data for your latest Frame",
+                action: {
+                  label: "View Analytics",
+                  onClick: () => console.log("Opening analytics...")
+                }
+              })
+            }
+          >
+            Analytics Update
+          </Button>
+        </div>
+        
+        <div className="border-t pt-4">
+          <Button
+            variant="ghost"
+            size="sm"
+            className="w-full"
+            onClick={() => toast.dismiss()}
+          >
+            Clear All Notifications
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  ),
+};

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

@@ -0,0 +1,222 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Stack } from "../stack";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../card";
+import { Button } from "../button";
+import { Badge } from "../badge";
+import { Avatar, AvatarFallback, AvatarImage } from "../avatar";
+import { Input } from "../input";
+
+const meta = {
+  title: "Layout and Structure/Stack",
+  component: Stack,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A layout component that arranges children with consistent spacing. Useful for creating vertical or horizontal layouts with predefined spacing values.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    spacing: {
+      control: { type: "select" },
+      options: [1, 2, 3, 4, 6, 8, 12],
+      description: "The spacing between children",
+    },
+    direction: {
+      control: { type: "radio" },
+      options: ["vertical", "horizontal"],
+      description: "The direction of the stack",
+    },
+  },
+} satisfies Meta<typeof Stack>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Interactive: Story = {
+  args: {
+    spacing: 4,
+    direction: "vertical",
+    className: "w-[300px]",
+  },
+  render: (args) => (
+    <Stack {...args}>
+      <Card>
+        <CardHeader>
+          <CardTitle>First Card</CardTitle>
+          <CardDescription>This is the first card in the stack</CardDescription>
+        </CardHeader>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Second Card</CardTitle>
+          <CardDescription>This is the second card in the stack</CardDescription>
+        </CardHeader>
+      </Card>
+      <Card>
+        <CardHeader>
+          <CardTitle>Third Card</CardTitle>
+          <CardDescription>This is the third card in the stack</CardDescription>
+        </CardHeader>
+      </Card>
+    </Stack>
+  ),
+};
+
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Direction Variants */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Direction Variants</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          <div>
+            <p className="text-sm font-medium mb-3">Vertical (Default)</p>
+            <Stack spacing={3}>
+              <Button>First Button</Button>
+              <Button variant="outline">Second Button</Button>
+              <Button variant="ghost">Third Button</Button>
+            </Stack>
+          </div>
+          <div>
+            <p className="text-sm font-medium mb-3">Horizontal</p>
+            <Stack direction="horizontal" spacing={3}>
+              <Button>First</Button>
+              <Button variant="outline">Second</Button>
+              <Button variant="ghost">Third</Button>
+            </Stack>
+          </div>
+        </div>
+      </div>
+
+      {/* Spacing Variants */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Spacing Variants</h3>
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+          {[1, 2, 4, 8].map((spacing) => (
+            <div key={spacing}>
+              <p className="text-sm font-medium mb-2">Spacing {spacing}</p>
+              <Stack spacing={spacing as 1 | 2 | 4 | 8}>
+                <Badge>Item 1</Badge>
+                <Badge variant="outline">Item 2</Badge>
+                <Badge variant="secondary">Item 3</Badge>
+              </Stack>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Combined Variants */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Combined Usage</h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div>
+            <p className="text-sm font-medium mb-2">Vertical + Large Spacing</p>
+            <Stack spacing={6} className="p-4 border rounded-lg">
+              <Input placeholder="Email" />
+              <Input placeholder="Password" />
+              <Button>Sign In</Button>
+            </Stack>
+          </div>
+          <div>
+            <p className="text-sm font-medium mb-2">Horizontal + Tight Spacing</p>
+            <Stack direction="horizontal" spacing={1} className="p-4 border rounded-lg">
+              <Button size="sm">❤️</Button>
+              <Button size="sm" variant="outline">🔄</Button>
+              <Button size="sm" variant="outline">💬</Button>
+              <Button size="sm" variant="outline">📤</Button>
+            </Stack>
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+};
+
+export const InContext: Story = {
+  render: () => (
+    <div className="max-w-md mx-auto">
+      {/* User Profile Card - Real-world usage example */}
+      <Card>
+        <CardHeader>
+          <Stack spacing={4}>
+            {/* Header with avatar and info */}
+            <Stack direction="horizontal" spacing={4} className="items-center">
+              <Avatar className="h-16 w-16">
+                <AvatarImage src="https://github.com/shadcn.png" />
+                <AvatarFallback>DW</AvatarFallback>
+              </Avatar>
+              <Stack spacing={1}>
+                <h3 className="font-semibold text-lg">Dan Williams</h3>
+                <p className="text-sm text-muted-foreground">@dwr.eth</p>
+                <Stack direction="horizontal" spacing={2}>
+                  <Badge variant="secondary">Verified</Badge>
+                  <Badge variant="outline">Active</Badge>
+                </Stack>
+              </Stack>
+            </Stack>
+
+            {/* Bio section */}
+            <p className="text-sm">
+              Building the future of decentralized social networks. 
+              Previously co-founded Coinbase. Passionate about crypto, 
+              developer tools, and community building.
+            </p>
+
+            {/* Stats section */}
+            <Stack direction="horizontal" spacing={6} className="justify-center">
+              <Stack spacing={1} className="items-center">
+                <p className="font-semibold text-lg">12.5k</p>
+                <p className="text-xs text-muted-foreground">Followers</p>
+              </Stack>
+              <Stack spacing={1} className="items-center">
+                <p className="font-semibold text-lg">842</p>
+                <p className="text-xs text-muted-foreground">Following</p>
+              </Stack>
+              <Stack spacing={1} className="items-center">
+                <p className="font-semibold text-lg">1.2k</p>
+                <p className="text-xs text-muted-foreground">Casts</p>
+              </Stack>
+            </Stack>
+
+            {/* Action buttons */}
+            <Stack direction="horizontal" spacing={3}>
+              <Button className="flex-1">Follow</Button>
+              <Button variant="outline" className="flex-1">Message</Button>
+              <Button variant="ghost" size="icon">⋯</Button>
+            </Stack>
+          </Stack>
+        </CardHeader>
+      </Card>
+
+      {/* Recent Activity - showing nested stacks */}
+      <Card className="mt-6">
+        <CardHeader>
+          <CardTitle>Recent Activity</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Stack spacing={4}>
+            {[
+              { action: "Published a new cast", time: "2 hours ago", content: "Just shipped a major update to Farcaster frames!" },
+              { action: "Liked a cast", time: "4 hours ago", content: "Great insights on decentralized identity" },
+              { action: "Followed 3 new users", time: "1 day ago", content: "" }
+            ].map((activity, i) => (
+              <Stack key={i} spacing={2} className="p-3 border rounded-lg">
+                <Stack direction="horizontal" spacing={2} className="items-center justify-between">
+                  <p className="text-sm font-medium">{activity.action}</p>
+                  <p className="text-xs text-muted-foreground">{activity.time}</p>
+                </Stack>
+                {activity.content && (
+                  <p className="text-sm text-muted-foreground">{activity.content}</p>
+                )}
+              </Stack>
+            ))}
+          </Stack>
+        </CardContent>
+      </Card>
+    </div>
+  ),
+};