notionsoft-ui 1.0.38 → 1.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "notionsoft-ui",
-  "version": "1.0.38",
+  "version": "1.0.39",
   "description": "A React UI component installer (shadcn-style). Installs components directly into your project.",
   "bin": {
     "notionsoft-ui": "./cli/index.cjs"

package/src/notion-ui/pagination/Pagination.stories.tsx

@@ -0,0 +1,59 @@
+// Pagination.stories.tsx
+import type { Meta, StoryObj } from "@storybook/react";
+import Pagination from "./pagination";
+
+const meta: Meta<typeof Pagination> = {
+  title: "Components/Pagination",
+  component: Pagination,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    lastPage: {
+      control: { type: "number", min: 1 },
+    },
+    onPageChange: {
+      action: "page changed",
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Pagination>;
+
+/**
+ * Default pagination
+ */
+export const Default: Story = {
+  args: {
+    lastPage: 10,
+  },
+};
+
+/**
+ * Small number of pages (no ellipsis)
+ */
+export const SmallDataset: Story = {
+  args: {
+    lastPage: 5,
+  },
+};
+
+/**
+ * Large dataset with ellipsis behavior
+ */
+export const LargeDataset: Story = {
+  args: {
+    lastPage: 50,
+  },
+};
+
+/**
+ * Single page (navigation disabled)
+ */
+export const SinglePage: Story = {
+  args: {
+    lastPage: 1,
+  },
+};

package/src/notion-ui/pagination/pagination.tsx

@@ -0,0 +1,109 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useState } from "react";
+
+interface PaginationProps {
+  lastPage: number;
+  onPageChange: (page: number) => void;
+}
+const Pagination: React.FC<PaginationProps> = ({ lastPage, onPageChange }) => {
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const handlePrevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+      onPageChange(currentPage - 1);
+    }
+  };
+
+  const handleNextPage = () => {
+    if (currentPage < lastPage) {
+      setCurrentPage(currentPage + 1);
+      onPageChange(currentPage + 1);
+    }
+  };
+
+  const handlePageClick = (page: number) => {
+    setCurrentPage(page);
+    onPageChange(page);
+  };
+
+  // Function to generate pagination numbers with ellipsis for large datasets
+  const generatePageNumbers = () => {
+    const pages: (number | string)[] = [];
+    const siblingCount = 1; // Number of pages to show around current page
+
+    if (lastPage <= 7) {
+      // If less than 7 pages, show all pages
+      for (let i = 1; i <= lastPage; i++) {
+        pages.push(i);
+      }
+    } else {
+      // Always show first, last, and nearby pages
+      pages.push(1);
+      if (currentPage > siblingCount + 2) pages.push("...");
+      for (
+        let i = Math.max(2, currentPage - siblingCount);
+        i <= Math.min(lastPage - 1, currentPage + siblingCount);
+        i++
+      ) {
+        pages.push(i);
+      }
+      if (currentPage < lastPage - siblingCount - 1) pages.push("...");
+      pages.push(lastPage);
+    }
+
+    return pages;
+  };
+
+  const pageNumbers = generatePageNumbers();
+
+  return (
+    <div className="flex justify-center items-center select-none h-7 text-sm gap-x-1 text-primary-foreground">
+      {/* Previous Button */}
+      <ChevronLeft
+        onClick={() => {
+          if (currentPage !== 1) handlePrevPage();
+        }}
+        className={`size-8 rounded transition-[color,background-color,transform] cursor-pointer rtl:rotate-180 self-center p-2 ${
+          currentPage === 1
+            ? "text-primary/50"
+            : "text-primary hover:scale-110 hover:bg-fourth/10"
+        }`}
+      />
+      {/* Page Numbers */}
+      {pageNumbers.map((page, index) =>
+        typeof page === "number" ? (
+          <button
+            key={index}
+            onClick={() => handlePageClick(page)}
+            className={`size-8 cursor-pointer rounded transition-colors ${
+              currentPage === page
+                ? "bg-fourth text-primary-foreground text-sm"
+                : "text-secondary-foreground hover:bg-fourth/10 transition-transform hover:scale-105 text-xs font-semibold"
+            }`}
+          >
+            {page}
+          </button>
+        ) : (
+          <span key={index} className="px-4 py-2 text-primary">
+            ...
+          </span>
+        )
+      )}
+
+      {/* Next Button */}
+
+      <ChevronRight
+        onClick={() => {
+          if (currentPage !== lastPage) handleNextPage();
+        }}
+        className={`size-8 rounded transition-[color,background-color,transform] cursor-pointer rtl:rotate-180 self-center p-2 ${
+          currentPage !== lastPage
+            ? "text-primary hover:scale-110 hover:bg-fourth/10"
+            : "text-primary/50"
+        }`}
+      />
+    </div>
+  );
+};
+
+export default Pagination;