@ayasofyazilim/ui 0.0.0

package/src/custom/filter-component/index.tsx

@@ -0,0 +1,217 @@
+"use client";
+
+import { FilterIcon } from "lucide-react";
+import {
+  Dispatch,
+  JSX,
+  ReactNode,
+  SetStateAction,
+  useState,
+  useTransition,
+} from "react";
+import { Button } from "@repo/ayasofyazilim-ui/components/button";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+} from "@repo/ayasofyazilim-ui/components/card";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@repo/ayasofyazilim-ui/components/collapsible";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+import AsyncSelectField from "./fields/async-select";
+import DateField from "./fields/date";
+import MultiSelectField from "./fields/multi-select";
+
+export type FilterComponentSearchItem = { id: string; name: string };
+export type DateSelectType = {
+  title: string;
+  id: string;
+  placeholder?: string;
+  onChange: Dispatch<SetStateAction<string>>;
+  value: string;
+  options: {
+    label: string;
+    value: string;
+  }[];
+  order?: number;
+};
+
+export type MultiSelectType = {
+  title: string;
+  value: string[];
+  options: { label: string; value: string }[];
+  onChange: Dispatch<SetStateAction<string[]>>;
+  order?: number;
+  placeholder?: string;
+  selectAllLabel?: string;
+  id: string;
+};
+export type AsyncSelectType = {
+  id: string;
+  title: string;
+  fetchAction: (search: string) => Promise<FilterComponentSearchItem[]>;
+  onChange: Dispatch<SetStateAction<FilterComponentSearchItem[]>>;
+  value: FilterComponentSearchItem[];
+  multiple?: boolean;
+  order?: number;
+};
+export type CustomFieldType = { order?: number; component: JSX.Element };
+
+function isAsyncSelectType(
+  filter: DateSelectType | MultiSelectType | AsyncSelectType | CustomFieldType
+): filter is AsyncSelectType {
+  return (filter as AsyncSelectType).fetchAction !== undefined;
+}
+
+function isMultiSelectType(
+  filter: DateSelectType | MultiSelectType | AsyncSelectType | CustomFieldType
+): filter is MultiSelectType {
+  return (
+    (filter as MultiSelectType).options !== undefined &&
+    Array.isArray((filter as MultiSelectType).value)
+  );
+}
+
+function isDateSelectType(
+  filter: DateSelectType | MultiSelectType | AsyncSelectType | CustomFieldType
+): filter is DateSelectType {
+  return (
+    (filter as DateSelectType).options !== undefined &&
+    typeof (filter as DateSelectType).value === "string"
+  );
+}
+
+export default function FilterComponent({
+  dateSelect,
+  multiSelect,
+  asyncSelect,
+  onSubmit,
+  filtersText = "Filters",
+  searchText = "Search",
+  applyFilterText = "Apply",
+  className,
+  cardClassName,
+  defaultOpen = true,
+  customField,
+  disabled = false,
+  isCollapsible = true,
+  filterGuidanceContent,
+}: {
+  dateSelect: DateSelectType[];
+  multiSelect: MultiSelectType[];
+  asyncSelect: AsyncSelectType[];
+  onSubmit: () => void;
+  filtersText?: string;
+  applyFilterText?: string;
+  searchText?: string;
+  className?: string;
+  cardClassName?: string;
+  defaultOpen?: boolean;
+  disabled?: boolean;
+  customField?: CustomFieldType[];
+  isCollapsible?: boolean;
+  filterGuidanceContent?: ReactNode;
+}) {
+  const fields = [
+    ...dateSelect,
+    ...multiSelect,
+    ...asyncSelect,
+    ...(customField || []),
+  ].sort((a, b) => (a.order || 0) - (b.order || 0));
+
+  const [isPending, startTransition] = useTransition();
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  function handleSubmit() {
+    startTransition(() => {
+      onSubmit();
+    });
+  }
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className={cn("w-full space-y-2", className)}
+    >
+      {isCollapsible && (
+        <CollapsibleTrigger asChild>
+          <Button variant="outline" size="icon" disabled={!isCollapsible}>
+            <FilterIcon className="h-4 w-4" />
+            <span className="sr-only">Filters</span>
+          </Button>
+        </CollapsibleTrigger>
+      )}
+      <CollapsibleContent className="space-y-2">
+        <Card
+          className={cn(
+            "shadow-none",
+            !filterGuidanceContent && "mx-auto",
+            cardClassName
+          )}
+        >
+          <CardHeader className="flex flex-row font-bold text-xl items-center justify-between">
+            {filtersText}
+          </CardHeader>
+          <CardContent className="flex flex-row gap-3 items-start">
+            {filterGuidanceContent && (
+              <div className="w-1/2 text-sm text-muted-foreground">
+                {filterGuidanceContent}
+              </div>
+            )}
+
+            <div
+              className={cn(
+                "flex flex-col gap-4",
+                filterGuidanceContent ? "w-1/2" : "w-full"
+              )}
+            >
+              {fields.map((filter, index) => {
+                if (isAsyncSelectType(filter)) {
+                  return (
+                    <AsyncSelectField
+                      key={filter.id}
+                      filter={filter}
+                      isPending={isPending || disabled}
+                      searchText={searchText}
+                    />
+                  );
+                }
+                if (isMultiSelectType(filter)) {
+                  return (
+                    <MultiSelectField
+                      key={filter.id}
+                      filter={filter}
+                      isPending={isPending || disabled}
+                    />
+                  );
+                }
+                if (isDateSelectType(filter)) {
+                  return (
+                    <DateField
+                      key={filter.id}
+                      filter={filter}
+                      isPending={isPending || disabled}
+                    />
+                  );
+                }
+                return (
+                  <div key={`c${index.toString()}`}>{filter.component}</div>
+                );
+              })}
+
+              <Button
+                disabled={isPending || disabled}
+                onClick={() => handleSubmit()}
+                variant="default"
+              >
+                {applyFilterText}
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

package/src/custom/image-canvas.tsx

@@ -0,0 +1,260 @@
+"use client";
+
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+
+type Props = {
+  imageUrl: string;
+  zoom?: number;
+  classNames?: {
+    container?: string;
+    canvas?: string;
+  };
+  minZoom?: number;
+  maxZoom?: number;
+  onZoomChange?: (zoom: number) => void;
+};
+
+export default function ImageCanvas({
+  imageUrl,
+  zoom = 1,
+  classNames,
+  onZoomChange,
+  minZoom = 0.1,
+  maxZoom = 5,
+}: Props) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [image, setImage] = useState<HTMLImageElement | null>(null);
+  const [currentZoom, setCurrentZoom] = useState(zoom);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const [error, setError] = useState<string | null>(null);
+
+  const renderError = useCallback((errorMessage: string) => {
+    if (!canvasRef.current) return;
+
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // Clear canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Set styling for the error message
+    ctx.fillStyle = "rgba(220, 53, 69, 0.1)"; // Light red background
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#dc3545"; // Bootstrap danger color
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+
+    // Split message by newlines and render each line
+    const lines = errorMessage.split("\n");
+    const lineHeight = 20;
+    const startY = canvas.height / 2 - (lines.length * lineHeight) / 2;
+
+    lines.forEach((line, index) => {
+      ctx.fillText(line, canvas.width / 2, startY + index * lineHeight);
+    });
+  }, []);
+
+  // Memoized rendering function
+  const renderCanvas = useCallback(() => {
+    if (!canvasRef.current) return;
+    if (!image) {
+      if (error) {
+        renderError(error);
+      }
+      return;
+    }
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    // Set canvas dimensions to match container
+    canvas.width = canvas.clientWidth;
+    canvas.height = canvas.clientHeight;
+
+    // Clear the canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Calculate the center of the canvas
+    const centerX = canvas.width / 2;
+    const centerY = canvas.height / 2;
+
+    // Calculate the scaled dimensions
+    const scaledWidth = image.width * currentZoom;
+    const scaledHeight = image.height * currentZoom;
+
+    // Calculate position to center the image
+    const x = centerX - scaledWidth / 2 + position.x;
+    const y = centerY - scaledHeight / 2 + position.y;
+
+    // Draw the image with the current zoom and position
+    ctx.drawImage(image, x, y, scaledWidth, scaledHeight);
+  }, [image, currentZoom, position]); // Load the image - optimized to properly clean up
+  useEffect(() => {
+    const img = new Image();
+
+    const onLoad = () => {
+      setImage(img);
+      // We need to wait for the next render cycle after setImage before rendering the canvas
+      // This ensures the image state is updated before trying to render
+      setTimeout(() => renderCanvas(), 0);
+    };
+
+    const onError = (e: ErrorEvent) => {
+      const errorMsg = e.message || "Failed to load image";
+      setError(`Failed to load image: ${errorMsg}`);
+      setImage(null);
+      setTimeout(() => renderCanvas(), 0);
+    };
+
+    img.addEventListener("load", onLoad);
+    img.addEventListener("error", onError);
+
+    try {
+      img.src = imageUrl;
+      img.crossOrigin = "anonymous"; // Handle CORS if needed
+      img.className = "border rounded-md";
+    } catch (err) {
+      const errorMsg = err instanceof Error ? err.message : "Invalid image URL";
+      setError(`Image error: ${errorMsg}`);
+    }
+    return () => {
+      img.removeEventListener("load", onLoad);
+      img.removeEventListener("error", onError);
+      img.src = ""; // Clean up to avoid memory leaks
+    };
+  }, [imageUrl]);
+
+  // Ensure the canvas is drawn whenever image, zoom, or position changes
+  useEffect(() => {
+    if (image) {
+      renderCanvas();
+    }
+  }, [image, currentZoom, position, renderCanvas]);
+
+  // Handle window resize with requestAnimationFrame for better performance
+  useEffect(() => {
+    let frameId: number;
+    let isResizing = false;
+
+    const handleResize = () => {
+      if (!isResizing) {
+        isResizing = true;
+
+        frameId = requestAnimationFrame(() => {
+          renderCanvas();
+          isResizing = false;
+        });
+      }
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      cancelAnimationFrame(frameId);
+    };
+  }, [renderCanvas]);
+
+  // Handle zoom changes from props
+  useEffect(() => {
+    if (zoom !== undefined) {
+      // Set the zoom level
+      if (zoom >= minZoom && zoom <= maxZoom && zoom !== currentZoom) {
+        setCurrentZoom(zoom);
+        if (onZoomChange) {
+          onZoomChange(zoom);
+        }
+      }
+    }
+  }, [zoom, minZoom, maxZoom, currentZoom, onZoomChange]);
+
+  // Mouse event handlers for dragging - memoized with useCallback
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent<HTMLCanvasElement>) => {
+      e.preventDefault();
+      setIsDragging(true);
+      setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
+    },
+    [position]
+  );
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent<HTMLCanvasElement>) => {
+      if (!isDragging) return;
+
+      e.preventDefault();
+      setPosition({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y,
+      });
+    },
+    [isDragging, dragStart]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+
+  const handleMouseLeave = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  const handleWheel = useCallback(
+    (e: WheelEvent) => {
+      e.preventDefault();
+
+      // Calculate new zoom level
+      const zoomFactor = 0.1;
+      let newZoom = currentZoom;
+
+      if (e.deltaY < 0) {
+        // Zoom in
+        newZoom = Math.min(currentZoom + zoomFactor, maxZoom);
+      } else {
+        // Zoom out
+        newZoom = Math.max(currentZoom - zoomFactor, minZoom);
+      }
+
+      if (newZoom !== currentZoom) {
+        setCurrentZoom(newZoom);
+        if (onZoomChange) {
+          onZoomChange(newZoom);
+        }
+      }
+    },
+    [currentZoom, minZoom, maxZoom, onZoomChange]
+  ); // Add non-passive wheel event listener
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return undefined;
+
+    canvas.addEventListener("wheel", handleWheel, { passive: false });
+
+    return () => {
+      canvas.removeEventListener("wheel", handleWheel);
+    };
+  }, [handleWheel]);
+
+  return (
+    <div className={cn(`relative w-full h-full`, classNames?.container)}>
+      <canvas
+        ref={canvasRef}
+        className={cn(
+          "w-full h-full cursor-grab",
+          isDragging ? "cursor-grabbing" : "",
+          classNames?.canvas
+        )}
+        onMouseDown={handleMouseDown}
+        onMouseMove={handleMouseMove}
+        onMouseUp={handleMouseUp}
+        onMouseLeave={handleMouseLeave}
+        // onWheel handler removed and replaced with addEventListener above
+      />
+    </div>
+  );
+}

package/src/custom/json-editor.tsx

@@ -0,0 +1,22 @@
+import { githubDarkTheme, JsonEditor, JsonEditorProps } from "json-edit-react";
+export { githubDarkTheme, githubLightTheme } from "json-edit-react";
+export function JSONEditor({ config }: { config: JsonEditorProps }) {
+  return (
+    <JsonEditor
+      {...{
+        showCollectionCount: false,
+        indent: 4,
+        showArrayIndices: false,
+        restrictNewKey: true,
+        restrictEdit: true,
+        restrictDelete: true,
+        restrictAdd: true,
+        restrictTypeSelection: true,
+        restrictDrag: true,
+        keySort: true,
+        theme: githubDarkTheme,
+        ...config,
+      }}
+    />
+  );
+}

package/src/custom/master-data-grid/components/dialogs/column-settings-dialog.tsx

@@ -0,0 +1,100 @@
+"use no memo";
+
+import type { Column, Table as TanStackTable } from "@tanstack/react-table";
+import { Button } from "../../../../components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../../../../components/dialog";
+import { ScrollArea } from "../../../../components/scroll-area";
+import { Separator } from "../../../../components/separator";
+import { Switch } from "../../../../components/switch";
+import { Label } from "../../../../components/label";
+import { getColumnName, getTranslations } from "../../utils/translation-utils";
+import { MasterDataGridResources } from "../../types";
+
+interface ColumnSettingsDialogProps<TData> {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  table: TanStackTable<TData>;
+  t?: MasterDataGridResources;
+}
+
+export function ColumnSettingsDialog<TData>({
+  open,
+  onOpenChange,
+  table,
+  t,
+}: ColumnSettingsDialogProps<TData>) {
+  const hideableColumns = table
+    .getAllLeafColumns()
+    .filter((column) => column.getCanHide());
+
+  const handleToggleVisibility = (column: Column<TData>, value: boolean) => {
+    column.toggleVisibility(value);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>
+            {getTranslations("columnSettings.title", t)}
+          </DialogTitle>
+          <DialogDescription>
+            {getTranslations("columnSettings.description", t)}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="flex items-center justify-between">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.toggleAllColumnsVisible(true)}
+            >
+              {getTranslations("columnSettings.showAll", t)}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => table.toggleAllColumnsVisible(false)}
+            >
+              {getTranslations("columnSettings.hideAll", t)}
+            </Button>
+          </div>
+
+          <Separator />
+
+          <ScrollArea className="h-[400px] pr-4">
+            <div className="space-y-3">
+              {hideableColumns.map((column) => (
+                <div
+                  key={column.id}
+                  className="flex items-center justify-between gap-3"
+                >
+                  <Label
+                    htmlFor={`column-${column.id}`}
+                    className="text-sm font-medium cursor-pointer flex-1"
+                  >
+                    {getColumnName(column, t)}
+                  </Label>
+                  <Switch
+                    id={`column-${column.id}`}
+                    checked={column.getIsVisible()}
+                    onCheckedChange={(value) =>
+                      handleToggleVisibility(column, value)
+                    }
+                  />
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/custom/master-data-grid/components/dialogs/index.ts

@@ -0,0 +1 @@
+export { ColumnSettingsDialog } from "./column-settings-dialog";