@neynar/ui 0.1.1

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

@@ -0,0 +1,541 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "../table";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import { Checkbox } from "../checkbox";
+import { Avatar, AvatarFallback } from "../avatar";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../dropdown-menu";
+import { MoreHorizontal } from "lucide-react";
+
+const meta = {
+  title: "Data Display/Table",
+  component: Table,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component:
+          "A responsive table component built on semantic HTML elements. Supports hover states, selection, captions, and footers. Perfect for dashboards, data management, and structured content display following shadcn/ui patterns.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    className: {
+      control: "text",
+      description: "Additional CSS classes for styling customization",
+    },
+  },
+} satisfies Meta<typeof Table>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground with all table features available for testing.
+ * This story demonstrates the full range of table capabilities including
+ * selection, actions, captions, and various cell types.
+ */
+export const Interactive: Story = {
+  render: function InteractiveTable() {
+    const [selectedRows, setSelectedRows] = React.useState<Set<string>>(
+      new Set()
+    );
+
+    const users = [
+      {
+        id: "1",
+        username: "dwr.eth",
+        displayName: "Dan Romero",
+        fid: "3",
+        followers: "45.2k",
+        following: "892",
+        joined: "Jul 2021",
+        avatar: "DR",
+        status: "active" as const,
+      },
+      {
+        id: "2",
+        username: "vitalik.eth",
+        displayName: "Vitalik Buterin",
+        fid: "5650",
+        followers: "112.3k",
+        following: "234",
+        joined: "Oct 2022",
+        avatar: "VB",
+        status: "active" as const,
+      },
+      {
+        id: "3",
+        username: "jessepollak",
+        displayName: "Jesse Pollak",
+        fid: "420",
+        followers: "32.1k",
+        following: "567",
+        joined: "Sep 2021",
+        avatar: "JP",
+        status: "inactive" as const,
+      },
+      {
+        id: "4",
+        username: "linda",
+        displayName: "Linda Xie",
+        fid: "1214",
+        followers: "28.9k",
+        following: "432",
+        joined: "Nov 2021",
+        avatar: "LX",
+        status: "active" as const,
+      },
+    ];
+
+    const toggleRow = (id: string) => {
+      const newSelected = new Set(selectedRows);
+      if (newSelected.has(id)) {
+        newSelected.delete(id);
+      } else {
+        newSelected.add(id);
+      }
+      setSelectedRows(newSelected);
+    };
+
+    const toggleAll = () => {
+      if (selectedRows.size === users.length) {
+        setSelectedRows(new Set());
+      } else {
+        setSelectedRows(new Set(users.map((u) => u.id)));
+      }
+    };
+
+    return (
+      <div className="space-y-4">
+        <Table>
+          <TableCaption>
+            Farcaster user directory - {users.length} users shown
+          </TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[50px]">
+                <Checkbox
+                  checked={selectedRows.size === users.length}
+                  onCheckedChange={toggleAll}
+                  aria-label="Select all users"
+                />
+              </TableHead>
+              <TableHead>User</TableHead>
+              <TableHead>FID</TableHead>
+              <TableHead>Network</TableHead>
+              <TableHead>Joined</TableHead>
+              <TableHead>Status</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {users.map((user) => (
+              <TableRow
+                key={user.id}
+                data-state={selectedRows.has(user.id) ? "selected" : undefined}
+              >
+                <TableCell>
+                  <Checkbox
+                    checked={selectedRows.has(user.id)}
+                    onCheckedChange={() => toggleRow(user.id)}
+                    aria-label={`Select ${user.displayName}`}
+                  />
+                </TableCell>
+                <TableCell>
+                  <div className="flex items-center gap-3">
+                    <Avatar className="h-8 w-8">
+                      <AvatarFallback>{user.avatar}</AvatarFallback>
+                    </Avatar>
+                    <div>
+                      <div className="font-medium">{user.displayName}</div>
+                      <div className="text-sm text-muted-foreground">
+                        @{user.username}
+                      </div>
+                    </div>
+                  </div>
+                </TableCell>
+                <TableCell>{user.fid}</TableCell>
+                <TableCell>
+                  <div className="text-sm">
+                    <div>{user.followers} followers</div>
+                    <div className="text-muted-foreground">
+                      {user.following} following
+                    </div>
+                  </div>
+                </TableCell>
+                <TableCell>{user.joined}</TableCell>
+                <TableCell>
+                  <Badge
+                    variant={
+                      user.status === "active" ? "default" : "secondary"
+                    }
+                  >
+                    {user.status}
+                  </Badge>
+                </TableCell>
+                <TableCell className="text-right">
+                  <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                      <Button variant="ghost" className="h-8 w-8 p-0">
+                        <span className="sr-only">Open menu</span>
+                        <MoreHorizontal className="h-4 w-4" />
+                      </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                      <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                      <DropdownMenuItem>View profile</DropdownMenuItem>
+                      <DropdownMenuItem>Send message</DropdownMenuItem>
+                      <DropdownMenuSeparator />
+                      <DropdownMenuItem>Block user</DropdownMenuItem>
+                      <DropdownMenuItem>Report user</DropdownMenuItem>
+                    </DropdownMenuContent>
+                  </DropdownMenu>
+                </TableCell>
+              </TableRow>
+            ))}
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell colSpan={5}>Total Active Users</TableCell>
+              <TableCell>
+                <Badge variant="default">
+                  {users.filter((u) => u.status === "active").length}
+                </Badge>
+              </TableCell>
+              <TableCell className="text-right">
+                {selectedRows.size > 0 && (
+                  <Button variant="outline" size="sm">
+                    Bulk Actions ({selectedRows.size})
+                  </Button>
+                )}
+              </TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive table with all features including selection checkboxes, dropdown actions, various cell types, and footer totals. Test selection, hover states, and accessibility features.",
+      },
+    },
+  },
+};
+
+/**
+ * Showcase of different table variants and configurations.
+ * Demonstrates basic tables, tables with captions, footers, and empty states.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8">
+      {/* Basic Table */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Basic Table</h3>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>User</TableHead>
+              <TableHead>Channel</TableHead>
+              <TableHead className="text-right">Reactions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell className="font-medium">@dwr.eth</TableCell>
+              <TableCell>/farcaster</TableCell>
+              <TableCell className="text-right">1,234</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell className="font-medium">@vitalik.eth</TableCell>
+              <TableCell>/ethereum</TableCell>
+              <TableCell className="text-right">892</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Table with Caption */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Table with Caption</h3>
+        <Table>
+          <TableCaption>Recent casts from your network</TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Channel</TableHead>
+              <TableHead>Members</TableHead>
+              <TableHead>Growth</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell>/farcaster</TableCell>
+              <TableCell>5,234</TableCell>
+              <TableCell>
+                <Badge variant="default">+12%</Badge>
+              </TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>/dev</TableCell>
+              <TableCell>3,821</TableCell>
+              <TableCell>
+                <Badge variant="default">+8%</Badge>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Table with Footer */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Table with Footer</h3>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Channel</TableHead>
+              <TableHead>Members</TableHead>
+              <TableHead>Active</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell>/farcaster</TableCell>
+              <TableCell>5,234</TableCell>
+              <TableCell>1,892</TableCell>
+            </TableRow>
+            <TableRow>
+              <TableCell>/dev</TableCell>
+              <TableCell>3,821</TableCell>
+              <TableCell>1,234</TableCell>
+            </TableRow>
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell>Total</TableCell>
+              <TableCell>9,055</TableCell>
+              <TableCell>3,126</TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </div>
+
+      {/* Empty State */}
+      <div>
+        <h3 className="text-lg font-semibold mb-4">Empty State</h3>
+        <Table>
+          <TableCaption>No data available</TableCaption>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Username</TableHead>
+              <TableHead>FID</TableHead>
+              <TableHead>Status</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell colSpan={3} className="h-24 text-center">
+                No users found.
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Different table configurations showing basic tables, tables with captions for accessibility, tables with footer totals, and empty state handling.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world usage example in a dashboard context.
+ * Shows how tables integrate with other components in actual applications.
+ */
+export const InContext: Story = {
+  render: () => (
+    <div className="space-y-6">
+      {/* Dashboard Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-2xl font-bold tracking-tight">
+            Channel Analytics
+          </h2>
+          <p className="text-muted-foreground">
+            Performance metrics for your Farcaster channels
+          </p>
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm">
+            Export Data
+          </Button>
+          <Button size="sm">Refresh</Button>
+        </div>
+      </div>
+
+      {/* Analytics Table */}
+      <Table>
+        <TableCaption>
+          Channel performance over the last 30 days. Data updated hourly.
+        </TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Channel</TableHead>
+            <TableHead>Members</TableHead>
+            <TableHead>Daily Active</TableHead>
+            <TableHead>Casts/Day</TableHead>
+            <TableHead>Engagement Rate</TableHead>
+            <TableHead>Growth</TableHead>
+            <TableHead className="text-right">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell className="font-medium">
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-8 rounded-md bg-purple-500" />
+                /farcaster
+              </div>
+            </TableCell>
+            <TableCell>5,234</TableCell>
+            <TableCell>1,892</TableCell>
+            <TableCell>342</TableCell>
+            <TableCell>8.4%</TableCell>
+            <TableCell>
+              <Badge variant="default">+12%</Badge>
+            </TableCell>
+            <TableCell className="text-right">
+              <Button variant="ghost" size="sm">
+                View Details
+              </Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell className="font-medium">
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-8 rounded-md bg-blue-500" />
+                /dev
+              </div>
+            </TableCell>
+            <TableCell>3,821</TableCell>
+            <TableCell>1,234</TableCell>
+            <TableCell>256</TableCell>
+            <TableCell>7.2%</TableCell>
+            <TableCell>
+              <Badge variant="default">+8%</Badge>
+            </TableCell>
+            <TableCell className="text-right">
+              <Button variant="ghost" size="sm">
+                View Details
+              </Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell className="font-medium">
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-8 rounded-md bg-green-500" />
+                /founders
+              </div>
+            </TableCell>
+            <TableCell>2,145</TableCell>
+            <TableCell>892</TableCell>
+            <TableCell>178</TableCell>
+            <TableCell>9.1%</TableCell>
+            <TableCell>
+              <Badge variant="default">+15%</Badge>
+            </TableCell>
+            <TableCell className="text-right">
+              <Button variant="ghost" size="sm">
+                View Details
+              </Button>
+            </TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell className="font-medium">
+              <div className="flex items-center gap-2">
+                <div className="w-8 h-8 rounded-md bg-orange-500" />
+                /crypto
+              </div>
+            </TableCell>
+            <TableCell>4,567</TableCell>
+            <TableCell>2,103</TableCell>
+            <TableCell>412</TableCell>
+            <TableCell>6.8%</TableCell>
+            <TableCell>
+              <Badge variant="secondary">+2%</Badge>
+            </TableCell>
+            <TableCell className="text-right">
+              <Button variant="ghost" size="sm">
+                View Details
+              </Button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+        <TableFooter>
+          <TableRow>
+            <TableCell>Total</TableCell>
+            <TableCell>15,767</TableCell>
+            <TableCell>6,121</TableCell>
+            <TableCell>1,188</TableCell>
+            <TableCell>7.9%</TableCell>
+            <TableCell>
+              <Badge variant="default">+9.25%</Badge>
+            </TableCell>
+            <TableCell className="text-right">
+              <Button variant="outline" size="sm">
+                Export
+              </Button>
+            </TableCell>
+          </TableRow>
+        </TableFooter>
+      </Table>
+
+      {/* Table Footer Actions */}
+      <div className="flex items-center justify-between text-sm text-muted-foreground">
+        <p>Showing 4 of 12 channels</p>
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm">
+            Previous
+          </Button>
+          <Button variant="outline" size="sm">
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Real-world dashboard example showing how tables work in context with headers, actions, and pagination. Demonstrates integration with other UI components for complete data management interfaces.",
+      },
+    },
+  },
+};