@ayasofyazilim/ui 0.0.0 → 0.0.1

package/dist/custom/filter-component/index.js

@@ -0,0 +1,149 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { FilterIcon } from "lucide-react";
+import {
+  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";
+function isAsyncSelectType(filter) {
+  return filter.fetchAction !== void 0;
+}
+function isMultiSelectType(filter) {
+  return filter.options !== void 0 && Array.isArray(filter.value);
+}
+function isDateSelectType(filter) {
+  return filter.options !== void 0 && typeof filter.value === "string";
+}
+function FilterComponent({
+  dateSelect,
+  multiSelect,
+  asyncSelect,
+  onSubmit,
+  filtersText = "Filters",
+  searchText = "Search",
+  applyFilterText = "Apply",
+  className,
+  cardClassName,
+  defaultOpen = true,
+  customField,
+  disabled = false,
+  isCollapsible = true,
+  filterGuidanceContent
+}) {
+  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 /* @__PURE__ */ jsxs(
+    Collapsible,
+    {
+      open: isOpen,
+      onOpenChange: setIsOpen,
+      className: cn("w-full space-y-2", className),
+      children: [
+        isCollapsible && /* @__PURE__ */ jsx(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "icon", disabled: !isCollapsible, children: [
+          /* @__PURE__ */ jsx(FilterIcon, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Filters" })
+        ] }) }),
+        /* @__PURE__ */ jsx(CollapsibleContent, { className: "space-y-2", children: /* @__PURE__ */ jsxs(
+          Card,
+          {
+            className: cn(
+              "shadow-none",
+              !filterGuidanceContent && "mx-auto",
+              cardClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx(CardHeader, { className: "flex flex-row font-bold text-xl items-center justify-between", children: filtersText }),
+              /* @__PURE__ */ jsxs(CardContent, { className: "flex flex-row gap-3 items-start", children: [
+                filterGuidanceContent && /* @__PURE__ */ jsx("div", { className: "w-1/2 text-sm text-muted-foreground", children: filterGuidanceContent }),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-col gap-4",
+                      filterGuidanceContent ? "w-1/2" : "w-full"
+                    ),
+                    children: [
+                      fields.map((filter, index) => {
+                        if (isAsyncSelectType(filter)) {
+                          return /* @__PURE__ */ jsx(
+                            AsyncSelectField,
+                            {
+                              filter,
+                              isPending: isPending || disabled,
+                              searchText
+                            },
+                            filter.id
+                          );
+                        }
+                        if (isMultiSelectType(filter)) {
+                          return /* @__PURE__ */ jsx(
+                            MultiSelectField,
+                            {
+                              filter,
+                              isPending: isPending || disabled
+                            },
+                            filter.id
+                          );
+                        }
+                        if (isDateSelectType(filter)) {
+                          return /* @__PURE__ */ jsx(
+                            DateField,
+                            {
+                              filter,
+                              isPending: isPending || disabled
+                            },
+                            filter.id
+                          );
+                        }
+                        return /* @__PURE__ */ jsx("div", { children: filter.component }, `c${index.toString()}`);
+                      }),
+                      /* @__PURE__ */ jsx(
+                        Button,
+                        {
+                          disabled: isPending || disabled,
+                          onClick: () => handleSubmit(),
+                          variant: "default",
+                          children: applyFilterText
+                        }
+                      )
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+export {
+  FilterComponent as default
+};
+//# sourceMappingURL=index.js.map

package/dist/custom/filter-component/index.js.map

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

package/dist/custom/image-canvas.js

@@ -0,0 +1,193 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@repo/ayasofyazilim-ui/lib/utils";
+function ImageCanvas({
+  imageUrl,
+  zoom = 1,
+  classNames,
+  onZoomChange,
+  minZoom = 0.1,
+  maxZoom = 5
+}) {
+  const canvasRef = useRef(null);
+  const [image, setImage] = useState(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(null);
+  const renderError = useCallback((errorMessage) => {
+    if (!canvasRef.current) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "rgba(220, 53, 69, 0.1)";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "#dc3545";
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    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);
+    });
+  }, []);
+  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;
+    canvas.width = canvas.clientWidth;
+    canvas.height = canvas.clientHeight;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    const centerX = canvas.width / 2;
+    const centerY = canvas.height / 2;
+    const scaledWidth = image.width * currentZoom;
+    const scaledHeight = image.height * currentZoom;
+    const x = centerX - scaledWidth / 2 + position.x;
+    const y = centerY - scaledHeight / 2 + position.y;
+    ctx.drawImage(image, x, y, scaledWidth, scaledHeight);
+  }, [image, currentZoom, position]);
+  useEffect(() => {
+    const img = new Image();
+    const onLoad = () => {
+      setImage(img);
+      setTimeout(() => renderCanvas(), 0);
+    };
+    const onError = (e) => {
+      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";
+      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 = "";
+    };
+  }, [imageUrl]);
+  useEffect(() => {
+    if (image) {
+      renderCanvas();
+    }
+  }, [image, currentZoom, position, renderCanvas]);
+  useEffect(() => {
+    let frameId;
+    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]);
+  useEffect(() => {
+    if (zoom !== void 0) {
+      if (zoom >= minZoom && zoom <= maxZoom && zoom !== currentZoom) {
+        setCurrentZoom(zoom);
+        if (onZoomChange) {
+          onZoomChange(zoom);
+        }
+      }
+    }
+  }, [zoom, minZoom, maxZoom, currentZoom, onZoomChange]);
+  const handleMouseDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      setIsDragging(true);
+      setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
+    },
+    [position]
+  );
+  const handleMouseMove = useCallback(
+    (e) => {
+      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) => {
+      e.preventDefault();
+      const zoomFactor = 0.1;
+      let newZoom = currentZoom;
+      if (e.deltaY < 0) {
+        newZoom = Math.min(currentZoom + zoomFactor, maxZoom);
+      } else {
+        newZoom = Math.max(currentZoom - zoomFactor, minZoom);
+      }
+      if (newZoom !== currentZoom) {
+        setCurrentZoom(newZoom);
+        if (onZoomChange) {
+          onZoomChange(newZoom);
+        }
+      }
+    },
+    [currentZoom, minZoom, maxZoom, onZoomChange]
+  );
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return void 0;
+    canvas.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      canvas.removeEventListener("wheel", handleWheel);
+    };
+  }, [handleWheel]);
+  return /* @__PURE__ */ jsx("div", { className: cn(`relative w-full h-full`, classNames?.container), children: /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: cn(
+        "w-full h-full cursor-grab",
+        isDragging ? "cursor-grabbing" : "",
+        classNames?.canvas
+      ),
+      onMouseDown: handleMouseDown,
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      onMouseLeave: handleMouseLeave
+    }
+  ) });
+}
+export {
+  ImageCanvas as default
+};
+//# sourceMappingURL=image-canvas.js.map

package/dist/custom/image-canvas.js.map

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

package/dist/custom/json-editor.js

@@ -0,0 +1,30 @@
+import { jsx } from "react/jsx-runtime";
+import { githubDarkTheme, JsonEditor } from "json-edit-react";
+import { githubDarkTheme as githubDarkTheme2, githubLightTheme } from "json-edit-react";
+function JSONEditor({ config }) {
+  return /* @__PURE__ */ jsx(
+    JsonEditor,
+    {
+      ...{
+        showCollectionCount: false,
+        indent: 4,
+        showArrayIndices: false,
+        restrictNewKey: true,
+        restrictEdit: true,
+        restrictDelete: true,
+        restrictAdd: true,
+        restrictTypeSelection: true,
+        restrictDrag: true,
+        keySort: true,
+        theme: githubDarkTheme,
+        ...config
+      }
+    }
+  );
+}
+export {
+  JSONEditor,
+  githubDarkTheme2 as githubDarkTheme,
+  githubLightTheme
+};
+//# sourceMappingURL=json-editor.js.map

package/dist/custom/json-editor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/custom/json-editor.tsx"],"sourcesContent":["import { githubDarkTheme, JsonEditor, JsonEditorProps } from \"json-edit-react\";\r\nexport { githubDarkTheme, githubLightTheme } from \"json-edit-react\";\r\nexport function JSONEditor({ config }: { config: JsonEditorProps }) {\r\n  return (\r\n    <JsonEditor\r\n      {...{\r\n        showCollectionCount: false,\r\n        indent: 4,\r\n        showArrayIndices: false,\r\n        restrictNewKey: true,\r\n        restrictEdit: true,\r\n        restrictDelete: true,\r\n        restrictAdd: true,\r\n        restrictTypeSelection: true,\r\n        restrictDrag: true,\r\n        keySort: true,\r\n        theme: githubDarkTheme,\r\n        ...config,\r\n      }}\r\n    />\r\n  );\r\n}\r\n"],"mappings":"AAII;AAJJ,SAAS,iBAAiB,kBAAmC;AAC7D,SAAS,mBAAAA,kBAAiB,wBAAwB;AAC3C,SAAS,WAAW,EAAE,OAAO,GAAgC;AAClE,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,QACF,qBAAqB;AAAA,QACrB,QAAQ;AAAA,QACR,kBAAkB;AAAA,QAClB,gBAAgB;AAAA,QAChB,cAAc;AAAA,QACd,gBAAgB;AAAA,QAChB,aAAa;AAAA,QACb,uBAAuB;AAAA,QACvB,cAAc;AAAA,QACd,SAAS;AAAA,QACT,OAAO;AAAA,QACP,GAAG;AAAA,MACL;AAAA;AAAA,EACF;AAEJ;","names":["githubDarkTheme"]}

package/dist/custom/master-data-grid/components/dialogs/column-settings-dialog.js

@@ -0,0 +1,84 @@
+"use no memo";
+import { jsx, jsxs } from "react/jsx-runtime";
+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";
+function ColumnSettingsDialog({
+  open,
+  onOpenChange,
+  table,
+  t
+}) {
+  const hideableColumns = table.getAllLeafColumns().filter((column) => column.getCanHide());
+  const handleToggleVisibility = (column, value) => {
+    column.toggleVisibility(value);
+  };
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "max-w-md", children: [
+    /* @__PURE__ */ jsxs(DialogHeader, { children: [
+      /* @__PURE__ */ jsx(DialogTitle, { children: getTranslations("columnSettings.title", t) }),
+      /* @__PURE__ */ jsx(DialogDescription, { children: getTranslations("columnSettings.description", t) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => table.toggleAllColumnsVisible(true),
+            children: getTranslations("columnSettings.showAll", t)
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "outline",
+            size: "sm",
+            onClick: () => table.toggleAllColumnsVisible(false),
+            children: getTranslations("columnSettings.hideAll", t)
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(Separator, {}),
+      /* @__PURE__ */ jsx(ScrollArea, { className: "h-[400px] pr-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: hideableColumns.map((column) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "flex items-center justify-between gap-3",
+          children: [
+            /* @__PURE__ */ jsx(
+              Label,
+              {
+                htmlFor: `column-${column.id}`,
+                className: "text-sm font-medium cursor-pointer flex-1",
+                children: getColumnName(column, t)
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                id: `column-${column.id}`,
+                checked: column.getIsVisible(),
+                onCheckedChange: (value) => handleToggleVisibility(column, value)
+              }
+            )
+          ]
+        },
+        column.id
+      )) }) })
+    ] })
+  ] }) });
+}
+export {
+  ColumnSettingsDialog
+};
+//# sourceMappingURL=column-settings-dialog.js.map

package/dist/custom/master-data-grid/components/dialogs/column-settings-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/custom/master-data-grid/components/dialogs/column-settings-dialog.tsx"],"sourcesContent":["\"use no memo\";\r\n\r\nimport type { Column, Table as TanStackTable } from \"@tanstack/react-table\";\r\nimport { Button } from \"../../../../components/button\";\r\nimport {\r\n  Dialog,\r\n  DialogContent,\r\n  DialogDescription,\r\n  DialogHeader,\r\n  DialogTitle,\r\n} from \"../../../../components/dialog\";\r\nimport { ScrollArea } from \"../../../../components/scroll-area\";\r\nimport { Separator } from \"../../../../components/separator\";\r\nimport { Switch } from \"../../../../components/switch\";\r\nimport { Label } from \"../../../../components/label\";\r\nimport { getColumnName, getTranslations } from \"../../utils/translation-utils\";\r\nimport { MasterDataGridResources } from \"../../types\";\r\n\r\ninterface ColumnSettingsDialogProps<TData> {\r\n  open: boolean;\r\n  onOpenChange: (open: boolean) => void;\r\n  table: TanStackTable<TData>;\r\n  t?: MasterDataGridResources;\r\n}\r\n\r\nexport function ColumnSettingsDialog<TData>({\r\n  open,\r\n  onOpenChange,\r\n  table,\r\n  t,\r\n}: ColumnSettingsDialogProps<TData>) {\r\n  const hideableColumns = table\r\n    .getAllLeafColumns()\r\n    .filter((column) => column.getCanHide());\r\n\r\n  const handleToggleVisibility = (column: Column<TData>, value: boolean) => {\r\n    column.toggleVisibility(value);\r\n  };\r\n\r\n  return (\r\n    <Dialog open={open} onOpenChange={onOpenChange}>\r\n      <DialogContent className=\"max-w-md\">\r\n        <DialogHeader>\r\n          <DialogTitle>\r\n            {getTranslations(\"columnSettings.title\", t)}\r\n          </DialogTitle>\r\n          <DialogDescription>\r\n            {getTranslations(\"columnSettings.description\", t)}\r\n          </DialogDescription>\r\n        </DialogHeader>\r\n\r\n        <div className=\"space-y-4\">\r\n          <div className=\"flex items-center justify-between\">\r\n            <Button\r\n              variant=\"outline\"\r\n              size=\"sm\"\r\n              onClick={() => table.toggleAllColumnsVisible(true)}\r\n            >\r\n              {getTranslations(\"columnSettings.showAll\", t)}\r\n            </Button>\r\n            <Button\r\n              variant=\"outline\"\r\n              size=\"sm\"\r\n              onClick={() => table.toggleAllColumnsVisible(false)}\r\n            >\r\n              {getTranslations(\"columnSettings.hideAll\", t)}\r\n            </Button>\r\n          </div>\r\n\r\n          <Separator />\r\n\r\n          <ScrollArea className=\"h-[400px] pr-4\">\r\n            <div className=\"space-y-3\">\r\n              {hideableColumns.map((column) => (\r\n                <div\r\n                  key={column.id}\r\n                  className=\"flex items-center justify-between gap-3\"\r\n                >\r\n                  <Label\r\n                    htmlFor={`column-${column.id}`}\r\n                    className=\"text-sm font-medium cursor-pointer flex-1\"\r\n                  >\r\n                    {getColumnName(column, t)}\r\n                  </Label>\r\n                  <Switch\r\n                    id={`column-${column.id}`}\r\n                    checked={column.getIsVisible()}\r\n                    onCheckedChange={(value) =>\r\n                      handleToggleVisibility(column, value)\r\n                    }\r\n                  />\r\n                </div>\r\n              ))}\r\n            </div>\r\n          </ScrollArea>\r\n        </div>\r\n      </DialogContent>\r\n    </Dialog>\r\n  );\r\n}\r\n"],"mappings":";AA0CQ,SACE,KADF;AAvCR,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,cAAc;AACvB,SAAS,aAAa;AACtB,SAAS,eAAe,uBAAuB;AAUxC,SAAS,qBAA4B;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAqC;AACnC,QAAM,kBAAkB,MACrB,kBAAkB,EAClB,OAAO,CAAC,WAAW,OAAO,WAAW,CAAC;AAEzC,QAAM,yBAAyB,CAAC,QAAuB,UAAmB;AACxE,WAAO,iBAAiB,KAAK;AAAA,EAC/B;AAEA,SACE,oBAAC,UAAO,MAAY,cAClB,+BAAC,iBAAc,WAAU,YACvB;AAAA,yBAAC,gBACC;AAAA,0BAAC,eACE,0BAAgB,wBAAwB,CAAC,GAC5C;AAAA,MACA,oBAAC,qBACE,0BAAgB,8BAA8B,CAAC,GAClD;AAAA,OACF;AAAA,IAEA,qBAAC,SAAI,WAAU,aACb;AAAA,2BAAC,SAAI,WAAU,qCACb;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAS,MAAM,MAAM,wBAAwB,IAAI;AAAA,YAEhD,0BAAgB,0BAA0B,CAAC;AAAA;AAAA,QAC9C;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAS,MAAM,MAAM,wBAAwB,KAAK;AAAA,YAEjD,0BAAgB,0BAA0B,CAAC;AAAA;AAAA,QAC9C;AAAA,SACF;AAAA,MAEA,oBAAC,aAAU;AAAA,MAEX,oBAAC,cAAW,WAAU,kBACpB,8BAAC,SAAI,WAAU,aACZ,0BAAgB,IAAI,CAAC,WACpB;AAAA,QAAC;AAAA;AAAA,UAEC,WAAU;AAAA,UAEV;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC,SAAS,UAAU,OAAO,EAAE;AAAA,gBAC5B,WAAU;AAAA,gBAET,wBAAc,QAAQ,CAAC;AAAA;AAAA,YAC1B;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAI,UAAU,OAAO,EAAE;AAAA,gBACvB,SAAS,OAAO,aAAa;AAAA,gBAC7B,iBAAiB,CAAC,UAChB,uBAAuB,QAAQ,KAAK;AAAA;AAAA,YAExC;AAAA;AAAA;AAAA,QAfK,OAAO;AAAA,MAgBd,CACD,GACH,GACF;AAAA,OACF;AAAA,KACF,GACF;AAEJ;","names":[]}

package/dist/custom/master-data-grid/components/dialogs/index.js

@@ -0,0 +1,5 @@
+import { ColumnSettingsDialog } from "./column-settings-dialog";
+export {
+  ColumnSettingsDialog
+};
+//# sourceMappingURL=index.js.map

package/dist/custom/master-data-grid/components/dialogs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/custom/master-data-grid/components/dialogs/index.ts"],"sourcesContent":["export { ColumnSettingsDialog } from \"./column-settings-dialog\";\r\n"],"mappings":"AAAA,SAAS,4BAA4B;","names":[]}