@harjs/react-ui 1.0.0

package/dist/components/navigation/pagination/index.js

@@ -0,0 +1,74 @@
+"use client";
+import React, { useContext, useEffect, useState } from "react";
+import "../../../assets/css/components/navigation/pagination/styles.css";
+import { ConfigContext } from "../../../libs/core/application/contexts/Config";
+import Select from "../../form/select";
+const perPageOptions = [
+    { value: 5, text: "5" },
+    { value: 10, text: "10" },
+    { value: 15, text: "15" },
+    { value: 50, text: "50" },
+    { value: 75, text: "75" },
+    { value: 100, text: "100" },
+];
+const Pagination = ({ currentPage, totalRecords, perPage, onChange }) => {
+    // context
+    const { config } = useContext(ConfigContext);
+    // states
+    const [pages, setPages] = useState([]);
+    const [totalPageCount, setTotalPageCount] = useState(0);
+    const [selectedPerPage, setSelectedPerPage] = useState(perPageOptions.find((x) => x.value === 10));
+    // methods
+    const handlePageChange = (page, perPage) => onChange(page, perPage);
+    // useEffects
+    useEffect(() => {
+        if (totalRecords === 0)
+            return;
+        const liItems = [];
+        const _totalPageCount = Math.ceil(totalRecords / (perPage ?? config.perPage));
+        setTotalPageCount(_totalPageCount);
+        // currentPage prop'unu kullanın
+        const activePage = currentPage || 1;
+        // Başlangıç ve bitiş aralığını hesapla.
+        const startPage = Math.max(1, activePage - 1);
+        const endPage = Math.min(_totalPageCount, activePage + 1);
+        // Sayfalama mantığı...
+        for (let i = startPage; i <= endPage; i++) {
+            liItems.push(React.createElement("li", { key: i, className: i === activePage ? "selection-page" : "", onClick: () => handlePageChange(i, selectedPerPage?.value) }, i));
+        }
+        setPages(liItems);
+    }, [totalRecords, currentPage, perPage, config.perPage]);
+    return (React.createElement("div", { className: "ar-pagination" },
+        React.createElement(Select, { variant: "borderless", value: selectedPerPage, options: [...perPageOptions, { value: totalRecords, text: "Tümü" }], onChange: (option) => {
+                setSelectedPerPage(option);
+                handlePageChange(1, option?.value);
+            }, config: { clear: false }, style: { width: 65 }, readOnly: true }),
+        React.createElement("ul", null,
+            React.createElement("li", { className: currentPage === 1 ? "passive" : "", onClick: () => {
+                    if (currentPage === 1)
+                        return;
+                    handlePageChange(1, selectedPerPage?.value);
+                } },
+                React.createElement("span", null, "«")),
+            React.createElement("li", { className: currentPage === 1 ? "passive" : "", onClick: () => {
+                    if (currentPage === 1)
+                        return;
+                    handlePageChange(currentPage - 1, selectedPerPage?.value);
+                } },
+                React.createElement("span", null, "‹")),
+            pages,
+            React.createElement("li", { className: totalPageCount === currentPage ? "passive" : "", onClick: () => {
+                    if (totalPageCount === currentPage)
+                        return;
+                    handlePageChange(currentPage + 1, selectedPerPage?.value);
+                } },
+                React.createElement("span", null, "›")),
+            React.createElement("li", { className: totalPageCount === currentPage ? "passive" : "", onClick: () => {
+                    if (totalPageCount === currentPage)
+                        return;
+                    handlePageChange(totalPageCount, selectedPerPage?.value);
+                } },
+                React.createElement("span", null, "»")))));
+};
+Pagination.displayName = "Pagination";
+export default Pagination;

package/dist/components/navigation/steps/IProps.d.ts

@@ -0,0 +1,16 @@
+import { StepProps, ValidationProps } from "../../../libs/infrastructure/types";
+import { IChildrenProps } from "../../../libs/infrastructure/types/IGlobalProps";
+interface IProps<TData extends object> extends IChildrenProps {
+    name: string;
+    steps: StepProps[];
+    currentStep?: number;
+    onChange: (currentStep: number) => void;
+    validation?: {
+        data: TData;
+        rules: ValidationProps<TData>[];
+    };
+    config?: {
+        isAutomatic?: boolean;
+    };
+}
+export default IProps;

package/dist/components/navigation/steps/IProps.js

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

package/dist/components/navigation/steps/index.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import IProps from "./IProps";
+import "../../../assets/css/components/navigation/steps/styles.css";
+declare const Steps: <T extends object>({ children, name, steps, currentStep, onChange, validation, config, }: IProps<T>) => React.JSX.Element;
+export default Steps;

package/dist/components/navigation/steps/index.js

@@ -0,0 +1,102 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import "../../../assets/css/components/navigation/steps/styles.css";
+import Typography from "../../data-display/typography";
+import Button from "../../form/button";
+import { useValidation } from "../../../libs/core/application/hooks";
+const { Title } = Typography;
+const Steps = function ({ children, name, steps = [], currentStep, onChange, validation, config, }) {
+    // states
+    const [_currentStep, setCurrentStep] = useState(0);
+    // hooks
+    const { errors, onSubmit, setSubmit } = useValidation(validation?.data, validation?.rules, _currentStep + 1);
+    // methods
+    const getStepIconStatus = (currentStep, index) => {
+        if (currentStep < index)
+            return "pending";
+        if (currentStep === index)
+            return "in-progress";
+        return "completed";
+    };
+    // useEffects
+    useEffect(() => {
+        setCurrentStep(currentStep ?? 0);
+    }, [currentStep]);
+    useEffect(() => {
+        if (config?.isAutomatic)
+            return;
+        const key = `${window.location.pathname}::${name}`;
+        const stored = sessionStorage.getItem(key);
+        setCurrentStep(stored !== null ? Number(stored) : (currentStep ?? 0));
+        onChange?.(stored !== null ? Number(stored) : (currentStep ?? 0));
+    }, []);
+    return (React.createElement("div", { className: "ar-steps" },
+        React.createElement("div", { className: "steps" }, steps.length > 0 &&
+            steps.map((step, index) => {
+                let itemIcon = ["item-icon"];
+                itemIcon.push(getStepIconStatus(_currentStep, index));
+                return (React.createElement("div", { key: step.title || index, className: "item", onClick: () => {
+                        if (config?.isAutomatic)
+                            return;
+                        if (validation) {
+                            onSubmit((result) => {
+                                if (!result)
+                                    return;
+                                setCurrentStep(index);
+                                onChange(index);
+                                setSubmit(false);
+                            });
+                        }
+                        else {
+                            setCurrentStep(index);
+                            onChange(index);
+                        }
+                        const key = `${window.location.pathname}::${name}`;
+                        sessionStorage.setItem(key, String(index));
+                    } },
+                    React.createElement("div", { className: itemIcon.map((c) => c).join(" ") },
+                        React.createElement("span", { className: getStepIconStatus(_currentStep, index) })),
+                    React.createElement("div", { className: "item-informations" },
+                        React.createElement("span", { className: "step" },
+                            "STEP ",
+                            index + 1),
+                        React.createElement(Title, { Level: "h3" }, step.title))));
+            })),
+        React.createElement("div", { className: "content" },
+            steps.map((step, stepIndex) => {
+                return (React.createElement("div", { key: stepIndex }, React.Children.map(step.content, (child) => {
+                    if (React.isValidElement(child) && stepIndex === _currentStep) {
+                        return validation
+                            ? React.cloneElement(child, {
+                                errors: errors,
+                            })
+                            : child;
+                    }
+                    return null;
+                })));
+            }),
+            !config?.isAutomatic && (React.createElement("div", { className: "buttons" },
+                _currentStep > 0 && (React.createElement(Button, { color: "blue", onClick: () => {
+                        setCurrentStep((prev) => prev - 1);
+                        onChange(_currentStep - 1);
+                    } }, "Geri")),
+                children && children,
+                _currentStep < steps.length - 1 && (React.createElement(Button, { color: "blue", onClick: () => {
+                        if (validation) {
+                            onSubmit((result) => {
+                                if (!result)
+                                    return;
+                                setCurrentStep((prev) => prev + 1);
+                                onChange(_currentStep + 1);
+                                setSubmit(false);
+                            });
+                        }
+                        else {
+                            setCurrentStep((prev) => prev + 1);
+                            onChange(_currentStep + 1);
+                        }
+                        const key = `${window.location.pathname}::${name}`;
+                        sessionStorage.setItem(key, String(_currentStep + 1));
+                    } }, "\u0130leri")))))));
+};
+export default Steps;

package/dist/libs/core/application/contexts/Config.d.ts

@@ -0,0 +1,26 @@
+import React from "react";
+type ConfigOptions = {
+    layout: {
+        sider: {
+            left: {
+                element: React.ReactNode | null;
+                active: boolean;
+            };
+            right: {
+                element: React.ReactNode | null;
+                active: boolean;
+            };
+        };
+    };
+    perPage: number;
+};
+type ConfigContextProps = {
+    config: ConfigOptions;
+    setConfig: React.Dispatch<React.SetStateAction<ConfigOptions>>;
+};
+type ConfigProviderProps = {
+    children: React.ReactNode;
+};
+export declare const ConfigContext: React.Context<ConfigContextProps>;
+declare const ConfigProvider: ({ children }: ConfigProviderProps) => React.JSX.Element;
+export { ConfigProvider };

package/dist/libs/core/application/contexts/Config.js

@@ -0,0 +1,20 @@
+"use client";
+import React, { createContext, useState } from "react";
+const defaultOptions = {
+    layout: {
+        sider: {
+            left: { element: null, active: true },
+            right: { element: null, active: true },
+        },
+    },
+    perPage: 5,
+};
+export const ConfigContext = createContext({
+    config: defaultOptions,
+    setConfig: () => { },
+});
+const ConfigProvider = ({ children }) => {
+    const [config, setConfig] = useState(defaultOptions);
+    return React.createElement(ConfigContext.Provider, { value: { config, setConfig } }, children);
+};
+export { ConfigProvider };

package/dist/libs/core/application/contexts/Language.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare const LanguageContext: React.Context<string | undefined>;
+declare const LanguageProvider: ({ children, language }: {
+    children: React.ReactNode;
+    language: string | undefined;
+}) => React.JSX.Element;
+export { LanguageContext, LanguageProvider };

package/dist/libs/core/application/contexts/Language.js

@@ -0,0 +1,7 @@
+"use client";
+import React, { createContext } from "react";
+const LanguageContext = createContext(undefined);
+const LanguageProvider = ({ children, language }) => {
+    return React.createElement(LanguageContext.Provider, { value: language }, children);
+};
+export { LanguageContext, LanguageProvider };

package/dist/libs/core/application/contexts/Loading.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type LoadingContextProps = {
+    isLoading: boolean;
+    setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+};
+type LoadingProviderProps = {
+    children: React.ReactNode;
+};
+declare const LoadingContext: React.Context<LoadingContextProps>;
+declare const LoadingProvider: ({ children }: LoadingProviderProps) => React.JSX.Element;
+export { LoadingContext, LoadingProvider };

package/dist/libs/core/application/contexts/Loading.js

@@ -0,0 +1,13 @@
+"use client";
+import React, { createContext, useState } from "react";
+import ReactDOM from "react-dom";
+import Loading from "../../../../components/feedback/loading";
+const LoadingContext = createContext({ isLoading: false, setIsLoading: () => { } });
+const LoadingProvider = ({ children }) => {
+    // states
+    const [isLoading, setIsLoading] = useState(false);
+    return (React.createElement(LoadingContext.Provider, { value: { isLoading, setIsLoading } },
+        children,
+        isLoading && ReactDOM.createPortal(React.createElement(Loading, null), document.body)));
+};
+export { LoadingContext, LoadingProvider };

package/dist/libs/core/application/contexts/Notification.d.ts

@@ -0,0 +1,25 @@
+import React, { ReactNode } from "react";
+import IButtonProps from "../../../../components/form/button/IProps";
+export type Status = "success" | "warning" | "information" | "error";
+export type Direction = "top-left" | "top-right" | "bottom-left" | "bottom-right";
+type Props = {
+    children: ReactNode;
+    direction: Direction;
+};
+export type PopupButtonConfig = {
+    okay?: IButtonProps;
+    cancel?: IButtonProps;
+};
+type NotificationContextProps = {
+    setTitle: React.Dispatch<React.SetStateAction<string>>;
+    setMessage: React.Dispatch<React.SetStateAction<string>>;
+    setStatus: React.Dispatch<React.SetStateAction<Status | number>>;
+    setPopupStatus: React.Dispatch<React.SetStateAction<(Status | "save" | "delete") | number>>;
+    setTrigger: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsPopupOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setPopupButtons: React.Dispatch<React.SetStateAction<PopupButtonConfig | null>>;
+    setOnConfirm: React.Dispatch<React.SetStateAction<((confirm: boolean) => void) | null>>;
+};
+declare const NotificationContext: React.Context<Partial<NotificationContextProps>>;
+declare const NotificationProvider: ({ children, direction }: Props) => React.JSX.Element;
+export { NotificationContext, NotificationProvider };

package/dist/libs/core/application/contexts/Notification.js

@@ -0,0 +1,29 @@
+"use client";
+import React, { createContext, useState } from "react";
+import Notification from "../../../../components/feedback/notification";
+import PopupConfirm from "../../../../components/feedback/popup-confirm";
+const NotificationContext = createContext({});
+const NotificationProvider = ({ children, direction }) => {
+    const [title, setTitle] = useState("Example");
+    const [message, setMessage] = useState("Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir.");
+    const [status, setStatus] = useState("success");
+    const [popupStatus, setPopupStatus] = useState("success");
+    const [trigger, setTrigger] = useState(false);
+    const [isPopupOpen, setIsPopupOpen] = useState(false);
+    const [popupButtons, setPopupButtons] = useState(null);
+    const [onConfirm, setOnConfirm] = useState(null);
+    return (React.createElement(NotificationContext.Provider, { value: {
+            setTitle,
+            setMessage,
+            setStatus,
+            setPopupStatus,
+            setTrigger,
+            setIsPopupOpen,
+            setPopupButtons,
+            setOnConfirm,
+        } },
+        children,
+        React.createElement(Notification, { title: title, message: message, status: status, direction: direction, trigger: trigger }),
+        React.createElement(PopupConfirm, { title: title, message: message, status: popupStatus, isOpen: isPopupOpen, buttons: popupButtons, onConfirm: onConfirm })));
+};
+export { NotificationContext, NotificationProvider };

package/dist/libs/core/application/contexts/index.d.ts

@@ -0,0 +1,5 @@
+import { ConfigProvider } from "./Config";
+import { NotificationProvider } from "./Notification";
+import { LanguageProvider } from "./Language";
+import { LoadingProvider } from "./Loading";
+export { ConfigProvider, LanguageProvider, NotificationProvider, LoadingProvider };

package/dist/libs/core/application/contexts/index.js

@@ -0,0 +1,5 @@
+import { ConfigProvider } from "./Config";
+import { NotificationProvider } from "./Notification";
+import { LanguageProvider } from "./Language";
+import { LoadingProvider } from "./Loading";
+export { ConfigProvider, LanguageProvider, NotificationProvider, LoadingProvider };

package/dist/libs/core/application/hooks/index.d.ts

@@ -0,0 +1,41 @@
+import useNotification from "./useNotification";
+import useValidation from "./useValidation";
+import useTranslation from "./useTranslation";
+declare const useLayout: () => {
+    config: {
+        layout: {
+            sider: {
+                left: {
+                    element: React.ReactNode | null;
+                    active: boolean;
+                };
+                right: {
+                    element: React.ReactNode | null;
+                    active: boolean;
+                };
+            };
+        };
+        perPage: number;
+    };
+    setConfig: React.Dispatch<React.SetStateAction<{
+        layout: {
+            sider: {
+                left: {
+                    element: React.ReactNode | null;
+                    active: boolean;
+                };
+                right: {
+                    element: React.ReactNode | null;
+                    active: boolean;
+                };
+            };
+        };
+        perPage: number;
+    }>>;
+};
+declare const useLoading: () => {
+    isLoading: boolean;
+    setIsLoading: React.Dispatch<React.SetStateAction<boolean>>;
+};
+declare const useLanguage: () => string | undefined;
+export { useLayout, useLoading, useLanguage, useTranslation, useNotification, useValidation };

package/dist/libs/core/application/hooks/index.js

@@ -0,0 +1,17 @@
+"use client";
+import { useContext } from "react";
+import { ConfigContext } from "../contexts/Config";
+import { LanguageContext } from "../contexts/Language";
+import { LoadingContext } from "../contexts/Loading";
+import useNotification from "./useNotification";
+import useValidation from "./useValidation";
+import useTranslation from "./useTranslation";
+const useLayout = () => {
+    const context = useContext(ConfigContext);
+    if (!context)
+        throw new Error("useLayout must be used within a LayoutProvider");
+    return context;
+};
+const useLoading = () => useContext(LoadingContext);
+const useLanguage = () => useContext(LanguageContext);
+export { useLayout, useLoading, useLanguage, useTranslation, useNotification, useValidation };

package/dist/libs/core/application/hooks/useNotification.d.ts

@@ -0,0 +1,16 @@
+import { PopupButtonConfig, Status } from "../contexts/Notification";
+declare const useNotification: () => {
+    notification: ({ title, message, status }: {
+        title: string;
+        message?: string;
+        status: Status | number;
+    }) => void;
+    popupConfirm: ({ title, message, status, buttons, onConfirm, }: {
+        title: string;
+        message?: string;
+        status: (Status | "save" | "delete") | number;
+        buttons?: PopupButtonConfig | null;
+        onConfirm?: (confirm: boolean) => void;
+    }) => void;
+};
+export default useNotification;

package/dist/libs/core/application/hooks/useNotification.js

@@ -0,0 +1,23 @@
+import { useContext } from "react";
+import { NotificationContext } from "../contexts/Notification";
+const useNotification = () => {
+    // contexts
+    const { setTitle, setMessage, setStatus, setPopupStatus, setTrigger, setIsPopupOpen, setPopupButtons, setOnConfirm } = useContext(NotificationContext);
+    // methods
+    const notification = ({ title, message, status }) => {
+        setTitle?.(title);
+        setMessage?.(message ?? "");
+        setStatus?.(status);
+        setTrigger?.((trigger) => !trigger);
+    };
+    const popupConfirm = ({ title, message, status, buttons, onConfirm, }) => {
+        setTitle?.(title);
+        setMessage?.(message ?? "");
+        setPopupStatus?.(status);
+        setIsPopupOpen?.((trigger) => !trigger);
+        setPopupButtons?.(buttons ?? null);
+        setOnConfirm?.(() => onConfirm);
+    };
+    return { notification, popupConfirm };
+};
+export default useNotification;

package/dist/libs/core/application/hooks/useTranslation.d.ts

@@ -0,0 +1,9 @@
+import { INotificationLocale } from "../locales";
+import IKanbanBoardLocale from "../locales/kanban-board/IKanbanBoardLocale";
+import ITableLocale from "../locales/table/ITableLocale";
+type LocaleMap = Record<string, Record<string, any>>;
+declare const useTranslation: <TBaseLocale>(currentLanguage: string | undefined, translations?: LocaleMap) => {
+    t: (key: Extract<keyof TBaseLocale | keyof ITableLocale | keyof IKanbanBoardLocale | keyof INotificationLocale, string>, ...args: any[]) => string;
+    currentLanguage: string | undefined;
+};
+export default useTranslation;

package/dist/libs/core/application/hooks/useTranslation.js

@@ -0,0 +1,25 @@
+import Utils from "../../../infrastructure/shared/Utils";
+import { NotificationEN, NotificationTR } from "../locales";
+import KanbanBoardEN from "../locales/kanban-board/en";
+import KanbanBoardTR from "../locales/kanban-board/tr";
+import TableEN from "../locales/table/en";
+import TableTR from "../locales/table/tr";
+const useTranslation = function (currentLanguage, translations = {}) {
+    const merged = {};
+    const ExtraLocales = {
+        tr: { ...TableTR, ...KanbanBoardTR, ...NotificationTR },
+        en: { ...TableEN, ...KanbanBoardEN, ...NotificationEN },
+    };
+    const allLanguages = new Set([...Object.keys(translations), ...Object.keys(ExtraLocales)]);
+    allLanguages.forEach((lang) => {
+        merged[lang] = {
+            ...translations[lang],
+            ...ExtraLocales[lang],
+        };
+    });
+    const t = (key, ...args) => {
+        return Utils.StringFormat(merged[currentLanguage ?? "tr"][key], ...args) ?? "";
+    };
+    return { t, currentLanguage };
+};
+export default useTranslation;

package/dist/libs/core/application/hooks/useValidation.d.ts

@@ -0,0 +1,7 @@
+import { ValidationProps } from "../../../infrastructure/types";
+declare const useValidation: <TData extends object>(data: TData, params: ValidationProps<TData>[], step?: number) => {
+    onSubmit: (callback: (result: boolean) => void) => void;
+    setSubmit: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    errors: Partial<{ [key in keyof TData]: string; }>;
+};
+export default useValidation;