@neynar/ui 0.3.1 → 0.5.0

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

@@ -1,372 +1,536 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { toast } from "sonner";
+import {
+  CopyIcon,
+  KeyIcon,
+  TrashIcon,
+  RefreshCwIcon,
+  SaveIcon,
+  CheckCircleIcon,
+  AlertTriangleIcon,
+  InfoIcon,
+  XCircleIcon,
+} from "lucide-react";
+
 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",
+  title: "Components/Feedback & Status/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.",
-      },
-    },
   },
   argTypes: {
     position: {
       control: "select",
-      options: ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"],
-      description: "Position of toasts on screen",
+      options: [
+        "top-left",
+        "top-center",
+        "top-right",
+        "bottom-left",
+        "bottom-center",
+        "bottom-right",
+      ],
+      description: "Position of the toast notifications",
+      defaultValue: "bottom-right",
+    },
+    expand: {
+      control: "boolean",
+      description: "Expand toasts by default",
+      defaultValue: false,
     },
     richColors: {
       control: "boolean",
-      description: "Enable enhanced colors for different toast types",
+      description: "Use rich colors for toast variants",
+      defaultValue: false,
     },
-    expand: {
-      control: "boolean", 
-      description: "Expand toasts by default to show full content",
+    closeButton: {
+      control: "boolean",
+      description: "Show close button on toasts",
+      defaultValue: false,
     },
     duration: {
       control: "number",
-      description: "Default duration in milliseconds before auto-dismiss",
-    },
-    gap: {
-      control: "number",
-      description: "Spacing between toasts in pixels",
+      description: "Default duration in milliseconds",
+      defaultValue: 4000,
     },
     visibleToasts: {
       control: "number",
-      description: "Maximum number of toasts visible at once",
-    },
-    closeButton: {
-      control: "boolean",
-      description: "Show close button on each toast",
+      description: "Number of toasts visible at once",
+      defaultValue: 3,
     },
   },
-  decorators: [
-    (Story) => (
-      <>
-        <Story />
-        <Toaster position="bottom-right" />
-      </>
-    ),
-  ],
-} satisfies Meta<typeof Toaster>;
+};
 
 export default meta;
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Toaster>;
 
-export const Interactive: Story = {
-  args: {
-    position: "bottom-right",
-    richColors: false,
-    expand: false,
-    duration: 4000,
-    gap: 14,
-    visibleToasts: 3,
-    closeButton: false,
+/**
+ * API Key Management - Realistic Neynar Dashboard scenario showing toast
+ * notifications for common API actions like copying keys, regenerating,
+ * saving settings, and handling errors.
+ */
+export const InContext: Story = {
+  parameters: {
+    layout: "padded",
   },
-  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>
-  ),
-};
+  render: () => {
+    function APIKeyDashboard() {
+      const handleCopyKey = () => {
+        toast.success("API key copied to clipboard", {
+          description: "You can now use this key in your application",
+          icon: <CopyIcon className="size-4" />,
+        });
+      };
 
-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>
+      const handleRegenerateKey = () => {
+        const toastId = toast.loading("Regenerating API key...", {
+          description: "This may take a few seconds",
+        });
 
-      <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>
+        setTimeout(() => {
+          toast.success("API key regenerated successfully", {
+            id: toastId,
+            description: "Your old key has been invalidated",
+            icon: <RefreshCwIcon className="size-4" />,
+          });
+        }, 2000);
+      };
 
-      <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>
+      const handleRevokeKey = () => {
+        toast.error("Failed to revoke API key", {
+          description: "You cannot revoke your only production key",
+          icon: <XCircleIcon className="size-4" />,
+        });
+      };
+
+      const handleSaveSettings = () => {
+        const toastId = toast.loading("Saving settings...", {
+          description: "Updating your preferences",
+        });
+
+        setTimeout(() => {
+          toast.success("Settings saved successfully", {
+            id: toastId,
+            description: "Your changes have been applied",
+            icon: <SaveIcon className="size-4" />,
+          });
+        }, 1500);
+      };
+
+      const handleWarning = () => {
+        toast.warning("Rate limit approaching", {
+          description: "You've used 85% of your monthly quota",
+          icon: <AlertTriangleIcon className="size-4" />,
+        });
+      };
+
+      const handleInfo = () => {
+        toast.info("New API version available", {
+          description: "v2.0 includes improved performance and new endpoints",
+          icon: <InfoIcon className="size-4" />,
+        });
+      };
+
+      const handleCustomAction = () => {
+        toast.success("API key copied!", {
+          action: {
+            label: "View Docs",
+            onClick: () => console.log("Opening docs..."),
+          },
+        });
+      };
+
+      const handlePromise = () => {
+        const promise = new Promise((resolve) => {
+          setTimeout(() => resolve({ name: "Production Key" }), 2000);
+        });
+
+        toast.promise(promise, {
+          loading: "Creating API key...",
+          success: "API key created successfully",
+          error: "Failed to create API key",
+        });
+      };
+
+      return (
+        <div className="w-full max-w-2xl space-y-6">
+          <Toaster />
+
+          <div>
+            <h2 className="text-lg font-semibold">API Key Management</h2>
+            <p className="text-muted-foreground text-sm">
+              Test different toast notification types for common dashboard
+              actions.
+            </p>
+          </div>
+
+          <div className="border-border bg-card rounded-lg border p-6 space-y-6">
+            <section className="space-y-3">
+              <h3 className="text-sm font-medium">Common Actions</h3>
+              <div className="flex flex-wrap gap-2">
+                <Button variant="outline" size="sm" onClick={handleCopyKey}>
+                  <CopyIcon data-icon="inline-start" />
+                  Copy Key
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleRegenerateKey}
+                >
+                  <RefreshCwIcon data-icon="inline-start" />
+                  Regenerate
+                </Button>
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  onClick={handleRevokeKey}
+                >
+                  <TrashIcon data-icon="inline-start" />
+                  Revoke
+                </Button>
+                <Button size="sm" onClick={handleSaveSettings}>
+                  <SaveIcon data-icon="inline-start" />
+                  Save Settings
+                </Button>
+              </div>
+            </section>
+
+            <section className="space-y-3 border-t pt-4">
+              <h3 className="text-sm font-medium">Toast Types</h3>
+              <div className="flex flex-wrap gap-2">
+                <Button variant="outline" size="sm" onClick={handleInfo}>
+                  <InfoIcon data-icon="inline-start" />
+                  Info
+                </Button>
+                <Button variant="outline" size="sm" onClick={handleWarning}>
+                  <AlertTriangleIcon data-icon="inline-start" />
+                  Warning
+                </Button>
+              </div>
+            </section>
+
+            <section className="space-y-3 border-t pt-4">
+              <h3 className="text-sm font-medium">Advanced</h3>
+              <div className="flex flex-wrap gap-2">
+                <Button
+                  variant="secondary"
+                  size="sm"
+                  onClick={handleCustomAction}
+                >
+                  <CheckCircleIcon data-icon="inline-start" />
+                  With Action
+                </Button>
+                <Button variant="secondary" size="sm" onClick={handlePromise}>
+                  <KeyIcon data-icon="inline-start" />
+                  Promise Toast
+                </Button>
+              </div>
+            </section>
+          </div>
         </div>
-      </div>
-    </div>
-  ),
+      );
+    }
+
+    return <APIKeyDashboard />;
+  },
 };
 
-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>
+/**
+ * Complete design system reference showing all toast variants and patterns.
+ */
+export const Variants: Story = {
+  parameters: {
+    layout: "padded",
+  },
+  render: () => {
+    const showBasicToast = () => {
+      toast("Basic notification", {
+        description: "This is a basic toast without any variant",
+      });
+    };
+
+    const showSuccessToast = () => {
+      toast.success("Operation successful", {
+        description: "Your changes have been saved successfully",
+      });
+    };
+
+    const showErrorToast = () => {
+      toast.error("Operation failed", {
+        description: "An error occurred while processing your request",
+      });
+    };
+
+    const showWarningToast = () => {
+      toast.warning("Warning message", {
+        description: "Please review this action before proceeding",
+      });
+    };
+
+    const showInfoToast = () => {
+      toast.info("Information", {
+        description: "Here's some helpful information for you",
+      });
+    };
+
+    const showLoadingToast = () => {
+      toast.loading("Loading...", {
+        description: "Please wait while we process your request",
+      });
+    };
+
+    const showWithAction = () => {
+      toast.success("File uploaded", {
+        description: "Your file has been uploaded successfully",
+        action: {
+          label: "View",
+          onClick: () => console.log("View clicked"),
+        },
+      });
+    };
+
+    const showWithCancel = () => {
+      toast("Meeting scheduled", {
+        description: "Your meeting has been scheduled for tomorrow at 3 PM",
+        cancel: {
+          label: "Cancel",
+          onClick: () => console.log("Cancelled"),
+        },
+      });
+    };
+
+    const showWithBothActions = () => {
+      toast.success("Changes saved", {
+        description: "Do you want to publish these changes now?",
+        action: {
+          label: "Publish",
+          onClick: () => console.log("Publish clicked"),
+        },
+        cancel: {
+          label: "Later",
+          onClick: () => console.log("Later clicked"),
+        },
+      });
+    };
+
+    const showPromiseExample = () => {
+      const promise = new Promise((resolve, reject) => {
+        setTimeout(() => {
+          if (Math.random() > 0.5) {
+            resolve({ name: "Success" });
+          } else {
+            reject("Error");
+          }
+        }, 2000);
+      });
+
+      toast.promise(promise, {
+        loading: "Processing...",
+        success: "Completed successfully",
+        error: "Failed to complete",
+      });
+    };
+
+    const showCustomDuration = () => {
+      toast.success("This toast stays for 10 seconds", {
+        duration: 10000,
+      });
+    };
+
+    const showPersistent = () => {
+      toast.info("This toast stays until dismissed", {
+        duration: Infinity,
+      });
+    };
+
+    return (
+      <div className="w-full max-w-4xl space-y-10">
+        <Toaster />
+
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Toast Types</h3>
+            <p className="text-muted-foreground text-sm">
+              All available toast variants with their default icons.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button variant="outline" onClick={showBasicToast}>
+              Basic
+            </Button>
+            <Button variant="outline" onClick={showSuccessToast}>
+              Success
+            </Button>
+            <Button variant="outline" onClick={showErrorToast}>
+              Error
+            </Button>
+            <Button variant="outline" onClick={showWarningToast}>
+              Warning
+            </Button>
+            <Button variant="outline" onClick={showInfoToast}>
+              Info
+            </Button>
+            <Button variant="outline" onClick={showLoadingToast}>
+              Loading
+            </Button>
+          </div>
+        </section>
+
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">With Actions</h3>
+            <p className="text-muted-foreground text-sm">
+              Toasts can include action buttons for quick interactions.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button variant="secondary" onClick={showWithAction}>
+              With Action
+            </Button>
+            <Button variant="secondary" onClick={showWithCancel}>
+              With Cancel
+            </Button>
+            <Button variant="secondary" onClick={showWithBothActions}>
+              Both Actions
+            </Button>
+          </div>
+        </section>
+
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Advanced Patterns</h3>
+            <p className="text-muted-foreground text-sm">
+              Promise handling and custom duration configurations.
+            </p>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            <Button variant="secondary" onClick={showPromiseExample}>
+              Promise Toast
+            </Button>
+            <Button variant="secondary" onClick={showCustomDuration}>
+              Custom Duration (10s)
+            </Button>
+            <Button variant="secondary" onClick={showPersistent}>
+              Persistent Toast
+            </Button>
+          </div>
+        </section>
+
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Position Options</h3>
+            <p className="text-muted-foreground text-sm">
+              Toasts can be positioned in different corners of the screen.
+            </p>
+          </div>
+          <div className="grid grid-cols-3 gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                toast.success("Top Left", { position: "top-left" });
+              }}
+            >
+              Top Left
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                toast.success("Top Center", { position: "top-center" });
+              }}
+            >
+              Top Center
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                toast.success("Top Right", { position: "top-right" });
+              }}
+            >
+              Top Right
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                toast.success("Bottom Left", { position: "bottom-left" });
+              }}
+            >
+              Bottom Left
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                toast.success("Bottom Center", { position: "bottom-center" });
+              }}
+            >
+              Bottom Center
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                toast.success("Bottom Right", { position: "bottom-right" });
+              }}
+            >
+              Bottom Right
+            </Button>
+          </div>
+        </section>
+
+        <section className="space-y-4">
+          <div>
+            <h3 className="text-lg font-semibold">Stacking Behavior</h3>
+            <p className="text-muted-foreground text-sm">
+              Multiple toasts stack automatically and can be dismissed
+              individually.
+            </p>
+          </div>
           <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"
-              });
+              toast.success("First notification");
+              setTimeout(() => toast.info("Second notification"), 200);
+              setTimeout(() => toast.warning("Third notification"), 400);
+              setTimeout(() => toast.error("Fourth notification"), 600);
             }}
           >
-            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
+            Show Multiple Toasts
           </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>
+        </section>
+      </div>
+    );
+  },
+};
+
+/**
+ * Interactive playground for testing Toaster configuration.
+ */
+export const Interactive: Story = {
+  args: {
+    position: "bottom-right",
+    expand: false,
+    richColors: false,
+    closeButton: false,
+    duration: 4000,
+    visibleToasts: 3,
+  },
+  render: (args) => (
+    <div className="space-y-4">
+      <Toaster {...args} />
+      <Button
+        onClick={() =>
+          toast.success("Interactive toast", {
+            description: "Configure the Toaster using the controls panel",
+          })
+        }
+      >
+        Show Toast
+      </Button>
+    </div>
   ),
-};
+};