@ayasofyazilim/ui 0.0.0 → 0.0.2

package/src/custom/tanstack-table/fields/tanstack-table-pagination.tsx

@@ -1,136 +1,136 @@
-"use no memo";
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  ChevronsLeftIcon,
-  ChevronsRightIcon,
-} from "lucide-react";
-import { Table } from "@tanstack/react-table";
-
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import { useEffect } from "react";
-import { Button } from "@repo/ayasofyazilim-ui/components/button";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@repo/ayasofyazilim-ui/components/select";
-
-interface TanstackTablePaginationProps<TData> {
-  pagination: {
-    pageIndex: number;
-    pageSize: number;
-  };
-  table: Table<TData>;
-}
-
-export function TanstackTablePagination<TData>(
-  props: TanstackTablePaginationProps<TData>
-) {
-  const { table, pagination } = props;
-  const { replace } = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  useEffect(() => {
-    const params = new URLSearchParams(searchParams.toString());
-
-    if (Number(searchParams?.get("maxResultCount")) !== pagination.pageSize) {
-      params.set("maxResultCount", pagination.pageSize.toString());
-    }
-    if (
-      Number(searchParams?.get("skipCount")) !==
-      pagination.pageIndex * pagination.pageSize
-    ) {
-      params.set(
-        "skipCount",
-        (pagination.pageIndex * pagination.pageSize).toString()
-      );
-    }
-    if (Number(params?.get("maxResultCount")) === 10) {
-      params.delete("maxResultCount");
-    }
-    if (Number(params?.get("skipCount")) === 0) {
-      params.delete("skipCount");
-    }
-
-    replace(`${pathname}?${params.toString()}`);
-  }, [pagination]);
-
-  return (
-    <div className="flex items-center flex-wrap">
-      {table.getIsSomeRowsSelected() && (
-        <div className="text-sm text-muted-foreground text-nowrap">
-          {table.getFilteredSelectedRowModel().rows.length} of{" "}
-          {table.getFilteredRowModel().rows.length} row(s) selected.
-        </div>
-      )}
-      <div className="flex items-center flex-wrap gap-2 w-full sm:w-auto ml-auto">
-        <div className="flex items-center w-full justify-between gap-2 sm:w-auto md:mr-4">
-          <p className="text-sm font-medium">Rows per page</p>
-          <Select
-            value={`${table.getState().pagination.pageSize}`}
-            onValueChange={(value) => {
-              table.setPageSize(Number(value));
-            }}
-          >
-            <SelectTrigger className="h-8 w-[70px]">
-              <SelectValue placeholder={table.getState().pagination.pageSize} />
-            </SelectTrigger>
-            <SelectContent side="top">
-              {[10, 20, 30, 40, 50].map((pageSize) => (
-                <SelectItem key={pageSize} value={`${pageSize}`}>
-                  {pageSize}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-        <div className="flex items-center justify-center text-sm font-medium mr-auto">
-          Page {table.getState().pagination.pageIndex + 1} of{" "}
-          {table.getPageCount()}
-        </div>
-        <div className="flex items-center gap-x-2">
-          <Button
-            variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(0)}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <span className="sr-only">Go to first page</span>
-            <ChevronsLeftIcon className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="outline"
-            className="h-8 w-8 p-0"
-            onClick={() => table.previousPage()}
-            disabled={!table.getCanPreviousPage()}
-          >
-            <span className="sr-only">Go to previous page</span>
-            <ChevronLeftIcon className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="outline"
-            className="h-8 w-8 p-0"
-            onClick={() => table.nextPage()}
-            disabled={!table.getCanNextPage()}
-          >
-            <span className="sr-only">Go to next page</span>
-            <ChevronRightIcon className="h-4 w-4" />
-          </Button>
-          <Button
-            variant="outline"
-            className="hidden h-8 w-8 p-0 lg:flex"
-            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-            disabled={!table.getCanNextPage()}
-          >
-            <span className="sr-only">Go to last page</span>
-            <ChevronsRightIcon className="h-4 w-4" />
-          </Button>
-        </div>
-      </div>
-    </div>
-  );
-}
+"use no memo";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  ChevronsLeftIcon,
+  ChevronsRightIcon,
+} from "lucide-react";
+import { Table } from "@tanstack/react-table";
+
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useEffect } from "react";
+import { Button } from "@ayasofyazilim/ui/components/button";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@ayasofyazilim/ui/components/select";
+
+interface TanstackTablePaginationProps<TData> {
+  pagination: {
+    pageIndex: number;
+    pageSize: number;
+  };
+  table: Table<TData>;
+}
+
+export function TanstackTablePagination<TData>(
+  props: TanstackTablePaginationProps<TData>,
+) {
+  const { table, pagination } = props;
+  const { replace } = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams.toString());
+
+    if (Number(searchParams?.get("maxResultCount")) !== pagination.pageSize) {
+      params.set("maxResultCount", pagination.pageSize.toString());
+    }
+    if (
+      Number(searchParams?.get("skipCount")) !==
+      pagination.pageIndex * pagination.pageSize
+    ) {
+      params.set(
+        "skipCount",
+        (pagination.pageIndex * pagination.pageSize).toString(),
+      );
+    }
+    if (Number(params?.get("maxResultCount")) === 10) {
+      params.delete("maxResultCount");
+    }
+    if (Number(params?.get("skipCount")) === 0) {
+      params.delete("skipCount");
+    }
+
+    replace(`${pathname}?${params.toString()}`);
+  }, [pagination]);
+
+  return (
+    <div className="flex items-center flex-wrap">
+      {table.getIsSomeRowsSelected() && (
+        <div className="text-sm text-muted-foreground text-nowrap">
+          {table.getFilteredSelectedRowModel().rows.length} of{" "}
+          {table.getFilteredRowModel().rows.length} row(s) selected.
+        </div>
+      )}
+      <div className="flex items-center flex-wrap gap-2 w-full sm:w-auto ml-auto">
+        <div className="flex items-center w-full justify-between gap-2 sm:w-auto md:mr-4">
+          <p className="text-sm font-medium">Rows per page</p>
+          <Select
+            value={`${table.getState().pagination.pageSize}`}
+            onValueChange={(value) => {
+              table.setPageSize(Number(value));
+            }}
+          >
+            <SelectTrigger className="h-8 w-[70px]">
+              <SelectValue placeholder={table.getState().pagination.pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {[10, 20, 30, 40, 50].map((pageSize) => (
+                <SelectItem key={pageSize} value={`${pageSize}`}>
+                  {pageSize}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className="flex items-center justify-center text-sm font-medium mr-auto">
+          Page {table.getState().pagination.pageIndex + 1} of{" "}
+          {table.getPageCount()}
+        </div>
+        <div className="flex items-center gap-x-2">
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => table.setPageIndex(0)}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to first page</span>
+            <ChevronsLeftIcon className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            <span className="sr-only">Go to previous page</span>
+            <ChevronLeftIcon className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="h-8 w-8 p-0"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to next page</span>
+            <ChevronRightIcon className="h-4 w-4" />
+          </Button>
+          <Button
+            variant="outline"
+            className="hidden h-8 w-8 p-0 lg:flex"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            disabled={!table.getCanNextPage()}
+          >
+            <span className="sr-only">Go to last page</span>
+            <ChevronsRightIcon className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/custom/tanstack-table/fields/tanstack-table-plain-table.tsx

@@ -1,142 +1,142 @@
-"use no memo";
-import {
-  ColumnDef,
-  flexRender,
-  Table as TableType,
-} from "@tanstack/react-table";
-import { Fragment, JSX } from "react";
-import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@repo/ayasofyazilim-ui/components/table";
-import { getCommonPinningStyles } from "../utils";
-
-export function TanstackTablePlainTable<TData, TValue>({
-  table,
-  columns,
-  fillerColumn,
-  editable,
-  resizeable,
-  expandedRowComponent,
-}: {
-  columns: ColumnDef<TData, TValue>[];
-  fillerColumn?: keyof TData;
-  editable?: boolean;
-  expandedRowComponent?: (
-    row: TData,
-    toggleExpanded: () => void
-  ) => JSX.Element;
-  table: TableType<TData>;
-  resizeable?: boolean;
-}) {
-  return (
-    <Table style={{ width: table.getCenterTotalSize(), minWidth: "100%" }}>
-      <TableHeader>
-        {table.getHeaderGroups().map((headerGroup) => (
-          <TableRow key={headerGroup.id} className="group">
-            {headerGroup.headers.map((header) => {
-              if (header.id === "actions") return null;
-              return (
-                <TableHead
-                  key={header.id}
-                  colSpan={header.colSpan}
-                  className={cn(
-                    " relative group/th border-r border-gray-200",
-                    header.column.getIsResizing() &&
-                      "border-dashed border-black border-r"
-                  )}
-                  style={{
-                    ...getCommonPinningStyles({
-                      column: header.column,
-                      withBorder: true,
-                      fillerColumn,
-                      resizeable,
-                    }),
-                  }}
-                >
-                  <div
-                    className={cn(
-                      header.column.getIsResizing() && "resizing",
-                      "group-has-[.resizing]:pointer-events-none group-has-[.resizing]:select-none"
-                    )}
-                  >
-                    {header.isPlaceholder
-                      ? null
-                      : flexRender(
-                          header.column.columnDef.header,
-                          header.getContext()
-                        )}
-                  </div>
-                  {resizeable && (
-                    <div
-                      onDoubleClick={() => header.column.resetSize()}
-                      onMouseDown={header.getResizeHandler()}
-                      onTouchStart={header.getResizeHandler()}
-                      role="button"
-                      tabIndex={0}
-                      aria-label="Resize column"
-                      className="resizer w-0.5 hidden group-hover:flex absolute right-0 bg-muted-foreground top-0 h-10 z-10 items-center cursor-col-resize select-none touch-none"
-                    />
-                  )}
-                </TableHead>
-              );
-            })}
-          </TableRow>
-        ))}
-      </TableHeader>
-      <TableBody>
-        {table.getRowModel().rows?.length ? (
-          table.getRowModel().rows.map((row) => (
-            <Fragment key={row.id}>
-              <TableRow
-                data-state={row.getIsSelected() && "selected"}
-                className={cn(editable && "[&>td:last-child]:border-r-0")}
-              >
-                {row.getVisibleCells().map((cell) => (
-                  <TableCell
-                    key={cell.id}
-                    className={cn(
-                      (editable || cell.column.id === "actions") &&
-                        "p-0 border border-b-0 border-r-0"
-                    )}
-                    style={{
-                      ...getCommonPinningStyles({
-                        column: cell.column,
-                        fillerColumn,
-                        resizeable,
-                        withBorder: true,
-                      }),
-                    }}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
-              </TableRow>
-              {row.getIsExpanded() && expandedRowComponent && (
-                <TableRow>
-                  <TableCell colSpan={row.getAllCells().length}>
-                    {expandedRowComponent(
-                      row.original,
-                      row.getToggleExpandedHandler()
-                    )}
-                  </TableCell>
-                </TableRow>
-              )}
-            </Fragment>
-          ))
-        ) : (
-          <TableRow>
-            <TableCell colSpan={columns.length} className="h-auto text-center">
-              No data results
-            </TableCell>
-          </TableRow>
-        )}
-      </TableBody>
-    </Table>
-  );
-}
+"use no memo";
+import {
+  ColumnDef,
+  flexRender,
+  Table as TableType,
+} from "@tanstack/react-table";
+import { Fragment, JSX } from "react";
+import { cn } from "@ayasofyazilim/ui/lib/utils";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@ayasofyazilim/ui/components/table";
+import { getCommonPinningStyles } from "../utils";
+
+export function TanstackTablePlainTable<TData, TValue>({
+  table,
+  columns,
+  fillerColumn,
+  editable,
+  resizeable,
+  expandedRowComponent,
+}: {
+  columns: ColumnDef<TData, TValue>[];
+  fillerColumn?: keyof TData;
+  editable?: boolean;
+  expandedRowComponent?: (
+    row: TData,
+    toggleExpanded: () => void,
+  ) => JSX.Element;
+  table: TableType<TData>;
+  resizeable?: boolean;
+}) {
+  return (
+    <Table style={{ width: table.getCenterTotalSize(), minWidth: "100%" }}>
+      <TableHeader>
+        {table.getHeaderGroups().map((headerGroup) => (
+          <TableRow key={headerGroup.id} className="group">
+            {headerGroup.headers.map((header) => {
+              if (header.id === "actions") return null;
+              return (
+                <TableHead
+                  key={header.id}
+                  colSpan={header.colSpan}
+                  className={cn(
+                    " relative group/th border-r border-gray-200",
+                    header.column.getIsResizing() &&
+                      "border-dashed border-black border-r",
+                  )}
+                  style={{
+                    ...getCommonPinningStyles({
+                      column: header.column,
+                      withBorder: true,
+                      fillerColumn,
+                      resizeable,
+                    }),
+                  }}
+                >
+                  <div
+                    className={cn(
+                      header.column.getIsResizing() && "resizing",
+                      "group-has-[.resizing]:pointer-events-none group-has-[.resizing]:select-none",
+                    )}
+                  >
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </div>
+                  {resizeable && (
+                    <div
+                      onDoubleClick={() => header.column.resetSize()}
+                      onMouseDown={header.getResizeHandler()}
+                      onTouchStart={header.getResizeHandler()}
+                      role="button"
+                      tabIndex={0}
+                      aria-label="Resize column"
+                      className="resizer w-0.5 hidden group-hover:flex absolute right-0 bg-muted-foreground top-0 h-10 z-10 items-center cursor-col-resize select-none touch-none"
+                    />
+                  )}
+                </TableHead>
+              );
+            })}
+          </TableRow>
+        ))}
+      </TableHeader>
+      <TableBody>
+        {table.getRowModel().rows?.length ? (
+          table.getRowModel().rows.map((row) => (
+            <Fragment key={row.id}>
+              <TableRow
+                data-state={row.getIsSelected() && "selected"}
+                className={cn(editable && "[&>td:last-child]:border-r-0")}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell
+                    key={cell.id}
+                    className={cn(
+                      (editable || cell.column.id === "actions") &&
+                        "p-0 border border-b-0 border-r-0",
+                    )}
+                    style={{
+                      ...getCommonPinningStyles({
+                        column: cell.column,
+                        fillerColumn,
+                        resizeable,
+                        withBorder: true,
+                      }),
+                    }}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                ))}
+              </TableRow>
+              {row.getIsExpanded() && expandedRowComponent && (
+                <TableRow>
+                  <TableCell colSpan={row.getAllCells().length}>
+                    {expandedRowComponent(
+                      row.original,
+                      row.getToggleExpandedHandler(),
+                    )}
+                  </TableCell>
+                </TableRow>
+              )}
+            </Fragment>
+          ))
+        ) : (
+          <TableRow>
+            <TableCell colSpan={columns.length} className="h-auto text-center">
+              No data results
+            </TableCell>
+          </TableRow>
+        )}
+      </TableBody>
+    </Table>
+  );
+}