ar-design 0.2.97 → 0.2.99

package/dist/assets/css/core/variants/dashed.css

@@ -23,8 +23,7 @@ iframe.dashed:not(.disabled) {
 
 button.dashed:not(.disabled) {
   &.blue { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--blue-100);
     }
   }
@@ -57,8 +56,7 @@ iframe.dashed:not(.disabled) {
 
 button.dashed:not(.disabled) {
   &.purple { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--purple-100);
     }
   }
@@ -91,8 +89,7 @@ iframe.dashed:not(.disabled) {
 
 button.dashed:not(.disabled) {
   &.pink { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--pink-100);
     }
   }
@@ -125,8 +122,7 @@ iframe.dashed:not(.disabled) {
 
 button.dashed:not(.disabled) {
   &.red { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--red-100);
     }
   }
@@ -159,8 +155,7 @@ iframe.dashed:not(.disabled) {
 
 button.dashed:not(.disabled) {
   &.orange { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--orange-100);
     }
   }
@@ -193,8 +188,7 @@ iframe.dashed:not(.disabled) {
 
 button.dashed:not(.disabled) {
   &.yellow { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--yellow-100);
     }
   }
@@ -227,8 +221,7 @@ iframe.dashed:not(.disabled) {
 
 button.dashed:not(.disabled) {
   &.green { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--green-100);
     }
   }
@@ -261,8 +254,7 @@ iframe.dashed:not(.disabled) {
 
 button.dashed:not(.disabled) {
   &.teal { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--teal-100);
     }
   }
@@ -295,8 +287,7 @@ iframe.dashed:not(.disabled) {
 
 button.dashed:not(.disabled) {
   &.cyan { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--cyan-100);
     }
   }
@@ -329,8 +320,7 @@ iframe.dashed:not(.disabled) {
 
 button.dashed:not(.disabled) {
   &.gray { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--gray-100);
     }
   }
@@ -363,8 +353,7 @@ iframe.dashed:not(.disabled) {
 
 button.dashed:not(.disabled) {
   &.light { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--light-100);
     }
   }

package/dist/assets/css/core/variants/outlined.css

@@ -27,8 +27,7 @@ button.outlined:not(.disabled) {
     border-color: var(--blue-500);
     color: var(--blue-500);
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--blue-100);
     }
   }
@@ -65,8 +64,7 @@ button.outlined:not(.disabled) {
     border-color: var(--purple-500);
     color: var(--purple-500);
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--purple-100);
     }
   }
@@ -103,8 +101,7 @@ button.outlined:not(.disabled) {
     border-color: var(--pink-500);
     color: var(--pink-500);
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--pink-100);
     }
   }
@@ -141,8 +138,7 @@ button.outlined:not(.disabled) {
     border-color: var(--red-500);
     color: var(--red-500);
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--red-100);
     }
   }
@@ -179,8 +175,7 @@ button.outlined:not(.disabled) {
     border-color: var(--orange-500);
     color: var(--orange-500);
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--orange-100);
     }
   }
@@ -217,8 +212,7 @@ button.outlined:not(.disabled) {
     border-color: var(--yellow-500);
     color: var(--yellow-500);
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--yellow-100);
     }
   }
@@ -255,8 +249,7 @@ button.outlined:not(.disabled) {
     border-color: var(--green-500);
     color: var(--green-500);
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--green-100);
     }
   }
@@ -293,8 +286,7 @@ button.outlined:not(.disabled) {
     border-color: var(--teal-500);
     color: var(--teal-500);
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--teal-100);
     }
   }
@@ -331,8 +323,7 @@ button.outlined:not(.disabled) {
     border-color: var(--cyan-500);
     color: var(--cyan-500);
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--cyan-100);
     }
   }
@@ -369,8 +360,7 @@ button.outlined:not(.disabled) {
     border-color: var(--gray-500);
     color: var(--gray-500);
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--gray-100);
     }
   }
@@ -407,8 +397,7 @@ button.outlined:not(.disabled) {
     border-color: var(--light-500);
     color: var(--light-500);
 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--light-100);
     }
   }

package/dist/assets/css/core/variants/surface.css

@@ -13,8 +13,7 @@
       
 button.surface:not(.disabled) {
   &.blue { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--blue-300);
     }
   }
@@ -37,8 +36,7 @@ button.surface:not(.disabled) {
       
 button.surface:not(.disabled) {
   &.purple { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--purple-300);
     }
   }
@@ -61,8 +59,7 @@ button.surface:not(.disabled) {
       
 button.surface:not(.disabled) {
   &.pink { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--pink-300);
     }
   }
@@ -85,8 +82,7 @@ button.surface:not(.disabled) {
       
 button.surface:not(.disabled) {
   &.red { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--red-300);
     }
   }
@@ -109,8 +105,7 @@ button.surface:not(.disabled) {
       
 button.surface:not(.disabled) {
   &.orange { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--orange-300);
     }
   }
@@ -133,8 +128,7 @@ button.surface:not(.disabled) {
       
 button.surface:not(.disabled) {
   &.yellow { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--yellow-300);
     }
   }
@@ -157,8 +151,7 @@ button.surface:not(.disabled) {
       
 button.surface:not(.disabled) {
   &.green { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--green-300);
     }
   }
@@ -181,8 +174,7 @@ button.surface:not(.disabled) {
       
 button.surface:not(.disabled) {
   &.teal { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--teal-300);
     }
   }
@@ -205,8 +197,7 @@ button.surface:not(.disabled) {
       
 button.surface:not(.disabled) {
   &.cyan { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--cyan-300);
     }
   }
@@ -229,8 +220,7 @@ button.surface:not(.disabled) {
       
 button.surface:not(.disabled) {
   &.gray { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--gray-300);
     }
   }
@@ -253,8 +243,7 @@ button.surface:not(.disabled) {
       
 button.surface:not(.disabled) {
   &.light { 
-    &:hover,
-    &:focus {
+    &:hover {
       background-color: var(--light-300);
     }
   }

package/dist/components/charts/pie/index.js

@@ -1,3 +1,4 @@
+"use client";
 import React, { useEffect, useRef, useState } from "react";
 import "../../../assets/css/components/charts/pie/pie.css";
 const Pie = ({ title, data, size }) => {

package/dist/components/data-display/diagram/IProps.d.ts

@@ -0,0 +1,48 @@
+export type NodeData = {
+    id: number;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: {
+        label: string;
+    };
+};
+type Port = "top" | "bottom";
+export type EdgeData = {
+    id: number;
+    from: {
+        id: number;
+        port: Port;
+    };
+    to: {
+        id: number;
+        port: Port;
+    };
+};
+interface IProps {
+    /**
+     * Sürüklenebilir liste verisi.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Diagram data={[{ id: 1, ... }, { id: 2, ... }]} />
+     * ```
+     */
+    nodes: NodeData[];
+    /**
+     * Her bir öğenin nasıl render edileceğini tanımlar.
+     *
+     * - `item`: Mevcut öğe.
+     * - `index`: Öğenin listedeki sırası.
+     *
+     * Örneğin;
+     *
+     * ```jsx
+     * <Diagram renderItem={(item) => <div>{item.label}</div>} />
+     * ```
+     */
+    edges: EdgeData[];
+}
+export default IProps;

package/dist/components/data-display/diagram/IProps.js

@@ -0,0 +1 @@
+export {};

package/dist/components/data-display/diagram/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import "../../../assets/css/components/data-display/diagram/styles.css";
+import IProps from "./IProps";
+export default function Diagram({ nodes, edges }: IProps): React.JSX.Element;

package/dist/components/data-display/diagram/index.js

@@ -0,0 +1,258 @@
+import React, { useMemo, useRef, useState } from "react";
+import "../../../assets/css/components/data-display/diagram/styles.css";
+import Grid from "../grid-system";
+import Button from "../../form/button";
+import Tooltip from "../../feedback/tooltip";
+import { ARIcon } from "../../icons";
+const { Box } = Grid;
+export default function Diagram({ nodes, edges }) {
+    // refs
+    const _arDiagram = useRef(null);
+    const _content = useRef(null);
+    const _arNodes = useRef({});
+    const _path = useRef(null);
+    // refs -> Start Position
+    const _dragStartMousePosition = useRef({ x: 0, y: 0 });
+    const _dragStartNodePosition = useRef({ x: 0, y: 0 });
+    // refs -> Zoom
+    const _zoomIntensity = 0.1;
+    const _maxScale = 4;
+    const _minScale = 0.1;
+    // states
+    const [_nodes, setNodes] = useState(nodes);
+    const [_edges, setEdges] = useState(edges);
+    const [trigger, setTrigger] = useState(false);
+    // states -> Pan
+    const [pan, setPan] = useState({ x: 0, y: 0 });
+    const [panning, setPanning] = useState(false);
+    const [startPan, setStartPan] = useState({ x: 0, y: 0 });
+    // states -> Zoom
+    const [scale, setScale] = useState(1);
+    // states -> Drag
+    const [draggedNode, setDraggedNode] = useState(null);
+    // states -> Drawing
+    const [drawingEdge, setDrawingEdge] = useState(null);
+    const [mousePos, setMousePos] = useState(null);
+    // methods
+    const getPortCenter = (id, port) => {
+        const node = _arNodes.current[`${id}_${port}`];
+        const diagram = _arDiagram.current;
+        if (!node || !diagram)
+            return null;
+        const diagramRect = diagram.getBoundingClientRect();
+        const nodeRect = node.getBoundingClientRect();
+        return {
+            x: (nodeRect.left - diagramRect.left + nodeRect.width / 2 - pan.x) / scale,
+            y: (nodeRect.top - diagramRect.top + nodeRect.height / 2 - pan.y) / scale,
+        };
+    };
+    const getClosestPort = (position, threshold = 20) => {
+        for (const key in _arNodes.current) {
+            const el = _arNodes.current[key];
+            if (!el)
+                continue;
+            const [idStr, port] = key.split("_");
+            const id = parseInt(idStr, 10);
+            const rect = el.getBoundingClientRect();
+            const diagramRect = _arDiagram.current.getBoundingClientRect();
+            const portCenter = {
+                x: (rect.left - diagramRect.left + rect.width / 2 - pan.x) / scale,
+                y: (rect.top - diagramRect.top + rect.height / 2 - pan.y) / scale,
+            };
+            const distance = Math.hypot(position.x - portCenter.x, position.y - portCenter.y);
+            if (distance <= threshold)
+                return { id, port: port };
+        }
+        return null;
+    };
+    const renderEdges = useMemo(() => {
+        return _edges.map((edge, index) => {
+            const from = getPortCenter(edge.from.id, edge.from.port);
+            const to = getPortCenter(edge.to.id, edge.to.port);
+            if (!from || !to)
+                return null;
+            const dx = to.x - from.x;
+            const dy = to.y - from.y;
+            const distance = Math.hypot(dx, dy);
+            const offset = Math.min(40, distance * 0.25); // maksimum sapma sınırı
+            // S biçimli kontrol noktaları
+            const controlPoint1 = {
+                x: from.x,
+                y: from.y + (dy < 0 ? -offset : offset),
+            };
+            const controlPoint2 = {
+                x: to.x,
+                y: to.y + (dy < 0 ? offset : -offset),
+            };
+            const pathData = `M${from.x} ${from.y} C${controlPoint1.x} ${controlPoint1.y}, ${controlPoint2.x} ${controlPoint2.y}, ${to.x} ${to.y}`;
+            return (React.createElement("svg", { key: index, className: "edge" },
+                React.createElement("path", { ref: _path, d: pathData, fill: "none", stroke: "var(--purple-500)", strokeWidth: 2, strokeDasharray: 10, strokeDashoffset: 10, strokeLinecap: "round", onClick: () => {
+                        setEdges((prev) => prev.filter((x) => x.id !== edge.id));
+                    } },
+                    React.createElement("animate", { attributeName: "stroke-dashoffset", values: `${20 / scale};0`, dur: "1s", repeatCount: "indefinite" }))));
+        });
+    }, [_nodes, _edges, trigger]);
+    const onPanStart = (e) => {
+        setPanning(true);
+        setStartPan({ x: e.clientX - pan.x, y: e.clientY - pan.y });
+    };
+    const onPanMove = (e) => {
+        if (panning) {
+            setPan({ x: e.clientX - startPan.x, y: e.clientY - startPan.y });
+        }
+    };
+    const onPanEnd = () => setPanning(false);
+    // methods -> Zoom
+    const handleWheel = (event) => {
+        const direction = event.deltaY > 0 ? -1 : 1;
+        let newScale = scale + direction * _zoomIntensity;
+        newScale = Math.max(_minScale, Math.min(_maxScale, newScale));
+        // Mouse'un container içindeki konumunu al.
+        const rect = _content.current.getBoundingClientRect();
+        const mouseX = event.clientX - rect.left;
+        const mouseY = event.clientY - rect.top;
+        // İçerik düzleminde mouse'un bulunduğu noktayı bul.
+        const zoomPointX = (mouseX - pan.x) / scale;
+        const zoomPointY = (mouseY - pan.y) / scale;
+        // Yeni pan değerini hesapla ki zoomPoint sabit kalsın.
+        const newPanX = mouseX - zoomPointX * newScale;
+        const newPanY = mouseY - zoomPointY * newScale;
+        setScale(newScale);
+        setPan({ x: newPanX, y: newPanY });
+    };
+    const handleZoom = (process) => {
+        let newScale = 0;
+        if (process === "increment")
+            newScale = Math.max(_minScale, Math.min(_maxScale, scale + _zoomIntensity));
+        if (process === "decrement")
+            newScale = Math.max(_minScale, Math.min(_maxScale, scale - _zoomIntensity));
+        if (_content.current && _content.current) {
+            const containerRect = _content.current.getBoundingClientRect();
+            // Ortadaki noktayı bul (container açısından)
+            const centerX = containerRect.width / 2;
+            const centerY = containerRect.height / 2;
+            // İçerik düzleminde bu noktaya karşılık gelen nokta
+            const zoomPointX = (centerX - pan.x) / scale;
+            const zoomPointY = (centerY - pan.y) / scale;
+            // Yeni pan hesapla ki center aynı yerde kalsın
+            const newPanX = centerX - zoomPointX * newScale;
+            const newPanY = centerY - zoomPointY * newScale;
+            setPan({ x: newPanX, y: newPanY });
+            setScale(newScale);
+        }
+    };
+    // methods -> Node
+    const onNodeMouseDown = (event, id, node) => {
+        event.stopPropagation();
+        setDraggedNode(id);
+        _dragStartMousePosition.current = { x: event.clientX, y: event.clientY };
+        _dragStartNodePosition.current = { x: node.x, y: node.y };
+    };
+    const onMouseMove = (event) => {
+        if (drawingEdge) {
+            const rect = _arDiagram.current.getBoundingClientRect();
+            const x = (event.clientX - rect.left - pan.x) / scale;
+            const y = (event.clientY - rect.top - pan.y) / scale;
+            setMousePos({ x, y });
+        }
+        if (draggedNode) {
+            const deltaX = (event.clientX - _dragStartMousePosition.current.x) / scale;
+            const deltaY = (event.clientY - _dragStartMousePosition.current.y) / scale;
+            const newX = _dragStartNodePosition.current.x + deltaX;
+            const newY = _dragStartNodePosition.current.y + deltaY;
+            setNodes((prev) => prev.map((node) => (node.id === draggedNode ? { ...node, position: { x: newX, y: newY } } : node)));
+        }
+    };
+    const onMouseUp = () => {
+        if (drawingEdge && mousePos) {
+            const closest = getClosestPort(mousePos);
+            if (closest) {
+                // Yakın port varsa, oraya bağla
+                const newEdge = {
+                    id: _edges[_edges.length - 1]?.id + 1 || 1,
+                    from: { id: drawingEdge.id, port: drawingEdge.port },
+                    to: { id: closest.id, port: closest.port },
+                };
+                setEdges((prev) => [...prev, newEdge]);
+            }
+            else {
+                // Yakın port yoksa yeni node oluştur
+                const newNodeId = _nodes[_nodes.length - 1]?.id + 1 || 1;
+                const newNode = {
+                    id: newNodeId,
+                    position: mousePos,
+                    data: { label: `Node - ${newNodeId}` },
+                };
+                const newPort = mousePos.y < drawingEdge.start.y ? "bottom" : "top";
+                const newEdge = {
+                    id: _edges[_edges.length - 1]?.id + 1 || 1,
+                    from: { id: drawingEdge.id, port: drawingEdge.port },
+                    to: { id: newNodeId, port: newPort },
+                };
+                setNodes((prev) => [...prev, newNode]);
+                setEdges((prev) => [...prev, newEdge]);
+            }
+            setDrawingEdge(null);
+            setMousePos(null);
+        }
+        setDraggedNode(null);
+        setTrigger((prev) => !prev);
+    };
+    return (React.createElement("div", { ref: _arDiagram, className: "ar-diagram", onMouseDown: onPanStart, onMouseMove: (event) => {
+            onPanMove(event);
+            onMouseMove(event);
+        }, onMouseUp: () => {
+            onMouseUp();
+            onPanEnd();
+        } },
+        React.createElement("div", { ref: _content, className: "content", style: { backgroundPosition: `${pan.x}px ${pan.y}px` }, onWheel: handleWheel },
+            React.createElement("div", { className: "nodes-wrapper", style: {
+                    transform: `translate(${pan.x}px, ${pan.y}px) scale(${scale})`,
+                } },
+                React.createElement("div", { className: "edges" },
+                    renderEdges,
+                    drawingEdge && mousePos && (React.createElement("svg", { className: "edge-temp" },
+                        React.createElement("path", { ref: _path, d: `M${drawingEdge.start.x} ${drawingEdge.start.y} L${mousePos.x} ${mousePos.y}`, fill: "none", stroke: "var(--purple-500)", strokeWidth: 2, strokeDasharray: 10, strokeDashoffset: 10, strokeLinecap: "round" })))),
+                React.createElement("div", { className: "nodes" }, _nodes.map((node, index) => (React.createElement("div", { key: index, className: "node", style: {
+                        left: node.position.x,
+                        top: node.position.y,
+                    }, onMouseDown: (event) => onNodeMouseDown(event, node.id, node.position) },
+                    React.createElement("span", { ref: (el) => {
+                            _arNodes.current[`${node.id}_top`] = el;
+                        }, className: "port top", onMouseDown: (event) => {
+                            event.stopPropagation();
+                            const port = "top";
+                            const from = getPortCenter(node.id, port);
+                            if (from) {
+                                setDrawingEdge({
+                                    id: node.id,
+                                    port,
+                                    start: from,
+                                });
+                            }
+                        } }),
+                    React.createElement("span", null, node.data.label),
+                    React.createElement("span", { ref: (el) => {
+                            _arNodes.current[`${node.id}_bottom`] = el;
+                        }, className: "port bottom", onMouseDown: (event) => {
+                            event.stopPropagation();
+                            const from = getPortCenter(node.id, "bottom");
+                            if (from) {
+                                setDrawingEdge({
+                                    id: node.id,
+                                    port: "bottom",
+                                    start: from,
+                                });
+                            }
+                        } }))))))),
+        React.createElement("div", { className: "zoom-buttons", onMouseDown: (event) => event.stopPropagation() },
+            React.createElement(Box, null,
+                React.createElement(Tooltip, { text: "Zoom Out" },
+                    React.createElement(Button, { variant: "borderless", color: "light", icon: { element: React.createElement(ARIcon, { icon: "Dash", fill: "currentColor" }) }, onClick: () => handleZoom("decrement") })),
+                React.createElement("div", { className: "zoom-percent" },
+                    Math.round(scale * 100),
+                    "%"),
+                React.createElement(Tooltip, { text: "Zoom In" },
+                    React.createElement(Button, { variant: "borderless", color: "light", icon: { element: React.createElement(ARIcon, { icon: "Add", fill: "currentColor" }) }, onClick: () => handleZoom("increment") })))),
+        React.createElement("div", { style: { zIndex: 555 } }, JSON.stringify(drawingEdge))));
+}

package/dist/components/data-display/dnd/index.js

@@ -36,9 +36,6 @@ const DnD = function ({ data, renderItem, onChange }) {
                     window.scrollBy(0, -20);
                 if (rect.bottom > window.innerHeight - 150)
                     window.scrollBy(0, 20);
-                // if (!overItem.classList.contains("over-item")) {
-                //   overItem.classList.add("over-item");
-                // }
                 const nodes = document.querySelectorAll("[data-id='ar-firewall']");
                 nodes.forEach((node) => node.remove());
                 if (_dragItem.current !== overItem) {
@@ -56,15 +53,6 @@ const DnD = function ({ data, renderItem, onChange }) {
                     onChange(data);
                 }
             };
-            // _item.ondragleave = (event) => {
-            //   const leaveItem = event.currentTarget as HTMLElement;
-            //   leaveItem.classList.remove("over-item");
-            // };
-            // _item.ondrop = (event) => {
-            //   // const dropItem = event.currentTarget as HTMLElement;
-            //   // Temizlik...
-            //   // dropItem.classList.remove("over-item");
-            // };
             _item.ondragend = (event) => {
                 const item = event.currentTarget;
                 item.classList.remove("drag-item");

package/dist/components/data-display/table/FilterPopup.js

@@ -1,3 +1,4 @@
+"use client";
 import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 const FilterPopup = ({ children, tableContent, coordinate, buttons }) => {

package/dist/components/form/upload/Dropzone.js

@@ -1,3 +1,4 @@
+"use client";
 import React, { memo, useEffect, useState } from "react";
 import { ARIcon } from "../../icons";
 import Utils from "../../../libs/infrastructure/shared/Utils";

package/dist/components/form/upload/index.js

@@ -1,3 +1,4 @@
+"use client";
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import "../../../assets/css/components/form/upload/styles.css";
 import { ARIcon } from "../../icons";