@neynar/ui 0.2.0 → 0.3.0

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

@@ -0,0 +1,601 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import {
+  CheckCircle2,
+  ChevronRight,
+  Clock,
+  FileText,
+  Image as ImageIcon,
+  MoreVertical,
+  Star,
+  User,
+} from "lucide-react";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemFooter,
+  ItemGroup,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from "../item";
+
+const meta = {
+  title: "Layout and Structure/Item",
+  component: Item,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A flexible item component for displaying content with media, titles, descriptions, and actions. Perfect for lists, cards, and data displays.",
+      },
+    },
+  },
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["default", "outline", "muted"],
+      description: "The visual variant of the item",
+    },
+    size: {
+      control: { type: "select" },
+      options: ["default", "sm"],
+      description: "The size of the item",
+    },
+    asChild: {
+      control: { type: "boolean" },
+      description: "Render as a child component (e.g., for links)",
+    },
+    className: {
+      control: { type: "text" },
+      description: "Additional CSS classes to apply",
+    },
+  },
+  args: {
+    variant: "default",
+    size: "default",
+  },
+} satisfies Meta<typeof Item>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground with all item properties.
+ */
+export const Interactive: Story = {
+  render: (args) => (
+    <div className="w-96">
+      <Item {...args}>
+        <ItemMedia variant="icon">
+          <FileText className="size-4" />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Document Title</ItemTitle>
+          <ItemDescription>
+            A brief description of the document content.
+          </ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button variant="ghost" size="icon">
+            <MoreVertical className="size-4" />
+          </Button>
+        </ItemActions>
+      </Item>
+    </div>
+  ),
+};
+
+/**
+ * Showcase of all available item variants and compositions.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-12 w-full max-w-2xl">
+      {/* Basic Items */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Basic Items
+        </h3>
+        <div className="space-y-2">
+          <Item>
+            <ItemContent>
+              <ItemTitle>Simple Item</ItemTitle>
+              <ItemDescription>Just title and description</ItemDescription>
+            </ItemContent>
+          </Item>
+
+          <Item variant="outline">
+            <ItemContent>
+              <ItemTitle>Outlined Item</ItemTitle>
+              <ItemDescription>With border styling</ItemDescription>
+            </ItemContent>
+          </Item>
+
+          <Item variant="muted">
+            <ItemContent>
+              <ItemTitle>Muted Item</ItemTitle>
+              <ItemDescription>With muted background</ItemDescription>
+            </ItemContent>
+          </Item>
+        </div>
+      </div>
+
+      {/* With Icon Media */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          With Icon Media
+        </h3>
+        <div className="space-y-2">
+          <Item>
+            <ItemMedia variant="icon">
+              <FileText className="size-4" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Project Documentation</ItemTitle>
+              <ItemDescription>Last updated 2 hours ago</ItemDescription>
+            </ItemContent>
+          </Item>
+
+          <Item>
+            <ItemMedia variant="icon">
+              <User className="size-4" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>User Profile</ItemTitle>
+              <ItemDescription>View and edit profile information</ItemDescription>
+            </ItemContent>
+          </Item>
+        </div>
+      </div>
+
+      {/* With Image Media */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          With Image Media
+        </h3>
+        <div className="space-y-2">
+          <Item>
+            <ItemMedia variant="image">
+              <div className="size-10 bg-gradient-to-br from-purple-400 to-pink-400 rounded-sm" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Abstract Artwork</ItemTitle>
+              <ItemDescription>Digital illustration by Artist Name</ItemDescription>
+            </ItemContent>
+          </Item>
+
+          <Item>
+            <ItemMedia variant="image">
+              <div className="size-10 bg-gradient-to-br from-blue-400 to-cyan-400 rounded-sm" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Ocean Waves</ItemTitle>
+              <ItemDescription>Photography collection</ItemDescription>
+            </ItemContent>
+          </Item>
+        </div>
+      </div>
+
+      {/* With Actions */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          With Actions
+        </h3>
+        <div className="space-y-2">
+          <Item>
+            <ItemMedia variant="icon">
+              <FileText className="size-4" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Important Document</ItemTitle>
+              <ItemDescription>Review required by tomorrow</ItemDescription>
+            </ItemContent>
+            <ItemActions>
+              <Button variant="ghost" size="sm">
+                View
+              </Button>
+              <Button variant="ghost" size="icon">
+                <MoreVertical className="size-4" />
+              </Button>
+            </ItemActions>
+          </Item>
+
+          <Item>
+            <ItemContent>
+              <ItemTitle>Task Item</ItemTitle>
+              <ItemDescription>Complete this task</ItemDescription>
+            </ItemContent>
+            <ItemActions>
+              <Button variant="ghost" size="icon">
+                <Star className="size-4" />
+              </Button>
+              <Button variant="ghost" size="icon">
+                <CheckCircle2 className="size-4" />
+              </Button>
+            </ItemActions>
+          </Item>
+        </div>
+      </div>
+
+      {/* With Header and Footer */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          With Header and Footer
+        </h3>
+        <div className="space-y-2">
+          <Item>
+            <ItemMedia variant="icon">
+              <Clock className="size-4" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemHeader>
+                <ItemTitle>Meeting Notes</ItemTitle>
+                <Badge variant="secondary">New</Badge>
+              </ItemHeader>
+              <ItemDescription>
+                Notes from the team sync meeting
+              </ItemDescription>
+              <ItemFooter>
+                <span className="text-xs text-muted-foreground">
+                  Updated 5 min ago
+                </span>
+                <span className="text-xs text-muted-foreground">3 comments</span>
+              </ItemFooter>
+            </ItemContent>
+          </Item>
+        </div>
+      </div>
+
+      {/* Small Size */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Small Size
+        </h3>
+        <div className="space-y-2">
+          <Item size="sm">
+            <ItemMedia variant="icon">
+              <FileText className="size-4" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Small Item</ItemTitle>
+              <ItemDescription>Compact layout</ItemDescription>
+            </ItemContent>
+          </Item>
+
+          <Item size="sm">
+            <ItemMedia variant="icon">
+              <User className="size-4" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Another Small Item</ItemTitle>
+            </ItemContent>
+            <ItemActions>
+              <Button variant="ghost" size="icon">
+                <ChevronRight className="size-4" />
+              </Button>
+            </ItemActions>
+          </Item>
+        </div>
+      </div>
+
+      {/* Item Group */}
+      <div className="space-y-4">
+        <h3 className="text-sm font-medium text-muted-foreground">
+          Item Group with Separators
+        </h3>
+        <ItemGroup>
+          <Item>
+            <ItemMedia variant="icon">
+              <FileText className="size-4" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>First Item</ItemTitle>
+              <ItemDescription>First item in the group</ItemDescription>
+            </ItemContent>
+          </Item>
+
+          <ItemSeparator />
+
+          <Item>
+            <ItemMedia variant="icon">
+              <ImageIcon className="size-4" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Second Item</ItemTitle>
+              <ItemDescription>Second item in the group</ItemDescription>
+            </ItemContent>
+          </Item>
+
+          <ItemSeparator />
+
+          <Item>
+            <ItemMedia variant="icon">
+              <User className="size-4" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Third Item</ItemTitle>
+              <ItemDescription>Third item in the group</ItemDescription>
+            </ItemContent>
+          </Item>
+        </ItemGroup>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Complete showcase of item variants, sizes, media types, and compositions.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage examples showing items in practical scenarios.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="space-y-8 w-full max-w-2xl">
+      {/* File List */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Recent Files</h3>
+        <ItemGroup>
+          <Item asChild>
+            <a href="#">
+              <ItemMedia variant="icon">
+                <FileText className="size-4" />
+              </ItemMedia>
+              <ItemContent>
+                <ItemHeader>
+                  <ItemTitle>Q4 Financial Report.pdf</ItemTitle>
+                  <Badge variant="secondary">PDF</Badge>
+                </ItemHeader>
+                <ItemDescription>Last modified today at 2:45 PM</ItemDescription>
+                <ItemFooter>
+                  <span className="text-xs text-muted-foreground">2.4 MB</span>
+                  <span className="text-xs text-muted-foreground">
+                    Shared with 5 people
+                  </span>
+                </ItemFooter>
+              </ItemContent>
+              <ItemActions>
+                <Button variant="ghost" size="icon">
+                  <MoreVertical className="size-4" />
+                </Button>
+              </ItemActions>
+            </a>
+          </Item>
+
+          <ItemSeparator />
+
+          <Item asChild>
+            <a href="#">
+              <ItemMedia variant="icon">
+                <FileText className="size-4" />
+              </ItemMedia>
+              <ItemContent>
+                <ItemTitle>Team Meeting Notes.docx</ItemTitle>
+                <ItemDescription>Last modified yesterday</ItemDescription>
+              </ItemContent>
+              <ItemActions>
+                <Button variant="ghost" size="icon">
+                  <Star className="size-4" />
+                </Button>
+                <Button variant="ghost" size="icon">
+                  <MoreVertical className="size-4" />
+                </Button>
+              </ItemActions>
+            </a>
+          </Item>
+
+          <ItemSeparator />
+
+          <Item asChild>
+            <a href="#">
+              <ItemMedia variant="icon">
+                <ImageIcon className="size-4" />
+              </ItemMedia>
+              <ItemContent>
+                <ItemTitle>Product Mockup.fig</ItemTitle>
+                <ItemDescription>Last modified 3 days ago</ItemDescription>
+              </ItemContent>
+              <ItemActions>
+                <Button variant="ghost" size="icon">
+                  <MoreVertical className="size-4" />
+                </Button>
+              </ItemActions>
+            </a>
+          </Item>
+        </ItemGroup>
+      </div>
+
+      {/* Notification List */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Notifications</h3>
+        <ItemGroup>
+          <Item variant="muted">
+            <ItemMedia variant="icon">
+              <User className="size-4" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemHeader>
+                <ItemTitle>New follower</ItemTitle>
+                <Badge>New</Badge>
+              </ItemHeader>
+              <ItemDescription>
+                John Doe started following you
+              </ItemDescription>
+              <ItemFooter>
+                <span className="text-xs text-muted-foreground">5 min ago</span>
+              </ItemFooter>
+            </ItemContent>
+          </Item>
+
+          <ItemSeparator />
+
+          <Item>
+            <ItemMedia variant="icon">
+              <CheckCircle2 className="size-4" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Task completed</ItemTitle>
+              <ItemDescription>
+                "Update documentation" was marked as complete
+              </ItemDescription>
+              <ItemFooter>
+                <span className="text-xs text-muted-foreground">2 hours ago</span>
+              </ItemFooter>
+            </ItemContent>
+          </Item>
+
+          <ItemSeparator />
+
+          <Item>
+            <ItemMedia variant="icon">
+              <Clock className="size-4" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Meeting reminder</ItemTitle>
+              <ItemDescription>
+                Team sync meeting in 30 minutes
+              </ItemDescription>
+              <ItemFooter>
+                <span className="text-xs text-muted-foreground">
+                  Today at 3:30 PM
+                </span>
+              </ItemFooter>
+            </ItemContent>
+          </Item>
+        </ItemGroup>
+      </div>
+
+      {/* User List */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Team Members</h3>
+        <ItemGroup>
+          <Item>
+            <ItemMedia variant="image">
+              <div className="size-10 bg-gradient-to-br from-purple-400 to-pink-400 rounded-full" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Alice Johnson</ItemTitle>
+              <ItemDescription>Product Manager</ItemDescription>
+            </ItemContent>
+            <ItemActions>
+              <Button variant="outline" size="sm">
+                Message
+              </Button>
+            </ItemActions>
+          </Item>
+
+          <ItemSeparator />
+
+          <Item>
+            <ItemMedia variant="image">
+              <div className="size-10 bg-gradient-to-br from-blue-400 to-cyan-400 rounded-full" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Bob Smith</ItemTitle>
+              <ItemDescription>Lead Developer</ItemDescription>
+            </ItemContent>
+            <ItemActions>
+              <Button variant="outline" size="sm">
+                Message
+              </Button>
+            </ItemActions>
+          </Item>
+
+          <ItemSeparator />
+
+          <Item>
+            <ItemMedia variant="image">
+              <div className="size-10 bg-gradient-to-br from-green-400 to-emerald-400 rounded-full" />
+            </ItemMedia>
+            <ItemContent>
+              <ItemTitle>Carol White</ItemTitle>
+              <ItemDescription>UX Designer</ItemDescription>
+            </ItemContent>
+            <ItemActions>
+              <Button variant="outline" size="sm">
+                Message
+              </Button>
+            </ItemActions>
+          </Item>
+        </ItemGroup>
+      </div>
+
+      {/* Settings Menu */}
+      <div className="space-y-4 p-6 border rounded-lg">
+        <h3 className="text-lg font-semibold">Settings</h3>
+        <ItemGroup>
+          <Item asChild size="sm">
+            <a href="#">
+              <ItemContent>
+                <ItemTitle>Profile</ItemTitle>
+              </ItemContent>
+              <ItemActions>
+                <ChevronRight className="size-4 text-muted-foreground" />
+              </ItemActions>
+            </a>
+          </Item>
+
+          <ItemSeparator />
+
+          <Item asChild size="sm">
+            <a href="#">
+              <ItemContent>
+                <ItemTitle>Notifications</ItemTitle>
+              </ItemContent>
+              <ItemActions>
+                <ChevronRight className="size-4 text-muted-foreground" />
+              </ItemActions>
+            </a>
+          </Item>
+
+          <ItemSeparator />
+
+          <Item asChild size="sm">
+            <a href="#">
+              <ItemContent>
+                <ItemTitle>Privacy & Security</ItemTitle>
+              </ItemContent>
+              <ItemActions>
+                <ChevronRight className="size-4 text-muted-foreground" />
+              </ItemActions>
+            </a>
+          </Item>
+
+          <ItemSeparator />
+
+          <Item asChild size="sm">
+            <a href="#">
+              <ItemContent>
+                <ItemTitle>Billing</ItemTitle>
+              </ItemContent>
+              <ItemActions>
+                <ChevronRight className="size-4 text-muted-foreground" />
+              </ItemActions>
+            </a>
+          </Item>
+        </ItemGroup>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Real-world examples showing items in file lists, notifications, user lists, and settings menus.",
+      },
+    },
+  },
+};