ar-design 0.2.91 → 0.2.93

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

@@ -1,6 +1,8 @@
 .ar-checkbox-wrapper {
   display: flex;
+  justify-content: center;
   align-items: center;
+  width: max-content;
   height: var(--input-height);
 }
 .ar-checkbox-wrapper > label > :is(input[type="checkbox"]) {

package/dist/assets/css/core/ar-core.css

@@ -183,3 +183,5 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 }
 /* #endregion */
 /* Variants */
+
+@import url("./utils.css");

package/dist/assets/css/core/utils.css

@@ -0,0 +1,13 @@
+.flex {
+  display: flex;
+}
+
+.justify-content-start {
+  justify-content: flex-start;
+}
+.justify-content-center {
+  justify-content: center;
+}
+.justify-content-end {
+  justify-content: flex-end;
+}

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

@@ -14,6 +14,7 @@ import { FilterOperator } from "../../../libs/infrastructure/shared/Enums";
 import Select from "../../form/select";
 import Grid from "../grid-system";
 import THeadCell from "./THeadCell";
+import Tooltip from "../../feedback/tooltip";
 const filterOption = [
     { value: FilterOperator.Contains, text: "İçerir" },
     { value: FilterOperator.DoesNotContains, text: "İçermez" },
@@ -220,7 +221,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                             ?.map((filter, fIndex) => {
                             const name = typeof c.key !== "object" ? String(c.key) : String(c.key.field);
                             return (React.createElement("div", null,
-                                React.createElement(Checkbox, { ref: (element) => (_filterCheckboxItems.current[fIndex] = element), label: filter.text, name: name, color: "blue", value: filter.value, checked: Array.isArray(checkboxSelectedParams?.[name]) &&
+                                React.createElement(Checkbox, { ref: (element) => (_filterCheckboxItems.current[fIndex] = element), variant: "filled", color: "green", label: filter.text, name: name, value: filter.value, checked: Array.isArray(checkboxSelectedParams?.[name]) &&
                                         checkboxSelectedParams?.[name]?.some((f) => String(f.value) === String(filter.value)), onChange: async (event) => await handleCheckboxChange(event) })));
                         }))));
                 default:
@@ -346,8 +347,8 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
         // TODO: Keylere bakılacak...
         return (React.createElement(Fragment, { key: `row-${index}` },
             React.createElement("tr", { key: `row-${index}` },
-                selections && (React.createElement("td", { className: "sticky-left", "data-sticky-position": "left" },
-                    React.createElement(Checkbox, { ref: (element) => (_checkboxItems.current[index] = element), color: "blue", checked: selectionItems.some((selectionItem) => JSON.stringify(selectionItem) === JSON.stringify(item)), onChange: (event) => {
+                selections && (React.createElement("td", { className: "flex justify-content-center sticky-left", "data-sticky-position": "left" },
+                    React.createElement(Checkbox, { ref: (element) => (_checkboxItems.current[index] = element), variant: "filled", color: "green", checked: selectionItems.some((selectionItem) => JSON.stringify(selectionItem) === JSON.stringify(item)), onChange: (event) => {
                             if (event.target.checked)
                                 setSelectionItems((prev) => [...prev, item]);
                             else
@@ -510,15 +511,17 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                         if (actions.import && actions.import.onClick)
                             actions.import.onClick(formData, files);
                     }, config: { buttons: { okay: "Yükle", cancel: "İptal" } }, windowBlur: true },
-                    React.createElement(Button, { variant: "outlined", color: "purple", icon: { element: React.createElement(ARIcon, { icon: "Upload" }) }, tooltip: { text: actions.import.tooltip, direction: "top" } }))),
-                actions.create && (React.createElement(Button, { variant: "outlined", color: "green", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 24 }) }, tooltip: { text: actions.create.tooltip, direction: "top" }, onClick: actions.create.onClick }))))))),
+                    React.createElement(Tooltip, { text: actions.import.tooltip },
+                        React.createElement(Button, { variant: "outlined", color: "purple", icon: { element: React.createElement(ARIcon, { icon: "Upload" }) } })))),
+                actions.create && (React.createElement(Tooltip, { text: actions.create.tooltip },
+                    React.createElement(Button, { variant: "outlined", color: "green", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 24 }) }, onClick: actions.create.onClick })))))))),
         React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleScroll },
             React.createElement("table", { ref: ref },
                 React.createElement("thead", null,
                     React.createElement("tr", { key: "selection" },
                         data.some((item) => _subrowSelector in item) && _subrowButton && (React.createElement("td", { style: { width: 0, minWidth: 0 } })),
                         selections && (React.createElement("th", { className: "selection-col sticky-left", "data-sticky-position": "left" },
-                            React.createElement(Checkbox, { variant: "filled", color: "blue", checked: selectAll, onChange: (event) => {
+                            React.createElement(Checkbox, { variant: "filled", color: "green", checked: selectAll, onChange: (event) => {
                                     if (_checkboxItems.current.length > 0) {
                                         setSelectAll(event.target.checked);
                                         _checkboxItems.current.forEach((item) => {

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

@@ -1,5 +1,5 @@
 import { IChildren, ISize } from "../../../libs/types/IGlobalProps";
-interface IProps extends IChildren, ISize {
+interface IProps extends IChildren, ISize, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Modal'ın açık olup olmadığını kontrol eden ve değiştiren değerler.
      *

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

@@ -3,7 +3,7 @@ import React, { useEffect, useRef } from "react";
 import "../../../assets/css/components/feedback/modal/styles.css";
 import Typography from "../../data-display/typography";
 const { Title } = Typography;
-const Modal = ({ children, open, title, size = "normal", footer }) => {
+const Modal = ({ children, open, title, size = "normal", footer, ...attributes }) => {
     // refs
     const _arModal = useRef(null);
     const _modalWrapperClassName = ["ar-modal-wrapper"];
@@ -64,6 +64,10 @@ const Modal = ({ children, open, title, size = "normal", footer }) => {
             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) => {
                 event.stopPropagation();
@@ -71,7 +75,7 @@ const Modal = ({ children, open, title, size = "normal", footer }) => {
                 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", { ref: _arModal, ...attributes, className: _modalClassName.map((c) => c).join(" "), role: "dialog" },
             title && (React.createElement("div", { className: "header" },
                 React.createElement(Title, { Level: "h3" }, title),
                 React.createElement("div", { className: "close", onClick: () => open.set((prev) => !prev) }))),

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

@@ -21,12 +21,12 @@ const Tooltip = ({ children, text, direction = "top" }) => {
         const childRect = child.getBoundingClientRect();
         const tooltipRect = tooltip.getBoundingClientRect();
         const isOnRight = childRect.left > screenCenterX;
-        const coordinate = isOnRight ? childRect.right + tooltipRect.width / 2 : childRect.left + tooltipRect.width;
+        console.log(tooltipRect.left);
         if (direction === "top" || direction === "bottom") {
-            if (isOnRight && coordinate > windowWidth) {
+            if (isOnRight && tooltipRect.right > windowWidth - 10) {
                 direction = "left";
             }
-            else if (!isOnRight && coordinate < windowWidth) {
+            else if (!isOnRight && tooltipRect.left < 10) {
                 direction = "right";
             }
         }
@@ -55,6 +55,19 @@ const Tooltip = ({ children, text, direction = "top" }) => {
         setDirection(direction);
     }, []);
     //useEffects
+    useEffect(() => {
+        const observer = new MutationObserver(() => {
+            handlePosition();
+        });
+        observer.observe(document.body, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
     useEffect(() => {
         if (mouseEnter)
             setTimeout(() => handlePosition(), 0);

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

@@ -16,31 +16,6 @@ interface IProps extends IVariant, IColors, IBorder, IIcon, ISize, IUpperCase, O
      * ```
      */
     shape?: "circle" | "square";
-    /**
-     * Bileşene açıklayıcı bir bilgi balonu (tooltip) eklemek için kullanılır.
-     *
-     * - `text`: Tooltip içerisinde gösterilecek açıklama metni.
-     * - `direction`: Tooltip’in hangi yönde görüneceğini belirtir. Varsayılan yön kullanılabilir.
-     *   - `top`: Tooltip yukarıda görünür.
-     *   - `right`: Tooltip sağda görünür.
-     *   - `left`: Tooltip solda görünür.
-     *   - `bottom`: Tooltip aşağıda görünür.
-     *
-     * Örneğin;
-     *
-     * ```jsx
-     * <Component
-     *   tooltip={{
-     *     text: "Bu bir açıklamadır.",
-     *     direction: "top"
-     *   }}
-     * />
-     * ```
-     */
-    tooltip?: {
-        text: string;
-        direction?: "top" | "right" | "left" | "bottom";
-    };
     /**
      * Bileşenin konumlandırmasını belirlemek için kullanılır.
      *

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

@@ -2,8 +2,7 @@
 import React, { useRef } from "react";
 import "../../../assets/css/components/form/button/styles.css";
 import Utils from "../../../libs/infrastructure/shared/Utils";
-import Tooltip from "../../feedback/tooltip";
-const Button = ({ children, variant = "filled", shape, color = "light", border = { radius: "sm" }, size = "normal", tooltip, position, fullWidth, icon, upperCase, ...attributes }) => {
+const Button = ({ children, variant = "filled", shape, color = "light", border = { radius: "sm" }, size = "normal", position, fullWidth, icon, upperCase, ...attributes }) => {
     // refs
     const _button = useRef(null);
     const _arButtonClassName = ["ar-button"];
@@ -18,7 +17,7 @@ const Button = ({ children, variant = "filled", shape, color = "light", border =
         _arButtonClassName.push(position.type);
         _arButtonClassName.push(position.inset.map((_inset) => _inset).join(" "));
     }
-    const buttonElement = (React.createElement("button", { ref: _button, ...attributes, className: _arButtonClassName.map((c) => c).join(" "), onClick: (event) => {
+    return (React.createElement("button", { ref: _button, ...attributes, className: _arButtonClassName.map((c) => c).join(" "), onClick: (event) => {
             // Disabled gelmesi durumunda işlem yapmasına izin verme...
             if (attributes.disabled)
                 return;
@@ -37,7 +36,6 @@ const Button = ({ children, variant = "filled", shape, color = "light", border =
         React.createElement("span", { className: "text" },
             icon?.element,
             React.createElement("span", null, !shape ? (typeof children === "string" && upperCase ? children.toLocaleUpperCase() : children) : ""))));
-    return !tooltip ? (buttonElement) : (React.createElement(Tooltip, { text: tooltip.text, direction: tooltip.direction }, buttonElement));
 };
 Button.displayName = "Button";
 export default Button;

package/dist/components/form/text-editor/index.js

@@ -5,6 +5,7 @@ import Button from "../button";
 import React, { useEffect, useRef, useState } from "react";
 import Utils from "../../../libs/infrastructure/shared/Utils";
 import ReactDOM from "react-dom";
+import Tooltip from "../../feedback/tooltip";
 const TextEditor = ({ color = "light", name, value, onChange, dynamicList, 
 // placeholder,
 height, 
@@ -212,9 +213,8 @@ validation, }) => {
     }, []);
     return (React.createElement("div", { ref: _container, className: "ar-text-editor" },
         React.createElement("iframe", { ref: _arIframe, name: name, className: _iframeClassName.map((c) => c).join(" "), height: height }),
-        React.createElement("div", { className: "toolbar" }, toolbarButtons.map(({ command, icon, tooltip }) => (React.createElement(Button, { key: command, type: "button", variant: "borderless", color: "teal", border: { radius: "none" }, icon: { element: React.createElement(ARIcon, { icon: icon }) }, tooltip: {
-                text: tooltip,
-            }, onClick: () => execCommand(command) })))),
+        React.createElement("div", { className: "toolbar" }, toolbarButtons.map(({ command, icon, tooltip }) => (React.createElement(Tooltip, { text: tooltip },
+            React.createElement(Button, { key: command, type: "button", variant: "borderless", color: "light", border: { radius: "none" }, icon: { element: React.createElement(ARIcon, { icon: icon }) }, onClick: () => execCommand(command) }))))),
         React.createElement("div", { className: "resize", onMouseDown: handleMouseDown }),
         validation?.text && React.createElement("span", { className: "validation" }, validation.text),
         dynamicList &&

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

@@ -0,0 +1,28 @@
+declare class DATE {
+    /**
+     * YYYY-MM-DD
+     *
+     * @param date
+     * @returns
+     */
+    YMD: (date: Date) => string;
+    /**
+     * DD-MM-YYYY
+     *
+     * @param date
+     * @returns
+     */
+    DMY: (date: Date) => string;
+    /**
+     * 30 Mayıs 2021
+     *
+     * @param date
+     * @param locale
+     * @returns
+     */
+    Verbose: (date: Date, locale?: string) => string;
+    WithTime: (date: Date, locale?: string) => string;
+    private GetLocaleFromLanguage;
+}
+declare const _default: DATE;
+export default _default;

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

@@ -0,0 +1,66 @@
+class DATE {
+    /**
+     * YYYY-MM-DD
+     *
+     * @param date
+     * @returns
+     */
+    YMD = (date) => {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, "0");
+        const day = String(date.getDate()).padStart(2, "0");
+        return `${year}-${month}-${day}`;
+    };
+    /**
+     * DD-MM-YYYY
+     *
+     * @param date
+     * @returns
+     */
+    DMY = (date) => {
+        const day = String(date.getDate()).padStart(2, "0");
+        const month = String(date.getMonth() + 1).padStart(2, "0");
+        const year = date.getFullYear();
+        return `${day}-${month}-${year}`;
+    };
+    /**
+     * 30 Mayıs 2021
+     *
+     * @param date
+     * @param locale
+     * @returns
+     */
+    Verbose = (date, locale = "tr") => {
+        return date.toLocaleDateString(this.GetLocaleFromLanguage(locale), {
+            day: "numeric",
+            month: "long",
+            year: "numeric",
+        });
+    };
+    WithTime = (date, locale = "tr") => {
+        return date.toLocaleString(this.GetLocaleFromLanguage(locale), {
+            day: "numeric",
+            month: "long",
+            year: "numeric",
+            hour: "2-digit",
+            minute: "2-digit",
+        });
+    };
+    GetLocaleFromLanguage = (lang) => {
+        const languageToLocaleMap = {
+            tr: "tr-TR",
+            en: "en-US",
+            fr: "fr-FR",
+            de: "de-DE",
+            es: "es-ES",
+            ja: "ja-JP",
+            ru: "ru-RU",
+            zh: "zh-CN",
+            hi: "hi-IN",
+            fa: "fa-IR",
+            ko: "ko-KR",
+        };
+        return languageToLocaleMap[lang] || lang;
+    };
+}
+export default new DATE();

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

@@ -0,0 +1,2 @@
+import DATE from "./DATE";
+export { DATE };

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

@@ -0,0 +1,2 @@
+import DATE from "./DATE";
+export { DATE };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.2.91",
+  "version": "0.2.93",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -13,6 +13,7 @@
     "./@hooks": "./dist/libs/core/application/hooks/index.js",
     "./@locales": "./dist/libs/core/application/locales/index.js",
     "./@types": "./dist/libs/types/index.js",
+    "./@utils": "./dist/libs/infrastructure/shared/index.js",
     "./@styles": "./dist/assets/css/core/ar-core.css"
   },
   "files": [