@neynar/ui 0.1.1

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

@@ -0,0 +1,544 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../tabs";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../card";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import { Avatar, AvatarFallback } from "../avatar";
+import { Input } from "../input";
+import { Label } from "../label";
+import { Switch } from "../switch";
+
+const meta = {
+  title: "Navigation & Menus/Tabs",
+  component: Tabs,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A tabbed interface component for organizing content into multiple sections. Built on Radix UI with full accessibility support and flexible styling options.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    defaultValue: {
+      control: { type: "text" },
+      description: "The default active tab (uncontrolled)",
+    },
+    value: {
+      control: { type: "text" },
+      description: "The controlled active tab value",
+    },
+    orientation: {
+      control: { type: "radio" },
+      options: ["horizontal", "vertical"],
+      description: "The orientation of the tabs",
+    },
+    onValueChange: {
+      action: "tab changed",
+      description: "Callback fired when the active tab changes",
+    },
+  },
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground with all controls available for testing different
+ * configurations and props. Use the controls panel to experiment with
+ * various combinations of props and see how they affect the component.
+ */
+export const Interactive: Story = {
+  args: {
+    defaultValue: "overview",
+    orientation: "horizontal",
+  },
+  render: ({ defaultValue, orientation, ...args }) => (
+    <Tabs
+      defaultValue={defaultValue}
+      orientation={orientation}
+      className="w-[500px]"
+      {...args}
+    >
+      <TabsList className={orientation === "vertical" ? "flex-col h-auto w-[150px]" : "grid w-full grid-cols-4"}>
+        <TabsTrigger value="overview" className={orientation === "vertical" ? "w-full justify-start" : ""}>
+          Overview
+        </TabsTrigger>
+        <TabsTrigger value="analytics" className={orientation === "vertical" ? "w-full justify-start" : ""}>
+          Analytics
+        </TabsTrigger>
+        <TabsTrigger value="reports" className={orientation === "vertical" ? "w-full justify-start" : ""}>
+          Reports
+        </TabsTrigger>
+        <TabsTrigger value="settings" className={orientation === "vertical" ? "w-full justify-start" : ""}>
+          Settings
+        </TabsTrigger>
+      </TabsList>
+
+      <div className={orientation === "vertical" ? "flex gap-4" : ""}>
+        <div className="flex-1">
+          <TabsContent value="overview">
+            <Card>
+              <CardHeader>
+                <CardTitle>Overview</CardTitle>
+                <CardDescription>
+                  Dashboard overview with key metrics and insights
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-3 gap-4">
+                  <div className="text-center">
+                    <div className="text-2xl font-bold">2.4k</div>
+                    <p className="text-sm text-muted-foreground">Total Users</p>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold">45.2%</div>
+                    <p className="text-sm text-muted-foreground">Growth Rate</p>
+                  </div>
+                  <div className="text-center">
+                    <div className="text-2xl font-bold">$12.5k</div>
+                    <p className="text-sm text-muted-foreground">Revenue</p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="analytics">
+            <Card>
+              <CardHeader>
+                <CardTitle>Analytics</CardTitle>
+                <CardDescription>
+                  Detailed analytics and performance metrics
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">
+                  Analytics charts and detailed metrics would be displayed here.
+                </p>
+                <div className="mt-4 space-y-2">
+                  <div className="flex justify-between">
+                    <span className="text-sm">Page Views</span>
+                    <span className="text-sm font-medium">12,345</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm">Unique Visitors</span>
+                    <span className="text-sm font-medium">8,901</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-sm">Bounce Rate</span>
+                    <span className="text-sm font-medium">34.2%</span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="reports">
+            <Card>
+              <CardHeader>
+                <CardTitle>Reports</CardTitle>
+                <CardDescription>
+                  Generate and download detailed reports
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground mb-4">
+                  Available reports and export options.
+                </p>
+                <div className="space-y-2">
+                  <Button variant="outline" className="w-full justify-start">
+                    Download Monthly Report
+                  </Button>
+                  <Button variant="outline" className="w-full justify-start">
+                    Export User Data
+                  </Button>
+                  <Button variant="outline" className="w-full justify-start">
+                    Analytics Summary
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+
+          <TabsContent value="settings">
+            <Card>
+              <CardHeader>
+                <CardTitle>Settings</CardTitle>
+                <CardDescription>
+                  Manage your account and preferences
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="name">Display Name</Label>
+                  <Input id="name" defaultValue="John Doe" />
+                </div>
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="notifications">Email Notifications</Label>
+                  <Switch id="notifications" defaultChecked />
+                </div>
+                <div className="flex items-center justify-between">
+                  <Label htmlFor="privacy">Public Profile</Label>
+                  <Switch id="privacy" />
+                </div>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </div>
+      </div>
+    </Tabs>
+  ),
+};
+
+/**
+ * Showcase of all available variants and styling combinations.
+ * Demonstrates horizontal vs vertical orientations, different tab layouts,
+ * and various visual configurations to help understand what's possible.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8 w-full max-w-4xl">
+      {/* Standard Horizontal Tabs */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Standard Horizontal Tabs</h3>
+        <Tabs defaultValue="tab1" className="w-[400px]">
+          <TabsList>
+            <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+            <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+            <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+          </TabsList>
+          <TabsContent value="tab1">
+            <Card>
+              <CardContent className="pt-6">
+                <p>Content for Tab 1</p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+          <TabsContent value="tab2">
+            <Card>
+              <CardContent className="pt-6">
+                <p>Content for Tab 2</p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+          <TabsContent value="tab3">
+            <Card>
+              <CardContent className="pt-6">
+                <p>Content for Tab 3</p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* Grid Layout Tabs */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Grid Layout (Equal Width)</h3>
+        <Tabs defaultValue="home" className="w-[500px]">
+          <TabsList className="grid w-full grid-cols-4">
+            <TabsTrigger value="home">Home</TabsTrigger>
+            <TabsTrigger value="explore">Explore</TabsTrigger>
+            <TabsTrigger value="notifications">Alerts</TabsTrigger>
+            <TabsTrigger value="profile">Profile</TabsTrigger>
+          </TabsList>
+          <TabsContent value="home">
+            <Card>
+              <CardContent className="pt-6">
+                <p>Home feed content</p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+          <TabsContent value="explore">
+            <Card>
+              <CardContent className="pt-6">
+                <p>Explore new content</p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+          <TabsContent value="notifications">
+            <Card>
+              <CardContent className="pt-6">
+                <p>Notification alerts</p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+          <TabsContent value="profile">
+            <Card>
+              <CardContent className="pt-6">
+                <p>Profile settings</p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* Vertical Orientation */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Vertical Orientation</h3>
+        <div className="flex gap-4 w-[600px]">
+          <Tabs defaultValue="general" orientation="vertical">
+            <TabsList className="flex-col h-auto w-[200px]">
+              <TabsTrigger value="general" className="w-full justify-start">
+                General
+              </TabsTrigger>
+              <TabsTrigger value="security" className="w-full justify-start">
+                Security
+              </TabsTrigger>
+              <TabsTrigger value="notifications" className="w-full justify-start">
+                Notifications
+              </TabsTrigger>
+              <TabsTrigger value="billing" className="w-full justify-start">
+                Billing
+              </TabsTrigger>
+            </TabsList>
+          </Tabs>
+          <div className="flex-1">
+            <Card>
+              <CardHeader>
+                <CardTitle>Settings Panel</CardTitle>
+                <CardDescription>
+                  Configure your preferences
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <p className="text-sm text-muted-foreground">
+                  Settings content would appear here based on the selected tab.
+                </p>
+              </CardContent>
+            </Card>
+          </div>
+        </div>
+      </div>
+
+      {/* Tabs with Icons */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Tabs with Icons</h3>
+        <Tabs defaultValue="dashboard" className="w-[400px]">
+          <TabsList className="grid w-full grid-cols-3">
+            <TabsTrigger value="dashboard">
+              <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+              </svg>
+              Dashboard
+            </TabsTrigger>
+            <TabsTrigger value="users">
+              <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197m13.5-9a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0z" />
+              </svg>
+              Users
+            </TabsTrigger>
+            <TabsTrigger value="settings">
+              <svg className="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+              Settings
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent value="dashboard">
+            <Card>
+              <CardContent className="pt-6">
+                <p>Dashboard overview with metrics</p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+          <TabsContent value="users">
+            <Card>
+              <CardContent className="pt-6">
+                <p>User management interface</p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+          <TabsContent value="settings">
+            <Card>
+              <CardContent className="pt-6">
+                <p>Application settings</p>
+              </CardContent>
+            </Card>
+          </TabsContent>
+        </Tabs>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * Real-world usage example showing tabs in a typical application context.
+ * This example demonstrates how tabs would be used in a user profile interface
+ * with multiple sections of content, helping designers and business teams
+ * understand practical applications.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="w-full max-w-4xl mx-auto p-6">
+      <div className="mb-6">
+        <h2 className="text-2xl font-bold mb-2">User Profile</h2>
+        <p className="text-muted-foreground">
+          Manage your profile information, view activity, and configure settings
+        </p>
+      </div>
+
+      <Tabs defaultValue="profile" className="w-full">
+        <TabsList className="grid w-full grid-cols-4">
+          <TabsTrigger value="profile">Profile</TabsTrigger>
+          <TabsTrigger value="activity">Activity</TabsTrigger>
+          <TabsTrigger value="preferences">Preferences</TabsTrigger>
+          <TabsTrigger value="security">Security</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="profile" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Profile Information</CardTitle>
+              <CardDescription>
+                Update your profile details and public information
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center gap-4">
+                <Avatar className="h-20 w-20">
+                  <AvatarFallback>JD</AvatarFallback>
+                </Avatar>
+                <div className="space-y-1">
+                  <h3 className="text-lg font-semibold">John Doe</h3>
+                  <p className="text-sm text-muted-foreground">john.doe@example.com</p>
+                  <Badge variant="secondary">Pro User</Badge>
+                </div>
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="firstName">First Name</Label>
+                  <Input id="firstName" defaultValue="John" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="lastName">Last Name</Label>
+                  <Input id="lastName" defaultValue="Doe" />
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="bio">Bio</Label>
+                <textarea
+                  id="bio"
+                  className="w-full min-h-[80px] rounded-md border p-3 text-sm"
+                  defaultValue="Product designer and developer passionate about creating intuitive user experiences."
+                />
+              </div>
+              <Button>Save Changes</Button>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="activity" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Recent Activity</CardTitle>
+              <CardDescription>
+                Your recent actions and engagement
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                {[
+                  { action: "Updated profile picture", time: "2 hours ago" },
+                  { action: "Completed onboarding", time: "1 day ago" },
+                  { action: "Joined the platform", time: "3 days ago" },
+                ].map((item, index) => (
+                  <div key={index} className="flex justify-between items-center pb-4 border-b last:border-b-0">
+                    <span className="text-sm">{item.action}</span>
+                    <span className="text-xs text-muted-foreground">{item.time}</span>
+                  </div>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="preferences" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Preferences</CardTitle>
+              <CardDescription>
+                Customize your experience and notification settings
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div>
+                <h4 className="text-sm font-medium mb-4">Notifications</h4>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="email-notif">Email notifications</Label>
+                    <Switch id="email-notif" defaultChecked />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="push-notif">Push notifications</Label>
+                    <Switch id="push-notif" />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="marketing">Marketing emails</Label>
+                    <Switch id="marketing" />
+                  </div>
+                </div>
+              </div>
+              <div>
+                <h4 className="text-sm font-medium mb-4">Privacy</h4>
+                <div className="space-y-3">
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="public-profile">Public profile</Label>
+                    <Switch id="public-profile" defaultChecked />
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <Label htmlFor="analytics">Analytics tracking</Label>
+                    <Switch id="analytics" defaultChecked />
+                  </div>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="security" className="space-y-6">
+          <Card>
+            <CardHeader>
+              <CardTitle>Security Settings</CardTitle>
+              <CardDescription>
+                Manage your account security and access
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div>
+                <h4 className="text-sm font-medium mb-4">Password</h4>
+                <div className="space-y-3">
+                  <div className="space-y-2">
+                    <Label htmlFor="current-password">Current Password</Label>
+                    <Input id="current-password" type="password" />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor="new-password">New Password</Label>
+                    <Input id="new-password" type="password" />
+                  </div>
+                  <Button variant="outline">Change Password</Button>
+                </div>
+              </div>
+              <div>
+                <h4 className="text-sm font-medium mb-4">Two-Factor Authentication</h4>
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="text-sm">Add an extra layer of security</p>
+                    <p className="text-xs text-muted-foreground">
+                      Protect your account with 2FA
+                    </p>
+                  </div>
+                  <Button variant="outline">Enable 2FA</Button>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  ),
+};