@harjs/react-ui 1.0.0

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

@@ -0,0 +1,125 @@
+"use client";
+import React, { useEffect, useRef } from "react";
+import "../../../assets/css/components/data-display/dnd/styles.css";
+import { ARIcon } from "../../icons";
+let _fromColumn = undefined;
+const DnD = function ({ data, renderItem, columnKey, onChange, confing = { isMoveIcon: true } }) {
+    // refs
+    const _arDnD = useRef(null);
+    const _dragItem = useRef(null);
+    // useEffects
+    useEffect(() => {
+        if (!_arDnD.current || data.length === 0)
+            return;
+        _arDnD.current.childNodes.forEach((item) => {
+            const _item = item;
+            // Events
+            _item.ondragstart = (event) => {
+                const dragItem = event.currentTarget;
+                _dragItem.current = dragItem;
+                dragItem.classList.add("drag-item");
+                const index = [..._arDnD.current.children].indexOf(dragItem);
+                const draggedData = data[index];
+                if (event.dataTransfer) {
+                    // #region Shadow
+                    const shadow = document.createElement("div");
+                    shadow.innerHTML = `
+            <div class="ar-dnd-shadow">
+              <i class="bi bi-gear-wide-connected"></i>
+              <span>Dragging...</span>
+            </div>
+          `;
+                    shadow.style.position = "absolute";
+                    shadow.style.top = "-9999px";
+                    document.body.appendChild(shadow);
+                    event.dataTransfer.setDragImage(shadow, 0, 0);
+                    // #endregion
+                    event.dataTransfer.setData("item", JSON.stringify(draggedData));
+                    event.dataTransfer.setData("fromColumn", columnKey ?? "");
+                    _fromColumn = columnKey ?? undefined;
+                }
+                // Korumaya başla.
+                if (_arDnD.current && columnKey && _fromColumn !== columnKey) {
+                    _arDnD.current.childNodes.forEach((item) => {
+                        const placeholder = document.createElement("div");
+                        placeholder.setAttribute("data-id", "placeholder");
+                        placeholder.style.position = "absolute";
+                        placeholder.style.inset = "0";
+                        item.appendChild(placeholder);
+                    });
+                }
+            };
+            _item.ondragover = (event) => {
+                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);
+                // 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 === -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);
+                        }
+                    }
+                }
+            };
+            _item.ondragend = (event) => {
+                const item = event.currentTarget;
+                item.classList.remove("drag-item");
+                item.classList.add("end-item");
+                setTimeout(() => {
+                    item.classList.remove("end-item");
+                    if (item.classList.length === 0)
+                        item.removeAttribute("class");
+                }, 1000);
+            };
+        });
+        _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, className: "item", draggable: true },
+        confing?.isMoveIcon && (React.createElement("div", { className: "move" },
+            React.createElement(ARIcon, { icon: "GripVertical", fill: "var(--blue-500)", size: 18 }))),
+        React.createElement("div", { className: "content" }, renderItem(item, index)))))));
+};
+export default DnD;

package/dist/components/data-display/grid-system/box/Box.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+declare const Box: React.FC<{
+    children: React.ReactNode;
+    direction?: "flex-start" | "center" | "flex-end";
+}>;
+export default Box;

package/dist/components/data-display/grid-system/box/Box.js

@@ -0,0 +1,13 @@
+import React from "react";
+const Box = ({ children, direction = "flex-start", }) => {
+    return (React.createElement("div", { style: {
+            display: "flex",
+            flexDirection: "row",
+            flexWrap: "nowrap",
+            justifyContent: direction,
+            alignItems: "center",
+            gap: ".5rem",
+        } }, children));
+};
+Box.displayName = "Box";
+export default Box;

package/dist/components/data-display/grid-system/column/Column.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import IProps from "./IProps";
+declare const Column: React.FC<IProps>;
+export default Column;

package/dist/components/data-display/grid-system/column/Column.js

@@ -0,0 +1,21 @@
+"use client";
+import React from "react";
+const Column = ({ children, size, align }) => {
+    // refs
+    let _className = [];
+    // className
+    if (typeof size === "object") {
+        Object.entries(size).map(([key, value]) => _className.push(`col-${key}-${value}`));
+    }
+    else if (typeof size === "number") {
+        ["xl", "lg", "md", "sm", "xs"].map((col) => _className.push(`col-${col}-${size}`));
+    }
+    else if (typeof size === "undefined") {
+        _className.push("col");
+    }
+    if (align)
+        _className.push(align);
+    return React.createElement("div", { className: _className.map((c) => c).join(" ") }, children);
+};
+Column.displayName = "Column";
+export default Column;

package/dist/components/data-display/grid-system/column/IProps.d.ts

@@ -0,0 +1,13 @@
+import { IChildrenProps } from "../../../../libs/infrastructure/types/IGlobalProps";
+type Column = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+interface IProps extends IChildrenProps {
+    size?: {
+        xl?: Column;
+        lg?: Column;
+        md?: Column;
+        sm?: Column;
+        xs?: Column;
+    } | number;
+    align?: "left" | "center" | "right";
+}
+export default IProps;

package/dist/components/data-display/grid-system/column/IProps.js

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

package/dist/components/data-display/grid-system/index.d.ts

@@ -0,0 +1,10 @@
+import "../../../assets/css/components/data-display/grid-system/styles.css";
+declare const Grid: {
+    Box: import("react").FC<{
+        children: React.ReactNode;
+        direction?: "flex-start" | "center" | "flex-end";
+    }>;
+    Row: import("react").FC<import("./row/IProps").default>;
+    Column: import("react").FC<import("./column/IProps").default>;
+};
+export default Grid;

package/dist/components/data-display/grid-system/index.js

@@ -0,0 +1,11 @@
+import Box from "./box/Box";
+import Row from "./row/Row";
+import Column from "./column/Column";
+import "../../../assets/css/components/data-display/grid-system/styles.css";
+// @@Export
+const Grid = {
+    Box,
+    Row,
+    Column,
+};
+export default Grid;

package/dist/components/data-display/grid-system/row/IProps.d.ts

@@ -0,0 +1,4 @@
+import { IChildrenProps } from "../../../../libs/infrastructure/types/IGlobalProps";
+interface IProps extends IChildrenProps {
+}
+export default IProps;

package/dist/components/data-display/grid-system/row/IProps.js

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

package/dist/components/data-display/grid-system/row/Row.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import IProps from "./IProps";
+declare const Row: React.FC<IProps>;
+export default Row;

package/dist/components/data-display/grid-system/row/Row.js

@@ -0,0 +1,6 @@
+import React from "react";
+const Row = ({ children }) => {
+    return React.createElement("div", { className: "row" }, React.Children.map(children, (child) => child));
+};
+Row.displayName = "Row";
+export default Row;

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

@@ -0,0 +1,31 @@
+import { KanbanBoardColumnProps } from "../../../libs/infrastructure/types";
+export type Config<T extends object> = {
+    locale?: Intl.LocalesArgument;
+    safeAreaOffset?: {
+        top?: number;
+        right?: number;
+        bottom?: number;
+        left?: number;
+    };
+    perPage?: number;
+    filter?: {
+        /**
+         * @deprecated *
+         */
+        search?: (item: T, value: string) => boolean;
+        keys: (item: T) => {
+            key: keyof T;
+            name: string;
+            value: string;
+            type: "select" | "date";
+        }[];
+    };
+};
+interface IProps<T extends object, TColumnProperties> {
+    trackBy: (item: T) => string;
+    columns: KanbanBoardColumnProps<T, TColumnProperties>[];
+    onChange?: (item: T, columnKey: string, columnProperties: TColumnProperties, hoverIndex: number) => void;
+    onLazyLoad?: (query: Record<string, string>, perPage: number, currentPage: number) => void;
+    config?: Config<T>;
+}
+export default IProps;

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

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

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

@@ -0,0 +1,25 @@
+import { Dispatch, JSX, SetStateAction } from "react";
+import { Config } from "../IProps";
+interface IProps<T extends object> {
+    states: {
+        dateFilters: {
+            get: Record<string, {
+                from: Date | null;
+                to: Date | null;
+            }>;
+            set: Dispatch<SetStateAction<Record<string, {
+                from: Date | null;
+                to: Date | null;
+            }>>>;
+        };
+        openName: {
+            get: string | null;
+        };
+    };
+    methods: {
+        open: (name: string | null) => void;
+    };
+    config?: Config<T>;
+}
+declare const _default: <T extends object>(props: IProps<T>) => JSX.Element;
+export default _default;

package/dist/components/data-display/kanban-board/filter/DateFilters.js

@@ -0,0 +1,55 @@
+import React, { memo } from "react";
+import DatePicker from "../../../form/date-picker";
+import { ARIcon } from "../../../icons";
+import Grid from "../../grid-system";
+import Button from "../../../form/button";
+import Divider from "../../divider";
+import { useTranslation } from "../../../../libs/core/application/hooks";
+const { Row, Column, Box } = Grid;
+function DateFilters({ states, methods, config }) {
+    // hooks
+    const { t } = useTranslation(String(config?.locale ?? "tr"));
+    return Object.entries(states.dateFilters.get).map(([name, range], index) => {
+        const isEqualsName = states.openName.get === name;
+        const className = [];
+        if (isEqualsName)
+            className.push("active");
+        return (React.createElement(React.Fragment, null,
+            React.createElement("li", { key: index, className: className.map((c) => c).join(" "), onClick: () => methods.open(name) },
+                React.createElement("div", null,
+                    React.createElement("span", null, name),
+                    React.createElement(ARIcon, { icon: "ChevronDown" })),
+                isEqualsName && (React.createElement("ul", { className: className.map((c) => c).join(" "), onClick: (event) => event.stopPropagation() },
+                    React.createElement(Row, null,
+                        React.createElement(Column, null,
+                            React.createElement(DatePicker, { value: range.from?.toISOString(), onChange: (value) => {
+                                    states.dateFilters.set((prev) => ({
+                                        ...prev,
+                                        [name]: {
+                                            ...prev[name],
+                                            from: new Date(value),
+                                        },
+                                    }));
+                                }, placeholder: "From" }))),
+                    React.createElement(Row, null,
+                        React.createElement(Column, null,
+                            React.createElement(DatePicker, { value: range.to?.toISOString(), onChange: (value) => {
+                                    states.dateFilters.set((prev) => ({
+                                        ...prev,
+                                        [name]: {
+                                            ...prev[name],
+                                            to: new Date(value),
+                                        },
+                                    }));
+                                }, placeholder: "To" }))),
+                    React.createElement(Divider, { config: { margin: "0.5rem 0" } }),
+                    React.createElement(Box, { direction: "flex-end" },
+                        React.createElement(Button, { color: "red", size: "small", onClick: () => {
+                                states.dateFilters.set((prev) => ({
+                                    ...prev,
+                                    [name]: { from: null, to: null },
+                                }));
+                            } }, t("KanbanBoard.Search.Button.Clear.Text"))))))));
+    });
+}
+export default memo(DateFilters);

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

@@ -0,0 +1,27 @@
+import { Dispatch, JSX, SetStateAction } from "react";
+import { Config } from "../IProps";
+interface IProps<T extends object> {
+    states: {
+        selectFilters: {
+            get: {
+                [key: string]: (string | null)[];
+            };
+            set: Dispatch<SetStateAction<{
+                [key: string]: (string | null)[];
+            }>>;
+        };
+        selectedFilters: {
+            get: Record<string, Set<string | null>>;
+            set: Dispatch<SetStateAction<Record<string, Set<string | null>>>>;
+        };
+        openName: {
+            get: string | null;
+        };
+    };
+    methods: {
+        open: (name: string | null) => void;
+    };
+    config?: Config<T>;
+}
+declare const _default: <T extends object>(props: IProps<T>) => JSX.Element;
+export default _default;

package/dist/components/data-display/kanban-board/filter/SelectFilters.js

@@ -0,0 +1,43 @@
+import React, { memo } from "react";
+import { ARIcon } from "../../../icons";
+import Checkbox from "../../../form/checkbox";
+import Grid from "../../grid-system";
+import Button from "../../../form/button";
+import Divider from "../../divider";
+import { useTranslation } from "../../../../libs/core/application/hooks";
+const { Box } = Grid;
+function SelectFilters({ states, methods, config }) {
+    // hooks
+    const { t } = useTranslation(String(config?.locale ?? "tr"));
+    return Object.entries(states.selectFilters.get).map(([name, values], index) => {
+        const isEqualsName = states.openName.get === name;
+        const className = [];
+        if (isEqualsName)
+            className.push("active");
+        return (React.createElement("li", { key: index, className: className.map((c) => c).join(" "), onClick: () => methods.open(name) },
+            React.createElement("div", null,
+                React.createElement("span", null, name),
+                React.createElement(ARIcon, { icon: "ChevronDown" })),
+            isEqualsName && (React.createElement("ul", { className: className.map((c) => c).join(" "), onClick: (event) => event.stopPropagation() },
+                values.map((value, index) => (React.createElement("li", { key: index },
+                    React.createElement(Checkbox, { label: String(value ?? "-"), checked: states.selectedFilters.get[name]?.has(value) ?? false, onChange: () => {
+                            states.selectedFilters.set((prev) => {
+                                const next = { ...prev };
+                                const set = new Set(next[name] ?? []);
+                                set.has(value) ? set.delete(value) : set.add(value);
+                                next[name] = set;
+                                return next;
+                            });
+                        } })))),
+                React.createElement(Divider, { config: { margin: "0.5rem 0" } }),
+                React.createElement(Box, { direction: "flex-end" },
+                    React.createElement(Button, { color: "red", size: "small", onClick: () => {
+                            states.selectedFilters.set((prev) => {
+                                const next = { ...prev };
+                                delete next[name];
+                                return next;
+                            });
+                        } }, t("KanbanBoard.Search.Button.Clear.Text")))))));
+    });
+}
+export default memo(SelectFilters);

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

@@ -0,0 +1,36 @@
+import { Dispatch, SetStateAction } from "react";
+import React from "react";
+import { Config } from "../IProps";
+interface IProps<T extends object> {
+    states: {
+        search: {
+            get: string | null;
+            set: Dispatch<React.SetStateAction<string | null>>;
+        };
+        dateFilters: {
+            get: Record<string, {
+                from: Date | null;
+                to: Date | null;
+            }>;
+            set: Dispatch<SetStateAction<Record<string, {
+                from: Date | null;
+                to: Date | null;
+            }>>>;
+        };
+        selectFilters: {
+            get: {
+                [key: string]: (string | null)[];
+            };
+            set: Dispatch<SetStateAction<{
+                [key: string]: (string | null)[];
+            }>>;
+        };
+        selectedFilters: {
+            get: Record<string, Set<string | null>>;
+            set: Dispatch<SetStateAction<Record<string, Set<string | null>>>>;
+        };
+    };
+    config?: Config<T>;
+}
+declare function Filter<T extends object>({ states, config }: IProps<T>): React.JSX.Element;
+export default Filter;

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

@@ -0,0 +1,47 @@
+"use client";
+import { useRef, useState } from "react";
+import DateFilters from "./DateFilters";
+import SelectFilters from "./SelectFilters";
+import React from "react";
+import Input from "../../../form/input";
+import { useTranslation } from "../../../../libs/core/application/hooks";
+function Filter({ states, config }) {
+    // refs
+    const _searchTimeOut = useRef(null);
+    // states
+    const [openName, setOpenName] = useState(null);
+    // hooks
+    const { t } = useTranslation(String(config?.locale ?? "tr"));
+    // methods
+    const handleOpen = (name) => setOpenName(openName === name ? null : name);
+    return (React.createElement("div", { className: "filters" },
+        React.createElement(Input, { variant: "borderless", placeholder: t("KanbanBoard.Search.Input.Placeholder"), onChange: (event) => {
+                if (_searchTimeOut.current)
+                    clearTimeout(_searchTimeOut.current);
+                _searchTimeOut.current = setTimeout(() => {
+                    states.search.set(event.target.value.toLocaleLowerCase());
+                }, 750);
+            } }),
+        React.createElement("ul", null,
+            React.createElement(DateFilters, { states: {
+                    dateFilters: {
+                        get: states.dateFilters.get,
+                        set: states.dateFilters.set,
+                    },
+                    openName: { get: openName },
+                }, methods: {
+                    open: handleOpen,
+                }, config: config }),
+            React.createElement(SelectFilters, { states: {
+                    selectFilters: {
+                        get: states.selectFilters.get,
+                        set: states.selectFilters.set,
+                    },
+                    selectedFilters: {
+                        get: states.selectedFilters.get,
+                        set: states.selectedFilters.set,
+                    },
+                    openName: { get: openName },
+                }, methods: { open: handleOpen }, config: config }))));
+}
+export default Filter;

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 extends object, TColumnProperties>({ trackBy, columns, onChange, onLazyLoad, config, }: IProps<T, TColumnProperties>) => React.JSX.Element;
+export default KanbanBoard;