ar-design 0.2.63 → 0.2.65

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

@@ -0,0 +1,179 @@
+.ar-notification-popup {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: top;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+  background-color: var(--white);
+  width: 450px;
+  padding: 1rem 2rem;
+  border-radius: var(--border-radius-sm);
+  box-shadow: 0 5px 15px -5px rgba(var(--black-rgb), 0.25);
+  overflow: hidden;
+  z-index: 1051;
+}
+.ar-notification-popup.open {
+  animation: openPopup 1s ease 0s 1 normal forwards;
+}
+.ar-notification-popup.closed {
+  animation: closedPopup ease-in-out 500ms 0s 1 normal both;
+}
+
+.ar-notification-popup > .icon {
+  width: 5rem;
+  height: 5rem;
+}
+
+.ar-notification-popup > .icon.success {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--success);
+  border-radius: var(--border-radius-pill);
+  box-shadow: 0 0 0 5px rgba(var(--success-rgb), 0.25);
+}
+.ar-notification-popup > .icon.success::before {
+  content: "";
+  width: 4rem;
+  height: 1.75rem;
+  transform: rotate(-45deg);
+  border: solid 10.5px transparent;
+  border-radius: var(--border-radius-sm);
+  border-left-color: var(--white);
+  border-bottom-color: var(--white);
+}
+
+.ar-notification-popup > .icon.error {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--danger);
+  border-radius: var(--border-radius-pill);
+  box-shadow: 0 0 0 5px rgba(var(--danger-rgb), 0.25);
+}
+.ar-notification-popup > .icon.error::before {
+  position: absolute;
+  content: "";
+  background-color: var(--white);
+  width: 10.5px;
+  height: 3.5rem;
+  transform: rotate(-45deg);
+  border-radius: var(--border-radius-sm);
+}
+.ar-notification-popup > .icon.error::after {
+  position: absolute;
+  content: "";
+  background-color: var(--white);
+  width: 10.5px;
+  height: 3.5rem;
+  transform: rotate(45deg);
+  border-radius: var(--border-radius-sm);
+}
+
+.ar-notification-popup > .content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 0.75rem 0;
+  width: 100%;
+  padding: 0 1rem;
+  color: var(--gray-700);
+}
+.ar-notification-popup > .content > .title {
+  font-size: 1.75rem;
+  text-align: center;
+}
+
+.ar-notification-popup > .content > .title.success {
+  color: var(--success);
+}
+.ar-notification-popup > .content > .title.error {
+  color: var(--danger);
+}
+
+.ar-notification-popup > .content > .message {
+  color: var(--gray-600);
+  text-align: center;
+}
+
+@media only screen and (max-width: 480px) {
+  .ar-notification.top-left {
+    inset: 1rem 1rem auto 1rem;
+  }
+  .ar-notification.top-right {
+    inset: 1rem 1rem auto 1rem;
+  }
+  .ar-notification.bottom-left {
+    inset: auto 1rem 1rem 1rem;
+  }
+  .ar-notification.bottom-right {
+    inset: auto 1rem 1rem 1rem;
+  }
+}
+
+@keyframes openPopup {
+  0% {
+    visibility: hidden;
+    opacity: 0;
+    animation-timing-function: ease-in;
+    opacity: 0;
+    transform: scale(0) translate(-50%, -50%);
+  }
+
+  38% {
+    animation-timing-function: ease-out;
+    opacity: 1;
+    transform: scale(1) translate(-50%, -50%);
+  }
+
+  55% {
+    animation-timing-function: ease-in;
+    transform: scale(0.7) translate(-50%, -50%);
+  }
+
+  72% {
+    animation-timing-function: ease-out;
+    transform: scale(1) translate(-50%, -50%);
+  }
+
+  81% {
+    animation-timing-function: ease-in;
+    transform: scale(0.84) translate(-50%, -50%);
+  }
+
+  89% {
+    animation-timing-function: ease-out;
+    transform: scale(1) translate(-50%, -50%);
+  }
+
+  95% {
+    animation-timing-function: ease-in;
+    transform: scale(0.95) translate(-50%, -50%);
+  }
+
+  100% {
+    visibility: visible;
+    opacity: 1;
+    animation-timing-function: ease-out;
+    transform: scale(1) translate(-50%, -50%);
+  }
+}
+
+@keyframes closedPopup {
+  0% {
+    visibility: visible;
+    opacity: 1;
+  }
+  100% {
+    visibility: hidden;
+    opacity: 0;
+  }
+}

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

@@ -502,7 +502,7 @@ const Table = forwardRef(({ children, title, description, data, columns, actions
                         }
                         if (actions.import && actions.import.onClick)
                             actions.import.onClick(formData, files);
-                    }, config: { buttons: { okButton: "Yükle", cancelButton: "İptal" } }, windowBlur: true },
+                    }, config: { buttons: { okay: "Yükle", cancel: "İptal" } }, windowBlur: true },
                     React.createElement(Button, { variant: "outlined", status: "success", icon: { element: React.createElement(ARIcon, { icon: "Import", size: 16 }) }, tooltip: { text: actions.import.tooltip, direction: "top" } }))),
                 actions.create && (React.createElement(Button, { variant: "outlined", status: "dark", icon: { element: React.createElement(ARIcon, { icon: "Add", size: 16 }) }, tooltip: { text: actions.create.tooltip, direction: "top" }, onClick: actions.create.onClick }))))))),
         React.createElement("div", { ref: _tableContent, className: "content", onScroll: handleScroll },

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

@@ -6,6 +6,7 @@ const Notification = ({ title, message, status, direction = "bottom-left", trigg
     const _firstLoad = useRef(false);
     const _notificationItems = useRef([]);
     const [items, setItems] = useState([]);
+    // useEffects
     useEffect(() => {
         if (!_firstLoad.current) {
             _firstLoad.current = true;

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

@@ -76,8 +76,8 @@ interface IProps extends IChildren {
      */
     config?: {
         buttons: {
-            okButton: string;
-            cancelButton?: string;
+            okay: string;
+            cancel?: string;
         };
     };
 }

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

@@ -71,11 +71,11 @@ const Popover = ({ children, title, message, content, onConfirm, windowBlur, ful
                     React.createElement(Button, { status: "success", size: "small", onClick: () => {
                             onConfirm(true);
                             setOpen(false);
-                        } }, config?.buttons.okButton ?? "Evet"),
+                        } }, config?.buttons.okay ?? "Evet"),
                     React.createElement(Button, { status: "light", size: "small", onClick: () => {
                             onConfirm(false);
                             setOpen(false);
-                        } }, config?.buttons.cancelButton ?? "Hayır")))), document.body),
+                        } }, config?.buttons.cancel ?? "Hayır")))), document.body),
         React.createElement("div", { ref: _arPopoverElement, onClick: () => setOpen((prev) => !prev) }, children)));
 };
 export default Popover;

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

@@ -0,0 +1,9 @@
+import { PopupButtonProps, Status } from "../../../libs/core/application/contexts/Notification";
+interface IProps {
+    title: string;
+    message?: string;
+    status: Status | number;
+    isOpen: boolean;
+    buttons?: PopupButtonProps | null;
+}
+export default IProps;

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

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

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

@@ -0,0 +1,5 @@
+import React from "react";
+import IProps from "./IProps";
+import "../../../assets/css/components/feedback/popup/popup.css";
+declare const Popup: ({ title, message, status, isOpen, buttons }: IProps) => false | React.ReactPortal;
+export default Popup;

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

@@ -0,0 +1,33 @@
+"use client";
+import React, { useContext, useEffect, useState } from "react";
+import "../../../assets/css/components/feedback/popup/popup.css";
+import Button from "../../form/button";
+import ReactDOM from "react-dom";
+import { NotificationContext } from "../../../libs/core/application/contexts/Notification";
+const Popup = ({ title, message, status, isOpen, buttons }) => {
+    const { setIsPopupOpen } = useContext(NotificationContext);
+    // states
+    const [className, setClassName] = useState(["ar-notification-popup", ""]);
+    // useEffects
+    useEffect(() => {
+        setClassName((prev) => {
+            const updated = [...prev.slice(0, -1), isOpen ? "open" : ""];
+            return updated;
+        });
+    }, [isOpen]);
+    return (isOpen &&
+        ReactDOM.createPortal(React.createElement("div", { className: className.map((c) => c).join(" ") },
+            React.createElement("div", { className: `icon ${status}` }),
+            React.createElement("div", { className: "content" },
+                React.createElement("span", { className: `title ${status}` },
+                    title,
+                    "!"),
+                React.createElement("span", { className: "message" }, message)),
+            React.createElement(Button, { variant: "filled", status: status == "success" ? "success" : "danger", onClick: () => {
+                    (() => buttons?.okay?.onClick && buttons.okay?.onClick())();
+                    (() => {
+                        setIsPopupOpen && setIsPopupOpen((prev) => !prev);
+                    })();
+                } }, buttons?.okay?.text ?? "Tamam")), document.body));
+};
+export default Popup;

package/dist/components/form/date-picker/DATE.js

@@ -16,8 +16,8 @@ class DATE {
     };
     ParseValue = (value, isCloack = false) => {
         const [date, time] = value.split("T");
-        const [clock, _] = isCloack && time ? time.split(".") : "00:00";
-        return !isCloack ? date : `${date}T${clock}`;
+        const [hour, minute] = isCloack && time ? time.split(":") : ["00", "00"];
+        return !isCloack ? date : `${date}T${hour}:${minute}`;
     };
 }
 export default new DATE();

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

@@ -5,11 +5,19 @@ type Props = {
     children: ReactNode;
     direction: Direction;
 };
+export type PopupButtonProps = {
+    okay?: {
+        text?: string;
+        onClick?: () => void;
+    };
+};
 type NotificationContextProps = {
     setTitle: React.Dispatch<React.SetStateAction<string>>;
     setMessage: React.Dispatch<React.SetStateAction<string>>;
     setStatus: React.Dispatch<React.SetStateAction<Status | number>>;
     setTrigger: React.Dispatch<React.SetStateAction<boolean>>;
+    setIsPopupOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setPopupButtons: React.Dispatch<React.SetStateAction<PopupButtonProps | null>>;
 };
 declare const NotificationContext: React.Context<Partial<NotificationContextProps>>;
 declare const NotificationProvider: ({ children, direction }: Props) => React.JSX.Element;

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

@@ -1,19 +1,25 @@
 "use client";
 import React, { createContext, useState } from "react";
 import Notification from "../../../../components/feedback/notification";
+import Popup from "../../../../components/feedback/popup";
 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 [trigger, setTrigger] = useState(false);
+    const [isPopupOpen, setIsPopupOpen] = useState(false);
+    const [popupButtons, setPopupButtons] = useState(null);
     return (React.createElement(NotificationContext.Provider, { value: {
             setTitle,
             setMessage,
             setStatus,
             setTrigger,
+            setIsPopupOpen,
+            setPopupButtons,
         } },
         children,
-        React.createElement(Notification, { title: title, message: message, status: status, direction: direction, trigger: trigger })));
+        React.createElement(Notification, { title: title, message: message, status: status, direction: direction, trigger: trigger }),
+        React.createElement(Popup, { title: title, message: message, status: status, isOpen: isPopupOpen, buttons: popupButtons })));
 };
 export { NotificationContext, NotificationProvider };

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

@@ -1,4 +1,4 @@
-import { Status } from "../contexts/Notification";
+import { PopupButtonProps, Status } from "../contexts/Notification";
 import { ValidationProperties } from "../../../types";
 import { INotificationLocale } from "../locales";
 export declare const useLayout: () => {
@@ -50,6 +50,12 @@ export declare const useNotification: () => {
         message?: string;
         status: Status | number;
     }) => void;
+    popup: ({ title, message, status, buttons, }: {
+        title: string;
+        message?: string;
+        status: Status | number;
+        buttons?: PopupButtonProps | null;
+    }) => void;
 };
 export declare const useValidation: <TData extends object>(data: TData, params: ValidationProperties<TData>[], step?: number) => {
     onSubmit: (callback: (result: boolean) => void) => void;

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

@@ -25,7 +25,7 @@ export const useTranslation = function (currentLanguage, translations) {
 };
 export const useNotification = () => {
     // contexts
-    const { setTitle, setMessage, setStatus, setTrigger } = useContext(NotificationContext);
+    const { setTitle, setMessage, setStatus, setTrigger, setIsPopupOpen, setPopupButtons } = useContext(NotificationContext);
     // methods
     const notification = ({ title, message, status }) => {
         setTitle && setTitle(title);
@@ -33,7 +33,14 @@ export const useNotification = () => {
         setStatus && setStatus(status);
         setTrigger && setTrigger((trigger) => !trigger);
     };
-    return { notification };
+    const popup = ({ title, message, status, buttons, }) => {
+        setTitle && setTitle(title);
+        setMessage && setMessage(message ?? "");
+        setStatus && setStatus(status);
+        setIsPopupOpen && setIsPopupOpen((trigger) => !trigger);
+        setPopupButtons && setPopupButtons(buttons ?? null);
+    };
+    return { notification, popup };
 };
 export const useValidation = function (data, params, step) {
     // refs

package/package.json

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