ar-design 0.3.2 → 0.3.4

package/dist/assets/css/components/data-display/dnd/dnd.css

@@ -2,49 +2,71 @@
   display: flex;
   flex-direction: column;
   gap: 1rem 0;
-}
 
-.ar-dnd > div {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  gap: 0 0.5rem;
-  width: 100%;
-  cursor: move;
-  overflow: hidden;
-  transition: transform 0.3s ease, opacity 0.3s ease;
-}
-.ar-dnd > div.drag-item {
-  opacity: 0.5;
-}
-.ar-dnd > div.over-item {
-  position: relative;
-}
-.ar-dnd > div.over-item::after {
-  position: absolute;
-  content: "";
-  background-color: var(--success);
-  left: 1rem;
-  right: 1rem;
-  bottom: 0;
-  height: 5px;
-  border-radius: var(--border-radius-pill);
-}
-.ar-dnd > div.end-item {
-  /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
-  animation: endItem ease-in-out 1s 0s 1 normal both;
-}
+  > .item {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 0 0.5rem;
+    width: 100%;
+    cursor: move;
+    overflow: hidden;
+    transition: transform 0.3s ease, opacity 0.3s ease;
 
-.ar-dnd > div > .move {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+    &.drag-item {
+      opacity: 0.5;
+    }
+
+    &.over-item {
+      position: relative;
+    }
+
+    &.over-item::after {
+      position: absolute;
+      content: "";
+      background-color: var(--success);
+      left: 1rem;
+      right: 1rem;
+      bottom: 0;
+      height: 5px;
+      border-radius: var(--border-radius-pill);
+    }
+
+    &.end-item {
+      /* Sırasıyla; Ad, Süre, Hız, Gecikme Süresi, Tekrar Sayısı, Yön, Bitiş Süreci */
+      animation: endItem ease-in-out 1s 0s 1 normal both;
+    }
+
+    > .move {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    > .content {
+      flex: 100%;
+    }
+  }
+
+  > .placeholder {
+    position: relative;
+    border-bottom: solid 2px var(--blue-500);
+    border-radius: var(--border-radius-pill);
 
-.ar-dnd > div > .content {
-  flex: 100%;
+    &::before {
+      position: absolute;
+      left: 0;
+      top: -3px;
+      content: "";
+      background-color: var(--gray-100);
+      width: 7.5px;
+      height: 7.5px;
+      border: solid 2px var(--blue-500);
+      border-radius: var(--border-radius-pill);
+    }
+  }
 }
 
 @import url("./animations.css");

package/dist/assets/css/components/data-display/kanban-board/styles.css

@@ -0,0 +1,68 @@
+.ar-kanban-board {
+  > .columns {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+
+    > .column {
+      flex: 1;
+      background-color: var(--gray-100);
+      max-width: 350px;
+      min-width: 220px;
+      border-radius: var(--border-radius-sm);
+      user-select: none;
+
+      > .title {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 1rem;
+
+        > span {
+          border: solid 1px var(--gray-100);
+          border-radius: var(--border-radius-pill);
+          color: var(--gray-700);
+          font-size: 0.8rem;
+          font-family: var(--system);
+        }
+      }
+
+      > .items {
+        padding: 1rem;
+        height: calc(100% - 1rem);
+
+        &:has(> .no-item) {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        > .no-item {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+
+          &::after {
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+            bottom: 23px;
+            content: "";
+            background-color: var(--gray-200);
+            width: 70px;
+            height: 16px;
+            border-radius: 100%;
+          }
+
+          > span {
+            color: var(--gray-500);
+            font-family: var(--system);
+          }
+        }
+      }
+    }
+  }
+}

package/dist/assets/css/components/data-display/table/styles.css

@@ -7,6 +7,7 @@
   width: 1px;
   border-radius: var(--border-radius-lg);
   box-shadow: 0px 10px 15px -5px rgba(var(--black-rgb), 0.1);
+  font-family: var(--system);
   overflow: hidden;
 }
 .ar-table > .header {
@@ -186,6 +187,35 @@
   cursor: no-drop;
 }
 
+.ar-table > .content > table > tbody > tr > td {
+  > .no-item {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 200px;
+    border-bottom: solid 1px var(--gray-200);
+
+    &::after {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 82px;
+      content: "";
+      background-color: var(--gray-100);
+      width: 70px;
+      height: 16px;
+      border-radius: 100%;
+    }
+
+    > span {
+      color: var(--gray-500);
+      font-family: var(--system);
+    }
+  }
+}
+
 /* For Rows */
 .ar-table > .content > table > tbody > tr > td > .table-cell > .before {
   position: absolute;

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

@@ -1,7 +1,7 @@
 /* #region BLUE */
 .borderless:not(.disabled) {
   &.blue {
-    color: var(--blue-500-500);
+    color: var(--blue-500);
 
     &.active {
       animation: clicked-blue ease-in-out 750ms 0s 1 normal both;
@@ -34,7 +34,7 @@ button.borderless:not(.disabled) {
 /* #region PURPLE */
 .borderless:not(.disabled) {
   &.purple {
-    color: var(--purple-500-500);
+    color: var(--purple-500);
 
     &.active {
       animation: clicked-purple ease-in-out 750ms 0s 1 normal both;
@@ -67,7 +67,7 @@ button.borderless:not(.disabled) {
 /* #region PINK */
 .borderless:not(.disabled) {
   &.pink {
-    color: var(--pink-500-500);
+    color: var(--pink-500);
 
     &.active {
       animation: clicked-pink ease-in-out 750ms 0s 1 normal both;
@@ -100,7 +100,7 @@ button.borderless:not(.disabled) {
 /* #region RED */
 .borderless:not(.disabled) {
   &.red {
-    color: var(--red-500-500);
+    color: var(--red-500);
 
     &.active {
       animation: clicked-red ease-in-out 750ms 0s 1 normal both;
@@ -133,7 +133,7 @@ button.borderless:not(.disabled) {
 /* #region ORANGE */
 .borderless:not(.disabled) {
   &.orange {
-    color: var(--orange-500-500);
+    color: var(--orange-500);
 
     &.active {
       animation: clicked-orange ease-in-out 750ms 0s 1 normal both;
@@ -166,7 +166,7 @@ button.borderless:not(.disabled) {
 /* #region YELLOW */
 .borderless:not(.disabled) {
   &.yellow {
-    color: var(--yellow-500-500);
+    color: var(--yellow-500);
 
     &.active {
       animation: clicked-yellow ease-in-out 750ms 0s 1 normal both;
@@ -199,7 +199,7 @@ button.borderless:not(.disabled) {
 /* #region GREEN */
 .borderless:not(.disabled) {
   &.green {
-    color: var(--green-500-500);
+    color: var(--green-500);
 
     &.active {
       animation: clicked-green ease-in-out 750ms 0s 1 normal both;
@@ -232,7 +232,7 @@ button.borderless:not(.disabled) {
 /* #region TEAL */
 .borderless:not(.disabled) {
   &.teal {
-    color: var(--teal-500-500);
+    color: var(--teal-500);
 
     &.active {
       animation: clicked-teal ease-in-out 750ms 0s 1 normal both;
@@ -265,7 +265,7 @@ button.borderless:not(.disabled) {
 /* #region CYAN */
 .borderless:not(.disabled) {
   &.cyan {
-    color: var(--cyan-500-500);
+    color: var(--cyan-500);
 
     &.active {
       animation: clicked-cyan ease-in-out 750ms 0s 1 normal both;
@@ -298,7 +298,7 @@ button.borderless:not(.disabled) {
 /* #region GRAY */
 .borderless:not(.disabled) {
   &.gray {
-    color: var(--gray-500-500);
+    color: var(--gray-500);
 
     &.active {
       animation: clicked-gray ease-in-out 750ms 0s 1 normal both;

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

@@ -1,4 +1,5 @@
 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;
+declare const Diagram: React.FC<IProps>;
+export default Diagram;

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

@@ -5,7 +5,7 @@ import Button from "../../form/button";
 import Tooltip from "../../feedback/tooltip";
 import { ARIcon } from "../../icons";
 const { Box } = Grid;
-export default function Diagram({ nodes, edges }) {
+const Diagram = ({ nodes, edges }) => {
     // refs
     const _arDiagram = useRef(null);
     const _content = useRef(null);
@@ -173,7 +173,14 @@ export default function Diagram({ nodes, edges }) {
                     from: { id: drawingEdge.id, port: drawingEdge.port },
                     to: { id: closest.id, port: closest.port },
                 };
-                setEdges((prev) => [...prev, newEdge]);
+                // Aynı edge daha önce eklenmiş mi kontrol et
+                const isDuplicate = _edges.some((edge) => {
+                    const samePair = (edge.from.id === newEdge.from.id && edge.to.id === newEdge.to.id) ||
+                        (edge.from.id === newEdge.to.id && edge.to.id === newEdge.from.id);
+                    return samePair;
+                });
+                if (!isDuplicate)
+                    setEdges((prev) => [...prev, newEdge]);
             }
             else {
                 // Yakın port yoksa yeni node oluştur
@@ -255,4 +262,5 @@ export default function Diagram({ nodes, edges }) {
                 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))));
-}
+};
+export default Diagram;

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

@@ -23,6 +23,7 @@ interface IProps<T> {
      * ```
      */
     renderItem: (item: T, index: number) => React.JSX.Element;
+    columnKey?: string;
     /**
      * Sıralama değiştiğinde tetiklenen olay.
      *
@@ -34,6 +35,6 @@ interface IProps<T> {
      * <DnD onChange={(data) => console.log("Yeni sıra:", data)} />
      * ```
      */
-    onChange: (data: T[]) => void;
+    onChange?: (data: T[]) => void;
 }
 export default IProps;

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

@@ -1,5 +1,5 @@
 import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/data-display/dnd/dnd.css";
-declare const DnD: <T>({ data, renderItem, onChange }: IProps<T>) => React.JSX.Element;
+declare const DnD: <T>({ data, renderItem, columnKey, onChange }: IProps<T>) => React.JSX.Element;
 export default DnD;

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

@@ -2,7 +2,8 @@
 import React, { useEffect, useRef } from "react";
 import "../../../assets/css/components/data-display/dnd/dnd.css";
 import { ARIcon } from "../../icons";
-const DnD = function ({ data, renderItem, onChange }) {
+let _fromColumn = undefined;
+const DnD = function ({ data, renderItem, columnKey, onChange }) {
     // refs
     const _arDnD = useRef(null);
     const _dragItem = useRef();
@@ -17,14 +18,21 @@ const DnD = function ({ data, renderItem, onChange }) {
                 const dragItem = event.currentTarget;
                 _dragItem.current = dragItem;
                 dragItem.classList.add("drag-item");
-                // Korumaya başla
+                const index = [..._arDnD.current.children].indexOf(dragItem);
+                const draggedData = data[index];
+                if (event.dataTransfer) {
+                    event.dataTransfer.setData("item", JSON.stringify(draggedData));
+                    event.dataTransfer.setData("fromColumn", columnKey ?? "");
+                    _fromColumn = columnKey ?? undefined;
+                }
+                // Korumaya başla.
                 if (_arDnD.current) {
                     _arDnD.current.childNodes.forEach((item) => {
-                        const firewall = document.createElement("div");
-                        firewall.setAttribute("data-id", "ar-firewall");
-                        firewall.style.position = "absolute";
-                        firewall.style.inset = "0";
-                        item.appendChild(firewall);
+                        const placeholder = document.createElement("div");
+                        placeholder.setAttribute("data-id", "placeholder");
+                        placeholder.style.position = "absolute";
+                        placeholder.style.inset = "0";
+                        item.appendChild(placeholder);
                     });
                 }
             };
@@ -32,25 +40,44 @@ const DnD = function ({ data, renderItem, onChange }) {
                 event.preventDefault();
                 const overItem = event.currentTarget;
                 const rect = overItem.getBoundingClientRect();
+                // Otomatik scroll.
                 if (rect.top < 250)
                     window.scrollBy(0, -20);
                 if (rect.bottom > window.innerHeight - 150)
                     window.scrollBy(0, 20);
-                const nodes = document.querySelectorAll("[data-id='ar-firewall']");
-                nodes.forEach((node) => node.remove());
+                // Sadece aynı kolondaysa drag-drop yap.
+                if (columnKey && _fromColumn !== columnKey) {
+                    // Placeholder'ı temizle
+                    const nodes = document.querySelectorAll("[data-id='placeholder']");
+                    nodes.forEach((node) => node.remove());
+                    // Placeholder element oluştur.
+                    const placeholder = document.createElement("div");
+                    placeholder.setAttribute("data-id", "placeholder");
+                    placeholder.classList.add("placeholder");
+                    // Fare pozisyonuna göre yerleştir.
+                    const isBelow = event.clientY > rect.top + rect.height / 2;
+                    if (isBelow) {
+                        overItem.parentNode?.insertBefore(placeholder, overItem.nextSibling);
+                    }
+                    else {
+                        overItem.parentNode?.insertBefore(placeholder, overItem);
+                    }
+                    return; // taşıma yapma ama placeholder gösterilsin.
+                }
+                // Gerçek taşıma işlemi.
                 if (_dragItem.current !== overItem) {
                     if (_arDnD.current && _dragItem.current) {
                         const dragItemIndex = [..._arDnD.current.children].indexOf(_dragItem.current);
                         const dropItemIndex = [..._arDnD.current.children].indexOf(overItem);
-                        if (dragItemIndex < dropItemIndex) {
-                            _arDnD.current.insertBefore(_dragItem.current, overItem.nextSibling);
-                        }
-                        else {
-                            _arDnD.current.insertBefore(_dragItem.current, overItem);
+                        if (dragItemIndex === -1 || dropItemIndex === -1)
+                            return;
+                        _arDnD.current.insertBefore(_dragItem.current, dragItemIndex < dropItemIndex ? overItem.nextSibling : overItem);
+                        const movedItem = data.splice(dragItemIndex, 1)[0];
+                        if (movedItem) {
+                            data.splice(dropItemIndex, 0, movedItem);
+                            onChange?.(data);
                         }
-                        data.splice(dropItemIndex, 0, data.splice(dragItemIndex, 1)[0]);
                     }
-                    onChange(data);
                 }
             };
             _item.ondragend = (event) => {
@@ -65,8 +92,19 @@ const DnD = function ({ data, renderItem, onChange }) {
             };
         });
         _arDnD.current.ondragover = (event) => event.preventDefault();
+        return () => {
+            if (!_arDnD.current)
+                return;
+            _arDnD.current.childNodes.forEach((item) => {
+                const _item = item;
+                _item.ondragstart = null;
+                _item.ondragover = null;
+                _item.ondragend = null;
+            });
+            _arDnD.current.ondragover = null;
+        };
     }, [data]);
-    return (React.createElement("div", { ref: _arDnD, className: "ar-dnd" }, data.map((item, index) => (React.createElement("div", { key: index, draggable: true },
+    return (React.createElement("div", { ref: _arDnD, className: "ar-dnd" }, data.map((item, index) => (React.createElement("div", { key: index, className: "item", draggable: true },
         React.createElement("div", { className: "move" },
             React.createElement(ARIcon, { icon: "GripVertical", fill: "var(--blue-500)", size: 18 })),
         React.createElement("div", { className: "content" }, renderItem(item, index)))))));

package/dist/components/data-display/kanban-board/IProps.d.ts

@@ -0,0 +1,5 @@
+import { KanbanBoardColumnType } from "../../../libs/types";
+interface IProps<T> {
+    columns: KanbanBoardColumnType<T>[];
+}
+export default IProps;

package/dist/components/data-display/kanban-board/IProps.js

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

package/dist/components/data-display/kanban-board/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import IProps from "./IProps";
+import "../../../assets/css/components/data-display/kanban-board/styles.css";
+declare const KanbanBoard: <T>({ columns }: IProps<T>) => React.JSX.Element;
+export default KanbanBoard;

package/dist/components/data-display/kanban-board/index.js

@@ -0,0 +1,71 @@
+"use client";
+import React, { useRef, useState } from "react";
+import Typography from "../typography";
+import "../../../assets/css/components/data-display/kanban-board/styles.css";
+import DnD from "../dnd";
+import { ARIcon } from "../../icons";
+const { Title } = Typography;
+const KanbanBoard = function ({ columns }) {
+    // refs
+    const _hoverItemIndex = useRef(null);
+    // states
+    const [boardData, setBoardData] = useState(columns);
+    const handleDrop = (toColumn) => (event) => {
+        event.preventDefault();
+        const item = JSON.parse(event.dataTransfer.getData("item"));
+        const fromColumn = event.dataTransfer.getData("fromColumn");
+        if (!item || fromColumn === toColumn)
+            return;
+        const now = Date.now();
+        const updatedColumns = boardData.map((col) => {
+            if (col.key === fromColumn) {
+                return {
+                    ...col,
+                    items: col.items.filter((i) => i.id !== item.id),
+                    updatedAt: now,
+                };
+            }
+            if (col.key === toColumn) {
+                const newItems = [...col.items];
+                const safeIndex = Math.min(_hoverItemIndex.current ?? Infinity, newItems.length); // son elemandan fazla olmasın.
+                newItems.splice(safeIndex, 0, item);
+                return {
+                    ...col,
+                    items: newItems,
+                    updatedAt: now,
+                };
+            }
+            return col;
+        });
+        setBoardData(updatedColumns);
+        // Temizlik
+        event.dataTransfer.clearData("item");
+        event.dataTransfer.clearData("fromColumn");
+        _hoverItemIndex.current = null;
+        const nodes = document.querySelectorAll("[data-id='placeholder']");
+        nodes.forEach((node) => node.remove());
+    };
+    // methods
+    const renderColumns = (_boardData) => {
+        return _boardData.map((board, cIndex) => {
+            return (React.createElement("div", { key: cIndex, className: "column", onDragOver: (event) => event.preventDefault(), onDrop: handleDrop(board.key) },
+                React.createElement("div", { className: "title" },
+                    React.createElement(Title, { Level: "h5" }, board.title),
+                    board.items.length > 0 && React.createElement("span", null, board.items.length)),
+                React.createElement("div", { className: "items" }, board.items.length === 0 ? (React.createElement("div", { className: "no-item" },
+                    React.createElement(ARIcon, { icon: "Inbox-Fill", fill: "var(--gray-300)", size: 64, style: { position: "relative", zIndex: 1 } }),
+                    React.createElement("span", null, "No Data"))) : (React.createElement(DnD, { key: `${board.key}-${board.items.map((i) => i.updatedAt).join("_")}`, data: board.items, renderItem: (item, index) => {
+                        return (React.createElement("div", { key: index, className: "item", onDragOver: (event) => {
+                                event.preventDefault();
+                                const rect = event.currentTarget.getBoundingClientRect();
+                                const mouseY = event.clientY;
+                                const isBelow = mouseY > rect.top + rect.height / 2;
+                                _hoverItemIndex.current = isBelow ? index + 1 : index;
+                            } }, board.renderItem(item, index)));
+                    }, columnKey: board.key })))));
+        });
+    };
+    return (React.createElement("div", { className: "ar-kanban-board" },
+        React.createElement("div", { className: "columns" }, renderColumns(boardData))));
+};
+export default KanbanBoard;

package/dist/components/data-display/table/Editable.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { TableColumnType } from "../../../libs/types";
+interface IProps<T> {
+    c: TableColumnType<T>;
+    item: T;
+    onEditable: (item: T) => void;
+}
+declare const Editable: <T>({ c, item, onEditable }: IProps<T>) => React.JSX.Element | null;
+export default Editable;

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

@@ -0,0 +1,44 @@
+"use client";
+import React, { useState } from "react";
+import Input from "../../form/input";
+import DatePicker from "../../form/date-picker";
+import Select from "../../form/select";
+const Editable = function ({ c, item, onEditable }) {
+    const key = c.key;
+    const itemValue = item[c.key];
+    const selectItem = c.editable?.options?.find((x) => x.value === itemValue);
+    const selectItems = Array.isArray(itemValue)
+        ? c.editable?.options?.filter((x) => itemValue.includes(x.value))
+        : [];
+    // states
+    const [value, setValue] = useState(itemValue);
+    const [selectionItem, setSelectionItem] = useState(selectItem);
+    const [selectionItems, setSelectionItems] = useState(selectItems);
+    switch (c.editable?.type) {
+        case "string":
+        case "number":
+            return (React.createElement(Input, { variant: "borderless", value: value, onChange: (event) => {
+                    const { value } = event.target;
+                    setValue(value);
+                    onEditable({ ...item, [key]: c.editable?.type === "number" ? Number(value) : value });
+                } }));
+        case "date-picker":
+            return (React.createElement(DatePicker, { variant: "borderless", value: value, onChange: (value) => {
+                    setValue(value);
+                    onEditable({ ...item, [key]: value });
+                } }));
+        case "single-select":
+            return (React.createElement(Select, { variant: "borderless", value: selectionItem, options: c.editable.options, onChange: (option) => {
+                    setSelectionItem(option);
+                    onEditable({ ...item, [key]: option?.value });
+                } }));
+        case "multiple-select":
+            return (React.createElement(Select, { variant: "borderless", value: selectionItems, options: c.editable.options, onChange: (options) => {
+                    setSelectionItems(options);
+                    onEditable({ ...item, [key]: options.map((option) => option.value) });
+                }, multiple: true }));
+        default:
+            return null;
+    }
+};
+export default Editable;

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

@@ -142,6 +142,7 @@ interface IProps<T> extends IChildren {
      * @param operator - Kullanılan filtre operatörü.
      */
     searchedParams?: (params: SearchedParam | null, query: string, operator: FilterOperator) => void;
+    onEditable?: (item: T) => void;
     /**
      * Sayfalama ayarları.
      */