@harjs/react-ui 1.0.0

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

@@ -0,0 +1,309 @@
+"use client";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import "../../../assets/css/components/data-display/kanban-board/styles.css";
+import DnD from "../dnd";
+import { ARIcon } from "../../icons";
+import Filter from "./filter";
+const KanbanBoard = function ({ trackBy, columns, onChange, onLazyLoad, config, }) {
+    // refs
+    const _kanbanWrapper = useRef(null);
+    const _kanbanItems = useRef({});
+    const _hoverItemIndex = useRef(null);
+    const _isProgrammaticScroll = useRef(false);
+    const _scrollInterval = useRef(null);
+    const _scrollAnimationFrame = useRef(null);
+    const _scrollSpeedRef = useRef(0);
+    const _lastScrollTop = useRef(0);
+    const _lastRequest = useRef("");
+    // states
+    const [data, setData] = useState([]);
+    // states -> Lazy Load
+    const [query, setQuery] = useState(null);
+    const [perPage] = useState(config?.perPage ?? 10);
+    const [currentPage, setCurrentPage] = useState(1);
+    // states -> Filters
+    const [search, setSearch] = useState(null);
+    const [selectFilters, setSelectFilters] = useState({});
+    const [selectedFilters, setSelectedFilters] = useState({});
+    const [dateFilters, setDateFilters] = useState({});
+    // methods
+    const handleBoardDragOver = (event) => {
+        event.preventDefault();
+        const kanbanWrapper = _kanbanWrapper.current;
+        if (!kanbanWrapper)
+            return;
+        const rect = kanbanWrapper.getBoundingClientRect();
+        const mouseX = event.clientX;
+        const edgeThreshold = 100; // px olarak kenar hassasiyeti.
+        if (mouseX - rect.left < edgeThreshold) {
+            // sol kenara yaklaştı.
+            _scrollSpeedRef.current = -Math.max(1, (edgeThreshold - (mouseX - rect.left)) / 2);
+        }
+        else if (rect.right - mouseX < edgeThreshold) {
+            // sağ kenara yaklaştı.
+            _scrollSpeedRef.current = Math.max(1, (edgeThreshold - (rect.right - mouseX)) / 2);
+        }
+        else {
+            _scrollSpeedRef.current = 0;
+        }
+        if (!_scrollAnimationFrame.current) {
+            const scrollLoop = () => {
+                if (kanbanWrapper && _scrollSpeedRef.current !== 0) {
+                    kanbanWrapper.scrollLeft += _scrollSpeedRef.current;
+                }
+                _scrollAnimationFrame.current = requestAnimationFrame(scrollLoop);
+            };
+            scrollLoop();
+        }
+    };
+    const handleDrop = (toColumn) => (event) => {
+        event.preventDefault();
+        const item = JSON.parse(event.dataTransfer.getData("item"));
+        const fromColumn = event.dataTransfer.getData("fromColumn");
+        const nodes = document.querySelectorAll("[data-id='placeholder']");
+        nodes.forEach((node) => node.remove());
+        if (!item || fromColumn === toColumn)
+            return;
+        const updatedColumns = data.map((board) => {
+            if (board.key === fromColumn) {
+                return {
+                    ...board,
+                    items: board.items.filter((_item) => trackBy(_item) !== trackBy(item)),
+                };
+            }
+            if (board.key === toColumn) {
+                const boardItems = [...board.items];
+                const safeIndex = Math.min(_hoverItemIndex.current ?? Infinity, boardItems.length); // son elemandan fazla olmasın.
+                boardItems.splice(safeIndex, 0, item);
+                onChange?.(item, board.key, board.columnProperties, safeIndex);
+                return {
+                    ...board,
+                    items: boardItems,
+                };
+            }
+            return board;
+        });
+        setData(updatedColumns);
+        // Temizlik
+        event.dataTransfer.clearData("item");
+        event.dataTransfer.clearData("fromColumn");
+        _hoverItemIndex.current = null;
+    };
+    const handleItemsDragOver = (event) => {
+        event.preventDefault();
+        const item = event.currentTarget;
+        if (!item.classList.contains("dragging"))
+            item.classList.add("dragging");
+    };
+    const handleItemsDragLeave = (event) => {
+        event.preventDefault();
+        const item = event.currentTarget;
+        const rect = item.getBoundingClientRect();
+        const { clientX, clientY } = event;
+        const isInside = clientX >= rect.left && clientX <= rect.right && clientY >= rect.top && clientY <= rect.bottom;
+        if (!isInside && item.classList.contains("dragging")) {
+            item.classList.remove("dragging");
+        }
+    };
+    const handleItemsDrop = (event) => {
+        event.preventDefault();
+        const item = event.currentTarget;
+        if (item.classList.contains("dragging"))
+            item.classList.remove("dragging");
+    };
+    const handleLazyLoadScroll = useCallback((event) => {
+        const target = event.currentTarget;
+        const { scrollTop, scrollHeight, clientHeight } = target;
+        if (_isProgrammaticScroll.current) {
+            if (scrollTop <= 5)
+                _isProgrammaticScroll.current = false;
+            return;
+        }
+        const isScrollingDown = scrollTop > _lastScrollTop.current;
+        _lastScrollTop.current = scrollTop;
+        if (!isScrollingDown)
+            return;
+        const isBottom = scrollHeight - scrollTop <= clientHeight;
+        if (isBottom)
+            setCurrentPage((prev) => prev + 1);
+    }, []);
+    const handleStartScroll = (direction) => {
+        const el = _kanbanWrapper.current;
+        if (!el)
+            return;
+        handleStopScroll();
+        _scrollInterval.current = window.setInterval(() => {
+            el.scrollLeft += direction === "left" ? -10 : 10;
+        }, 16); // ~60fps
+    };
+    const handleStopScroll = () => {
+        if (_scrollInterval.current) {
+            clearInterval(_scrollInterval.current);
+            _scrollInterval.current = null;
+        }
+    };
+    const stopScrolling = () => {
+        if (_scrollAnimationFrame.current) {
+            cancelAnimationFrame(_scrollAnimationFrame.current);
+            _scrollAnimationFrame.current = null;
+        }
+        _scrollSpeedRef.current = 0;
+    };
+    const darkenColor = (hex, percent) => {
+        let num = parseInt(hex.slice(1), 16), amt = Math.round(2.55 * percent), R = (num >> 16) - amt, G = ((num >> 8) & 0x00ff) - amt, B = (num & 0x0000ff) - amt;
+        return ("#" +
+            (0x1000000 +
+                (R < 255 ? (R < 0 ? 0 : R) : 255) * 0x10000 +
+                (G < 255 ? (G < 0 ? 0 : G) : 255) * 0x100 +
+                (B < 255 ? (B < 0 ? 0 : B) : 255))
+                .toString(16)
+                .slice(1));
+    };
+    // useEffects
+    useEffect(() => {
+        let _data = columns.map((col) => ({
+            ...col,
+            items: [...col.items],
+        }));
+        setData(_data);
+        const selectMap = new Map();
+        const dateMap = new Map();
+        columns.forEach((col) => {
+            col.items.forEach((item) => {
+                const keys = config?.filter?.keys(item);
+                keys?.forEach((k) => {
+                    if (k.type === "select") {
+                        if (!selectMap.has(k.name))
+                            selectMap.set(k.name, new Set());
+                        selectMap.get(k.name).add(k.value ?? null);
+                    }
+                    if (k.type === "date")
+                        dateMap.set(k.name, true);
+                });
+            });
+        });
+        setSelectFilters(Object.fromEntries(Array.from(selectMap.entries()).map(([name, set]) => [name, Array.from(set)])));
+        setDateFilters((prev) => {
+            const next = { ...prev };
+            Array.from(dateMap.keys()).forEach((name) => {
+                if (!next[name]) {
+                    next[name] = { from: null, to: null };
+                }
+            });
+            return next;
+        });
+    }, [columns]);
+    const _prevFilters = useRef(JSON.stringify({ search, selectedFilters, dateFilters }));
+    useEffect(() => {
+        const normalizedFilters = JSON.stringify({
+            search,
+            selectedFilters: Object.fromEntries(Object.entries(selectedFilters).map(([k, v]) => [k, Array.from(v).sort()])),
+            dateFilters,
+        });
+        const hasSelectedFilters = Object.values(selectedFilters).some((set) => set.size > 0);
+        const hasDateFilters = Object.values(dateFilters).some((r) => r.from || r.to);
+        // Page reset + Scroll logic.
+        if (_prevFilters.current !== normalizedFilters) {
+            setCurrentPage(1);
+            _prevFilters.current = normalizedFilters;
+            if (_kanbanWrapper.current) {
+                _isProgrammaticScroll.current = true;
+                _kanbanWrapper.current.scrollTo({
+                    top: 0,
+                    left: 0,
+                    behavior: "smooth",
+                });
+            }
+        }
+        // Query Build Logic.
+        if (!search && !hasSelectedFilters && !hasDateFilters) {
+            setQuery(null);
+            return;
+        }
+        const sampleItem = columns?.[0]?.items?.[0];
+        const keys = config?.filter?.keys(sampleItem) ?? [];
+        const keyMap = Object.fromEntries(keys.map((k) => [k.name, k.key]));
+        const dateQuery = Object.entries(dateFilters).reduce((acc, [name, range]) => {
+            if (range.from || range.to) {
+                const technicalKey = keyMap[name] || name;
+                acc[technicalKey] = {
+                    from: range.from,
+                    to: range.to,
+                };
+            }
+            return acc;
+        }, {});
+        const selectQuery = Object.entries(selectedFilters).reduce((acc, [name, set]) => {
+            if (set.size > 0) {
+                const technicalKey = keyMap[name] || name;
+                acc[technicalKey] = Array.from(set);
+            }
+            return acc;
+        }, {});
+        setQuery({
+            keyword: search ?? "",
+            ...dateQuery,
+            ...selectQuery,
+        });
+    }, [search, selectedFilters, dateFilters, columns, config]);
+    useEffect(() => {
+        if (!onLazyLoad)
+            return;
+        const key = JSON.stringify({ query, currentPage, perPage });
+        if (_lastRequest.current === key)
+            return;
+        _lastRequest.current = key;
+        onLazyLoad(query, perPage, currentPage);
+    }, [query, currentPage, perPage, onLazyLoad]);
+    return (React.createElement(React.Fragment, null,
+        config?.filter && (React.createElement(Filter, { states: {
+                search: {
+                    get: search,
+                    set: setSearch,
+                },
+                dateFilters: {
+                    get: dateFilters,
+                    set: setDateFilters,
+                },
+                selectFilters: {
+                    get: selectFilters,
+                    set: setSelectFilters,
+                },
+                selectedFilters: {
+                    get: selectedFilters,
+                    set: setSelectedFilters,
+                },
+            }, config: config })),
+        React.createElement("div", { ref: _kanbanWrapper, className: "ar-kanban-board", style: {
+                height: `calc(100dvh - (${_kanbanWrapper.current?.getBoundingClientRect().top}px + ${config?.safeAreaOffset?.bottom ?? 0}px))`,
+            }, onScroll: handleLazyLoadScroll, onDragOver: handleBoardDragOver, onDragEnd: stopScrolling, onDrop: stopScrolling },
+            React.createElement("div", { className: "buttons" },
+                React.createElement("div", { className: "button left", onMouseDown: () => handleStartScroll("left"), onMouseUp: handleStopScroll, onMouseLeave: handleStopScroll },
+                    React.createElement(ARIcon, { icon: "ArrowLeft" })),
+                React.createElement("div", { className: "button right", onMouseDown: () => handleStartScroll("right"), onMouseUp: handleStopScroll, onMouseLeave: handleStopScroll },
+                    React.createElement(ARIcon, { icon: "ArrowRight" }))),
+            React.createElement("div", { className: "titles" }, data.map((board, index) => (React.createElement("div", { key: index, className: "title" },
+                React.createElement("h4", null,
+                    React.createElement("span", { style: {
+                            backgroundColor: darkenColor(board.titleColor ?? "", 1),
+                            borderColor: darkenColor(board.titleColor ?? "", 1),
+                        } }),
+                    board.title.toLocaleUpperCase("tr")),
+                board.description && React.createElement("span", null, board.description))))),
+            React.createElement("div", { className: "columns" }, data.map((board, index) => (React.createElement("div", { key: index, className: "column", onDrop: handleDrop(board.key) },
+                React.createElement("div", { className: "items", onDragOver: handleItemsDragOver, onDragLeave: handleItemsDragLeave, onDrop: handleItemsDrop },
+                    React.createElement(DnD, { key: board.key, data: board.items, renderItem: (item, dndIndex) => {
+                            return (React.createElement("div", { key: dndIndex, ref: (el) => {
+                                    if (!el)
+                                        return;
+                                    _kanbanItems.current[trackBy(item)] = el;
+                                }, 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 ? dndIndex + 1 : dndIndex;
+                                } }, board.renderItem(item, index)));
+                        }, columnKey: board.key, confing: { isMoveIcon: false } })))))))));
+};
+export default KanbanBoard;

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

@@ -0,0 +1,6 @@
+import { IChildrenProps } from "../../../libs/infrastructure/types/IGlobalProps";
+interface IProps extends IChildrenProps {
+    title?: string;
+    action?: React.ReactNode;
+}
+export default IProps;

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

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

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

@@ -0,0 +1,5 @@
+import React from "react";
+import "../../../assets/css/components/data-display/paper/styles.css";
+import IProps from "./IProps";
+declare const Paper: React.FC<IProps>;
+export default Paper;

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

@@ -0,0 +1,12 @@
+import React from "react";
+import Typography from "../typography";
+import "../../../assets/css/components/data-display/paper/styles.css";
+const { Title } = Typography;
+const Paper = ({ children, title, action }) => {
+    return (React.createElement("div", { className: "ar-paper" },
+        (title || action) && (React.createElement("div", { className: "header" },
+            title && React.createElement(Title, { Level: "h3" }, title),
+            action && React.createElement("div", { className: "actions-field" }, action))),
+        React.createElement("div", { className: "content" }, children)));
+};
+export default Paper;

package/dist/components/data-display/syntax-highlighter/Import.d.ts

@@ -0,0 +1,4 @@
+declare const Import: React.FC<{
+    children: string;
+}>;
+export default Import;

package/dist/components/data-display/syntax-highlighter/Import.js

@@ -0,0 +1,5 @@
+const Import = ({ children }) => {
+    return children;
+};
+Import.displayName = "Import";
+export default Import;

package/dist/components/data-display/syntax-highlighter/classes/Compiler.d.ts

@@ -0,0 +1,7 @@
+declare class Compiler {
+    _setHtmlContent: React.Dispatch<React.SetStateAction<string>>;
+    private _attributesCount;
+    constructor(setHtmlContent: React.Dispatch<React.SetStateAction<string>>);
+    Jsx: (elements: string[]) => void;
+}
+export default Compiler;

package/dist/components/data-display/syntax-highlighter/classes/Compiler.js

@@ -0,0 +1,92 @@
+class Compiler {
+    _setHtmlContent;
+    _attributesCount = 0;
+    constructor(setHtmlContent) {
+        this._setHtmlContent = setHtmlContent;
+    }
+    Jsx = (elements) => {
+        elements.forEach((element) => {
+            // Open Tag
+            element = element.replace(/\[open\](.*?)\[\/open\]/g, (_, p1, p2) => {
+                return `<span>${p1 ?? p2}</span>`;
+            });
+            // Close Tag
+            const closeRegex = /\[close\](.*?)\[\/close\]|\[close-slash\](.*?)\[\/close-slash\]/g;
+            element = element.replace(closeRegex, (_, p1) => {
+                return `<span>${p1}</span>`;
+            });
+            // Tag
+            element = element.replace(/\[tag\](.*?)\[\/tag\]/g, (_, p1) => {
+                return `<span class="ar-jsx-tag">${p1}</span>`;
+            });
+            // React Custom Tag
+            element = element.replace(/\[react-tag\](.*?)\[\/react-tag\]/g, (_, p1) => {
+                return `<span class="ar-jsx-custom-tag">${p1}</span>`;
+            });
+            // Attributes
+            element = element.replace(/\[attributes\](.*?)\[\/attributes\]/g, (_, p1) => {
+                let _className = "ar-jsx-attributes";
+                this._attributesCount = Number(_.match(/=/g)?.length);
+                if (this._attributesCount >= 5)
+                    _className += " type-column";
+                return `<span class="${_className}">${p1}</span>`;
+            });
+            // Attribute
+            element = element.replace(/\[attribute\](.*?)\[\/attribute\]/g, (_, p1) => {
+                return `<span class="ar-jsx-attribute">${p1}</span>`;
+            });
+            // Child Attribute
+            element = element.replace(/\[child-attribute\](.*?)\[\/child-attribute\]/g, (_, p1) => {
+                return `<span class="ar-jsx-attribute">${p1}</span>`;
+            });
+            // Attribute Key
+            element = element.replace(/\[attribute-key\](.*?)\[\/attribute-key\]/g, (_, p1) => {
+                return `<span class="ar-jsx-attribute-key">${p1}</span>`;
+            });
+            // Equal "="
+            element = element.replace(/\[equal\](.*?)\[\/equal\]/g, (_, p1) => {
+                return `<span>${p1}</span>`;
+            });
+            // Colon ":"
+            element = element.replace(/\[colon\](.*?)\[\/colon\]/g, (_, p1) => {
+                return `<span>${p1}</span>`;
+            });
+            // Attributes Values
+            element = element.replace(/\[string\](.*?)\[\/string\]/g, (_, p1) => {
+                return `<span class="ar-jsx-string-value">"${p1}"</span>`;
+            });
+            // Number
+            element = element.replace(/\[number\](.*?)\[\/number\]/g, (_, p1) => {
+                return `<span class="ar-jsx-number-value">${p1}</span>`;
+            });
+            // Boolean
+            element = element.replace(/\[boolean\](.*?)\[\/boolean\]/g, (_, p1) => {
+                return `<span class="ar-jsx-boolean-value"><span>{</span>${p1}<span>}</span></span>`;
+            });
+            // Object
+            element = element.replace(/\[object\](.*?)\[\/object\]/g, (_, p1) => {
+                let _className = "ar-jsx-object-value";
+                let _lineBreakSpaces = " ";
+                if (this._attributesCount >= 5) {
+                    _className += " type-column";
+                    _lineBreakSpaces = "";
+                }
+                return `<span class='ar-jsx-curly-brackets'>{{${_lineBreakSpaces}</span><span class="${_className}">${p1}</span><span class='ar-jsx-curly-brackets'>${_lineBreakSpaces}}}</span>`;
+            });
+            // Sub Item
+            element = element.replace(/\[sub-item\]/g, "<span class='ar-jsx-sub-item'>");
+            element = element.replace(/\[\/sub-item\]/g, "</span>");
+            // Close Child Curly Bracket "}"
+            element = element.replace(/\[\/curly-bracket\]/g, "<span class='ar-jsx-child-curly-bracket'>}</span>");
+            // Open Child Curly Bracket "{"
+            element = element.replace(/\[curly-bracket\]/g, "<span class='ar-jsx-child-curly-bracket'>{</span>");
+            // Close Child Curly Bracket "}"
+            element = element.replace(/\[\/curly-bracket\]/g, "<span class='ar-jsx-child-curly-bracket'>}</span>");
+            element = element.replace(/\[react-element\]/g, "<span class='ar-jsx-child-open-tag'>&lt;</span>");
+            element = element.replace(/\[\/react-element\]/g, "<span class='ar-jsx-child-close-tag'> &#47;&gt;</span>");
+            element = element.replace(/\[comma\]/g, "<span class='ar-jsx-comma'>,</span>");
+            this._setHtmlContent(`<span class="ar-jsx-language">${element}</span>`);
+        });
+    };
+}
+export default Compiler;

package/dist/components/data-display/syntax-highlighter/classes/Parser.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare class Parser {
+    _setElements: React.Dispatch<React.SetStateAction<string[]>>;
+    constructor(setElements: React.Dispatch<React.SetStateAction<string[]>>);
+    JsxToString: (child: React.ReactNode, subChilde?: boolean, indentLevel?: number) => string | undefined;
+    private HandleEntries;
+    private FormatAttributeValue;
+}
+export default Parser;

package/dist/components/data-display/syntax-highlighter/classes/Parser.js

@@ -0,0 +1,99 @@
+import React from "react";
+100004557273;
+class Parser {
+    // Public
+    _setElements;
+    // Private
+    // private _lineBreakSpaces = 4;
+    constructor(setElements) {
+        this._setElements = setElements;
+    }
+    JsxToString = (child, subChilde = false, indentLevel = 0) => {
+        if (!React.isValidElement(child))
+            return;
+        const element = child;
+        let componentName = "";
+        let componentContent = element.props.children;
+        if (typeof element.type === "string")
+            componentName = element.type;
+        else {
+            const componentType = element.type;
+            componentName = componentType.displayName || componentType.name || "Unknown";
+        }
+        // Indent seviyesi için boşlukları ekle.
+        const indent = "  ".repeat(indentLevel);
+        // Eğer `br` elementi ise işlemi sonlandır
+        if (componentName === "br")
+            return;
+        const attributes = Object.keys(element.props).filter((key) => key !== "children");
+        const attributesLength = attributes.length;
+        const attributesList = attributes.map((key) => this.FormatAttributeValue(key, element.props[key])).join(" ");
+        const formattedTag = componentName[0]
+            ? componentName[0].toUpperCase() === componentName[0]
+                ? `[react-tag]${componentName}[/react-tag]`
+                : componentName
+            : "";
+        const formattedAttributes = attributesLength > 0 ? ` [attributes]${attributesList}[/attributes]` : "";
+        // Eğer gelen iç eleman bir nesneyse yeniden yapılan.
+        if (React.isValidElement(componentContent)) {
+            // İç içe tek bir çocuk eleman varsa recursive olarak işlemeye devam et
+            componentContent = `\n${this.JsxToString(componentContent, true, indentLevel + 1)}\n`;
+        }
+        else if (Array.isArray(componentContent)) {
+            // Eğer birden fazla çocuk varsa hepsini işle
+            componentContent = componentContent
+                .map((contentChild) => `[sub-item]${this.JsxToString(contentChild, true, indentLevel + 1)}[/sub-item]`)
+                .join("");
+        }
+        else if (typeof componentContent === "string") {
+            // Eğer metin içeriği varsa, trimle
+            componentContent = componentContent.trim();
+        }
+        // componentContent =
+        //   attributesLength >= this._lineBreakSpaces ? `\n  ${componentContent}\n` : componentContent;
+        const renderElement = componentContent != undefined
+            ? `${indent}[open]<[/open][tag]${formattedTag}[/tag]${formattedAttributes}[close]>[/close]${componentContent}${typeof element.props["children"] === "object" ? indent : ""}[open]</[/open][tag]${formattedTag}[/tag][close]>[/close]`
+            : `${indent}[open]<[/open][tag]${formattedTag}[/tag]${formattedAttributes} [close]/>[/close]`;
+        !subChilde && this._setElements((prevElements) => [...prevElements, renderElement]);
+        return renderElement;
+    };
+    HandleEntries = (propValue) => {
+        if (React.isValidElement(propValue)) {
+            const x = propValue.type;
+            return `[react-element][react-tag]${x.displayName}[/react-tag][/react-element]`;
+        }
+        if (propValue && typeof propValue === "object") {
+            return `[curly-bracket] ${Object.entries(propValue)
+                .map(([key, value]) => `[attribute-key]${key}[/attribute-key][colon]:[/colon] ${this.HandleEntries(value)}`)
+                .join(", ")} [/curly-bracket]`;
+        }
+        return typeof propValue === "number" ? `[number]${propValue}[/number]` : `[string]${propValue}[/string]`;
+    };
+    FormatAttributeValue = (key, value) => {
+        let result = "";
+        switch (typeof value) {
+            case "number":
+                result = `[number]${value}[/number]`;
+                break;
+            case "string":
+                result = `[string]${value}[/string]`;
+                break;
+            case "boolean":
+                result = `[boolean]${value}[/boolean]`;
+                break;
+            case "object":
+                const entries = Object.entries(value)
+                    .map(([subKey, subValue]) => `[child-attribute][attribute-key]${subKey}[/attribute-key][colon]:[/colon] ${this.HandleEntries(subValue)}[/child-attribute]`)
+                    .join(", ");
+                result = `[object]${entries}[/object]`;
+                break;
+            case "function":
+                result = `[function][/function]`;
+                break;
+            default:
+                return "";
+        }
+        return `[attribute][attribute-key]${key}[/attribute-key][equal]=[/equal]${result}[/attribute]`;
+    };
+}
+export default Parser;

package/dist/components/data-display/syntax-highlighter/index.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import "../../../assets/css/components/data-display/syntax-highlighter/syntax-highlighter.css";
+declare const SyntaxHighlighter: React.FC<{
+    children: React.ReactNode;
+    position?: "left" | "center" | "right";
+}> & {
+    Import: React.FC<{
+        children: string;
+    }>;
+};
+export default SyntaxHighlighter;

package/dist/components/data-display/syntax-highlighter/index.js

@@ -0,0 +1,41 @@
+"use client";
+import React, { useEffect, useRef, useState } from "react";
+import Parser from "./classes/Parser";
+import Compiler from "./classes/Compiler";
+import "../../../assets/css/components/data-display/syntax-highlighter/syntax-highlighter.css";
+import Import from "./Import";
+// import Button from "../../form/button";
+const SyntaxHighlighter = ({ children, position = "left" }) => {
+    // refs
+    const _div = useRef(null);
+    // states
+    const [elements, setElements] = useState([]);
+    const [htmlContent, setHtmlContent] = useState("");
+    // const [codePanelIsOpen, setCodePanelIsOpen] = useState<boolean>(false);
+    // classes
+    const parser = new Parser(setElements);
+    const compiler = new Compiler(setHtmlContent);
+    // useEffects
+    useEffect(() => {
+        // Clear...
+        setElements([]);
+        // Fill...
+        React.Children.forEach(children, (child) => {
+            if (React.isValidElement(child)) {
+                parser.JsxToString(child);
+            }
+        });
+    }, [children]);
+    useEffect(() => {
+        if (elements.length === 0)
+            return;
+        compiler.Jsx(elements);
+    }, [elements]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: "ar-syntax" },
+            React.createElement("div", { ref: _div, className: `preview ${position}` }, children),
+            React.createElement("pre", { className: "pre" },
+                React.createElement("code", { dangerouslySetInnerHTML: { __html: htmlContent } })))));
+};
+SyntaxHighlighter.Import = Import;
+export default SyntaxHighlighter;

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

@@ -0,0 +1,20 @@
+import React, { Dispatch, MutableRefObject, ReactNode, SetStateAction } from "react";
+interface IProps {
+    refs: {
+        tableContent: MutableRefObject<HTMLDivElement | null>;
+        buttons: MutableRefObject<(HTMLSpanElement | null)[]>;
+    };
+    states: {
+        open: {
+            get: boolean;
+            set: Dispatch<SetStateAction<boolean>>;
+        };
+    };
+    children: ReactNode;
+    coordinate: {
+        x: number;
+        y: number;
+    };
+}
+declare const FilterPopup: ({ children, refs, states, coordinate }: IProps) => false | React.ReactPortal;
+export default FilterPopup;