@neynar/ui 0.1.1

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

@@ -0,0 +1,604 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "../pagination";
+
+const meta = {
+  title: "Navigation & Menus/Pagination",
+  component: Pagination,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A comprehensive pagination component for navigating through large datasets. Built on shadcn/ui standards with full accessibility support and responsive design. Perfect for data tables, search results, and product listings.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Interactive playground for testing all pagination features and controls.
+ * Supports dynamic page changes, disabled states, and various configurations.
+ */
+export const Interactive: Story = {
+  render: function InteractivePagination() {
+    const [currentPage, setCurrentPage] = React.useState(5);
+    const [totalPages, setTotalPages] = React.useState(20);
+    const [showEllipsis, setShowEllipsis] = React.useState(true);
+
+    const renderPageNumbers = () => {
+      const pages = [];
+      const maxVisible = showEllipsis ? 5 : totalPages;
+      
+      if (!showEllipsis) {
+        // Show all pages when ellipsis is disabled
+        for (let i = 1; i <= totalPages; i++) {
+          pages.push(
+            <PaginationItem key={i}>
+              <PaginationLink
+                href="#"
+                isActive={i === currentPage}
+                onClick={(e) => {
+                  e.preventDefault();
+                  setCurrentPage(i);
+                }}
+              >
+                {i}
+              </PaginationLink>
+            </PaginationItem>
+          );
+        }
+        return pages;
+      }
+
+      // Smart ellipsis logic for large page ranges
+      let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+      let endPage = Math.min(totalPages, startPage + maxVisible - 1);
+
+      if (endPage - startPage < maxVisible - 1) {
+        startPage = Math.max(1, endPage - maxVisible + 1);
+      }
+
+      // Always show first page
+      if (startPage > 1) {
+        pages.push(
+          <PaginationItem key={1}>
+            <PaginationLink
+              href="#"
+              onClick={(e) => {
+                e.preventDefault();
+                setCurrentPage(1);
+              }}
+            >
+              1
+            </PaginationLink>
+          </PaginationItem>
+        );
+        if (startPage > 2) {
+          pages.push(
+            <PaginationItem key="ellipsis-start">
+              <PaginationEllipsis />
+            </PaginationItem>
+          );
+        }
+      }
+
+      // Show visible page range
+      for (let i = startPage; i <= endPage; i++) {
+        pages.push(
+          <PaginationItem key={i}>
+            <PaginationLink
+              href="#"
+              isActive={i === currentPage}
+              onClick={(e) => {
+                e.preventDefault();
+                setCurrentPage(i);
+              }}
+            >
+              {i}
+            </PaginationLink>
+          </PaginationItem>
+        );
+      }
+
+      // Always show last page
+      if (endPage < totalPages) {
+        if (endPage < totalPages - 1) {
+          pages.push(
+            <PaginationItem key="ellipsis-end">
+              <PaginationEllipsis />
+            </PaginationItem>
+          );
+        }
+        pages.push(
+          <PaginationItem key={totalPages}>
+            <PaginationLink
+              href="#"
+              onClick={(e) => {
+                e.preventDefault();
+                setCurrentPage(totalPages);
+              }}
+            >
+              {totalPages}
+            </PaginationLink>
+          </PaginationItem>
+        );
+      }
+
+      return pages;
+    };
+
+    return (
+      <div className="space-y-6 p-4">
+        {/* Controls */}
+        <div className="space-y-4 text-sm">
+          <div className="flex gap-4 items-center">
+            <label className="font-medium">Current Page:</label>
+            <input
+              type="number"
+              min="1"
+              max={totalPages}
+              value={currentPage}
+              onChange={(e) => setCurrentPage(Math.min(totalPages, Math.max(1, parseInt(e.target.value) || 1)))}
+              className="border rounded px-2 py-1 w-20"
+            />
+          </div>
+          <div className="flex gap-4 items-center">
+            <label className="font-medium">Total Pages:</label>
+            <input
+              type="number"
+              min="1"
+              max="100"
+              value={totalPages}
+              onChange={(e) => {
+                const newTotal = parseInt(e.target.value) || 1;
+                setTotalPages(newTotal);
+                setCurrentPage(Math.min(currentPage, newTotal));
+              }}
+              className="border rounded px-2 py-1 w-20"
+            />
+          </div>
+          <div className="flex gap-4 items-center">
+            <label className="font-medium">Show Ellipsis:</label>
+            <input
+              type="checkbox"
+              checked={showEllipsis}
+              onChange={(e) => setShowEllipsis(e.target.checked)}
+              className="w-4 h-4"
+            />
+          </div>
+        </div>
+
+        {/* Pagination Component */}
+        <div className="border rounded-lg p-4 bg-background">
+          <Pagination>
+            <PaginationContent>
+              <PaginationItem>
+                <PaginationPrevious
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setCurrentPage(Math.max(1, currentPage - 1));
+                  }}
+                  className={currentPage === 1 ? "pointer-events-none opacity-50" : ""}
+                />
+              </PaginationItem>
+              {renderPageNumbers()}
+              <PaginationItem>
+                <PaginationNext
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    setCurrentPage(Math.min(totalPages, currentPage + 1));
+                  }}
+                  className={currentPage === totalPages ? "pointer-events-none opacity-50" : ""}
+                />
+              </PaginationItem>
+            </PaginationContent>
+          </Pagination>
+        </div>
+
+        {/* Status */}
+        <div className="text-center text-sm text-muted-foreground">
+          Page {currentPage} of {totalPages}
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Interactive pagination with customizable settings. Test different page counts, current page positions, and ellipsis behavior.",
+      },
+    },
+  },
+};
+
+/**
+ * Systematic showcase of all pagination variants and states.
+ * Demonstrates different pagination configurations side by side.
+ */
+export const Variants: Story = {
+  render: () => (
+    <div className="space-y-8 w-full max-w-4xl">
+      {/* Basic 3-page pagination */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium text-muted-foreground">Basic - Few Pages</h3>
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious href="#" />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">1</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#" isActive>2</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">3</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext href="#" />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </div>
+
+      {/* First page with ellipsis */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium text-muted-foreground">First Page - With Ellipsis</h3>
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious href="#" className="pointer-events-none opacity-50" />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#" isActive>1</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">2</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">3</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">50</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext href="#" />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </div>
+
+      {/* Middle page with double ellipsis */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium text-muted-foreground">Middle Page - Double Ellipsis</h3>
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious href="#" />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">1</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">24</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#" isActive>25</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">26</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">50</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext href="#" />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </div>
+
+      {/* Last page */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium text-muted-foreground">Last Page - End State</h3>
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious href="#" />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">1</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">48</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#">49</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#" isActive>50</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext href="#" className="pointer-events-none opacity-50" />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </div>
+
+      {/* Single page */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium text-muted-foreground">Single Page - Minimal</h3>
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious href="#" className="pointer-events-none opacity-50" />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href="#" isActive>1</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext href="#" className="pointer-events-none opacity-50" />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </div>
+
+      {/* Responsive example */}
+      <div className="space-y-2">
+        <h3 className="text-sm font-medium text-muted-foreground">Responsive - Mobile Optimized</h3>
+        <div className="w-full max-w-xs mx-auto">
+          <Pagination>
+            <PaginationContent>
+              <PaginationItem>
+                <PaginationPrevious href="#" />
+              </PaginationItem>
+              <PaginationItem className="hidden sm:block">
+                <PaginationLink href="#">1</PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationLink href="#" isActive>5</PaginationLink>
+              </PaginationItem>
+              <PaginationItem className="hidden sm:block">
+                <PaginationLink href="#">10</PaginationLink>
+              </PaginationItem>
+              <PaginationItem>
+                <PaginationNext href="#" />
+              </PaginationItem>
+            </PaginationContent>
+          </Pagination>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Comprehensive showcase of pagination variants including first page, middle page, last page, single page, and responsive layouts.",
+      },
+    },
+  },
+};
+
+/**
+ * Real-world pagination usage in a data table context.
+ * Shows how pagination integrates with actual content and user workflows.
+ */
+export const InContext: Story = {
+  render: function PaginationInContext() {
+    const [currentPage, setCurrentPage] = React.useState(3);
+    const totalPages = 15;
+    const itemsPerPage = 10;
+    const totalItems = 147;
+
+    // Mock data for demonstration
+    const currentItems = Array.from({ length: itemsPerPage }, (_, i) => ({
+      id: (currentPage - 1) * itemsPerPage + i + 1,
+      name: `Product ${(currentPage - 1) * itemsPerPage + i + 1}`,
+      category: ["Electronics", "Clothing", "Books", "Home"][Math.floor(Math.random() * 4)],
+      price: Math.floor(Math.random() * 200) + 10,
+      status: ["In Stock", "Low Stock", "Out of Stock"][Math.floor(Math.random() * 3)],
+    }));
+
+    const handlePageChange = (page: number) => {
+      setCurrentPage(page);
+      // In real app: fetch new data, update URL, etc.
+    };
+
+    const renderPageNumbers = () => {
+      const pages = [];
+      const maxVisible = 5;
+      let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
+      let endPage = Math.min(totalPages, startPage + maxVisible - 1);
+
+      if (endPage - startPage < maxVisible - 1) {
+        startPage = Math.max(1, endPage - maxVisible + 1);
+      }
+
+      if (startPage > 1) {
+        pages.push(
+          <PaginationItem key={1}>
+            <PaginationLink
+              href="#"
+              onClick={(e) => {
+                e.preventDefault();
+                handlePageChange(1);
+              }}
+            >
+              1
+            </PaginationLink>
+          </PaginationItem>
+        );
+        if (startPage > 2) {
+          pages.push(
+            <PaginationItem key="ellipsis-start">
+              <PaginationEllipsis />
+            </PaginationItem>
+          );
+        }
+      }
+
+      for (let i = startPage; i <= endPage; i++) {
+        pages.push(
+          <PaginationItem key={i}>
+            <PaginationLink
+              href="#"
+              isActive={i === currentPage}
+              onClick={(e) => {
+                e.preventDefault();
+                handlePageChange(i);
+              }}
+            >
+              {i}
+            </PaginationLink>
+          </PaginationItem>
+        );
+      }
+
+      if (endPage < totalPages) {
+        if (endPage < totalPages - 1) {
+          pages.push(
+            <PaginationItem key="ellipsis-end">
+              <PaginationEllipsis />
+            </PaginationItem>
+          );
+        }
+        pages.push(
+          <PaginationItem key={totalPages}>
+            <PaginationLink
+              href="#"
+              onClick={(e) => {
+                e.preventDefault();
+                handlePageChange(totalPages);
+              }}
+            >
+              {totalPages}
+            </PaginationLink>
+          </PaginationItem>
+        );
+      }
+
+      return pages;
+    };
+
+    return (
+      <div className="w-full max-w-4xl space-y-4">
+        {/* Data Table Header */}
+        <div className="flex justify-between items-center">
+          <div>
+            <h2 className="text-lg font-semibold">Products</h2>
+            <p className="text-sm text-muted-foreground">
+              Showing {(currentPage - 1) * itemsPerPage + 1}-{Math.min(currentPage * itemsPerPage, totalItems)} of {totalItems} products
+            </p>
+          </div>
+          <div className="text-sm text-muted-foreground">
+            Page {currentPage} of {totalPages}
+          </div>
+        </div>
+
+        {/* Data Table */}
+        <div className="border rounded-lg overflow-hidden">
+          <table className="w-full">
+            <thead className="bg-muted/50">
+              <tr>
+                <th className="text-left p-3 font-medium">Product</th>
+                <th className="text-left p-3 font-medium">Category</th>
+                <th className="text-left p-3 font-medium">Price</th>
+                <th className="text-left p-3 font-medium">Status</th>
+              </tr>
+            </thead>
+            <tbody>
+              {currentItems.map((item, index) => (
+                <tr key={item.id} className={index % 2 === 0 ? "bg-background" : "bg-muted/20"}>
+                  <td className="p-3">{item.name}</td>
+                  <td className="p-3">{item.category}</td>
+                  <td className="p-3">${item.price}</td>
+                  <td className="p-3">
+                    <span 
+                      className={`inline-flex px-2 py-1 rounded-full text-xs font-medium ${
+                        item.status === "In Stock" 
+                          ? "bg-green-100 text-green-800" 
+                          : item.status === "Low Stock"
+                          ? "bg-yellow-100 text-yellow-800"
+                          : "bg-red-100 text-red-800"
+                      }`}
+                    >
+                      {item.status}
+                    </span>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Pagination */}
+        <div className="flex items-center justify-between pt-4">
+          <div className="text-sm text-muted-foreground">
+            Showing {(currentPage - 1) * itemsPerPage + 1} to {Math.min(currentPage * itemsPerPage, totalItems)} of {totalItems} results
+          </div>
+          
+          <Pagination>
+            <PaginationContent>
+              <PaginationItem>
+                <PaginationPrevious
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    handlePageChange(Math.max(1, currentPage - 1));
+                  }}
+                  className={currentPage === 1 ? "pointer-events-none opacity-50" : ""}
+                />
+              </PaginationItem>
+              {renderPageNumbers()}
+              <PaginationItem>
+                <PaginationNext
+                  href="#"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    handlePageChange(Math.min(totalPages, currentPage + 1));
+                  }}
+                  className={currentPage === totalPages ? "pointer-events-none opacity-50" : ""}
+                />
+              </PaginationItem>
+            </PaginationContent>
+          </Pagination>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Real-world example showing pagination integrated with a data table. Demonstrates how pagination works in context with actual content, including result counts and status indicators.",
+      },
+    },
+  },
+};