ar-design 0.1.29 → 0.1.30

package/dist/assets/css/components/feedback/modal/modal.css

@@ -1,8 +1,12 @@
 .ar-modal-wrapper {
   position: absolute;
   inset: 0;
+}
+.ar-modal-wrapper > .ar-modal-bg {
+  position: fixed;
+  inset: 0;
   background-color: rgba(var(--black-rgb), 0.5);
-  backdrop-filter: blur(5px);
+  backdrop-filter: blur(10px);
 }
 
 /* #region Open or Close */

package/dist/assets/css/components/form/input/input.css

@@ -20,6 +20,11 @@
   box-sizing: border-box;
   transition: background 250ms, border 250ms, box-shadow 250ms ease-in-out;
 }
+.ar-input-wrapper > .ar-input > .validation {
+  color: var(--danger);
+  font-size: 0.8rem;
+  font-weight: 600;
+}
 
 /* Core Css */
 @import url("./core/icon.css");

package/dist/assets/css/components/form/select/select.css

@@ -56,6 +56,14 @@
   line-height: 0.7rem;
   cursor: pointer;
 }
+.ar-select-wrapper > .ar-select > .button-clear:is(.opened) {
+  visibility: visible;
+  opacity: 1;
+}
+.ar-select-wrapper > .ar-select > .button-clear:is(.closed) {
+  visibility: hidden;
+  opacity: 0;
+}
 .ar-select-wrapper > .ar-select > .button-clear::before {
   content: "x";
   color: var(--white);

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

@@ -2,7 +2,7 @@ import React from "react";
 import IProps from "./IProps";
 import "../../../assets/css/components/data-display/table/table.css";
 declare const Table: {
-    <T extends object>({ children, data, columns, selections, pagination, config, }: IProps<T>): React.JSX.Element;
+    <T extends object>({ children, data, columns, selections, pagination, config }: IProps<T>): React.JSX.Element;
     Action: React.FC<{
         children: React.ReactElement<{
             children: React.ReactElement<import("../../form/button/IProps").default> | React.ReactElement<import("../../form/button/IProps").default>[];

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

@@ -5,7 +5,7 @@ import Checkbox from "../../form/checkbox";
 import Actions from "./Actions";
 import Input from "../../form/input";
 import Pagination from "../../navigation/pagination";
-const Table = function ({ children, data, columns, selections, pagination, config, }) {
+const Table = function ({ children, data, columns, selections, pagination, config }) {
     // refs
     let _dataLength = useRef(0);
     const _tableWrapper = useRef(null);
@@ -185,9 +185,7 @@ const Table = function ({ children, data, columns, selections, pagination, confi
                         else if (typeof c.key === "object") {
                             const _item = item[c.key.field];
                             if (_item && typeof _item === "object") {
-                                render = c.render
-                                    ? c.render(item)
-                                    : _item[c.key.nestedKey];
+                                render = c.render ? c.render(item) : _item[c.key.nestedKey];
                             }
                         }
                         // Diğer durumlarda `null` döndür

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

@@ -13,11 +13,10 @@ const Modal = ({ children, open, title, size = "normal", footer }) => {
     else
         _modalWrapperClassName.push("closed");
     // methods
-    const handleClickOutSide = (event) => {
-        const target = event.target;
-        if (_arModal.current && !_arModal.current.contains(target))
-            open.set(false);
-    };
+    // const handleClickOutSide = (event: MouseEvent) => {
+    //   const target = event.target as HTMLElement;
+    //   if (_arModal.current && !_arModal.current.contains(target)) open.set(false);
+    // };
     const handleKeys = (event) => {
         const key = event.key;
         if (key === "Escape")
@@ -26,16 +25,22 @@ const Modal = ({ children, open, title, size = "normal", footer }) => {
     // useEffects
     useEffect(() => {
         if (open.get) {
-            document.addEventListener("click", handleClickOutSide);
+            // document.addEventListener("click", handleClickOutSide);
             document.addEventListener("keydown", handleKeys);
             // Dinleyicileri kaldır.
             return () => {
-                document.removeEventListener("click", handleClickOutSide);
+                // document.removeEventListener("click", handleClickOutSide);
                 document.removeEventListener("keydown", handleKeys);
             };
         }
     }, [open.get]);
     return (React.createElement("div", { className: _modalWrapperClassName.map((c) => c).join(" ") },
+        React.createElement("div", { className: "ar-modal-bg", onMouseDown: (event) => {
+                event.stopPropagation();
+                const target = event.target;
+                if (_arModal.current && !_arModal.current.contains(target))
+                    open.set(false);
+            } }),
         React.createElement("div", { ref: _arModal, className: _modalClassName.map((c) => c).join(" "), role: "dialog" },
             React.createElement("div", { className: "header" },
                 React.createElement(Title, { Level: "h3" }, title),

package/dist/components/form/input/IProps.d.ts

@@ -9,5 +9,9 @@ interface IProps extends Omit<IGlobalProps, "children" | "disabled">, Omit<React
         before?: string | number;
         after?: string | number;
     };
+    validation?: {
+        text: string | string[] | React.JSX.Element[] | null;
+        scrollTo?: boolean;
+    };
 }
 export default IProps;

package/dist/components/form/input/index.js

@@ -3,13 +3,13 @@ import React, { forwardRef } from "react";
 import "../../../assets/css/components/form/input/input.css";
 import Button from "../button";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-const Input = forwardRef(({ variant = "outlined", status = "light", size = "normal", icon, border = { radius: "sm" }, button, addon, ...attributes }, ref) => {
+const Input = forwardRef(({ variant = "outlined", status = "light", size = "normal", icon, border = { radius: "sm" }, button, addon, validation, ...attributes }, ref) => {
     // variables
     const _wrapperClassName = ["ar-input-wrapper"];
     const _addonBeforeClassName = ["addon-before"];
     const _addonAfterClassName = ["addon-after"];
     const _inputClassName = [];
-    _inputClassName.push(...Utils.GetClassName(variant, status, border, size, icon, attributes.className));
+    _inputClassName.push(...Utils.GetClassName(variant, validation?.text ? "danger" : status, border, size, icon, attributes.className));
     // addon className
     if (addon) {
         _wrapperClassName.push("addon");
@@ -21,7 +21,7 @@ const Input = forwardRef(({ variant = "outlined", status = "light", size = "norm
         _addonAfterClassName.push(`border-radius-${border.radius}`);
     }
     return (React.createElement("div", { className: _wrapperClassName.map((c) => c).join(" ") },
-        addon?.before && (React.createElement("span", { className: _addonBeforeClassName.map((c) => c).join(" ") }, addon?.before)),
+        addon?.before && React.createElement("span", { className: _addonBeforeClassName.map((c) => c).join(" ") }, addon?.before),
         React.createElement("div", { className: "ar-input" },
             icon?.element && React.createElement("span", { className: "icon-element" }, icon.element),
             React.createElement("input", { ref: ref, ...attributes, size: 20, className: _inputClassName.map((c) => c).join(" "), onChange: (event) => {
@@ -40,8 +40,9 @@ const Input = forwardRef(({ variant = "outlined", status = "light", size = "norm
                             });
                         }
                     })();
-                } })),
-        addon?.after && (React.createElement("span", { className: _addonAfterClassName.map((c) => c).join(" ") }, addon?.after)),
+                } }),
+            validation?.text && React.createElement("span", { className: "validation" }, validation.text)),
+        addon?.after && React.createElement("span", { className: _addonAfterClassName.map((c) => c).join(" ") }, addon?.after),
         button && (React.createElement(Button, { ...button, status: status, border: { radius: border.radius }, disabled: attributes.disabled }))));
 });
 Input.displayName = "Input";

package/dist/components/form/select/index.js

@@ -222,8 +222,10 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                     // Arama yapmak için kullanılan state bu kısımda dolduruluyor.
                     setSearchText(event.currentTarget.value);
                 }, placeholder: attributes.placeholder, disabled: attributes.disabled })),
-            !attributes.disabled &&
-                (Object.keys(selection || {}).length > 0 || (multiple && selections.length > 0)) && (React.createElement("span", { className: "button-clear", onClick: () => {
+            React.createElement("span", { className: `button-clear ${!attributes.disabled && (Object.keys(selection || {}).length > 0 || (multiple && selections.length > 0))
+                    ? "opened"
+                    : "closed"}`, onClick: (event) => {
+                    event.stopPropagation();
                     // Multiple
                     if (multiple) {
                         if (_searchField.current)
@@ -239,7 +241,7 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                         setSelection(undefined);
                         onChange(undefined);
                     }
-                } })),
+                } }),
             React.createElement("span", { className: `angel-down ${optionsOpen ? "opened" : "closed"}`, onClick: (event) => {
                     event.stopPropagation();
                     setOptionsOpen((x) => !x);

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

@@ -1,20 +1,21 @@
 "use client";
-import React, { useContext, useEffect, useRef, useState } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import "../../../assets/css/components/navigation/pagination/pagination.css";
 import { ConfigContext } from "../../../libs/core/application/contexts/Config";
 const Pagination = ({ defaultCurrent = 1, totalRecords, perPage, onChange }) => {
     // context
     const { config } = useContext(ConfigContext);
-    // refs
-    const _totalPageCount = useRef(Math.ceil(totalRecords / (perPage ?? config.perPage))).current;
     // states
     const [pages, setPages] = useState([]);
     const [currentPage, setCurrentPage] = useState(defaultCurrent);
+    const [totalPageCount, setTotalPageCount] = useState(0);
     // useEffect
     useEffect(() => {
         if (totalRecords === 0)
             return;
         const liItems = [];
+        const _totalPageCount = Math.ceil(totalRecords / (perPage ?? config.perPage));
+        setTotalPageCount(_totalPageCount);
         // Başlangıç ve bitiş aralığını hesapla.
         const startPage = Math.max(1, currentPage - 1);
         const endPage = Math.min(_totalPageCount, currentPage + 1);
@@ -58,20 +59,20 @@ const Pagination = ({ defaultCurrent = 1, totalRecords, perPage, onChange }) =>
                 } },
                 React.createElement("span", null, "‹")),
             pages,
-            React.createElement("li", { className: _totalPageCount === currentPage ? "passive" : "", onClick: () => {
-                    if (_totalPageCount === currentPage)
+            React.createElement("li", { className: totalPageCount === currentPage ? "passive" : "", onClick: () => {
+                    if (totalPageCount === currentPage)
                         return;
                     setCurrentPage((prev) => {
-                        if (prev === _totalPageCount)
+                        if (prev === totalPageCount)
                             return prev;
                         return (prev += 1);
                     });
                 } },
                 React.createElement("span", null, "›")),
-            React.createElement("li", { className: _totalPageCount === currentPage ? "passive" : "", onClick: () => {
-                    if (_totalPageCount === currentPage)
+            React.createElement("li", { className: totalPageCount === currentPage ? "passive" : "", onClick: () => {
+                    if (totalPageCount === currentPage)
                         return;
-                    setCurrentPage(_totalPageCount);
+                    setCurrentPage(totalPageCount);
                 } },
                 React.createElement("span", null, "»")))));
 };

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

@@ -1,4 +1,5 @@
 import { Status } from "../contexts/Notification";
+import { ValidationProperties } from "../../../types";
 export declare const useLayout: () => {
     config: {
         layout: {
@@ -32,9 +33,24 @@ export declare const useLayout: () => {
     }>>;
 };
 export declare const useNotification: () => {
-    notification: ({ title, message, status, }: {
+    notification: ({ title, message, status }: {
         title: string;
         message?: string;
         status: Status;
     }) => void;
 };
+type Error = {
+    [key: string]: string;
+    type: string;
+}[];
+export declare const useValidation: <TData extends object>(data: TData, params: ValidationProperties<TData>[]) => {
+    submit: boolean;
+    setSubmit: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    success: boolean;
+    setSuccess: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    message: string | null;
+    setMessage: import("react").Dispatch<import("react").SetStateAction<string | null>>;
+    errors: Error;
+    showErrors: (errors: Error, field: string) => string[] | null;
+};
+export {};

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

@@ -1,6 +1,7 @@
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 import { ConfigContext } from "../contexts/Config";
 import { NotificationContext } from "../contexts/Notification";
+import Utils from "../../../infrastructure/shared/Utils";
 export const useLayout = () => {
     const context = useContext(ConfigContext);
     if (!context) {
@@ -12,7 +13,7 @@ export const useNotification = () => {
     // contexts
     const { setTitle, setMessage, setStatus, setTrigger } = useContext(NotificationContext);
     // methods
-    const notification = ({ title, message, status, }) => {
+    const notification = ({ title, message, status }) => {
         setTitle && setTitle(title);
         setMessage && setMessage(message ?? "");
         setStatus && setStatus(status);
@@ -20,3 +21,67 @@ export const useNotification = () => {
     };
     return { notification };
 };
+export const useValidation = function (data, params) {
+    // useStates
+    const [submit, setSubmit] = useState(false);
+    const [success, setSuccess] = useState(true);
+    const [message, setMessage] = useState(null);
+    const [errors, setErrors] = useState([]);
+    // methods
+    const showErrors = (errors, field) => {
+        const _errors = errors.filter((error) => error[field]);
+        if (_errors.length === 0)
+            return null;
+        return _errors.map((error) => error[field]);
+    };
+    // useEffects
+    useEffect(() => {
+        if (!data || Object.keys(data).length === 0 || params.length === 0)
+            return;
+        setErrors([]);
+        params.forEach((param) => {
+            const value = data[param.key];
+            param.shape?.forEach((s) => {
+                if (s.type === "required") {
+                    !value ? setErrors((errors) => [...errors, { [param.key]: s.message, type: s.type }]) : null;
+                }
+                if (s.type === "minimum") {
+                    value && value.length < s.value
+                        ? setErrors((errors) => [
+                            ...errors,
+                            {
+                                [param.key]: Utils.StringFormat(s.message, s.value, 4),
+                                type: s.type,
+                            },
+                        ])
+                        : null;
+                }
+                if (s.type === "maximum") {
+                    value && value.length > s.value
+                        ? setErrors((errors) => [
+                            ...errors,
+                            {
+                                [param.key]: Utils.StringFormat(s.message, s.value),
+                                type: s.type,
+                            },
+                        ])
+                        : null;
+                }
+                if (s.type === "email") {
+                    const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(value);
+                    !regex && value ? setErrors((errors) => [...errors, { [param.key]: s.message, type: s.type }]) : null;
+                }
+            });
+        });
+    }, [data]);
+    return {
+        submit,
+        setSubmit,
+        success,
+        setSuccess,
+        message,
+        setMessage,
+        errors,
+        showErrors,
+    };
+};

package/dist/libs/infrastructure/shared/Utils.d.ts

@@ -1,6 +1,7 @@
 import { Border, Icon, Sizes, Status, Variants } from "../../types";
 declare class Utils {
     GetClassName: (variant?: Variants, status?: Status, border?: Border, size?: Sizes, icon?: Icon, className?: string) => string[];
+    StringFormat: (value: string, ...args: any[]) => string;
 }
 declare const _default: Utils;
 export default _default;

package/dist/libs/infrastructure/shared/Utils.js

@@ -11,5 +11,13 @@ class Utils {
             classNames.push(className);
         return classNames;
     };
+    StringFormat = (value, ...args) => {
+        if (args[0].length === 0)
+            return value;
+        return value.replace(/{(\d+)}/g, (match, number) => {
+            const index = parseInt(number, 10);
+            return typeof args[index] !== "undefined" ? args[index] : match;
+        });
+    };
 }
 export default new Utils();

package/dist/libs/types/index.d.ts

@@ -39,3 +39,11 @@ export type StepProps = {
     title: string;
     content: React.ReactNode;
 };
+export type ValidationProperties<T> = {
+    key: keyof T;
+    shape?: {
+        type: "required" | "minimum" | "maximum" | "email";
+        value?: string | number;
+        message: string;
+    }[];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",