@ichaingo/pagination 1.1.0

package/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

package/README.md

@@ -0,0 +1,7 @@
+# @ichaingo/pagination
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test @ichaingo/pagination` to execute the unit tests via [Vitest](https://vitest.dev/).

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+interface CustomPaginationProps {
+    className?: string;
+    total: number;
+    pageSize: number;
+    currentPage: number;
+    pageSizeOptions?: number[];
+    layout?: ('prev' | 'page' | 'next' | 'ellipsis' | 'sizes' | 'total')[];
+    onPageChange?: (page: number) => void;
+    onPageSizeChange?: (pageSize: number) => void;
+}
+export default function CustomPagination({ className, total: initialTotal, pageSize, pageSizeOptions, currentPage, layout, onPageChange, onPageSizeChange, }: CustomPaginationProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAoBA,UAAU,qBAAqB;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,MAAM,CAAC,EAAE,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,OAAO,CAAC,EAAE,CAAC;IACvE,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,SAAS,EACT,KAAK,EAAE,YAAY,EACnB,QAAQ,EACR,eAA8B,EAC9B,WAAW,EACX,MAA+D,EAC/D,YAAY,EACZ,gBAAgB,GACjB,EAAE,qBAAqB,kDA4KvB"}

package/dist/index.js

@@ -0,0 +1,141 @@
+'use client';
+import { jsx as i, jsxs as d } from "react/jsx-runtime";
+import * as y from "react";
+import { Pagination as z, PaginationContent as j, PaginationItem as s, PaginationLink as a, PaginationEllipsis as v } from "@ichaingo/ui/pagination";
+import { Select as V, SelectTrigger as S, SelectValue as L, SelectContent as I, SelectItem as R } from "@ichaingo/ui/select";
+import { twMerge as m } from "tailwind-merge";
+import { useTranslations as E } from "next-intl";
+import { ChevronRight as F, ChevronLeft as G } from "lucide-react";
+const N = 1e4;
+function J({
+  className: k,
+  total: p,
+  pageSize: x,
+  pageSizeOptions: b = [10, 30, 50],
+  currentPage: r,
+  layout: u = ["prev", "page", "next", "ellipsis", "sizes", "total"],
+  onPageChange: t,
+  onPageSizeChange: h
+}) {
+  const f = E(), w = Math.min(p, N), l = Math.ceil(w / x), M = () => {
+    const e = [];
+    let o = Math.max(1, r - Math.floor(1.5));
+    const n = Math.min(l, o + 3 - 1);
+    n - o + 1 < 3 && (o = Math.max(1, n - 3 + 1)), o > 1 && (e.push(
+      /* @__PURE__ */ i(s, { children: /* @__PURE__ */ i(
+        a,
+        {
+          size: "sm",
+          className: m(
+            "h-6 min-w-6 w-fit rounded-md cursor-pointer",
+            r === 1 ? "bg-[#000] text-[#fff]" : ""
+          ),
+          onClick: () => t == null ? void 0 : t(1),
+          children: "1"
+        }
+      ) }, "first")
+    ), o > 2 && e.push(
+      /* @__PURE__ */ i(s, { children: /* @__PURE__ */ i(v, {}) }, "ellipsis-start")
+    ));
+    for (let c = o; c <= n; c++)
+      e.push(
+        /* @__PURE__ */ i(s, { children: /* @__PURE__ */ i(
+          a,
+          {
+            size: "sm",
+            className: m(
+              "h-6 min-w-6 w-fit rounded-md cursor-pointer",
+              r === c ? "bg-[#000] text-[#fff]" : ""
+            ),
+            onClick: () => t == null ? void 0 : t(c),
+            children: c
+          }
+        ) }, c)
+      );
+    return n < l && (n < l - 1 && e.push(
+      /* @__PURE__ */ i(s, { className: "cursor-pointer", children: /* @__PURE__ */ i(v, {}) }, "ellipsis-end")
+    ), e.push(
+      /* @__PURE__ */ i(s, { children: /* @__PURE__ */ i(
+        a,
+        {
+          size: "sm",
+          className: m(
+            "h-6 min-w-6 w-fit rounded-md cursor-pointer",
+            r === l ? "bg-[#000] text-[#fff]" : ""
+          ),
+          onClick: () => t == null ? void 0 : t(l),
+          children: l
+        }
+      ) }, "last")
+    )), e;
+  };
+  return w <= b[0] ? null : /* @__PURE__ */ i(z, { className: m("w-full max-w-[100vw] mt-3", k), children: /* @__PURE__ */ d(j, { className: "w-full flex flex-row items-center justify-between flex-wrap", children: [
+    u.includes("total") && /* @__PURE__ */ i(s, { className: "mr-auto order-1 flex-1 overflow-hidden md:overflow-visible md:order-0 ", children: /* @__PURE__ */ d("span", { className: "text-sm block text-subtitle w-full truncate", children: [
+      f("common.pagination.total"),
+      " ",
+      p,
+      " ",
+      f("common.pagination.item"),
+      p > N ? `${f("common.pagination.totalTip")}` : ""
+    ] }) }, "total"),
+    /* @__PURE__ */ i("div", { className: "w-full md:w-auto md:flex-2 flex items-center justify-center", children: u.filter((e) => e !== "total" && e !== "sizes").map((e) => {
+      switch (e) {
+        case "prev":
+          return /* @__PURE__ */ i(s, { children: /* @__PURE__ */ i(
+            a,
+            {
+              "aria-label": "Go to previous page",
+              size: "sm",
+              className: m(
+                "flex items-center justify-center pointer gap-1 shrink-0 cursor-pointer px-2",
+                r === 1 ? "pointer-events-none opacity-50" : ""
+              ),
+              onClick: () => t == null ? void 0 : t(Math.max(1, r - 1)),
+              children: /* @__PURE__ */ i(G, { size: 16 })
+            }
+          ) }, "prev");
+        case "page":
+          return /* @__PURE__ */ i(y.Fragment, { children: M() }, "page");
+        case "next":
+          return /* @__PURE__ */ i(s, { children: /* @__PURE__ */ i(
+            a,
+            {
+              size: "sm",
+              className: m(
+                "flex items-center justify-center pointer gap-1 shrink-0 cursor-pointer px-2",
+                r === l ? "pointer-events-none opacity-50" : ""
+              ),
+              onClick: () => t == null ? void 0 : t(Math.min(l, r + 1)),
+              children: /* @__PURE__ */ i(F, { size: 16 })
+            }
+          ) }, "next");
+        default:
+          return null;
+      }
+    }) }),
+    u.includes("sizes") && h && /* @__PURE__ */ d(s, { className: "gap-2 flex shrink-0 order-1 lg:order-0 items-center py-0.5 flex-1 justify-end", children: [
+      /* @__PURE__ */ i("span", { className: "text-sm text-muted-foreground", children: f("common.pagination.sizeLabel") }),
+      /* @__PURE__ */ d(
+        V,
+        {
+          value: x.toString(),
+          onValueChange: (e) => h(Number(e)),
+          children: [
+            /* @__PURE__ */ i(
+              S,
+              {
+                size: "sm",
+                className: " border-1 border-input w-[70px] focus:ring-0 text-black bg-background focus-visible:outline-0 focus-ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-input py-1",
+                children: /* @__PURE__ */ i(L, {})
+              }
+            ),
+            /* @__PURE__ */ i(I, { className: "w-20 bg-module", children: b.map((e) => /* @__PURE__ */ i(R, { value: e.toString(), className: "text-sm px-2 py-1 cursor-pointer hover:bg-background", children: e }, e)) })
+          ]
+        }
+      )
+    ] }, "sizes")
+  ] }) });
+}
+export {
+  J as default
+};

package/eslint.config.mjs

@@ -0,0 +1,12 @@
+import nx from '@nx/eslint-plugin';
+import baseConfig from '../../eslint.config.mjs';
+
+export default [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@ichaingo/pagination",
+  "version": "1.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18",
+    "next-intl": ">=4",
+    "tailwind-merge": "^2.5.5",
+    "lucide-react": "^0.539.0",
+    "@ichaingo/ui": "1.1.0"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "rollup-plugin-preserve-use-client": "^1.0.0"
+  }
+}

package/src/index.tsx

@@ -0,0 +1,213 @@
+'use client'
+import * as React from "react";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationEllipsis,
+} from "@ichaingo/ui/pagination";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@ichaingo/ui/select";
+import { twMerge } from "tailwind-merge";
+import { useTranslations } from "next-intl";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+interface CustomPaginationProps {
+  className?: string;
+  total: number;
+  pageSize: number;
+  currentPage: number;
+  pageSizeOptions?: number[];
+  layout?: ('prev' | 'page' | 'next' | 'ellipsis' | 'sizes' | 'total')[];
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (pageSize: number) => void;
+}
+const limit = 10000
+export default function CustomPagination({
+  className,
+  total: initialTotal,
+  pageSize,
+  pageSizeOptions = [10, 30, 50],
+  currentPage,
+  layout = ['prev', 'page', 'next', 'ellipsis', 'sizes', 'total'],
+  onPageChange,
+  onPageSizeChange,
+}: CustomPaginationProps) {
+  const t = useTranslations()
+  const total = Math.min(initialTotal, limit)
+  const totalPages = Math.ceil(total / pageSize);
+
+  const renderPageNumbers = () => {
+    const pages = [];
+    const maxVisiblePages = 3;
+    let startPage = Math.max(1, currentPage - Math.floor(maxVisiblePages / 2));
+    const endPage = Math.min(totalPages, startPage + maxVisiblePages - 1);
+
+    if (endPage - startPage + 1 < maxVisiblePages) {
+      startPage = Math.max(1, endPage - maxVisiblePages + 1);
+    }
+
+    // Add first page and ellipsis if needed
+    if (startPage > 1) {
+      pages.push(
+        <PaginationItem key="first">
+          <PaginationLink
+            size="sm"
+            className={twMerge(
+              "h-6 min-w-6 w-fit rounded-md cursor-pointer",
+              currentPage === 1
+                ? "bg-[#000] text-[#fff]"
+                : ""
+            )}
+            onClick={() => onPageChange?.(1)}
+          >
+            1
+          </PaginationLink>
+        </PaginationItem>
+      );
+      if (startPage > 2) {
+        pages.push(
+          <PaginationItem key="ellipsis-start">
+            <PaginationEllipsis />
+          </PaginationItem>
+        );
+      }
+    }
+
+    // Add page numbers
+    for (let i = startPage; i <= endPage; i++) {
+      pages.push(
+        <PaginationItem key={i}>
+          <PaginationLink
+            size="sm"
+            className={twMerge(
+              "h-6 min-w-6 w-fit rounded-md cursor-pointer",
+              currentPage === i
+                ? "bg-[#000] text-[#fff]"
+                : ""
+            )}
+            onClick={() => onPageChange?.(i)}
+          >
+            {i}
+          </PaginationLink>
+        </PaginationItem>
+      );
+    }
+
+    // Add last page and ellipsis if needed
+    if (endPage < totalPages) {
+      if (endPage < totalPages - 1) {
+        pages.push(
+          <PaginationItem key="ellipsis-end" className="cursor-pointer">
+            <PaginationEllipsis />
+          </PaginationItem>
+        );
+      }
+      pages.push(
+        <PaginationItem key="last">
+          <PaginationLink
+            size="sm"
+            className={twMerge(
+              "h-6 min-w-6 w-fit rounded-md cursor-pointer",
+              currentPage === totalPages
+                ? "bg-[#000] text-[#fff]"
+                : ""
+            )}
+            onClick={() => onPageChange?.(totalPages)}
+          >
+            {totalPages}
+          </PaginationLink>
+        </PaginationItem>
+      );
+    }
+
+    return pages;
+  };
+  if (total <= pageSizeOptions[0]) {
+    return null
+  }
+  return (
+    <Pagination className={twMerge("w-full max-w-[100vw] mt-3", className)}>
+      <PaginationContent className="w-full flex flex-row items-center justify-between flex-wrap">
+        {layout.includes('total') && (
+          <PaginationItem key="total" className="mr-auto order-1 flex-1 overflow-hidden md:overflow-visible md:order-0 ">
+            <span className="text-sm block text-subtitle w-full truncate">
+              {t('common.pagination.total')} {initialTotal} {t('common.pagination.item')}
+              {initialTotal > limit ? `${t('common.pagination.totalTip')}` : ''}
+            </span>
+          </PaginationItem>
+        )}
+        <div className="w-full md:w-auto md:flex-2 flex items-center justify-center">
+          {layout.filter(item => item !== 'total' && item !== 'sizes').map((item) => {
+            switch (item) {
+              case 'prev':
+                return (
+                  <PaginationItem key="prev">
+                    <PaginationLink
+                     aria-label="Go to previous page"
+                      size="sm"
+                      className={twMerge(
+                        "flex items-center justify-center pointer gap-1 shrink-0 cursor-pointer px-2",
+                        currentPage === 1 ? "pointer-events-none opacity-50" : "",
+                      )}
+                      onClick={() => onPageChange?.(Math.max(1, currentPage - 1))}
+                    >
+                      <ChevronLeft size={16} />
+                    </PaginationLink>
+                  </PaginationItem>
+                );
+              case 'page':
+                return <React.Fragment key="page">{renderPageNumbers()}</React.Fragment>;
+              case 'next':
+                return (
+                  <PaginationItem key="next">
+                    <PaginationLink
+                      size="sm"
+                      className={twMerge(
+                        "flex items-center justify-center pointer gap-1 shrink-0 cursor-pointer px-2",
+                        currentPage === totalPages ? "pointer-events-none opacity-50" : ""
+                      )}
+                      onClick={() => onPageChange?.(Math.min(totalPages, currentPage + 1))}
+                    >
+                      <ChevronRight size={16} />
+                    </PaginationLink>
+                  </PaginationItem>
+                );
+              default:
+                return null;
+            }
+          })}
+        </div>
+        {layout.includes('sizes') && onPageSizeChange && (
+          <PaginationItem key="sizes" className="gap-2 flex shrink-0 order-1 lg:order-0 items-center py-0.5 flex-1 justify-end">
+            <span className="text-sm text-muted-foreground">
+              {t('common.pagination.sizeLabel')}
+            </span>
+            <Select
+              value={pageSize.toString()}
+              onValueChange={(value: string) => onPageSizeChange(Number(value))}
+            >
+              <SelectTrigger 
+              size="sm" className=" border-1 border-input w-[70px] focus:ring-0 text-black bg-background focus-visible:outline-0 focus-ring-0 focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-input py-1">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent className="w-20 bg-module">
+                {pageSizeOptions.map((size) => (
+                  <SelectItem key={size} value={size.toString()} className="text-sm px-2 py-1 cursor-pointer hover:bg-background">
+                    {size}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </PaginationItem>
+        )}
+      </PaginationContent>
+    </Pagination>
+  );
+} 

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "../ui"
+    },
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

package/tsconfig.lib.json

@@ -0,0 +1,50 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ],
+    "rootDir": "src",
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo"
+  },
+  "exclude": [
+    "out-tsc",
+    "dist",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "eslint.config.js",
+    "eslint.config.cjs",
+    "eslint.config.mjs"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"],
+  "references": [
+    {
+      "path": "../ui/tsconfig.lib.json"
+    }
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,36 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "moduleResolution": "bundler"
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,64 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import preserveUseClientDirective from 'rollup-plugin-preserve-use-client';
+
+export default defineConfig(() => ({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/pagination',
+  plugins: [
+    react(),
+    preserveUseClientDirective(),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json')
+    }),
+  ],
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: './dist',
+    emptyOutDir: true,
+    minify: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.tsx',
+      name: '@ichaingo/pagination',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es' as const],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: [
+        'react', 'react-dom', 'react/jsx-runtime', 'tailwind-merge', 'lucide-react', 'next-intl',
+        /^@ichaingo\/.+/,
+        /^@radix-ui\/.+/,
+        'next-themes',
+      ],
+    },
+  },
+  test: {
+    name: '@ichaingo/pagination',
+    watch: false,
+    globals: true,
+    environment: 'jsdom',
+    include: ['{src,tests}/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
+    reporters: ['default'],
+    coverage: {
+      reportsDirectory: './test-output/vitest/coverage',
+      provider: 'v8' as const,
+    },
+  },
+}));