@ayasofyazilim/ui 0.0.0

package/src/custom/master-data-grid/utils/pinning-utils.ts

@@ -0,0 +1,88 @@
+import type { Header, Cell } from "@tanstack/react-table";
+import type { CSSProperties } from "react";
+
+export function getPinningHeaderStyles<TData>(
+  header: Header<TData, unknown>
+): CSSProperties {
+  const pinned = header.column.getIsPinned();
+  const isActions = header.column.id === "actions";
+  return {
+    left: pinned === "left" ? `${header.column.getStart("left")}px` : undefined,
+    right:
+      pinned === "right" ? `${header.column.getAfter("right")}px` : undefined,
+    position: pinned ? "sticky" : "relative",
+    zIndex: pinned ? 1 : 0,
+    maxWidth: isActions ? "40px" : undefined,
+  };
+}
+
+export function getPinningHeaderClassNames<TData>(
+  header: Header<TData, unknown>
+): string {
+  const pinned = header.column.getIsPinned();
+  const classes: string[] = [];
+
+  if (pinned) {
+    classes.push("bg-background");
+  }
+  if (pinned === "left") {
+    classes.push("shadow-[2px_0_4px_-2px_rgba(0,0,0,0.1)]");
+  }
+  if (pinned === "right") {
+    classes.push("shadow-[-2px_0_4px_-2px_rgba(0,0,0,0.1)]");
+  }
+
+  return classes.join(" ");
+}
+
+export function getPinningCellStyles<TData>(
+  cell: Cell<TData, unknown>
+): CSSProperties {
+  const pinned = cell.column.getIsPinned();
+  const isActions = cell.column.id === "actions";
+  if (isActions) {
+    return {
+      width: "40px",
+      minWidth: "40px",
+      maxWidth: "40px",
+      left: pinned === "left" ? `${cell.column.getStart("left")}px` : undefined,
+      right:
+        pinned === "right" ? `${cell.column.getAfter("right")}px` : undefined,
+      position: pinned ? "sticky" : "relative",
+      zIndex: pinned ? 1 : 0,
+    };
+  }
+  return {
+    width: cell.column.getSize(),
+    minWidth: pinned
+      ? cell.column.getSize()
+      : cell.column.columnDef.minSize || cell.column.getSize(),
+    maxWidth: pinned
+      ? cell.column.columnDef.maxSize
+      : cell.column.columnDef.maxSize || cell.column.getSize(),
+    left: pinned === "left" ? `${cell.column.getStart("left")}px` : undefined,
+    right:
+      pinned === "right" ? `${cell.column.getAfter("right")}px` : undefined,
+    position: pinned ? "sticky" : "relative",
+    zIndex: pinned ? 1 : 0,
+  };
+}
+
+export function getPinningCellClassNames<TData>(
+  cell: Cell<TData, unknown>
+): string {
+  const pinned = cell.column.getIsPinned();
+  const classes: string[] = [];
+
+  if (pinned) {
+    classes.push("bg-background", "overflow-hidden", "text-ellipsis");
+  }
+  if (pinned === "left") {
+    classes.push("shadow-[2px_0_4px_-2px_rgba(0,0,0,0.1)]");
+  }
+  if (pinned === "right") {
+    classes.push("shadow-[-2px_0_4px_-2px_rgba(0,0,0,0.1)]");
+  }
+
+  return classes.join(" ");
+}

package/src/custom/master-data-grid/utils/translation-utils.ts

@@ -0,0 +1,42 @@
+import type { Column } from "@tanstack/react-table";
+import type { MasterDataGridResources } from "../types";
+
+export function getTranslations(
+  key: string,
+  t?: MasterDataGridResources,
+  replacements?: Record<string, string>
+): string {
+  let text = t?.[key] ?? key;
+
+  if (replacements) {
+    Object.entries(replacements).forEach(([placeholder, value]) => {
+      text = text.replace(`{${placeholder}}`, value);
+    });
+  }
+
+  return text;
+}
+
+export function getColumnName<TData>(
+  column: Column<TData> | string,
+  t?: MasterDataGridResources,
+  fallback?: string
+): string {
+  if (typeof column === "string") {
+    const translationKey = `column.${column}`;
+    const translated = getTranslations(translationKey, t);
+    if (translated !== translationKey) {
+      return translated;
+    }
+    return fallback ?? column;
+  }
+  const translationKey = `column.${column.id}`;
+  if (t?.[translationKey]) {
+    return t[translationKey];
+  }
+  const header = column.columnDef.header;
+  if (typeof header === "string") {
+    return header;
+  }
+  return column.id;
+}

package/src/custom/multi-select.tsx

@@ -0,0 +1,432 @@
+"use client";
+
+// src/components/multi-select.tsx
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import {
+  CheckIcon,
+  XCircle,
+  ChevronDown,
+  XIcon,
+  WandSparkles,
+} from "lucide-react";
+
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import { Separator } from "@repo/ayasofyazilim-ui/components/separator";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import { Badge } from "@repo/ayasofyazilim-ui/components/badge";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@repo/ayasofyazilim-ui/components/popover";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@repo/ayasofyazilim-ui/components/command";
+
+/**
+ * Variants for the multi-select component to handle different styles.
+ * Uses class-variance-authority (cva) to define different styles based on "variant" prop.
+ */
+const multiSelectVariants = cva(
+  "m-1 transition ease-in-out delay-150 hover:-translate-y-1 hover:scale-110 duration-300",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-foreground/10 text-foreground bg-card hover:bg-card/80",
+        secondary:
+          "border-foreground/10 bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        inverted: "inverted",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+/**
+ * Props for MultiSelect component
+ */
+export interface MultiSelectProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof multiSelectVariants> {
+  /**
+   * Animation duration in seconds for the visual effects (e.g., bouncing badges).
+   * Optional, defaults to 0 (no animation).
+   */
+  animation?: number;
+
+  /**
+   * If true, renders the multi-select component as a child of another component.
+   * Optional, defaults to false.
+   */
+  asChild?: boolean;
+
+  /**
+   * Additional class names to apply custom styles to the multi-select component.
+   * Optional, can be used to add custom styles.
+   */
+  className?: string;
+
+  /** The default selected values when the component mounts. */
+  defaultValue?: string[];
+
+  /**
+   * Maximum number of items to display. Extra selected items will be summarized.
+   * Optional, defaults to 3.
+   */
+  maxCount?: number;
+
+  /**
+   * The modality of the popover. When set to true, interaction with outside elements
+   * will be disabled and only popover content will be visible to screen readers.
+   * Optional, defaults to false.
+   */
+  modalPopover?: boolean;
+
+  /**
+   * Callback function triggered when the selected values change.
+   * Receives an array of the new selected values.
+   */
+  onValueChange?: (value: string[]) => void;
+
+  /**
+   * An array of option objects to be displayed in the multi-select component.
+   * Each option object has a label, value, and an optional icon.
+   */
+  options: {
+    /** Optional icon component to display alongside the option. */
+    icon?: React.ComponentType<{ className?: string }>;
+    /** The text to display for the option. */
+    label: string;
+    /** The unique value associated with the option. */
+    value: string;
+    /** Optional badge component to display alongside the option. */
+    children?: React.ReactNode;
+    disabled?: boolean;
+  }[];
+
+  /**
+   * Placeholder text to be displayed when no values are selected.
+   * Optional, defaults to "Select options".
+   */
+  placeholder?: string;
+
+  /**
+   * selectAllLabel text to be displayed for select all option.
+   * Optional, defaults to "Select all".
+   */
+  selectAllLabel?: string;
+
+  /**
+   * If true, the multi-select component will be disabled.
+   * Optional, defaults to false.
+   */
+  disabled?: boolean;
+}
+
+export const MultiSelect = React.forwardRef<
+  HTMLButtonElement,
+  MultiSelectProps
+>(
+  (
+    {
+      options,
+      onValueChange,
+      variant,
+      defaultValue = [],
+      placeholder = "Select options",
+      selectAllLabel = "Select all",
+      animation = 0,
+      maxCount = 3,
+      modalPopover = false,
+      className,
+      disabled,
+      ...props
+    },
+    ref
+  ) => {
+    const [selectedValues, setSelectedValues] =
+      React.useState<string[]>(defaultValue);
+    const previousDefaultValue = React.useRef<string[]>(defaultValue);
+    React.useEffect(() => {
+      if (
+        JSON.stringify(previousDefaultValue.current) !==
+        JSON.stringify(defaultValue)
+      ) {
+        setSelectedValues(defaultValue);
+        previousDefaultValue.current = defaultValue;
+      }
+    }, [defaultValue]);
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    const [isAnimating, setIsAnimating] = React.useState(false);
+
+    const handleInputKeyDown = (
+      event: React.KeyboardEvent<HTMLInputElement>
+    ) => {
+      if (event.key === "Enter") {
+        setIsPopoverOpen(true);
+      } else if (event.key === "Backspace" && !event.currentTarget.value) {
+        const newSelectedValues = [...selectedValues];
+        newSelectedValues.pop();
+        setSelectedValues(newSelectedValues);
+        if (onValueChange) onValueChange(newSelectedValues);
+      }
+    };
+
+    const toggleOption = (option: string) => {
+      const newSelectedValues = selectedValues.includes(option)
+        ? selectedValues.filter((value) => value !== option)
+        : [...selectedValues, option];
+      setSelectedValues(newSelectedValues);
+      if (onValueChange) onValueChange(newSelectedValues);
+    };
+
+    const handleClear = () => {
+      setSelectedValues(
+        selectedValues.filter(
+          (value) => !options.map((o) => !o.disabled && o.value).includes(value)
+        )
+      );
+      if (onValueChange) onValueChange([]);
+    };
+
+    const handleTogglePopover = () => {
+      setIsPopoverOpen((prev) => !prev);
+    };
+
+    const clearExtraOptions = () => {
+      const newSelectedValues = selectedValues.slice(0, maxCount);
+      setSelectedValues(newSelectedValues);
+      if (onValueChange) onValueChange(newSelectedValues);
+    };
+
+    const toggleAll = () => {
+      if (selectedValues.length === options.length) {
+        handleClear();
+      } else {
+        const allValues = options.map((option) => option.value);
+        setSelectedValues(allValues);
+        if (onValueChange) onValueChange(allValues);
+      }
+    };
+
+    return (
+      <Popover
+        open={isPopoverOpen}
+        onOpenChange={setIsPopoverOpen}
+        modal={modalPopover}
+      >
+        <PopoverTrigger asChild className="w-full">
+          <Button
+            ref={ref}
+            data-testid={props.id}
+            type="button"
+            disabled={disabled}
+            onClick={handleTogglePopover}
+            className={cn(
+              "flex w-full p-1 rounded-md border min-h-9 h-auto items-center justify-between bg-inherit hover:bg-inherit",
+              className
+            )}
+          >
+            {selectedValues.length > 0 ? (
+              <div className="flex justify-between items-center w-full">
+                <div className="flex flex-wrap items-center">
+                  {selectedValues.slice(0, maxCount).map((value) => {
+                    const option = options.find((o) => o.value === value);
+                    const IconComponent = option?.icon;
+                    return (
+                      <Badge
+                        key={value}
+                        className={cn(
+                          isAnimating ? "animate-bounce" : "",
+                          multiSelectVariants({ variant })
+                        )}
+                        style={{ animationDuration: `${animation}s` }}
+                      >
+                        {IconComponent && (
+                          <IconComponent className="h-4 w-4 mr-2" />
+                        )}
+                        {option?.label}
+                        {!option?.disabled && (
+                          <XCircle
+                            className="ml-2 h-4 w-4 cursor-pointer"
+                            onClick={(event) => {
+                              event.stopPropagation();
+                              toggleOption(value);
+                            }}
+                          />
+                        )}
+                      </Badge>
+                    );
+                  })}
+                  {selectedValues.length > maxCount && (
+                    <Badge
+                      className={cn(
+                        "bg-transparent text-foreground border-foreground/1 hover:bg-transparent",
+                        isAnimating ? "animate-bounce" : "",
+                        multiSelectVariants({ variant })
+                      )}
+                      style={{ animationDuration: `${animation}s` }}
+                    >
+                      {`+ ${selectedValues.length - maxCount} more`}
+                      <XCircle
+                        className="ml-2 h-4 w-4 cursor-pointer"
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          clearExtraOptions();
+                        }}
+                      />
+                    </Badge>
+                  )}
+                </div>
+                <div className="flex items-center justify-between">
+                  {options.filter((x) => x.disabled).length !==
+                    options.length && (
+                    <XIcon
+                      className="h-4 mx-2 cursor-pointer text-muted-foreground"
+                      onClick={(event) => {
+                        event.stopPropagation();
+                        handleClear();
+                      }}
+                    />
+                  )}
+                  <Separator
+                    orientation="vertical"
+                    className="flex min-h-6 h-full"
+                  />
+                  <ChevronDown className="h-4 mx-2 cursor-pointer text-muted-foreground" />
+                </div>
+              </div>
+            ) : (
+              <div className="flex items-center justify-between w-full mx-auto">
+                <span className="text-sm text-black mx-3 font-normal">
+                  {placeholder}
+                </span>
+                <ChevronDown className="h-4 cursor-pointer text-muted-foreground mx-2" />
+              </div>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="p-0"
+          onEscapeKeyDown={() => setIsPopoverOpen(false)}
+        >
+          <Command className="w-full">
+            <CommandInput
+              data-testid={`${props.id}_search`}
+              placeholder="Search..."
+              onKeyDown={handleInputKeyDown}
+            />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup>
+                <CommandItem
+                  data-testid={`${props.id}_select_all`}
+                  key="all"
+                  onSelect={toggleAll}
+                  className="cursor-pointer"
+                  disabled={
+                    options.filter((x) => x.disabled).length === options.length
+                  }
+                >
+                  <div
+                    className={cn(
+                      "mr-2 flex h-4 w-4 items-center justify-center rounded-sm border border-primary",
+                      selectedValues.length === options.length
+                        ? "bg-primary text-primary-foreground"
+                        : "opacity-50 [&_svg]:invisible"
+                    )}
+                  >
+                    <CheckIcon className="h-4 w-4" />
+                  </div>
+                  <span>({selectAllLabel})</span>
+                </CommandItem>
+                {options.map((option) => {
+                  const isSelected = selectedValues.includes(option.value);
+                  return (
+                    <CommandItem
+                      data-testid={`${props.id}_${option.value}`}
+                      key={option.value}
+                      onSelect={() => toggleOption(option.value)}
+                      className="cursor-pointer"
+                      disabled={option.disabled}
+                    >
+                      <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="h-4 w-4" />
+                      </div>
+                      {option.icon && (
+                        <option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+                      )}
+                      <span>{option.label}</span>
+                      {option.children}
+                    </CommandItem>
+                  );
+                })}
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup>
+                <div className="flex items-center justify-between">
+                  {selectedValues.length > 0 && (
+                    <>
+                      <CommandItem
+                        data-testid={`${props.id}_clear`}
+                        onSelect={handleClear}
+                        className="flex-1 justify-center cursor-pointer"
+                        disabled={
+                          options.filter((x) => x.disabled).length ===
+                          options.length
+                        }
+                      >
+                        Clear
+                      </CommandItem>
+                      <Separator
+                        orientation="vertical"
+                        className="flex min-h-6 h-full"
+                      />
+                    </>
+                  )}
+                  <CommandItem
+                    data-testid={`${props.id}_close`}
+                    onSelect={() => setIsPopoverOpen(false)}
+                    className="flex-1 justify-center cursor-pointer max-w-full"
+                  >
+                    Close
+                  </CommandItem>
+                </div>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+        {animation > 0 && selectedValues.length > 0 && (
+          <WandSparkles
+            className={cn(
+              "cursor-pointer my-2 text-foreground bg-background w-3 h-3",
+              isAnimating ? "" : "text-muted-foreground"
+            )}
+            onClick={() => setIsAnimating(!isAnimating)}
+          />
+        )}
+      </Popover>
+    );
+  }
+);
+
+MultiSelect.displayName = "MultiSelect";