@ayasofyazilim/ui 0.0.0

package/src/custom/tanstack-table/utils/editable-columns-by-row-data.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import { ColumnDef } from "@tanstack/react-table";
+import { useEffect, useState } from "react";
+import { Input } from "@repo/ayasofyazilim-ui/components/input";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@repo/ayasofyazilim-ui/components/select";
+import { Switch } from "@repo/ayasofyazilim-ui/components/switch";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { createCell, tanstackTableCreateTitleWithLanguageData } from ".";
+import { TanstackTableColumnHeader } from "../fields";
+import {
+  TanstackTableCreateColumnsByRowId,
+  TanstacktableEditableColumnsByRowId,
+} from "../types";
+import { DatePicker } from "@repo/ayasofyazilim-ui/custom/date-picker";
+
+export function tanstackTableEditableColumnsByRowData<T>(
+  params: TanstacktableEditableColumnsByRowId<T> &
+    Omit<TanstackTableCreateColumnsByRowId<T>, "rows" | "selectableRows">
+) {
+  const {
+    rows,
+    excludeColumns,
+    languageData,
+    editableColumns,
+    config,
+    faceted,
+    links,
+    badges,
+    classNames,
+    custom,
+    expandRowTrigger,
+    icons,
+    localization,
+  } = params;
+  const columns: ColumnDef<T>[] = [];
+
+  Object.keys(rows)
+    .filter((key) => !excludeColumns?.includes(key as keyof T))
+    .forEach((accessorKey) => {
+      const title = tanstackTableCreateTitleWithLanguageData({
+        languageData,
+        accessorKey,
+      });
+      const column: ColumnDef<T> = {
+        id: accessorKey,
+        accessorKey,
+        meta: title,
+        header: ({ column }) => (
+          <TanstackTableColumnHeader column={column} title={title} />
+        ),
+        cell: ({ getValue, row, column: { id }, table }) => {
+          const _accesorKey = accessorKey as keyof T;
+          if (editableColumns && !editableColumns.includes(_accesorKey)) {
+            return createCell<T>({
+              accessorKey: _accesorKey,
+              row,
+              link: links?.[_accesorKey],
+              faceted: faceted?.[_accesorKey]?.options,
+              badge: badges?.[_accesorKey],
+              icon: icons?.[_accesorKey],
+              className: classNames?.[_accesorKey],
+              expandRowTrigger: expandRowTrigger === _accesorKey,
+              format: rows[accessorKey]?.format,
+              custom: custom?.[_accesorKey],
+              config,
+              localization,
+            });
+          }
+          const initialValue = (getValue() as string)?.toString() || "";
+          const [value, setValue] = useState(initialValue);
+          const rowId = row.index.toString();
+          const isRowSelected = table.getRow(rowId)?.getIsSelected();
+
+          // When the input is blurred, we'll call our table meta's updateData function
+          const onBlur = () => {
+            let $value: string | number | boolean;
+            switch (rows[accessorKey]?.type) {
+              case "number":
+                $value = Number(value);
+                break;
+              case "boolean":
+                $value = value === "true";
+                break;
+              default:
+                $value = value;
+            }
+            table.options.meta?.updateData(row.index, id, $value);
+          };
+
+          function handleValueChange(newValue: string) {
+            setValue(newValue);
+            if (isRowSelected && newValue === initialValue) {
+              table.setRowSelection((old) => ({
+                ...old,
+                [rowId]: false,
+              }));
+              return;
+            }
+
+            if (!isRowSelected && newValue !== initialValue) {
+              table.setRowSelection((old) => ({
+                ...old,
+                [rowId]: true,
+              }));
+            }
+          }
+
+          useEffect(() => {
+            setValue(initialValue);
+          }, [initialValue]);
+
+          if (rows[accessorKey]?.enum) {
+            return (
+              <Select
+                value={value as string}
+                onValueChange={(_value) => {
+                  handleValueChange(_value);
+                  const $value =
+                    rows[accessorKey]?.type === "number"
+                      ? Number(_value)
+                      : _value;
+                  table.options.meta?.updateData(row.index, id, $value);
+                }}
+              >
+                <SelectTrigger
+                  className={cn(
+                    "w-[180px] min-w-max border-none rounded-none focus-visible:border-none focus-within:border-none ring-0 focus-visible:ring-0 focus-within:ring-0 ring-transparent shadow-none",
+                    isRowSelected ? "font-medium italic" : "",
+                    !value && "text-muted-foreground"
+                  )}
+                >
+                  <SelectValue
+                    placeholder={
+                      (languageData?.[
+                        accessorKey as keyof typeof languageData
+                      ] as string) || accessorKey
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    {rows[accessorKey]?.enum?.map((item) => (
+                      <SelectItem key={item.value} value={item.value}>
+                        {item.label}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            );
+          }
+          if (rows[accessorKey]?.type === "boolean") {
+            return (
+              <div className="text-center">
+                <Switch
+                  className="align-middle"
+                  checked={value === "true"}
+                  onBlur={onBlur}
+                  onCheckedChange={(_value) => {
+                    handleValueChange(String(value));
+                    table.options.meta?.updateData(row.index, id, _value);
+                  }}
+                />
+              </div>
+            );
+          }
+          if (rows[accessorKey]?.format === "date-time") {
+            const date = new Date(value);
+            return (
+              <div className="text-center">
+                <DatePicker
+                  id={`${accessorKey}_date`}
+                  defaultValue={
+                    date instanceof Date && !Number.isNaN(date.getTime())
+                      ? date
+                      : undefined
+                  }
+                  onChange={(date) => {
+                    const $value =
+                      rows[accessorKey]?.format === "date-time"
+                        ? date?.toISOString()
+                        : date;
+                    table.options.meta?.updateData(row.index, id, $value);
+                  }}
+                  classNames={{
+                    dateInput: "border-none rounded-none",
+                  }}
+                />
+              </div>
+            );
+          }
+          return (
+            <Input
+              value={value as string}
+              className={cn(
+                "w-full border-none rounded-none focus-visible:border-none focus-within:border-none ring-0 focus-visible:ring-0 focus-within:ring-0 ring-transparent shadow-none",
+                isRowSelected ? "font-medium italic" : ""
+              )}
+              placeholder={accessorKey}
+              onChange={(e) => {
+                handleValueChange(e.target.value);
+              }}
+              onBlur={onBlur}
+            />
+          );
+        },
+      };
+      columns.push(column);
+    });
+  return columns;
+}

package/src/custom/tanstack-table/utils/faceted-boolean-options.tsx

@@ -0,0 +1,22 @@
+import { CheckCircle, XCircle } from "lucide-react";
+
+export const BooleanOptions = {
+  options: [
+    {
+      label: "Yes",
+      when: (value: string | number | boolean | Date) => Boolean(value),
+      value: "true",
+      icon: CheckCircle,
+      iconClassName: "text-green-700",
+      hideColumnValue: true,
+    },
+    {
+      label: "No",
+      when: (value: string | number | boolean | Date) => !value,
+      value: "false",
+      icon: XCircle,
+      iconClassName: "text-red-700",
+      hideColumnValue: true,
+    },
+  ],
+};

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

@@ -0,0 +1,10 @@
+"use client";
+
+export * from "./table";
+export * from "./column-names";
+export * from "./cell-with-actions";
+export * from "./columns-by-row-data";
+export * from "./editable-columns-by-row-data";
+export * from "./pinning-styles";
+export * from "./test-conditions";
+export * from "./faceted-boolean-options";

package/src/custom/tanstack-table/utils/pinning-styles.ts

@@ -0,0 +1,57 @@
+import { Column } from "@tanstack/react-table";
+import { CSSProperties } from "react";
+
+export function getCommonPinningStyles<TData>({
+  column,
+  fillerColumn,
+  withBorder,
+  resizeable,
+}: {
+  resizeable?: boolean;
+  column: Column<TData>;
+  fillerColumn?: keyof TData;
+
+  /**
+   * Show box shadow between pinned and scrollable columns.
+   * @default false
+   */
+  withBorder?: boolean;
+}): CSSProperties {
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn =
+    isPinned === "left" && column.getIsLastColumn("left");
+  const isFirstRightPinnedColumn =
+    isPinned === "right" && column.getIsFirstColumn("right");
+
+  let width: string | number = column.getSize();
+  if (resizeable) {
+    if (fillerColumn === column.id) {
+      width = 2000;
+    } else {
+      width = column.getSize();
+    }
+  } else if (fillerColumn === column.id) {
+    width = "100%";
+  } else {
+    width = column.getSize();
+  }
+
+  return {
+    boxShadow: withBorder
+      ? isLastLeftPinnedColumn
+        ? "-4px 0 4px -4px var(--border) inset"
+        : isFirstRightPinnedColumn
+          ? "4px 0 4px -4px var(--border) inset"
+          : undefined
+      : undefined,
+    left: isPinned === "left" ? `${column.getStart("left")}px` : undefined,
+    right: isPinned === "right" ? `${column.getAfter("right")}px` : undefined,
+    opacity: isPinned ? 0.97 : 1,
+    width,
+    position: isPinned ? "sticky" : "relative",
+    background: isPinned ? "var(--background)" : "",
+    zIndex: isPinned ? 1 : 0,
+    textWrap: "nowrap",
+    ...(column.id === "select" && { minWidth: "40px", padding: 0 }),
+  };
+}

package/src/custom/tanstack-table/utils/table.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { ColumnFiltersState } from "@tanstack/react-table";
+import { useState, useEffect } from "react";
+import {
+  EditableTanstackTableProps,
+  NonEditableTanstackTableProps,
+} from "../types";
+
+export function NonEditableTanstackTable<TData>(
+  data: TData[],
+  rowCount: number
+): NonEditableTanstackTableProps<TData> {
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
+
+  const [pagination, setPagination] = useState<{
+    pageIndex: number;
+    pageSize: number;
+  }>({ pageIndex: 0, pageSize: 10 });
+
+  return {
+    data,
+    rowCount,
+    pagination,
+    columnFilters,
+    onPaginationChange: setPagination,
+    onColumnFiltersChange: setColumnFilters,
+  };
+}
+
+export function EditableTanstackTable<TData>({
+  initialData,
+  onTableDataChange,
+}: {
+  initialData: TData[];
+  onTableDataChange?: (data: TData[]) => void;
+}): EditableTanstackTableProps<TData> {
+  const [tableData, setTableData] = useState<TData[]>(initialData);
+  useEffect(() => {
+    // When user submits the form, the initialData changes with the new data
+    // so we need to update the table data
+    setTableData(initialData);
+  }, [initialData]);
+
+  return {
+    data: tableData,
+    meta: {
+      removeRow: (rowIndex) => {
+        const newData = [...tableData];
+        newData.splice(rowIndex, 1);
+        setTableData(newData);
+        onTableDataChange?.(newData);
+      },
+      updateData: (rowIndex, columnId, value) => {
+        const newData = [...tableData];
+        newData[rowIndex] = {
+          ...newData[rowIndex],
+          [columnId]: value,
+        } as TData;
+        setTableData(newData);
+        onTableDataChange?.(newData);
+      },
+      addRow: () => {
+        const newData = [...tableData, {} as TData];
+        setTableData(newData);
+        onTableDataChange?.(newData);
+      },
+      duplicateRow: (rowIndex, value) => {
+        const newData = [...tableData];
+        newData.splice(rowIndex, 0, value);
+        setTableData(newData);
+        onTableDataChange?.(newData);
+      },
+      orderRow: (newIndex, oldIndex) => {
+        const newData = [...tableData];
+        const item = newData.splice(oldIndex, 1)[0] as TData;
+        newData.splice(newIndex, 0, item);
+        setTableData(newData);
+        onTableDataChange?.(newData);
+      },
+    },
+  };
+}

package/src/custom/tanstack-table/utils/test-conditions.ts

@@ -0,0 +1,17 @@
+import { Row } from "@tanstack/react-table";
+import { TanstackTableCellCondition } from "../types";
+
+export function testConditions<T>(
+  conditions: TanstackTableCellCondition[] | undefined,
+  row: Row<T>
+) {
+  if (!conditions) return true;
+
+  return (
+    conditions
+      .map((condition) =>
+        condition.when(row.getValue(condition.conditionAccessorKey))
+      )
+      .filter((i) => !i).length === 0
+  );
+}

package/src/custom/timeline.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+// Types
+type TimelineContextValue = {
+  activeStep: number;
+  setActiveStep: (step: number) => void;
+};
+
+// Context
+const TimelineContext = React.createContext<TimelineContextValue | undefined>(
+  undefined
+);
+
+const useTimeline = () => {
+  const context = React.useContext(TimelineContext);
+  if (!context) {
+    throw new Error("useTimeline must be used within a Timeline");
+  }
+  return context;
+};
+
+// Components
+interface TimelineProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultValue?: number;
+  value?: number;
+  onValueChange?: (value: number) => void;
+  orientation?: "horizontal" | "vertical";
+}
+
+function Timeline({
+  defaultValue = 1,
+  value,
+  onValueChange,
+  orientation = "vertical",
+  className,
+  ...props
+}: TimelineProps) {
+  const [activeStep, setInternalStep] = React.useState(defaultValue);
+
+  const setActiveStep = React.useCallback(
+    (step: number) => {
+      if (value === undefined) {
+        setInternalStep(step);
+      }
+      onValueChange?.(step);
+    },
+    [value, onValueChange]
+  );
+
+  const currentStep = value ?? activeStep;
+
+  return (
+    <TimelineContext.Provider
+      value={{ activeStep: currentStep, setActiveStep }}
+    >
+      <div
+        data-slot="timeline"
+        className={cn(
+          "group/timeline flex data-[orientation=horizontal]:w-full data-[orientation=horizontal]:flex-row data-[orientation=vertical]:flex-col",
+          className
+        )}
+        data-orientation={orientation}
+        {...props}
+      />
+    </TimelineContext.Provider>
+  );
+}
+
+// TimelineContent
+function TimelineContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="timeline-content"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+// TimelineDate
+interface TimelineDateProps extends React.HTMLAttributes<HTMLTimeElement> {
+  asChild?: boolean;
+}
+
+function TimelineDate({
+  asChild = false,
+  className,
+  ...props
+}: TimelineDateProps) {
+  const Comp = asChild ? Slot.Root : "time";
+
+  return (
+    <Comp
+      data-slot="timeline-date"
+      className={cn(
+        "mb-1 block text-xs font-medium text-muted-foreground group-data-[orientation=vertical]/timeline:max-sm:h-4",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+// TimelineHeader
+function TimelineHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div data-slot="timeline-header" className={cn(className)} {...props} />
+  );
+}
+
+// TimelineIndicator
+interface TimelineIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+}
+
+function TimelineIndicator({
+  className,
+  children,
+  ...props
+}: TimelineIndicatorProps) {
+  return (
+    <div
+      data-slot="timeline-indicator"
+      className={cn(
+        "absolute size-4 rounded-full border-2 border-primary/20 group-data-completed/timeline-item:border-primary group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:left-0 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:top-0 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:-translate-x-1/2",
+        className
+      )}
+      aria-hidden="true"
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+// TimelineItem
+interface TimelineItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  step: number;
+}
+
+function TimelineItem({ step, className, ...props }: TimelineItemProps) {
+  const { activeStep } = useTimeline();
+
+  return (
+    <div
+      data-slot="timeline-item"
+      className={cn(
+        "group/timeline-item relative flex flex-1 flex-col gap-0.5 group-data-[orientation=horizontal]/timeline:mt-8 group-data-[orientation=horizontal]/timeline:not-last:pe-8 group-data-[orientation=vertical]/timeline:ms-8 group-data-[orientation=vertical]/timeline:not-last:pb-12 has-[+[data-completed]]:**:data-[slot=timeline-separator]:bg-primary",
+        className
+      )}
+      data-completed={step <= activeStep || undefined}
+      {...props}
+    />
+  );
+}
+
+// TimelineSeparator
+function TimelineSeparator({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="timeline-separator"
+      className={cn(
+        "absolute self-start bg-primary/10 group-last/timeline-item:hidden group-data-[orientation=horizontal]/timeline:-top-6 group-data-[orientation=horizontal]/timeline:h-0.5 group-data-[orientation=horizontal]/timeline:w-[calc(100%-1rem-0.25rem)] group-data-[orientation=horizontal]/timeline:translate-x-4.5 group-data-[orientation=horizontal]/timeline:-translate-y-1/2 group-data-[orientation=vertical]/timeline:-left-6 group-data-[orientation=vertical]/timeline:h-[calc(100%-1rem-0.25rem)] group-data-[orientation=vertical]/timeline:w-0.5 group-data-[orientation=vertical]/timeline:-translate-x-1/2 group-data-[orientation=vertical]/timeline:translate-y-4.5",
+        className
+      )}
+      aria-hidden="true"
+      {...props}
+    />
+  );
+}
+
+// TimelineTitle
+function TimelineTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      data-slot="timeline-title"
+      className={cn("text-sm font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Timeline,
+  TimelineContent,
+  TimelineDate,
+  TimelineHeader,
+  TimelineIndicator,
+  TimelineItem,
+  TimelineSeparator,
+  TimelineTitle,
+};