ar-design 0.1.39 → 0.1.40

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/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/libs/core/application/contexts/Translation.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+type ContextProps = {
+    t: (key: string, ...args: any[]) => string;
+    setLanguage: React.Dispatch<React.SetStateAction<string>>;
+};
+type ProviderProps = {
+    children: React.ReactNode;
+    translations: {
+        [key: string]: any;
+    };
+    initialLanguage: string;
+};
+declare const TranslationContext: React.Context<ContextProps>;
+declare const TranslationProvider: ({ children, translations, initialLanguage }: ProviderProps) => React.JSX.Element;
+export { TranslationContext, TranslationProvider };

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

@@ -0,0 +1,15 @@
+"use client";
+import React, { createContext, useState } from "react";
+import Utils from "../../../infrastructure/shared/Utils";
+const TranslationContext = createContext({
+    t: (key) => key,
+    setLanguage: () => { },
+});
+const TranslationProvider = ({ children, translations, initialLanguage }) => {
+    const [language, setLanguage] = useState(initialLanguage);
+    const t = (key, ...args) => {
+        return Utils.StringFormat(translations[language][key], args);
+    };
+    return React.createElement(TranslationContext.Provider, { value: { t, setLanguage } }, children);
+};
+export { TranslationContext, TranslationProvider };

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

@@ -1,3 +1,4 @@
 import { ConfigProvider } from "./Config";
 import { NotificationProvider } from "./Notification";
-export { ConfigProvider, NotificationProvider };
+import { TranslationProvider } from "./Translation";
+export { ConfigProvider, NotificationProvider, TranslationProvider };

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

@@ -1,3 +1,4 @@
 import { ConfigProvider } from "./Config";
 import { NotificationProvider } from "./Notification";
-export { ConfigProvider, NotificationProvider };
+import { TranslationProvider } from "./Translation";
+export { ConfigProvider, NotificationProvider, TranslationProvider };

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

@@ -44,3 +44,7 @@ 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: () => {
+    t: (key: string, ...args: any[]) => string;
+    setLanguage: import("react").Dispatch<import("react").SetStateAction<string>>;
+};

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

@@ -2,6 +2,7 @@ import { useContext, useEffect, useRef, useState } from "react";
 import { ConfigContext } from "../contexts/Config";
 import { NotificationContext } from "../contexts/Notification";
 import Utils from "../../../infrastructure/shared/Utils";
+import { TranslationContext } from "../contexts/Translation";
 export const useLayout = () => {
     const context = useContext(ConfigContext);
     if (!context) {
@@ -85,3 +86,5 @@ export const useValidation = function (data, params) {
         errors,
     };
 };
+// Custom hook for easier usage of context
+export const useTranslation = () => useContext(TranslationContext);

package/package.json

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