ar-design 0.1.39 → 0.1.41

package/dist/assets/css/components/data-display/card/card.css

@@ -4,7 +4,12 @@
   border-radius: var(--border-radius-lg);
 }
 .ar-card > .title {
-  padding: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 1rem;
+  height: 3rem;
   border-bottom: solid 1px var(--gray-200);
 }
 .ar-card > .title > .ar-typography-title {

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

@@ -6,42 +6,36 @@
   display: flex;
   flex-direction: column;
   gap: 1rem 0;
-  background-color: rgba(var(--white-rgb), 0.75);
-  backdrop-filter: blur(10px);
+  background-color: var(--white);
   width: 250px;
   padding: 10px;
   border-radius: var(--border-radius-sm);
   box-shadow: 0 0 15px -2.5px rgba(var(--black-rgb), 0.1);
   z-index: 5;
 }
-.ar-confirm-wrapper > .ar-confirm::after {
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  left: 100%;
-  content: "";
-  border: solid 10px transparent;
-  border-left-color: var(--white);
-}
 
 /* #region Open or Close */
 .ar-confirm-wrapper > .ar-confirm:is(.opened) {
   visibility: visible;
   opacity: 1;
-  transform: scale(1);
   transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
   z-index: 100;
 }
 .ar-confirm-wrapper > .ar-confirm:is(.closed) {
   visibility: hidden;
   opacity: 0;
-  transform: scale(0.8);
   transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
   z-index: 99;
 }
 /* #endregion */
 /* Open or Close */
 
+.ar-confirm-wrapper > .ar-confirm > .content {
+  max-height: 200px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 .ar-confirm-wrapper > .ar-confirm > .message {
   font-size: 0.85rem;
   text-wrap: wrap;

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

@@ -1,6 +1,5 @@
 .ar-select-wrapper > .options {
-  position: absolute;
-  inset: auto 0 auto 0;
+  position: fixed;
   background-color: var(--white);
   border: solid 1px var(--gray-200);
   border-radius: var(--border-radius-lg);
@@ -9,11 +8,11 @@
   transition: visibility 250ms, opacity 250ms, transform 250ms ease-in-out;
 }
 .ar-select-wrapper > .options.top {
-  inset: 100% 0 auto 0;
+  /* inset: 100% 0 auto 0; */
   box-shadow: 0 5px 15px -2.5px rgba(var(--black-rgb), 0.1);
 }
 .ar-select-wrapper > .options.bottom {
-  inset: auto 0 100% 0;
+  /* inset: auto 0 100% 0; */
   box-shadow: 0 -5px 15px -2.5px rgba(var(--black-rgb), 0.1);
 }
 

package/dist/components/data-display/card/IProps.d.ts

@@ -1,5 +1,7 @@
+import React from "react";
 import { IChildren, IGlobalProps } from "../../../libs/types/IGlobalProps";
 interface IProps extends IGlobalProps, IChildren {
     title?: string;
+    actions?: React.JSX.Element;
 }
 export default IProps;

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

@@ -2,10 +2,11 @@ import React from "react";
 import Typography from "../typography";
 import "../../../assets/css/components/data-display/card/card.css";
 const { Title } = Typography;
-const Card = ({ children, title = "" }) => {
+const Card = ({ children, title = "", actions }) => {
     return (React.createElement("div", { className: "ar-card" },
-        React.createElement("div", { className: "title" },
-            React.createElement(Title, { Level: "h4" }, title)),
+        title && (React.createElement("div", { className: "title" },
+            React.createElement(Title, { Level: "h4" }, title),
+            React.createElement("div", null, actions))),
         React.createElement("div", { className: "content" }, children)));
 };
 export default Card;

package/dist/components/data-display/dnd/IProps.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface IProps<T> {
+    data: T[];
+    renderItem: (item: T, index: number) => React.JSX.Element;
+    onChange: (data: T[]) => void;
+}
+export default IProps;

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

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

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

@@ -0,0 +1,4 @@
+import React from "react";
+import IProps from "./IProps";
+declare const DnD: <T>({ data, renderItem, onChange }: IProps<T>) => React.JSX.Element;
+export default DnD;

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

@@ -0,0 +1,50 @@
+"use client";
+import React, { useEffect, useRef } from "react";
+const DnD = function ({ data, renderItem, onChange }) {
+    // refs
+    const _arDnD = useRef(null);
+    const _dragItem = useRef();
+    useEffect(() => {
+        if (!_arDnD.current)
+            return;
+        _arDnD.current.childNodes.forEach((item) => {
+            const targetItem = item;
+            targetItem.draggable = true;
+            targetItem.style.cursor = "move";
+            targetItem.ondragstart = (event) => {
+                const dragItem = event.currentTarget;
+                // Drag olan öğeyi yakalanıyor.
+                _dragItem.current = dragItem;
+                dragItem.style.opacity = "0.5";
+            };
+            targetItem.ondrop = (event) => {
+                event.preventDefault();
+                const dropItem = event.currentTarget;
+                if (_dragItem.current !== dropItem) {
+                    if (_arDnD.current && _dragItem.current) {
+                        const dragItemIndex = [..._arDnD.current.children].indexOf(_dragItem.current);
+                        const dropItemIndex = [..._arDnD.current.children].indexOf(dropItem);
+                        if (dragItemIndex < dropItemIndex) {
+                            // Render Order
+                            _arDnD.current.insertBefore(_dragItem.current, dropItem.nextSibling);
+                        }
+                        else {
+                            // Render Order
+                            _arDnD.current.insertBefore(_dragItem.current, dropItem);
+                        }
+                        // Data Order
+                        data.splice(dropItemIndex, 0, data.splice(dragItemIndex, 1)[0]);
+                    }
+                    onChange(data);
+                }
+            };
+            targetItem.ondragend = (event) => {
+                const item = event.currentTarget;
+                item.style.opacity = "1";
+            };
+        });
+        _arDnD.current.ondragover = (event) => event.preventDefault();
+    }, []);
+    return (React.createElement("div", { ref: _arDnD, className: "ar-dnd" }, data.map((item, index) => renderItem(item, index))));
+};
+export default DnD;

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

@@ -1,8 +1,5 @@
 import React from "react";
-import IProps from "../../form/button/IProps";
 declare const Actions: React.FC<{
-    children: React.ReactElement<{
-        children: React.ReactElement<IProps> | React.ReactElement<IProps>[];
-    }>;
+    children: React.ReactElement | React.ReactElement[];
 }>;
 export default Actions;

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

@@ -1,2 +1,3 @@
-const Actions = ({ children }) => children;
+import React from "react";
+const Actions = ({ children }) => React.createElement("div", { style: { display: "flex", flexDirection: "row", gap: "0 .5rem" } }, children);
 export default Actions;

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

@@ -4,9 +4,7 @@ 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;
     Action: React.FC<{
-        children: React.ReactElement<{
-            children: React.ReactElement<import("../../form/button/IProps").default> | React.ReactElement<import("../../form/button/IProps").default>[];
-        }>;
+        children: React.ReactElement | React.ReactElement[];
     }>;
 };
 export default Table;

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

@@ -0,0 +1,8 @@
+import { IChildren } from "../../../libs/types/IGlobalProps";
+interface IProps extends IChildren {
+    title?: string;
+    message?: string;
+    content?: React.JSX.Element;
+    onConfirm?: (confirm: boolean) => void;
+}
+export default IProps;

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

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

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

@@ -1,10 +1,5 @@
 import React from "react";
 import "../../../assets/css/components/feedback/confirm/confirm.css";
-import { IChildren } from "../../../libs/types/IGlobalProps";
-declare const Confirm: React.FC<{
-    title: string;
-    message?: string;
-    content?: React.JSX.Element;
-    onConfirm: (confirm: boolean) => void;
-} & IChildren>;
+import IProps from "./IProps";
+declare const Confirm: React.FC<IProps>;
 export default Confirm;

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

@@ -41,10 +41,10 @@ const Confirm = ({ children, title, message, content, onConfirm }) => {
     }, [open]);
     return (React.createElement("div", { ref: _arConfirmWrapper, className: "ar-confirm-wrapper", role: "dialog" },
         React.createElement("div", { ref: _arConfirm, className: `ar-confirm ${open ? "opened" : "closed"}`, style: { top: coordinateY, left: coordinateX } },
-            React.createElement(Title, { Level: "h4" }, title),
+            title && React.createElement(Title, { Level: "h4" }, title),
             message && React.createElement("p", { className: "message" }, message),
             content && React.createElement("div", { className: "content" }, content),
-            React.createElement("div", { className: "footer" },
+            onConfirm && (React.createElement("div", { className: "footer" },
                 React.createElement(Button, { status: "success", size: "small", onClick: () => {
                         onConfirm(true);
                         setOpen(false);
@@ -52,14 +52,14 @@ const Confirm = ({ children, title, message, content, onConfirm }) => {
                 React.createElement(Button, { status: "light", size: "small", onClick: () => {
                         onConfirm(false);
                         setOpen(false);
-                    } }, "Hay\u0131r"))),
+                    } }, "Hay\u0131r")))),
         React.createElement("div", { onClick: () => {
                 if (!_arConfirmWrapper.current || !_arConfirm.current)
                     return;
                 const wrapper = _arConfirmWrapper.current.getBoundingClientRect();
                 const confirm = _arConfirm.current.getBoundingClientRect();
-                setCoordinatX(wrapper.left - confirm.width - 60);
-                setCoordinatY(wrapper.top - confirm.height / 2 + 2.5);
+                setCoordinatX(wrapper.left - confirm.width - 10);
+                setCoordinatY(wrapper.top);
                 setOpen((prev) => !prev);
             } }, children)));
 };

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

@@ -132,6 +132,11 @@ const Select = ({ variant = "outlined", status, border = { radius: "sm" }, optio
                     _singleInput.current.placeholder = value?.text || placeholder || "";
                 }
             }
+            if (_options.current) {
+                _options.current.style.top = `${rect?.bottom}px`;
+                _options.current.style.left = `${rect?.left}px`;
+                _options.current.style.width = `${rect?.width}px`;
+            }
             // Options açıldıktan 100ms sonra arama kutusuna otomatik olarak focus oluyor.
             _otoFocus = setTimeout(() => {
                 if (_searchField.current)

package/dist/components/layout/IProps.d.ts

@@ -7,7 +7,7 @@ interface IHeaderProps {
         image?: React.ReactElement<SVGElement | HTMLImageElement>;
         text?: string | React.JSX.Element;
     };
-    actions?: React.ReactNode[];
+    actions?: React.ReactNode;
 }
 interface IMainProps extends Omit<IGlobalProps, "variant" | "status" | "icon" | "border" | "size" | "upperCase">, IChildren {
 }

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import Radio from "./components/form/radio";
 import Card from "./components/data-display/card";
 import Chip from "./components/data-display/chip";
 import Divider from "./components/data-display/divider";
+import DnD from "./components/data-display/dnd";
 import Paper from "./components/data-display/paper";
 import SyntaxHighlighter from "./components/data-display/syntax-highlighter";
 import Table from "./components/data-display/table";
@@ -23,4 +24,4 @@ import Menu from "./components/navigation/menu";
 import Steps from "./components/navigation/steps";
 import Grid from "./components/layout/grid-system";
 import Layout from "./components/layout";
-export { Button, ButtonAction, ButtonGroup, Input, DatePicker, Select, Switch, Checkbox, Radio, Card, Chip, Divider, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Confirm, Modal, Menu, Steps, Grid, Layout, };
+export { Button, ButtonAction, ButtonGroup, Input, DatePicker, Select, Switch, Checkbox, Radio, Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, Alert, Confirm, Modal, Menu, Steps, Grid, Layout, };

package/dist/index.js

@@ -13,6 +13,7 @@ import Radio from "./components/form/radio";
 import Card from "./components/data-display/card";
 import Chip from "./components/data-display/chip";
 import Divider from "./components/data-display/divider";
+import DnD from "./components/data-display/dnd";
 import Paper from "./components/data-display/paper";
 import SyntaxHighlighter from "./components/data-display/syntax-highlighter";
 import Table from "./components/data-display/table";
@@ -32,7 +33,7 @@ export {
 // Form Elements
 Button, ButtonAction, ButtonGroup, Input, DatePicker, Select, Switch, Checkbox, Radio, 
 // Data Display
-Card, Chip, Divider, Paper, SyntaxHighlighter, Table, Tabs, Typography, 
+Card, Chip, Divider, DnD, Paper, SyntaxHighlighter, Table, Tabs, Typography, 
 // Feedback
 Alert, Confirm, Modal, 
 // Navigation

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

@@ -44,3 +44,9 @@ export declare const useValidation: <TData extends object>(data: TData, params:
     setSubmit: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     errors: Partial<{ [key in keyof TData]: string; }>;
 };
+export declare const useTranslation: <TBaseLocale>(translations: {
+    [key: string]: any;
+}) => {
+    t: (key: keyof TBaseLocale, ...args: any[]) => string;
+    changeLanguage: (language: string) => void;
+};

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

@@ -85,3 +85,16 @@ export const useValidation = function (data, params) {
         errors,
     };
 };
+// Custom hook for easier usage of context
+export const useTranslation = function (translations) {
+    const t = (key, ...args) => {
+        return Utils.StringFormat(translations[localStorage.getItem("ar-language-value")][key], args);
+    };
+    const changeLanguage = (language) => {
+        if (typeof window === undefined)
+            return;
+        localStorage.setItem("ar-language-value", language);
+        window.location.reload();
+    };
+    return { t, changeLanguage };
+};

package/package.json

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