@harjs/react-ui 1.0.0

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

@@ -0,0 +1,110 @@
+"use client";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import "../../../assets/css/components/data-display/tabs/tabs.css";
+import Skeleton from "./skeleton";
+import { ARIcon } from "../../icons";
+const Tabs = ({ name, tabs = [], activeTab, onChange, onClose }) => {
+    // ref
+    const _container = useRef(null);
+    const _items = useRef([]);
+    const _itemIndex = useRef(0);
+    // states
+    const [currentTab, setCurrentTab] = useState(0);
+    const [scrollInfo, setScrollInfo] = useState({
+        isMaxLeft: true,
+        isMaxRight: false,
+        current: 0,
+        maxScrollable: 0,
+    });
+    // states -> Loading
+    const [isLoading, setIsLoading] = useState(true);
+    // methods
+    const handleScroll = useMemo(() => {
+        return () => {
+            if (_container.current) {
+                const { scrollLeft, scrollWidth, clientWidth } = _container.current;
+                // Maksimum sağ değer: Toplam genişlik - Görünür genişlik
+                const maxRight = scrollWidth - clientWidth;
+                setScrollInfo({
+                    isMaxLeft: scrollLeft <= 0, // En solda mı?
+                    isMaxRight: scrollLeft >= maxRight - 1, // En sağda mı?
+                    current: scrollLeft, // Anlık ne kadar sağda.
+                    maxScrollable: maxRight, // Gidebileceği max piksel.
+                });
+            }
+        };
+    }, []);
+    const scroll = useMemo(() => {
+        return (direction) => {
+            const container = _container.current;
+            if (!container)
+                return;
+            let nextIndex = direction === "left" ? _itemIndex.current - 1 : _itemIndex.current + 1;
+            if (nextIndex < 0)
+                nextIndex = 0;
+            if (nextIndex >= _items.current.length)
+                nextIndex = _items.current.length - 1;
+            const targetItem = _items.current[nextIndex];
+            if (targetItem) {
+                const targetLeft = targetItem.offsetLeft - container.offsetLeft;
+                container.scrollTo({
+                    left: targetLeft,
+                    behavior: "smooth",
+                });
+                _itemIndex.current = nextIndex;
+            }
+        };
+    }, []);
+    // useEffects
+    useEffect(() => setCurrentTab(activeTab ?? 0), [activeTab]);
+    useEffect(() => {
+        const key = `${window.location.pathname}::${name}`;
+        const stored = sessionStorage.getItem(key);
+        setCurrentTab(stored !== null ? Number(stored) : 0);
+        onChange?.(stored !== null ? Number(stored) : 0);
+        setIsLoading(false);
+    }, [name]);
+    useEffect(() => {
+        const timeoutId = setTimeout(() => {
+            if (_container.current) {
+                handleScroll();
+            }
+        }, 100);
+        window.addEventListener("resize", handleScroll);
+        return () => {
+            clearTimeout(timeoutId);
+            window.removeEventListener("resize", handleScroll);
+        };
+    }, []);
+    if (isLoading)
+        return React.createElement(Skeleton, { name: name, tabs: tabs });
+    return (React.createElement("div", { className: "ar-tabs" },
+        React.createElement("div", { className: "tabs" },
+            scrollInfo.current > 0 && (React.createElement("div", { className: "button left", onClick: () => scroll("left") },
+                React.createElement(ARIcon, { icon: "ArrowLeft", stroke: "var(--gray-700)" }))),
+            !scrollInfo.isMaxRight && (React.createElement("div", { className: "button right", onClick: () => scroll("right") },
+                React.createElement(ARIcon, { icon: "ArrowRight", stroke: "var(--gray-700)" }))),
+            React.createElement("div", { ref: _container, className: "container", onScroll: handleScroll }, tabs.length > 0 &&
+                tabs.map((tab, index) => {
+                    let className = ["item"];
+                    if (currentTab === index)
+                        className.push("selection");
+                    return (React.createElement("div", { key: tab.title ?? index, ref: (element) => {
+                            if (!element)
+                                return;
+                            _items.current[index] = element;
+                        }, className: className.map((c) => c).join(" "), onClick: () => {
+                            setCurrentTab(index);
+                            onChange?.(index);
+                            const key = `${window.location.pathname}::${name}`;
+                            sessionStorage.setItem(key, String(index));
+                        } },
+                        React.createElement("span", null, tab.title),
+                        tab.config?.canBeClosed && (React.createElement("span", { className: "close-button", onClick: (event) => {
+                                event.stopPropagation();
+                                onClose && onClose(index);
+                            } }, "\u2716"))));
+                }))),
+        React.createElement("div", { className: "content" }, tabs.map((tab, index) => currentTab === index && tab.content))));
+};
+export default Tabs;

package/dist/components/data-display/tabs/skeleton.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import IProps from "./IProps";
+declare const Skeleton: ({ tabs }: IProps) => React.JSX.Element;
+export default Skeleton;

package/dist/components/data-display/tabs/skeleton.js

@@ -0,0 +1,14 @@
+import React from "react";
+const Skeleton = ({ tabs = [] }) => {
+    return (React.createElement("div", { className: "ar-tabs skeleton" },
+        React.createElement("div", { className: "tabs" }, tabs.length > 0 &&
+            tabs.map((tab, index) => {
+                return (React.createElement("div", { key: index, className: "item", style: { width: `${tab.title.length}px` } },
+                    React.createElement("div", { className: "title" })));
+            })),
+        React.createElement("div", { className: "content" },
+            React.createElement("div", null),
+            React.createElement("div", null),
+            React.createElement("div", null))));
+};
+export default Skeleton;

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

@@ -0,0 +1,6 @@
+import "../../../assets/css/components/data-display/typography/typography.css";
+declare const Typography: {
+    Title: import("react").FC<import("./title/IProps").default>;
+    Paragraph: import("react").FC<import("./paragraph/IProps").default>;
+};
+export default Typography;

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

@@ -0,0 +1,9 @@
+import Paragraph from "./paragraph/Paragraph";
+import Title from "./title/Title";
+import "../../../assets/css/components/data-display/typography/typography.css";
+// @@Export
+const Typography = {
+    Title,
+    Paragraph,
+};
+export default Typography;

package/dist/components/data-display/typography/paragraph/IProps.d.ts

@@ -0,0 +1,7 @@
+import { ParagraphColors, Status } from "../../../../libs/infrastructure/types";
+import { IChildrenProps, ISizeProps, IUpperCaseProps } from "../../../../libs/infrastructure/types/IGlobalProps";
+interface IProps extends IChildrenProps, ISizeProps, IUpperCaseProps {
+    color?: ParagraphColors | Status;
+    align?: "left" | "center" | "right";
+}
+export default IProps;

package/dist/components/data-display/typography/paragraph/IProps.js

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

package/dist/components/data-display/typography/paragraph/Paragraph.d.ts

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

package/dist/components/data-display/typography/paragraph/Paragraph.js

@@ -0,0 +1,14 @@
+"use client";
+import React from "react";
+const Paragraph = ({ children, color, align = "left", size, upperCase = false }) => {
+    let _className = ["ar-typography-paragraph"];
+    if (align)
+        _className.push(align);
+    if (color)
+        _className.push(color);
+    if (size)
+        _className.push(size);
+    return (React.createElement("p", { className: _className.map((c) => c).join(" ") }, typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children));
+};
+Paragraph.displayName = "Paragraph";
+export default Paragraph;

package/dist/components/data-display/typography/title/IProps.d.ts

@@ -0,0 +1,7 @@
+import { IChildrenProps, IUpperCaseProps } from "../../../../libs/infrastructure/types/IGlobalProps";
+interface IProps extends IChildrenProps, IUpperCaseProps, React.HTMLAttributes<HTMLHeadingElement> {
+    Level: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+    align?: "left" | "center" | "right";
+    size?: "xx-small" | "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large" | "xxx-large" | "smaller" | "larger";
+}
+export default IProps;

package/dist/components/data-display/typography/title/IProps.js

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

package/dist/components/data-display/typography/title/Title.d.ts

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

package/dist/components/data-display/typography/title/Title.js

@@ -0,0 +1,13 @@
+"use client";
+import React, { useRef } from "react";
+const Title = ({ children, Level, align = "left", size, upperCase = false, ...attributes }) => {
+    // refs
+    let _className = useRef("ar-typography-title").current;
+    if (align)
+        _className += ` ${align}`;
+    if (size)
+        _className += ` ${size}`;
+    return (React.createElement(Level, { className: _className, ...attributes }, typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children));
+};
+Title.displayName = "Title";
+export default Title;

package/dist/components/feedback/alert/IProps.d.ts

@@ -0,0 +1,11 @@
+import { IBorderProps, IChildrenProps, IStatusProps, IVariantProps } from "../../../libs/infrastructure/types/IGlobalProps";
+type message = string | message[];
+interface IProps extends IChildrenProps, IVariantProps<{
+    component: "alert";
+}>, IStatusProps<{
+    component: "alert";
+}>, IBorderProps {
+    message?: message;
+    emphasize?: string[];
+}
+export default IProps;

package/dist/components/feedback/alert/IProps.js

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

package/dist/components/feedback/alert/index.d.ts

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

package/dist/components/feedback/alert/index.js

@@ -0,0 +1,50 @@
+"use client";
+import React from "react";
+import "../../../assets/css/components/feedback/alert/styles.css";
+import Utils from "../../../libs/infrastructure/shared/Utils";
+const Alert = ({ children, message, variant = "filled", status = "primary", border = { radius: "sm" }, emphasize, }) => {
+    const _className = ["ar-alert"];
+    _className.push(...Utils.GetClassName(variant, status, undefined, border, undefined, undefined, undefined));
+    // methods
+    const formattedTags = (message) => {
+        // TODO: Şuan için sadece transparent olan alert tiplerinde çalışmakta.
+        // TODO: Bu konu hakkında düşünüp karar verilecek.
+        if (!emphasize)
+            return message;
+        let _lowerCaseMessage = message.toLocaleLowerCase();
+        return emphasize.reduce((currentMessage, emphasize) => {
+            let _lowerCaseEmphasize = emphasize.toLocaleLowerCase();
+            let startIndex = _lowerCaseMessage.indexOf(_lowerCaseEmphasize);
+            while (startIndex !== -1) {
+                const endIndex = startIndex + emphasize.length;
+                const firstValue = currentMessage.substring(0, startIndex);
+                const originalTag = currentMessage.substring(startIndex, endIndex);
+                const lastValue = currentMessage.substring(endIndex);
+                currentMessage = `${firstValue} <span class="ar-alert-tag">${originalTag}</span> ${lastValue}`;
+                _lowerCaseMessage = currentMessage.toLocaleLowerCase();
+                startIndex = _lowerCaseMessage.indexOf(_lowerCaseEmphasize, startIndex + `<span class="ar-alert-tag">${originalTag}</span>`.length);
+            }
+            return currentMessage;
+        }, message);
+    };
+    const createList = (message, isSubMessage) => {
+        let className = "";
+        if (isSubMessage)
+            className += "sub-message";
+        else
+            className += "message";
+        return (React.createElement("ul", null, Array.isArray(message)
+            ? message.map((messageItem, index) => (React.createElement("li", { key: index, className: className }, Array.isArray(messageItem) ? (createList(messageItem, true)) : (React.createElement("div", { dangerouslySetInnerHTML: {
+                    __html: formattedTags(cleanMessage(messageItem)) ?? "",
+                } })))))
+            : message));
+    };
+    /**
+     *
+     * @param message Yalnızca alfanümerik karakterleri (harfler ve sayılar) ve boşlukları tutar.
+     * @returns
+     */
+    const cleanMessage = (message) => message.replace(/<\/?[^>]+>/g, "");
+    return (React.createElement("div", { className: _className.map((c) => c).join(" ") }, message ? (Array.isArray(message) ? (createList(message)) : (React.createElement("p", { dangerouslySetInnerHTML: { __html: formattedTags(cleanMessage(message)) ?? "" } }))) : (children)));
+};
+export default Alert;

package/dist/components/feedback/drawer/IProps.d.ts

@@ -0,0 +1,18 @@
+import { TabProps, ValidationProps } from "../../../libs/infrastructure/types";
+import { IChildrenProps } from "../../../libs/infrastructure/types/IGlobalProps";
+interface IProps<T extends object> extends IChildrenProps {
+    title?: string;
+    tabs: TabProps[];
+    activeTab?: number;
+    open: {
+        get: boolean;
+        set: React.Dispatch<React.SetStateAction<boolean>>;
+    };
+    validation?: {
+        data: T;
+        rules: ValidationProps<T>[];
+    };
+    onChange?: (currentTab: number) => void;
+    onClose?: (closeTab: number) => void;
+}
+export default IProps;

package/dist/components/feedback/drawer/IProps.js

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

package/dist/components/feedback/drawer/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import IProps from "./IProps";
+import "../../../assets/css/components/feedback/drawer/styles.css";
+declare const Drawer: <T extends object>({ title, tabs, activeTab, open, validation, onChange }: IProps<T>) => React.JSX.Element;
+export default Drawer;

package/dist/components/feedback/drawer/index.js

@@ -0,0 +1,94 @@
+"use client";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import Typography from "../../data-display/typography";
+import "../../../assets/css/components/feedback/drawer/styles.css";
+import { useValidation } from "../../../libs/core/application/hooks";
+const { Title } = Typography;
+const Drawer = function ({ title, tabs = [], activeTab, open, validation, onChange }) {
+    // refs
+    const _arDrawer = useRef(null);
+    const _drawerWrapperClassName = ["ar-drawer-wrapper"];
+    const _drawerClassName = ["ar-drawer"];
+    if (Object.keys(open).length > 0 && open.get)
+        _drawerWrapperClassName.push("opened");
+    else
+        _drawerWrapperClassName.push("closed");
+    // states
+    const [currentTab, setCurrentTab] = useState(0);
+    // hooks
+    const { errors, onSubmit, setSubmit } = useValidation(validation?.data, validation?.rules, currentTab + 1);
+    // methods
+    const handleValidationControlForClose = useCallback(() => {
+        if (validation) {
+            onSubmit((result) => {
+                if (!result)
+                    return;
+                open.set(false);
+                setSubmit(false);
+            });
+        }
+        else {
+            open.set(false);
+        }
+    }, [errors, onSubmit, setSubmit]);
+    // useEffects
+    useEffect(() => {
+        if (!open.get)
+            return;
+        document.body.style.overflow = "hidden";
+        const handleKeys = (event) => {
+            const key = event.key;
+            const isArModal = document.getElementsByClassName("ar-modal-wrapper opened").length === 0;
+            const isArSelectOptions = document.getElementsByClassName("ar-select-options").length === 0;
+            const isArCalendar = document.getElementsByClassName("ar-date-calendar").length === 0;
+            const isArPopover = document.getElementsByClassName("ar-popover").length === 0;
+            if (key === "Escape" && isArModal && isArCalendar && isArSelectOptions && isArPopover) {
+                event.stopPropagation();
+                handleValidationControlForClose();
+            }
+        };
+        document.addEventListener("keydown", handleKeys);
+        return () => {
+            document.body.style.removeProperty("overflow");
+            document.removeEventListener("keydown", handleKeys);
+        };
+    }, [open, handleValidationControlForClose]);
+    useEffect(() => setCurrentTab(activeTab ?? 0), [activeTab]);
+    return (React.createElement("div", { className: _drawerWrapperClassName.map((c) => c).join(" ") },
+        React.createElement("div", { className: "ar-drawer-bg", onClick: (event) => {
+                event.stopPropagation();
+                const target = event.target;
+                if (_arDrawer.current && !_arDrawer.current.contains(target))
+                    handleValidationControlForClose();
+            } }),
+        React.createElement("div", { ref: _arDrawer, className: _drawerClassName.map((c) => c).join(" "), role: "dialog" },
+            title && (React.createElement("div", { className: "header" },
+                React.createElement(Title, { Level: "h3" }, title),
+                React.createElement("div", { className: "close", onClick: () => handleValidationControlForClose() }))),
+            React.createElement("div", { className: "tabs" }, tabs.length > 1 &&
+                tabs.map((tab, index) => {
+                    let className = ["item"];
+                    if (currentTab === index)
+                        className.push("selection");
+                    return (React.createElement("div", { key: tab.title ?? index, className: className.map((c) => c).join(" "), onClick: () => {
+                            setCurrentTab(index);
+                            onChange && onChange(index);
+                            const key = `${window.location.pathname}::${name}`;
+                            sessionStorage.setItem(key, String(index));
+                        } },
+                        React.createElement("span", null, tab.title)));
+                })),
+            Object.keys(open).length > 0 && open.get && (React.createElement("div", { className: "content" }, tabs.map((tab, index) => {
+                return (React.createElement("div", { key: index }, React.Children.map(tab.content, (child) => {
+                    if (React.isValidElement(child) && index === currentTab) {
+                        return validation
+                            ? React.cloneElement(child, {
+                                errors: errors,
+                            })
+                            : child;
+                    }
+                    return null;
+                })));
+            }))))));
+};
+export default Drawer;

package/dist/components/feedback/loading/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import "../../../assets/css/components/feedback/loading/loading.css";
+declare const Loading: () => React.JSX.Element;
+export default Loading;

package/dist/components/feedback/loading/index.js

@@ -0,0 +1,7 @@
+"use client";
+import React from "react";
+import "../../../assets/css/components/feedback/loading/loading.css";
+const Loading = () => {
+    return React.createElement("div", { className: "ar-loading" });
+};
+export default Loading;

package/dist/components/feedback/modal/IProps.d.ts

@@ -0,0 +1,14 @@
+import { IChildrenProps, ISizeProps } from "../../../libs/infrastructure/types/IGlobalProps";
+import IPopoverProps from "../../feedback/popover/IProps";
+interface IProps extends IChildrenProps, ISizeProps, React.HTMLAttributes<HTMLDivElement> {
+    open: {
+        get: boolean;
+        set: React.Dispatch<React.SetStateAction<boolean>>;
+    };
+    closePopover?: IPopoverProps;
+    title?: string;
+    footer?: React.ReactNode;
+    disableCloseOnBackdrop?: boolean;
+    disableCloseOnEsc?: boolean;
+}
+export default IProps;

package/dist/components/feedback/modal/IProps.js

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

package/dist/components/feedback/modal/index.d.ts

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

package/dist/components/feedback/modal/index.js

@@ -0,0 +1,91 @@
+"use client";
+import React, { useEffect, useRef } from "react";
+import "../../../assets/css/components/feedback/modal/styles.css";
+import Typography from "../../data-display/typography";
+import Popover from "../popover";
+const { Title } = Typography;
+const Modal = ({ children, open, closePopover, title, size = "normal", footer, disableCloseOnBackdrop, disableCloseOnEsc, ...attributes }) => {
+    // refs
+    const _arModal = useRef(null);
+    const _modalWrapperClassName = ["ar-modal-wrapper"];
+    const _modalClassName = ["ar-modal", size];
+    if (Object.keys(open).length > 0 && open.get)
+        _modalWrapperClassName.push("opened");
+    else
+        _modalWrapperClassName.push("closed");
+    // methods
+    const handleKeys = (event) => {
+        if (disableCloseOnEsc)
+            return;
+        const key = event.key;
+        const isArSelectOptions = document.getElementsByClassName("ar-select-options").length === 0;
+        const isArCalendar = document.getElementsByClassName("ar-date-calendar").length === 0;
+        const isArPopover = document.getElementsByClassName("ar-popover").length === 0;
+        if (key === "Escape" && isArCalendar && isArSelectOptions && isArPopover) {
+            event.stopPropagation();
+            open.set(false);
+        }
+    };
+    const handlePosition = () => {
+        if (_arModal.current) {
+            const arModal = _arModal.current;
+            const content = arModal.querySelector("div.content");
+            const rect = arModal.getBoundingClientRect();
+            const screenCenterX = window.innerWidth / 2;
+            // const screenCenterY = window.innerHeight / 2;
+            const sx = window.scrollX || document.documentElement.scrollLeft;
+            // const sy = window.scrollY || document.documentElement.scrollTop;
+            if (window.innerHeight > 1024) {
+                // arModal.style.top = `${sy + 100}px`;
+                arModal.style.top = "100px";
+                content.removeAttribute("style");
+            }
+            else if (window.innerHeight > 575 && window.innerHeight < 1024) {
+                // arModal.style.top = `${screenCenterY - rect.height / 2 + sy}px`;
+                arModal.style.top = "100px";
+                content.removeAttribute("style");
+            }
+            else if (window.innerHeight < 575) {
+                // arModal.style.top = `${sy + 15}px`;
+                arModal.style.top = "15px";
+                content.style.maxHeight = `calc(100vh - ${footer ? "2.5px" : "-30.5px"} - 3.5rem - 4rem - ${footer ? "2rem" : "0rem"})`;
+            }
+            arModal.style.left = `${screenCenterX - rect.width / 2 + sx}px`;
+        }
+    };
+    // useEffects
+    useEffect(() => {
+        handlePosition();
+        if (open.get) {
+            document.body.style.overflow = "hidden";
+            document.addEventListener("keydown", handleKeys);
+            window.addEventListener("resize", handlePosition);
+        }
+        return () => {
+            document.body.style.removeProperty("overflow");
+            document.removeEventListener("keydown", handleKeys);
+            window.removeEventListener("resize", handlePosition);
+        };
+    }, [open.get]);
+    useEffect(() => {
+        if (attributes.className)
+            _modalClassName.push(attributes.className);
+    }, [attributes.className]);
+    return (React.createElement("div", { className: _modalWrapperClassName.map((c) => c).join(" ") },
+        React.createElement("div", { className: "ar-modal-bg", onMouseDown: (event) => {
+                if (disableCloseOnBackdrop)
+                    return;
+                event.stopPropagation();
+                const target = event.target;
+                if (_arModal.current && !_arModal.current.contains(target))
+                    open.set(false);
+            } }),
+        React.createElement("div", { ref: _arModal, ...attributes, className: _modalClassName.map((c) => c).join(" "), role: "dialog" },
+            title && (React.createElement("div", { className: "header" },
+                React.createElement(Title, { Level: "h3" }, title),
+                closePopover ? (React.createElement(Popover, { ...closePopover },
+                    React.createElement("div", { className: "close" }))) : (React.createElement("div", { className: "close", onClick: () => open.set((prev) => !prev) })))),
+            React.createElement("div", { className: "content" }, children),
+            footer && React.createElement("div", { className: "footer" }, footer))));
+};
+export default Modal;

package/dist/components/feedback/notification/IProps.d.ts

@@ -0,0 +1,9 @@
+import { Direction, Status } from "../../../libs/core/application/contexts/Notification";
+interface IProps {
+    title: string;
+    message?: string;
+    status: Status | number;
+    direction: Direction;
+    trigger: boolean;
+}
+export default IProps;

package/dist/components/feedback/notification/IProps.js

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

package/dist/components/feedback/notification/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import IProps from "./IProps";
+import "../../../assets/css/components/feedback/notification/notification.css";
+declare const Notification: ({ title, message, status, direction, trigger }: IProps) => React.JSX.Element[];
+export default Notification;