@ayasofyazilim/ui 0.0.0 → 0.0.2

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

@@ -1,88 +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>
-  );
-}
+"use client";
+
+import { Loader } from "lucide-react";
+import * as React from "react";
+
+import { Button } from "@ayasofyazilim/ui/components/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@ayasofyazilim/ui/components/dialog";
+import { TanstackTableActionsCustomDialog } from "../types";
+import { cn } from "@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

@@ -1,47 +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>
-  );
-}
+"use client";
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@ayasofyazilim/ui/components/dialog";
+import { SchemaForm } from "@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

@@ -1,143 +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>
-  );
-};
+"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 "@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>
+  );
+};