@ayasofyazilim/ui 0.0.0

package/src/custom/stepper.tsx

@@ -0,0 +1,236 @@
+"use client";
+
+import React, {
+  Children,
+  Dispatch,
+  SetStateAction,
+  createContext,
+  useContext,
+  useMemo,
+} from "react";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+export interface ISeparatorProps {
+  vertical?: boolean;
+}
+export const Separator = ({ vertical }: ISeparatorProps) => {
+  const containerClass = `border-muted items-center justify-center flex ${
+    vertical ? "w-1" : "h-8 w-full"
+  }`;
+  const innerClass = `bg-muted w-full ${vertical ? "h-16" : "h-1"}`;
+
+  return (
+    <div className={containerClass}>
+      <div className={innerClass} />
+    </div>
+  );
+};
+
+export interface IStepperContentProps {
+  canGoBack?: boolean;
+  canGoNext?: boolean;
+  children?: React.ReactNode;
+  className?: string;
+  controlsClassName?: string;
+  isBackDisabled?: boolean;
+  isNextDisabled?: boolean;
+  nextButtonText?: string;
+  previousButtonText?: string;
+  title?: string;
+}
+export const StepperContent = ({
+  children,
+  title,
+  canGoBack = true,
+  canGoNext = true,
+  previousButtonText,
+  nextButtonText,
+  isBackDisabled,
+  isNextDisabled,
+  className,
+  controlsClassName,
+}: IStepperContentProps) => {
+  const {
+    previousButtonText: defaultPreviousButtonText,
+    nextButtonText: defaultNextButtonText,
+    onIndexChange,
+    vertical,
+    stepsLength,
+  } = useContext(StepperContext);
+  const [isLastStep, setIsLastStep] = React.useState(false);
+  return (
+    <div id={title} className={cn(vertical ? "w-10/12" : "w-full", className)}>
+      {children}
+      {onIndexChange && (
+        <div className={cn("mt-5 flex justify-between", controlsClassName)}>
+          <div>
+            {canGoBack && (
+              <Button
+                variant="outline"
+                disabled={isBackDisabled}
+                onClick={() =>
+                  onIndexChange((prev) => {
+                    if (prev > 0) {
+                      return prev - 1;
+                    }
+                    return prev;
+                  })
+                }
+              >
+                {previousButtonText || defaultPreviousButtonText}
+              </Button>
+            )}
+          </div>
+          <div>
+            {canGoNext && (
+              <Button
+                disabled={isNextDisabled || isLastStep}
+                onClick={() =>
+                  onIndexChange((prev) => {
+                    if (prev === stepsLength - 1) {
+                      setIsLastStep(true);
+                    }
+                    if (prev < stepsLength - 1) {
+                      return prev + 1;
+                    }
+                    return prev;
+                  })
+                }
+              >
+                {nextButtonText || defaultNextButtonText}
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export interface IStepperHeaderProps {
+  activeItemClassName?: string;
+  activeTabIndex: number;
+  containerClassName?: string;
+  inactiveItemClassName?: string;
+  keysWithSeparator:
+    | (string | { icon: React.ReactNode; index: number; title: string })[]
+    | undefined;
+  vertical?: boolean;
+}
+
+export const StepperHeader = ({
+  keysWithSeparator,
+  activeTabIndex,
+  vertical,
+  containerClassName,
+  activeItemClassName,
+  inactiveItemClassName,
+}: IStepperHeaderProps) => {
+  const containerClass = cn(
+    `flex gap-5 justify-between relative mb-10 ${
+      vertical ? "flex-col items-center w-2/12" : "w-full"
+    }`,
+    containerClassName
+  );
+  const activeItemClass = cn("bg-primary text-white", activeItemClassName);
+  const inactiveItemClass = cn("bg-zinc-200 text-black", inactiveItemClassName);
+
+  return (
+    <div className={containerClass}>
+      {keysWithSeparator?.map((item, index) => {
+        if (typeof item === "string") {
+          return (
+            <Separator
+              key={`separator-${index.toString()}`}
+              vertical={vertical}
+            />
+          );
+        }
+
+        const active = activeTabIndex === item.index;
+        const innerClass = `rounded-full w-8 h-8 items-center justify-center flex text-xs ${
+          active ? activeItemClass : inactiveItemClass
+        }`;
+        const titleContainerClass = `text-sm text-center ${
+          active ? "text-black" : "text-muted-foreground"
+        }`;
+        return (
+          <div key={item.index} className="flex flex-col items-center gap-2">
+            <div className={innerClass}>{item.icon || item.index + 1}</div>
+            <div className={titleContainerClass}>{item.title}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+const StepperContext = createContext({
+  nextButtonText: "Next",
+  previousButtonText: "Previous",
+  // eslint-disable-next-line
+  onIndexChange: (value: SetStateAction<number>) => {},
+  vertical: false,
+  stepsLength: 2,
+});
+export interface IStepperProps {
+  activeTabIndex: number;
+  children?: React.ReactNode[];
+  className?: string;
+  headerProps?: Partial<IStepperHeaderProps>;
+  nextButtonText?: string;
+  onIndexChange: Dispatch<SetStateAction<number>>;
+  previousButtonText?: string;
+  vertical?: boolean;
+}
+
+export default function Stepper({
+  children,
+  activeTabIndex,
+  vertical = false,
+  nextButtonText = "Next",
+  previousButtonText = "Previous",
+  onIndexChange,
+  className,
+  headerProps,
+}: IStepperProps) {
+  const keys = children?.flatMap((child, index) => {
+    const item = React.isValidElement(child)
+      ? {
+          title: (child.props as { title: string }).title || "",
+          icon: (child.props as { icon: string }).icon,
+          index,
+        }
+      : { title: "", icon: "", index };
+    if (index === 0) {
+      return [item];
+    }
+    return ["SEPARATOR", item];
+  });
+  const stepsLength = Children.count(children);
+  const providerProps = useMemo(
+    () => ({
+      nextButtonText,
+      previousButtonText,
+      onIndexChange,
+      vertical,
+      stepsLength,
+    }),
+    [nextButtonText, previousButtonText, onIndexChange, vertical, stepsLength]
+  );
+  const filteredChildren = React.Children.toArray(children)?.[activeTabIndex];
+  return (
+    <StepperContext.Provider value={providerProps}>
+      <div className={cn(vertical ? "flex flex-row gap-10" : "", className)}>
+        <StepperHeader
+          keysWithSeparator={keys}
+          activeTabIndex={activeTabIndex}
+          vertical={vertical}
+          {...headerProps}
+        />
+        {filteredChildren}
+      </div>
+    </StepperContext.Provider>
+  );
+}

package/src/custom/tab-layout.tsx

@@ -0,0 +1,213 @@
+"use client";
+
+import { cva, VariantProps } from "class-variance-authority";
+import Link from "next/link";
+import { usePathname, useSearchParams } from "next/navigation";
+import { ComponentType, ReactNode, Suspense } from "react";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Skeleton } from "@repo/ayasofyazilim-ui/components/skeleton";
+
+type DeepPartial<T> = T extends object
+  ? {
+      [P in keyof T]?: DeepPartial<T[P]>;
+    }
+  : T;
+const defaultClassNames = {
+  vertical: {
+    tabs: "flex h-full overflow-clip md:overflow-hidden block gap-2",
+    tabList:
+      "flex flex-col h-full justify-start max-w-sm overflow-hidden border-b-2 pb-2 mb-2 md:mb-0 mb:border-b-0",
+    tabTrigger: "justify-start md:max-w-lg overflow-hidden w-full",
+    tabContent: "mx-2 my-0 w-full h-full overflow-auto flex-1",
+  },
+  horizontal: {
+    tabs: "flex h-full overflow-hidden flex-col",
+    tabList: "w-full mx:w-max overflow-x-auto overflow-y-hidden min-h-max",
+    tabTrigger: "min-w-max",
+    tabContent: "h-full my-2 overflow-auto",
+  },
+};
+
+const tabsVariants = cva("", {
+  variants: {
+    variant: {
+      default: "",
+      simple: "",
+    },
+    orientation: {
+      horizontal: "md:flex md:h-full md:overflow-hidden flex-col",
+      vertical: "md:flex md:h-full",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "default",
+  },
+});
+
+const tabListVariants = cva("", {
+  variants: {
+    variant: {
+      default:
+        "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      simple: "",
+    },
+    orientation: {
+      horizontal: "w-max mx:w-max overflow-x-auto overflow-y-hidden min-h-max",
+      vertical:
+        "flex flex-col md:h-full justify-start md:max-w-[220px] w-full md:overflow-hidden md:pr-3 md:border-r border-muted",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "default",
+  },
+});
+
+const tabTriggerVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "px-3 py-1 ring-offset-background transition-all focus-visible:ring-2 focus-visible:ring-offset-2 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+        simple:
+          "px-3 py-2 ring-offset-background transition-all rounded-lg focus-visible:ring-2 focus-visible:ring-offset-2 data-[state=active]:bg-muted data-[state=active]:text-foreground",
+      },
+      orientation: {
+        horizontal: "",
+        vertical: "justify-start md:max-w-lg overflow-hidden w-full",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+      variant: "default",
+    },
+  }
+);
+
+const tabContentVariants = cva("", {
+  variants: {
+    variant: {
+      default:
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      simple: "",
+    },
+    orientation: {
+      horizontal: "h-full my-2 overflow-auto",
+      vertical: "my-0 w-full h-full overflow-auto flex-1",
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "default",
+  },
+});
+
+function findActiveTab(tabList: { href: string }[], path: string) {
+  const indexOfActiveTab = path
+    .split("/")
+    .reverse()
+    .findIndex((_, index) => {
+      if (index === 0) {
+        return tabList.find((i) => i.href === path);
+      }
+      const link = path.split("/").slice(0, -index).join("/");
+      return tabList.find((i) => i.href === link);
+    });
+  if (indexOfActiveTab === -1) {
+    return undefined;
+  }
+  if (indexOfActiveTab === 0) {
+    return tabList.find((i) => i.href === path)?.href;
+  }
+  return tabList.find(
+    (i) => i.href === path.split("/").slice(0, -indexOfActiveTab).join("/")
+  )?.href;
+}
+
+export function TabLayout({
+  tabList,
+  children,
+  orientation = "horizontal",
+  classNames,
+  variant = "default",
+}: {
+  tabList: {
+    label: string;
+    href: string;
+    icon?: ComponentType<{ className?: string }>;
+    fallback?: ReactNode;
+    disabled?: boolean;
+  }[];
+  children: ReactNode;
+  orientation?: "horizontal" | "vertical";
+  classNames?: DeepPartial<typeof defaultClassNames>;
+  variant?: VariantProps<typeof tabsVariants>["variant"];
+}) {
+  const tabsClassNames = tabsVariants({ orientation, variant });
+  const tabListClassNames = tabListVariants({ orientation, variant });
+  const tabTriggerClassNames = tabTriggerVariants({ orientation, variant });
+  const tabContentClassNames = tabContentVariants({ orientation, variant });
+  const path = usePathname();
+
+  const searchParams = `?${useSearchParams().toString()}`;
+  const active =
+    findActiveTab(tabList, path + searchParams) ||
+    findActiveTab(tabList, path) ||
+    tabList[0]?.href ||
+    "";
+
+  return (
+    <div
+      className={cn(tabsClassNames, classNames?.[orientation]?.tabs)}
+      role="tabpanel"
+    >
+      <div
+        role="tablist"
+        className={cn(tabListClassNames, classNames?.[orientation]?.tabList)}
+        style={{
+          scrollbarWidth: "thin",
+        }}
+      >
+        {tabList.map((tab) => (
+          <span
+            role="tab"
+            key={tab.href}
+            data-state={tab.href === active ? "active" : "inactive"}
+            className={cn(
+              tabTriggerClassNames,
+              classNames?.[orientation]?.tabTrigger,
+              tab.disabled && "text-muted-foreground cursor-not-allowed"
+            )}
+          >
+            {tab.disabled ? (
+              <span className="w-full overflow-hidden text-elipsis data-[state=active]:sticky data-[state=active]:left-0 data-[state=active]:right-0">
+                {tab.icon && <tab.icon className="block md:hidden" />}
+                {tab.label}
+              </span>
+            ) : (
+              <Link
+                href={tab.href}
+                className="w-full overflow-hidden text-elipsis data-[state=active]:sticky data-[state=active]:left-0 data-[state=active]:right-0"
+              >
+                {tab.icon && <tab.icon className="block md:hidden" />}
+                {tab.label}
+              </Link>
+            )}
+          </span>
+        ))}
+      </div>
+      <div
+        className={cn(
+          tabContentClassNames,
+          classNames?.[orientation]?.tabContent
+        )}
+      >
+        <Suspense fallback={<Skeleton className="flex-1 size-full" />}>
+          {children}
+        </Suspense>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,12 @@
+export * from "./tanstack-table-column-header";
+export * from "./tanstack-table-filter-faceted";
+export * from "./tanstack-table-filter-text";
+export * from "./tanstack-table-pagination";
+export * from "./tanstack-table-row-actions-confirmation";
+export * from "./tanstack-table-row-actions-custom-dialog";
+export * from "./tanstack-table-row-actions";
+export * from "./tanstack-table-table-actions-custom-dialog";
+export * from "./tanstack-table-toolbar";
+export * from "./tanstack-table-view-options";
+export * from "./tanstack-table-plain-table";
+export * from "./tanstack-table-action-dialogs";

package/src/custom/tanstack-table/fields/tanstack-table-action-dialogs.tsx

@@ -0,0 +1,89 @@
+import React, { Dispatch, useEffect } from "react";
+import {
+  TanstackTableConfirmationDialog,
+  TanstackTableCustomDialog,
+  TanstackTableTableCustomDialog,
+} from ".";
+import {
+  TanstackTableRowActionsType,
+  TanstackTableTableActionsType,
+} from "../types";
+import { TanstackTableTableSchemaFormDialog } from "./tanstack-table-table-actions-schemaform-dialog";
+
+export function TanstackTableActionDialogs<TData>({
+  rowAction,
+  setRowAction,
+  tableAction,
+  setTableAction,
+}: {
+  rowAction: (TanstackTableRowActionsType<TData> & { row: TData }) | null;
+  setRowAction: Dispatch<
+    React.SetStateAction<
+      | (TanstackTableRowActionsType<TData> & {
+          row: TData;
+        })
+      | null
+    >
+  >;
+  setTableAction: Dispatch<
+    React.SetStateAction<TanstackTableTableActionsType<TData> | null>
+  >;
+  tableAction: TanstackTableTableActionsType<TData> | null;
+}) {
+  useEffect(() => {
+    if (rowAction?.type === "simple") {
+      rowAction.onClick(rowAction.row);
+      setRowAction(null);
+    }
+  }, [rowAction]);
+
+  return (
+    <>
+      {rowAction?.type === "confirmation-dialog" && (
+        <TanstackTableConfirmationDialog<TData>
+          setDialogOpen={() => setRowAction(null)}
+          row={rowAction.row}
+          title={rowAction.title}
+          description={rowAction.description}
+          confirmationText={rowAction.confirmationText}
+          cancelText={rowAction.cancelText}
+          onConfirm={rowAction.onConfirm}
+          onCancel={rowAction.onCancel}
+          type="confirmation-dialog"
+        />
+      )}
+      {rowAction?.type === "custom-dialog" && (
+        <TanstackTableCustomDialog<TData>
+          setDialogOpen={() => setRowAction(null)}
+          row={rowAction.row}
+          title={rowAction.title}
+          content={rowAction.content}
+          confirmationText={rowAction.confirmationText}
+          cancelText={rowAction.cancelText}
+          onConfirm={rowAction.onConfirm}
+          onCancel={rowAction.onCancel}
+          type="custom-dialog"
+        />
+      )}
+      {tableAction?.type === "custom-dialog" && (
+        <TanstackTableTableCustomDialog
+          setDialogOpen={() => setTableAction(null)}
+          title={tableAction.title}
+          type="custom-dialog"
+          content={tableAction.content}
+          confirmationText={tableAction.confirmationText}
+          cancelText={tableAction.cancelText}
+          onConfirm={tableAction.onConfirm}
+          onCancel={tableAction.onCancel}
+          dialogClassNames={tableAction.dialogClassNames}
+        />
+      )}
+      {tableAction?.type === "schemaform-dialog" && (
+        <TanstackTableTableSchemaFormDialog<TData>
+          setDialogOpen={() => setTableAction(null)}
+          {...tableAction}
+        />
+      )}
+    </>
+  );
+}

package/src/custom/tanstack-table/fields/tanstack-table-column-header.tsx

@@ -0,0 +1,66 @@
+import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from "lucide-react";
+import { Column } from "@tanstack/react-table";
+
+import { HTMLAttributes } from "react";
+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";
+
+interface TanstackTableColumnHeaderProps<TData, TValue>
+  extends HTMLAttributes<HTMLDivElement> {
+  column: Column<TData, TValue>;
+  title: string;
+}
+
+export function TanstackTableColumnHeader<TData, TValue>({
+  column,
+  title,
+  className,
+}: TanstackTableColumnHeaderProps<TData, TValue>) {
+  if (!column.getCanSort()) {
+    return <div className={cn(className)}>{title}</div>;
+  }
+
+  return (
+    <div className={cn("flex items-center w-full space-x-2 mx-2", className)}>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="sm"
+            className="-ml-3 h-8 data-[state=open]:bg-accent w-full justify-between"
+          >
+            <span>{title}</span>
+            {column.getIsSorted() === "desc" ? (
+              <ArrowDownIcon className="ml-2 h-4 w-4" />
+            ) : column.getIsSorted() === "asc" ? (
+              <ArrowUpIcon className="ml-2 h-4 w-4" />
+            ) : (
+              <ChevronsUpDownIcon className="ml-2 h-4 w-4" />
+            )}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start">
+          <DropdownMenuItem onClick={() => column.toggleSorting(false)}>
+            <ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Asc
+          </DropdownMenuItem>
+          <DropdownMenuItem onClick={() => column.toggleSorting(true)}>
+            <ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Desc
+          </DropdownMenuItem>
+          {/* <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
+            <EyeNoneIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+            Hide
+          </DropdownMenuItem> */}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+}