@ayasofyazilim/ui 0.0.0

package/src/custom/tanstack-table/fields/tanstack-table-row-actions-confirmation.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { Loader } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@repo/ayasofyazilim-ui/components/dialog";
+import { TanstackTableRowActionsConfirmationDialog } from "../types";
+
+type TanstackTableConfirmationDialogProps<TData> = {
+  row: TData;
+  setDialogOpen: () => void;
+} & TanstackTableRowActionsConfirmationDialog<TData>;
+export function TanstackTableConfirmationDialog<TData>({
+  row,
+  title,
+  confirmationText,
+  onCancel,
+  onConfirm,
+  cancelText,
+  description,
+  setDialogOpen,
+}: TanstackTableConfirmationDialogProps<TData>) {
+  const dialogTitle = typeof title === "function" ? title(row) : title;
+
+  const [isDeletePending, startDeleteTransition] = React.useTransition();
+
+  const handleOnConfirmClick = () => {
+    startDeleteTransition(() => {
+      onConfirm(row);
+      setDialogOpen();
+    });
+  };
+  const handleOnCancelClick = () => {
+    startDeleteTransition(() => {
+      onCancel?.(row);
+      setDialogOpen();
+    });
+  };
+
+  return (
+    <Dialog open onOpenChange={setDialogOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{dialogTitle}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
+        <DialogFooter className="gap-2 sm:space-x-0">
+          <DialogClose asChild>
+            <Button variant="outline" onClick={handleOnCancelClick}>
+              {cancelText}
+            </Button>
+          </DialogClose>
+          <Button
+            aria-label={confirmationText}
+            variant="destructive"
+            onClick={handleOnConfirmClick}
+            disabled={isDeletePending}
+          >
+            {isDeletePending && (
+              <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" />
+            )}
+            {confirmationText}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/custom/tanstack-table/fields/tanstack-table-row-actions-custom-dialog.tsx

@@ -0,0 +1,87 @@
+"use client";
+
+import { Loader } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@repo/ayasofyazilim-ui/components/dialog";
+import { TanstackTableRowActionsCustomDialog } from "../types";
+
+type TanstackTableCustomDialogProps<TData> = {
+  row: TData;
+  setDialogOpen: () => void;
+} & TanstackTableRowActionsCustomDialog<TData>;
+export function TanstackTableCustomDialog<TData>({
+  row,
+  title,
+  confirmationText,
+  onCancel,
+  onConfirm,
+  cancelText,
+  content,
+  setDialogOpen,
+}: TanstackTableCustomDialogProps<TData>) {
+  const [isDeletePending, startDeleteTransition] = React.useTransition();
+
+  const dialogTitle = typeof title === "function" ? title(row) : title;
+  const jsxContent =
+    typeof content === "function" ? content(row, setDialogOpen) : content;
+
+  const handleOnConfirmClick = () => {
+    startDeleteTransition(() => {
+      onConfirm?.(row);
+      setDialogOpen();
+    });
+  };
+  const handleOnCancelClick = () => {
+    startDeleteTransition(() => {
+      onCancel?.(row);
+      setDialogOpen();
+    });
+  };
+
+  return (
+    <Dialog open onOpenChange={setDialogOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{dialogTitle}</DialogTitle>
+        </DialogHeader>
+        {jsxContent}
+        {(cancelText || confirmationText) && (
+          <DialogFooter className="gap-2 sm:space-x-0">
+            {cancelText && (
+              <DialogClose asChild>
+                <Button variant="outline" onClick={handleOnCancelClick}>
+                  {cancelText}
+                </Button>
+              </DialogClose>
+            )}
+            {confirmationText && (
+              <Button
+                aria-label={confirmationText}
+                variant="destructive"
+                onClick={handleOnConfirmClick}
+                disabled={isDeletePending}
+              >
+                {isDeletePending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                {confirmationText}
+              </Button>
+            )}
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/custom/tanstack-table/fields/tanstack-table-row-actions.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import { ArrowDown, ArrowUp, Copy, Trash2 } from "lucide-react";
+import { Row, Table } from "@tanstack/react-table";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@repo/ayasofyazilim-ui/components/dropdown-menu";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { TanstackTableRowActionsType } from "../types";
+
+interface TanstackTableRowActionsProps<TData> {
+  actions: TanstackTableRowActionsType<TData>[];
+  row: Row<TData>;
+  setRowAction: (
+    actions: TanstackTableRowActionsType<TData> & { row: TData }
+  ) => void;
+  table: Table<TData>;
+}
+
+export const TanstackTableRowActions = <TData,>({
+  row,
+  setRowAction,
+  actions,
+  table,
+}: TanstackTableRowActionsProps<TData>) => {
+  const availableActions = actions.filter(
+    (i) => !i.condition || (i.condition && i.condition?.(row.original))
+  );
+  if (availableActions.length === 0) return null;
+
+  if (availableActions.length === 1) {
+    return (
+      <ActionButton
+        action={availableActions[0] as TanstackTableRowActionsType<TData>}
+        className="h-9 justify-center rounded-none"
+        setRowAction={setRowAction}
+        table={table}
+        row={row}
+      />
+    );
+  }
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger className="w-full justify-start" asChild>
+        <Button
+          variant="ghost"
+          type="button"
+          className="flex bg-background rounded-none"
+        >
+          Actions
+          <span className="sr-only">Open Menu</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {availableActions.map((action) => {
+          if (action.condition && !action.condition?.(row.original))
+            return null;
+          if (
+            (action.type === "move-row-down" &&
+              row.index === table.getRowCount() - 1) ||
+            (action.type === "move-row-up" && row.index === 0)
+          )
+            return null;
+          return (
+            <DropdownMenuItem key={action.cta}>
+              <ActionButton
+                action={action}
+                table={table}
+                row={row}
+                setRowAction={setRowAction}
+              />
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+function ActionButton<TData>({
+  row,
+  setRowAction,
+  table,
+  action,
+  className,
+}: {
+  action: TanstackTableRowActionsType<TData>;
+  className?: string;
+  row: Row<TData>;
+  setRowAction: (
+    actions: TanstackTableRowActionsType<TData> & { row: TData }
+  ) => void;
+  table: Table<TData>;
+}) {
+  function handleOnActionClick(action: TanstackTableRowActionsType<TData>) {
+    if (action.type === "simple") {
+      action.onClick(row.original);
+      return;
+    }
+    if (action.type === "delete-row") {
+      table.options.meta?.removeRow(row.index, "", null);
+      return;
+    }
+    if (action.type === "duplicate-row") {
+      table.options.meta?.duplicateRow(row.index + 1, row.original);
+      return;
+    }
+    if (action.type === "move-row-up") {
+      table.options.meta?.orderRow(row.index, row.index - 1);
+      return;
+    }
+    if (action.type === "move-row-down") {
+      table.options.meta?.orderRow(row.index, row.index + 1);
+      return;
+    }
+    setRowAction({ ...action, row: row.original });
+  }
+  if (action.type === "move-row-down" && row.index === table.getRowCount() - 1)
+    return null;
+  if (action.type === "move-row-up" && row.index === 0) return null;
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      type="button"
+      className={cn("justify-start w-full", className)}
+      onClick={() => handleOnActionClick(action)}
+    >
+      {action.icon && <action.icon className="w-4 h-4" />}
+      {!action.icon && action.type === "move-row-down" && (
+        <ArrowDown className="w-4 h-4" />
+      )}
+      {!action.icon && action.type === "move-row-up" && (
+        <ArrowUp className="w-4 h-4" />
+      )}
+      {!action.icon && action.type === "duplicate-row" && (
+        <Copy className="w-4 h-4" />
+      )}
+      {!action.icon && action.type === "delete-row" && (
+        <Trash2 className="w-4 h-4" />
+      )}
+      <span className="md:ml-2 in-data-[slot=dropdown-menu-item]:block hidden md:block">
+        {action.cta}
+      </span>
+    </Button>
+  );
+}

package/src/custom/tanstack-table/fields/tanstack-table-table-actions-custom-dialog.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { Loader } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@repo/ayasofyazilim-ui/components/dialog";
+import { TanstackTableActionsCustomDialog } from "../types";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+type TanstackTableCustomDialogProps = {
+  setDialogOpen: () => void;
+} & TanstackTableActionsCustomDialog;
+export function TanstackTableTableCustomDialog({
+  title,
+  confirmationText,
+  onCancel,
+  onConfirm,
+  cancelText,
+  content,
+  setDialogOpen,
+  dialogClassNames,
+}: TanstackTableCustomDialogProps) {
+  const [isDeletePending, startDeleteTransition] = React.useTransition();
+
+  const jsxContent =
+    typeof content === "function" ? content(setDialogOpen) : content;
+
+  const handleOnConfirmClick = () => {
+    startDeleteTransition(() => {
+      onConfirm?.();
+      setDialogOpen();
+    });
+  };
+  const handleOnCancelClick = () => {
+    startDeleteTransition(() => {
+      onCancel?.();
+      setDialogOpen();
+    });
+  };
+
+  return (
+    <Dialog open onOpenChange={setDialogOpen}>
+      <DialogContent className={dialogClassNames?.content}>
+        <DialogHeader className={dialogClassNames?.header}>
+          <DialogTitle className={dialogClassNames?.title}>{title}</DialogTitle>
+        </DialogHeader>
+        {jsxContent}
+        {(confirmationText || cancelText) && (
+          <DialogFooter
+            className={cn("gap-2 sm:space-x-0", dialogClassNames?.footer)}
+          >
+            {cancelText && (
+              <DialogClose asChild>
+                <Button variant="outline" onClick={handleOnCancelClick}>
+                  {cancelText}
+                </Button>
+              </DialogClose>
+            )}
+            {confirmationText && (
+              <Button
+                aria-label={confirmationText}
+                variant="destructive"
+                onClick={handleOnConfirmClick}
+                disabled={isDeletePending}
+              >
+                {isDeletePending && (
+                  <Loader
+                    className="mr-2 size-4 animate-spin"
+                    aria-hidden="true"
+                  />
+                )}
+                {confirmationText}
+              </Button>
+            )}
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/custom/tanstack-table/fields/tanstack-table-table-actions-schemaform-dialog.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@repo/ayasofyazilim-ui/components/dialog";
+import { SchemaForm } from "@repo/ayasofyazilim-ui/custom/schema-form";
+import { TanstackTableActionsSchemaFormDialog } from "../types";
+import { useCallback, useState } from "react";
+
+type TanstackTableSchemaFormDialogProps<TData> = {
+  setDialogOpen: () => void;
+} & TanstackTableActionsSchemaFormDialog<TData>;
+export function TanstackTableTableSchemaFormDialog<TData>(
+  props: TanstackTableSchemaFormDialogProps<TData>
+) {
+  const { title, setDialogOpen, onSubmit } = props;
+  const [formData, setFormData] = useState<TData>(props.formData as TData);
+  const handleFormChange = useCallback(
+    ({ formData: editedFormData }: { formData?: TData }) => {
+      if (editedFormData) {
+        setFormData(editedFormData);
+      }
+    },
+    []
+  );
+  return (
+    <Dialog open onOpenChange={setDialogOpen}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <SchemaForm<TData>
+          {...props}
+          formData={formData}
+          onChange={handleFormChange}
+          onSubmit={({ formData: editedFormData }) => {
+            onSubmit(editedFormData);
+            setDialogOpen();
+          }}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,143 @@
+"use client";
+
+import { Table } from "@tanstack/react-table";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import {
+  TanstackTableFiltersType,
+  TanstackTableSelectedRowActionType,
+  TanstackTableTableActionsType,
+} from "../types";
+import { TanstackTableDateFilter } from "./tanstack-table-filter-date";
+import { TanstackTableFacetedFilter } from "./tanstack-table-filter-faceted";
+import { TanstackTableTextFilter } from "./tanstack-table-filter-text";
+import { TanstackTableViewOptions } from "./tanstack-table-view-options";
+import { Label } from "@repo/ayasofyazilim-ui/components/label";
+
+interface TanstackTableToolbarProps<TData> {
+  title?: string;
+  editable?: boolean;
+  filters?: TanstackTableFiltersType;
+  selectedRowAction?: TanstackTableSelectedRowActionType<TData>;
+  setTableAction: (actions: TanstackTableTableActionsType<TData>) => void;
+  table: Table<TData>;
+  tableActions?: TanstackTableTableActionsType<TData>[];
+  tableData: TData[];
+}
+
+export const TanstackTableToolbar = <TData,>({
+  title,
+  table,
+  filters,
+  tableData,
+  selectedRowAction,
+  tableActions,
+  setTableAction,
+  editable,
+}: TanstackTableToolbarProps<TData>) => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const params = new URLSearchParams(searchParams.toString());
+  const columnNames = table.getAllColumns().map((column) => column.id);
+  function onFilter(accessorKey: string, selectedValues: string) {
+    const newParams = new URLSearchParams(searchParams.toString());
+    if (selectedValues) {
+      newParams.set(accessorKey, selectedValues);
+    } else {
+      newParams.delete(accessorKey);
+    }
+    if (newParams.get(accessorKey) !== searchParams.get(accessorKey)) {
+      router.replace(`${pathname}?${newParams.toString()}`);
+    }
+  }
+  function onFilterMultiple(
+    filter: { accessorKey: string; selectedValues: string }[]
+  ) {
+    const newParams = new URLSearchParams(searchParams.toString());
+    filter.forEach(({ accessorKey, selectedValues }) => {
+      if (selectedValues) {
+        newParams.set(accessorKey, selectedValues);
+      } else {
+        newParams.delete(accessorKey);
+      }
+    });
+    if (newParams.toString() !== searchParams.toString()) {
+      router.replace(`${pathname}?${newParams.toString()}`);
+    }
+  }
+  if (!editable && !tableActions && !title && !filters) return null;
+  return (
+    <div className="flex w-full items-center justify-between p-px">
+      <div className="flex flex-1 h-full flex-wrap items-center gap-x-2">
+        {title && (
+          <Label className="mt-auto text-slate-600" asChild>
+            <p>{title}</p>
+          </Label>
+        )}
+        {filters?.textFilters &&
+          filters.textFilters.map((accessorKey) => (
+            <TanstackTableTextFilter
+              title={filters?.filterTitles?.[accessorKey]}
+              key={accessorKey}
+              column={
+                columnNames.includes(accessorKey)
+                  ? table.getColumn(accessorKey)
+                  : undefined
+              }
+              accessorKey={accessorKey}
+              params={params}
+              onFilter={(accessorKey, selectedValues) =>
+                onFilter(accessorKey, selectedValues)
+              }
+            />
+          ))}
+
+        {filters?.dateFilters &&
+          filters.dateFilters.map((dateItem) => (
+            <TanstackTableDateFilter
+              key={dateItem.label}
+              accessorKey={dateItem.label}
+              column={
+                columnNames.includes(dateItem.label)
+                  ? table.getColumn(dateItem.label)
+                  : undefined
+              }
+              dateItem={dateItem}
+              params={params}
+              onFilter={(accessorKey, selectedValues) =>
+                onFilter(accessorKey, selectedValues)
+              }
+              onFilterMultiple={(filter) => onFilterMultiple(filter)}
+            />
+          ))}
+
+        {filters?.facetedFilters &&
+          Object.keys(filters.facetedFilters)?.map((column) => (
+            <TanstackTableFacetedFilter
+              key={column}
+              column={
+                columnNames.includes(column)
+                  ? table.getColumn(column)
+                  : undefined
+              }
+              accessorKey={column}
+              params={params}
+              onFilter={(accessorKey, selectedValues) => {
+                onFilter(accessorKey, selectedValues);
+              }}
+              title={filters?.facetedFilters?.[column]?.title ?? column}
+              options={filters?.facetedFilters?.[column]?.options ?? []}
+            />
+          ))}
+      </div>
+      <TanstackTableViewOptions
+        table={table}
+        selectedRowAction={selectedRowAction}
+        tableActions={tableActions}
+        setTableAction={setTableAction}
+        tableData={tableData}
+        editable={editable}
+      />
+    </div>
+  );
+};