@ayasofyazilim/ui 0.0.0

package/src/custom/tanstack-table/fields/tanstack-table-filter-date.tsx

@@ -0,0 +1,180 @@
+import { CirclePlusIcon } from "lucide-react";
+import { Column } from "@tanstack/react-table";
+
+import { useEffect, useState } from "react";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@repo/ayasofyazilim-ui/components/popover";
+import { Separator } from "@repo/ayasofyazilim-ui/components/separator";
+import { TanstackTableDateFilterType } from "../types";
+import {
+  DatePicker,
+  DateRangePicker,
+} from "@repo/ayasofyazilim-ui/custom/date-picker";
+import { DateRange } from "@repo/ayasofyazilim-ui/custom/date-picker/types";
+
+interface TanstackTableDateFilterProps<TData, TValue> {
+  accessorKey: string;
+  column?: Column<TData, TValue>;
+  dateItem: TanstackTableDateFilterType;
+  onFilter: (accessorKey: string, selectedValues: string) => void;
+  onFilterMultiple: (
+    filter: {
+      accessorKey: string;
+      selectedValues: string;
+    }[]
+  ) => void;
+  params: URLSearchParams;
+}
+
+export function TanstackTableDateFilter<TData, TValue>({
+  column,
+  accessorKey,
+  params,
+  onFilter,
+  onFilterMultiple,
+  dateItem,
+}: TanstackTableDateFilterProps<TData, TValue>) {
+  const title = column?.columnDef?.meta?.toString() || accessorKey;
+
+  // If endAccessorKey is provided, then it is a date range. Otherwise it is a single date.
+  const [date, setDate] = useState<Date | DateRange | undefined>(
+    dateItem?.endAccessorKey
+      ? {
+          start: params?.get(dateItem.startAccessorKey)
+            ? new Date(params?.get(dateItem.startAccessorKey) as string)
+            : undefined,
+          end: params?.get(dateItem?.endAccessorKey)
+            ? new Date(params?.get(dateItem.endAccessorKey) as string)
+            : undefined,
+        }
+      : params?.get(dateItem.startAccessorKey)
+        ? new Date(params?.get(dateItem.startAccessorKey) as string)
+        : undefined
+  );
+
+  useEffect(() => {
+    function isFilterChanged(accessorKey: string, date: Date | undefined) {
+      return params.get(accessorKey) !== date?.toISOString();
+    }
+
+    function isFiltered(accessorKey: string) {
+      return !!params.get(accessorKey);
+    }
+
+    const filter: {
+      accessorKey: string;
+      selectedValues: string;
+    }[] = [];
+
+    if (!date) {
+      // This works when filters cleared
+      if (isFiltered(dateItem.startAccessorKey)) {
+        filter.push({
+          accessorKey: dateItem.startAccessorKey,
+          selectedValues: "",
+        });
+      }
+      if (dateItem?.endAccessorKey && isFiltered(dateItem.endAccessorKey)) {
+        filter.push({
+          accessorKey: dateItem.endAccessorKey,
+          selectedValues: "",
+        });
+      }
+
+      if (filter.length > 0) {
+        onFilterMultiple(filter);
+      }
+      return;
+    }
+
+    if (date instanceof Date) {
+      // It's a single date, no endAccessorKey
+      if (isFilterChanged(dateItem?.startAccessorKey, date)) {
+        onFilter(dateItem?.startAccessorKey, date.toISOString());
+      }
+      return;
+    }
+
+    if (!dateItem.canFilteredBySingleDate && (!date.start || !date.end)) return;
+
+    if (isFilterChanged(dateItem.startAccessorKey, date.start)) {
+      filter.push({
+        accessorKey: dateItem.startAccessorKey,
+        selectedValues: date.start?.toISOString() || "",
+      });
+    }
+
+    if (
+      dateItem.endAccessorKey &&
+      isFilterChanged(dateItem.endAccessorKey, date.end)
+    ) {
+      filter.push({
+        accessorKey: dateItem.endAccessorKey,
+        selectedValues: date.end?.toISOString() || "",
+      });
+    }
+
+    if (filter.length > 0) {
+      onFilterMultiple(filter);
+    }
+  }, [date]);
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 border-dashed">
+          <CirclePlusIcon className="mr-2 h-4 w-4" />
+          {title}
+          {date && "start" in date && "to" in date && date.start && (
+            <div className="hidden space-x-1 md:flex">
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              {new Date(date.start).toLocaleDateString()} -
+              {date.end && new Date(date?.end).toLocaleDateString()}
+            </div>
+          )}
+          {date instanceof Date && (
+            <div className="hidden space-x-1 md:flex">
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              {new Date(date).toLocaleDateString()}
+            </div>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="p-0 w-full min-w-fit" align="start">
+        {dateItem?.endAccessorKey ? (
+          <DateRangePicker
+            id={dateItem.startAccessorKey}
+            classNames={{
+              dateInput: "border-0 border-b rounded-none",
+            }}
+            onChange={(_date) => {
+              setDate(_date);
+            }}
+            defaultValues={date as DateRange}
+          />
+        ) : (
+          <DatePicker
+            id={dateItem.endAccessorKey || ""}
+            onChange={(_date) => {
+              setDate(_date);
+            }}
+            defaultValue={date as Date | undefined}
+          />
+        )}
+        <div className="p-1">
+          <Button
+            onClick={() => setDate(undefined)}
+            variant="ghost"
+            className="justify-center text-center w-full hover:bg-accent text-accent-foreground"
+          >
+            Clean Filter
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/custom/tanstack-table/fields/tanstack-table-filter-faceted.tsx

@@ -0,0 +1,158 @@
+import { CheckIcon, CirclePlusIcon } from "lucide-react";
+import { Column } from "@tanstack/react-table";
+
+import { useEffect, useState } from "react";
+import { Badge } from "@repo/ayasofyazilim-ui/components/badge";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@repo/ayasofyazilim-ui/components/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@repo/ayasofyazilim-ui/components/popover";
+import { Separator } from "@repo/ayasofyazilim-ui/components/separator";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { TanstackTableFacetedFilterType } from "../types";
+
+interface DataTableFacetedFilterProps<TData, TValue> {
+  accessorKey: string;
+  column?: Column<TData, TValue>;
+  onFilter: (accessorKey: string, selectedValues: string) => void;
+  options: TanstackTableFacetedFilterType[];
+  params: URLSearchParams;
+  title: string;
+}
+
+export function TanstackTableFacetedFilter<TData, TValue>({
+  column,
+  accessorKey,
+  options,
+  onFilter,
+  params,
+  title,
+}: DataTableFacetedFilterProps<TData, TValue>) {
+  const facets = column?.getFacetedUniqueValues();
+  const [selectedValues, setSelectedValues] = useState(
+    new Set(params?.get(accessorKey)?.split(",") || [])
+  );
+  useEffect(() => {
+    setSelectedValues(new Set(params?.get(accessorKey)?.split(",") || []));
+  }, [params?.get(accessorKey)]);
+
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 border-dashed">
+          <CirclePlusIcon className="mr-2 h-4 w-4" />
+          {title}
+          {selectedValues?.size > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <Badge
+                variant="secondary"
+                className="rounded-sm px-1 font-normal lg:hidden"
+              >
+                {selectedValues.size}
+              </Badge>
+              <div className="hidden space-x-1 lg:flex">
+                {selectedValues.size > 2 ? (
+                  <Badge
+                    variant="secondary"
+                    className="rounded-sm px-1 font-normal"
+                  >
+                    {selectedValues.size} Selected
+                  </Badge>
+                ) : (
+                  options
+                    .filter((option) => selectedValues.has(option.value))
+                    .map((option) => (
+                      <Badge
+                        variant="secondary"
+                        key={option.value}
+                        className="rounded-sm px-1 font-normal"
+                      >
+                        {option.label}
+                      </Badge>
+                    ))
+                )}
+              </div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput placeholder={title} />
+          <CommandList>
+            <CommandEmpty>No Filter results</CommandEmpty>
+            <CommandGroup>
+              {options.map((option) => {
+                const isSelected = selectedValues.has(option.value);
+                return (
+                  <CommandItem
+                    key={option.value}
+                    onSelect={() => {
+                      const current = Array.from(selectedValues);
+                      if (isSelected) {
+                        current.splice(
+                          current.findIndex((i) => i === option.value),
+                          1
+                        );
+                      } else {
+                        current.push(option.value);
+                      }
+
+                      onFilter(accessorKey, current.join(","));
+                      setSelectedValues(new Set(current));
+                    }}
+                  >
+                    <div
+                      className={cn(
+                        "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                        isSelected
+                          ? "bg-primary text-primary-foreground"
+                          : "opacity-50 [&_svg]:invisible"
+                      )}
+                    >
+                      <CheckIcon className={cn("h-4 w-4")} />
+                    </div>
+                    {option.icon && (
+                      <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                    )}
+                    <span>{option.label}</span>
+                    {facets?.get(option.value) && (
+                      <span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+                        {facets.get(option.value)}
+                      </span>
+                    )}
+                  </CommandItem>
+                );
+              })}
+            </CommandGroup>
+            {selectedValues.size > 0 && (
+              <>
+                <CommandSeparator />
+                <CommandGroup>
+                  <CommandItem
+                    onSelect={() => onFilter(accessorKey, "")}
+                    className="justify-center text-center"
+                  >
+                    Clean Filter
+                  </CommandItem>
+                </CommandGroup>
+              </>
+            )}
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}

package/src/custom/tanstack-table/fields/tanstack-table-filter-text.tsx

@@ -0,0 +1,76 @@
+import { CirclePlusIcon } from "lucide-react";
+import { Column } from "@tanstack/react-table";
+
+import { useEffect, useState } from "react";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Command,
+  CommandInput,
+} from "@repo/ayasofyazilim-ui/components/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@repo/ayasofyazilim-ui/components/popover";
+import { Separator } from "@repo/ayasofyazilim-ui/components/separator";
+import { useDebounce } from "@repo/ayasofyazilim-ui/hooks/use-debounce";
+
+interface TanstackTableTextFilterProps<TData, TValue> {
+  accessorKey: string;
+  column?: Column<TData, TValue>;
+  onFilter: (accessorKey: string, selectedValues: string) => void;
+  params: URLSearchParams;
+  title?: string;
+}
+
+export function TanstackTableTextFilter<TData, TValue>({
+  column,
+  title: _title,
+  accessorKey,
+  params,
+  onFilter,
+}: TanstackTableTextFilterProps<TData, TValue>) {
+  const title = _title || column?.columnDef?.meta?.toString() || accessorKey;
+  const [searchInput, setSearchInput] = useState("");
+  const filterValue = useDebounce(searchInput || "", 500);
+
+  useEffect(() => {
+    if (params?.get(accessorKey) !== filterValue) {
+      onFilter(accessorKey, filterValue);
+    }
+  }, [filterValue]);
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button variant="outline" size="sm" className="h-8 border-dashed">
+          <CirclePlusIcon className="mr-2 h-4 w-4" />
+          {title}
+          {filterValue?.length > 0 && (
+            <>
+              <Separator orientation="vertical" className="mx-2 h-4" />
+              <div className="hidden space-x-1 lg:flex">{filterValue}</div>
+            </>
+          )}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0" align="start">
+        <Command>
+          <CommandInput
+            placeholder={title}
+            value={searchInput}
+            onValueChange={(value) => setSearchInput(value)}
+          />
+        </Command>
+        <div className="p-1">
+          <Button
+            onClick={() => setSearchInput("")}
+            variant="ghost"
+            className="justify-center text-center w-full hover:bg-accent text-accent-foreground"
+          >
+            Clean Filter
+          </Button>
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +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>
+  );
+}

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

@@ -0,0 +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>
+  );
+}